@lobehub/ui 5.64.2 → 6.0.0-beta.10

package/es/Tree/Tree.d.mts

@@ -0,0 +1,6 @@
+import { TreeProps } from "./type.mjs";
+//#region src/Tree/Tree.d.ts
+declare const Tree: import("react").NamedExoticComponent<TreeProps>;
+//#endregion
+export { Tree as default };
+//# sourceMappingURL=Tree.d.mts.map

package/es/Tree/Tree.mjs

@@ -0,0 +1,175 @@
+"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";
+import { TreeContext } from "./context.mjs";
+import { conductCheck, flattenVisible, getAllKeys, getAncestorKeys, getSubtreeKeys } from "./utils.mjs";
+import TreeNode from "./TreeNode.mjs";
+import { memo, useId, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+//#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 }) => {
+	const generatedId = useId();
+	const scopeId = scopeIdProp ?? generatedId;
+	const [expandedKeys, setExpandedKeys] = useControlledState(defaultExpandAll ? getAllKeys(treeData) : defaultExpandedKeys, { value: expandedKeysProp });
+	const [selectedKeys, setSelectedKeys] = useControlledState(defaultSelectedKeys, { value: selectedKeysProp });
+	const [checkedKeys, setCheckedKeys] = useControlledState(defaultCheckedKeys, { value: checkedKeysProp });
+	const expanded = useMemo(() => new Set(expandedKeys), [expandedKeys]);
+	const selected = useMemo(() => new Set(selectedKeys), [selectedKeys]);
+	const flat = useMemo(() => flattenVisible(treeData, expanded), [treeData, expanded]);
+	const { checked, halfChecked } = useMemo(() => checkStrictly ? {
+		checked: new Set(checkedKeys),
+		halfChecked: /* @__PURE__ */ new Set()
+	} : conductCheck(treeData, checkedKeys), [
+		checkStrictly,
+		treeData,
+		checkedKeys
+	]);
+	const [activeKeyState, setActiveKeyState] = useState(null);
+	const setActiveKey = setActiveKeyState;
+	const activeKey = activeKeyState && flat.some((row) => row.node.key === activeKeyState) ? activeKeyState : selectedKeys.find((key) => flat.some((row) => row.node.key === key)) ?? flat[0]?.node.key ?? null;
+	const anchorRef = useRef(null);
+	const rowOf = (key) => document.querySelector(`[data-focus-scope="${scopeId}"] [data-id="${key}"]`);
+	const focusRow = (key) => {
+		setActiveKey(key);
+		const row = rowOf(key);
+		if (row) focusScopeItem(scopeId, row);
+	};
+	const isDisabled = (node) => disabled || !!node.disabled;
+	const toggleExpand = (node) => {
+		const willExpand = !expanded.has(node.key);
+		const next = willExpand ? [...expandedKeys, node.key] : expandedKeys.filter((key) => key !== node.key);
+		setExpandedKeys(next);
+		onExpand?.(next, {
+			expanded: willExpand,
+			node
+		});
+	};
+	const toggleSelect = (node, event) => {
+		if (isDisabled(node) || node.selectable === false) return;
+		let next;
+		if (multiple && event?.shiftKey && anchorRef.current) {
+			const a = flat.findIndex((row) => row.node.key === anchorRef.current);
+			const b = flat.findIndex((row) => row.node.key === node.key);
+			next = flat.slice(Math.min(a, b), Math.max(a, b) + 1).filter((row) => !isDisabled(row.node) && row.node.selectable !== false).map((row) => row.node.key);
+		} else if (multiple && (event?.metaKey || event?.ctrlKey)) {
+			next = selected.has(node.key) ? selectedKeys.filter((key) => key !== node.key) : [...selectedKeys, node.key];
+			anchorRef.current = node.key;
+		} else {
+			next = [node.key];
+			anchorRef.current = node.key;
+		}
+		setSelectedKeys(next);
+		setActiveKey(node.key);
+		onSelect?.(next, {
+			node,
+			selected: next.includes(node.key)
+		});
+	};
+	const toggleCheck = (node) => {
+		if (isDisabled(node) || node.checkable === false) return;
+		const willCheck = !checked.has(node.key);
+		const keys = checkStrictly ? [node.key] : getSubtreeKeys(node);
+		const base = new Set(checkStrictly ? checkedKeys : checked);
+		keys.forEach((key) => willCheck ? base.add(key) : base.delete(key));
+		if (!willCheck && !checkStrictly) getAncestorKeys(treeData, node.key).forEach((key) => base.delete(key));
+		const next = checkStrictly ? [...base] : [...conductCheck(treeData, base).checked];
+		setCheckedKeys(next);
+		setActiveKey(node.key);
+		onCheck?.(next, {
+			checked: willCheck,
+			node
+		});
+	};
+	const currentRow = () => {
+		const key = (document.activeElement?.closest("[role=\"treeitem\"]"))?.dataset.id ?? activeKey;
+		return flat.find((row) => row.node.key === key);
+	};
+	const withRow = (fn) => (event) => {
+		const row = currentRow();
+		if (row) fn(row, event);
+	};
+	useScopeArrowNav({
+		extra: {
+			" ": withRow((row, event) => {
+				if (checkable && row.node.checkable !== false) toggleCheck(row.node);
+				else toggleSelect(row.node, event);
+			}),
+			"*": withRow((row) => {
+				const siblings = flat.filter((r) => r.parentKey === row.parentKey && r.hasChildren && !expanded.has(r.node.key));
+				if (siblings.length === 0) return;
+				const next = [...expandedKeys, ...siblings.map((r) => r.node.key)];
+				setExpandedKeys(next);
+				onExpand?.(next, {
+					expanded: true,
+					node: row.node
+				});
+			}),
+			"ArrowLeft": withRow((row) => {
+				if (row.hasChildren && expanded.has(row.node.key)) toggleExpand(row.node);
+				else if (row.parentKey) focusRow(row.parentKey);
+			}),
+			"ArrowRight": withRow((row) => {
+				if (!row.hasChildren) return;
+				if (expanded.has(row.node.key)) focusRow(flat[row.index + 1].node.key);
+				else toggleExpand(row.node);
+			}),
+			"Enter": withRow((row, event) => toggleSelect(row.node, event))
+		},
+		itemSelector: "[role=\"treeitem\"]",
+		onItemFocus: (el) => el.dataset.id && setActiveKey(el.dataset.id),
+		scopeId,
+		vimKeys
+	});
+	return /* @__PURE__ */ jsx(TreeContext, {
+		value: {
+			activeKey,
+			blockNode,
+			checkable,
+			checked,
+			classNames,
+			disabled,
+			expanded,
+			halfChecked,
+			indent,
+			onRightClick: (event, node) => onRightClick?.({
+				event,
+				node
+			}),
+			selected,
+			setActiveKey,
+			showIcon,
+			showLine,
+			size,
+			styles: customStyles,
+			switcherIcon,
+			titleRender,
+			toggleCheck,
+			toggleExpand,
+			toggleSelect
+		},
+		children: /* @__PURE__ */ jsx(FocusScope, {
+			id: scopeId,
+			role: "tree",
+			...styleProps(styles.root, clsx$1(classNames.root, className), {
+				...customStyles.root,
+				...style
+			}),
+			children: treeData.map((node, i) => /* @__PURE__ */ jsx(TreeNode, {
+				depth: 0,
+				isLast: i === treeData.length - 1,
+				node,
+				trail: []
+			}, node.key))
+		})
+	});
+});
+Tree.displayName = "Tree";
+//#endregion
+export { Tree as default };
+
+//# sourceMappingURL=Tree.mjs.map

package/es/Tree/Tree.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tree.mjs","names":["clsx"],"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":"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"}

package/es/Tree/TreeNode.mjs

@@ -0,0 +1,136 @@
+"use client";
+import { styleProps } from "../styles/stylex/props.mjs";
+import { focusRing } from "../styles/stylex/focusRing.mjs";
+import Icon from "../Icon/Icon.mjs";
+import Checkbox_default from "../Checkbox/Checkbox.mjs";
+import { controlHeight } from "../internal/controlSize.mjs";
+import { styles } from "./style.mjs";
+import { useTreeContext } from "./context.mjs";
+import { hasChildren } from "./utils.mjs";
+import { memo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+import * as stylex from "@stylexjs/stylex";
+import { ChevronRight, File, Folder } from "lucide-react";
+import { Collapsible } from "@base-ui/react/collapsible";
+//#region src/Tree/TreeNode.tsx
+const ARC = 6;
+const SWITCHER_CENTER = 11.5;
+const guidePath = (depth, isLast, trail, indent, height) => {
+	const cx = (i) => i * indent + SWITCHER_CENTER;
+	let d = "";
+	trail.forEach((more, i) => {
+		if (more && i > 0) d += `M${cx(i)} 0V${height}`;
+	});
+	const x = cx(depth - 1);
+	const y = height / 2;
+	const elbow = `M${x} ${y - ARC}A${ARC} ${ARC} 0 0 0 ${x + ARC} ${y}H${x + indent - 2}`;
+	d += isLast ? `M${x} 0V${y - ARC}${elbow.slice(elbow.indexOf("A"))}` : `M${x} 0V${height}${elbow}`;
+	return d;
+};
+const TreeNode = memo(({ node, depth, isLast, trail }) => {
+	const ctx = useTreeContext();
+	const expandable = hasChildren(node);
+	const expanded = expandable && ctx.expanded.has(node.key);
+	const disabled = ctx.disabled || !!node.disabled;
+	const selected = ctx.selected.has(node.key);
+	const checkable = ctx.checkable && node.checkable !== false;
+	const checkState = ctx.checked.has(node.key) ? "checked" : ctx.halfChecked.has(node.key) ? "mixed" : "unchecked";
+	const rowHeight = typeof ctx.styles.node?.height === "number" ? ctx.styles.node.height : controlHeight[ctx.size];
+	const switcherIcon = typeof ctx.switcherIcon === "function" ? ctx.switcherIcon({
+		expanded,
+		node
+	}) : ctx.switcherIcon ?? /* @__PURE__ */ jsx(Icon, {
+		icon: ChevronRight,
+		size: 14
+	});
+	const rowStyle = {
+		height: rowHeight,
+		paddingInlineStart: depth * ctx.indent,
+		...ctx.styles.node
+	};
+	const select = (event) => ctx.toggleSelect(node, event);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		"data-scope-item": true,
+		"aria-disabled": disabled || void 0,
+		"aria-expanded": expandable ? expanded : void 0,
+		"aria-level": depth + 1,
+		"aria-selected": selected,
+		"data-id": node.key,
+		role: "treeitem",
+		tabIndex: ctx.activeKey === node.key ? 0 : -1,
+		"aria-checked": checkable ? checkState === "mixed" ? "mixed" : checkState === "checked" : void 0,
+		...styleProps([
+			styles.node,
+			focusRing.info,
+			ctx.blockNode && [styles.nodeBlock, disabled ? selected && styles.nodeDisabledSelected : selected ? styles.nodeSelected : styles.nodeHover],
+			disabled && styles.nodeDisabled
+		], ctx.classNames.node, rowStyle),
+		onClick: ctx.blockNode ? select : void 0,
+		onContextMenu: (event) => ctx.onRightClick(event, node),
+		onFocus: () => ctx.setActiveKey(node.key),
+		children: [
+			ctx.showLine && depth > 0 && /* @__PURE__ */ jsx("svg", {
+				"aria-hidden": true,
+				height: rowHeight,
+				width: depth * ctx.indent,
+				...styleProps(styles.guide, ctx.classNames.guide, ctx.styles.guide),
+				children: /* @__PURE__ */ jsx("path", {
+					...stylex.props(styles.guidePath),
+					d: guidePath(depth, isLast, trail, ctx.indent, rowHeight)
+				})
+			}),
+			/* @__PURE__ */ jsx("button", {
+				"aria-hidden": true,
+				tabIndex: -1,
+				type: "button",
+				...styleProps([styles.switcher, !expandable && styles.switcherLeaf], clsx$1("lobe-tree-switcher", ctx.classNames.switcher), ctx.styles.switcher),
+				onClick: (event) => {
+					event.stopPropagation();
+					ctx.toggleExpand(node);
+				},
+				children: switcherIcon
+			}),
+			checkable && /* @__PURE__ */ jsx(Checkbox_default, {
+				checked: checkState === "checked",
+				className: stylex.props(styles.checkbox).className,
+				disabled,
+				indeterminate: checkState === "mixed",
+				onChange: () => ctx.toggleCheck(node),
+				onClick: (event) => event.stopPropagation()
+			}),
+			ctx.showIcon && /* @__PURE__ */ jsx("span", {
+				...stylex.props(styles.icon),
+				children: node.icon ?? /* @__PURE__ */ jsx(Icon, {
+					icon: expandable ? Folder : File,
+					size: 16
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				...styleProps([styles.title, ctx.blockNode ? styles.titleBlock : [
+					styles.titleInline,
+					selected && styles.titleInlineSelected,
+					disabled && styles.titleInlineDisabled
+				]], ctx.classNames.title, ctx.styles.title),
+				onClick: ctx.blockNode ? void 0 : select,
+				children: ctx.titleRender ? ctx.titleRender(node) : node.title
+			})
+		]
+	}), expandable && /* @__PURE__ */ jsx(Collapsible.Root, {
+		open: expanded,
+		children: /* @__PURE__ */ jsx(Collapsible.Panel, {
+			className: stylex.props(styles.panel).className,
+			children: node.children.map((child, i) => /* @__PURE__ */ jsx(TreeNode, {
+				depth: depth + 1,
+				isLast: i === node.children.length - 1,
+				node: child,
+				trail: [...trail, !isLast]
+			}, child.key))
+		})
+	})] });
+});
+TreeNode.displayName = "TreeNode";
+//#endregion
+export { TreeNode as default };
+
+//# sourceMappingURL=TreeNode.mjs.map

package/es/Tree/TreeNode.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeNode.mjs","names":["isExpandable","clsx","Checkbox"],"sources":["../../src/Tree/TreeNode.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport { Collapsible } from '@base-ui/react/collapsible';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { ChevronRight, File, Folder } from 'lucide-react';\nimport { type CSSProperties, memo, type MouseEvent } from 'react';\n\nimport { Checkbox } from '@/Checkbox';\nimport Icon from '@/Icon';\nimport { controlHeight } from '@/internal/controlSize';\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { useTreeContext } from './context';\nimport { styles } from './style';\nimport type { TreeDataNode } from './type';\nimport { hasChildren as isExpandable } from './utils';\n\ninterface TreeNodeProps {\n  depth: number;\n  isLast: boolean;\n  node: TreeDataNode;\n  trail: boolean[];\n}\n\nconst ARC = 6;\nconst SWITCHER_CENTER = 11.5;\n\nconst guidePath = (\n  depth: number,\n  isLast: boolean,\n  trail: boolean[],\n  indent: number,\n  height: number,\n) => {\n  const cx = (i: number) => i * indent + SWITCHER_CENTER;\n  let d = '';\n  trail.forEach((more, i) => {\n    if (more && i > 0) d += `M${cx(i)} 0V${height}`;\n  });\n  const x = cx(depth - 1);\n  const y = height / 2;\n  const elbow = `M${x} ${y - ARC}A${ARC} ${ARC} 0 0 0 ${x + ARC} ${y}H${x + indent - 2}`;\n  d += isLast\n    ? `M${x} 0V${y - ARC}${elbow.slice(elbow.indexOf('A'))}`\n    : `M${x} 0V${height}${elbow}`;\n  return d;\n};\n\nconst TreeNode = memo<TreeNodeProps>(({ node, depth, isLast, trail }) => {\n  const ctx = useTreeContext();\n  const expandable = isExpandable(node);\n  const expanded = expandable && ctx.expanded.has(node.key);\n  const disabled = ctx.disabled || !!node.disabled;\n  const selected = ctx.selected.has(node.key);\n  const checkable = ctx.checkable && node.checkable !== false;\n  const checkState = ctx.checked.has(node.key)\n    ? 'checked'\n    : ctx.halfChecked.has(node.key)\n      ? 'mixed'\n      : 'unchecked';\n  const rowHeight =\n    typeof ctx.styles.node?.height === 'number' ? ctx.styles.node.height : controlHeight[ctx.size];\n\n  const switcherIcon =\n    typeof ctx.switcherIcon === 'function'\n      ? ctx.switcherIcon({ expanded, node })\n      : (ctx.switcherIcon ?? <Icon icon={ChevronRight} size={14} />);\n\n  const rowStyle: CSSProperties = {\n    height: rowHeight,\n    paddingInlineStart: depth * ctx.indent,\n    ...ctx.styles.node,\n  };\n\n  const select = (event: MouseEvent) => ctx.toggleSelect(node, event);\n\n  return (\n    <>\n      <div\n        data-scope-item\n        aria-disabled={disabled || undefined}\n        aria-expanded={expandable ? expanded : undefined}\n        aria-level={depth + 1}\n        aria-selected={selected}\n        data-id={node.key}\n        role=\"treeitem\"\n        tabIndex={ctx.activeKey === node.key ? 0 : -1}\n        aria-checked={\n          checkable ? (checkState === 'mixed' ? 'mixed' : checkState === 'checked') : undefined\n        }\n        {...styleProps(\n          [\n            styles.node,\n            focusRing.info,\n            ctx.blockNode && [\n              styles.nodeBlock,\n              disabled\n                ? selected && styles.nodeDisabledSelected\n                : selected\n                  ? styles.nodeSelected\n                  : styles.nodeHover,\n            ],\n            disabled && styles.nodeDisabled,\n          ],\n          ctx.classNames.node,\n          rowStyle,\n        )}\n        onClick={ctx.blockNode ? select : undefined}\n        onContextMenu={(event) => ctx.onRightClick(event, node)}\n        onFocus={() => ctx.setActiveKey(node.key)}\n      >\n        {ctx.showLine && depth > 0 && (\n          <svg\n            aria-hidden\n            height={rowHeight}\n            width={depth * ctx.indent}\n            {...styleProps(styles.guide, ctx.classNames.guide, ctx.styles.guide)}\n          >\n            <path\n              {...stylex.props(styles.guidePath)}\n              d={guidePath(depth, isLast, trail, ctx.indent, rowHeight)}\n            />\n          </svg>\n        )}\n        <button\n          aria-hidden\n          tabIndex={-1}\n          type=\"button\"\n          {...styleProps(\n            [styles.switcher, !expandable && styles.switcherLeaf],\n            clsx('lobe-tree-switcher', ctx.classNames.switcher),\n            ctx.styles.switcher,\n          )}\n          onClick={(event) => {\n            event.stopPropagation();\n            ctx.toggleExpand(node);\n          }}\n        >\n          {switcherIcon}\n        </button>\n        {checkable && (\n          <Checkbox\n            checked={checkState === 'checked'}\n            className={stylex.props(styles.checkbox).className}\n            disabled={disabled}\n            indeterminate={checkState === 'mixed'}\n            onChange={() => ctx.toggleCheck(node)}\n            onClick={(event) => event.stopPropagation()}\n          />\n        )}\n        {ctx.showIcon && (\n          <span {...stylex.props(styles.icon)}>\n            {node.icon ?? <Icon icon={expandable ? Folder : File} size={16} />}\n          </span>\n        )}\n        <span\n          {...styleProps(\n            [\n              styles.title,\n              ctx.blockNode\n                ? styles.titleBlock\n                : [\n                    styles.titleInline,\n                    selected && styles.titleInlineSelected,\n                    disabled && styles.titleInlineDisabled,\n                  ],\n            ],\n            ctx.classNames.title,\n            ctx.styles.title,\n          )}\n          onClick={ctx.blockNode ? undefined : select}\n        >\n          {ctx.titleRender ? ctx.titleRender(node) : node.title}\n        </span>\n      </div>\n      {expandable && (\n        <Collapsible.Root open={expanded}>\n          <Collapsible.Panel className={stylex.props(styles.panel).className}>\n            {node.children!.map((child, i) => (\n              <TreeNode\n                depth={depth + 1}\n                isLast={i === node.children!.length - 1}\n                key={child.key}\n                node={child}\n                trail={[...trail, !isLast]}\n              />\n            ))}\n          </Collapsible.Panel>\n        </Collapsible.Root>\n      )}\n    </>\n  );\n});\n\nTreeNode.displayName = 'TreeNode';\n\nexport default TreeNode;\n"],"mappings":"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"}

package/es/Tree/context.mjs

@@ -0,0 +1,12 @@
+import { createContext, use } from "react";
+//#region src/Tree/context.ts
+const TreeContext = createContext(null);
+const useTreeContext = () => {
+	const ctx = use(TreeContext);
+	if (!ctx) throw new Error("Tree components must be rendered inside <Tree>");
+	return ctx;
+};
+//#endregion
+export { TreeContext, useTreeContext };
+
+//# sourceMappingURL=context.mjs.map

package/es/Tree/context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.mjs","names":[],"sources":["../../src/Tree/context.ts"],"sourcesContent":["import { createContext, type MouseEvent, type ReactNode, use } from 'react';\n\nimport type { ControlSize } from '../internal/controlSize';\nimport type { TreeClassNames, TreeDataNode, TreeProps, TreeStyles } from './type';\n\nexport interface TreeContextValue {\n  activeKey: string | null;\n  blockNode: boolean;\n  checkable: boolean;\n  checked: Set<string>;\n  classNames: TreeClassNames;\n  disabled: boolean;\n  expanded: Set<string>;\n  halfChecked: Set<string>;\n  indent: number;\n  onRightClick: (event: MouseEvent<HTMLDivElement>, node: TreeDataNode) => void;\n  selected: Set<string>;\n  setActiveKey: (key: string) => void;\n  showIcon: boolean;\n  showLine: boolean;\n  size: ControlSize;\n  styles: TreeStyles;\n  switcherIcon?: TreeProps['switcherIcon'];\n  titleRender?: (node: TreeDataNode) => ReactNode;\n  toggleCheck: (node: TreeDataNode) => void;\n  toggleExpand: (node: TreeDataNode) => void;\n  toggleSelect: (\n    node: TreeDataNode,\n    event?: { metaKey?: boolean; ctrlKey?: boolean; shiftKey?: boolean },\n  ) => void;\n}\n\nexport const TreeContext = createContext<TreeContextValue | null>(null);\n\nexport const useTreeContext = () => {\n  const ctx = use(TreeContext);\n  if (!ctx) throw new Error('Tree components must be rendered inside <Tree>');\n  return ctx;\n};\n"],"mappings":";;AAgCA,MAAa,cAAc,cAAuC,IAAI;AAEtE,MAAa,uBAAuB;CAClC,MAAM,MAAM,IAAI,WAAW;CAC3B,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,gDAAgD;CAC1E,OAAO;AACT"}

package/es/Tree/index.d.ts

@@ -0,0 +1 @@
+export * from './index.d.mts';

package/es/Tree/index.js

@@ -0,0 +1 @@
+export * from './index.mjs';

package/es/Tree/index.mjs

@@ -0,0 +1,4 @@
+import { styles } from "./style.mjs";
+import { conductCheck, flattenVisible, getAllKeys } from "./utils.mjs";
+import Tree from "./Tree.mjs";
+export { conductCheck, Tree as default, flattenVisible, getAllKeys, styles as treeStyles };

package/es/Tree/style.d.mts

@@ -0,0 +1,111 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/Tree/style.d.ts
+export declare const styles: Readonly<{
+  readonly checkbox: Readonly<{
+    readonly marginInlineEnd: stylex.StyleXClassNameFor<"marginInlineEnd", 8>;
+  }>;
+  readonly guide: Readonly<{
+    readonly overflow: stylex.StyleXClassNameFor<"overflow", "visible">;
+    readonly insetBlockStart: stylex.StyleXClassNameFor<"insetBlockStart", 0>;
+    readonly insetInlineStart: stylex.StyleXClassNameFor<"insetInlineStart", 0>;
+    readonly pointerEvents: stylex.StyleXClassNameFor<"pointerEvents", "none">;
+    readonly position: stylex.StyleXClassNameFor<"position", "absolute">;
+    readonly height: stylex.StyleXClassNameFor<"height", "100%">;
+  }>;
+  readonly guidePath: Readonly<{
+    readonly fill: stylex.StyleXClassNameFor<"fill", "none">;
+    readonly stroke: stylex.StyleXClassNameFor<"stroke", string>;
+    readonly strokeLinecap: stylex.StyleXClassNameFor<"strokeLinecap", "round">;
+    readonly strokeWidth: stylex.StyleXClassNameFor<"strokeWidth", 1>;
+  }>;
+  readonly icon: Readonly<{
+    readonly flex: stylex.StyleXClassNameFor<"flex", "none">;
+    readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+    readonly color: stylex.StyleXClassNameFor<"color", string>;
+    readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
+    readonly marginInlineEnd: stylex.StyleXClassNameFor<"marginInlineEnd", 6>;
+  }>;
+  readonly node: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
+    readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+    readonly color: stylex.StyleXClassNameFor<"color", string>;
+    readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+    readonly position: stylex.StyleXClassNameFor<"position", "relative">;
+  }>;
+  readonly nodeBlock: Readonly<{
+    readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer">;
+  }>;
+  readonly nodeDisabled: Readonly<{
+    readonly color: stylex.StyleXClassNameFor<"color", string>;
+    readonly cursor: stylex.StyleXClassNameFor<"cursor", "not-allowed">;
+  }>;
+  readonly nodeDisabledSelected: Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+  }>;
+  readonly nodeHover: Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string | null>;
+  }>;
+  readonly nodeSelected: Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+  }>;
+  readonly panel: Readonly<{
+    readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
+    readonly transition: stylex.StyleXClassNameFor<"transition", `height 200ms ${string}`>;
+    readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "0s" | null>;
+    readonly height: stylex.StyleXClassNameFor<"height", 0 | "var(--collapsible-panel-height)">;
+  }>;
+  readonly root: Readonly<{
+    readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
+    readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+    readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
+    readonly userSelect: stylex.StyleXClassNameFor<"userSelect", "none">;
+  }>;
+  readonly switcher: Readonly<{
+    readonly padding: stylex.StyleXClassNameFor<"padding", 0>;
+    readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "currentcolor">;
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "none">;
+    readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 0>;
+    readonly flex: stylex.StyleXClassNameFor<"flex", "none">;
+    readonly placeItems: stylex.StyleXClassNameFor<"placeItems", "center">;
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+    readonly color: stylex.StyleXClassNameFor<"color", string>;
+    readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer">;
+    readonly display: stylex.StyleXClassNameFor<"display", "grid">;
+    readonly height: stylex.StyleXClassNameFor<"height", 24>;
+    readonly width: stylex.StyleXClassNameFor<"width", 24>;
+  }>;
+  readonly switcherLeaf: Readonly<{
+    readonly pointerEvents: stylex.StyleXClassNameFor<"pointerEvents", "none">;
+    readonly visibility: stylex.StyleXClassNameFor<"visibility", "hidden">;
+  }>;
+  readonly title: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+    readonly gap: stylex.StyleXClassNameFor<"gap", 6>;
+    readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
+    readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 2>;
+    readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 6>;
+    readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+    readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
+    readonly textOverflow: stylex.StyleXClassNameFor<"textOverflow", "ellipsis">;
+    readonly whiteSpace: stylex.StyleXClassNameFor<"whiteSpace", "nowrap">;
+    readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+  }>;
+  readonly titleBlock: Readonly<{
+    readonly flex: stylex.StyleXClassNameFor<"flex", "1">;
+  }>;
+  readonly titleInline: Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string | null>;
+    readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer">;
+  }>;
+  readonly titleInlineDisabled: Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
+    readonly cursor: stylex.StyleXClassNameFor<"cursor", "not-allowed">;
+  }>;
+  readonly titleInlineSelected: Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+  }>;
+}>;
+//#endregion
+//# sourceMappingURL=style.d.mts.map

package/es/Tree/style.mjs

@@ -0,0 +1,131 @@
+//#region src/Tree/style.ts
+const styles = {
+	checkbox: {
+		k71WvV: "lb1xegmmw",
+		$$css: true
+	},
+	guide: {
+		kVQacm: "lb1rea2x4",
+		k87sOh: "lb13vifvy",
+		kLqNvP: "lb1o0tod",
+		kfzvcC: "lb47corl",
+		kVAEAm: "lb10l6tqk",
+		kZKoxP: "lb5yr21d",
+		$$css: true
+	},
+	guidePath: {
+		kDwRjp: "lbbh8q5q",
+		kjVXCG: "lb1w5eaov",
+		kU5bRw: "lb1owpc8m",
+		kfJifR: "lbnpr05h",
+		$$css: true
+	},
+	icon: {
+		kUk6DE: "lb1okw0bk",
+		kGNEyG: "lb6s0dn4",
+		kMwMTN: "lbc77et8",
+		k1xSpc: "lb3nfvp2",
+		k71WvV: "lbbelrpt",
+		$$css: true
+	},
+	node: {
+		kaIpWk: "lb1sbi92r",
+		kI3sdo: "lb1a2a7pz",
+		kGNEyG: "lb6s0dn4",
+		kMwMTN: "lb66ogz0",
+		k1xSpc: "lb78zum5",
+		kVAEAm: "lb1n2onr6",
+		$$css: true
+	},
+	nodeBlock: {
+		kkrTdU: "lb1ypdohk",
+		$$css: true
+	},
+	nodeDisabled: {
+		kMwMTN: "lbv7q1j6",
+		kkrTdU: "lb1h6gzvc",
+		$$css: true
+	},
+	nodeDisabledSelected: {
+		kWkggS: "lbjjy28o lb1n5bzlp",
+		$$css: true
+	},
+	nodeHover: {
+		kWkggS: "lb1gowcop",
+		$$css: true
+	},
+	nodeSelected: {
+		kWkggS: "lbjjy28o",
+		$$css: true
+	},
+	panel: {
+		kVQacm: "lbb3r6kr",
+		kmkexE: "lb180ooqv",
+		kIyJzY: "lb12w9bfk",
+		kZKoxP: "lbuan8c8 lbrf5iq3",
+		$$css: true
+	},
+	root: {
+		kI3sdo: "lb1a2a7pz",
+		k1xSpc: "lb78zum5",
+		kXwgrk: "lbdt5ytf",
+		kfSwDN: "lb87ps6o",
+		$$css: true
+	},
+	switcher: {
+		kmVPX3: "lb1717udv",
+		kVAM5u: "lb181nr7w",
+		kaIpWk: "lb1vihcfj",
+		ksu8eU: "lbng3xce",
+		kMzoRj: "lbc342km",
+		kUk6DE: "lb1okw0bk",
+		kgQiWS: "lb1ku5rj1",
+		kWkggS: "lbjbqb8w lb1ri6zej",
+		kMwMTN: "lbc77et8 lb1bxu9lh",
+		kkrTdU: "lb1ypdohk",
+		k1xSpc: "lbrvj5dj",
+		kZKoxP: "lbxk0z11",
+		kzqmXN: "lbvy4d1p",
+		$$css: true
+	},
+	switcherLeaf: {
+		kfzvcC: "lb47corl",
+		k33iCy: "lblshs6z",
+		$$css: true
+	},
+	title: {
+		kaIpWk: "lb1vihcfj",
+		kOIVth: "lb17d4w8g",
+		kVQacm: "lbb3r6kr",
+		k8WAf4: "lbj8oexa",
+		kg3NbH: "lb1xijbu4",
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb3nfvp2",
+		kg5iWk: "lblyipyv",
+		khDVqt: "lbuxw1ft",
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	},
+	titleBlock: {
+		kUk6DE: "lb98rzlu",
+		$$css: true
+	},
+	titleInline: {
+		kWkggS: "lb1gowcop",
+		kkrTdU: "lb1ypdohk",
+		$$css: true
+	},
+	titleInlineDisabled: {
+		kWkggS: "lbjbqb8w",
+		kkrTdU: "lb1h6gzvc",
+		$$css: true
+	},
+	titleInlineSelected: {
+		kWkggS: "lbjjy28o",
+		$$css: true
+	}
+};
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/Tree/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Tree/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const styles = stylex.create({\n  checkbox: {\n    marginInlineEnd: 8,\n  },\n  guide: {\n    overflow: 'visible',\n    insetBlockStart: 0,\n    insetInlineStart: 0,\n    pointerEvents: 'none',\n    position: 'absolute',\n    height: '100%',\n  },\n  guidePath: {\n    fill: 'none',\n    stroke: cssVar.colorBorderSecondary,\n    strokeLinecap: 'round',\n    strokeWidth: 1,\n  },\n  icon: {\n    flex: 'none',\n    alignItems: 'center',\n    color: cssVar.colorTextSecondary,\n    display: 'inline-flex',\n    marginInlineEnd: 6,\n  },\n  node: {\n    borderRadius: cssVar.borderRadius,\n    outline: 'none',\n    alignItems: 'center',\n    color: cssVar.colorText,\n    display: 'flex',\n    position: 'relative',\n  },\n  nodeBlock: {\n    cursor: 'pointer',\n  },\n  nodeDisabled: {\n    color: cssVar.colorTextDisabled,\n    cursor: 'not-allowed',\n  },\n  nodeDisabledSelected: {\n    backgroundColor: { 'default': cssVar.colorFillSecondary, ':hover': 'transparent' },\n  },\n  nodeHover: {\n    backgroundColor: { 'default': null, ':hover': cssVar.colorFillTertiary },\n  },\n  nodeSelected: {\n    backgroundColor: cssVar.colorFillSecondary,\n  },\n  panel: {\n    overflow: 'hidden',\n    transition: `height 200ms ${cssVar.motionEaseOut}`,\n    transitionDuration: { 'default': null, '@media (prefers-reduced-motion: reduce)': '0s' },\n    height: {\n      'default': 'var(--collapsible-panel-height)',\n      ':is([data-starting-style], [data-ending-style])': 0,\n    },\n  },\n  root: {\n    outline: 'none',\n    display: 'flex',\n    flexDirection: 'column',\n    userSelect: 'none',\n  },\n  switcher: {\n    padding: 0,\n    borderColor: 'currentcolor',\n    borderRadius: cssVar.borderRadiusSM,\n    borderStyle: 'none',\n    borderWidth: 0,\n    flex: 'none',\n    placeItems: 'center',\n    backgroundColor: { 'default': 'transparent', ':hover': cssVar.colorFillSecondary },\n    color: { 'default': cssVar.colorTextSecondary, ':hover': cssVar.colorText },\n    cursor: 'pointer',\n    display: 'grid',\n    height: 24,\n    width: 24,\n  },\n  switcherLeaf: {\n    pointerEvents: 'none',\n    visibility: 'hidden',\n  },\n  title: {\n    borderRadius: cssVar.borderRadiusSM,\n    gap: 6,\n    overflow: 'hidden',\n    paddingBlock: 2,\n    paddingInline: 6,\n    alignItems: 'center',\n    display: 'inline-flex',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    minWidth: 0,\n  },\n  titleBlock: {\n    flex: '1',\n  },\n  titleInline: {\n    backgroundColor: { 'default': null, ':hover': cssVar.colorFillTertiary },\n    cursor: 'pointer',\n  },\n  titleInlineDisabled: {\n    backgroundColor: 'transparent',\n    cursor: 'not-allowed',\n  },\n  titleInlineSelected: {\n    backgroundColor: cssVar.colorFillSecondary,\n  },\n});\n"],"mappings":";AAGA,MAAa,SAAS;CACpB,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,sBAAsB;EACpB,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,qBAAqB;EACnB,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,qBAAqB;EACnB,QAAQ;EACR,OAAO;CACT;AACF"}