@lobehub/ui 6.0.0-beta.3 → 6.0.0-beta.5

package/es/Tooltip/TooltipStandalone.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipStandalone.mjs","names":["BaseTooltip"],"sources":["../../src/Tooltip/TooltipStandalone.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport clsx from 'clsx';\nimport {\n  cloneElement,\n  isValidElement,\n  memo,\n  type Ref,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react';\nimport { mergeRefs } from 'react-merge-refs';\n\nimport { useAppElement } from '@/ConfigProvider/AppElementContext';\nimport { useFloatingLayer } from '@/hooks/useFloatingLayer';\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { getFloatingCollisionPadding } from '@/internal/floating';\nimport { styleProps } from '@/styles/stylex/props';\nimport { placementMap } from '@/utils/placement';\n\nimport { TooltipArrowIcon } from './ArrowIcon';\nimport { styles } from './style';\nimport TooltipContent from './TooltipContent';\nimport { type TooltipProps } from './type';\n\nconst DEFAULT_OPEN_DELAY = 400;\nconst DEFAULT_CLOSE_DELAY = 100;\n\n/**\n * Tooltip component - displays small contextual hints on hover/focus\n * Compatible with Ant Design Tooltip-like API (subset)\n */\nexport const TooltipStandalone = memo<TooltipProps>(\n  ({\n    children,\n    title,\n    arrow = false,\n    className,\n    classNames,\n    closeDelay,\n    defaultOpen = false,\n    disabled = false,\n    getPopupContainer,\n    hotkey,\n    hotkeyProps,\n    mouseEnterDelay,\n    mouseLeaveDelay,\n    onOpenChange,\n    open,\n    openDelay,\n    placement = 'top',\n    popupContainer,\n    styles: customStylesProp,\n    zIndex,\n    ref: refProp,\n    positionerProps,\n    triggerProps,\n    popupProps,\n    portalProps,\n    standalone: _standalone,\n    ...restProps\n  }) => {\n    const isClient = useIsClient();\n    const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));\n    const [triggerNode, setTriggerNode] = useState<HTMLElement | null>(null);\n    const triggerCallbackRef = useCallback((node: HTMLElement | null) => {\n      if (node) setTriggerNode(node);\n    }, []);\n\n    const mergedOpen = open ?? uncontrolledOpen;\n    const resolvedOpen = disabled ? false : mergedOpen;\n\n    const handleOpenChange = useCallback(\n      (nextOpen: boolean) => {\n        if (disabled && nextOpen) return;\n        onOpenChange?.(nextOpen);\n        if (open === undefined) {\n          setUncontrolledOpen(nextOpen);\n        }\n      },\n      [disabled, onOpenChange, open],\n    );\n\n    const resolvedOpenDelay = useMemo(() => {\n      if (openDelay !== undefined) return openDelay;\n      if (mouseEnterDelay !== undefined) return mouseEnterDelay * 1000;\n      return DEFAULT_OPEN_DELAY;\n    }, [mouseEnterDelay, openDelay]);\n\n    const resolvedCloseDelay = useMemo(() => {\n      if (closeDelay !== undefined) return closeDelay;\n      if (mouseLeaveDelay !== undefined) return mouseLeaveDelay * 1000;\n      return DEFAULT_CLOSE_DELAY;\n    }, [closeDelay, mouseLeaveDelay]);\n\n    const placementConfig = placementMap[placement] ?? placementMap.top;\n    const baseSideOffset = arrow ? 8 : 6;\n\n    const appElement = useAppElement();\n    const floatingLayerContainer = useFloatingLayer();\n    const portalContainer = floatingLayerContainer ?? appElement;\n\n    const { isNativeButtonTriggerElement } = useNativeButton({\n      children,\n    });\n\n    const slots = useMemo(() => {\n      const customStyles = typeof customStylesProp === 'function' ? undefined : customStylesProp;\n      return {\n        arrow: styleProps(styles.arrow, classNames?.arrow, customStyles?.arrow),\n        popup: styleProps(styles.popup, clsx(className, classNames?.root, classNames?.container), {\n          ...customStyles?.root,\n          ...customStyles?.container,\n        }),\n        positioner: styleProps(styles.positioner, undefined, { zIndex: zIndex ?? 114_514 }),\n        viewport: styleProps(\n          styles.viewport,\n          clsx('lobe-tooltip-viewport', classNames?.content),\n          customStyles?.content,\n        ),\n      };\n    }, [\n      className,\n      classNames?.arrow,\n      classNames?.container,\n      classNames?.content,\n      classNames?.root,\n      customStylesProp,\n      zIndex,\n    ]);\n\n    const triggerElement = useMemo(() => {\n      const popupTriggerId =\n        isValidElement(children) &&\n        (children as any).props['aria-haspopup'] !== undefined &&\n        (children as any).props.id !== undefined\n          ? (children as any).props.id\n          : undefined;\n\n      const baseTriggerProps = {\n        closeDelay: resolvedCloseDelay,\n        delay: resolvedOpenDelay,\n        disabled,\n        ...triggerProps,\n        id: popupTriggerId ?? triggerProps?.id,\n      };\n\n      if (isValidElement(children)) {\n        return (\n          <BaseTooltip.Trigger\n            {...baseTriggerProps}\n            render={(props) => {\n              // Base UI's trigger props include `type=\"button\"` by default.\n              // If we render into a non-<button> element, that prop is invalid and can warn.\n              const resolvedProps = (() => {\n                if (isNativeButtonTriggerElement) return props as any;\n                // eslint-disable-next-line unused-imports/no-unused-vars\n                const { type, ref: triggerRef, ...triggerRest } = props as any;\n                return triggerRest;\n              })();\n\n              const childProps = (children as any).props;\n              const mergedProps = mergeProps(restProps, childProps, resolvedProps);\n              const shouldPreservePopupTriggerId =\n                childProps['aria-haspopup'] !== undefined && childProps.id !== undefined;\n\n              return cloneElement(children as any, {\n                ...mergedProps,\n                id: shouldPreservePopupTriggerId ? childProps.id : mergedProps.id,\n                ref: mergeRefs([\n                  (children as any).ref,\n                  (props as any).ref,\n                  refProp,\n                  triggerCallbackRef,\n                ]),\n              });\n            }}\n          />\n        );\n      }\n\n      return (\n        <BaseTooltip.Trigger\n          {...baseTriggerProps}\n          ref={mergeRefs([refProp, triggerCallbackRef]) as Ref<HTMLButtonElement>}\n        >\n          {children}\n        </BaseTooltip.Trigger>\n      );\n    }, [\n      children,\n      disabled,\n      isNativeButtonTriggerElement,\n      refProp,\n      resolvedCloseDelay,\n      resolvedOpenDelay,\n      restProps,\n      triggerCallbackRef,\n      triggerProps,\n    ]);\n\n    const customContainer = useMemo(() => {\n      if (popupContainer) return popupContainer;\n      if (!getPopupContainer || !isClient || !triggerNode) return undefined;\n      return getPopupContainer(triggerNode);\n    }, [popupContainer, getPopupContainer, isClient, triggerNode]);\n\n    const popup = useMemo(\n      () => (\n        <BaseTooltip.Positioner\n          align={placementConfig.align}\n          data-placement={placement}\n          side={placementConfig.side}\n          sideOffset={baseSideOffset}\n          {...slots.positioner}\n          {...positionerProps}\n          collisionPadding={positionerProps?.collisionPadding ?? getFloatingCollisionPadding()}\n        >\n          <BaseTooltip.Popup {...slots.popup} {...popupProps}>\n            {arrow && <BaseTooltip.Arrow {...slots.arrow}>{TooltipArrowIcon}</BaseTooltip.Arrow>}\n            <BaseTooltip.Viewport {...slots.viewport}>\n              <TooltipContent hotkey={hotkey} hotkeyProps={hotkeyProps} title={title} />\n            </BaseTooltip.Viewport>\n          </BaseTooltip.Popup>\n        </BaseTooltip.Positioner>\n      ),\n      [\n        arrow,\n        baseSideOffset,\n        hotkey,\n        hotkeyProps,\n        placement,\n        placementConfig.align,\n        placementConfig.side,\n        popupProps,\n        positionerProps,\n        slots,\n        title,\n      ],\n    );\n\n    if (title == null && !hotkey) {\n      return children;\n    }\n\n    const resolvedPortalContainer = customContainer ?? portalContainer;\n\n    return (\n      <BaseTooltip.Root\n        defaultOpen={defaultOpen}\n        disabled={disabled}\n        open={resolvedOpen}\n        onOpenChange={handleOpenChange}\n      >\n        {triggerElement}\n        {resolvedPortalContainer ? (\n          <BaseTooltip.Portal container={resolvedPortalContainer} {...portalProps}>\n            {popup}\n          </BaseTooltip.Portal>\n        ) : null}\n      </BaseTooltip.Root>\n    );\n  },\n);\n\nTooltipStandalone.displayName = 'TooltipStandalone';\n"],"mappings":"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"}
+{"version":3,"file":"TooltipStandalone.mjs","names":["BaseTooltip"],"sources":["../../src/Tooltip/TooltipStandalone.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport clsx from 'clsx';\nimport {\n  cloneElement,\n  isValidElement,\n  memo,\n  type Ref,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { useAppElement } from '@/ConfigProvider/AppElementContext';\nimport { useFloatingLayer } from '@/hooks/useFloatingLayer';\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { getFloatingCollisionPadding } from '@/internal/floating';\nimport { styleProps } from '@/styles/stylex/props';\nimport { mergeRefs } from '@/utils/mergeRefs';\nimport { placementMap } from '@/utils/placement';\n\nimport { TooltipArrowIcon } from './ArrowIcon';\nimport { styles } from './style';\nimport TooltipContent from './TooltipContent';\nimport { type TooltipProps } from './type';\n\nconst DEFAULT_OPEN_DELAY = 400;\nconst DEFAULT_CLOSE_DELAY = 100;\n\n/**\n * Tooltip component - displays small contextual hints on hover/focus\n * Compatible with Ant Design Tooltip-like API (subset)\n */\nexport const TooltipStandalone = memo<TooltipProps>(\n  ({\n    children,\n    title,\n    arrow = false,\n    className,\n    classNames,\n    closeDelay,\n    defaultOpen = false,\n    disabled = false,\n    getPopupContainer,\n    hotkey,\n    hotkeyProps,\n    mouseEnterDelay,\n    mouseLeaveDelay,\n    onOpenChange,\n    open,\n    openDelay,\n    placement = 'top',\n    popupContainer,\n    styles: customStylesProp,\n    zIndex,\n    ref: refProp,\n    positionerProps,\n    triggerProps,\n    popupProps,\n    portalProps,\n    standalone: _standalone,\n    ...restProps\n  }) => {\n    const isClient = useIsClient();\n    const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));\n    const [triggerNode, setTriggerNode] = useState<HTMLElement | null>(null);\n    const triggerCallbackRef = useCallback((node: HTMLElement | null) => {\n      if (node) setTriggerNode(node);\n    }, []);\n\n    const mergedOpen = open ?? uncontrolledOpen;\n    const resolvedOpen = disabled ? false : mergedOpen;\n\n    const handleOpenChange = useCallback(\n      (nextOpen: boolean) => {\n        if (disabled && nextOpen) return;\n        onOpenChange?.(nextOpen);\n        if (open === undefined) {\n          setUncontrolledOpen(nextOpen);\n        }\n      },\n      [disabled, onOpenChange, open],\n    );\n\n    const resolvedOpenDelay = useMemo(() => {\n      if (openDelay !== undefined) return openDelay;\n      if (mouseEnterDelay !== undefined) return mouseEnterDelay * 1000;\n      return DEFAULT_OPEN_DELAY;\n    }, [mouseEnterDelay, openDelay]);\n\n    const resolvedCloseDelay = useMemo(() => {\n      if (closeDelay !== undefined) return closeDelay;\n      if (mouseLeaveDelay !== undefined) return mouseLeaveDelay * 1000;\n      return DEFAULT_CLOSE_DELAY;\n    }, [closeDelay, mouseLeaveDelay]);\n\n    const placementConfig = placementMap[placement] ?? placementMap.top;\n    const baseSideOffset = arrow ? 8 : 6;\n\n    const appElement = useAppElement();\n    const floatingLayerContainer = useFloatingLayer();\n    const portalContainer = floatingLayerContainer ?? appElement;\n\n    const { isNativeButtonTriggerElement } = useNativeButton({\n      children,\n    });\n\n    const slots = useMemo(() => {\n      const customStyles = typeof customStylesProp === 'function' ? undefined : customStylesProp;\n      return {\n        arrow: styleProps(styles.arrow, classNames?.arrow, customStyles?.arrow),\n        popup: styleProps(styles.popup, clsx(className, classNames?.root, classNames?.container), {\n          ...customStyles?.root,\n          ...customStyles?.container,\n        }),\n        positioner: styleProps(styles.positioner, undefined, { zIndex: zIndex ?? 114_514 }),\n        viewport: styleProps(\n          styles.viewport,\n          clsx('lobe-tooltip-viewport', classNames?.content),\n          customStyles?.content,\n        ),\n      };\n    }, [\n      className,\n      classNames?.arrow,\n      classNames?.container,\n      classNames?.content,\n      classNames?.root,\n      customStylesProp,\n      zIndex,\n    ]);\n\n    const triggerElement = useMemo(() => {\n      const popupTriggerId =\n        isValidElement(children) &&\n        (children as any).props['aria-haspopup'] !== undefined &&\n        (children as any).props.id !== undefined\n          ? (children as any).props.id\n          : undefined;\n\n      const baseTriggerProps = {\n        closeDelay: resolvedCloseDelay,\n        delay: resolvedOpenDelay,\n        disabled,\n        ...triggerProps,\n        id: popupTriggerId ?? triggerProps?.id,\n      };\n\n      if (isValidElement(children)) {\n        return (\n          <BaseTooltip.Trigger\n            {...baseTriggerProps}\n            render={(props) => {\n              // Base UI's trigger props include `type=\"button\"` by default.\n              // If we render into a non-<button> element, that prop is invalid and can warn.\n              const resolvedProps = (() => {\n                if (isNativeButtonTriggerElement) return props as any;\n                // eslint-disable-next-line unused-imports/no-unused-vars\n                const { type, ref: triggerRef, ...triggerRest } = props as any;\n                return triggerRest;\n              })();\n\n              const childProps = (children as any).props;\n              const mergedProps = mergeProps(restProps, childProps, resolvedProps);\n              const shouldPreservePopupTriggerId =\n                childProps['aria-haspopup'] !== undefined && childProps.id !== undefined;\n\n              return cloneElement(children as any, {\n                ...mergedProps,\n                id: shouldPreservePopupTriggerId ? childProps.id : mergedProps.id,\n                ref: mergeRefs([\n                  (children as any).ref,\n                  (props as any).ref,\n                  refProp,\n                  triggerCallbackRef,\n                ]),\n              });\n            }}\n          />\n        );\n      }\n\n      return (\n        <BaseTooltip.Trigger\n          {...baseTriggerProps}\n          ref={mergeRefs([refProp, triggerCallbackRef]) as Ref<HTMLButtonElement>}\n        >\n          {children}\n        </BaseTooltip.Trigger>\n      );\n    }, [\n      children,\n      disabled,\n      isNativeButtonTriggerElement,\n      refProp,\n      resolvedCloseDelay,\n      resolvedOpenDelay,\n      restProps,\n      triggerCallbackRef,\n      triggerProps,\n    ]);\n\n    const customContainer = useMemo(() => {\n      if (popupContainer) return popupContainer;\n      if (!getPopupContainer || !isClient || !triggerNode) return undefined;\n      return getPopupContainer(triggerNode);\n    }, [popupContainer, getPopupContainer, isClient, triggerNode]);\n\n    const popup = useMemo(\n      () => (\n        <BaseTooltip.Positioner\n          align={placementConfig.align}\n          data-placement={placement}\n          side={placementConfig.side}\n          sideOffset={baseSideOffset}\n          {...slots.positioner}\n          {...positionerProps}\n          collisionPadding={positionerProps?.collisionPadding ?? getFloatingCollisionPadding()}\n        >\n          <BaseTooltip.Popup {...slots.popup} {...popupProps}>\n            {arrow && <BaseTooltip.Arrow {...slots.arrow}>{TooltipArrowIcon}</BaseTooltip.Arrow>}\n            <BaseTooltip.Viewport {...slots.viewport}>\n              <TooltipContent hotkey={hotkey} hotkeyProps={hotkeyProps} title={title} />\n            </BaseTooltip.Viewport>\n          </BaseTooltip.Popup>\n        </BaseTooltip.Positioner>\n      ),\n      [\n        arrow,\n        baseSideOffset,\n        hotkey,\n        hotkeyProps,\n        placement,\n        placementConfig.align,\n        placementConfig.side,\n        popupProps,\n        positionerProps,\n        slots,\n        title,\n      ],\n    );\n\n    if (title == null && !hotkey) {\n      return children;\n    }\n\n    const resolvedPortalContainer = customContainer ?? portalContainer;\n\n    return (\n      <BaseTooltip.Root\n        defaultOpen={defaultOpen}\n        disabled={disabled}\n        open={resolvedOpen}\n        onOpenChange={handleOpenChange}\n      >\n        {triggerElement}\n        {resolvedPortalContainer ? (\n          <BaseTooltip.Portal container={resolvedPortalContainer} {...portalProps}>\n            {popup}\n          </BaseTooltip.Portal>\n        ) : null}\n      </BaseTooltip.Root>\n    );\n  },\n);\n\nTooltipStandalone.displayName = 'TooltipStandalone';\n"],"mappings":"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"}

package/es/Tree/Tree.mjs

@@ -1,5 +1,6 @@
 "use client";
 import { styleProps } from "../styles/stylex/props.mjs";
+import { useControlledState } from "../hooks/useControlledState.mjs";
 import { FocusScope } from "../FocusScope/FocusScope.mjs";
 import { focusScopeItem, useScopeArrowNav } from "../FocusScope/useScopeArrowNav.mjs";
 import { styles } from "./style.mjs";
@@ -9,7 +10,6 @@ import TreeNode from "./TreeNode.mjs";
 import { memo, useId, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
-import useControlledState from "use-merge-value";
 //#region src/Tree/Tree.tsx
 const EMPTY = [];
 const Tree = memo(({ blockNode = false, checkStrictly = false, checkable = false, checkedKeys: checkedKeysProp, className, classNames = {}, defaultCheckedKeys = EMPTY, defaultExpandAll = false, defaultExpandedKeys = EMPTY, defaultSelectedKeys = EMPTY, disabled = false, expandedKeys: expandedKeysProp, indent = 20, multiple = false, onCheck, onExpand, onRightClick, onSelect, scopeId: scopeIdProp, selectedKeys: selectedKeysProp, showIcon = false, showLine = false, size = "middle", style, styles: customStyles = {}, switcherIcon, titleRender, treeData, vimKeys = false }) => {

package/es/Tree/Tree.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.mjs","names":[],"sources":["../../src/Tree/Tree.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { memo, useId, useMemo, useRef, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { FocusScope, focusScopeItem, useScopeArrowNav } from '@/FocusScope';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { TreeContext, type TreeContextValue } from './context';\nimport { styles } from './style';\nimport TreeNode from './TreeNode';\nimport type { TreeDataNode, TreeProps } from './type';\nimport { conductCheck, flattenVisible, getAllKeys, getAncestorKeys, getSubtreeKeys } from './utils';\n\nconst EMPTY: string[] = [];\n\nconst Tree = memo<TreeProps>(\n  ({\n    blockNode = false,\n    checkStrictly = false,\n    checkable = false,\n    checkedKeys: checkedKeysProp,\n    className,\n    classNames = {},\n    defaultCheckedKeys = EMPTY,\n    defaultExpandAll = false,\n    defaultExpandedKeys = EMPTY,\n    defaultSelectedKeys = EMPTY,\n    disabled = false,\n    expandedKeys: expandedKeysProp,\n    indent = 20,\n    multiple = false,\n    onCheck,\n    onExpand,\n    onRightClick,\n    onSelect,\n    scopeId: scopeIdProp,\n    selectedKeys: selectedKeysProp,\n    showIcon = false,\n    showLine = false,\n    size = 'middle',\n    style,\n    styles: customStyles = {},\n    switcherIcon,\n    titleRender,\n    treeData,\n    vimKeys = false,\n  }) => {\n    const generatedId = useId();\n    const scopeId = scopeIdProp ?? generatedId;\n    const [expandedKeys, setExpandedKeys] = useControlledState<string[]>(\n      defaultExpandAll ? getAllKeys(treeData) : defaultExpandedKeys,\n      { value: expandedKeysProp },\n    );\n    const [selectedKeys, setSelectedKeys] = useControlledState<string[]>(defaultSelectedKeys, {\n      value: selectedKeysProp,\n    });\n    const [checkedKeys, setCheckedKeys] = useControlledState<string[]>(defaultCheckedKeys, {\n      value: checkedKeysProp,\n    });\n\n    const expanded = useMemo(() => new Set(expandedKeys), [expandedKeys]);\n    const selected = useMemo(() => new Set(selectedKeys), [selectedKeys]);\n    const flat = useMemo(() => flattenVisible(treeData, expanded), [treeData, expanded]);\n    const { checked, halfChecked } = useMemo(\n      () =>\n        checkStrictly\n          ? { checked: new Set(checkedKeys), halfChecked: new Set<string>() }\n          : conductCheck(treeData, checkedKeys),\n      [checkStrictly, treeData, checkedKeys],\n    );\n\n    const [activeKeyState, setActiveKeyState] = useState<string | null>(null);\n    const setActiveKey = setActiveKeyState;\n    const activeKey =\n      activeKeyState && flat.some((row) => row.node.key === activeKeyState)\n        ? activeKeyState\n        : (selectedKeys.find((key) => flat.some((row) => row.node.key === key)) ??\n          flat[0]?.node.key ??\n          null);\n\n    const anchorRef = useRef<string | null>(null);\n\n    const rowOf = (key: string) =>\n      document.querySelector<HTMLElement>(`[data-focus-scope=\"${scopeId}\"] [data-id=\"${key}\"]`);\n    const focusRow = (key: string) => {\n      setActiveKey(key);\n      const row = rowOf(key);\n      if (row) focusScopeItem(scopeId, row);\n    };\n\n    const isDisabled = (node: TreeDataNode) => disabled || !!node.disabled;\n\n    const toggleExpand = (node: TreeDataNode) => {\n      const willExpand = !expanded.has(node.key);\n      const next = willExpand\n        ? [...expandedKeys, node.key]\n        : expandedKeys.filter((key) => key !== node.key);\n      setExpandedKeys(next);\n      onExpand?.(next, { expanded: willExpand, node });\n    };\n\n    const toggleSelect: TreeContextValue['toggleSelect'] = (node, event) => {\n      if (isDisabled(node) || node.selectable === false) return;\n      let next: string[];\n      if (multiple && event?.shiftKey && anchorRef.current) {\n        const a = flat.findIndex((row) => row.node.key === anchorRef.current);\n        const b = flat.findIndex((row) => row.node.key === node.key);\n        next = flat\n          .slice(Math.min(a, b), Math.max(a, b) + 1)\n          .filter((row) => !isDisabled(row.node) && row.node.selectable !== false)\n          .map((row) => row.node.key);\n      } else if (multiple && (event?.metaKey || event?.ctrlKey)) {\n        next = selected.has(node.key)\n          ? selectedKeys.filter((key) => key !== node.key)\n          : [...selectedKeys, node.key];\n        anchorRef.current = node.key;\n      } else {\n        next = [node.key];\n        anchorRef.current = node.key;\n      }\n      setSelectedKeys(next);\n      setActiveKey(node.key);\n      onSelect?.(next, { node, selected: next.includes(node.key) });\n    };\n\n    const toggleCheck = (node: TreeDataNode) => {\n      if (isDisabled(node) || node.checkable === false) return;\n      const willCheck = !checked.has(node.key);\n      const keys = checkStrictly ? [node.key] : getSubtreeKeys(node);\n      const base = new Set(checkStrictly ? checkedKeys : checked);\n      keys.forEach((key) => (willCheck ? base.add(key) : base.delete(key)));\n      if (!willCheck && !checkStrictly)\n        getAncestorKeys(treeData, node.key).forEach((key) => base.delete(key));\n      const next = checkStrictly ? [...base] : [...conductCheck(treeData, base).checked];\n      setCheckedKeys(next);\n      setActiveKey(node.key);\n      onCheck?.(next, { checked: willCheck, node });\n    };\n\n    const currentRow = () => {\n      const focused = document.activeElement?.closest<HTMLElement>('[role=\"treeitem\"]');\n      const key = focused?.dataset.id ?? activeKey;\n      return flat.find((row) => row.node.key === key);\n    };\n\n    const withRow =\n      (fn: (row: (typeof flat)[number], event: KeyboardEvent) => void) =>\n      (event: KeyboardEvent) => {\n        const row = currentRow();\n        if (row) fn(row, event);\n      };\n\n    useScopeArrowNav({\n      extra: {\n        ' ': withRow((row, event) => {\n          if (checkable && row.node.checkable !== false) toggleCheck(row.node);\n          else toggleSelect(row.node, event);\n        }),\n        '*': withRow((row) => {\n          const siblings = flat.filter(\n            (r) => r.parentKey === row.parentKey && r.hasChildren && !expanded.has(r.node.key),\n          );\n          if (siblings.length === 0) return;\n          const next = [...expandedKeys, ...siblings.map((r) => r.node.key)];\n          setExpandedKeys(next);\n          onExpand?.(next, { expanded: true, node: row.node });\n        }),\n        'ArrowLeft': withRow((row) => {\n          if (row.hasChildren && expanded.has(row.node.key)) toggleExpand(row.node);\n          else if (row.parentKey) focusRow(row.parentKey);\n        }),\n        'ArrowRight': withRow((row) => {\n          if (!row.hasChildren) return;\n          if (expanded.has(row.node.key)) focusRow(flat[row.index + 1].node.key);\n          else toggleExpand(row.node);\n        }),\n        'Enter': withRow((row, event) => toggleSelect(row.node, event)),\n      },\n      itemSelector: '[role=\"treeitem\"]',\n      onItemFocus: (el) => el.dataset.id && setActiveKey(el.dataset.id),\n      scopeId,\n      vimKeys,\n    });\n\n    const ctx: TreeContextValue = {\n      activeKey,\n      blockNode,\n      checkable,\n      checked,\n      classNames,\n      disabled,\n      expanded,\n      halfChecked,\n      indent,\n      onRightClick: (event, node) => onRightClick?.({ event, node }),\n      selected,\n      setActiveKey,\n      showIcon,\n      showLine,\n      size,\n      styles: customStyles,\n      switcherIcon,\n      titleRender,\n      toggleCheck,\n      toggleExpand,\n      toggleSelect,\n    };\n\n    return (\n      <TreeContext value={ctx}>\n        <FocusScope\n          id={scopeId}\n          role=\"tree\"\n          {...styleProps(styles.root, clsx(classNames.root, className), {\n            ...customStyles.root,\n            ...style,\n          })}\n        >\n          {treeData.map((node, i) => (\n            <TreeNode\n              depth={0}\n              isLast={i === treeData.length - 1}\n              key={node.key}\n              node={node}\n              trail={[]}\n            />\n          ))}\n        </FocusScope>\n      </TreeContext>\n    );\n  },\n);\n\nTree.displayName = 'Tree';\n\nexport default Tree;\n"],"mappings":"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"}
+{"version":3,"file":"Tree.mjs","names":[],"sources":["../../src/Tree/Tree.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { memo, useId, useMemo, useRef, useState } from 'react';\n\nimport { FocusScope, focusScopeItem, useScopeArrowNav } from '@/FocusScope';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { TreeContext, type TreeContextValue } from './context';\nimport { styles } from './style';\nimport TreeNode from './TreeNode';\nimport type { TreeDataNode, TreeProps } from './type';\nimport { conductCheck, flattenVisible, getAllKeys, getAncestorKeys, getSubtreeKeys } from './utils';\n\nconst EMPTY: string[] = [];\n\nconst Tree = memo<TreeProps>(\n  ({\n    blockNode = false,\n    checkStrictly = false,\n    checkable = false,\n    checkedKeys: checkedKeysProp,\n    className,\n    classNames = {},\n    defaultCheckedKeys = EMPTY,\n    defaultExpandAll = false,\n    defaultExpandedKeys = EMPTY,\n    defaultSelectedKeys = EMPTY,\n    disabled = false,\n    expandedKeys: expandedKeysProp,\n    indent = 20,\n    multiple = false,\n    onCheck,\n    onExpand,\n    onRightClick,\n    onSelect,\n    scopeId: scopeIdProp,\n    selectedKeys: selectedKeysProp,\n    showIcon = false,\n    showLine = false,\n    size = 'middle',\n    style,\n    styles: customStyles = {},\n    switcherIcon,\n    titleRender,\n    treeData,\n    vimKeys = false,\n  }) => {\n    const generatedId = useId();\n    const scopeId = scopeIdProp ?? generatedId;\n    const [expandedKeys, setExpandedKeys] = useControlledState<string[]>(\n      defaultExpandAll ? getAllKeys(treeData) : defaultExpandedKeys,\n      { value: expandedKeysProp },\n    );\n    const [selectedKeys, setSelectedKeys] = useControlledState<string[]>(defaultSelectedKeys, {\n      value: selectedKeysProp,\n    });\n    const [checkedKeys, setCheckedKeys] = useControlledState<string[]>(defaultCheckedKeys, {\n      value: checkedKeysProp,\n    });\n\n    const expanded = useMemo(() => new Set(expandedKeys), [expandedKeys]);\n    const selected = useMemo(() => new Set(selectedKeys), [selectedKeys]);\n    const flat = useMemo(() => flattenVisible(treeData, expanded), [treeData, expanded]);\n    const { checked, halfChecked } = useMemo(\n      () =>\n        checkStrictly\n          ? { checked: new Set(checkedKeys), halfChecked: new Set<string>() }\n          : conductCheck(treeData, checkedKeys),\n      [checkStrictly, treeData, checkedKeys],\n    );\n\n    const [activeKeyState, setActiveKeyState] = useState<string | null>(null);\n    const setActiveKey = setActiveKeyState;\n    const activeKey =\n      activeKeyState && flat.some((row) => row.node.key === activeKeyState)\n        ? activeKeyState\n        : (selectedKeys.find((key) => flat.some((row) => row.node.key === key)) ??\n          flat[0]?.node.key ??\n          null);\n\n    const anchorRef = useRef<string | null>(null);\n\n    const rowOf = (key: string) =>\n      document.querySelector<HTMLElement>(`[data-focus-scope=\"${scopeId}\"] [data-id=\"${key}\"]`);\n    const focusRow = (key: string) => {\n      setActiveKey(key);\n      const row = rowOf(key);\n      if (row) focusScopeItem(scopeId, row);\n    };\n\n    const isDisabled = (node: TreeDataNode) => disabled || !!node.disabled;\n\n    const toggleExpand = (node: TreeDataNode) => {\n      const willExpand = !expanded.has(node.key);\n      const next = willExpand\n        ? [...expandedKeys, node.key]\n        : expandedKeys.filter((key) => key !== node.key);\n      setExpandedKeys(next);\n      onExpand?.(next, { expanded: willExpand, node });\n    };\n\n    const toggleSelect: TreeContextValue['toggleSelect'] = (node, event) => {\n      if (isDisabled(node) || node.selectable === false) return;\n      let next: string[];\n      if (multiple && event?.shiftKey && anchorRef.current) {\n        const a = flat.findIndex((row) => row.node.key === anchorRef.current);\n        const b = flat.findIndex((row) => row.node.key === node.key);\n        next = flat\n          .slice(Math.min(a, b), Math.max(a, b) + 1)\n          .filter((row) => !isDisabled(row.node) && row.node.selectable !== false)\n          .map((row) => row.node.key);\n      } else if (multiple && (event?.metaKey || event?.ctrlKey)) {\n        next = selected.has(node.key)\n          ? selectedKeys.filter((key) => key !== node.key)\n          : [...selectedKeys, node.key];\n        anchorRef.current = node.key;\n      } else {\n        next = [node.key];\n        anchorRef.current = node.key;\n      }\n      setSelectedKeys(next);\n      setActiveKey(node.key);\n      onSelect?.(next, { node, selected: next.includes(node.key) });\n    };\n\n    const toggleCheck = (node: TreeDataNode) => {\n      if (isDisabled(node) || node.checkable === false) return;\n      const willCheck = !checked.has(node.key);\n      const keys = checkStrictly ? [node.key] : getSubtreeKeys(node);\n      const base = new Set(checkStrictly ? checkedKeys : checked);\n      keys.forEach((key) => (willCheck ? base.add(key) : base.delete(key)));\n      if (!willCheck && !checkStrictly)\n        getAncestorKeys(treeData, node.key).forEach((key) => base.delete(key));\n      const next = checkStrictly ? [...base] : [...conductCheck(treeData, base).checked];\n      setCheckedKeys(next);\n      setActiveKey(node.key);\n      onCheck?.(next, { checked: willCheck, node });\n    };\n\n    const currentRow = () => {\n      const focused = document.activeElement?.closest<HTMLElement>('[role=\"treeitem\"]');\n      const key = focused?.dataset.id ?? activeKey;\n      return flat.find((row) => row.node.key === key);\n    };\n\n    const withRow =\n      (fn: (row: (typeof flat)[number], event: KeyboardEvent) => void) =>\n      (event: KeyboardEvent) => {\n        const row = currentRow();\n        if (row) fn(row, event);\n      };\n\n    useScopeArrowNav({\n      extra: {\n        ' ': withRow((row, event) => {\n          if (checkable && row.node.checkable !== false) toggleCheck(row.node);\n          else toggleSelect(row.node, event);\n        }),\n        '*': withRow((row) => {\n          const siblings = flat.filter(\n            (r) => r.parentKey === row.parentKey && r.hasChildren && !expanded.has(r.node.key),\n          );\n          if (siblings.length === 0) return;\n          const next = [...expandedKeys, ...siblings.map((r) => r.node.key)];\n          setExpandedKeys(next);\n          onExpand?.(next, { expanded: true, node: row.node });\n        }),\n        'ArrowLeft': withRow((row) => {\n          if (row.hasChildren && expanded.has(row.node.key)) toggleExpand(row.node);\n          else if (row.parentKey) focusRow(row.parentKey);\n        }),\n        'ArrowRight': withRow((row) => {\n          if (!row.hasChildren) return;\n          if (expanded.has(row.node.key)) focusRow(flat[row.index + 1].node.key);\n          else toggleExpand(row.node);\n        }),\n        'Enter': withRow((row, event) => toggleSelect(row.node, event)),\n      },\n      itemSelector: '[role=\"treeitem\"]',\n      onItemFocus: (el) => el.dataset.id && setActiveKey(el.dataset.id),\n      scopeId,\n      vimKeys,\n    });\n\n    const ctx: TreeContextValue = {\n      activeKey,\n      blockNode,\n      checkable,\n      checked,\n      classNames,\n      disabled,\n      expanded,\n      halfChecked,\n      indent,\n      onRightClick: (event, node) => onRightClick?.({ event, node }),\n      selected,\n      setActiveKey,\n      showIcon,\n      showLine,\n      size,\n      styles: customStyles,\n      switcherIcon,\n      titleRender,\n      toggleCheck,\n      toggleExpand,\n      toggleSelect,\n    };\n\n    return (\n      <TreeContext value={ctx}>\n        <FocusScope\n          id={scopeId}\n          role=\"tree\"\n          {...styleProps(styles.root, clsx(classNames.root, className), {\n            ...customStyles.root,\n            ...style,\n          })}\n        >\n          {treeData.map((node, i) => (\n            <TreeNode\n              depth={0}\n              isLast={i === treeData.length - 1}\n              key={node.key}\n              node={node}\n              trail={[]}\n            />\n          ))}\n        </FocusScope>\n      </TreeContext>\n    );\n  },\n);\n\nTree.displayName = 'Tree';\n\nexport default Tree;\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,QAAkB,CAAC;AAEzB,MAAM,OAAO,MACV,EACC,YAAY,OACZ,gBAAgB,OAChB,YAAY,OACZ,aAAa,iBACb,WACA,aAAa,CAAC,GACd,qBAAqB,OACrB,mBAAmB,OACnB,sBAAsB,OACtB,sBAAsB,OACtB,WAAW,OACX,cAAc,kBACd,SAAS,IACT,WAAW,OACX,SACA,UACA,cACA,UACA,SAAS,aACT,cAAc,kBACd,WAAW,OACX,WAAW,OACX,OAAO,UACP,OACA,QAAQ,eAAe,CAAC,GACxB,cACA,aACA,UACA,UAAU,YACN;CACJ,MAAM,cAAc,MAAM;CAC1B,MAAM,UAAU,eAAe;CAC/B,MAAM,CAAC,cAAc,mBAAmB,mBACtC,mBAAmB,WAAW,QAAQ,IAAI,qBAC1C,EAAE,OAAO,iBAAiB,CAC5B;CACA,MAAM,CAAC,cAAc,mBAAmB,mBAA6B,qBAAqB,EACxF,OAAO,iBACT,CAAC;CACD,MAAM,CAAC,aAAa,kBAAkB,mBAA6B,oBAAoB,EACrF,OAAO,gBACT,CAAC;CAED,MAAM,WAAW,cAAc,IAAI,IAAI,YAAY,GAAG,CAAC,YAAY,CAAC;CACpE,MAAM,WAAW,cAAc,IAAI,IAAI,YAAY,GAAG,CAAC,YAAY,CAAC;CACpE,MAAM,OAAO,cAAc,eAAe,UAAU,QAAQ,GAAG,CAAC,UAAU,QAAQ,CAAC;CACnF,MAAM,EAAE,SAAS,gBAAgB,cAE7B,gBACI;EAAE,SAAS,IAAI,IAAI,WAAW;EAAG,6BAAa,IAAI,IAAY;CAAE,IAChE,aAAa,UAAU,WAAW,GACxC;EAAC;EAAe;EAAU;CAAW,CACvC;CAEA,MAAM,CAAC,gBAAgB,qBAAqB,SAAwB,IAAI;CACxE,MAAM,eAAe;CACrB,MAAM,YACJ,kBAAkB,KAAK,MAAM,QAAQ,IAAI,KAAK,QAAQ,cAAc,IAChE,iBACC,aAAa,MAAM,QAAQ,KAAK,MAAM,QAAQ,IAAI,KAAK,QAAQ,GAAG,CAAC,KACpE,KAAK,EAAE,EAAE,KAAK,OACd;CAEN,MAAM,YAAY,OAAsB,IAAI;CAE5C,MAAM,SAAS,QACb,SAAS,cAA2B,sBAAsB,QAAQ,eAAe,IAAI,GAAG;CAC1F,MAAM,YAAY,QAAgB;EAChC,aAAa,GAAG;EAChB,MAAM,MAAM,MAAM,GAAG;EACrB,IAAI,KAAK,eAAe,SAAS,GAAG;CACtC;CAEA,MAAM,cAAc,SAAuB,YAAY,CAAC,CAAC,KAAK;CAE9D,MAAM,gBAAgB,SAAuB;EAC3C,MAAM,aAAa,CAAC,SAAS,IAAI,KAAK,GAAG;EACzC,MAAM,OAAO,aACT,CAAC,GAAG,cAAc,KAAK,GAAG,IAC1B,aAAa,QAAQ,QAAQ,QAAQ,KAAK,GAAG;EACjD,gBAAgB,IAAI;EACpB,WAAW,MAAM;GAAE,UAAU;GAAY;EAAK,CAAC;CACjD;CAEA,MAAM,gBAAkD,MAAM,UAAU;EACtE,IAAI,WAAW,IAAI,KAAK,KAAK,eAAe,OAAO;EACnD,IAAI;EACJ,IAAI,YAAY,OAAO,YAAY,UAAU,SAAS;GACpD,MAAM,IAAI,KAAK,WAAW,QAAQ,IAAI,KAAK,QAAQ,UAAU,OAAO;GACpE,MAAM,IAAI,KAAK,WAAW,QAAQ,IAAI,KAAK,QAAQ,KAAK,GAAG;GAC3D,OAAO,KACJ,MAAM,KAAK,IAAI,GAAG,CAAC,GAAG,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC,CAAC,CACzC,QAAQ,QAAQ,CAAC,WAAW,IAAI,IAAI,KAAK,IAAI,KAAK,eAAe,KAAK,CAAC,CACvE,KAAK,QAAQ,IAAI,KAAK,GAAG;EAC9B,OAAO,IAAI,aAAa,OAAO,WAAW,OAAO,UAAU;GACzD,OAAO,SAAS,IAAI,KAAK,GAAG,IACxB,aAAa,QAAQ,QAAQ,QAAQ,KAAK,GAAG,IAC7C,CAAC,GAAG,cAAc,KAAK,GAAG;GAC9B,UAAU,UAAU,KAAK;EAC3B,OAAO;GACL,OAAO,CAAC,KAAK,GAAG;GAChB,UAAU,UAAU,KAAK;EAC3B;EACA,gBAAgB,IAAI;EACpB,aAAa,KAAK,GAAG;EACrB,WAAW,MAAM;GAAE;GAAM,UAAU,KAAK,SAAS,KAAK,GAAG;EAAE,CAAC;CAC9D;CAEA,MAAM,eAAe,SAAuB;EAC1C,IAAI,WAAW,IAAI,KAAK,KAAK,cAAc,OAAO;EAClD,MAAM,YAAY,CAAC,QAAQ,IAAI,KAAK,GAAG;EACvC,MAAM,OAAO,gBAAgB,CAAC,KAAK,GAAG,IAAI,eAAe,IAAI;EAC7D,MAAM,OAAO,IAAI,IAAI,gBAAgB,cAAc,OAAO;EAC1D,KAAK,SAAS,QAAS,YAAY,KAAK,IAAI,GAAG,IAAI,KAAK,OAAO,GAAG,CAAE;EACpE,IAAI,CAAC,aAAa,CAAC,eACjB,gBAAgB,UAAU,KAAK,GAAG,CAAC,CAAC,SAAS,QAAQ,KAAK,OAAO,GAAG,CAAC;EACvE,MAAM,OAAO,gBAAgB,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,aAAa,UAAU,IAAI,CAAC,CAAC,OAAO;EACjF,eAAe,IAAI;EACnB,aAAa,KAAK,GAAG;EACrB,UAAU,MAAM;GAAE,SAAS;GAAW;EAAK,CAAC;CAC9C;CAEA,MAAM,mBAAmB;EAEvB,MAAM,OADU,SAAS,eAAe,QAAqB,qBAAmB,EAAA,EAC3D,QAAQ,MAAM;EACnC,OAAO,KAAK,MAAM,QAAQ,IAAI,KAAK,QAAQ,GAAG;CAChD;CAEA,MAAM,WACH,QACA,UAAyB;EACxB,MAAM,MAAM,WAAW;EACvB,IAAI,KAAK,GAAG,KAAK,KAAK;CACxB;CAEF,iBAAiB;EACf,OAAO;GACL,KAAK,SAAS,KAAK,UAAU;IAC3B,IAAI,aAAa,IAAI,KAAK,cAAc,OAAO,YAAY,IAAI,IAAI;SAC9D,aAAa,IAAI,MAAM,KAAK;GACnC,CAAC;GACD,KAAK,SAAS,QAAQ;IACpB,MAAM,WAAW,KAAK,QACnB,MAAM,EAAE,cAAc,IAAI,aAAa,EAAE,eAAe,CAAC,SAAS,IAAI,EAAE,KAAK,GAAG,CACnF;IACA,IAAI,SAAS,WAAW,GAAG;IAC3B,MAAM,OAAO,CAAC,GAAG,cAAc,GAAG,SAAS,KAAK,MAAM,EAAE,KAAK,GAAG,CAAC;IACjE,gBAAgB,IAAI;IACpB,WAAW,MAAM;KAAE,UAAU;KAAM,MAAM,IAAI;IAAK,CAAC;GACrD,CAAC;GACD,aAAa,SAAS,QAAQ;IAC5B,IAAI,IAAI,eAAe,SAAS,IAAI,IAAI,KAAK,GAAG,GAAG,aAAa,IAAI,IAAI;SACnE,IAAI,IAAI,WAAW,SAAS,IAAI,SAAS;GAChD,CAAC;GACD,cAAc,SAAS,QAAQ;IAC7B,IAAI,CAAC,IAAI,aAAa;IACtB,IAAI,SAAS,IAAI,IAAI,KAAK,GAAG,GAAG,SAAS,KAAK,IAAI,QAAQ,EAAE,CAAC,KAAK,GAAG;SAChE,aAAa,IAAI,IAAI;GAC5B,CAAC;GACD,SAAS,SAAS,KAAK,UAAU,aAAa,IAAI,MAAM,KAAK,CAAC;EAChE;EACA,cAAc;EACd,cAAc,OAAO,GAAG,QAAQ,MAAM,aAAa,GAAG,QAAQ,EAAE;EAChE;EACA;CACF,CAAC;CA0BD,OACE,oBAAC,aAAD;EAAa,OAAO;GAxBpB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,eAAe,OAAO,SAAS,eAAe;IAAE;IAAO;GAAK,CAAC;GAC7D;GACA;GACA;GACA;GACA;GACA,QAAQ;GACR;GACA;GACA;GACA;GACA;EAIsB;EACpB,UAAA,oBAAC,YAAD;GACE,IAAI;GACJ,MAAK;GACL,GAAI,WAAW,OAAO,MAAM,KAAK,WAAW,MAAM,SAAS,GAAG;IAC5D,GAAG,aAAa;IAChB,GAAG;GACL,CAAC;GAEA,UAAA,SAAS,KAAK,MAAM,MACnB,oBAAC,UAAD;IACE,OAAO;IACP,QAAQ,MAAM,SAAS,SAAS;IAE1B;IACN,OAAO,CAAC;GACT,GAHM,KAAK,GAGX,CACF;EACS,CAAA;CACD,CAAA;AAEjB,CACF;AAEA,KAAK,cAAc"}

package/es/Video/context.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"context.mjs","names":[],"sources":["../../src/Video/context.ts"],"sourcesContent":["'use client';\n\nimport { createContext, use } from 'react';\n\nimport type { VideoStore } from './store';\nimport type { VideoMarker, VideoMediaProps, VideoSection } from './type';\n\nexport interface VideoConfig {\n  fps: number;\n  markers: VideoMarker[];\n  onMarkerClick?: (marker: VideoMarker) => void;\n  onRetry?: () => Promise<unknown> | void;\n  playbackRates?: number[];\n  sections: VideoSection[];\n}\n\nexport interface VideoContextValue {\n  config: VideoConfig;\n  media: VideoMediaProps;\n  store: VideoStore;\n}\n\nexport const VideoContext = createContext<VideoContextValue | null>(null);\n\nexport const useVideoContext = () => {\n  const value = use(VideoContext);\n  if (!value) throw new Error('Video parts must be rendered inside <Video.Root>.');\n  return value;\n};\n\nexport interface FrameContextValue {\n  hold: (held: boolean) => void;\n  visible: boolean;\n}\n\nexport const FrameContext = createContext<FrameContextValue | null>(null);\n"],"mappings":";;;AAsBA,MAAa,eAAe,cAAwC,IAAI;AAExE,MAAa,wBAAwB;CACnC,MAAM,QAAQ,IAAI,YAAY;CAC9B,IAAI,CAAC,OAAO,MAAM,IAAI,MAAM,mDAAmD;CAC/E,OAAO;AACT;AAOA,MAAa,eAAe,cAAwC,IAAI"}
+{"version":3,"file":"context.mjs","names":[],"sources":["../../src/Video/context.ts"],"sourcesContent":["'use client';\n\nimport { createContext, use } from 'react';\n\nimport type { VideoStore } from './store';\nimport type { VideoMarker, VideoMediaProps, VideoSection } from './type';\n\nexport interface VideoConfig {\n  fps: number;\n  markers: VideoMarker[];\n  onMarkerClick?: (marker: VideoMarker) => void;\n  onRetry?: () => Promise<unknown> | void;\n  playbackRates?: number[];\n  sections: VideoSection[];\n}\n\nexport interface VideoContextValue {\n  config: VideoConfig;\n  media: VideoMediaProps;\n  store: VideoStore;\n}\n\nexport const VideoContext = createContext<VideoContextValue | null>(null);\n\nexport const useVideoContext = () => {\n  const value = use(VideoContext);\n  if (!value) throw new Error('Video parts must be rendered inside <Video.Root>.');\n  return value;\n};\n\nexport interface FrameContextValue {\n  hold: (held: boolean) => void;\n  overlay: boolean;\n  setOverlay: (overlay: boolean) => void;\n  visible: boolean;\n}\n\nexport const FrameContext = createContext<FrameContextValue | null>(null);\n"],"mappings":";;;AAsBA,MAAa,eAAe,cAAwC,IAAI;AAExE,MAAa,wBAAwB;CACnC,MAAM,QAAQ,IAAI,YAAY;CAC9B,IAAI,CAAC,OAAO,MAAM,IAAI,MAAM,mDAAmD;CAC/E,OAAO;AACT;AASA,MAAa,eAAe,cAAwC,IAAI"}

package/es/Video/parts/Caption.mjs

@@ -10,8 +10,11 @@ const Caption = ({ action, className, style }) => {
 	const frame = use(FrameContext);
 	const markers = useVideo((state) => state.captions ? state.activeMarkers : void 0);
 	if (!markers || markers.length === 0) return null;
+	const raised = Boolean(frame?.overlay && frame.visible);
 	return /* @__PURE__ */ jsx("div", {
-		...styleProps([styles.caption, frame?.visible && styles.captionRaised], className, style),
+		"data-raised": String(raised),
+		"data-video-caption": "",
+		...styleProps([styles.caption, raised && styles.captionRaised], className, style),
 		onClick: (event) => event.stopPropagation(),
 		onPointerDown: (event) => event.stopPropagation(),
 		children: markers.map((marker, index) => /* @__PURE__ */ jsxs("div", {

package/es/Video/parts/Caption.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Caption.mjs","names":[],"sources":["../../../src/Video/parts/Caption.tsx"],"sourcesContent":["'use client';\n\nimport { use } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { FrameContext } from '../context';\nimport { markerColor, styles } from '../style';\nimport type { VideoCaptionProps } from '../type';\nimport { useVideo } from '../useVideo';\n\nconst Caption = ({ action, className, style }: VideoCaptionProps) => {\n  const frame = use(FrameContext);\n  const markers = useVideo((state) => (state.captions ? state.activeMarkers : undefined));\n  if (!markers || markers.length === 0) return null;\n\n  return (\n    <div\n      {...styleProps([styles.caption, frame?.visible && styles.captionRaised], className, style)}\n      onClick={(event) => event.stopPropagation()}\n      onPointerDown={(event) => event.stopPropagation()}\n    >\n      {markers.map((marker, index) => (\n        <div key={marker.key ?? `${marker.time}-${index}`} {...styleProps(styles.captionItem)}>\n          {(marker.label !== undefined || action) && (\n            <div {...styleProps(styles.captionTitle)}>\n              <span\n                {...styleProps(styles.dot, undefined, { background: markerColor(marker.color) })}\n              />\n              {marker.label}\n              {action?.(marker)}\n            </div>\n          )}\n          <div>{marker.content}</div>\n        </div>\n      ))}\n    </div>\n  );\n};\n\nCaption.displayName = 'VideoCaption';\n\nexport default Caption;\n"],"mappings":";;;;;;;;AAWA,MAAM,WAAW,EAAE,QAAQ,WAAW,YAA+B;CACnE,MAAM,QAAQ,IAAI,YAAY;CAC9B,MAAM,UAAU,UAAU,UAAW,MAAM,WAAW,MAAM,gBAAgB,KAAA,CAAU;CACtF,IAAI,CAAC,WAAW,QAAQ,WAAW,GAAG,OAAO;CAE7C,OACE,oBAAC,OAAD;EACE,GAAI,WAAW,CAAC,OAAO,SAAS,OAAO,WAAW,OAAO,aAAa,GAAG,WAAW,KAAK;EACzF,UAAU,UAAU,MAAM,gBAAgB;EAC1C,gBAAgB,UAAU,MAAM,gBAAgB;EAE/C,UAAA,QAAQ,KAAK,QAAQ,UACpB,qBAAC,OAAD;GAAmD,GAAI,WAAW,OAAO,WAAW;GAApF,UAAA,EACI,OAAO,UAAU,KAAA,KAAa,WAC9B,qBAAC,OAAD;IAAK,GAAI,WAAW,OAAO,YAAY;IAAvC,UAAA;KACE,oBAAC,QAAD,EACE,GAAI,WAAW,OAAO,KAAK,KAAA,GAAW,EAAE,YAAY,YAAY,OAAO,KAAK,EAAE,CAAC,EAChF,CAAA;KACA,OAAO;KACP,SAAS,MAAM;IACb;GAEP,CAAA,GAAA,oBAAC,OAAD,EAAA,UAAM,OAAO,QAAa,CAAA,CACvB;EAXK,GAAA,OAAO,OAAO,GAAG,OAAO,KAAK,GAAG,OAWrC,CACN;CACE,CAAA;AAET;AAEA,QAAQ,cAAc"}
+{"version":3,"file":"Caption.mjs","names":[],"sources":["../../../src/Video/parts/Caption.tsx"],"sourcesContent":["'use client';\n\nimport { use } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { FrameContext } from '../context';\nimport { markerColor, styles } from '../style';\nimport type { VideoCaptionProps } from '../type';\nimport { useVideo } from '../useVideo';\n\nconst Caption = ({ action, className, style }: VideoCaptionProps) => {\n  const frame = use(FrameContext);\n  const markers = useVideo((state) => (state.captions ? state.activeMarkers : undefined));\n  if (!markers || markers.length === 0) return null;\n  const raised = Boolean(frame?.overlay && frame.visible);\n\n  return (\n    <div\n      data-raised={String(raised)}\n      data-video-caption=\"\"\n      {...styleProps([styles.caption, raised && styles.captionRaised], className, style)}\n      onClick={(event) => event.stopPropagation()}\n      onPointerDown={(event) => event.stopPropagation()}\n    >\n      {markers.map((marker, index) => (\n        <div key={marker.key ?? `${marker.time}-${index}`} {...styleProps(styles.captionItem)}>\n          {(marker.label !== undefined || action) && (\n            <div {...styleProps(styles.captionTitle)}>\n              <span\n                {...styleProps(styles.dot, undefined, { background: markerColor(marker.color) })}\n              />\n              {marker.label}\n              {action?.(marker)}\n            </div>\n          )}\n          <div>{marker.content}</div>\n        </div>\n      ))}\n    </div>\n  );\n};\n\nCaption.displayName = 'VideoCaption';\n\nexport default Caption;\n"],"mappings":";;;;;;;;AAWA,MAAM,WAAW,EAAE,QAAQ,WAAW,YAA+B;CACnE,MAAM,QAAQ,IAAI,YAAY;CAC9B,MAAM,UAAU,UAAU,UAAW,MAAM,WAAW,MAAM,gBAAgB,KAAA,CAAU;CACtF,IAAI,CAAC,WAAW,QAAQ,WAAW,GAAG,OAAO;CAC7C,MAAM,SAAS,QAAQ,OAAO,WAAW,MAAM,OAAO;CAEtD,OACE,oBAAC,OAAD;EACE,eAAa,OAAO,MAAM;EAC1B,sBAAmB;EACnB,GAAI,WAAW,CAAC,OAAO,SAAS,UAAU,OAAO,aAAa,GAAG,WAAW,KAAK;EACjF,UAAU,UAAU,MAAM,gBAAgB;EAC1C,gBAAgB,UAAU,MAAM,gBAAgB;EAE/C,UAAA,QAAQ,KAAK,QAAQ,UACpB,qBAAC,OAAD;GAAmD,GAAI,WAAW,OAAO,WAAW;GAApF,UAAA,EACI,OAAO,UAAU,KAAA,KAAa,WAC9B,qBAAC,OAAD;IAAK,GAAI,WAAW,OAAO,YAAY;IAAvC,UAAA;KACE,oBAAC,QAAD,EACE,GAAI,WAAW,OAAO,KAAK,KAAA,GAAW,EAAE,YAAY,YAAY,OAAO,KAAK,EAAE,CAAC,EAChF,CAAA;KACA,OAAO;KACP,SAAS,MAAM;IACb;GAEP,CAAA,GAAA,oBAAC,OAAD,EAAA,UAAM,OAAO,QAAa,CAAA,CACvB;EAXK,GAAA,OAAO,OAAO,GAAG,OAAO,KAAK,GAAG,OAWrC,CACN;CACE,CAAA;AAET;AAEA,QAAQ,cAAc"}

package/es/Video/parts/Controls.mjs

@@ -11,7 +11,7 @@ import PlayPauseIcon from "./PlayPauseIcon.mjs";
 import RateMenu from "./RateMenu.mjs";
 import SectionMenu from "./SectionMenu.mjs";
 import Timeline from "./Timeline.mjs";
-import { use } from "react";
+import { use, useLayoutEffect } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Captions, ChevronLeft, ChevronRight, Maximize, Minimize, Volume2, VolumeX } from "lucide-react";
 //#region src/Video/parts/Controls.tsx
@@ -51,6 +51,11 @@ const Controls = ({ children, className, extra, frameStep, style }) => {
 	const ready = useVideo((state) => state.status === "ready");
 	const fullscreen = useFullscreen(store);
 	const overlay = frame !== null;
+	useLayoutEffect(() => {
+		if (!frame) return;
+		frame.setOverlay(true);
+		return () => frame.setOverlay(false);
+	}, [frame?.setOverlay]);
 	const visible = !overlay || frame.visible;
 	const hasCaptions = config.markers.some((marker) => marker.content !== void 0 && marker.content !== null);
 	return /* @__PURE__ */ jsx("div", {

package/es/Video/parts/Controls.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Controls.mjs","names":["videoMessages"],"sources":["../../../src/Video/parts/Controls.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Captions,\n  ChevronLeft,\n  ChevronRight,\n  Maximize,\n  Minimize,\n  Volume2,\n  VolumeX,\n} from 'lucide-react';\nimport { type ReactNode, use } from 'react';\n\nimport videoMessages from '@/i18n/resources/en/video';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { FrameContext, useVideoContext } from '../context';\nimport { styles } from '../style';\nimport { formatTime, frameOf } from '../time';\nimport type { VideoControlsProps } from '../type';\nimport { useFullscreen } from '../useFullscreen';\nimport { useVideo } from '../useVideo';\nimport PlayPauseIcon from './PlayPauseIcon';\nimport RateMenu from './RateMenu';\nimport SectionMenu from './SectionMenu';\nimport Timeline from './Timeline';\n\nconst BarButton = ({\n  active,\n  children,\n  label,\n  onClick,\n  pressed,\n  shortcut,\n}: {\n  active?: boolean;\n  children: ReactNode;\n  label: string;\n  onClick: () => void;\n  pressed?: boolean;\n  shortcut?: string;\n}) => (\n  <button\n    aria-label={label}\n    aria-pressed={pressed}\n    title={shortcut ? `${label} (${shortcut})` : label}\n    type=\"button\"\n    {...styleProps([styles.barButton, active && styles.barButtonActive])}\n    onClick={onClick}\n  >\n    {children}\n  </button>\n);\n\n// Leaves so playback re-renders only these, and the clock only once a second.\nconst TimeReadout = () => {\n  const seconds = useVideo((state) => Math.floor(state.time));\n  const duration = useVideo((state) => state.duration);\n  return (\n    <span {...styleProps(styles.time, undefined, { marginInline: 6 })}>\n      {`${formatTime(seconds)} / ${formatTime(duration)}`}\n    </span>\n  );\n};\n\nconst FrameReadout = () => {\n  const { config } = useVideoContext();\n  const { t } = useTranslation(videoMessages);\n  const frame = useVideo((state) => frameOf(state.time, config.fps));\n  return (\n    <span {...styleProps(styles.frameNo, undefined, { marginInlineEnd: 6 })}>\n      {`${t('video.frame')} ${frame}`}\n    </span>\n  );\n};\n\nconst Controls = ({ children, className, extra, frameStep, style }: VideoControlsProps) => {\n  const { config, store } = useVideoContext();\n  const frame = use(FrameContext);\n  const { t } = useTranslation(videoMessages);\n  const paused = useVideo((state) => state.paused);\n  const muted = useVideo((state) => state.muted);\n  const captions = useVideo((state) => state.captions);\n  const ready = useVideo((state) => state.status === 'ready');\n  const fullscreen = useFullscreen(store);\n  const overlay = frame !== null;\n  const visible = !overlay || frame.visible;\n  const hasCaptions = config.markers.some(\n    (marker) => marker.content !== undefined && marker.content !== null,\n  );\n\n  return (\n    <div\n      data-video-controls=\"\"\n      data-visible={String(visible)}\n      {...styleProps(\n        [\n          styles.controls,\n          overlay ? styles.controlsOverlay : styles.controlsBelow,\n          overlay && !visible && styles.controlsHidden,\n        ],\n        className,\n        style,\n      )}\n      onClick={(event) => event.stopPropagation()}\n      onDoubleClick={(event) => event.stopPropagation()}\n    >\n      <div {...styleProps(!ready && styles.disabled)}>\n        {children ?? <Timeline />}\n        <div {...styleProps(styles.row)}>\n          <BarButton\n            label={paused ? t('video.play') : t('video.pause')}\n            shortcut=\"K\"\n            onClick={store.toggle}\n          >\n            <PlayPauseIcon paused={paused} />\n          </BarButton>\n          <BarButton\n            label={muted ? t('video.unmute') : t('video.mute')}\n            shortcut=\"M\"\n            onClick={store.toggleMute}\n          >\n            {muted ? <VolumeX size={16} /> : <Volume2 size={16} />}\n          </BarButton>\n          {frameStep && (\n            <>\n              <BarButton\n                label={t('video.previousFrame')}\n                shortcut=\",\"\n                onClick={() => store.step(-1)}\n              >\n                <ChevronLeft size={16} />\n              </BarButton>\n              <BarButton label={t('video.nextFrame')} shortcut=\".\" onClick={() => store.step(1)}>\n                <ChevronRight size={16} />\n              </BarButton>\n            </>\n          )}\n          <TimeReadout />\n          {frameStep && <FrameReadout />}\n          <SectionMenu />\n          <div {...styleProps(styles.spacer)} />\n          {extra}\n          {hasCaptions && (\n            <BarButton\n              active={captions}\n              label={captions ? t('video.captionsHide') : t('video.captionsShow')}\n              pressed={captions}\n              shortcut=\"C\"\n              onClick={() => store.setCaptions(!captions)}\n            >\n              <Captions size={16} />\n            </BarButton>\n          )}\n          <RateMenu />\n          <BarButton\n            label={fullscreen ? t('video.exitFullscreen') : t('video.fullscreen')}\n            shortcut=\"F\"\n            onClick={store.toggleFullscreen}\n          >\n            {fullscreen ? <Minimize size={15} /> : <Maximize size={15} />}\n          </BarButton>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nControls.displayName = 'VideoControls';\n\nexport default Controls;\n"],"mappings":"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"}
+{"version":3,"file":"Controls.mjs","names":["videoMessages"],"sources":["../../../src/Video/parts/Controls.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Captions,\n  ChevronLeft,\n  ChevronRight,\n  Maximize,\n  Minimize,\n  Volume2,\n  VolumeX,\n} from 'lucide-react';\nimport { type ReactNode, use, useLayoutEffect } from 'react';\n\nimport videoMessages from '@/i18n/resources/en/video';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { FrameContext, useVideoContext } from '../context';\nimport { styles } from '../style';\nimport { formatTime, frameOf } from '../time';\nimport type { VideoControlsProps } from '../type';\nimport { useFullscreen } from '../useFullscreen';\nimport { useVideo } from '../useVideo';\nimport PlayPauseIcon from './PlayPauseIcon';\nimport RateMenu from './RateMenu';\nimport SectionMenu from './SectionMenu';\nimport Timeline from './Timeline';\n\nconst BarButton = ({\n  active,\n  children,\n  label,\n  onClick,\n  pressed,\n  shortcut,\n}: {\n  active?: boolean;\n  children: ReactNode;\n  label: string;\n  onClick: () => void;\n  pressed?: boolean;\n  shortcut?: string;\n}) => (\n  <button\n    aria-label={label}\n    aria-pressed={pressed}\n    title={shortcut ? `${label} (${shortcut})` : label}\n    type=\"button\"\n    {...styleProps([styles.barButton, active && styles.barButtonActive])}\n    onClick={onClick}\n  >\n    {children}\n  </button>\n);\n\n// Leaves so playback re-renders only these, and the clock only once a second.\nconst TimeReadout = () => {\n  const seconds = useVideo((state) => Math.floor(state.time));\n  const duration = useVideo((state) => state.duration);\n  return (\n    <span {...styleProps(styles.time, undefined, { marginInline: 6 })}>\n      {`${formatTime(seconds)} / ${formatTime(duration)}`}\n    </span>\n  );\n};\n\nconst FrameReadout = () => {\n  const { config } = useVideoContext();\n  const { t } = useTranslation(videoMessages);\n  const frame = useVideo((state) => frameOf(state.time, config.fps));\n  return (\n    <span {...styleProps(styles.frameNo, undefined, { marginInlineEnd: 6 })}>\n      {`${t('video.frame')} ${frame}`}\n    </span>\n  );\n};\n\nconst Controls = ({ children, className, extra, frameStep, style }: VideoControlsProps) => {\n  const { config, store } = useVideoContext();\n  const frame = use(FrameContext);\n  const { t } = useTranslation(videoMessages);\n  const paused = useVideo((state) => state.paused);\n  const muted = useVideo((state) => state.muted);\n  const captions = useVideo((state) => state.captions);\n  const ready = useVideo((state) => state.status === 'ready');\n  const fullscreen = useFullscreen(store);\n  const overlay = frame !== null;\n\n  useLayoutEffect(() => {\n    if (!frame) return;\n    frame.setOverlay(true);\n    return () => frame.setOverlay(false);\n  }, [frame?.setOverlay]);\n  const visible = !overlay || frame.visible;\n  const hasCaptions = config.markers.some(\n    (marker) => marker.content !== undefined && marker.content !== null,\n  );\n\n  return (\n    <div\n      data-video-controls=\"\"\n      data-visible={String(visible)}\n      {...styleProps(\n        [\n          styles.controls,\n          overlay ? styles.controlsOverlay : styles.controlsBelow,\n          overlay && !visible && styles.controlsHidden,\n        ],\n        className,\n        style,\n      )}\n      onClick={(event) => event.stopPropagation()}\n      onDoubleClick={(event) => event.stopPropagation()}\n    >\n      <div {...styleProps(!ready && styles.disabled)}>\n        {children ?? <Timeline />}\n        <div {...styleProps(styles.row)}>\n          <BarButton\n            label={paused ? t('video.play') : t('video.pause')}\n            shortcut=\"K\"\n            onClick={store.toggle}\n          >\n            <PlayPauseIcon paused={paused} />\n          </BarButton>\n          <BarButton\n            label={muted ? t('video.unmute') : t('video.mute')}\n            shortcut=\"M\"\n            onClick={store.toggleMute}\n          >\n            {muted ? <VolumeX size={16} /> : <Volume2 size={16} />}\n          </BarButton>\n          {frameStep && (\n            <>\n              <BarButton\n                label={t('video.previousFrame')}\n                shortcut=\",\"\n                onClick={() => store.step(-1)}\n              >\n                <ChevronLeft size={16} />\n              </BarButton>\n              <BarButton label={t('video.nextFrame')} shortcut=\".\" onClick={() => store.step(1)}>\n                <ChevronRight size={16} />\n              </BarButton>\n            </>\n          )}\n          <TimeReadout />\n          {frameStep && <FrameReadout />}\n          <SectionMenu />\n          <div {...styleProps(styles.spacer)} />\n          {extra}\n          {hasCaptions && (\n            <BarButton\n              active={captions}\n              label={captions ? t('video.captionsHide') : t('video.captionsShow')}\n              pressed={captions}\n              shortcut=\"C\"\n              onClick={() => store.setCaptions(!captions)}\n            >\n              <Captions size={16} />\n            </BarButton>\n          )}\n          <RateMenu />\n          <BarButton\n            label={fullscreen ? t('video.exitFullscreen') : t('video.fullscreen')}\n            shortcut=\"F\"\n            onClick={store.toggleFullscreen}\n          >\n            {fullscreen ? <Minimize size={15} /> : <Maximize size={15} />}\n          </BarButton>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nControls.displayName = 'VideoControls';\n\nexport default Controls;\n"],"mappings":"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"}

package/es/Video/parts/Frame.mjs

@@ -4,7 +4,7 @@ import { FrameContext, useVideoContext } from "../context.mjs";
 import { styles } from "../style.mjs";
 import { useVideo } from "../useVideo.mjs";
 import { useControlsIdle } from "../useControlsIdle.mjs";
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/Video/parts/Frame.tsx
 const isFocusVisible = (element) => {
@@ -21,6 +21,7 @@ const Frame = ({ children, className, style }) => {
 	const size = useVideo((state) => state.size);
 	const idleForced = useVideo((state) => state.paused || state.status !== "ready");
 	const idle = useControlsIdle(idleForced);
+	const [overlay, setOverlay] = useState(false);
 	useEffect(() => {
 		const video = videoRef.current;
 		if (!video) return;
@@ -28,8 +29,14 @@ const Frame = ({ children, className, style }) => {
 	}, [store, media.src]);
 	const frame = useMemo(() => ({
 		hold: idle.hold,
+		overlay,
+		setOverlay,
 		visible: idle.visible
-	}), [idle.hold, idle.visible]);
+	}), [
+		idle.hold,
+		idle.visible,
+		overlay
+	]);
 	const aspectRatio = size?.height ? `${size.width} / ${size.height}` : "16 / 9";
 	return /* @__PURE__ */ jsx(FrameContext, {
 		value: frame,

package/es/Video/parts/Frame.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Frame.mjs","names":[],"sources":["../../../src/Video/parts/Frame.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useMemo, useRef } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { FrameContext, type FrameContextValue, useVideoContext } from '../context';\nimport { styles } from '../style';\nimport type { VideoFrameProps } from '../type';\nimport { useControlsIdle } from '../useControlsIdle';\nimport { useVideo } from '../useVideo';\n\nconst isFocusVisible = (element: Element) => {\n  try {\n    return element.matches(':focus-visible');\n  } catch {\n    return true;\n  }\n};\n\nconst Frame = ({ children, className, style }: VideoFrameProps) => {\n  const { media, store } = useVideoContext();\n  const videoRef = useRef<HTMLVideoElement>(null);\n  const pointerTypeRef = useRef('mouse');\n  const size = useVideo((state) => state.size);\n  const idleForced = useVideo((state) => state.paused || state.status !== 'ready');\n  const idle = useControlsIdle(idleForced);\n\n  useEffect(() => {\n    const video = videoRef.current;\n    if (!video) return;\n    return store.attach(video);\n  }, [store, media.src]);\n\n  const frame = useMemo<FrameContextValue>(\n    () => ({ hold: idle.hold, visible: idle.visible }),\n    [idle.hold, idle.visible],\n  );\n\n  const aspectRatio = size?.height ? `${size.width} / ${size.height}` : '16 / 9';\n\n  return (\n    <FrameContext value={frame}>\n      <div\n        {...styleProps(styles.frame, className, { aspectRatio, ...style })}\n        onBlur={(event) => {\n          if (!event.currentTarget.contains(event.relatedTarget as Node | null))\n            idle.setFocused(false);\n        }}\n        onFocus={(event) => {\n          idle.setFocused(isFocusVisible(event.target));\n        }}\n        onPointerDownCapture={(event) => {\n          pointerTypeRef.current = event.pointerType || 'mouse';\n        }}\n        onPointerLeave={(event) => {\n          if (event.pointerType !== 'touch') idle.sleep();\n        }}\n        onPointerMove={(event) => {\n          if (event.pointerType !== 'touch') idle.wake();\n        }}\n      >\n        <video\n          playsInline\n          autoPlay={media.autoPlay}\n          loop={media.loop}\n          poster={media.poster}\n          preload={media.preload}\n          ref={videoRef}\n          src={media.src}\n          onEnded={media.onEnded}\n          onError={media.onError}\n          onPause={media.onPause}\n          onPlay={media.onPlay}\n          onTimeUpdate={media.onTimeUpdate}\n          {...styleProps(styles.video)}\n        />\n        <div\n          data-video-surface=\"\"\n          {...styleProps(styles.surface)}\n          onDoubleClick={() => store.toggleFullscreen()}\n          onClick={() => {\n            if (pointerTypeRef.current === 'touch' && !idle.visible) {\n              idle.wake();\n              return;\n            }\n            if (pointerTypeRef.current === 'touch') idle.wake();\n            store.toggle();\n          }}\n        />\n        {children}\n      </div>\n    </FrameContext>\n  );\n};\n\nFrame.displayName = 'VideoFrame';\n\nexport default Frame;\n"],"mappings":";;;;;;;;;AAYA,MAAM,kBAAkB,YAAqB;CAC3C,IAAI;EACF,OAAO,QAAQ,QAAQ,gBAAgB;CACzC,QAAQ;EACN,OAAO;CACT;AACF;AAEA,MAAM,SAAS,EAAE,UAAU,WAAW,YAA6B;CACjE,MAAM,EAAE,OAAO,UAAU,gBAAgB;CACzC,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,iBAAiB,OAAO,OAAO;CACrC,MAAM,OAAO,UAAU,UAAU,MAAM,IAAI;CAC3C,MAAM,aAAa,UAAU,UAAU,MAAM,UAAU,MAAM,WAAW,OAAO;CAC/E,MAAM,OAAO,gBAAgB,UAAU;CAEvC,gBAAgB;EACd,MAAM,QAAQ,SAAS;EACvB,IAAI,CAAC,OAAO;EACZ,OAAO,MAAM,OAAO,KAAK;CAC3B,GAAG,CAAC,OAAO,MAAM,GAAG,CAAC;CAErB,MAAM,QAAQ,eACL;EAAE,MAAM,KAAK;EAAM,SAAS,KAAK;CAAQ,IAChD,CAAC,KAAK,MAAM,KAAK,OAAO,CAC1B;CAEA,MAAM,cAAc,MAAM,SAAS,GAAG,KAAK,MAAM,KAAK,KAAK,WAAW;CAEtE,OACE,oBAAC,cAAD;EAAc,OAAO;EACnB,UAAA,qBAAC,OAAD;GACE,GAAI,WAAW,OAAO,OAAO,WAAW;IAAE;IAAa,GAAG;GAAM,CAAC;GACjE,SAAS,UAAU;IACjB,IAAI,CAAC,MAAM,cAAc,SAAS,MAAM,aAA4B,GAClE,KAAK,WAAW,KAAK;GACzB;GACA,UAAU,UAAU;IAClB,KAAK,WAAW,eAAe,MAAM,MAAM,CAAC;GAC9C;GACA,uBAAuB,UAAU;IAC/B,eAAe,UAAU,MAAM,eAAe;GAChD;GACA,iBAAiB,UAAU;IACzB,IAAI,MAAM,gBAAgB,SAAS,KAAK,MAAM;GAChD;GACA,gBAAgB,UAAU;IACxB,IAAI,MAAM,gBAAgB,SAAS,KAAK,KAAK;GAC/C;GAjBF,UAAA;IAmBE,oBAAC,SAAD;KACE,aAAA;KACA,UAAU,MAAM;KAChB,MAAM,MAAM;KACZ,QAAQ,MAAM;KACd,SAAS,MAAM;KACf,KAAK;KACL,KAAK,MAAM;KACX,SAAS,MAAM;KACf,SAAS,MAAM;KACf,SAAS,MAAM;KACf,QAAQ,MAAM;KACd,cAAc,MAAM;KACpB,GAAI,WAAW,OAAO,KAAK;IAC5B,CAAA;IACD,oBAAC,OAAD;KACE,sBAAmB;KACnB,GAAI,WAAW,OAAO,OAAO;KAC7B,qBAAqB,MAAM,iBAAiB;KAC5C,eAAe;MACb,IAAI,eAAe,YAAY,WAAW,CAAC,KAAK,SAAS;OACvD,KAAK,KAAK;OACV;MACF;MACA,IAAI,eAAe,YAAY,SAAS,KAAK,KAAK;MAClD,MAAM,OAAO;KACf;IACD,CAAA;IACA;GACE;;CACO,CAAA;AAElB;AAEA,MAAM,cAAc"}
+{"version":3,"file":"Frame.mjs","names":[],"sources":["../../../src/Video/parts/Frame.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useMemo, useRef, useState } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { FrameContext, type FrameContextValue, useVideoContext } from '../context';\nimport { styles } from '../style';\nimport type { VideoFrameProps } from '../type';\nimport { useControlsIdle } from '../useControlsIdle';\nimport { useVideo } from '../useVideo';\n\nconst isFocusVisible = (element: Element) => {\n  try {\n    return element.matches(':focus-visible');\n  } catch {\n    return true;\n  }\n};\n\nconst Frame = ({ children, className, style }: VideoFrameProps) => {\n  const { media, store } = useVideoContext();\n  const videoRef = useRef<HTMLVideoElement>(null);\n  const pointerTypeRef = useRef('mouse');\n  const size = useVideo((state) => state.size);\n  const idleForced = useVideo((state) => state.paused || state.status !== 'ready');\n  const idle = useControlsIdle(idleForced);\n  const [overlay, setOverlay] = useState(false);\n\n  useEffect(() => {\n    const video = videoRef.current;\n    if (!video) return;\n    return store.attach(video);\n  }, [store, media.src]);\n\n  const frame = useMemo<FrameContextValue>(\n    () => ({ hold: idle.hold, overlay, setOverlay, visible: idle.visible }),\n    [idle.hold, idle.visible, overlay],\n  );\n\n  const aspectRatio = size?.height ? `${size.width} / ${size.height}` : '16 / 9';\n\n  return (\n    <FrameContext value={frame}>\n      <div\n        {...styleProps(styles.frame, className, { aspectRatio, ...style })}\n        onBlur={(event) => {\n          if (!event.currentTarget.contains(event.relatedTarget as Node | null))\n            idle.setFocused(false);\n        }}\n        onFocus={(event) => {\n          idle.setFocused(isFocusVisible(event.target));\n        }}\n        onPointerDownCapture={(event) => {\n          pointerTypeRef.current = event.pointerType || 'mouse';\n        }}\n        onPointerLeave={(event) => {\n          if (event.pointerType !== 'touch') idle.sleep();\n        }}\n        onPointerMove={(event) => {\n          if (event.pointerType !== 'touch') idle.wake();\n        }}\n      >\n        <video\n          playsInline\n          autoPlay={media.autoPlay}\n          loop={media.loop}\n          poster={media.poster}\n          preload={media.preload}\n          ref={videoRef}\n          src={media.src}\n          onEnded={media.onEnded}\n          onError={media.onError}\n          onPause={media.onPause}\n          onPlay={media.onPlay}\n          onTimeUpdate={media.onTimeUpdate}\n          {...styleProps(styles.video)}\n        />\n        <div\n          data-video-surface=\"\"\n          {...styleProps(styles.surface)}\n          onDoubleClick={() => store.toggleFullscreen()}\n          onClick={() => {\n            if (pointerTypeRef.current === 'touch' && !idle.visible) {\n              idle.wake();\n              return;\n            }\n            if (pointerTypeRef.current === 'touch') idle.wake();\n            store.toggle();\n          }}\n        />\n        {children}\n      </div>\n    </FrameContext>\n  );\n};\n\nFrame.displayName = 'VideoFrame';\n\nexport default Frame;\n"],"mappings":";;;;;;;;;AAYA,MAAM,kBAAkB,YAAqB;CAC3C,IAAI;EACF,OAAO,QAAQ,QAAQ,gBAAgB;CACzC,QAAQ;EACN,OAAO;CACT;AACF;AAEA,MAAM,SAAS,EAAE,UAAU,WAAW,YAA6B;CACjE,MAAM,EAAE,OAAO,UAAU,gBAAgB;CACzC,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,iBAAiB,OAAO,OAAO;CACrC,MAAM,OAAO,UAAU,UAAU,MAAM,IAAI;CAC3C,MAAM,aAAa,UAAU,UAAU,MAAM,UAAU,MAAM,WAAW,OAAO;CAC/E,MAAM,OAAO,gBAAgB,UAAU;CACvC,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,gBAAgB;EACd,MAAM,QAAQ,SAAS;EACvB,IAAI,CAAC,OAAO;EACZ,OAAO,MAAM,OAAO,KAAK;CAC3B,GAAG,CAAC,OAAO,MAAM,GAAG,CAAC;CAErB,MAAM,QAAQ,eACL;EAAE,MAAM,KAAK;EAAM;EAAS;EAAY,SAAS,KAAK;CAAQ,IACrE;EAAC,KAAK;EAAM,KAAK;EAAS;CAAO,CACnC;CAEA,MAAM,cAAc,MAAM,SAAS,GAAG,KAAK,MAAM,KAAK,KAAK,WAAW;CAEtE,OACE,oBAAC,cAAD;EAAc,OAAO;EACnB,UAAA,qBAAC,OAAD;GACE,GAAI,WAAW,OAAO,OAAO,WAAW;IAAE;IAAa,GAAG;GAAM,CAAC;GACjE,SAAS,UAAU;IACjB,IAAI,CAAC,MAAM,cAAc,SAAS,MAAM,aAA4B,GAClE,KAAK,WAAW,KAAK;GACzB;GACA,UAAU,UAAU;IAClB,KAAK,WAAW,eAAe,MAAM,MAAM,CAAC;GAC9C;GACA,uBAAuB,UAAU;IAC/B,eAAe,UAAU,MAAM,eAAe;GAChD;GACA,iBAAiB,UAAU;IACzB,IAAI,MAAM,gBAAgB,SAAS,KAAK,MAAM;GAChD;GACA,gBAAgB,UAAU;IACxB,IAAI,MAAM,gBAAgB,SAAS,KAAK,KAAK;GAC/C;GAjBF,UAAA;IAmBE,oBAAC,SAAD;KACE,aAAA;KACA,UAAU,MAAM;KAChB,MAAM,MAAM;KACZ,QAAQ,MAAM;KACd,SAAS,MAAM;KACf,KAAK;KACL,KAAK,MAAM;KACX,SAAS,MAAM;KACf,SAAS,MAAM;KACf,SAAS,MAAM;KACf,QAAQ,MAAM;KACd,cAAc,MAAM;KACpB,GAAI,WAAW,OAAO,KAAK;IAC5B,CAAA;IACD,oBAAC,OAAD;KACE,sBAAmB;KACnB,GAAI,WAAW,OAAO,OAAO;KAC7B,qBAAqB,MAAM,iBAAiB;KAC5C,eAAe;MACb,IAAI,eAAe,YAAY,WAAW,CAAC,KAAK,SAAS;OACvD,KAAK,KAAK;OACV;MACF;MACA,IAAI,eAAe,YAAY,SAAS,KAAK,KAAK;MAClD,MAAM,OAAO;KACf;IACD,CAAA;IACA;GACE;;CACO,CAAA;AAElB;AAEA,MAAM,cAAc"}

package/es/awesome/Giscus/style.mjs

@@ -1,7 +1,7 @@
+import { withAlpha } from "../../utils/colorMath.mjs";
 import { useTheme } from "../../styles/theme/scope.mjs";
 import { safeReadableColor } from "../../utils/safeReadableColor.mjs";
 import { useMemo } from "react";
-import { rgba } from "polished";
 //#region src/awesome/Giscus/style.ts
 const useStyles = () => {
 	const theme = useTheme();
@@ -26,22 +26,22 @@ const useStyles = () => {
       --color-prettylights-syntax-variable: ${colorRed};
       --color-prettylights-syntax-brackethighlighter-unmatched: ${colorRed};
       --color-prettylights-syntax-invalid-illegal-text: ${colorTextSecondary};
-      --color-prettylights-syntax-invalid-illegal-bg: ${rgba(colorRed, .4)};
+      --color-prettylights-syntax-invalid-illegal-bg: ${withAlpha(colorRed, .4)};
       --color-prettylights-syntax-carriage-return-text: ${colorTextSecondary};
-      --color-prettylights-syntax-carriage-return-bg: ${rgba(colorRed, .6)};
+      --color-prettylights-syntax-carriage-return-bg: ${withAlpha(colorRed, .6)};
       --color-prettylights-syntax-string-regexp: ${colorGreen};
       --color-prettylights-syntax-markup-list: ${colorOrange};
       --color-prettylights-syntax-markup-heading: ${colorBlue};
       --color-prettylights-syntax-markup-italic: ${colorTextSecondary};
       --color-prettylights-syntax-markup-bold: ${colorTextSecondary};
       --color-prettylights-syntax-markup-deleted-text: ${colorTextSecondary};
-      --color-prettylights-syntax-markup-deleted-bg: ${rgba(colorRed, .2)};
+      --color-prettylights-syntax-markup-deleted-bg: ${withAlpha(colorRed, .2)};
       --color-prettylights-syntax-markup-inserted-text: ${colorGreen};
-      --color-prettylights-syntax-markup-inserted-bg: ${rgba(colorGreen, .2)};
+      --color-prettylights-syntax-markup-inserted-bg: ${withAlpha(colorGreen, .2)};
       --color-prettylights-syntax-markup-changed-text: ${colorOrange};
-      --color-prettylights-syntax-markup-changed-bg: ${rgba(colorRed, .2)};
+      --color-prettylights-syntax-markup-changed-bg: ${withAlpha(colorRed, .2)};
       --color-prettylights-syntax-markup-ignored-text: ${colorTextSecondary};
-      --color-prettylights-syntax-markup-ignored-bg: ${rgba(colorBlue, .2)};
+      --color-prettylights-syntax-markup-ignored-bg: ${withAlpha(colorBlue, .2)};
       --color-prettylights-syntax-meta-diff-range: ${colorOrange};
       --color-prettylights-syntax-brackethighlighter-angle: ${colorTextSecondary};
       --color-prettylights-syntax-sublimelinter-gutter-mark: ${colorTextTertiary};
@@ -70,8 +70,8 @@ const useStyles = () => {
         ${safeReadableColor(theme.colorPrimary)} 50%,
         transparent
       );
-      --color-btn-primary-disabled-bg: ${rgba(theme.colorPrimary, .5)};
-      --color-btn-primary-disabled-border: ${rgba(theme.colorPrimaryBorder, .5)};
+      --color-btn-primary-disabled-bg: ${withAlpha(theme.colorPrimary, .5)};
+      --color-btn-primary-disabled-border: ${withAlpha(theme.colorPrimaryBorder, .5)};
       --color-action-list-item-default-hover-bg: ${theme.colorFillQuaternary};
       --color-segmented-control-bg: ${theme.colorFillTertiary};
       --color-segmented-control-button-bg: transparent;

package/es/awesome/Giscus/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/Giscus/style.ts"],"sourcesContent":["import { rgba } from 'polished';\nimport { useMemo } from 'react';\n\nimport { useTheme } from '@/styles/theme/scope';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nexport const useStyles = () => {\n  const theme = useTheme();\n  const colorText = theme.colorText;\n  const colorTextSecondary = theme.colorTextSecondary;\n  const colorTextTertiary = theme.colorTextTertiary;\n  const colorRed = theme.colorError;\n  const colorOrange = theme.colorWarning;\n  const colorGreen = theme.colorSuccess;\n  const colorBlue = theme.colorInfo;\n  const loaderContainer = theme.isDarkMode\n    ? 'https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg'\n    : 'https://github.com/images/modules/pulls/progressive-disclosure-line.svg';\n  const loadingImage = theme.isDarkMode\n    ? 'https://github.githubassets.com/images/mona-loading-dark.gif'\n    : 'https://github.githubassets.com/images/mona-loading-default.gif';\n  const styles = `\n    main {\n      --color-prettylights-syntax-comment: ${colorTextTertiary};\n      --color-prettylights-syntax-constant: ${colorGreen};\n      --color-prettylights-syntax-entity: ${colorOrange};\n      --color-prettylights-syntax-storage-modifier-import: ${colorRed};\n      --color-prettylights-syntax-entity-tag: ${colorBlue};\n      --color-prettylights-syntax-keyword: ${colorBlue};\n      --color-prettylights-syntax-string: ${colorGreen};\n      --color-prettylights-syntax-variable: ${colorRed};\n      --color-prettylights-syntax-brackethighlighter-unmatched: ${colorRed};\n      --color-prettylights-syntax-invalid-illegal-text: ${colorTextSecondary};\n      --color-prettylights-syntax-invalid-illegal-bg: ${rgba(colorRed, 0.4)};\n      --color-prettylights-syntax-carriage-return-text: ${colorTextSecondary};\n      --color-prettylights-syntax-carriage-return-bg: ${rgba(colorRed, 0.6)};\n      --color-prettylights-syntax-string-regexp: ${colorGreen};\n      --color-prettylights-syntax-markup-list: ${colorOrange};\n      --color-prettylights-syntax-markup-heading: ${colorBlue};\n      --color-prettylights-syntax-markup-italic: ${colorTextSecondary};\n      --color-prettylights-syntax-markup-bold: ${colorTextSecondary};\n      --color-prettylights-syntax-markup-deleted-text: ${colorTextSecondary};\n      --color-prettylights-syntax-markup-deleted-bg: ${rgba(colorRed, 0.2)};\n      --color-prettylights-syntax-markup-inserted-text: ${colorGreen};\n      --color-prettylights-syntax-markup-inserted-bg: ${rgba(colorGreen, 0.2)};\n      --color-prettylights-syntax-markup-changed-text: ${colorOrange};\n      --color-prettylights-syntax-markup-changed-bg: ${rgba(colorRed, 0.2)};\n      --color-prettylights-syntax-markup-ignored-text: ${colorTextSecondary};\n      --color-prettylights-syntax-markup-ignored-bg: ${rgba(colorBlue, 0.2)};\n      --color-prettylights-syntax-meta-diff-range: ${colorOrange};\n      --color-prettylights-syntax-brackethighlighter-angle: ${colorTextSecondary};\n      --color-prettylights-syntax-sublimelinter-gutter-mark: ${colorTextTertiary};\n      --color-prettylights-syntax-constant-other-reference-link: ${colorBlue};\n      --color-btn-text: ${theme.colorText};\n      --color-btn-bg: ${theme.colorFillTertiary};\n      --color-btn-border: ${theme.colorBorderSecondary};\n      --color-btn-shadow: 0 0 transparent;\n      --color-btn-inset-shadow: 0 0 transparent;\n      --color-btn-hover-bg: ${theme.colorFillSecondary};\n      --color-btn-hover-border: ${theme.colorBorder};\n      --color-btn-active-bg: ${theme.colorFillSecondary};\n      --color-btn-active-border: ${theme.colorBorder};\n      --color-btn-selected-bg: ${theme.colorFillSecondary};\n      --color-btn-primary-text: ${safeReadableColor(theme.colorPrimary)};\n      --color-btn-primary-bg: ${theme.colorPrimary};\n      --color-btn-primary-border: ${theme.colorPrimaryBorder};\n      --color-btn-primary-shadow: 0 0 transparent;\n      --color-btn-primary-inset-shadow: 0 0 transparent;\n      --color-btn-primary-hover-bg: ${theme.colorPrimaryHover};\n      --color-btn-primary-hover-border: ${theme.colorPrimaryBorderHover};\n      --color-btn-primary-selected-bg: ${theme.colorPrimaryActive};\n      --color-btn-primary-selected-shadow: 0 0 transparent;\n      --color-btn-primary-disabled-text: color-mix(\n        in srgb,\n        ${safeReadableColor(theme.colorPrimary)} 50%,\n        transparent\n      );\n      --color-btn-primary-disabled-bg: ${rgba(theme.colorPrimary, 0.5)};\n      --color-btn-primary-disabled-border: ${rgba(theme.colorPrimaryBorder, 0.5)};\n      --color-action-list-item-default-hover-bg: ${theme.colorFillQuaternary};\n      --color-segmented-control-bg: ${theme.colorFillTertiary};\n      --color-segmented-control-button-bg: transparent;\n      --color-segmented-control-button-selected-border: ${theme.colorBorder};\n      --color-fg-default: ${theme.colorText};\n      --color-fg-muted: ${theme.colorTextSecondary};\n      --color-fg-subtle: ${theme.colorTextQuaternary};\n      --color-canvas-default: transparent;\n      --color-canvas-overlay: ${theme.colorBgElevated};\n      --color-canvas-inset: transparent;\n      --color-canvas-subtle: ${theme.colorFillQuaternary};\n      --color-border-default: ${theme.colorBorder};\n      --color-border-muted: ${theme.colorBorderSecondary};\n      --color-neutral-muted: ${theme.colorFillQuaternary};\n      --color-neutral-subtle: ${theme.colorFillTertiary};\n      --color-accent-fg: ${theme.colorInfo};\n      --color-accent-emphasis: ${theme.colorInfoBorderHover};\n      --color-accent-muted: ${theme.colorInfoBorder};\n      --color-accent-subtle: ${theme.colorInfoBg};\n      --color-success-fg: ${theme.colorSuccess};\n      --color-attention-fg: ${theme.colorWarning};\n      --color-attention-muted: ${theme.colorWarningBorder};\n      --color-attention-subtle: ${theme.colorWarningBg};\n      --color-danger-fg: ${theme.colorError};\n      --color-danger-muted: ${theme.colorErrorBorder};\n      --color-danger-subtle: ${theme.colorErrorBg};\n      --color-primer-shadow-inset: 0 0 transparent;\n      --color-scale-gray-7: ${theme.colorBgContainer};\n      --color-scale-blue-8: ${theme.colorInfoBg};\n      --color-social-reaction-bg-hover: ${theme.colorFillSecondary};\n      --color-social-reaction-bg-reacted-hover: ${theme.colorInfoBgHover};\n\n      .markdown pre {\n        color: ${colorText};\n      }\n\n      .pagination-loader-container {\n        background-image: url(${loaderContainer});\n      }\n\n      .gsc-pagination-button {\n        background-color: var(--color-btn-bg);\n      }\n\n      .gsc-reactions-popover {\n        width: 170px;\n\n        > .m-2 {\n          display: flex;\n          flex-wrap: wrap;\n          gap: 8px;\n        }\n      }\n\n      .gsc-emoji-button.has-reacted {\n        border-color: ${theme.colorInfoBorderHover};\n        border-radius: ${theme.borderRadius}px;\n      }\n\n      .gsc-loading-image {\n        background-image: url(${loadingImage});\n      }\n    }\n  `;\n\n  return useMemo(() => `data:text/css;base64,${btoa(styles)}`, [styles]);\n};\n\nexport const formatLang = (lang: string) => {\n  if (['zh_CN', 'zh_TW'].includes(lang)) {\n    return lang.replace('_', '-');\n  } else if (lang === 'zh_HK') {\n    return 'zh-TW';\n  } else {\n    return lang.split('_')[0];\n  }\n};\n"],"mappings":";;;;;AAMA,MAAa,kBAAkB;CAC7B,MAAM,QAAQ,SAAS;CACvB,MAAM,YAAY,MAAM;CACxB,MAAM,qBAAqB,MAAM;CACjC,MAAM,oBAAoB,MAAM;CAChC,MAAM,WAAW,MAAM;CACvB,MAAM,cAAc,MAAM;CAC1B,MAAM,aAAa,MAAM;CACzB,MAAM,YAAY,MAAM;CACxB,MAAM,kBAAkB,MAAM,aAC1B,iFACA;CACJ,MAAM,eAAe,MAAM,aACvB,iEACA;CACJ,MAAM,SAAS;;6CAE4B,kBAAkB;8CACjB,WAAW;4CACb,YAAY;6DACK,SAAS;gDACtB,UAAU;6CACb,UAAU;4CACX,WAAW;8CACT,SAAS;kEACW,SAAS;0DACjB,mBAAmB;wDACrB,KAAK,UAAU,EAAG,EAAE;0DAClB,mBAAmB;wDACrB,KAAK,UAAU,EAAG,EAAE;mDACzB,WAAW;iDACb,YAAY;oDACT,UAAU;mDACX,mBAAmB;iDACrB,mBAAmB;yDACX,mBAAmB;uDACrB,KAAK,UAAU,EAAG,EAAE;0DACjB,WAAW;wDACb,KAAK,YAAY,EAAG,EAAE;yDACrB,YAAY;uDACd,KAAK,UAAU,EAAG,EAAE;yDAClB,mBAAmB;uDACrB,KAAK,WAAW,EAAG,EAAE;qDACvB,YAAY;8DACH,mBAAmB;+DAClB,kBAAkB;mEACd,UAAU;0BACnD,MAAM,UAAU;wBAClB,MAAM,kBAAkB;4BACpB,MAAM,qBAAqB;;;8BAGzB,MAAM,mBAAmB;kCACrB,MAAM,YAAY;+BACrB,MAAM,mBAAmB;mCACrB,MAAM,YAAY;iCACpB,MAAM,mBAAmB;kCACxB,kBAAkB,MAAM,YAAY,EAAE;gCACxC,MAAM,aAAa;oCACf,MAAM,mBAAmB;;;sCAGvB,MAAM,kBAAkB;0CACpB,MAAM,wBAAwB;yCAC/B,MAAM,mBAAmB;;;;UAIxD,kBAAkB,MAAM,YAAY,EAAE;;;yCAGP,KAAK,MAAM,cAAc,EAAG,EAAE;6CAC1B,KAAK,MAAM,oBAAoB,EAAG,EAAE;mDAC9B,MAAM,oBAAoB;sCACvC,MAAM,kBAAkB;;0DAEJ,MAAM,YAAY;4BAChD,MAAM,UAAU;0BAClB,MAAM,mBAAmB;2BACxB,MAAM,oBAAoB;;gCAErB,MAAM,gBAAgB;;+BAEvB,MAAM,oBAAoB;gCACzB,MAAM,YAAY;8BACpB,MAAM,qBAAqB;+BAC1B,MAAM,oBAAoB;gCACzB,MAAM,kBAAkB;2BAC7B,MAAM,UAAU;iCACV,MAAM,qBAAqB;8BAC9B,MAAM,gBAAgB;+BACrB,MAAM,YAAY;4BACrB,MAAM,aAAa;8BACjB,MAAM,aAAa;iCAChB,MAAM,mBAAmB;kCACxB,MAAM,eAAe;2BAC5B,MAAM,WAAW;8BACd,MAAM,iBAAiB;+BACtB,MAAM,aAAa;;8BAEpB,MAAM,iBAAiB;8BACvB,MAAM,YAAY;0CACN,MAAM,mBAAmB;kDACjB,MAAM,iBAAiB;;;iBAGxD,UAAU;;;;gCAIK,gBAAgB;;;;;;;;;;;;;;;;;;wBAkBxB,MAAM,qBAAqB;yBAC1B,MAAM,aAAa;;;;gCAIZ,aAAa;;;;CAK3C,OAAO,cAAc,wBAAwB,KAAK,MAAM,KAAK,CAAC,MAAM,CAAC;AACvE;AAEA,MAAa,cAAc,SAAiB;CAC1C,IAAI,CAAC,SAAS,OAAO,CAAC,CAAC,SAAS,IAAI,GAClC,OAAO,KAAK,QAAQ,KAAK,GAAG;MACvB,IAAI,SAAS,SAClB,OAAO;MAEP,OAAO,KAAK,MAAM,GAAG,CAAC,CAAC;AAE3B"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/Giscus/style.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { useTheme } from '@/styles/theme/scope';\nimport { withAlpha } from '@/utils/colorMath';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nexport const useStyles = () => {\n  const theme = useTheme();\n  const colorText = theme.colorText;\n  const colorTextSecondary = theme.colorTextSecondary;\n  const colorTextTertiary = theme.colorTextTertiary;\n  const colorRed = theme.colorError;\n  const colorOrange = theme.colorWarning;\n  const colorGreen = theme.colorSuccess;\n  const colorBlue = theme.colorInfo;\n  const loaderContainer = theme.isDarkMode\n    ? 'https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg'\n    : 'https://github.com/images/modules/pulls/progressive-disclosure-line.svg';\n  const loadingImage = theme.isDarkMode\n    ? 'https://github.githubassets.com/images/mona-loading-dark.gif'\n    : 'https://github.githubassets.com/images/mona-loading-default.gif';\n  const styles = `\n    main {\n      --color-prettylights-syntax-comment: ${colorTextTertiary};\n      --color-prettylights-syntax-constant: ${colorGreen};\n      --color-prettylights-syntax-entity: ${colorOrange};\n      --color-prettylights-syntax-storage-modifier-import: ${colorRed};\n      --color-prettylights-syntax-entity-tag: ${colorBlue};\n      --color-prettylights-syntax-keyword: ${colorBlue};\n      --color-prettylights-syntax-string: ${colorGreen};\n      --color-prettylights-syntax-variable: ${colorRed};\n      --color-prettylights-syntax-brackethighlighter-unmatched: ${colorRed};\n      --color-prettylights-syntax-invalid-illegal-text: ${colorTextSecondary};\n      --color-prettylights-syntax-invalid-illegal-bg: ${withAlpha(colorRed, 0.4)};\n      --color-prettylights-syntax-carriage-return-text: ${colorTextSecondary};\n      --color-prettylights-syntax-carriage-return-bg: ${withAlpha(colorRed, 0.6)};\n      --color-prettylights-syntax-string-regexp: ${colorGreen};\n      --color-prettylights-syntax-markup-list: ${colorOrange};\n      --color-prettylights-syntax-markup-heading: ${colorBlue};\n      --color-prettylights-syntax-markup-italic: ${colorTextSecondary};\n      --color-prettylights-syntax-markup-bold: ${colorTextSecondary};\n      --color-prettylights-syntax-markup-deleted-text: ${colorTextSecondary};\n      --color-prettylights-syntax-markup-deleted-bg: ${withAlpha(colorRed, 0.2)};\n      --color-prettylights-syntax-markup-inserted-text: ${colorGreen};\n      --color-prettylights-syntax-markup-inserted-bg: ${withAlpha(colorGreen, 0.2)};\n      --color-prettylights-syntax-markup-changed-text: ${colorOrange};\n      --color-prettylights-syntax-markup-changed-bg: ${withAlpha(colorRed, 0.2)};\n      --color-prettylights-syntax-markup-ignored-text: ${colorTextSecondary};\n      --color-prettylights-syntax-markup-ignored-bg: ${withAlpha(colorBlue, 0.2)};\n      --color-prettylights-syntax-meta-diff-range: ${colorOrange};\n      --color-prettylights-syntax-brackethighlighter-angle: ${colorTextSecondary};\n      --color-prettylights-syntax-sublimelinter-gutter-mark: ${colorTextTertiary};\n      --color-prettylights-syntax-constant-other-reference-link: ${colorBlue};\n      --color-btn-text: ${theme.colorText};\n      --color-btn-bg: ${theme.colorFillTertiary};\n      --color-btn-border: ${theme.colorBorderSecondary};\n      --color-btn-shadow: 0 0 transparent;\n      --color-btn-inset-shadow: 0 0 transparent;\n      --color-btn-hover-bg: ${theme.colorFillSecondary};\n      --color-btn-hover-border: ${theme.colorBorder};\n      --color-btn-active-bg: ${theme.colorFillSecondary};\n      --color-btn-active-border: ${theme.colorBorder};\n      --color-btn-selected-bg: ${theme.colorFillSecondary};\n      --color-btn-primary-text: ${safeReadableColor(theme.colorPrimary)};\n      --color-btn-primary-bg: ${theme.colorPrimary};\n      --color-btn-primary-border: ${theme.colorPrimaryBorder};\n      --color-btn-primary-shadow: 0 0 transparent;\n      --color-btn-primary-inset-shadow: 0 0 transparent;\n      --color-btn-primary-hover-bg: ${theme.colorPrimaryHover};\n      --color-btn-primary-hover-border: ${theme.colorPrimaryBorderHover};\n      --color-btn-primary-selected-bg: ${theme.colorPrimaryActive};\n      --color-btn-primary-selected-shadow: 0 0 transparent;\n      --color-btn-primary-disabled-text: color-mix(\n        in srgb,\n        ${safeReadableColor(theme.colorPrimary)} 50%,\n        transparent\n      );\n      --color-btn-primary-disabled-bg: ${withAlpha(theme.colorPrimary, 0.5)};\n      --color-btn-primary-disabled-border: ${withAlpha(theme.colorPrimaryBorder, 0.5)};\n      --color-action-list-item-default-hover-bg: ${theme.colorFillQuaternary};\n      --color-segmented-control-bg: ${theme.colorFillTertiary};\n      --color-segmented-control-button-bg: transparent;\n      --color-segmented-control-button-selected-border: ${theme.colorBorder};\n      --color-fg-default: ${theme.colorText};\n      --color-fg-muted: ${theme.colorTextSecondary};\n      --color-fg-subtle: ${theme.colorTextQuaternary};\n      --color-canvas-default: transparent;\n      --color-canvas-overlay: ${theme.colorBgElevated};\n      --color-canvas-inset: transparent;\n      --color-canvas-subtle: ${theme.colorFillQuaternary};\n      --color-border-default: ${theme.colorBorder};\n      --color-border-muted: ${theme.colorBorderSecondary};\n      --color-neutral-muted: ${theme.colorFillQuaternary};\n      --color-neutral-subtle: ${theme.colorFillTertiary};\n      --color-accent-fg: ${theme.colorInfo};\n      --color-accent-emphasis: ${theme.colorInfoBorderHover};\n      --color-accent-muted: ${theme.colorInfoBorder};\n      --color-accent-subtle: ${theme.colorInfoBg};\n      --color-success-fg: ${theme.colorSuccess};\n      --color-attention-fg: ${theme.colorWarning};\n      --color-attention-muted: ${theme.colorWarningBorder};\n      --color-attention-subtle: ${theme.colorWarningBg};\n      --color-danger-fg: ${theme.colorError};\n      --color-danger-muted: ${theme.colorErrorBorder};\n      --color-danger-subtle: ${theme.colorErrorBg};\n      --color-primer-shadow-inset: 0 0 transparent;\n      --color-scale-gray-7: ${theme.colorBgContainer};\n      --color-scale-blue-8: ${theme.colorInfoBg};\n      --color-social-reaction-bg-hover: ${theme.colorFillSecondary};\n      --color-social-reaction-bg-reacted-hover: ${theme.colorInfoBgHover};\n\n      .markdown pre {\n        color: ${colorText};\n      }\n\n      .pagination-loader-container {\n        background-image: url(${loaderContainer});\n      }\n\n      .gsc-pagination-button {\n        background-color: var(--color-btn-bg);\n      }\n\n      .gsc-reactions-popover {\n        width: 170px;\n\n        > .m-2 {\n          display: flex;\n          flex-wrap: wrap;\n          gap: 8px;\n        }\n      }\n\n      .gsc-emoji-button.has-reacted {\n        border-color: ${theme.colorInfoBorderHover};\n        border-radius: ${theme.borderRadius}px;\n      }\n\n      .gsc-loading-image {\n        background-image: url(${loadingImage});\n      }\n    }\n  `;\n\n  return useMemo(() => `data:text/css;base64,${btoa(styles)}`, [styles]);\n};\n\nexport const formatLang = (lang: string) => {\n  if (['zh_CN', 'zh_TW'].includes(lang)) {\n    return lang.replace('_', '-');\n  } else if (lang === 'zh_HK') {\n    return 'zh-TW';\n  } else {\n    return lang.split('_')[0];\n  }\n};\n"],"mappings":";;;;;AAMA,MAAa,kBAAkB;CAC7B,MAAM,QAAQ,SAAS;CACvB,MAAM,YAAY,MAAM;CACxB,MAAM,qBAAqB,MAAM;CACjC,MAAM,oBAAoB,MAAM;CAChC,MAAM,WAAW,MAAM;CACvB,MAAM,cAAc,MAAM;CAC1B,MAAM,aAAa,MAAM;CACzB,MAAM,YAAY,MAAM;CACxB,MAAM,kBAAkB,MAAM,aAC1B,iFACA;CACJ,MAAM,eAAe,MAAM,aACvB,iEACA;CACJ,MAAM,SAAS;;6CAE4B,kBAAkB;8CACjB,WAAW;4CACb,YAAY;6DACK,SAAS;gDACtB,UAAU;6CACb,UAAU;4CACX,WAAW;8CACT,SAAS;kEACW,SAAS;0DACjB,mBAAmB;wDACrB,UAAU,UAAU,EAAG,EAAE;0DACvB,mBAAmB;wDACrB,UAAU,UAAU,EAAG,EAAE;mDAC9B,WAAW;iDACb,YAAY;oDACT,UAAU;mDACX,mBAAmB;iDACrB,mBAAmB;yDACX,mBAAmB;uDACrB,UAAU,UAAU,EAAG,EAAE;0DACtB,WAAW;wDACb,UAAU,YAAY,EAAG,EAAE;yDAC1B,YAAY;uDACd,UAAU,UAAU,EAAG,EAAE;yDACvB,mBAAmB;uDACrB,UAAU,WAAW,EAAG,EAAE;qDAC5B,YAAY;8DACH,mBAAmB;+DAClB,kBAAkB;mEACd,UAAU;0BACnD,MAAM,UAAU;wBAClB,MAAM,kBAAkB;4BACpB,MAAM,qBAAqB;;;8BAGzB,MAAM,mBAAmB;kCACrB,MAAM,YAAY;+BACrB,MAAM,mBAAmB;mCACrB,MAAM,YAAY;iCACpB,MAAM,mBAAmB;kCACxB,kBAAkB,MAAM,YAAY,EAAE;gCACxC,MAAM,aAAa;oCACf,MAAM,mBAAmB;;;sCAGvB,MAAM,kBAAkB;0CACpB,MAAM,wBAAwB;yCAC/B,MAAM,mBAAmB;;;;UAIxD,kBAAkB,MAAM,YAAY,EAAE;;;yCAGP,UAAU,MAAM,cAAc,EAAG,EAAE;6CAC/B,UAAU,MAAM,oBAAoB,EAAG,EAAE;mDACnC,MAAM,oBAAoB;sCACvC,MAAM,kBAAkB;;0DAEJ,MAAM,YAAY;4BAChD,MAAM,UAAU;0BAClB,MAAM,mBAAmB;2BACxB,MAAM,oBAAoB;;gCAErB,MAAM,gBAAgB;;+BAEvB,MAAM,oBAAoB;gCACzB,MAAM,YAAY;8BACpB,MAAM,qBAAqB;+BAC1B,MAAM,oBAAoB;gCACzB,MAAM,kBAAkB;2BAC7B,MAAM,UAAU;iCACV,MAAM,qBAAqB;8BAC9B,MAAM,gBAAgB;+BACrB,MAAM,YAAY;4BACrB,MAAM,aAAa;8BACjB,MAAM,aAAa;iCAChB,MAAM,mBAAmB;kCACxB,MAAM,eAAe;2BAC5B,MAAM,WAAW;8BACd,MAAM,iBAAiB;+BACtB,MAAM,aAAa;;8BAEpB,MAAM,iBAAiB;8BACvB,MAAM,YAAY;0CACN,MAAM,mBAAmB;kDACjB,MAAM,iBAAiB;;;iBAGxD,UAAU;;;;gCAIK,gBAAgB;;;;;;;;;;;;;;;;;;wBAkBxB,MAAM,qBAAqB;yBAC1B,MAAM,aAAa;;;;gCAIZ,aAAa;;;;CAK3C,OAAO,cAAc,wBAAwB,KAAK,MAAM,KAAK,CAAC,MAAM,CAAC;AACvE;AAEA,MAAa,cAAc,SAAiB;CAC1C,IAAI,CAAC,SAAS,OAAO,CAAC,CAAC,SAAS,IAAI,GAClC,OAAO,KAAK,QAAQ,KAAK,GAAG;MACvB,IAAI,SAAS,SAClB,OAAO;MAEP,OAAO,KAAK,MAAM,GAAG,CAAC,CAAC;AAE3B"}

package/es/awesome/GridBackground/GridBackground.mjs

@@ -2,6 +2,7 @@
 import { styleProps } from "../../styles/stylex/props.mjs";
 import { cssVar } from "../../styles/stylex/cssVar.stylex.mjs";
 import { useTheme } from "../../styles/theme/scope.mjs";
+import { useSize } from "../../hooks/useSize.mjs";
 import Grid from "./components/Grid.mjs";
 import { styles } from "./style.mjs";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -9,7 +10,6 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import * as stylex from "@stylexjs/stylex";
 import { shuffle } from "es-toolkit/compat";
 import chroma from "chroma-js";
-import { useSize } from "ahooks";
 //#region src/awesome/GridBackground/GridBackground.tsx
 const initialGroup = [
 	0,

package/es/awesome/GridBackground/GridBackground.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GridBackground.mjs","names":[],"sources":["../../../src/awesome/GridBackground/GridBackground.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { useSize } from 'ahooks';\nimport chroma from 'chroma-js';\nimport { shuffle } from 'es-toolkit/compat';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useTheme } from '@/styles/theme/scope';\n\nimport Grid, { type GridProps } from './components/Grid';\nimport { styles } from './style';\nimport type { GridBackgroundProps } from './type';\n\nconst initialGroup = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];\n\nconst GridBackground = memo<GridBackgroundProps>(\n  ({\n    flip,\n    reverse,\n    showBackground,\n    backgroundColor,\n    random,\n    animationDuration = 8,\n    className,\n    colorFront,\n    colorBack,\n    strokeWidth,\n    style,\n    animation,\n    ...rest\n  }) => {\n    const ref = useRef(null);\n    const size = useSize(ref);\n    const theme = useTheme();\n\n    const backgroundCssVariables = useMemo<Record<string, string>>(() => {\n      if (!showBackground) return {} as Record<string, string>;\n\n      const scale = chroma\n        .bezier([theme.colorText, backgroundColor || 'blue', theme.colorBgLayout])\n        .scale()\n        .mode('lch')\n        .correctLightness()\n        .colors(6);\n\n      return {\n        '--grid-background-color-1': scale[1],\n        '--grid-background-color-2': scale[2],\n        '--grid-background-color-3': scale[3],\n        '--grid-background-color-4': scale[4],\n      };\n    }, [showBackground, backgroundColor, theme.colorText, theme.colorBgLayout]);\n\n    const gridProps: GridProps = useMemo(\n      () => ({\n        className: stylex.props(styles.highlight, reverse && styles.highlightReverse).className,\n        color: colorFront || cssVar.colorText,\n        strokeWidth,\n      }),\n      [reverse, colorFront, strokeWidth],\n    );\n\n    const [group, setGroup] = useState(random ? initialGroup : undefined);\n    useEffect(() => {\n      setGroup(random ? shuffle(initialGroup) : undefined);\n    }, [random]);\n\n    const HighlightGrid = useCallback(() => {\n      if (!group)\n        return <Grid style={{ '--duration': `${animationDuration}s` } as any} {...gridProps} />;\n\n      return (\n        <>\n          {group.map((item, index) => {\n            return (\n              <Grid\n                key={item}\n                linePick={item}\n                style={\n                  {\n                    '--delay': `${index + Math.random()}s`,\n                    '--duration': `${animationDuration}s`,\n                  } as any\n                }\n                {...gridProps}\n              />\n            );\n          })}\n        </>\n      );\n    }, [group, animationDuration, gridProps]);\n\n    return (\n      <div\n        {...styleProps(\n          styles.container,\n          className,\n          flip ? { transform: 'scaleY(-1)', ...style } : style,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        <Grid\n          color={colorBack || cssVar.colorBorder}\n          strokeWidth={strokeWidth}\n          style={{ zIndex: 2 }}\n        />\n        {animation && <HighlightGrid />}\n        {showBackground && (\n          <div\n            {...stylex.props(styles.backgroundContainer)}\n            style={{\n              ...(size ? { fontSize: size.width / 80 } : {}),\n              ...backgroundCssVariables,\n            }}\n          >\n            <div {...stylex.props(styles.backgroundShape)} />\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nGridBackground.displayName = 'GridBackground';\n\nexport default GridBackground;\n"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,eAAe;CAAC;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAI;CAAI;CAAI;CAAI;AAAE;AACtE,MAAM,iBAAiB,MAA2B,EAChD,MACA,SACA,gBACA,iBACA,QACA,oBAAoB,GACpB,WACA,YACA,WACA,aACA,OACA,WACA,GAAG,WACC;CACJ,MAAM,MAAM,OAAO,IAAI;CACvB,MAAM,OAAO,QAAQ,GAAG;CACxB,MAAM,QAAQ,SAAS;CACvB,MAAM,yBAAyB,cAAsC;EACnE,IAAI,CAAC,gBAAgB,OAAO,CAAC;EAC7B,MAAM,QAAQ,OAAO,OAAO;GAAC,MAAM;GAAW,mBAAmB;GAAQ,MAAM;EAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC;EAC9I,OAAO;GACL,6BAA6B,MAAM;GACnC,6BAA6B,MAAM;GACnC,6BAA6B,MAAM;GACnC,6BAA6B,MAAM;EACrC;CACF,GAAG;EAAC;EAAgB;EAAiB,MAAM;EAAW,MAAM;CAAa,CAAC;CAC1E,MAAM,YAAuB,eAAe;EAC1C,WAAW,OAAO,MAAM,OAAO,WAAW,WAAW,OAAO,gBAAgB,CAAC,CAAC;EAC9E,OAAO,cAAc,OAAO;EAC5B;CACF,IAAI;EAAC;EAAS;EAAY;CAAW,CAAC;CACtC,MAAM,CAAC,OAAO,YAAY,SAAS,SAAS,eAAe,KAAA,CAAS;CACpE,gBAAgB;EACd,SAAS,SAAS,QAAQ,YAAY,IAAI,KAAA,CAAS;CACrD,GAAG,CAAC,MAAM,CAAC;CACX,MAAM,gBAAgB,kBAAkB;EACtC,IAAI,CAAC,OAAO,OAAO,oBAAC,MAAD;GAAM,OAAO,EAC9B,cAAc,GAAG,kBAAkB,GACrC;GAAU,GAAI;EAAY,CAAA;EAC1B,OAAO,oBAAA,YAAA,EAAA,UACA,MAAM,KAAK,MAAM,UAAU;GAC9B,OAAO,oBAAC,MAAD;IAAiB,UAAU;IAAM,OAAO;KAC7C,WAAW,GAAG,QAAQ,KAAK,OAAO,EAAE;KACpC,cAAc,GAAG,kBAAkB;IACrC;IAAU,GAAI;GAAY,GAHR,IAGQ;EAC5B,CAAC,EACG,CAAA;CACR,GAAG;EAAC;EAAO;EAAmB;CAAS,CAAC;CACxC,OAAO,qBAAC,OAAD;EAAK,GAAI,WAAW,OAAO,WAAW,WAAW,OAAO;GAC7D,WAAW;GACX,GAAG;EACL,IAAI,KAAK;EAAQ;EAAK,GAAI;EAHnB,UAAA;GAID,oBAAC,MAAD;IAAM,OAAO,aAAa,OAAO;IAA0B;IAAa,OAAO,EACjF,QAAQ,EACV;GAAI,CAAA;GACC,aAAa,oBAAC,eAAD,CAAgB,CAAA;GAC7B,kBAAkB,oBAAC,OAAD;IAAK,GAAI,OAAO,MAAM,OAAO,mBAAmB;IAAG,OAAO;KAC/E,GAAI,OAAO,EACT,UAAU,KAAK,QAAQ,GACzB,IAAI,CAAC;KACL,GAAG;IACL;IACQ,UAAA,oBAAC,OAAD,EAAK,GAAI,OAAO,MAAM,OAAO,eAAe,EAAI,CAAA;GAC7C,CAAA;EACJ;;AACX,CAAC;AACD,eAAe,cAAc"}
+{"version":3,"file":"GridBackground.mjs","names":[],"sources":["../../../src/awesome/GridBackground/GridBackground.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport chroma from 'chroma-js';\nimport { shuffle } from 'es-toolkit/compat';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useSize } from '@/hooks/useSize';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useTheme } from '@/styles/theme/scope';\n\nimport Grid, { type GridProps } from './components/Grid';\nimport { styles } from './style';\nimport type { GridBackgroundProps } from './type';\n\nconst initialGroup = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];\n\nconst GridBackground = memo<GridBackgroundProps>(\n  ({\n    flip,\n    reverse,\n    showBackground,\n    backgroundColor,\n    random,\n    animationDuration = 8,\n    className,\n    colorFront,\n    colorBack,\n    strokeWidth,\n    style,\n    animation,\n    ...rest\n  }) => {\n    const ref = useRef(null);\n    const size = useSize(ref);\n    const theme = useTheme();\n\n    const backgroundCssVariables = useMemo<Record<string, string>>(() => {\n      if (!showBackground) return {} as Record<string, string>;\n\n      const scale = chroma\n        .bezier([theme.colorText, backgroundColor || 'blue', theme.colorBgLayout])\n        .scale()\n        .mode('lch')\n        .correctLightness()\n        .colors(6);\n\n      return {\n        '--grid-background-color-1': scale[1],\n        '--grid-background-color-2': scale[2],\n        '--grid-background-color-3': scale[3],\n        '--grid-background-color-4': scale[4],\n      };\n    }, [showBackground, backgroundColor, theme.colorText, theme.colorBgLayout]);\n\n    const gridProps: GridProps = useMemo(\n      () => ({\n        className: stylex.props(styles.highlight, reverse && styles.highlightReverse).className,\n        color: colorFront || cssVar.colorText,\n        strokeWidth,\n      }),\n      [reverse, colorFront, strokeWidth],\n    );\n\n    const [group, setGroup] = useState(random ? initialGroup : undefined);\n    useEffect(() => {\n      setGroup(random ? shuffle(initialGroup) : undefined);\n    }, [random]);\n\n    const HighlightGrid = useCallback(() => {\n      if (!group)\n        return <Grid style={{ '--duration': `${animationDuration}s` } as any} {...gridProps} />;\n\n      return (\n        <>\n          {group.map((item, index) => {\n            return (\n              <Grid\n                key={item}\n                linePick={item}\n                style={\n                  {\n                    '--delay': `${index + Math.random()}s`,\n                    '--duration': `${animationDuration}s`,\n                  } as any\n                }\n                {...gridProps}\n              />\n            );\n          })}\n        </>\n      );\n    }, [group, animationDuration, gridProps]);\n\n    return (\n      <div\n        {...styleProps(\n          styles.container,\n          className,\n          flip ? { transform: 'scaleY(-1)', ...style } : style,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        <Grid\n          color={colorBack || cssVar.colorBorder}\n          strokeWidth={strokeWidth}\n          style={{ zIndex: 2 }}\n        />\n        {animation && <HighlightGrid />}\n        {showBackground && (\n          <div\n            {...stylex.props(styles.backgroundContainer)}\n            style={{\n              ...(size ? { fontSize: size.width / 80 } : {}),\n              ...backgroundCssVariables,\n            }}\n          >\n            <div {...stylex.props(styles.backgroundShape)} />\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nGridBackground.displayName = 'GridBackground';\n\nexport default GridBackground;\n"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,eAAe;CAAC;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAI;CAAI;CAAI;CAAI;AAAE;AACtE,MAAM,iBAAiB,MAA2B,EAChD,MACA,SACA,gBACA,iBACA,QACA,oBAAoB,GACpB,WACA,YACA,WACA,aACA,OACA,WACA,GAAG,WACC;CACJ,MAAM,MAAM,OAAO,IAAI;CACvB,MAAM,OAAO,QAAQ,GAAG;CACxB,MAAM,QAAQ,SAAS;CACvB,MAAM,yBAAyB,cAAsC;EACnE,IAAI,CAAC,gBAAgB,OAAO,CAAC;EAC7B,MAAM,QAAQ,OAAO,OAAO;GAAC,MAAM;GAAW,mBAAmB;GAAQ,MAAM;EAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC;EAC9I,OAAO;GACL,6BAA6B,MAAM;GACnC,6BAA6B,MAAM;GACnC,6BAA6B,MAAM;GACnC,6BAA6B,MAAM;EACrC;CACF,GAAG;EAAC;EAAgB;EAAiB,MAAM;EAAW,MAAM;CAAa,CAAC;CAC1E,MAAM,YAAuB,eAAe;EAC1C,WAAW,OAAO,MAAM,OAAO,WAAW,WAAW,OAAO,gBAAgB,CAAC,CAAC;EAC9E,OAAO,cAAc,OAAO;EAC5B;CACF,IAAI;EAAC;EAAS;EAAY;CAAW,CAAC;CACtC,MAAM,CAAC,OAAO,YAAY,SAAS,SAAS,eAAe,KAAA,CAAS;CACpE,gBAAgB;EACd,SAAS,SAAS,QAAQ,YAAY,IAAI,KAAA,CAAS;CACrD,GAAG,CAAC,MAAM,CAAC;CACX,MAAM,gBAAgB,kBAAkB;EACtC,IAAI,CAAC,OAAO,OAAO,oBAAC,MAAD;GAAM,OAAO,EAC9B,cAAc,GAAG,kBAAkB,GACrC;GAAU,GAAI;EAAY,CAAA;EAC1B,OAAO,oBAAA,YAAA,EAAA,UACA,MAAM,KAAK,MAAM,UAAU;GAC9B,OAAO,oBAAC,MAAD;IAAiB,UAAU;IAAM,OAAO;KAC7C,WAAW,GAAG,QAAQ,KAAK,OAAO,EAAE;KACpC,cAAc,GAAG,kBAAkB;IACrC;IAAU,GAAI;GAAY,GAHR,IAGQ;EAC5B,CAAC,EACG,CAAA;CACR,GAAG;EAAC;EAAO;EAAmB;CAAS,CAAC;CACxC,OAAO,qBAAC,OAAD;EAAK,GAAI,WAAW,OAAO,WAAW,WAAW,OAAO;GAC7D,WAAW;GACX,GAAG;EACL,IAAI,KAAK;EAAQ;EAAK,GAAI;EAHnB,UAAA;GAID,oBAAC,MAAD;IAAM,OAAO,aAAa,OAAO;IAA0B;IAAa,OAAO,EACjF,QAAQ,EACV;GAAI,CAAA;GACC,aAAa,oBAAC,eAAD,CAAgB,CAAA;GAC7B,kBAAkB,oBAAC,OAAD;IAAK,GAAI,OAAO,MAAM,OAAO,mBAAmB;IAAG,OAAO;KAC/E,GAAI,OAAO,EACT,UAAU,KAAK,QAAQ,GACzB,IAAI,CAAC;KACL,GAAG;IACL;IACQ,UAAA,oBAAC,OAAD,EAAK,GAAI,OAAO,MAAM,OAAO,eAAe,EAAI,CAAA;GAC7C,CAAA;EACJ;;AACX,CAAC;AACD,eAAe,cAAc"}

package/es/awesome/GridBackground/GridShowcase.mjs

@@ -1,10 +1,10 @@
 "use client";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import { withAlpha } from "../../utils/colorMath.mjs";
 import { useTheme } from "../../styles/theme/scope.mjs";
 import GridBackground from "./GridBackground.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { rgba } from "polished";
 //#region src/awesome/GridBackground/GridShowcase.tsx
 const GridShowcase = memo(({ style, children, backgroundColor = "#001dff", innerProps, ...rest }) => {
 	const theme = useTheme();
@@ -18,8 +18,8 @@ const GridShowcase = memo(({ style, children, backgroundColor = "#001dff", inner
 			/* @__PURE__ */ jsx(GridBackground, {
 				animation: true,
 				flip: true,
-				colorBack: rgba(theme.colorText, .12),
-				colorFront: rgba(theme.colorText, .6)
+				colorBack: withAlpha(theme.colorText, .12),
+				colorFront: withAlpha(theme.colorText, .6)
 			}),
 			/* @__PURE__ */ jsx(FlexBasic_default, {
 				align: "center",
@@ -36,7 +36,7 @@ const GridShowcase = memo(({ style, children, backgroundColor = "#001dff", inner
 				reverse: true,
 				showBackground: true,
 				backgroundColor,
-				colorBack: rgba(theme.colorText, .24),
+				colorBack: withAlpha(theme.colorText, .24),
 				colorFront: theme.colorText,
 				style: { zIndex: 0 }
 			})

package/es/awesome/GridBackground/GridShowcase.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GridShowcase.mjs","names":["Flexbox"],"sources":["../../../src/awesome/GridBackground/GridShowcase.tsx"],"sourcesContent":["'use client';\n\nimport { rgba } from 'polished';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { useTheme } from '@/styles/theme/scope';\n\nimport GridBackground from './GridBackground';\nimport type { GridShowcaseProps } from './type';\n\nconst GridShowcase = memo<GridShowcaseProps>(\n  ({ style, children, backgroundColor = '#001dff', innerProps, ...rest }) => {\n    const theme = useTheme();\n\n    return (\n      <Flexbox style={{ position: 'relative', ...style }} {...rest}>\n        <GridBackground\n          animation\n          flip\n          colorBack={rgba(theme.colorText, 0.12)}\n          colorFront={rgba(theme.colorText, 0.6)}\n        />\n        <Flexbox align={'center'} {...innerProps} style={{ zIndex: 4, ...innerProps?.style }}>\n          {children}\n        </Flexbox>\n        <GridBackground\n          animation\n          random\n          reverse\n          showBackground\n          backgroundColor={backgroundColor}\n          colorBack={rgba(theme.colorText, 0.24)}\n          colorFront={theme.colorText}\n          style={{ zIndex: 0 }}\n        />\n      </Flexbox>\n    );\n  },\n);\n\nGridShowcase.displayName = 'GridShowcase';\n\nexport default GridShowcase;\n"],"mappings":";;;;;;;;AAWA,MAAM,eAAe,MAClB,EAAE,OAAO,UAAU,kBAAkB,WAAW,YAAY,GAAG,WAAW;CACzE,MAAM,QAAQ,SAAS;CAEvB,OACE,qBAACA,mBAAD;EAAS,OAAO;GAAE,UAAU;GAAY,GAAG;EAAM;EAAG,GAAI;EAAxD,UAAA;GACE,oBAAC,gBAAD;IACE,WAAA;IACA,MAAA;IACA,WAAW,KAAK,MAAM,WAAW,GAAI;IACrC,YAAY,KAAK,MAAM,WAAW,EAAG;GACtC,CAAA;GACD,oBAACA,mBAAD;IAAS,OAAO;IAAU,GAAI;IAAY,OAAO;KAAE,QAAQ;KAAG,GAAG,YAAY;IAAM;IAChF;GACM,CAAA;GACT,oBAAC,gBAAD;IACE,WAAA;IACA,QAAA;IACA,SAAA;IACA,gBAAA;IACiB;IACjB,WAAW,KAAK,MAAM,WAAW,GAAI;IACrC,YAAY,MAAM;IAClB,OAAO,EAAE,QAAQ,EAAE;GACpB,CAAA;EACM;;AAEb,CACF;AAEA,aAAa,cAAc"}
+{"version":3,"file":"GridShowcase.mjs","names":["Flexbox"],"sources":["../../../src/awesome/GridBackground/GridShowcase.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { useTheme } from '@/styles/theme/scope';\nimport { withAlpha } from '@/utils/colorMath';\n\nimport GridBackground from './GridBackground';\nimport type { GridShowcaseProps } from './type';\n\nconst GridShowcase = memo<GridShowcaseProps>(\n  ({ style, children, backgroundColor = '#001dff', innerProps, ...rest }) => {\n    const theme = useTheme();\n\n    return (\n      <Flexbox style={{ position: 'relative', ...style }} {...rest}>\n        <GridBackground\n          animation\n          flip\n          colorBack={withAlpha(theme.colorText, 0.12)}\n          colorFront={withAlpha(theme.colorText, 0.6)}\n        />\n        <Flexbox align={'center'} {...innerProps} style={{ zIndex: 4, ...innerProps?.style }}>\n          {children}\n        </Flexbox>\n        <GridBackground\n          animation\n          random\n          reverse\n          showBackground\n          backgroundColor={backgroundColor}\n          colorBack={withAlpha(theme.colorText, 0.24)}\n          colorFront={theme.colorText}\n          style={{ zIndex: 0 }}\n        />\n      </Flexbox>\n    );\n  },\n);\n\nGridShowcase.displayName = 'GridShowcase';\n\nexport default GridShowcase;\n"],"mappings":";;;;;;;;AAWA,MAAM,eAAe,MAClB,EAAE,OAAO,UAAU,kBAAkB,WAAW,YAAY,GAAG,WAAW;CACzE,MAAM,QAAQ,SAAS;CAEvB,OACE,qBAACA,mBAAD;EAAS,OAAO;GAAE,UAAU;GAAY,GAAG;EAAM;EAAG,GAAI;EAAxD,UAAA;GACE,oBAAC,gBAAD;IACE,WAAA;IACA,MAAA;IACA,WAAW,UAAU,MAAM,WAAW,GAAI;IAC1C,YAAY,UAAU,MAAM,WAAW,EAAG;GAC3C,CAAA;GACD,oBAACA,mBAAD;IAAS,OAAO;IAAU,GAAI;IAAY,OAAO;KAAE,QAAQ;KAAG,GAAG,YAAY;IAAM;IAChF;GACM,CAAA;GACT,oBAAC,gBAAD;IACE,WAAA;IACA,QAAA;IACA,SAAA;IACA,gBAAA;IACiB;IACjB,WAAW,UAAU,MAAM,WAAW,GAAI;IAC1C,YAAY,MAAM;IAClB,OAAO,EAAE,QAAQ,EAAE;GACpB,CAAA;EACM;;AAEb,CACF;AAEA,aAAa,cAAc"}

package/es/awesome/Spline/ParentSize.mjs

@@ -1,7 +1,7 @@
+import { mergeRefs } from "../../utils/mergeRefs.mjs";
 import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { debounce } from "es-toolkit/compat";
-import { mergeRefs } from "react-merge-refs";
 //#region src/awesome/Spline/ParentSize.tsx
 const defaultIgnoreDimensions = [];
 const defaultParentSizeStyles = {

package/es/awesome/Spline/ParentSize.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ParentSize.mjs","names":[],"sources":["../../../src/awesome/Spline/ParentSize.tsx"],"sourcesContent":["import { debounce } from 'es-toolkit/compat';\nimport {\n  type CSSProperties,\n  memo,\n  type ReactNode,\n  type Ref,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { mergeRefs } from 'react-merge-refs';\n\ninterface ResizeObserverCallback {\n  (entries: ResizeObserverEntry[], observer: ResizeObserver): void;\n}\n\ninterface ResizeObserverPolyfill {\n  new (callback: ResizeObserverCallback): ResizeObserver;\n}\n\n// @TODO remove when upgraded to TS 4 which has its own declaration\ninterface PrivateWindow {\n  ResizeObserver: ResizeObserverPolyfill;\n}\n\nexport interface ParentSizeProps {\n  /** Child render function `({ width, height, top, left, ref, resize }) => ReactNode`. */\n  children: (\n    args: {\n      ref: HTMLDivElement | null;\n      resize: (state: ParentSizeState) => void;\n    } & ParentSizeState,\n  ) => ReactNode;\n  /** Optional `className` to add to the parent `div` wrapper used for size measurement. */\n  className?: string;\n  /** Child render updates upon resize are delayed until `debounceTime` milliseconds _after_ the last resize event is observed. */\n  debounceTime?: number;\n  /** Optional flag to toggle leading debounce calls. When set to true this will ensure that the component always renders immediately. (defaults to true) */\n  enableDebounceLeadingCall?: boolean;\n  /** Optional dimensions provided won't trigger a state change when changed. */\n  ignoreDimensions?: keyof ParentSizeState | (keyof ParentSizeState)[];\n  /** Optional `style` object to apply to the parent `div` wrapper used for size measurement. */\n  parentSizeStyles?: CSSProperties;\n  ref?: Ref<HTMLDivElement>;\n  /** Optionally inject a ResizeObserver polyfill, else this *must* be globally available. */\n  resizeObserverPolyfill?: ResizeObserverPolyfill;\n}\n\ntype ParentSizeState = {\n  height: number;\n  left: number;\n  top: number;\n  width: number;\n};\n\nexport type ParentSizeProvidedProps = ParentSizeState;\n\nconst defaultIgnoreDimensions: ParentSizeProps['ignoreDimensions'] = [];\nconst defaultParentSizeStyles = { height: '100%', width: '100%' };\n\nconst ParentSize = memo<ParentSizeProps>(\n  ({\n    ref,\n    className,\n    children,\n    debounceTime = 300,\n    ignoreDimensions = defaultIgnoreDimensions,\n    parentSizeStyles,\n    enableDebounceLeadingCall = true,\n    resizeObserverPolyfill,\n    ...restProps\n  }) => {\n    const target = useRef<HTMLDivElement | null>(null);\n    const animationFrameID = useRef(0);\n\n    const [state, setState] = useState<ParentSizeState>({\n      height: 0,\n      left: 0,\n      top: 0,\n      width: 0,\n    });\n\n    const resize = useMemo(() => {\n      const normalized = Array.isArray(ignoreDimensions) ? ignoreDimensions : [ignoreDimensions];\n\n      return debounce(\n        (incoming: ParentSizeState) => {\n          setState((existing) => {\n            const stateKeys = Object.keys(existing) as (keyof ParentSizeState)[];\n            const keysWithChanges = stateKeys.filter((key) => existing[key] !== incoming[key]);\n            const shouldBail = keysWithChanges.every((key) => normalized.includes(key));\n\n            return shouldBail ? existing : incoming;\n          });\n        },\n        debounceTime,\n        { leading: enableDebounceLeadingCall },\n      );\n    }, [debounceTime, enableDebounceLeadingCall, ignoreDimensions]);\n\n    useEffect(() => {\n      const LocalResizeObserver =\n        resizeObserverPolyfill || (window as unknown as PrivateWindow).ResizeObserver;\n\n      const observer = new LocalResizeObserver((entries) => {\n        for (const entry of entries) {\n          const { left, top, width, height } = entry?.contentRect ?? {};\n          animationFrameID.current = window.requestAnimationFrame(() => {\n            resize({ height, left, top, width });\n          });\n        }\n      });\n      if (target.current) observer.observe(target.current);\n\n      return () => {\n        window.cancelAnimationFrame(animationFrameID.current);\n        observer.disconnect();\n        resize.cancel();\n      };\n    }, [resize, resizeObserverPolyfill]);\n\n    return (\n      <div\n        className={className}\n        ref={mergeRefs<HTMLDivElement>([ref, target])}\n        style={{ ...defaultParentSizeStyles, ...parentSizeStyles }}\n        {...restProps}\n      >\n        {children({\n          ...state,\n          ref: target.current,\n          resize,\n        })}\n      </div>\n    );\n  },\n);\n\nexport default ParentSize;\n"],"mappings":";;;;;AA0DA,MAAM,0BAA+D,CAAC;AACtE,MAAM,0BAA0B;CAAE,QAAQ;CAAQ,OAAO;AAAO;AAEhE,MAAM,aAAa,MAChB,EACC,KACA,WACA,UACA,eAAe,KACf,mBAAmB,yBACnB,kBACA,4BAA4B,MAC5B,wBACA,GAAG,gBACC;CACJ,MAAM,SAAS,OAA8B,IAAI;CACjD,MAAM,mBAAmB,OAAO,CAAC;CAEjC,MAAM,CAAC,OAAO,YAAY,SAA0B;EAClD,QAAQ;EACR,MAAM;EACN,KAAK;EACL,OAAO;CACT,CAAC;CAED,MAAM,SAAS,cAAc;EAC3B,MAAM,aAAa,MAAM,QAAQ,gBAAgB,IAAI,mBAAmB,CAAC,gBAAgB;EAEzF,OAAO,UACJ,aAA8B;GAC7B,UAAU,aAAa;IAKrB,OAJkB,OAAO,KAAK,QACE,CAAC,CAAC,QAAQ,QAAQ,SAAS,SAAS,SAAS,IAC5C,CAAC,CAAC,OAAO,QAAQ,WAAW,SAAS,GAAG,CAEzD,IAAI,WAAW;GACjC,CAAC;EACH,GACA,cACA,EAAE,SAAS,0BAA0B,CACvC;CACF,GAAG;EAAC;EAAc;EAA2B;CAAgB,CAAC;CAE9D,gBAAgB;EAId,MAAM,WAAW,KAFf,0BAA2B,OAAoC,iBAEvB,YAAY;GACpD,KAAK,MAAM,SAAS,SAAS;IAC3B,MAAM,EAAE,MAAM,KAAK,OAAO,WAAW,OAAO,eAAe,CAAC;IAC5D,iBAAiB,UAAU,OAAO,4BAA4B;KAC5D,OAAO;MAAE;MAAQ;MAAM;MAAK;KAAM,CAAC;IACrC,CAAC;GACH;EACF,CAAC;EACD,IAAI,OAAO,SAAS,SAAS,QAAQ,OAAO,OAAO;EAEnD,aAAa;GACX,OAAO,qBAAqB,iBAAiB,OAAO;GACpD,SAAS,WAAW;GACpB,OAAO,OAAO;EAChB;CACF,GAAG,CAAC,QAAQ,sBAAsB,CAAC;CAEnC,OACE,oBAAC,OAAD;EACa;EACX,KAAK,UAA0B,CAAC,KAAK,MAAM,CAAC;EAC5C,OAAO;GAAE,GAAG;GAAyB,GAAG;EAAiB;EACzD,GAAI;EAEH,UAAA,SAAS;GACR,GAAG;GACH,KAAK,OAAO;GACZ;EACF,CAAC;CACE,CAAA;AAET,CACF"}
+{"version":3,"file":"ParentSize.mjs","names":[],"sources":["../../../src/awesome/Spline/ParentSize.tsx"],"sourcesContent":["import { debounce } from 'es-toolkit/compat';\nimport {\n  type CSSProperties,\n  memo,\n  type ReactNode,\n  type Ref,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { mergeRefs } from '@/utils/mergeRefs';\n\ninterface ResizeObserverCallback {\n  (entries: ResizeObserverEntry[], observer: ResizeObserver): void;\n}\n\ninterface ResizeObserverPolyfill {\n  new (callback: ResizeObserverCallback): ResizeObserver;\n}\n\n// @TODO remove when upgraded to TS 4 which has its own declaration\ninterface PrivateWindow {\n  ResizeObserver: ResizeObserverPolyfill;\n}\n\nexport interface ParentSizeProps {\n  /** Child render function `({ width, height, top, left, ref, resize }) => ReactNode`. */\n  children: (\n    args: {\n      ref: HTMLDivElement | null;\n      resize: (state: ParentSizeState) => void;\n    } & ParentSizeState,\n  ) => ReactNode;\n  /** Optional `className` to add to the parent `div` wrapper used for size measurement. */\n  className?: string;\n  /** Child render updates upon resize are delayed until `debounceTime` milliseconds _after_ the last resize event is observed. */\n  debounceTime?: number;\n  /** Optional flag to toggle leading debounce calls. When set to true this will ensure that the component always renders immediately. (defaults to true) */\n  enableDebounceLeadingCall?: boolean;\n  /** Optional dimensions provided won't trigger a state change when changed. */\n  ignoreDimensions?: keyof ParentSizeState | (keyof ParentSizeState)[];\n  /** Optional `style` object to apply to the parent `div` wrapper used for size measurement. */\n  parentSizeStyles?: CSSProperties;\n  ref?: Ref<HTMLDivElement>;\n  /** Optionally inject a ResizeObserver polyfill, else this *must* be globally available. */\n  resizeObserverPolyfill?: ResizeObserverPolyfill;\n}\n\ntype ParentSizeState = {\n  height: number;\n  left: number;\n  top: number;\n  width: number;\n};\n\nexport type ParentSizeProvidedProps = ParentSizeState;\n\nconst defaultIgnoreDimensions: ParentSizeProps['ignoreDimensions'] = [];\nconst defaultParentSizeStyles = { height: '100%', width: '100%' };\n\nconst ParentSize = memo<ParentSizeProps>(\n  ({\n    ref,\n    className,\n    children,\n    debounceTime = 300,\n    ignoreDimensions = defaultIgnoreDimensions,\n    parentSizeStyles,\n    enableDebounceLeadingCall = true,\n    resizeObserverPolyfill,\n    ...restProps\n  }) => {\n    const target = useRef<HTMLDivElement | null>(null);\n    const animationFrameID = useRef(0);\n\n    const [state, setState] = useState<ParentSizeState>({\n      height: 0,\n      left: 0,\n      top: 0,\n      width: 0,\n    });\n\n    const resize = useMemo(() => {\n      const normalized = Array.isArray(ignoreDimensions) ? ignoreDimensions : [ignoreDimensions];\n\n      return debounce(\n        (incoming: ParentSizeState) => {\n          setState((existing) => {\n            const stateKeys = Object.keys(existing) as (keyof ParentSizeState)[];\n            const keysWithChanges = stateKeys.filter((key) => existing[key] !== incoming[key]);\n            const shouldBail = keysWithChanges.every((key) => normalized.includes(key));\n\n            return shouldBail ? existing : incoming;\n          });\n        },\n        debounceTime,\n        { leading: enableDebounceLeadingCall },\n      );\n    }, [debounceTime, enableDebounceLeadingCall, ignoreDimensions]);\n\n    useEffect(() => {\n      const LocalResizeObserver =\n        resizeObserverPolyfill || (window as unknown as PrivateWindow).ResizeObserver;\n\n      const observer = new LocalResizeObserver((entries) => {\n        for (const entry of entries) {\n          const { left, top, width, height } = entry?.contentRect ?? {};\n          animationFrameID.current = window.requestAnimationFrame(() => {\n            resize({ height, left, top, width });\n          });\n        }\n      });\n      if (target.current) observer.observe(target.current);\n\n      return () => {\n        window.cancelAnimationFrame(animationFrameID.current);\n        observer.disconnect();\n        resize.cancel();\n      };\n    }, [resize, resizeObserverPolyfill]);\n\n    return (\n      <div\n        className={className}\n        ref={mergeRefs<HTMLDivElement>([ref, target])}\n        style={{ ...defaultParentSizeStyles, ...parentSizeStyles }}\n        {...restProps}\n      >\n        {children({\n          ...state,\n          ref: target.current,\n          resize,\n        })}\n      </div>\n    );\n  },\n);\n\nexport default ParentSize;\n"],"mappings":";;;;;AA2DA,MAAM,0BAA+D,CAAC;AACtE,MAAM,0BAA0B;CAAE,QAAQ;CAAQ,OAAO;AAAO;AAEhE,MAAM,aAAa,MAChB,EACC,KACA,WACA,UACA,eAAe,KACf,mBAAmB,yBACnB,kBACA,4BAA4B,MAC5B,wBACA,GAAG,gBACC;CACJ,MAAM,SAAS,OAA8B,IAAI;CACjD,MAAM,mBAAmB,OAAO,CAAC;CAEjC,MAAM,CAAC,OAAO,YAAY,SAA0B;EAClD,QAAQ;EACR,MAAM;EACN,KAAK;EACL,OAAO;CACT,CAAC;CAED,MAAM,SAAS,cAAc;EAC3B,MAAM,aAAa,MAAM,QAAQ,gBAAgB,IAAI,mBAAmB,CAAC,gBAAgB;EAEzF,OAAO,UACJ,aAA8B;GAC7B,UAAU,aAAa;IAKrB,OAJkB,OAAO,KAAK,QACE,CAAC,CAAC,QAAQ,QAAQ,SAAS,SAAS,SAAS,IAC5C,CAAC,CAAC,OAAO,QAAQ,WAAW,SAAS,GAAG,CAEzD,IAAI,WAAW;GACjC,CAAC;EACH,GACA,cACA,EAAE,SAAS,0BAA0B,CACvC;CACF,GAAG;EAAC;EAAc;EAA2B;CAAgB,CAAC;CAE9D,gBAAgB;EAId,MAAM,WAAW,KAFf,0BAA2B,OAAoC,iBAEvB,YAAY;GACpD,KAAK,MAAM,SAAS,SAAS;IAC3B,MAAM,EAAE,MAAM,KAAK,OAAO,WAAW,OAAO,eAAe,CAAC;IAC5D,iBAAiB,UAAU,OAAO,4BAA4B;KAC5D,OAAO;MAAE;MAAQ;MAAM;MAAK;KAAM,CAAC;IACrC,CAAC;GACH;EACF,CAAC;EACD,IAAI,OAAO,SAAS,SAAS,QAAQ,OAAO,OAAO;EAEnD,aAAa;GACX,OAAO,qBAAqB,iBAAiB,OAAO;GACpD,SAAS,WAAW;GACpB,OAAO,OAAO;EAChB;CACF,GAAG,CAAC,QAAQ,sBAAsB,CAAC;CAEnC,OACE,oBAAC,OAAD;EACa;EACX,KAAK,UAA0B,CAAC,KAAK,MAAM,CAAC;EAC5C,OAAO;GAAE,GAAG;GAAyB,GAAG;EAAiB;EACzD,GAAI;EAEH,UAAA,SAAS;GACR,GAAG;GACH,KAAK,OAAO;GACZ;EACF,CAAC;CACE,CAAA;AAET,CACF"}

package/es/chat/BackBottom/BackBottom.mjs

@@ -1,10 +1,10 @@
 "use client";
 import { ButtonImpl } from "../../Button/Button.mjs";
+import { useScroll } from "../../hooks/useScroll.mjs";
 import { styles } from "./style.mjs";
 import { memo, useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { ListEnd } from "lucide-react";
-import { useScroll } from "ahooks";
 //#region src/chat/BackBottom/BackBottom.tsx
 const BackBottom = memo(({ visibilityHeight = 240, target, onClick, style, className, text }) => {
 	const [visible, setVisible] = useState(false);

package/es/chat/BackBottom/BackBottom.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BackBottom.mjs","names":[],"sources":["../../../src/chat/BackBottom/BackBottom.tsx"],"sourcesContent":["'use client';\n\nimport { useScroll } from 'ahooks';\nimport { ListEnd } from 'lucide-react';\nimport { memo, type MouseEventHandler, useEffect, useRef, useState } from 'react';\n\nimport { ButtonImpl } from '@/Button/Button';\n\nimport { styles } from './style';\nimport { type BackBottomProps } from './type';\n\nconst BackBottom = memo<BackBottomProps>(\n  ({ visibilityHeight = 240, target, onClick, style, className, text }) => {\n    const [visible, setVisible] = useState<boolean>(false);\n    const ref = useRef<HTMLButtonElement>(null);\n    const current = (target as any)?.current;\n    const scrollHeight = current?.scrollHeight || 0;\n    const clientHeight = current?.clientHeight || 0;\n    const scroll = useScroll(target);\n\n    useEffect(() => {\n      if (scroll?.top) {\n        setVisible(scroll?.top + clientHeight + visibilityHeight < scrollHeight);\n      }\n    }, [scrollHeight, scroll, visibilityHeight]);\n\n    const scrollToBottom: MouseEventHandler<HTMLElement> = (e) => {\n      (target as any)?.current?.scrollTo({ behavior: 'smooth', left: 0, top: scrollHeight });\n      onClick?.(e);\n    };\n\n    return (\n      <ButtonImpl\n        className={className}\n        icon={ListEnd}\n        ref={ref}\n        shape={'round'}\n        size={'small'}\n        style={style}\n        type={'fill'}\n        xstyle={[styles.root, visible ? styles.visible : styles.hidden]}\n        onClick={scrollToBottom}\n      >\n        {text || 'Back to bottom'}\n      </ButtonImpl>\n    );\n  },\n);\n\nBackBottom.displayName = 'BackBottom';\n\nexport default BackBottom;\n"],"mappings":";;;;;;;;AAWA,MAAM,aAAa,MAChB,EAAE,mBAAmB,KAAK,QAAQ,SAAS,OAAO,WAAW,WAAW;CACvE,MAAM,CAAC,SAAS,cAAc,SAAkB,KAAK;CACrD,MAAM,MAAM,OAA0B,IAAI;CAC1C,MAAM,UAAW,QAAgB;CACjC,MAAM,eAAe,SAAS,gBAAgB;CAC9C,MAAM,eAAe,SAAS,gBAAgB;CAC9C,MAAM,SAAS,UAAU,MAAM;CAE/B,gBAAgB;EACd,IAAI,QAAQ,KACV,WAAW,QAAQ,MAAM,eAAe,mBAAmB,YAAY;CAE3E,GAAG;EAAC;EAAc;EAAQ;CAAgB,CAAC;CAE3C,MAAM,kBAAkD,MAAM;EAC5D,QAAiB,SAAS,SAAS;GAAE,UAAU;GAAU,MAAM;GAAG,KAAK;EAAa,CAAC;EACrF,UAAU,CAAC;CACb;CAEA,OACE,oBAAC,YAAD;EACa;EACX,MAAM;EACD;EACL,OAAO;EACP,MAAM;EACC;EACP,MAAM;EACN,QAAQ,CAAC,OAAO,MAAM,UAAU,OAAO,UAAU,OAAO,MAAM;EAC9D,SAAS;EAER,UAAA,QAAQ;CACC,CAAA;AAEhB,CACF;AAEA,WAAW,cAAc"}
+{"version":3,"file":"BackBottom.mjs","names":[],"sources":["../../../src/chat/BackBottom/BackBottom.tsx"],"sourcesContent":["'use client';\n\nimport { ListEnd } from 'lucide-react';\nimport { memo, type MouseEventHandler, useEffect, useRef, useState } from 'react';\n\nimport { ButtonImpl } from '@/Button/Button';\nimport { useScroll } from '@/hooks/useScroll';\n\nimport { styles } from './style';\nimport { type BackBottomProps } from './type';\n\nconst BackBottom = memo<BackBottomProps>(\n  ({ visibilityHeight = 240, target, onClick, style, className, text }) => {\n    const [visible, setVisible] = useState<boolean>(false);\n    const ref = useRef<HTMLButtonElement>(null);\n    const current = (target as any)?.current;\n    const scrollHeight = current?.scrollHeight || 0;\n    const clientHeight = current?.clientHeight || 0;\n    const scroll = useScroll(target);\n\n    useEffect(() => {\n      if (scroll?.top) {\n        setVisible(scroll?.top + clientHeight + visibilityHeight < scrollHeight);\n      }\n    }, [scrollHeight, scroll, visibilityHeight]);\n\n    const scrollToBottom: MouseEventHandler<HTMLElement> = (e) => {\n      (target as any)?.current?.scrollTo({ behavior: 'smooth', left: 0, top: scrollHeight });\n      onClick?.(e);\n    };\n\n    return (\n      <ButtonImpl\n        className={className}\n        icon={ListEnd}\n        ref={ref}\n        shape={'round'}\n        size={'small'}\n        style={style}\n        type={'fill'}\n        xstyle={[styles.root, visible ? styles.visible : styles.hidden]}\n        onClick={scrollToBottom}\n      >\n        {text || 'Back to bottom'}\n      </ButtonImpl>\n    );\n  },\n);\n\nBackBottom.displayName = 'BackBottom';\n\nexport default BackBottom;\n"],"mappings":";;;;;;;;AAWA,MAAM,aAAa,MAChB,EAAE,mBAAmB,KAAK,QAAQ,SAAS,OAAO,WAAW,WAAW;CACvE,MAAM,CAAC,SAAS,cAAc,SAAkB,KAAK;CACrD,MAAM,MAAM,OAA0B,IAAI;CAC1C,MAAM,UAAW,QAAgB;CACjC,MAAM,eAAe,SAAS,gBAAgB;CAC9C,MAAM,eAAe,SAAS,gBAAgB;CAC9C,MAAM,SAAS,UAAU,MAAM;CAE/B,gBAAgB;EACd,IAAI,QAAQ,KACV,WAAW,QAAQ,MAAM,eAAe,mBAAmB,YAAY;CAE3E,GAAG;EAAC;EAAc;EAAQ;CAAgB,CAAC;CAE3C,MAAM,kBAAkD,MAAM;EAC5D,QAAiB,SAAS,SAAS;GAAE,UAAU;GAAU,MAAM;GAAG,KAAK;EAAa,CAAC;EACrF,UAAU,CAAC;CACb;CAEA,OACE,oBAAC,YAAD;EACa;EACX,MAAM;EACD;EACL,OAAO;EACP,MAAM;EACC;EACP,MAAM;EACN,QAAQ,CAAC,OAAO,MAAM,UAAU,OAAO,UAAU,OAAO,MAAM;EAC9D,SAAS;EAER,UAAA,QAAQ;CACC,CAAA;AAEhB,CACF;AAEA,WAAW,cAAc"}

package/es/chat/BackBottom/type.d.mts

@@ -1,11 +1,11 @@
+import { ScrollTarget } from "../../hooks/useScroll.mjs";
 import { CSSProperties, MouseEventHandler } from "react";
-import { Target } from "ahooks/lib/useScroll/index.js";
 //#region src/chat/BackBottom/type.d.ts
 export interface BackBottomProps {
   className?: string;
   onClick?: MouseEventHandler<HTMLElement>;
   style?: CSSProperties;
-  target: Target;
+  target: ScrollTarget;
   text?: string;
   visibilityHeight?: number;
 }