@accelint/design-toolkit 9.9.0 → 9.9.1

package/dist/components/text-area-field/context.d.ts

@@ -13,13 +13,13 @@
 import { ProviderProps } from "../../lib/types.js";
 import { TextAreaFieldProps } from "./types.js";
 import "client-only";
-import * as react52 from "react";
+import * as react47 from "react";
 import { ContextValue } from "react-aria-components";
-import * as react_jsx_runtime202 from "react/jsx-runtime";
+import * as react_jsx_runtime192 from "react/jsx-runtime";
 
 //#region src/components/text-area-field/context.d.ts
 /** Context for sharing props across TextAreaField components */
-declare const TextAreaFieldContext: react52.Context<ContextValue<TextAreaFieldProps, HTMLDivElement>>;
+declare const TextAreaFieldContext: react47.Context<ContextValue<TextAreaFieldProps, HTMLDivElement>>;
 /**
  * Sets default props for all TextAreaField components within.
  *
@@ -42,7 +42,7 @@ declare const TextAreaFieldContext: react52.Context<ContextValue<TextAreaFieldPr
 declare function TextAreaFieldProvider({
   children,
   ...props
-}: ProviderProps<TextAreaFieldProps>): react_jsx_runtime202.JSX.Element;
+}: ProviderProps<TextAreaFieldProps>): react_jsx_runtime192.JSX.Element;
 //#endregion
 export { TextAreaFieldContext, TextAreaFieldProvider };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/text-area-field/index.d.ts

@@ -12,7 +12,7 @@
 
 import { TextAreaFieldProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime186 from "react/jsx-runtime";
+import * as react_jsx_runtime204 from "react/jsx-runtime";
 
 //#region src/components/text-area-field/index.d.ts
 
@@ -44,7 +44,7 @@ import * as react_jsx_runtime186 from "react/jsx-runtime";
 declare function TextAreaField({
   ref,
   ...props
-}: TextAreaFieldProps): react_jsx_runtime186.JSX.Element;
+}: TextAreaFieldProps): react_jsx_runtime204.JSX.Element;
 //#endregion
 export { TextAreaField };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/text-field/context.d.ts

@@ -13,13 +13,13 @@
 import { ProviderProps } from "../../lib/types.js";
 import { TextFieldProps as TextFieldProps$1 } from "./types.js";
 import "client-only";
-import * as react49 from "react";
+import * as react18 from "react";
 import { ContextValue } from "react-aria-components";
-import * as react_jsx_runtime196 from "react/jsx-runtime";
+import * as react_jsx_runtime66 from "react/jsx-runtime";
 
 //#region src/components/text-field/context.d.ts
 /** Context for sharing props across TextField components */
-declare const TextFieldContext: react49.Context<ContextValue<TextFieldProps$1, HTMLDivElement>>;
+declare const TextFieldContext: react18.Context<ContextValue<TextFieldProps$1, HTMLDivElement>>;
 /**
  * Sets default props for all TextField components within.
  *
@@ -42,7 +42,7 @@ declare const TextFieldContext: react49.Context<ContextValue<TextFieldProps$1, H
 declare function TextFieldProvider({
   children,
   ...props
-}: ProviderProps<TextFieldProps$1>): react_jsx_runtime196.JSX.Element;
+}: ProviderProps<TextFieldProps$1>): react_jsx_runtime66.JSX.Element;
 //#endregion
 export { TextFieldContext, TextFieldProvider };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/text-field/index.d.ts

@@ -12,7 +12,7 @@
 
 import { TextFieldProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime195 from "react/jsx-runtime";
+import * as react_jsx_runtime193 from "react/jsx-runtime";
 
 //#region src/components/text-field/index.d.ts
 
@@ -40,7 +40,7 @@ import * as react_jsx_runtime195 from "react/jsx-runtime";
 declare function TextField({
   ref,
   ...props
-}: TextFieldProps): react_jsx_runtime195.JSX.Element;
+}: TextFieldProps): react_jsx_runtime193.JSX.Element;
 //#endregion
 export { TextField };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/time-field/index.d.ts

@@ -13,7 +13,7 @@
 import { TimeFieldProps as TimeFieldProps$1 } from "./types.js";
 import "client-only";
 import { TimeValue } from "react-aria-components";
-import * as react_jsx_runtime197 from "react/jsx-runtime";
+import * as react_jsx_runtime191 from "react/jsx-runtime";
 
 //#region src/components/time-field/index.d.ts
 
@@ -58,7 +58,7 @@ declare function TimeField<T extends TimeValue>({
   isRequired,
   isReadOnly,
   ...rest
-}: TimeFieldProps$1<T>): react_jsx_runtime197.JSX.Element;
+}: TimeFieldProps$1<T>): react_jsx_runtime191.JSX.Element;
 //#endregion
 export { TimeField };
 //# sourceMappingURL=index.d.ts.map

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

@@ -12,7 +12,7 @@
 
 import { TooltipProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime200 from "react/jsx-runtime";
+import * as react_jsx_runtime194 from "react/jsx-runtime";
 
 //#region src/components/tooltip/index.d.ts
 
@@ -44,7 +44,7 @@ declare function Tooltip({
   offset,
   placement,
   ...props
-}: TooltipProps): react_jsx_runtime200.JSX.Element;
+}: TooltipProps): react_jsx_runtime194.JSX.Element;
 //#endregion
 export { Tooltip };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/tooltip/trigger.d.ts

@@ -12,7 +12,7 @@
 
 import { TooltipTriggerProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime198 from "react/jsx-runtime";
+import * as react_jsx_runtime202 from "react/jsx-runtime";
 
 //#region src/components/tooltip/trigger.d.ts
 
@@ -38,7 +38,7 @@ import * as react_jsx_runtime198 from "react/jsx-runtime";
 declare function TooltipTrigger({
   ref,
   ...props
-}: TooltipTriggerProps): react_jsx_runtime198.JSX.Element;
+}: TooltipTriggerProps): react_jsx_runtime202.JSX.Element;
 //#endregion
 export { TooltipTrigger };
 //# sourceMappingURL=trigger.d.ts.map

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

@@ -12,13 +12,13 @@
 
 import { TreeContextValue, TreeItemContextValue } from "./types.js";
 import "client-only";
-import * as react50 from "react";
+import * as react49 from "react";
 
 //#region src/components/tree/context.d.ts
 /** Context for sharing state across Tree components */
-declare const TreeContext: react50.Context<TreeContextValue>;
+declare const TreeContext: react49.Context<TreeContextValue>;
 /** Context for sharing state within a TreeItem */
-declare const TreeItemContext: react50.Context<TreeItemContextValue>;
+declare const TreeItemContext: react49.Context<TreeItemContextValue>;
 //#endregion
 export { TreeContext, TreeItemContext };
 //# sourceMappingURL=context.d.ts.map

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

@@ -12,7 +12,7 @@
 
 import { TreeProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime199 from "react/jsx-runtime";
+import * as react_jsx_runtime196 from "react/jsx-runtime";
 
 //#region src/components/tree/index.d.ts
 
@@ -75,7 +75,7 @@ declare function Tree<T>({
   onVisibilityChange,
   onSelectionChange,
   ...rest
-}: TreeProps<T>): react_jsx_runtime199.JSX.Element;
+}: TreeProps<T>): react_jsx_runtime196.JSX.Element;
 //#endregion
 export { Tree };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/tree/index.js

@@ -23,10 +23,12 @@ import { jsx } from "react/jsx-runtime";
 import styles from "./styles.module.css";
 
 //#region src/components/tree/index.tsx
-const defaultRenderDropIndicator = (target) => /* @__PURE__ */ jsx(DropIndicator, {
-	target,
-	className: styles.dropIndicator
-});
+const defaultRenderDropIndicator = (target) => {
+	return /* @__PURE__ */ jsx(DropIndicator, {
+		target,
+		className: target.type === "item" && (target.dropPosition === "before" || target.dropPosition === "after") ? styles.dropIndicatorBetween : styles.dropIndicator
+	});
+};
 /**
 * Tree - Hierarchical tree view with selection, visibility, and drag-and-drop
 *

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_runtime201 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_runtime201.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_runtime99 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_runtime99 from "react/jsx-runtime";
  */
 declare function TreeItemContent({
   children
-}: TreeItemContentProps): react_jsx_runtime99.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_runtime204 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_runtime204 from "react/jsx-runtime";
 declare function TreeItemDescription({
   children,
   className
-}: TextProps): react_jsx_runtime204.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_runtime179 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_runtime179 from "react/jsx-runtime";
 declare function TreeItemLabel({
   children,
   className
-}: TextProps): react_jsx_runtime179.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_runtime180 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_runtime180 from "react/jsx-runtime";
 declare function TreeItemPrefixIcon({
   children,
   className
-}: IconProps): react_jsx_runtime180.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_runtime181 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_runtime181.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 react44 from "react";
+import * as react52 from "react";
 
 //#region src/components/tree/lines.d.ts
 /**
@@ -19,11 +19,13 @@ import * as react44 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: react44.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_runtime182 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_runtime182.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 react45 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: react45.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_runtime183 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_runtime183.JSX.Element;
+}: ViewStackProps): react_jsx_runtime186.JSX.Element;
 //#endregion
 export { ViewStack };
 //# sourceMappingURL=index.d.ts.map

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

@@ -12,7 +12,7 @@
 
 import { ViewStackTriggerProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime184 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_runtime184 from "react/jsx-runtime";
 declare function ViewStackTrigger({
   children,
   for: types
-}: ViewStackTriggerProps): react_jsx_runtime184.JSX.Element;
+}: ViewStackTriggerProps): react_jsx_runtime187.JSX.Element;
 //#endregion
 export { ViewStackTrigger };
 //# sourceMappingURL=trigger.d.ts.map