@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
1 lines • 21.2 kB
Source Map (JSON)
{"version":3,"file":"atoms.mjs","names":["useControlledState","getHandleSize"],"sources":["../../../src/base-ui/DraggablePanel/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ChevronLeft } from 'lucide-react';\nimport type { HTMLMotionProps, MotionStyle } from 'motion/react';\nimport { useTransform } from 'motion/react';\nimport {\n type CSSProperties,\n memo,\n type ReactNode,\n useCallback,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport { useMotionComponent } from '@/MotionProvider';\nimport type { DivProps } from '@/types';\n\nimport { DraggablePanelContext, useDraggablePanelContext } from './context';\nimport type { Placement } from './core/axes';\nimport { AXES } from './core/axes';\nimport type { PanelControllerOptions } from './core/controller';\nimport { createPanelController } from './core/controller';\nimport { coarsePointer, handleSize as getHandleSize } from './core/env';\nimport { useIsomorphicLayoutEffect, useStore } from './core/internal';\nimport { timing } from './core/transition';\nimport { handleVariants, rootVariants, SEAM_ARROW, styles, toggleVariants } from './style';\n\nconst PAN_THRESHOLD = 3;\n\nconst ARROW_BOX = (SEAM_ARROW.half + SEAM_ARROW.lead) * 2;\nconst ARROW_C = ARROW_BOX / 2;\n\nconst ARROW_PATH = (() => {\n const { depth: d, half: h, lead } = SEAM_ARROW;\n const c = ARROW_C;\n const r = 0.12;\n return [\n `M${c} ${c - h - lead}`,\n `Q${c} ${c - h} ${c - d * r} ${c - h + h * r}`,\n `L${c - d * (1 - r)} ${c - h * r}`,\n `Q${c - d} ${c} ${c - d * (1 - r)} ${c + h * r}`,\n `L${c - d * r} ${c + h - h * r}`,\n `Q${c} ${c + h} ${c} ${c + h + lead}`,\n ].join(' ');\n})();\n\n// The path bends toward -x; the sign flips it so the seam points the way a click moves the panel.\nconst bendSign = (placement: Placement, expand: boolean) =>\n (placement === 'left' || placement === 'top' ? 1 : -1) * (expand ? 1 : -1);\n\nconst ORIGIN_MAP = {\n bottom: 'center bottom',\n left: 'left center',\n right: 'right center',\n top: 'center top',\n} as const;\n\nconst COLLAPSED_SCALE = 0.97;\n\nconst EDGE_INSET = {\n bottom: 'insetBlockEnd',\n left: 'insetInlineStart',\n right: 'insetInlineEnd',\n top: 'insetBlockStart',\n} as const;\n\nexport interface DraggablePanelRootProps extends Omit<DivProps, 'onDrag'> {\n backgroundColor?: string;\n collapseThreshold?: number;\n defaultExpand?: boolean;\n defaultSize?: number;\n expand?: boolean;\n expandable?: boolean;\n max?: number;\n min?: number;\n mode?: 'fixed' | 'float';\n onExpandChange?: (expand: boolean) => void;\n onSizeChange?: (size: number, delta: number) => void;\n onSizeDragging?: (size: number, delta: number) => void;\n placement?: Placement;\n showBorder?: boolean;\n size?: number;\n}\n\nexport const DraggablePanelRoot = memo<DraggablePanelRootProps>(\n ({\n backgroundColor,\n children,\n className,\n collapseThreshold,\n defaultExpand = true,\n defaultSize,\n expand,\n expandable = true,\n max,\n min = 0,\n mode = 'fixed',\n onExpandChange,\n onSizeChange,\n onSizeDragging,\n placement = 'right',\n showBorder = true,\n size,\n style,\n ...rest\n }) => {\n const axis = AXES[placement];\n const fallbackSize = axis.vertical ? 180 : 280;\n const resolvedDefaultSize = defaultSize ?? fallbackSize;\n\n const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\n onChange: onExpandChange,\n value: expand,\n });\n const [innerSize, setInnerSize] = useState(resolvedDefaultSize);\n const currentSize = size ?? innerSize;\n\n const commitSize = useCallback(\n (next: number, delta: number) => {\n if (size === undefined) setInnerSize(next);\n onSizeChange?.(next, delta);\n },\n [onSizeChange, size],\n );\n\n const options: PanelControllerOptions = {\n collapseThreshold,\n defaultSize: resolvedDefaultSize,\n expand: isExpand,\n max,\n min,\n onExpandChange: setIsExpand,\n onSizeChange: commitSize,\n onSizeDragging,\n placement,\n size: currentSize,\n };\n\n const [controller] = useState(() => createPanelController(options));\n const state = useStore(controller.subscribe, () => controller.state);\n const elementRef = useRef<HTMLElement>(null);\n\n useIsomorphicLayoutEffect(() => {\n controller.sync(options);\n });\n\n useIsomorphicLayoutEffect(() => {\n const node = elementRef.current;\n return node ? controller.attach(node) : undefined;\n }, [controller]);\n\n const toggleExpand = useCallback(() => {\n if (expandable) setIsExpand(!isExpand);\n }, [expandable, isExpand, setIsExpand]);\n\n const context = useMemo(\n () => ({\n axis,\n controller,\n expand: isExpand,\n expandable,\n placement,\n showBorder,\n state,\n toggleExpand,\n }),\n [axis, controller, isExpand, expandable, placement, showBorder, state, toggleExpand],\n );\n\n return (\n <DraggablePanelContext value={context}>\n <aside\n className={cx(rootVariants({ mode, placement }), className)}\n data-expand={isExpand}\n data-expandable={expandable}\n data-resizing={state.dragging}\n ref={elementRef}\n style={\n {\n '--draggable-panel-bg': backgroundColor || '',\n 'flexDirection': axis.vertical ? 'column' : 'row',\n ...style,\n } as CSSProperties\n }\n {...rest}\n >\n {children}\n </aside>\n </DraggablePanelContext>\n );\n },\n);\n\nDraggablePanelRoot.displayName = 'DraggablePanelRoot';\n\nexport interface DraggablePanelContentProps extends Omit<DivProps, 'onDrag'> {}\n\nexport const DraggablePanelContent = memo<DraggablePanelContentProps>(\n ({ children, className, style, ...rest }) => {\n const Motion = useMotionComponent();\n const { axis, controller, expand, placement, state } = useDraggablePanelContext();\n const extent = useTransform(controller.motion.size, (value) => Math.max(0, value));\n // Subscribed, not read: a collapse that changes only the target would otherwise\n // leave the content unclipped and painted outside the zero-width box.\n const target = useStore(controller.subscribe, () => controller.target);\n const clipping = state.dragging || state.folding || target === 0;\n const shrunk = state.collapsing || !expand;\n\n return (\n <Motion.div\n inert={!expand}\n style={\n {\n display: 'flex',\n flexDirection: axis.vertical ? 'column' : 'row',\n flexShrink: 0,\n justifyContent: axis.anchorEnd ? 'flex-end' : 'flex-start',\n overflow: clipping ? 'clip' : 'visible',\n [axis.cross]: '100%',\n [axis.extent]: extent,\n } as MotionStyle\n }\n >\n <Motion.div\n animate={{ scale: shrunk ? COLLAPSED_SCALE : 1 }}\n className={cx(styles.content, className)}\n transition={timing()}\n style={\n {\n transformOrigin: ORIGIN_MAP[placement],\n [axis.cross]: '100%',\n [axis.extent]: controller.motion.content,\n ...style,\n } as MotionStyle\n }\n {...(rest as HTMLMotionProps<'div'>)}\n >\n {children}\n </Motion.div>\n </Motion.div>\n );\n },\n);\n\nDraggablePanelContent.displayName = 'DraggablePanelContent';\n\nexport interface DraggablePanelHandleProps extends Omit<DivProps, 'onDrag'> {\n wideArea?: boolean;\n}\n\nexport const DraggablePanelHandle = memo<DraggablePanelHandleProps>(\n ({ className, style, wideArea = true, ...rest }) => {\n const { axis, controller, expand, showBorder, state } = useDraggablePanelContext();\n const size = useStore(coarsePointer.subscribe, () => getHandleSize(wideArea));\n const target = useStore(controller.subscribe, () => controller.target);\n useEffect(() => () => controller.drag.cancel(), [controller]);\n\n const pressedRef = useRef<{ x: number; y: number } | null>(null);\n const draggingRef = useRef(false);\n const draggedRef = useRef(false);\n const { max, min } = controller.bounds();\n\n if (!expand) return null;\n\n return (\n <div\n aria-orientation={axis.ariaOrientation}\n aria-valuemax={Number.isFinite(max) ? max : undefined}\n aria-valuemin={min}\n aria-valuenow={target}\n aria-valuetext={`${target} pixels`}\n className={cx(handleVariants({ edge: axis.edge }), className)}\n data-border={showBorder}\n data-resizing={state.dragging || undefined}\n role=\"separator\"\n tabIndex={0}\n style={\n {\n '--draggable-panel-handle-size': `${size}px`,\n [EDGE_INSET[axis.edge]]: -size / 2,\n ...style,\n } as CSSProperties\n }\n onKeyDown={(event) => controller.resizeByKey(event)}\n onDoubleClick={() => {\n if (!draggedRef.current) controller.reset();\n }}\n // Capture can be stolen mid-drag (another setPointerCapture, an OOPIF under the\n // cursor) and the pointerup then never reaches us; the pointer is wherever the\n // user last dragged it, so commit rather than snap back.\n onLostPointerCapture={() => {\n if (draggingRef.current) controller.drag.end();\n pressedRef.current = null;\n draggingRef.current = false;\n }}\n onPointerCancel={() => {\n controller.drag.cancel();\n pressedRef.current = null;\n draggingRef.current = false;\n }}\n onPointerDown={(event) => {\n draggedRef.current = false;\n pressedRef.current = { x: event.clientX, y: event.clientY };\n // A synthetic pointerdown carries no active pointer, and capturing throws.\n try {\n event.currentTarget.setPointerCapture(event.pointerId);\n } catch {\n /* empty */\n }\n }}\n onPointerMove={(event) => {\n if (!pressedRef.current) return;\n const offset = {\n x: event.clientX - pressedRef.current.x,\n y: event.clientY - pressedRef.current.y,\n };\n if (!draggingRef.current) {\n if (Math.hypot(offset.x, offset.y) < PAN_THRESHOLD) return;\n draggingRef.current = true;\n draggedRef.current = true;\n controller.drag.start();\n }\n controller.drag.move(offset);\n }}\n onPointerUp={() => {\n if (draggingRef.current) controller.drag.end();\n pressedRef.current = null;\n draggingRef.current = false;\n }}\n {...rest}\n />\n );\n },\n);\n\nDraggablePanelHandle.displayName = 'DraggablePanelHandle';\n\nexport interface DraggablePanelToggleProps extends Omit<DivProps, 'onDrag'> {\n showHandleWhenCollapsed?: boolean;\n}\n\nexport const DraggablePanelToggle = memo<DraggablePanelToggleProps>(\n ({ className, showHandleWhenCollapsed, style, ...rest }) => {\n const { axis, expand, expandable, placement, showBorder, toggleExpand } =\n useDraggablePanelContext();\n const gradientId = `seam-arrow-${useId().replaceAll(/[^\\w-]/g, '')}`;\n\n if (!expandable) return null;\n\n const bend = bendSign(placement, expand);\n const edgeOpacity = expand && showBorder ? 1 : 0;\n\n return (\n <div\n className={cx(toggleVariants({ placement }), className)}\n style={{ opacity: expand ? undefined : showHandleWhenCollapsed ? 1 : 0, ...style }}\n {...rest}\n >\n <button\n aria-label={expand ? 'Collapse panel' : 'Expand panel'}\n type=\"button\"\n onClick={toggleExpand}\n >\n <svg\n fill=\"none\"\n height={ARROW_BOX}\n style={{ '--seam-bend': bend } as CSSProperties}\n viewBox={`0 0 ${ARROW_BOX} ${ARROW_BOX}`}\n width={ARROW_BOX}\n >\n <defs>\n <linearGradient\n gradientUnits=\"userSpaceOnUse\"\n id={gradientId}\n x1={ARROW_C}\n x2={ARROW_C}\n y1={0}\n y2={ARROW_BOX}\n >\n <stop data-end=\"\" offset={0} stopOpacity={edgeOpacity} />\n <stop data-tip=\"\" offset={0.3} />\n <stop data-tip=\"\" offset={0.7} />\n <stop data-end=\"\" offset={1} stopOpacity={edgeOpacity} />\n </linearGradient>\n </defs>\n <g transform={axis.vertical ? `rotate(90 ${ARROW_C} ${ARROW_C})` : undefined}>\n <path\n d={ARROW_PATH}\n stroke={`url(#${gradientId})`}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={SEAM_ARROW.stroke}\n />\n </g>\n </svg>\n </button>\n </div>\n );\n },\n);\n\nDraggablePanelToggle.displayName = 'DraggablePanelToggle';\n\nexport type DraggablePanelContainerProps = DivProps;\n\nexport const DraggablePanelContainer = memo<DraggablePanelContainerProps>(\n ({ className, ...rest }) => <div className={cx(styles.container, className)} {...rest} />,\n);\n\nDraggablePanelContainer.displayName = 'DraggablePanelContainer';\n\nexport type DraggablePanelBodyProps = DivProps;\n\nexport const DraggablePanelBody = memo<DraggablePanelBodyProps>(({ className, style, ...rest }) => (\n <div className={cx(styles.body, className)} style={{ flex: 1, ...style }} {...rest} />\n));\n\nDraggablePanelBody.displayName = 'DraggablePanelBody';\n\nexport type DraggablePanelFooterProps = DivProps;\n\nexport const DraggablePanelFooter = memo<DraggablePanelFooterProps>(({ className, ...rest }) => (\n <div className={cx(styles.footer, className)} {...rest} />\n));\n\nDraggablePanelFooter.displayName = 'DraggablePanelFooter';\n\nexport interface DraggablePanelHeaderProps extends Omit<DivProps, 'children' | 'title'> {\n extra?: ReactNode;\n onCollapse?: () => void;\n title?: ReactNode;\n}\n\nexport const DraggablePanelHeader = memo<DraggablePanelHeaderProps>(\n ({ className, extra, onCollapse, title, ...rest }) => {\n const { toggleExpand } = useDraggablePanelContext();\n\n return (\n <div className={cx(styles.header, className)} {...rest}>\n <ActionIcon icon={ChevronLeft} size={'small'} onClick={onCollapse ?? toggleExpand} />\n {title}\n {extra}\n </div>\n );\n },\n);\n\nDraggablePanelHeader.displayName = 'DraggablePanelHeader';\n"],"mappings":";;;;;;;;;;;;;;;;;AAiCA,MAAM,gBAAgB;AAEtB,MAAM,aAAa,WAAW,OAAO,WAAW,QAAQ;AACxD,MAAM,UAAU,YAAY;AAE5B,MAAM,oBAAoB;CACxB,MAAM,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS;CACpC,MAAM,IAAI;CACV,MAAM,IAAI;CACV,OAAO;EACL,IAAI,EAAE,GAAG,IAAI,IAAI;EACjB,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,IAAI,EAAE,GAAG,IAAI,IAAI,IAAI;EAC3C,IAAI,IAAI,IAAK,IAAO,GAAG,IAAI,IAAI;EAC/B,IAAI,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,IAAK,IAAO,GAAG,IAAI,IAAI;EAC7C,IAAI,IAAI,IAAI,EAAE,GAAG,IAAI,IAAI,IAAI;EAC7B,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,IAAI;CACjC,CAAC,CAAC,KAAK,GAAG;AACZ,EAAA,CAAG;AAGH,MAAM,YAAY,WAAsB,YACrC,cAAc,UAAU,cAAc,QAAQ,IAAI,OAAO,SAAS,IAAI;AAEzE,MAAM,aAAa;CACjB,QAAQ;CACR,MAAM;CACN,OAAO;CACP,KAAK;AACP;AAEA,MAAM,kBAAkB;AAExB,MAAM,aAAa;CACjB,QAAQ;CACR,MAAM;CACN,OAAO;CACP,KAAK;AACP;AAoBA,MAAa,qBAAqB,MAC/B,EACC,iBACA,UACA,WACA,mBACA,gBAAgB,MAChB,aACA,QACA,aAAa,MACb,KACA,MAAM,GACN,OAAO,SACP,gBACA,cACA,gBACA,YAAY,SACZ,aAAa,MACb,MACA,OACA,GAAG,WACC;CACJ,MAAM,OAAO,KAAK;CAClB,MAAM,eAAe,KAAK,WAAW,MAAM;CAC3C,MAAM,sBAAsB,eAAe;CAE3C,MAAM,CAAC,UAAU,eAAeA,cAAmB,eAAe;EAChE,UAAU;EACV,OAAO;CACT,CAAC;CACD,MAAM,CAAC,WAAW,gBAAgB,SAAS,mBAAmB;CAC9D,MAAM,cAAc,QAAQ;CAU5B,MAAM,UAAkC;EACtC;EACA,aAAa;EACb,QAAQ;EACR;EACA;EACA,gBAAgB;EAChB,cAfiB,aAChB,MAAc,UAAkB;GAC/B,IAAI,SAAS,KAAA,GAAW,aAAa,IAAI;GACzC,eAAe,MAAM,KAAK;EAC5B,GACA,CAAC,cAAc,IAAI,CAUI;EACvB;EACA;EACA,MAAM;CACR;CAEA,MAAM,CAAC,cAAc,eAAe,sBAAsB,OAAO,CAAC;CAClE,MAAM,QAAQ,SAAS,WAAW,iBAAiB,WAAW,KAAK;CACnE,MAAM,aAAa,OAAoB,IAAI;CAE3C,gCAAgC;EAC9B,WAAW,KAAK,OAAO;CACzB,CAAC;CAED,gCAAgC;EAC9B,MAAM,OAAO,WAAW;EACxB,OAAO,OAAO,WAAW,OAAO,IAAI,IAAI,KAAA;CAC1C,GAAG,CAAC,UAAU,CAAC;CAEf,MAAM,eAAe,kBAAkB;EACrC,IAAI,YAAY,YAAY,CAAC,QAAQ;CACvC,GAAG;EAAC;EAAY;EAAU;CAAW,CAAC;CAEtC,MAAM,UAAU,eACP;EACL;EACA;EACA,QAAQ;EACR;EACA;EACA;EACA;EACA;CACF,IACA;EAAC;EAAM;EAAY;EAAU;EAAY;EAAW;EAAY;EAAO;CAAY,CACrF;CAEA,OACE,oBAAC,uBAAD;EAAuB,OAAO;EAC5B,UAAA,oBAAC,SAAD;GACE,WAAW,GAAG,aAAa;IAAE;IAAM;GAAU,CAAC,GAAG,SAAS;GAC1D,eAAa;GACb,mBAAiB;GACjB,iBAAe,MAAM;GACrB,KAAK;GACL,OACE;IACE,wBAAwB,mBAAmB;IAC3C,iBAAiB,KAAK,WAAW,WAAW;IAC5C,GAAG;GACL;GAEF,GAAI;GAEH;EACI,CAAA;CACc,CAAA;AAE3B,CACF;AAEA,mBAAmB,cAAc;AAIjC,MAAa,wBAAwB,MAClC,EAAE,UAAU,WAAW,OAAO,GAAG,WAAW;CAC3C,MAAM,SAAS,mBAAmB;CAClC,MAAM,EAAE,MAAM,YAAY,QAAQ,WAAW,UAAU,yBAAyB;CAChF,MAAM,SAAS,aAAa,WAAW,OAAO,OAAO,UAAU,KAAK,IAAI,GAAG,KAAK,CAAC;CAGjF,MAAM,SAAS,SAAS,WAAW,iBAAiB,WAAW,MAAM;CACrE,MAAM,WAAW,MAAM,YAAY,MAAM,WAAW,WAAW;CAC/D,MAAM,SAAS,MAAM,cAAc,CAAC;CAEpC,OACE,oBAAC,OAAO,KAAR;EACE,OAAO,CAAC;EACR,OACE;GACE,SAAS;GACT,eAAe,KAAK,WAAW,WAAW;GAC1C,YAAY;GACZ,gBAAgB,KAAK,YAAY,aAAa;GAC9C,UAAU,WAAW,SAAS;IAC7B,KAAK,QAAQ;IACb,KAAK,SAAS;EACjB;EAGF,UAAA,oBAAC,OAAO,KAAR;GACE,SAAS,EAAE,OAAO,SAAS,kBAAkB,EAAE;GAC/C,WAAW,GAAG,OAAO,SAAS,SAAS;GACvC,YAAY,OAAO;GACnB,OACE;IACE,iBAAiB,WAAW;KAC3B,KAAK,QAAQ;KACb,KAAK,SAAS,WAAW,OAAO;IACjC,GAAG;GACL;GAEF,GAAK;GAEJ;EACS,CAAA;CACF,CAAA;AAEhB,CACF;AAEA,sBAAsB,cAAc;AAMpC,MAAa,uBAAuB,MACjC,EAAE,WAAW,OAAO,WAAW,MAAM,GAAG,WAAW;CAClD,MAAM,EAAE,MAAM,YAAY,QAAQ,YAAY,UAAU,yBAAyB;CACjF,MAAM,OAAO,SAAS,cAAc,iBAAiBC,WAAc,QAAQ,CAAC;CAC5E,MAAM,SAAS,SAAS,WAAW,iBAAiB,WAAW,MAAM;CACrE,sBAAsB,WAAW,KAAK,OAAO,GAAG,CAAC,UAAU,CAAC;CAE5D,MAAM,aAAa,OAAwC,IAAI;CAC/D,MAAM,cAAc,OAAO,KAAK;CAChC,MAAM,aAAa,OAAO,KAAK;CAC/B,MAAM,EAAE,KAAK,QAAQ,WAAW,OAAO;CAEvC,IAAI,CAAC,QAAQ,OAAO;CAEpB,OACE,oBAAC,OAAD;EACE,oBAAkB,KAAK;EACvB,iBAAe,OAAO,SAAS,GAAG,IAAI,MAAM,KAAA;EAC5C,iBAAe;EACf,iBAAe;EACf,kBAAgB,GAAG,OAAO;EAC1B,WAAW,GAAG,eAAe,EAAE,MAAM,KAAK,KAAK,CAAC,GAAG,SAAS;EAC5D,eAAa;EACb,iBAAe,MAAM,YAAY,KAAA;EACjC,MAAK;EACL,UAAU;EACV,OACE;GACE,iCAAiC,GAAG,KAAK;IACxC,WAAW,KAAK,QAAQ,CAAC,OAAO;GACjC,GAAG;EACL;EAEF,YAAY,UAAU,WAAW,YAAY,KAAK;EAClD,qBAAqB;GACnB,IAAI,CAAC,WAAW,SAAS,WAAW,MAAM;EAC5C;EAIA,4BAA4B;GAC1B,IAAI,YAAY,SAAS,WAAW,KAAK,IAAI;GAC7C,WAAW,UAAU;GACrB,YAAY,UAAU;EACxB;EACA,uBAAuB;GACrB,WAAW,KAAK,OAAO;GACvB,WAAW,UAAU;GACrB,YAAY,UAAU;EACxB;EACA,gBAAgB,UAAU;GACxB,WAAW,UAAU;GACrB,WAAW,UAAU;IAAE,GAAG,MAAM;IAAS,GAAG,MAAM;GAAQ;GAE1D,IAAI;IACF,MAAM,cAAc,kBAAkB,MAAM,SAAS;GACvD,QAAQ,CAER;EACF;EACA,gBAAgB,UAAU;GACxB,IAAI,CAAC,WAAW,SAAS;GACzB,MAAM,SAAS;IACb,GAAG,MAAM,UAAU,WAAW,QAAQ;IACtC,GAAG,MAAM,UAAU,WAAW,QAAQ;GACxC;GACA,IAAI,CAAC,YAAY,SAAS;IACxB,IAAI,KAAK,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,eAAe;IACpD,YAAY,UAAU;IACtB,WAAW,UAAU;IACrB,WAAW,KAAK,MAAM;GACxB;GACA,WAAW,KAAK,KAAK,MAAM;EAC7B;EACA,mBAAmB;GACjB,IAAI,YAAY,SAAS,WAAW,KAAK,IAAI;GAC7C,WAAW,UAAU;GACrB,YAAY,UAAU;EACxB;EACA,GAAI;CACL,CAAA;AAEL,CACF;AAEA,qBAAqB,cAAc;AAMnC,MAAa,uBAAuB,MACjC,EAAE,WAAW,yBAAyB,OAAO,GAAG,WAAW;CAC1D,MAAM,EAAE,MAAM,QAAQ,YAAY,WAAW,YAAY,iBACvD,yBAAyB;CAC3B,MAAM,aAAa,cAAc,MAAM,CAAC,CAAC,WAAW,WAAW,EAAE;CAEjE,IAAI,CAAC,YAAY,OAAO;CAExB,MAAM,OAAO,SAAS,WAAW,MAAM;CACvC,MAAM,cAAc,UAAU,aAAa,IAAI;CAE/C,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,eAAe,EAAE,UAAU,CAAC,GAAG,SAAS;EACtD,OAAO;GAAE,SAAS,SAAS,KAAA,IAAY,0BAA0B,IAAI;GAAG,GAAG;EAAM;EACjF,GAAI;EAEJ,UAAA,oBAAC,UAAD;GACE,cAAY,SAAS,mBAAmB;GACxC,MAAK;GACL,SAAS;GAET,UAAA,qBAAC,OAAD;IACE,MAAK;IACL,QAAQ;IACR,OAAO,EAAE,eAAe,KAAK;IAC7B,SAAS,OAAO,UAAU,GAAG;IAC7B,OAAO;IALT,UAAA,CAOE,oBAAC,QAAD,EAAA,UACE,qBAAC,kBAAD;KACE,eAAc;KACd,IAAI;KACJ,IAAI;KACJ,IAAI;KACJ,IAAI;KACJ,IAAI;KANN,UAAA;MAQE,oBAAC,QAAD;OAAM,YAAS;OAAG,QAAQ;OAAG,aAAa;MAAc,CAAA;MACxD,oBAAC,QAAD;OAAM,YAAS;OAAG,QAAQ;MAAM,CAAA;MAChC,oBAAC,QAAD;OAAM,YAAS;OAAG,QAAQ;MAAM,CAAA;MAChC,oBAAC,QAAD;OAAM,YAAS;OAAG,QAAQ;OAAG,aAAa;MAAc,CAAA;KAC1C;IACZ,CAAA,EAAA,CAAA,GACN,oBAAC,KAAD;KAAG,WAAW,KAAK,WAAW,aAAa,QAAQ,GAAG,QAAQ,KAAK,KAAA;KACjE,UAAA,oBAAC,QAAD;MACE,GAAG;MACH,QAAQ,QAAQ,WAAW;MAC3B,eAAc;MACd,gBAAe;MACf,aAAa,WAAW;KACzB,CAAA;IACA,CAAA,CACA;;EACC,CAAA;CACL,CAAA;AAET,CACF;AAEA,qBAAqB,cAAc;AAInC,MAAa,0BAA0B,MACpC,EAAE,WAAW,GAAG,WAAW,oBAAC,OAAD;CAAK,WAAW,GAAG,OAAO,WAAW,SAAS;CAAG,GAAI;AAAO,CAAA,CAC1F;AAEA,wBAAwB,cAAc;AAItC,MAAa,qBAAqB,MAA+B,EAAE,WAAW,OAAO,GAAG,WACtF,oBAAC,OAAD;CAAK,WAAW,GAAG,OAAO,MAAM,SAAS;CAAG,OAAO;EAAE,MAAM;EAAG,GAAG;CAAM;CAAG,GAAI;AAAO,CAAA,CACtF;AAED,mBAAmB,cAAc;AAIjC,MAAa,uBAAuB,MAAiC,EAAE,WAAW,GAAG,WACnF,oBAAC,OAAD;CAAK,WAAW,GAAG,OAAO,QAAQ,SAAS;CAAG,GAAI;AAAO,CAAA,CAC1D;AAED,qBAAqB,cAAc;AAQnC,MAAa,uBAAuB,MACjC,EAAE,WAAW,OAAO,YAAY,OAAO,GAAG,WAAW;CACpD,MAAM,EAAE,iBAAiB,yBAAyB;CAElD,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,QAAQ,SAAS;EAAG,GAAI;EAAlD,UAAA;GACE,oBAAC,YAAD;IAAY,MAAM;IAAa,MAAM;IAAS,SAAS,cAAc;GAAe,CAAA;GACnF;GACA;EACE;;AAET,CACF;AAEA,qBAAqB,cAAc"}