@dxos/react-ui-list 0.7.4 → 0.7.5-labs.071a3e2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-list",
-  "version": "0.7.4",
+  "version": "0.7.5-labs.071a3e2",
   "description": "A list component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -25,38 +25,38 @@
     "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@preact/signals-core": "^1.6.0",
-    "@radix-ui/react-context": "^1.0.0",
-    "effect": "^3.9.2",
-    "@dxos/debug": "0.7.4",
-    "@dxos/echo-schema": "0.7.4",
-    "@dxos/invariant": "0.7.4",
-    "@dxos/live-object": "0.7.4",
-    "@dxos/react-ui-attention": "0.7.4",
-    "@dxos/log": "0.7.4",
-    "@dxos/react-ui-mosaic": "0.7.4",
-    "@dxos/react-ui-text-tooltip": "0.7.4",
-    "@dxos/react-ui-types": "0.7.4",
-    "@dxos/util": "0.7.4"
+    "@radix-ui/react-context": "1.1.1",
+    "@dxos/debug": "0.7.5-labs.071a3e2",
+    "@dxos/live-object": "0.7.5-labs.071a3e2",
+    "@dxos/echo-schema": "0.7.5-labs.071a3e2",
+    "@dxos/invariant": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-attention": "0.7.5-labs.071a3e2",
+    "@dxos/log": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-mosaic": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-text-tooltip": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-types": "0.7.5-labs.071a3e2",
+    "@dxos/util": "0.7.5-labs.071a3e2"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
+    "effect": "^3.12.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/random": "0.7.4",
-    "@dxos/react-ui": "0.7.4",
-    "@dxos/storybook-utils": "0.7.4",
-    "@dxos/react-ui-theme": "0.7.4"
+    "@dxos/random": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-theme": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui": "0.7.5-labs.071a3e2",
+    "@dxos/storybook-utils": "0.7.5-labs.071a3e2"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
-    "effect": "^3.9.2",
+    "effect": "^3.12.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.7.4",
-    "@dxos/react-ui-theme": "0.7.4"
+    "@dxos/react-ui": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-theme": "0.7.5-labs.071a3e2"
   },
   "publishConfig": {
     "access": "public"

package/src/components/List/ListItem.tsx

@@ -25,10 +25,9 @@ import React, {
 import { createPortal } from 'react-dom';
 
 import { invariant } from '@dxos/invariant';
-import { Icon, type ThemedClassName } from '@dxos/react-ui';
+import { Icon, type ThemedClassName, ListItem as NaturalListItem } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
-import { DropIndicator } from './DropIndicator';
 import { useListContext } from './ListRoot';
 
 export type ListItemRecord = {};
@@ -75,13 +74,14 @@ export const [ListItemProvider, useListItemContext] = createContext<ListItemCont
 export type ListItemProps<T extends ListItemRecord> = ThemedClassName<
   PropsWithChildren<{
     item: T;
-  }>
+  }> &
+    HTMLAttributes<HTMLDivElement>
 >;
 
 /**
  * Draggable list item.
  */
-export const ListItem = <T extends ListItemRecord>({ children, classNames, item }: ListItemProps<T>) => {
+export const ListItem = <T extends ListItemRecord>({ children, classNames, item, ...props }: ListItemProps<T>) => {
   const { isItem, dragPreview, setState: setRootState } = useListContext(LIST_ITEM_NAME);
   const ref = useRef<HTMLDivElement | null>(null);
   const dragHandleRef = useRef<HTMLElement | null>(null);
@@ -113,6 +113,7 @@ export const ListItem = <T extends ListItemRecord>({ children, classNames, item
                   container.style.width = rect.width + 'px';
                   setState({ type: 'preview', container });
                   setRootState({ type: 'preview', container, item });
+                  return () => {}; // TODO(burdon): Cleanup.
                 },
               });
             }
@@ -164,11 +165,18 @@ export const ListItem = <T extends ListItemRecord>({ children, classNames, item
 
   return (
     <ListItemProvider item={item} dragHandleRef={dragHandleRef}>
-      <div className='relative'>
-        <div ref={ref} role='listitem' className={mx('flex overflow-hidden', classNames, stateStyles[state.type])}>
+      <div role='none' className='relative'>
+        <div
+          ref={ref}
+          role='listitem'
+          className={mx('flex overflow-hidden', classNames, stateStyles[state.type])}
+          {...props}
+        >
           {children}
         </div>
-        {state.type === 'is-dragging-over' && state.closestEdge && <DropIndicator edge={state.closestEdge} />}
+        {state.type === 'is-dragging-over' && state.closestEdge && (
+          <NaturalListItem.DropIndicator edge={state.closestEdge} />
+        )}
       </div>
     </ListItemProvider>
   );

package/src/components/Tree/Tree.tsx

@@ -9,11 +9,13 @@ import { Treegrid, type TreegridRootProps } from '@dxos/react-ui';
 import { type TreeContextType, TreeProvider } from './TreeContext';
 import { TreeItem, type TreeItemProps } from './TreeItem';
 
-export type TreeProps<T = any> = { id: string } & TreeContextType &
+export type TreeProps<T = any> = { root?: T; path?: string[]; id: string } & TreeContextType &
   Partial<Pick<TreegridRootProps, 'gridTemplateColumns' | 'classNames'>> &
-  Pick<TreeItemProps<T>, 'draggable' | 'renderColumns' | 'canDrop' | 'onOpenChange' | 'onSelect'>;
+  Pick<TreeItemProps<T>, 'draggable' | 'renderColumns' | 'canDrop' | 'onOpenChange' | 'onSelect' | 'levelOffset'>;
 
 export const Tree = <T = any,>({
+  root,
+  path,
   id,
   getItems,
   getProps,
@@ -26,6 +28,7 @@ export const Tree = <T = any,>({
   canDrop,
   onOpenChange,
   onSelect,
+  levelOffset,
 }: TreeProps<T>) => {
   const context = useMemo(
     () => ({
@@ -36,8 +39,8 @@ export const Tree = <T = any,>({
     }),
     [getItems, getProps, isOpen, isCurrent],
   );
-  const items = getItems();
-  const path = useMemo(() => [id], [id]);
+  const items = getItems(root);
+  const treePath = useMemo(() => (path ? [...path, id] : [id]), [id, path]);
 
   return (
     <Treegrid.Root gridTemplateColumns={gridTemplateColumns} classNames={classNames}>
@@ -47,7 +50,8 @@ export const Tree = <T = any,>({
             key={item.id}
             item={item}
             last={index === items.length - 1}
-            path={path}
+            path={treePath}
+            levelOffset={levelOffset}
             draggable={draggable}
             renderColumns={renderColumns}
             canDrop={canDrop}

package/src/components/Tree/TreeItem.tsx

@@ -3,11 +3,7 @@
 //
 
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
-import {
-  draggable as pragmaticDraggable,
-  dropTargetForElements,
-} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-// https://github.com/atlassian/pragmatic-drag-and-drop/blob/main/packages/hitbox/constellation/index/about.mdx
+import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import {
   attachInstruction,
   extractInstruction,
@@ -18,9 +14,8 @@ import React, { memo, useCallback, useEffect, useMemo, useRef, useState, type FC
 
 import { S } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
-import { Treegrid } from '@dxos/react-ui';
+import { Treegrid, TreeItem as NaturalTreeItem } from '@dxos/react-ui';
 import {
-  focusRing,
   ghostHover,
   hoverableControls,
   hoverableFocusedKeyboardControls,
@@ -28,11 +23,10 @@ import {
   mx,
 } from '@dxos/react-ui-theme';
 
-import { DropIndicator } from './DropIndicator';
 import { useTree } from './TreeContext';
 import { TreeItemHeading } from './TreeItemHeading';
 import { TreeItemToggle } from './TreeItemToggle';
-import { DEFAULT_INDENTATION, paddingIndendation } from './helpers';
+import { DEFAULT_INDENTATION, paddingIndentation } from './helpers';
 
 type TreeItemState = 'idle' | 'dragging' | 'preview' | 'parent-of-instruction';
 
@@ -52,9 +46,16 @@ export const isTreeData = (data: unknown): data is TreeData => S.is(TreeDataSche
 export type TreeItemProps<T = any> = {
   item: T;
   path: string[];
+  levelOffset?: number;
   last: boolean;
   draggable?: boolean;
-  renderColumns?: FC<{ item: T; path: string[]; menuOpen: boolean; setMenuOpen: (open: boolean) => void }>;
+  renderColumns?: FC<{
+    item: T;
+    path: string[];
+    open: boolean;
+    menuOpen: boolean;
+    setMenuOpen: (open: boolean) => void;
+  }>;
   canDrop?: (source: TreeData, target: TreeData) => boolean;
   onOpenChange?: (params: { item: T; path: string[]; open: boolean }) => void;
   onSelect?: (params: { item: T; path: string[]; current: boolean; option: boolean }) => void;
@@ -64,11 +65,12 @@ export const RawTreeItem = <T = any,>({
   item,
   path: _path,
   last,
-  draggable,
+  draggable: _draggable,
   renderColumns: Columns,
   canDrop,
   onOpenChange,
   onSelect,
+  levelOffset = 2,
 }: TreeItemProps<T>) => {
   const { getItems, getProps, isOpen, isCurrent } = useTree();
   const items = getItems(item);
@@ -76,7 +78,7 @@ export const RawTreeItem = <T = any,>({
   const path = useMemo(() => [..._path, id], [_path, id]);
   const open = isOpen(path, item);
   const current = isCurrent(path, item);
-  const level = path.length - 2;
+  const level = path.length - levelOffset;
   const isBranch = !!parentOf;
   const mode: ItemMode = last ? 'last-in-group' : open ? 'expanded' : 'standard';
   const data = useMemo(() => ({ id, path, item }) satisfies TreeData, [id, path, item]);
@@ -97,7 +99,7 @@ export const RawTreeItem = <T = any,>({
   }, []);
 
   useEffect(() => {
-    if (!draggable) {
+    if (!_draggable) {
       return;
     }
 
@@ -105,7 +107,7 @@ export const RawTreeItem = <T = any,>({
 
     // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about
     return combine(
-      pragmaticDraggable({
+      draggable({
         element: buttonRef.current,
         getInitialData: () => data,
         onDragStart: () => {
@@ -122,6 +124,7 @@ export const RawTreeItem = <T = any,>({
           }
         },
       }),
+      // https://github.com/atlassian/pragmatic-drag-and-drop/blob/main/packages/hitbox/constellation/index/about.mdx
       dropTargetForElements({
         element: buttonRef.current,
         getData: ({ input, element }) => {
@@ -171,7 +174,7 @@ export const RawTreeItem = <T = any,>({
         },
       }),
     );
-  }, [draggable, item, id, mode, path, open, canDrop]);
+  }, [_draggable, item, id, mode, path, open, canDrop]);
 
   // Cancel expand on unmount.
   useEffect(() => () => cancelExpand(), [cancelExpand]);
@@ -215,13 +218,12 @@ export const RawTreeItem = <T = any,>({
         aria-labelledby={`${id}__label`}
         parentOf={parentOf?.join(Treegrid.PARENT_OF_SEPARATOR)}
         classNames={mx(
-          'grid grid-cols-subgrid col-[tree-row] mt-[2px] aria-[current]:bg-input',
+          'grid grid-cols-subgrid col-[tree-row] mbs-0.5 aria-[current]:bg-input',
           hoverableControls,
           hoverableFocusedKeyboardControls,
           hoverableFocusedWithinControls,
           hoverableDescriptionIcons,
           ghostHover,
-          focusRing,
           className,
         )}
         data-itemid={id}
@@ -239,7 +241,7 @@ export const RawTreeItem = <T = any,>({
         <Treegrid.Cell
           indent
           classNames='relative grid grid-cols-subgrid col-[tree-row]'
-          style={paddingIndendation(level)}
+          style={paddingIndentation(level)}
         >
           <div role='none' className='flex items-center'>
             <TreeItemToggle open={open} isBranch={isBranch} onToggle={handleOpenChange} />
@@ -253,8 +255,8 @@ export const RawTreeItem = <T = any,>({
               onSelect={handleSelect}
             />
           </div>
-          {Columns && <Columns item={item} path={path} menuOpen={menuOpen} setMenuOpen={setMenuOpen} />}
-          {instruction && <DropIndicator instruction={instruction} gap={2} />}
+          {Columns && <Columns item={item} path={path} open={open} menuOpen={menuOpen} setMenuOpen={setMenuOpen} />}
+          {instruction && <NaturalTreeItem.DropIndicator instruction={instruction} gap={2} />}
         </Treegrid.Cell>
       </Treegrid.Row>
       {open &&
@@ -264,7 +266,7 @@ export const RawTreeItem = <T = any,>({
             item={item}
             path={path}
             last={index === items.length - 1}
-            draggable={draggable}
+            draggable={_draggable}
             renderColumns={Columns}
             canDrop={canDrop}
             onOpenChange={onOpenChange}

package/src/components/Tree/TreeItemHeading.tsx

@@ -51,14 +51,13 @@ export const TreeItemHeading = memo(
           asChild
           ref={forwardedRef}
         >
-          {/* TODO(wittjosiah): Class precedence. See #8149. */}
           <Button
             data-testid='treeItem.heading'
             variant='ghost'
             density='fine'
             classNames={mx(
-              'grow gap-2 !pis-0.5 hover:!bg-transparent dark:hover:!bg-transparent',
-              'disabled:!cursor-default disabled:!opacity-100',
+              'grow gap-2 pis-0.5 hover:bg-transparent dark:hover:bg-transparent',
+              'disabled:cursor-default disabled:opacity-100',
               className,
             )}
             disabled={disabled}

package/src/components/Tree/TreeItemToggle.tsx

@@ -11,10 +11,11 @@ export type TreeItemToggleProps = {
   open?: boolean;
   isBranch?: boolean;
   onToggle?: () => void;
+  hidden?: boolean;
 };
 
 export const TreeItemToggle = memo(
-  forwardRef<HTMLButtonElement, TreeItemToggleProps>(({ open, isBranch, onToggle }, forwardedRef) => {
+  forwardRef<HTMLButtonElement, TreeItemToggleProps>(({ open, isBranch, hidden, onToggle }, forwardedRef) => {
     return (
       <Button
         ref={forwardedRef}
@@ -22,7 +23,7 @@ export const TreeItemToggle = memo(
         aria-expanded={open}
         variant='ghost'
         density='fine'
-        classNames={mx('is-6 !pli-1', !isBranch && 'invisible')}
+        classNames={mx('is-4 dx-focus-ring-inset pli-0', hidden ? 'hidden' : !isBranch && 'invisible')}
         onClick={onToggle}
       >
         <Icon

package/src/components/Tree/helpers.ts

@@ -4,6 +4,6 @@
 
 export const DEFAULT_INDENTATION = 8;
 
-export const paddingIndendation = (level: number, indentation = DEFAULT_INDENTATION) => ({
+export const paddingIndentation = (level: number, indentation = DEFAULT_INDENTATION) => ({
   paddingInlineStart: `${(level - 1) * indentation}px`,
 });

package/dist/types/src/components/List/DropIndicator.d.ts

@@ -1,11 +0,0 @@
-import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/types';
-import React from 'react';
-export type DropIndicatorProps = {
-    edge: Edge;
-    gap?: number;
-};
-/**
- * This is a tailwind port of `@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box`
- */
-export declare const DropIndicator: ({ edge, gap }: DropIndicatorProps) => React.JSX.Element;
-//# sourceMappingURL=DropIndicator.d.ts.map

package/dist/types/src/components/List/DropIndicator.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DropIndicator.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/DropIndicator.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,gDAAgD,CAAC;AAC3E,OAAO,KAAkD,MAAM,OAAO,CAAC;AA6BvE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,IAAI,CAAC;IACX,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,kBAAuB,kBAAkB,sBA0BlE,CAAC"}

package/dist/types/src/components/Tree/DropIndicator.d.ts

@@ -1,8 +0,0 @@
-import { type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
-import React from 'react';
-export type DropIndicatorProps = {
-    instruction: Instruction;
-    gap?: number;
-};
-export declare const DropIndicator: ({ instruction, gap }: DropIndicatorProps) => React.JSX.Element | null;
-//# sourceMappingURL=DropIndicator.d.ts.map

package/dist/types/src/components/Tree/DropIndicator.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DropIndicator.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tree/DropIndicator.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,oDAAoD,CAAC;AACtF,OAAO,KAAkD,MAAM,OAAO,CAAC;AAoCvE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,WAAW,EAAE,WAAW,CAAC;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,aAAa,yBAA8B,kBAAkB,6BA+BzE,CAAC"}

package/src/components/List/DropIndicator.tsx

@@ -1,69 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/types';
-import React, { type CSSProperties, type HTMLAttributes } from 'react';
-
-import { mx } from '@dxos/react-ui-theme';
-
-type Orientation = 'horizontal' | 'vertical';
-
-const edgeToOrientationMap: Record<Edge, Orientation> = {
-  top: 'horizontal',
-  bottom: 'horizontal',
-  left: 'vertical',
-  right: 'vertical',
-};
-
-const orientationStyles: Record<Orientation, HTMLAttributes<HTMLElement>['className']> = {
-  horizontal: 'h-[--line-thickness] left-[--terminal-radius] right-0 before:left-[--negative-terminal-size]',
-  vertical: 'w-[--line-thickness] top-[--terminal-radius] bottom-0 before:top-[--negative-terminal-size]',
-};
-
-const edgeStyles: Record<Edge, HTMLAttributes<HTMLElement>['className']> = {
-  top: 'top-[--line-offset] before:top-[--offset-terminal]',
-  right: 'right-[--line-offset] before:right-[--offset-terminal]',
-  bottom: 'bottom-[--line-offset] before:bottom-[--offset-terminal]',
-  left: 'left-[--line-offset] before:left-[--offset-terminal]',
-};
-
-const strokeSize = 2;
-const terminalSize = 8;
-const offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
-
-export type DropIndicatorProps = {
-  edge: Edge;
-  gap?: number;
-};
-
-/**
- * This is a tailwind port of `@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box`
- */
-export const DropIndicator = ({ edge, gap = 0 }: DropIndicatorProps) => {
-  const lineOffset = `calc(-0.5 * (${gap}px + ${strokeSize}px))`;
-
-  const orientation = edgeToOrientationMap[edge];
-
-  return (
-    <div
-      style={
-        {
-          '--line-thickness': `${strokeSize}px`,
-          '--line-offset': `${lineOffset}`,
-          '--terminal-size': `${terminalSize}px`,
-          '--terminal-radius': `${terminalSize / 2}px`,
-          '--negative-terminal-size': `-${terminalSize}px`,
-          '--offset-terminal': `${offsetToAlignTerminalWithLine}px`,
-        } as CSSProperties
-      }
-      className={mx(
-        'absolute z-10 pointer-events-none bg-blue-700',
-        "before:content-[''] before:w-[--terminal-size] before:h-[--terminal-size] box-border before:absolute",
-        'before:border-[length:--line-thickness] before:border-solid before:border-blue-700 before:rounded-full',
-        orientationStyles[orientation],
-        edgeStyles[edge],
-      )}
-    ></div>
-  );
-};

package/src/components/Tree/DropIndicator.tsx

@@ -1,78 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
-import React, { type HTMLAttributes, type CSSProperties } from 'react';
-
-import { mx } from '@dxos/react-ui-theme';
-
-// Tree item hitbox
-// https://github.com/atlassian/pragmatic-drag-and-drop/blob/main/packages/hitbox/constellation/index/about.mdx#tree-item
-
-type InstructionType = Exclude<Instruction, { type: 'instruction-blocked' }>['type'];
-type Orientation = 'sibling' | 'child';
-
-const edgeToOrientationMap: Record<InstructionType, Orientation> = {
-  'reorder-above': 'sibling',
-  'reorder-below': 'sibling',
-  'make-child': 'child',
-  reparent: 'child',
-};
-
-const orientationStyles: Record<Orientation, HTMLAttributes<HTMLElement>['className']> = {
-  // TODO(wittjosiah): Stop using left/right here.
-  sibling:
-    'bs-[--line-thickness] left-[--horizontal-indent] right-0 bg-accentSurface before:left-[--negative-terminal-size]',
-  child: 'is-full block-start-0 block-end-0 border-[length:--line-thickness] before:invisible',
-};
-
-const instructionStyles: Record<InstructionType, HTMLAttributes<HTMLElement>['className']> = {
-  'reorder-above': 'block-start-[--line-offset] before:block-start-[--offset-terminal]',
-  'reorder-below': 'block-end-[--line-offset] before:block-end-[--offset-terminal]',
-  'make-child': 'border-accentSurface',
-  // TODO(wittjosiah): This is not occurring in the current implementation.
-  reparent: '',
-};
-
-const strokeSize = 2;
-const terminalSize = 8;
-const offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
-
-export type DropIndicatorProps = {
-  instruction: Instruction;
-  gap?: number;
-};
-
-export const DropIndicator = ({ instruction, gap = 0 }: DropIndicatorProps) => {
-  const lineOffset = `calc(-0.5 * (${gap}px + ${strokeSize}px))`;
-  const isBlocked = instruction.type === 'instruction-blocked';
-  const desiredInstruction = isBlocked ? instruction.desired : instruction;
-  const orientation = edgeToOrientationMap[desiredInstruction.type];
-  if (isBlocked) {
-    return null;
-  }
-
-  return (
-    <div
-      style={
-        {
-          '--line-thickness': `${strokeSize}px`,
-          '--line-offset': `${lineOffset}`,
-          '--terminal-size': `${terminalSize}px`,
-          '--terminal-radius': `${terminalSize / 2}px`,
-          '--negative-terminal-size': `-${terminalSize}px`,
-          '--offset-terminal': `${offsetToAlignTerminalWithLine}px`,
-          '--horizontal-indent': `${desiredInstruction.currentLevel * desiredInstruction.indentPerLevel + 4}px`,
-        } as CSSProperties
-      }
-      className={mx(
-        'absolute z-10 pointer-events-none',
-        'before:is-[--terminal-size] before:bs-[--terminal-size] box-border before:absolute',
-        'before:border-[length:--line-thickness] before:border-solid before:border-accentSurface before:rounded-full',
-        orientationStyles[orientation],
-        instructionStyles[desiredInstruction.type],
-      )}
-    ></div>
-  );
-};