@accelint/design-toolkit 9.8.0 → 9.9.1

package/dist/components/tree/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["acc","AriaTree","className"],"sources":["../../../src/components/tree/index.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport { Cache } from '@/hooks/use-tree/actions/cache';\nimport type { Key, Selection } from '@react-types/shared';\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { useMemo } from 'react';\nimport {\n  Tree as AriaTree,\n  composeRenderProps,\n  DropIndicator,\n  type DropTarget,\n  useDragAndDrop,\n} from 'react-aria-components';\nimport { TreeContext } from './context';\nimport styles from './styles.module.css';\nimport type { TreeProps } from './types';\n\nconst defaultRenderDropIndicator = (target: DropTarget) => (\n  <DropIndicator target={target} className={styles.dropIndicator} />\n);\n\n/**\n * Tree - Hierarchical tree view with selection, visibility, and drag-and-drop\n *\n * Supports static or dynamic collections with keyboard navigation and accessibility.\n *\n * @param props - {@link TreeProps}\n * @param props.children - Tree items or render function for dynamic collections.\n * @param props.className - CSS class for the tree container.\n * @param props.disabledKeys - Set of disabled item keys.\n * @param props.dragAndDropConfig - Configuration for drag and drop behavior.\n * @param props.expandedKeys - Set of expanded item keys.\n * @param props.items - Data source for dynamic collections.\n * @param props.selectedKeys - Set of selected item keys.\n * @param props.showRuleLines - Whether to show connecting lines between items.\n * @param props.showVisibility - Whether to show visibility toggle buttons.\n * @param props.selectionMode - Selection mode for the tree.\n * @param props.variant - Visual density variant.\n * @param props.visibleKeys - Set of visible item keys.\n * @param props.onVisibilityChange - Callback when item visibility changes.\n * @param props.onSelectionChange - Callback when selection changes.\n * @returns The rendered Tree component.\n *\n * @example\n * // Dynamic collection\n * ```tsx\n * <Tree items={items} expandedKeys={expandedKeys}>\n *   {(node) => <TreeItem key={node.key}>{node.label}</TreeItem>}\n * </Tree>\n * ```\n *\n * @example\n * ```tsx\n * // Static collection\n * <Tree>\n *   <TreeItem id=\"one\" textValue=\"one\">\n *     <TreeItemContent>One</TreeItemContent>\n *     <TreeItem id=\"two\" textValue=\"two\">\n *       <TreeItemContent>Two</TreeItemContent>\n *     </TreeItem>\n *   </TreeItem>\n * </Tree>\n * ```\n */\nexport function Tree<T>({\n  children,\n  className,\n  disabledKeys: disabledKeysProp,\n  dragAndDropConfig,\n  expandedKeys: expandedKeysProp,\n  items,\n  selectedKeys: selectedKeysProp,\n  showRuleLines = true,\n  showVisibility = true,\n  selectionMode = 'multiple',\n  variant = 'cozy',\n  visibleKeys: visibleKeysProp,\n  onVisibilityChange,\n  onSelectionChange,\n  ...rest\n}: TreeProps<T>) {\n  /**\n   * A static collection is hard-coded. Dynamic is data-driven from an external source.\n   * https://react-spectrum.adobe.com/react-aria/Tree.html#content\n   *\n   * Controlled state should only be used on a static tree.\n   */\n  if (\n    items &&\n    (disabledKeysProp ||\n      expandedKeysProp ||\n      selectedKeysProp ||\n      visibleKeysProp)\n  ) {\n    throw new Error(\n      'Tree should only be controlled with state from either `items` or keys props, not both',\n    );\n  }\n\n  /**\n   * A static tree won't support the node iterator pattern.\n   */\n  if (!!items !== (typeof children === 'function')) {\n    throw new Error(\n      'Tree `items` and node iterator `children` must be used together',\n    );\n  }\n\n  const { dragAndDropHooks } = useDragAndDrop({\n    renderDropIndicator: defaultRenderDropIndicator,\n    getAllowedDropOperations: () => ['move'],\n    getDropOperation: () => 'move',\n    ...dragAndDropConfig,\n  });\n  const cache = useMemo(() => (items ? new Cache([...items]) : null), [items]);\n  const nodes = useMemo(() => cache?.getAllNodes(), [cache]);\n  const {\n    disabledKeys,\n    expandedKeys,\n    selectedKeys,\n    visibleKeys,\n    visibilityComputedKeys,\n  } = useMemo(() => {\n    const acc = {\n      disabledKeys: nodes ? new Set<Key>() : disabledKeysProp,\n      expandedKeys: nodes ? new Set<Key>() : expandedKeysProp,\n      selectedKeys: nodes ? new Set<Key>() : selectedKeysProp,\n      visibleKeys: nodes ? new Set<Key>() : visibleKeysProp,\n      visibilityComputedKeys: new Set<Key>(),\n    };\n\n    if (!nodes) {\n      return acc;\n    }\n\n    return nodes.reduce(\n      (\n        acc,\n        {\n          key,\n          isDisabled,\n          isExpanded,\n          isSelected,\n          isVisible,\n          isVisibleComputed,\n        },\n      ) => {\n        if (isDisabled) {\n          acc.disabledKeys?.add(key);\n        }\n        if (isExpanded) {\n          acc.expandedKeys?.add(key);\n        }\n        if (isSelected) {\n          acc.selectedKeys?.add(key);\n        }\n        if (isVisible) {\n          acc.visibleKeys?.add(key);\n        }\n        if (isVisibleComputed) {\n          acc.visibilityComputedKeys.add(key);\n        }\n        return acc;\n      },\n      acc,\n    );\n  }, [\n    nodes,\n    disabledKeysProp,\n    expandedKeysProp,\n    selectedKeysProp,\n    visibleKeysProp,\n  ]);\n\n  const handleSelectionChange = selectedKeys\n    ? (selection: Selection) => {\n        if (selection !== 'all') {\n          onSelectionChange?.(selection);\n        }\n      }\n    : undefined;\n\n  return (\n    <TreeContext.Provider\n      value={{\n        disabledKeys,\n        expandedKeys,\n        selectedKeys,\n        showRuleLines,\n        showVisibility,\n        variant,\n        visibleKeys,\n        visibilityComputedKeys,\n        isStatic: typeof children !== 'function',\n        onVisibilityChange: onVisibilityChange ?? (() => undefined), // TODO: improve\n      }}\n    >\n      <AriaTree\n        {...rest}\n        className={composeRenderProps(className, (className) =>\n          clsx(styles.tree, className),\n        )}\n        disabledKeys={disabledKeys}\n        dragAndDropHooks={dragAndDropHooks}\n        expandedKeys={expandedKeys}\n        items={items}\n        selectedKeys={selectedKeys}\n        onSelectionChange={handleSelectionChange}\n        selectionMode={selectionMode}\n      >\n        {children}\n      </AriaTree>\n    </TreeContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAM,8BAA8B,WAClC,oBAAC;CAAsB;CAAQ,WAAW,OAAO;EAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CpE,SAAgB,KAAQ,EACtB,UACA,WACA,cAAc,kBACd,mBACA,cAAc,kBACd,OACA,cAAc,kBACd,gBAAgB,MAChB,iBAAiB,MACjB,gBAAgB,YAChB,UAAU,QACV,aAAa,iBACb,oBACA,mBACA,GAAG,QACY;;;;;;;AAOf,KACE,UACC,oBACC,oBACA,oBACA,iBAEF,OAAM,IAAI,MACR,wFACD;;;;AAMH,KAAI,CAAC,CAAC,WAAW,OAAO,aAAa,YACnC,OAAM,IAAI,MACR,kEACD;CAGH,MAAM,EAAE,qBAAqB,eAAe;EAC1C,qBAAqB;EACrB,gCAAgC,CAAC,OAAO;EACxC,wBAAwB;EACxB,GAAG;EACJ,CAAC;CACF,MAAM,QAAQ,cAAe,QAAQ,IAAI,MAAM,CAAC,GAAG,MAAM,CAAC,GAAG,MAAO,CAAC,MAAM,CAAC;CAC5E,MAAM,QAAQ,cAAc,OAAO,aAAa,EAAE,CAAC,MAAM,CAAC;CAC1D,MAAM,EACJ,cACA,cACA,cACA,aACA,2BACE,cAAc;EAChB,MAAM,MAAM;GACV,cAAc,wBAAQ,IAAI,KAAU,GAAG;GACvC,cAAc,wBAAQ,IAAI,KAAU,GAAG;GACvC,cAAc,wBAAQ,IAAI,KAAU,GAAG;GACvC,aAAa,wBAAQ,IAAI,KAAU,GAAG;GACtC,wCAAwB,IAAI,KAAU;GACvC;AAED,MAAI,CAAC,MACH,QAAO;AAGT,SAAO,MAAM,QAET,OACA,EACE,KACA,YACA,YACA,YACA,WACA,wBAEC;AACH,OAAI,WACF,OAAI,cAAc,IAAI,IAAI;AAE5B,OAAI,WACF,OAAI,cAAc,IAAI,IAAI;AAE5B,OAAI,WACF,OAAI,cAAc,IAAI,IAAI;AAE5B,OAAI,UACF,OAAI,aAAa,IAAI,IAAI;AAE3B,OAAI,kBACF,OAAI,uBAAuB,IAAI,IAAI;AAErC,UAAOA;KAET,IACD;IACA;EACD;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,wBAAwB,gBACzB,cAAyB;AACxB,MAAI,cAAc,MAChB,qBAAoB,UAAU;KAGlC;AAEJ,QACE,oBAAC,YAAY;EACX,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,UAAU,OAAO,aAAa;GAC9B,oBAAoB,6BAA6B;GAClD;YAED,oBAACC;GACC,GAAI;GACJ,WAAW,mBAAmB,YAAY,gBACxC,KAAK,OAAO,MAAMC,YAAU,CAC7B;GACa;GACI;GACJ;GACP;GACO;GACd,mBAAmB;GACJ;GAEd;IACQ;GACU"}
+{"version":3,"file":"index.js","names":["acc","AriaTree","className"],"sources":["../../../src/components/tree/index.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport { Cache } from '@/hooks/use-tree/actions/cache';\nimport type { Key, Selection } from '@react-types/shared';\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { useMemo } from 'react';\nimport {\n  Tree as AriaTree,\n  composeRenderProps,\n  DropIndicator,\n  type DropTarget,\n  useDragAndDrop,\n} from 'react-aria-components';\nimport { TreeContext } from './context';\nimport styles from './styles.module.css';\nimport type { TreeProps } from './types';\n\nconst defaultRenderDropIndicator = (target: DropTarget) => {\n  const isBetweenItems =\n    target.type === 'item' &&\n    (target.dropPosition === 'before' || target.dropPosition === 'after');\n  return (\n    <DropIndicator\n      target={target}\n      className={\n        isBetweenItems ? styles.dropIndicatorBetween : styles.dropIndicator\n      }\n    />\n  );\n};\n\n/**\n * Tree - Hierarchical tree view with selection, visibility, and drag-and-drop\n *\n * Supports static or dynamic collections with keyboard navigation and accessibility.\n *\n * @param props - {@link TreeProps}\n * @param props.children - Tree items or render function for dynamic collections.\n * @param props.className - CSS class for the tree container.\n * @param props.disabledKeys - Set of disabled item keys.\n * @param props.dragAndDropConfig - Configuration for drag and drop behavior.\n * @param props.expandedKeys - Set of expanded item keys.\n * @param props.items - Data source for dynamic collections.\n * @param props.selectedKeys - Set of selected item keys.\n * @param props.showRuleLines - Whether to show connecting lines between items.\n * @param props.showVisibility - Whether to show visibility toggle buttons.\n * @param props.selectionMode - Selection mode for the tree.\n * @param props.variant - Visual density variant.\n * @param props.visibleKeys - Set of visible item keys.\n * @param props.onVisibilityChange - Callback when item visibility changes.\n * @param props.onSelectionChange - Callback when selection changes.\n * @returns The rendered Tree component.\n *\n * @example\n * // Dynamic collection\n * ```tsx\n * <Tree items={items} expandedKeys={expandedKeys}>\n *   {(node) => <TreeItem key={node.key}>{node.label}</TreeItem>}\n * </Tree>\n * ```\n *\n * @example\n * ```tsx\n * // Static collection\n * <Tree>\n *   <TreeItem id=\"one\" textValue=\"one\">\n *     <TreeItemContent>One</TreeItemContent>\n *     <TreeItem id=\"two\" textValue=\"two\">\n *       <TreeItemContent>Two</TreeItemContent>\n *     </TreeItem>\n *   </TreeItem>\n * </Tree>\n * ```\n */\nexport function Tree<T>({\n  children,\n  className,\n  disabledKeys: disabledKeysProp,\n  dragAndDropConfig,\n  expandedKeys: expandedKeysProp,\n  items,\n  selectedKeys: selectedKeysProp,\n  showRuleLines = true,\n  showVisibility = true,\n  selectionMode = 'multiple',\n  variant = 'cozy',\n  visibleKeys: visibleKeysProp,\n  onVisibilityChange,\n  onSelectionChange,\n  ...rest\n}: TreeProps<T>) {\n  /**\n   * A static collection is hard-coded. Dynamic is data-driven from an external source.\n   * https://react-spectrum.adobe.com/react-aria/Tree.html#content\n   *\n   * Controlled state should only be used on a static tree.\n   */\n  if (\n    items &&\n    (disabledKeysProp ||\n      expandedKeysProp ||\n      selectedKeysProp ||\n      visibleKeysProp)\n  ) {\n    throw new Error(\n      'Tree should only be controlled with state from either `items` or keys props, not both',\n    );\n  }\n\n  /**\n   * A static tree won't support the node iterator pattern.\n   */\n  if (!!items !== (typeof children === 'function')) {\n    throw new Error(\n      'Tree `items` and node iterator `children` must be used together',\n    );\n  }\n\n  const { dragAndDropHooks } = useDragAndDrop({\n    renderDropIndicator: defaultRenderDropIndicator,\n    getAllowedDropOperations: () => ['move'],\n    getDropOperation: () => 'move',\n    ...dragAndDropConfig,\n  });\n  const cache = useMemo(() => (items ? new Cache([...items]) : null), [items]);\n  const nodes = useMemo(() => cache?.getAllNodes(), [cache]);\n  const {\n    disabledKeys,\n    expandedKeys,\n    selectedKeys,\n    visibleKeys,\n    visibilityComputedKeys,\n  } = useMemo(() => {\n    const acc = {\n      disabledKeys: nodes ? new Set<Key>() : disabledKeysProp,\n      expandedKeys: nodes ? new Set<Key>() : expandedKeysProp,\n      selectedKeys: nodes ? new Set<Key>() : selectedKeysProp,\n      visibleKeys: nodes ? new Set<Key>() : visibleKeysProp,\n      visibilityComputedKeys: new Set<Key>(),\n    };\n\n    if (!nodes) {\n      return acc;\n    }\n\n    return nodes.reduce(\n      (\n        acc,\n        {\n          key,\n          isDisabled,\n          isExpanded,\n          isSelected,\n          isVisible,\n          isVisibleComputed,\n        },\n      ) => {\n        if (isDisabled) {\n          acc.disabledKeys?.add(key);\n        }\n        if (isExpanded) {\n          acc.expandedKeys?.add(key);\n        }\n        if (isSelected) {\n          acc.selectedKeys?.add(key);\n        }\n        if (isVisible) {\n          acc.visibleKeys?.add(key);\n        }\n        if (isVisibleComputed) {\n          acc.visibilityComputedKeys.add(key);\n        }\n        return acc;\n      },\n      acc,\n    );\n  }, [\n    nodes,\n    disabledKeysProp,\n    expandedKeysProp,\n    selectedKeysProp,\n    visibleKeysProp,\n  ]);\n\n  const handleSelectionChange = selectedKeys\n    ? (selection: Selection) => {\n        if (selection !== 'all') {\n          onSelectionChange?.(selection);\n        }\n      }\n    : undefined;\n\n  return (\n    <TreeContext.Provider\n      value={{\n        disabledKeys,\n        expandedKeys,\n        selectedKeys,\n        showRuleLines,\n        showVisibility,\n        variant,\n        visibleKeys,\n        visibilityComputedKeys,\n        isStatic: typeof children !== 'function',\n        onVisibilityChange: onVisibilityChange ?? (() => undefined), // TODO: improve\n      }}\n    >\n      <AriaTree\n        {...rest}\n        className={composeRenderProps(className, (className) =>\n          clsx(styles.tree, className),\n        )}\n        disabledKeys={disabledKeys}\n        dragAndDropHooks={dragAndDropHooks}\n        expandedKeys={expandedKeys}\n        items={items}\n        selectedKeys={selectedKeys}\n        onSelectionChange={handleSelectionChange}\n        selectionMode={selectionMode}\n      >\n        {children}\n      </AriaTree>\n    </TreeContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAM,8BAA8B,WAAuB;AAIzD,QACE,oBAAC;EACS;EACR,WALF,OAAO,SAAS,WACf,OAAO,iBAAiB,YAAY,OAAO,iBAAiB,WAKxC,OAAO,uBAAuB,OAAO;GAExD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CN,SAAgB,KAAQ,EACtB,UACA,WACA,cAAc,kBACd,mBACA,cAAc,kBACd,OACA,cAAc,kBACd,gBAAgB,MAChB,iBAAiB,MACjB,gBAAgB,YAChB,UAAU,QACV,aAAa,iBACb,oBACA,mBACA,GAAG,QACY;;;;;;;AAOf,KACE,UACC,oBACC,oBACA,oBACA,iBAEF,OAAM,IAAI,MACR,wFACD;;;;AAMH,KAAI,CAAC,CAAC,WAAW,OAAO,aAAa,YACnC,OAAM,IAAI,MACR,kEACD;CAGH,MAAM,EAAE,qBAAqB,eAAe;EAC1C,qBAAqB;EACrB,gCAAgC,CAAC,OAAO;EACxC,wBAAwB;EACxB,GAAG;EACJ,CAAC;CACF,MAAM,QAAQ,cAAe,QAAQ,IAAI,MAAM,CAAC,GAAG,MAAM,CAAC,GAAG,MAAO,CAAC,MAAM,CAAC;CAC5E,MAAM,QAAQ,cAAc,OAAO,aAAa,EAAE,CAAC,MAAM,CAAC;CAC1D,MAAM,EACJ,cACA,cACA,cACA,aACA,2BACE,cAAc;EAChB,MAAM,MAAM;GACV,cAAc,wBAAQ,IAAI,KAAU,GAAG;GACvC,cAAc,wBAAQ,IAAI,KAAU,GAAG;GACvC,cAAc,wBAAQ,IAAI,KAAU,GAAG;GACvC,aAAa,wBAAQ,IAAI,KAAU,GAAG;GACtC,wCAAwB,IAAI,KAAU;GACvC;AAED,MAAI,CAAC,MACH,QAAO;AAGT,SAAO,MAAM,QAET,OACA,EACE,KACA,YACA,YACA,YACA,WACA,wBAEC;AACH,OAAI,WACF,OAAI,cAAc,IAAI,IAAI;AAE5B,OAAI,WACF,OAAI,cAAc,IAAI,IAAI;AAE5B,OAAI,WACF,OAAI,cAAc,IAAI,IAAI;AAE5B,OAAI,UACF,OAAI,aAAa,IAAI,IAAI;AAE3B,OAAI,kBACF,OAAI,uBAAuB,IAAI,IAAI;AAErC,UAAOA;KAET,IACD;IACA;EACD;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,wBAAwB,gBACzB,cAAyB;AACxB,MAAI,cAAc,MAChB,qBAAoB,UAAU;KAGlC;AAEJ,QACE,oBAAC,YAAY;EACX,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,UAAU,OAAO,aAAa;GAC9B,oBAAoB,6BAA6B;GAClD;YAED,oBAACC;GACC,GAAI;GACJ,WAAW,mBAAmB,YAAY,gBACxC,KAAK,OAAO,MAAMC,YAAU,CAC7B;GACa;GACI;GACJ;GACP;GACO;GACd,mBAAmB;GACJ;GAEd;IACQ;GACU"}

package/dist/components/tree/item-actions.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { PropsWithChildren } from "react";
-import * as react_jsx_runtime192 from "react/jsx-runtime";
+import * as react_jsx_runtime199 from "react/jsx-runtime";
 
 //#region src/components/tree/item-actions.d.ts
 
@@ -39,7 +39,7 @@ declare function TreeItemActions({
   className
 }: PropsWithChildren & {
   className?: string;
-}): react_jsx_runtime192.JSX.Element;
+}): react_jsx_runtime199.JSX.Element;
 //#endregion
 export { TreeItemActions };
 //# sourceMappingURL=item-actions.d.ts.map

package/dist/components/tree/item-content.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { TreeItemContentProps } from "./types.js";
-import * as react_jsx_runtime61 from "react/jsx-runtime";
+import * as react_jsx_runtime198 from "react/jsx-runtime";
 
 //#region src/components/tree/item-content.d.ts
 
@@ -35,7 +35,7 @@ import * as react_jsx_runtime61 from "react/jsx-runtime";
  */
 declare function TreeItemContent({
   children
-}: TreeItemContentProps): react_jsx_runtime61.JSX.Element;
+}: TreeItemContentProps): react_jsx_runtime198.JSX.Element;
 //#endregion
 export { TreeItemContent };
 //# sourceMappingURL=item-content.d.ts.map

package/dist/components/tree/item-content.js

@@ -49,11 +49,14 @@ import Show from "@accelint/icons/show";
 */
 function TreeItemContent({ children }) {
 	const { showVisibility, variant, visibleKeys, onVisibilityChange } = useContext(TreeContext);
-	const { isVisible, isViewable } = useContext(TreeItemContext);
+	const { isVisible, isViewable, ancestors } = useContext(TreeItemContext);
 	const size = variant === "cozy" ? "medium" : "small";
 	return /* @__PURE__ */ jsx(TreeItemContent$1, { children: (renderProps) => {
 		const { id, allowsDragging, hasChildItems, level, selectionBehavior, selectionMode, state, isDisabled, isExpanded, isSelected } = renderProps;
-		const isLastOfSet = !(state.collection.getItem(id)?.nextKey || hasChildItems);
+		const isLastOfSet = !state.collection.getItem(id)?.nextKey;
+		const ancestorLastOfSet = ancestors.slice(0, -1).map((ancestorKey) => {
+			return !state.collection.getItem(ancestorKey)?.nextKey;
+		});
 		const shouldShowSelection = selectionBehavior === "toggle" && selectionMode !== "none";
 		const handlePress = () => {
 			const keys = new Set(visibleKeys);
@@ -77,15 +80,16 @@ function TreeItemContent({ children }) {
 					}),
 					level > 1 && /* @__PURE__ */ jsx(TreeLines, {
 						level,
-						isLastOfSet
+						isLastOfSet,
+						ancestorLastOfSet
 					}),
-					hasChildItems ? /* @__PURE__ */ jsx(Button$1, {
+					hasChildItems && /* @__PURE__ */ jsx(Button$1, {
 						slot: "chevron",
 						variant: "icon",
 						size,
 						className: styles.expansion,
 						children: /* @__PURE__ */ jsx(Icon, { children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, {}) : /* @__PURE__ */ jsx(ChevronUp, {}) })
-					}) : /* @__PURE__ */ jsx("div", { className: clsx(styles.spacing, styles[variant]) }),
+					}),
 					/* @__PURE__ */ jsx("div", {
 						className: clsx(styles.display, styles[variant]),
 						children: typeof children === "function" ? children({

package/dist/components/tree/item-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"item-content.js","names":["AriaTreeItemContent","Button","Checkbox"],"sources":["../../../src/components/tree/item-content.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport ChevronDown from '@accelint/icons/chevron-down';\nimport ChevronUp from '@accelint/icons/chevron-up';\nimport DragVert from '@accelint/icons/drag-vert';\nimport Hide from '@accelint/icons/hide';\nimport Show from '@accelint/icons/show';\nimport { useContext } from 'react';\nimport { TreeItemContent as AriaTreeItemContent } from 'react-aria-components';\nimport { Button } from '../button';\nimport { Checkbox } from '../checkbox';\nimport { Icon } from '../icon';\nimport { IconProvider } from '../icon/context';\nimport { TreeContext, TreeItemContext } from './context';\nimport { TreeLines } from './lines';\nimport styles from './styles.module.css';\nimport type { Key } from '@react-types/shared';\nimport type { TreeItemContentProps } from './types';\n\n/**\n * TreeItemContent - Renders the display content of a tree node\n *\n * @example\n * ```tsx\n * <TreeItem id=\"node\" textValue=\"Node\">\n *   <TreeItemContent>\n *     <TreeItemPrefixIcon><Folder /></TreeItemPrefixIcon>\n *     <TreeItemLabel>Folder Name</TreeItemLabel>\n *     <TreeItemDescription>Contains 5 items</TreeItemDescription>\n *   </TreeItemContent>\n * </TreeItem>\n * ```\n *\n * @param props - {@link TreeItemContentProps}\n * @param props.children - Content to render, or a render function receiving TreeItemContentRenderProps.\n * @returns The rendered TreeItemContent component.\n */\nexport function TreeItemContent({ children }: TreeItemContentProps) {\n  const { showVisibility, variant, visibleKeys, onVisibilityChange } =\n    useContext(TreeContext);\n  const { isVisible, isViewable } = useContext(TreeItemContext);\n  const size = variant === 'cozy' ? 'medium' : 'small';\n\n  return (\n    <AriaTreeItemContent>\n      {(renderProps) => {\n        const {\n          id,\n          allowsDragging,\n          hasChildItems,\n          level,\n          selectionBehavior,\n          selectionMode,\n          state,\n          isDisabled,\n          isExpanded,\n          isSelected,\n        } = renderProps;\n\n        const isLastOfSet = !(\n          state.collection.getItem(id)?.nextKey || hasChildItems\n        );\n        const shouldShowSelection =\n          selectionBehavior === 'toggle' && selectionMode !== 'none';\n\n        const handlePress = () => {\n          const keys = new Set<Key>(visibleKeys);\n          visibleKeys?.has(id) ? keys.delete(id) : keys.add(id);\n          onVisibilityChange?.(keys);\n        };\n\n        return (\n          <IconProvider size={size}>\n            <div\n              className={clsx('group', styles.content, styles[variant])}\n              data-last-of-set={isLastOfSet}\n            >\n              {showVisibility && (\n                <Button\n                  variant='icon'\n                  color='mono-bold'\n                  size={size}\n                  onPress={handlePress}\n                  isDisabled={isDisabled}\n                  className={styles.visibility}\n                >\n                  <Icon>{isVisible ? <Show /> : <Hide />}</Icon>\n                </Button>\n              )}\n              {level > 1 && (\n                <TreeLines level={level} isLastOfSet={isLastOfSet} />\n              )}\n              {hasChildItems ? (\n                <Button\n                  slot='chevron'\n                  variant='icon'\n                  size={size}\n                  className={styles.expansion}\n                >\n                  <Icon>{isExpanded ? <ChevronDown /> : <ChevronUp />}</Icon>\n                </Button>\n              ) : (\n                <div className={clsx(styles.spacing, styles[variant])} />\n              )}\n              <div className={clsx(styles.display, styles[variant])}>\n                {typeof children === 'function'\n                  ? children({\n                      ...renderProps,\n                      variant,\n                      isVisible,\n                      isViewable: isViewable,\n                      defaultChildren: null,\n                    })\n                  : children}\n              </div>\n              {shouldShowSelection && (\n                <Checkbox\n                  slot='selection'\n                  isSelected={isSelected}\n                  isDisabled={isDisabled}\n                />\n              )}\n              {allowsDragging && (\n                <Button\n                  slot='drag'\n                  variant='icon'\n                  size={size}\n                  isDisabled={isDisabled}\n                  className={styles.drag}\n                >\n                  <Icon>\n                    <DragVert />\n                  </Icon>\n                </Button>\n              )}\n            </div>\n          </IconProvider>\n        );\n      }}\n    </AriaTreeItemContent>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDA,SAAgB,gBAAgB,EAAE,YAAkC;CAClE,MAAM,EAAE,gBAAgB,SAAS,aAAa,uBAC5C,WAAW,YAAY;CACzB,MAAM,EAAE,WAAW,eAAe,WAAW,gBAAgB;CAC7D,MAAM,OAAO,YAAY,SAAS,WAAW;AAE7C,QACE,oBAACA,gCACG,gBAAgB;EAChB,MAAM,EACJ,IACA,gBACA,eACA,OACA,mBACA,eACA,OACA,YACA,YACA,eACE;EAEJ,MAAM,cAAc,EAClB,MAAM,WAAW,QAAQ,GAAG,EAAE,WAAW;EAE3C,MAAM,sBACJ,sBAAsB,YAAY,kBAAkB;EAEtD,MAAM,oBAAoB;GACxB,MAAM,OAAO,IAAI,IAAS,YAAY;AACtC,gBAAa,IAAI,GAAG,GAAG,KAAK,OAAO,GAAG,GAAG,KAAK,IAAI,GAAG;AACrD,wBAAqB,KAAK;;AAG5B,SACE,oBAAC;GAAmB;aAClB,qBAAC;IACC,WAAW,KAAK,SAAS,OAAO,SAAS,OAAO,SAAS;IACzD,oBAAkB;;KAEjB,kBACC,oBAACC;MACC,SAAQ;MACR,OAAM;MACA;MACN,SAAS;MACG;MACZ,WAAW,OAAO;gBAElB,oBAAC,kBAAM,YAAY,oBAAC,SAAO,GAAG,oBAAC,SAAO,GAAQ;OACvC;KAEV,QAAQ,KACP,oBAAC;MAAiB;MAAoB;OAAe;KAEtD,gBACC,oBAACA;MACC,MAAK;MACL,SAAQ;MACF;MACN,WAAW,OAAO;gBAElB,oBAAC,kBAAM,aAAa,oBAAC,gBAAc,GAAG,oBAAC,cAAY,GAAQ;OACpD,GAET,oBAAC,SAAI,WAAW,KAAK,OAAO,SAAS,OAAO,SAAS,GAAI;KAE3D,oBAAC;MAAI,WAAW,KAAK,OAAO,SAAS,OAAO,SAAS;gBAClD,OAAO,aAAa,aACjB,SAAS;OACP,GAAG;OACH;OACA;OACY;OACZ,iBAAiB;OAClB,CAAC,GACF;OACA;KACL,uBACC,oBAACC;MACC,MAAK;MACO;MACA;OACZ;KAEH,kBACC,oBAACD;MACC,MAAK;MACL,SAAQ;MACF;MACM;MACZ,WAAW,OAAO;gBAElB,oBAAC,kBACC,oBAAC,aAAW,GACP;OACA;;KAEP;IACO;KAGC"}
+{"version":3,"file":"item-content.js","names":["AriaTreeItemContent","Button","Checkbox"],"sources":["../../../src/components/tree/item-content.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport ChevronDown from '@accelint/icons/chevron-down';\nimport ChevronUp from '@accelint/icons/chevron-up';\nimport DragVert from '@accelint/icons/drag-vert';\nimport Hide from '@accelint/icons/hide';\nimport Show from '@accelint/icons/show';\nimport { useContext } from 'react';\nimport { TreeItemContent as AriaTreeItemContent } from 'react-aria-components';\nimport { Button } from '../button';\nimport { Checkbox } from '../checkbox';\nimport { Icon } from '../icon';\nimport { IconProvider } from '../icon/context';\nimport { TreeContext, TreeItemContext } from './context';\nimport { TreeLines } from './lines';\nimport styles from './styles.module.css';\nimport type { Key } from '@react-types/shared';\nimport type { TreeItemContentProps } from './types';\n\n/**\n * TreeItemContent - Renders the display content of a tree node\n *\n * @example\n * ```tsx\n * <TreeItem id=\"node\" textValue=\"Node\">\n *   <TreeItemContent>\n *     <TreeItemPrefixIcon><Folder /></TreeItemPrefixIcon>\n *     <TreeItemLabel>Folder Name</TreeItemLabel>\n *     <TreeItemDescription>Contains 5 items</TreeItemDescription>\n *   </TreeItemContent>\n * </TreeItem>\n * ```\n *\n * @param props - {@link TreeItemContentProps}\n * @param props.children - Content to render, or a render function receiving TreeItemContentRenderProps.\n * @returns The rendered TreeItemContent component.\n */\nexport function TreeItemContent({ children }: TreeItemContentProps) {\n  const { showVisibility, variant, visibleKeys, onVisibilityChange } =\n    useContext(TreeContext);\n  const { isVisible, isViewable, ancestors } = useContext(TreeItemContext);\n  const size = variant === 'cozy' ? 'medium' : 'small';\n\n  return (\n    <AriaTreeItemContent>\n      {(renderProps) => {\n        const {\n          id,\n          allowsDragging,\n          hasChildItems,\n          level,\n          selectionBehavior,\n          selectionMode,\n          state,\n          isDisabled,\n          isExpanded,\n          isSelected,\n        } = renderProps;\n\n        const item = state.collection.getItem(id);\n        const isLastOfSet = !item?.nextKey;\n\n        // Determine if ancestors are last of set (excludes current item)\n        const ancestorLastOfSet = ancestors.slice(0, -1).map((ancestorKey) => {\n          const ancestorItem = state.collection.getItem(ancestorKey);\n          return !ancestorItem?.nextKey;\n        });\n\n        const shouldShowSelection =\n          selectionBehavior === 'toggle' && selectionMode !== 'none';\n\n        const handlePress = () => {\n          const keys = new Set<Key>(visibleKeys);\n          visibleKeys?.has(id) ? keys.delete(id) : keys.add(id);\n          onVisibilityChange?.(keys);\n        };\n\n        return (\n          <IconProvider size={size}>\n            <div\n              className={clsx('group', styles.content, styles[variant])}\n              data-last-of-set={isLastOfSet}\n            >\n              {showVisibility && (\n                <Button\n                  variant='icon'\n                  color='mono-bold'\n                  size={size}\n                  onPress={handlePress}\n                  isDisabled={isDisabled}\n                  className={styles.visibility}\n                >\n                  <Icon>{isVisible ? <Show /> : <Hide />}</Icon>\n                </Button>\n              )}\n              {level > 1 && (\n                <TreeLines\n                  level={level}\n                  isLastOfSet={isLastOfSet}\n                  ancestorLastOfSet={ancestorLastOfSet}\n                />\n              )}\n              {hasChildItems && (\n                <Button\n                  slot='chevron'\n                  variant='icon'\n                  size={size}\n                  className={styles.expansion}\n                >\n                  <Icon>{isExpanded ? <ChevronDown /> : <ChevronUp />}</Icon>\n                </Button>\n              )}\n              <div className={clsx(styles.display, styles[variant])}>\n                {typeof children === 'function'\n                  ? children({\n                      ...renderProps,\n                      variant,\n                      isVisible,\n                      isViewable: isViewable,\n                      defaultChildren: null,\n                    })\n                  : children}\n              </div>\n              {shouldShowSelection && (\n                <Checkbox\n                  slot='selection'\n                  isSelected={isSelected}\n                  isDisabled={isDisabled}\n                />\n              )}\n              {allowsDragging && (\n                <Button\n                  slot='drag'\n                  variant='icon'\n                  size={size}\n                  isDisabled={isDisabled}\n                  className={styles.drag}\n                >\n                  <Icon>\n                    <DragVert />\n                  </Icon>\n                </Button>\n              )}\n            </div>\n          </IconProvider>\n        );\n      }}\n    </AriaTreeItemContent>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDA,SAAgB,gBAAgB,EAAE,YAAkC;CAClE,MAAM,EAAE,gBAAgB,SAAS,aAAa,uBAC5C,WAAW,YAAY;CACzB,MAAM,EAAE,WAAW,YAAY,cAAc,WAAW,gBAAgB;CACxE,MAAM,OAAO,YAAY,SAAS,WAAW;AAE7C,QACE,oBAACA,gCACG,gBAAgB;EAChB,MAAM,EACJ,IACA,gBACA,eACA,OACA,mBACA,eACA,OACA,YACA,YACA,eACE;EAGJ,MAAM,cAAc,CADP,MAAM,WAAW,QAAQ,GAAG,EACd;EAG3B,MAAM,oBAAoB,UAAU,MAAM,GAAG,GAAG,CAAC,KAAK,gBAAgB;AAEpE,UAAO,CADc,MAAM,WAAW,QAAQ,YAAY,EACpC;IACtB;EAEF,MAAM,sBACJ,sBAAsB,YAAY,kBAAkB;EAEtD,MAAM,oBAAoB;GACxB,MAAM,OAAO,IAAI,IAAS,YAAY;AACtC,gBAAa,IAAI,GAAG,GAAG,KAAK,OAAO,GAAG,GAAG,KAAK,IAAI,GAAG;AACrD,wBAAqB,KAAK;;AAG5B,SACE,oBAAC;GAAmB;aAClB,qBAAC;IACC,WAAW,KAAK,SAAS,OAAO,SAAS,OAAO,SAAS;IACzD,oBAAkB;;KAEjB,kBACC,oBAACC;MACC,SAAQ;MACR,OAAM;MACA;MACN,SAAS;MACG;MACZ,WAAW,OAAO;gBAElB,oBAAC,kBAAM,YAAY,oBAAC,SAAO,GAAG,oBAAC,SAAO,GAAQ;OACvC;KAEV,QAAQ,KACP,oBAAC;MACQ;MACM;MACM;OACnB;KAEH,iBACC,oBAACA;MACC,MAAK;MACL,SAAQ;MACF;MACN,WAAW,OAAO;gBAElB,oBAAC,kBAAM,aAAa,oBAAC,gBAAc,GAAG,oBAAC,cAAY,GAAQ;OACpD;KAEX,oBAAC;MAAI,WAAW,KAAK,OAAO,SAAS,OAAO,SAAS;gBAClD,OAAO,aAAa,aACjB,SAAS;OACP,GAAG;OACH;OACA;OACY;OACZ,iBAAiB;OAClB,CAAC,GACF;OACA;KACL,uBACC,oBAACC;MACC,MAAK;MACO;MACA;OACZ;KAEH,kBACC,oBAACD;MACC,MAAK;MACL,SAAQ;MACF;MACM;MACZ,WAAW,OAAO;gBAElB,oBAAC,kBACC,oBAAC,aAAW,GACP;OACA;;KAEP;IACO;KAGC"}

package/dist/components/tree/item-description.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { TextProps } from "react-aria-components";
-import * as react_jsx_runtime193 from "react/jsx-runtime";
+import * as react_jsx_runtime200 from "react/jsx-runtime";
 
 //#region src/components/tree/item-description.d.ts
 /**
@@ -33,7 +33,7 @@ import * as react_jsx_runtime193 from "react/jsx-runtime";
 declare function TreeItemDescription({
   children,
   className
-}: TextProps): react_jsx_runtime193.JSX.Element | null;
+}: TextProps): react_jsx_runtime200.JSX.Element | null;
 //#endregion
 export { TreeItemDescription };
 //# sourceMappingURL=item-description.d.ts.map

package/dist/components/tree/item-label.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { TextProps } from "react-aria-components";
-import * as react_jsx_runtime194 from "react/jsx-runtime";
+import * as react_jsx_runtime197 from "react/jsx-runtime";
 
 //#region src/components/tree/item-label.d.ts
 /**
@@ -33,7 +33,7 @@ import * as react_jsx_runtime194 from "react/jsx-runtime";
 declare function TreeItemLabel({
   children,
   className
-}: TextProps): react_jsx_runtime194.JSX.Element;
+}: TextProps): react_jsx_runtime197.JSX.Element;
 //#endregion
 export { TreeItemLabel };
 //# sourceMappingURL=item-label.d.ts.map

package/dist/components/tree/item-prefix-icon.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { IconProps } from "../icon/types.js";
-import * as react_jsx_runtime204 from "react/jsx-runtime";
+import * as react_jsx_runtime195 from "react/jsx-runtime";
 
 //#region src/components/tree/item-prefix-icon.d.ts
 /**
@@ -33,7 +33,7 @@ import * as react_jsx_runtime204 from "react/jsx-runtime";
 declare function TreeItemPrefixIcon({
   children,
   className
-}: IconProps): react_jsx_runtime204.JSX.Element;
+}: IconProps): react_jsx_runtime195.JSX.Element;
 //#endregion
 export { TreeItemPrefixIcon };
 //# sourceMappingURL=item-prefix-icon.d.ts.map

package/dist/components/tree/item.d.ts

@@ -12,7 +12,7 @@
 
 import { TreeItemProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime195 from "react/jsx-runtime";
+import * as react_jsx_runtime201 from "react/jsx-runtime";
 
 //#region src/components/tree/item.d.ts
 
@@ -44,7 +44,7 @@ declare function TreeItem({
   className,
   id,
   ...rest
-}: TreeItemProps): react_jsx_runtime195.JSX.Element;
+}: TreeItemProps): react_jsx_runtime201.JSX.Element;
 //#endregion
 export { TreeItem };
 //# sourceMappingURL=item.d.ts.map

package/dist/components/tree/lines.d.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import * as react51 from "react";
+import * as react52 from "react";
 
 //#region src/components/tree/lines.d.ts
 /**
@@ -19,11 +19,13 @@ import * as react51 from "react";
  * @param props - Component props.
  * @param props.level - The nesting level of the tree item.
  * @param props.isLastOfSet - Whether this item is the last in its sibling group.
+ * @param props.ancestorLastOfSet - Array tracking which ancestors are last of set at each level.
  * @returns An array of Line components representing the tree structure.
  */
-declare const TreeLines: react51.NamedExoticComponent<{
+declare const TreeLines: react52.NamedExoticComponent<{
   level: number;
   isLastOfSet: boolean;
+  ancestorLastOfSet: boolean[];
 }>;
 //#endregion
 export { TreeLines };

package/dist/components/tree/lines.js

@@ -25,16 +25,20 @@ import styles from "./styles.module.css";
 * @param props - Component props.
 * @param props.level - The nesting level of the tree item.
 * @param props.isLastOfSet - Whether this item is the last in its sibling group.
+* @param props.ancestorLastOfSet - Array tracking which ancestors are last of set at each level.
 * @returns An array of Line components representing the tree structure.
 */
-const TreeLines = memo(function TreeLines$1({ level, isLastOfSet }) {
+const TreeLines = memo(function TreeLines$1({ level, isLastOfSet, ancestorLastOfSet }) {
 	const { showRuleLines, variant } = useContext(TreeContext);
 	return Array.from({ length: level }).map((_, i) => {
 		const type = i === level - 1 ? "branch" : "vert";
+		const line = isLastOfSet && i === level - 1 ? "last" : type;
+		const size = variant === "crammed" ? "medium" : "large";
+		const shouldHideLine = ancestorLastOfSet[i] ?? false;
 		return /* @__PURE__ */ jsx(Lines, {
-			variant: isLastOfSet && i > 0 ? "last" : type,
-			size: variant === "crammed" ? "medium" : "large",
-			isVisible: showRuleLines,
+			variant: line,
+			size,
+			isVisible: showRuleLines && !shouldHideLine,
 			className: clsx(styles.spacing, styles[variant])
 		}, i);
 	});

package/dist/components/tree/lines.js.map

@@ -1 +1 @@
-{"version":3,"file":"lines.js","names":["TreeLines"],"sources":["../../../src/components/tree/lines.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { memo, useContext } from 'react';\nimport { Lines } from '../lines';\nimport { TreeContext } from './context';\nimport styles from './styles.module.css';\n\n/**\n * TreeLines - Renders connecting lines for tree hierarchy visualization.\n *\n * @param props - Component props.\n * @param props.level - The nesting level of the tree item.\n * @param props.isLastOfSet - Whether this item is the last in its sibling group.\n * @returns An array of Line components representing the tree structure.\n */\nexport const TreeLines = memo(function TreeLines({\n  level,\n  isLastOfSet,\n}: {\n  level: number;\n  isLastOfSet: boolean;\n}) {\n  const { showRuleLines, variant } = useContext(TreeContext);\n\n  return Array.from({ length: level }).map((_, i) => {\n    const type = i === level - 1 ? 'branch' : 'vert';\n    const line = isLastOfSet && i > 0 ? 'last' : type;\n    const size = variant === 'crammed' ? 'medium' : 'large';\n\n    return (\n      <Lines\n        // biome-ignore lint/suspicious/noArrayIndexKey: index should be the key, only count matters\n        key={i}\n        variant={line}\n        size={size}\n        isVisible={showRuleLines}\n        className={clsx(styles.spacing, styles[variant])}\n      />\n    );\n  });\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAa,YAAY,KAAK,SAASA,YAAU,EAC/C,OACA,eAIC;CACD,MAAM,EAAE,eAAe,YAAY,WAAW,YAAY;AAE1D,QAAO,MAAM,KAAK,EAAE,QAAQ,OAAO,CAAC,CAAC,KAAK,GAAG,MAAM;EACjD,MAAM,OAAO,MAAM,QAAQ,IAAI,WAAW;AAI1C,SACE,oBAAC;GAGC,SAPS,eAAe,IAAI,IAAI,SAAS;GAQzC,MAPS,YAAY,YAAY,WAAW;GAQ5C,WAAW;GACX,WAAW,KAAK,OAAO,SAAS,OAAO,SAAS;KAJ3C,EAKL;GAEJ;EACF"}
+{"version":3,"file":"lines.js","names":["TreeLines"],"sources":["../../../src/components/tree/lines.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { memo, useContext } from 'react';\nimport { Lines } from '../lines';\nimport { TreeContext } from './context';\nimport styles from './styles.module.css';\n\n/**\n * TreeLines - Renders connecting lines for tree hierarchy visualization.\n *\n * @param props - Component props.\n * @param props.level - The nesting level of the tree item.\n * @param props.isLastOfSet - Whether this item is the last in its sibling group.\n * @param props.ancestorLastOfSet - Array tracking which ancestors are last of set at each level.\n * @returns An array of Line components representing the tree structure.\n */\nexport const TreeLines = memo(function TreeLines({\n  level,\n  isLastOfSet,\n  ancestorLastOfSet,\n}: {\n  level: number;\n  isLastOfSet: boolean;\n  ancestorLastOfSet: boolean[];\n}) {\n  const { showRuleLines, variant } = useContext(TreeContext);\n\n  return Array.from({ length: level }).map((_, i) => {\n    const type = i === level - 1 ? 'branch' : 'vert';\n    const line = isLastOfSet && i === level - 1 ? 'last' : type;\n    const size = variant === 'crammed' ? 'medium' : 'large';\n\n    // Hide line at position i if the ancestor at that level is last of set\n    const shouldHideLine = ancestorLastOfSet[i] ?? false;\n\n    return (\n      <Lines\n        // biome-ignore lint/suspicious/noArrayIndexKey: index should be the key, only count matters\n        key={i}\n        variant={line}\n        size={size}\n        isVisible={showRuleLines && !shouldHideLine}\n        className={clsx(styles.spacing, styles[variant])}\n      />\n    );\n  });\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,YAAY,KAAK,SAASA,YAAU,EAC/C,OACA,aACA,qBAKC;CACD,MAAM,EAAE,eAAe,YAAY,WAAW,YAAY;AAE1D,QAAO,MAAM,KAAK,EAAE,QAAQ,OAAO,CAAC,CAAC,KAAK,GAAG,MAAM;EACjD,MAAM,OAAO,MAAM,QAAQ,IAAI,WAAW;EAC1C,MAAM,OAAO,eAAe,MAAM,QAAQ,IAAI,SAAS;EACvD,MAAM,OAAO,YAAY,YAAY,WAAW;EAGhD,MAAM,iBAAiB,kBAAkB,MAAM;AAE/C,SACE,oBAAC;GAGC,SAAS;GACH;GACN,WAAW,iBAAiB,CAAC;GAC7B,WAAW,KAAK,OAAO,SAAS,OAAO,SAAS;KAJ3C,EAKL;GAEJ;EACF"}

package/dist/components/tree/styles.module.css

@@ -29,7 +29,7 @@
     }
 
     @variant hover {
-      @apply bg-interactive-muted-hover;
+      @apply bg-interactive-muted-hover/50;
     }
 
     @variant focus-visible {
@@ -41,12 +41,12 @@
     }
 
     @variant drop-target {
-      @apply outline-accent-primary-bold border;
+      @apply outline-accent-primary-bold outline;
       background-color: --alpha(var(--bg-accent-primary-muted) / 20%);
     }
 
     @variant disabled {
-      @apply cursor-not-allowed border-none;
+      @apply fg-disabled cursor-not-allowed border-none;
 
       @variant hover {
         @apply bg-transparent;
@@ -55,6 +55,10 @@
       @variant data-[drop-target=true] {
         @apply bg-transparent;
       }
+
+      .description {
+        @apply fg-disabled;
+      }
     }
 
     &.cozy {
@@ -184,4 +188,20 @@
   .dropIndicator {
     @apply h-xxs bg-(--outline-accent-primary-hover);
   }
+
+  .dropIndicatorBetween {
+    @apply h-xs my-xs rounded-full bg-(--outline-accent-primary-hover);
+  }
+}
+
+@layer components.l2 {
+  .visibility {
+    @variant group-not-viewable/tree-item {
+      @apply fg-primary-muted;
+
+      @variant disabled {
+        @apply fg-disabled;
+      }
+    }
+  }
 }

package/dist/components/video/index.d.ts

@@ -12,7 +12,7 @@
 
 import { VideoProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime199 from "react/jsx-runtime";
+import * as react_jsx_runtime203 from "react/jsx-runtime";
 
 //#region src/components/video/index.d.ts
 
@@ -91,7 +91,7 @@ declare function Video({
   noMutedPref,
   lang,
   ...rest
-}: VideoProps): react_jsx_runtime199.JSX.Element;
+}: VideoProps): react_jsx_runtime203.JSX.Element;
 //#endregion
 export { Video };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/view-stack/context.d.ts

@@ -12,12 +12,12 @@
 
 import { ViewStackContextValue } from "./types.js";
 import "client-only";
-import * as react52 from "react";
+import * as react44 from "react";
 import { UniqueId } from "@accelint/core";
 
 //#region src/components/view-stack/context.d.ts
 /** Context for sharing state across ViewStack components */
-declare const ViewStackContext: react52.Context<ViewStackContextValue>;
+declare const ViewStackContext: react44.Context<ViewStackContextValue>;
 /** Event handlers for ViewStack events */
 declare const ViewStackEventHandlers: {
   readonly back: (stack: UniqueId) => void;

package/dist/components/view-stack/index.d.ts

@@ -12,7 +12,7 @@
 
 import { ViewStackProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime196 from "react/jsx-runtime";
+import * as react_jsx_runtime186 from "react/jsx-runtime";
 
 //#region src/components/view-stack/index.d.ts
 
@@ -47,7 +47,7 @@ declare function ViewStack({
   children,
   defaultView,
   onChange
-}: ViewStackProps): react_jsx_runtime196.JSX.Element;
+}: ViewStackProps): react_jsx_runtime186.JSX.Element;
 //#endregion
 export { ViewStack };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/view-stack/index.js

@@ -18,8 +18,8 @@ import { ViewStackContext } from "./context.js";
 import "client-only";
 import { useCallback, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { useOn } from "@accelint/bus/react";
 import { isUUID } from "@accelint/core";
+import { useOn } from "@accelint/bus/react";
 
 //#region src/components/view-stack/index.tsx
 /**

package/dist/components/view-stack/trigger.d.ts

@@ -12,7 +12,7 @@
 
 import { ViewStackTriggerProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime197 from "react/jsx-runtime";
+import * as react_jsx_runtime187 from "react/jsx-runtime";
 
 //#region src/components/view-stack/trigger.d.ts
 
@@ -45,7 +45,7 @@ import * as react_jsx_runtime197 from "react/jsx-runtime";
 declare function ViewStackTrigger({
   children,
   for: types
-}: ViewStackTriggerProps): react_jsx_runtime197.JSX.Element;
+}: ViewStackTriggerProps): react_jsx_runtime187.JSX.Element;
 //#endregion
 export { ViewStackTrigger };
 //# sourceMappingURL=trigger.d.ts.map

package/dist/components/view-stack/types.d.ts

@@ -13,8 +13,8 @@
 import { ViewStackEventTypes } from "./events.js";
 import { ComponentProps, PropsWithChildren, RefAttributes } from "react";
 import { Pressable } from "react-aria-components";
-import { Payload } from "@accelint/bus";
 import { UniqueId } from "@accelint/core";
+import { Payload } from "@accelint/bus";
 
 //#region src/components/view-stack/types.d.ts
 /**

package/dist/components/view-stack/view.d.ts

@@ -12,7 +12,7 @@
 
 import { ViewStackViewProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime198 from "react/jsx-runtime";
+import * as react_jsx_runtime188 from "react/jsx-runtime";
 
 //#region src/components/view-stack/view.d.ts
 
@@ -43,7 +43,7 @@ import * as react_jsx_runtime198 from "react/jsx-runtime";
 declare function ViewStackView({
   id,
   children
-}: ViewStackViewProps): react_jsx_runtime198.JSX.Element | null;
+}: ViewStackViewProps): react_jsx_runtime188.JSX.Element | null;
 //#endregion
 export { ViewStackView };
 //# sourceMappingURL=view.d.ts.map

package/dist/hooks/use-tree/state/index.js

@@ -37,10 +37,6 @@ function useTreeState({ items }) {
 				"text/plain": JSON.stringify(node)
 			};
 		}),
-		onReorder: (e) => {
-			if (e.target.dropPosition === "before") setNodes(actions.moveBefore(e.target.key, e.keys));
-			else setNodes(actions.moveAfter(e.target.key, e.keys));
-		},
 		onInsert: ({ items: items$1, target }) => {
 			(async () => {
 				const processedItems = await processDroppedItems(items$1, dragAndDropConfig.acceptedDragTypes ?? []);
@@ -49,22 +45,19 @@ function useTreeState({ items }) {
 				else if (target.dropPosition === "after") setNodes(actions.insertAfter(target.key, processedItems));
 			})();
 		},
-		onItemDrop: ({ target, items: items$1 }) => {
-			(async () => {
-				const targetNode = actions.getNode(target.key);
-				const [item] = items$1;
-				if (target.dropPosition === "on" && targetNode && item && item.kind !== "directory") {
-					const key = await item.getText("key");
-					if (key) setNodes(actions.moveInto(target.key, new Set([key])));
-				}
-			})();
-		},
 		onRootDrop: ({ items: items$1 }) => {
 			(async () => {
 				const processedItems = await processDroppedItems(items$1, dragAndDropConfig.acceptedDragTypes ?? []);
 				setNodes(actions.remove(new Set(processedItems.map((item) => item.key))));
 				setNodes(actions.insertAfter(null, processedItems));
 			})();
+		},
+		onMove: (e) => {
+			if (e.target.dropPosition === "before") setNodes(actions.moveBefore(e.target.key, e.keys));
+			else if (e.target.dropPosition === "after") setNodes(actions.moveAfter(e.target.key, e.keys));
+			else if (e.target.dropPosition === "on") {
+				if (actions.getNode(e.target.key)) setNodes(actions.moveInto(e.target.key, e.keys));
+			}
 		}
 	};
 	function collapseAll() {

package/dist/hooks/use-tree/state/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["dragAndDropConfig: DragAndDropConfig","items"],"sources":["../../../../src/hooks/use-tree/state/index.ts"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { useState } from 'react';\nimport { useTreeActions } from '../actions';\nimport { processDroppedItems } from './utils';\nimport type {\n  DragItem,\n  DroppableCollectionInsertDropEvent,\n  DroppableCollectionOnItemDropEvent,\n  DroppableCollectionReorderEvent,\n  DroppableCollectionRootDropEvent,\n  Key,\n  Selection,\n} from '@react-types/shared';\nimport type {\n  DragAndDropConfig,\n  UseTreeState,\n  UseTreeStateOptions,\n} from '../types';\n\n/**\n * Stateful tree manager with drag-and-drop, selection, expansion, and visibility controls\n *\n * @param options - {@link UseTreeStateOptions}\n * @param options.items - Initial tree node items.\n * @returns {@link UseTreeState} Tree state, actions, and drag-and-drop configuration.\n */\nexport function useTreeState<T>({\n  items,\n}: UseTreeStateOptions<T>): UseTreeState<T> {\n  const [nodes, setNodes] = useState(items);\n  const actions = useTreeActions<T>({ nodes });\n\n  const dragAndDropConfig: DragAndDropConfig = {\n    getItems: (keys: Set<Key>): DragItem[] =>\n      [...keys].map((key) => {\n        const node = actions.getNode(key);\n\n        return {\n          key: `${key}`,\n          'text/plain': JSON.stringify(node),\n        };\n      }),\n    onReorder: (e: DroppableCollectionReorderEvent) => {\n      if (e.target.dropPosition === 'before') {\n        setNodes(actions.moveBefore(e.target.key, e.keys));\n      } else {\n        setNodes(actions.moveAfter(e.target.key, e.keys));\n      }\n    },\n    onInsert: ({ items, target }: DroppableCollectionInsertDropEvent) => {\n      (async () => {\n        const processedItems = await processDroppedItems(\n          items,\n          dragAndDropConfig.acceptedDragTypes ?? [],\n        );\n\n        setNodes(\n          actions.remove(new Set(processedItems.map((item) => item.id))),\n        );\n\n        if (target.dropPosition === 'before') {\n          setNodes(actions.insertBefore(target.key, processedItems));\n        } else if (target.dropPosition === 'after') {\n          setNodes(actions.insertAfter(target.key, processedItems));\n        }\n      })();\n    },\n    onItemDrop: ({ target, items }: DroppableCollectionOnItemDropEvent) => {\n      (async () => {\n        const targetNode = actions.getNode(target.key);\n        const [item] = items;\n\n        if (\n          target.dropPosition === 'on' &&\n          targetNode &&\n          item &&\n          item.kind !== 'directory'\n        ) {\n          const key = await item.getText('key');\n\n          if (key) {\n            setNodes(actions.moveInto(target.key, new Set([key])));\n          }\n        }\n      })();\n    },\n    onRootDrop: ({ items }: DroppableCollectionRootDropEvent) => {\n      (async () => {\n        const processedItems = await processDroppedItems(\n          items,\n          dragAndDropConfig.acceptedDragTypes ?? [],\n        );\n\n        setNodes(\n          actions.remove(new Set(processedItems.map((item) => item.key))),\n        );\n        setNodes(actions.insertAfter(null, processedItems));\n      })();\n    },\n  };\n\n  function collapseAll() {\n    setNodes(actions.collapseAll());\n  }\n\n  function expandAll() {\n    setNodes(actions.expandAll());\n  }\n\n  function onExpandedChange(keys: Set<Key>) {\n    setNodes(actions.onExpandedChange(keys));\n  }\n\n  function selectAll() {\n    setNodes(actions.selectAll());\n  }\n\n  function unselectAll() {\n    setNodes(actions.unselectAll());\n  }\n\n  function onSelectionChange(keys: Selection) {\n    if (keys === 'all') {\n      return selectAll();\n    }\n\n    setNodes(actions.onSelectionChange(keys));\n  }\n\n  function hideAll() {\n    setNodes(actions.hideAll());\n  }\n\n  function revealAll() {\n    setNodes(actions.revealAll());\n  }\n\n  function onVisibilityChange(keys: Set<Key>) {\n    setNodes(actions.onVisibilityChange(keys));\n  }\n\n  return {\n    nodes,\n    actions: {\n      // Expansion\n      collapseAll,\n      expandAll,\n      onExpandedChange,\n\n      // Selection\n      selectAll,\n      unselectAll,\n      onSelectionChange,\n\n      // Visibility\n      hideAll,\n      revealAll,\n      onVisibilityChange,\n    },\n    dragAndDropConfig,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,SAAgB,aAAgB,EAC9B,SAC0C;CAC1C,MAAM,CAAC,OAAO,YAAY,SAAS,MAAM;CACzC,MAAM,UAAU,eAAkB,EAAE,OAAO,CAAC;CAE5C,MAAMA,oBAAuC;EAC3C,WAAW,SACT,CAAC,GAAG,KAAK,CAAC,KAAK,QAAQ;GACrB,MAAM,OAAO,QAAQ,QAAQ,IAAI;AAEjC,UAAO;IACL,KAAK,GAAG;IACR,cAAc,KAAK,UAAU,KAAK;IACnC;IACD;EACJ,YAAY,MAAuC;AACjD,OAAI,EAAE,OAAO,iBAAiB,SAC5B,UAAS,QAAQ,WAAW,EAAE,OAAO,KAAK,EAAE,KAAK,CAAC;OAElD,UAAS,QAAQ,UAAU,EAAE,OAAO,KAAK,EAAE,KAAK,CAAC;;EAGrD,WAAW,EAAE,gBAAO,aAAiD;AACnE,IAAC,YAAY;IACX,MAAM,iBAAiB,MAAM,oBAC3BC,SACA,kBAAkB,qBAAqB,EAAE,CAC1C;AAED,aACE,QAAQ,OAAO,IAAI,IAAI,eAAe,KAAK,SAAS,KAAK,GAAG,CAAC,CAAC,CAC/D;AAED,QAAI,OAAO,iBAAiB,SAC1B,UAAS,QAAQ,aAAa,OAAO,KAAK,eAAe,CAAC;aACjD,OAAO,iBAAiB,QACjC,UAAS,QAAQ,YAAY,OAAO,KAAK,eAAe,CAAC;OAEzD;;EAEN,aAAa,EAAE,QAAQ,qBAAgD;AACrE,IAAC,YAAY;IACX,MAAM,aAAa,QAAQ,QAAQ,OAAO,IAAI;IAC9C,MAAM,CAAC,QAAQA;AAEf,QACE,OAAO,iBAAiB,QACxB,cACA,QACA,KAAK,SAAS,aACd;KACA,MAAM,MAAM,MAAM,KAAK,QAAQ,MAAM;AAErC,SAAI,IACF,UAAS,QAAQ,SAAS,OAAO,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;;OAGxD;;EAEN,aAAa,EAAE,qBAA8C;AAC3D,IAAC,YAAY;IACX,MAAM,iBAAiB,MAAM,oBAC3BA,SACA,kBAAkB,qBAAqB,EAAE,CAC1C;AAED,aACE,QAAQ,OAAO,IAAI,IAAI,eAAe,KAAK,SAAS,KAAK,IAAI,CAAC,CAAC,CAChE;AACD,aAAS,QAAQ,YAAY,MAAM,eAAe,CAAC;OACjD;;EAEP;CAED,SAAS,cAAc;AACrB,WAAS,QAAQ,aAAa,CAAC;;CAGjC,SAAS,YAAY;AACnB,WAAS,QAAQ,WAAW,CAAC;;CAG/B,SAAS,iBAAiB,MAAgB;AACxC,WAAS,QAAQ,iBAAiB,KAAK,CAAC;;CAG1C,SAAS,YAAY;AACnB,WAAS,QAAQ,WAAW,CAAC;;CAG/B,SAAS,cAAc;AACrB,WAAS,QAAQ,aAAa,CAAC;;CAGjC,SAAS,kBAAkB,MAAiB;AAC1C,MAAI,SAAS,MACX,QAAO,WAAW;AAGpB,WAAS,QAAQ,kBAAkB,KAAK,CAAC;;CAG3C,SAAS,UAAU;AACjB,WAAS,QAAQ,SAAS,CAAC;;CAG7B,SAAS,YAAY;AACnB,WAAS,QAAQ,WAAW,CAAC;;CAG/B,SAAS,mBAAmB,MAAgB;AAC1C,WAAS,QAAQ,mBAAmB,KAAK,CAAC;;AAG5C,QAAO;EACL;EACA,SAAS;GAEP;GACA;GACA;GAGA;GACA;GACA;GAGA;GACA;GACA;GACD;EACD;EACD"}
+{"version":3,"file":"index.js","names":["dragAndDropConfig: DragAndDropConfig","items"],"sources":["../../../../src/hooks/use-tree/state/index.ts"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { useState } from 'react';\nimport { useTreeActions } from '../actions';\nimport { processDroppedItems } from './utils';\nimport type {\n  DragItem,\n  DroppableCollectionInsertDropEvent,\n  DroppableCollectionRootDropEvent,\n  Key,\n  Selection,\n} from '@react-types/shared';\nimport type {\n  DragAndDropConfig,\n  UseTreeState,\n  UseTreeStateOptions,\n} from '../types';\n\n/**\n * Stateful tree manager with drag-and-drop, selection, expansion, and visibility controls\n *\n * @param options - {@link UseTreeStateOptions}\n * @param options.items - Initial tree node items.\n * @returns {@link UseTreeState} Tree state, actions, and drag-and-drop configuration.\n */\nexport function useTreeState<T>({\n  items,\n}: UseTreeStateOptions<T>): UseTreeState<T> {\n  const [nodes, setNodes] = useState(items);\n  const actions = useTreeActions<T>({ nodes });\n\n  const dragAndDropConfig: DragAndDropConfig = {\n    getItems: (keys: Set<Key>): DragItem[] =>\n      [...keys].map((key) => {\n        const node = actions.getNode(key);\n\n        return {\n          key: `${key}`,\n          'text/plain': JSON.stringify(node),\n        };\n      }),\n    onInsert: ({ items, target }: DroppableCollectionInsertDropEvent) => {\n      (async () => {\n        const processedItems = await processDroppedItems(\n          items,\n          dragAndDropConfig.acceptedDragTypes ?? [],\n        );\n\n        setNodes(\n          actions.remove(new Set(processedItems.map((item) => item.id))),\n        );\n\n        if (target.dropPosition === 'before') {\n          setNodes(actions.insertBefore(target.key, processedItems));\n        } else if (target.dropPosition === 'after') {\n          setNodes(actions.insertAfter(target.key, processedItems));\n        }\n      })();\n    },\n    onRootDrop: ({ items }: DroppableCollectionRootDropEvent) => {\n      (async () => {\n        const processedItems = await processDroppedItems(\n          items,\n          dragAndDropConfig.acceptedDragTypes ?? [],\n        );\n\n        setNodes(\n          actions.remove(new Set(processedItems.map((item) => item.key))),\n        );\n        setNodes(actions.insertAfter(null, processedItems));\n      })();\n    },\n    onMove: (e) => {\n      if (e.target.dropPosition === 'before') {\n        setNodes(actions.moveBefore(e.target.key, e.keys));\n      } else if (e.target.dropPosition === 'after') {\n        setNodes(actions.moveAfter(e.target.key, e.keys));\n      } else if (e.target.dropPosition === 'on') {\n        const targetNode = actions.getNode(e.target.key);\n        if (targetNode) {\n          setNodes(actions.moveInto(e.target.key, e.keys));\n        }\n      }\n    },\n  };\n\n  function collapseAll() {\n    setNodes(actions.collapseAll());\n  }\n\n  function expandAll() {\n    setNodes(actions.expandAll());\n  }\n\n  function onExpandedChange(keys: Set<Key>) {\n    setNodes(actions.onExpandedChange(keys));\n  }\n\n  function selectAll() {\n    setNodes(actions.selectAll());\n  }\n\n  function unselectAll() {\n    setNodes(actions.unselectAll());\n  }\n\n  function onSelectionChange(keys: Selection) {\n    if (keys === 'all') {\n      return selectAll();\n    }\n\n    setNodes(actions.onSelectionChange(keys));\n  }\n\n  function hideAll() {\n    setNodes(actions.hideAll());\n  }\n\n  function revealAll() {\n    setNodes(actions.revealAll());\n  }\n\n  function onVisibilityChange(keys: Set<Key>) {\n    setNodes(actions.onVisibilityChange(keys));\n  }\n\n  return {\n    nodes,\n    actions: {\n      // Expansion\n      collapseAll,\n      expandAll,\n      onExpandedChange,\n\n      // Selection\n      selectAll,\n      unselectAll,\n      onSelectionChange,\n\n      // Visibility\n      hideAll,\n      revealAll,\n      onVisibilityChange,\n    },\n    dragAndDropConfig,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,SAAgB,aAAgB,EAC9B,SAC0C;CAC1C,MAAM,CAAC,OAAO,YAAY,SAAS,MAAM;CACzC,MAAM,UAAU,eAAkB,EAAE,OAAO,CAAC;CAE5C,MAAMA,oBAAuC;EAC3C,WAAW,SACT,CAAC,GAAG,KAAK,CAAC,KAAK,QAAQ;GACrB,MAAM,OAAO,QAAQ,QAAQ,IAAI;AAEjC,UAAO;IACL,KAAK,GAAG;IACR,cAAc,KAAK,UAAU,KAAK;IACnC;IACD;EACJ,WAAW,EAAE,gBAAO,aAAiD;AACnE,IAAC,YAAY;IACX,MAAM,iBAAiB,MAAM,oBAC3BC,SACA,kBAAkB,qBAAqB,EAAE,CAC1C;AAED,aACE,QAAQ,OAAO,IAAI,IAAI,eAAe,KAAK,SAAS,KAAK,GAAG,CAAC,CAAC,CAC/D;AAED,QAAI,OAAO,iBAAiB,SAC1B,UAAS,QAAQ,aAAa,OAAO,KAAK,eAAe,CAAC;aACjD,OAAO,iBAAiB,QACjC,UAAS,QAAQ,YAAY,OAAO,KAAK,eAAe,CAAC;OAEzD;;EAEN,aAAa,EAAE,qBAA8C;AAC3D,IAAC,YAAY;IACX,MAAM,iBAAiB,MAAM,oBAC3BA,SACA,kBAAkB,qBAAqB,EAAE,CAC1C;AAED,aACE,QAAQ,OAAO,IAAI,IAAI,eAAe,KAAK,SAAS,KAAK,IAAI,CAAC,CAAC,CAChE;AACD,aAAS,QAAQ,YAAY,MAAM,eAAe,CAAC;OACjD;;EAEN,SAAS,MAAM;AACb,OAAI,EAAE,OAAO,iBAAiB,SAC5B,UAAS,QAAQ,WAAW,EAAE,OAAO,KAAK,EAAE,KAAK,CAAC;YACzC,EAAE,OAAO,iBAAiB,QACnC,UAAS,QAAQ,UAAU,EAAE,OAAO,KAAK,EAAE,KAAK,CAAC;YACxC,EAAE,OAAO,iBAAiB,MAEnC;QADmB,QAAQ,QAAQ,EAAE,OAAO,IAAI,CAE9C,UAAS,QAAQ,SAAS,EAAE,OAAO,KAAK,EAAE,KAAK,CAAC;;;EAIvD;CAED,SAAS,cAAc;AACrB,WAAS,QAAQ,aAAa,CAAC;;CAGjC,SAAS,YAAY;AACnB,WAAS,QAAQ,WAAW,CAAC;;CAG/B,SAAS,iBAAiB,MAAgB;AACxC,WAAS,QAAQ,iBAAiB,KAAK,CAAC;;CAG1C,SAAS,YAAY;AACnB,WAAS,QAAQ,WAAW,CAAC;;CAG/B,SAAS,cAAc;AACrB,WAAS,QAAQ,aAAa,CAAC;;CAGjC,SAAS,kBAAkB,MAAiB;AAC1C,MAAI,SAAS,MACX,QAAO,WAAW;AAGpB,WAAS,QAAQ,kBAAkB,KAAK,CAAC;;CAG3C,SAAS,UAAU;AACjB,WAAS,QAAQ,SAAS,CAAC;;CAG7B,SAAS,YAAY;AACnB,WAAS,QAAQ,WAAW,CAAC;;CAG/B,SAAS,mBAAmB,MAAgB;AAC1C,WAAS,QAAQ,mBAAmB,KAAK,CAAC;;AAG5C,QAAO;EACL;EACA,SAAS;GAEP;GACA;GACA;GAGA;GACA;GACA;GAGA;GACA;GACA;GACD;EACD;EACD"}

package/dist/index.js

@@ -83,6 +83,9 @@ import { PopoverTitle } from "./components/popover/title.js";
 import { RadioContext, RadioGroupContext } from "./components/radio/context.js";
 import { Radio } from "./components/radio/index.js";
 import { RadioGroup } from "./components/radio/group.js";
+import { Tooltip } from "./components/tooltip/index.js";
+import { TooltipContext } from "./components/tooltip/context.js";
+import { TooltipTrigger } from "./components/tooltip/trigger.js";
 import { CoordinateSegment } from "./components/coordinate-field/segment.js";
 import { CoordinateField } from "./components/coordinate-field/index.js";
 import { DateField } from "./components/date-field/index.js";
@@ -109,9 +112,6 @@ import { ViewStack } from "./components/view-stack/index.js";
 import { Drawer } from "./components/drawer/index.js";
 import { DrawerLayoutMain } from "./components/drawer/layout-main.js";
 import { DrawerLayout } from "./components/drawer/layout.js";
-import { Tooltip } from "./components/tooltip/index.js";
-import { TooltipContext } from "./components/tooltip/context.js";
-import { TooltipTrigger } from "./components/tooltip/trigger.js";
 import { DrawerMenuItem } from "./components/drawer/menu-item.js";
 import { DrawerMenu } from "./components/drawer/menu.js";
 import { DrawerPanel } from "./components/drawer/panel.js";