@pgcorp/ui-kit 0.10.0 → 0.10.1

package/src/components/shared/_internal/STreeNode.vue

@@ -1,780 +0,0 @@
-<template>
-  <li
-    :id="itemId"
-    ref="itemEl"
-    class="s-tree-node-wrapper"
-    role="treeitem"
-    :tabindex="isActive ? 0 : -1"
-    :aria-level="props.level + 1"
-    :aria-posinset="props.position"
-    :aria-setsize="props.setSize"
-    :aria-expanded="hasChildren ? isExpanded : undefined"
-    :aria-selected="selection.mode === 'single' ? isSelected : undefined"
-    :aria-checked="selection.mode === 'multiple' ? selectionCheckedState : undefined"
-    :aria-disabled="isTreeItemDisabled || undefined"
-    :class="{
-      's-tree-node-wrapper--has-children': hasChildren,
-      's-tree-node-wrapper--expanded': isExpanded,
-      's-tree-node-wrapper--with-selection-rail': hasSelectionRail,
-      's-tree-node-wrapper--compact': runtime.density.value === 'compact',
-      's-tree-node-wrapper--overlay-actions': runtime.actionsLayout.value === 'overlay',
-      's-tree-node-wrapper--row-table': runtime.rowVariant.value === 'table',
-    }"
-    @focus="runtime.activeKey.value = nodeKey"
-    @click="handleTreeItemClick"
-    @keydown="handleTreeItemKeydown"
-  >
-    <div
-      class="s-tree-node-hitbox py-0.5 transition-colors duration-[var(--s-motion-fast)] hover:bg-surface-100 dark:hover:bg-surface-800"
-    >
-      <div
-        class="s-tree-node-row px-4 flex items-center"
-        :class="{
-          's-tree-node-row--with-selection-rail': hasSelectionRail,
-          's-tree-node-row--rail-selected': hasSelectionRail && isSelected,
-          's-tree-node-row--rail-partial': hasSelectionRail && isPartiallySelected,
-        }"
-        :style="{ paddingLeft: hasSelectionRail ? undefined : nodeIndent }"
-      >
-        <div v-if="hasSelectionRail" class="s-tree-node-selection-rail" aria-hidden="false">
-          <SButton
-            appearance="ghost"
-            size="sm"
-            icon-only
-            :leading-icon="isSelected ? Check : isPartiallySelected ? Minus : undefined"
-            data-tree-selection-control
-            :data-state="isSelected ? 'selected' : isPartiallySelected ? 'partial' : 'unselected'"
-            :aria-label="selectionLabel"
-            :pressed="selectionPressedState"
-            :disabled="isSelectionDisabled"
-            tabindex="-1"
-            @pointerdown.prevent
-            @click.stop="activateSelectionAffordance"
-          />
-        </div>
-
-        <div
-          class="s-tree-node-content-shell"
-          :class="{
-            's-tree-node-content-shell--has-children': hasChildren,
-            's-tree-node-content-shell--expanded': isExpanded,
-          }"
-          :style="{ paddingLeft: hasSelectionRail ? nodeIndent : undefined }"
-        >
-          <div
-            v-if="runtime.expandControl.value === 'button'"
-            class="s-tree-node-toggle-slot shrink-0"
-            :class="{
-              's-tree-node-toggle-slot--has-children': hasChildren,
-              's-tree-node-toggle-slot--expanded': isExpanded,
-            }"
-          >
-            <SButton
-              v-if="hasChildren"
-              appearance="ghost"
-              size="xs"
-              icon-only
-              :leading-icon="isExpanded ? ChevronDown : ChevronRight"
-              :aria-label="toggleLabel"
-              tabindex="-1"
-              @pointerdown.prevent
-              @click.stop="activateToggleAffordance"
-            />
-          </div>
-
-          <SCheckbox
-            v-if="selection.mode === 'multiple' && !hasSelectionRail"
-            :model-value="isSelected"
-            :indeterminate="isPartiallySelected"
-            :disabled="isSelectionDisabled"
-            :aria-label="selectionLabel"
-            tabindex="-1"
-            @pointerdown.prevent
-            @click.stop
-            @update:model-value="activateSelectionAffordance"
-          />
-
-          <template v-if="isRowInteractive">
-            <div
-              class="s-tree-node s-tree-node__layout w-full cursor-pointer flex-grow"
-              :class="{
-                's-tree-node--selected': isSelected && selection.mode === 'single',
-                's-tree-node--rail-selected': hasSelectionRail && isSelected,
-                's-tree-node--rail-partial': hasSelectionRail && isPartiallySelected,
-                's-tree-node--row-expand': runtime.expandControl.value === 'row' && hasChildren,
-                's-tree-node--disabled': isTreeItemDisabled,
-              }"
-              role="presentation"
-            >
-              <div class="s-tree-node__primary">
-                <PassiveContentBoundary :contract="rowContentContract">
-                  <slot name="col-left" v-bind="scope">
-                    <div class="s-tree-node__header">
-                      <component :is="nodeIcon" v-if="nodeIcon" class="s-tree-node__icon" />
-                      <span
-                        class="s-tree-node__title"
-                        :class="{ 'text-primary-800 dark:text-primary-200': isSelected }"
-                      >{{ nodeLabel }}</span>
-                    </div>
-                  </slot>
-                </PassiveContentBoundary>
-              </div>
-              <div class="s-tree-node__center">
-                <PassiveContentBoundary :contract="rowContentContract">
-                  <slot name="col-center" v-bind="scope" />
-                </PassiveContentBoundary>
-              </div>
-              <div class="s-tree-node__trailing s-tree-node-right">
-                <div class="s-tree-node__meta">
-                  <PassiveContentBoundary :contract="rowContentContract">
-                    <slot name="meta" v-bind="scope" />
-                  </PassiveContentBoundary>
-                </div>
-              </div>
-            </div>
-
-            <TreeActionRegion
-              v-if="hasActionSlots"
-              :context="actionRegistry"
-              :set-element="setActionsElement"
-              class="s-tree-node-actions s-tree-node-actions--standalone"
-              :class="{ 's-tree-node-actions--has-persistent': Boolean($slots['persistent-actions']) }"
-              role="group"
-              :aria-label="`Действия: ${nodeLabel}. F2 — войти, Escape — вернуться`"
-            >
-              <div v-if="$slots['persistent-actions']" class="s-tree-node-actions__persistent">
-                <slot name="persistent-actions" v-bind="scope" />
-              </div>
-              <div v-if="$slots.actions" class="s-tree-node-actions__transient">
-                <slot name="actions" v-bind="scope" />
-              </div>
-            </TreeActionRegion>
-          </template>
-
-          <div v-else class="s-tree-node s-tree-node__layout w-full flex-grow">
-            <div class="s-tree-node__primary">
-              <PassiveContentBoundary :contract="rowContentContract">
-                <slot name="col-left" v-bind="scope">
-                  <div class="s-tree-node__header">
-                    <component :is="nodeIcon" v-if="nodeIcon" class="s-tree-node__icon" />
-                    <span class="s-tree-node__title">{{ nodeLabel }}</span>
-                  </div>
-                </slot>
-              </PassiveContentBoundary>
-            </div>
-            <div class="s-tree-node__center">
-              <PassiveContentBoundary :contract="rowContentContract">
-                <slot name="col-center" v-bind="scope" />
-              </PassiveContentBoundary>
-            </div>
-            <div class="s-tree-node__trailing s-tree-node-right">
-              <div class="s-tree-node__meta">
-                <PassiveContentBoundary :contract="rowContentContract">
-                  <slot name="meta" v-bind="scope" />
-                </PassiveContentBoundary>
-              </div>
-              <TreeActionRegion
-                v-if="hasActionSlots"
-                :context="actionRegistry"
-                :set-element="setActionsElement"
-                class="s-tree-node-actions"
-                :class="{ 's-tree-node-actions--has-persistent': Boolean($slots['persistent-actions']) }"
-                role="group"
-                :aria-label="`Действия: ${nodeLabel}. F2 — войти, Escape — вернуться`"
-              >
-                <div v-if="$slots['persistent-actions']" class="s-tree-node-actions__persistent">
-                  <slot name="persistent-actions" v-bind="scope" />
-                </div>
-                <div v-if="$slots.actions" class="s-tree-node-actions__transient">
-                  <slot name="actions" v-bind="scope" />
-                </div>
-              </TreeActionRegion>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <ul v-if="isExpanded && hasChildren" class="s-tree-node-children" role="group">
-      <STreeNode
-        v-for="(child, index) in nodeChildren"
-        :key="runtime.model.key(child)"
-        :node="child"
-        :level="props.level + 1"
-        :parent-key="nodeKey"
-        :position="index + 1"
-        :set-size="nodeChildren.length"
-      >
-        <template v-if="$slots['col-left']" #col-left="childScope"><slot name="col-left" v-bind="childScope" /></template>
-        <template v-if="$slots['col-center']" #col-center="childScope"><slot name="col-center" v-bind="childScope" /></template>
-        <template v-if="$slots.meta" #meta="childScope"><slot name="meta" v-bind="childScope" /></template>
-        <template v-if="$slots['persistent-actions']" #persistent-actions="childScope"><slot name="persistent-actions" v-bind="childScope" /></template>
-        <template v-if="$slots.actions" #actions="childScope"><slot name="actions" v-bind="childScope" /></template>
-      </STreeNode>
-    </ul>
-  </li>
-</template>
-
-<script setup lang="ts" generic="T extends object, K extends SelectionKey">
-import { computed, defineComponent, h, inject, onBeforeUnmount, onMounted, provide, ref } from 'vue'
-import { useUiKitLocale } from '../../../composables/useUiKitLocale'
-import type { PropType } from 'vue'
-import { Check, ChevronDown, ChevronRight, Minus } from '../../icons/sputnigUiIcons'
-import {
-  PassiveContentBoundary,
-  type PassiveContentContract,
-  useInteractiveLeafRegistration,
-} from '../../../internal/passiveContentContract'
-import SButton from '../controls/SButton.vue'
-import SCheckbox from '../controls/SCheckbox.vue'
-import type { SelectionKey, STreeNodeContentScope, TreeActivationOrigin } from '../complex/types'
-import { selectionKeyToken } from './useSelectionRoving'
-import {
-  TREE_RUNTIME_KEY,
-  TREE_ACTION_CONTEXT_KEY,
-  type RegisteredTreeItem,
-  TreeActionRegistrationStore,
-  type TreeActionContext,
-  type TreeRuntime,
-} from './treeRuntime'
-
-defineOptions({ name: 'STreeNode' })
-useInteractiveLeafRegistration({ owner: 'STreeNode' })
-
-const props = defineProps<{
-  node: T
-  level: number
-  parentKey?: K
-  position: number
-  setSize: number
-}>()
-const { t } = useUiKitLocale()
-
-const slots = defineSlots<{
-  'col-left': (props: STreeNodeContentScope<T, K>) => unknown
-  'col-center': (props: STreeNodeContentScope<T, K>) => unknown
-  'meta': (props: STreeNodeContentScope<T, K>) => unknown
-  'persistent-actions': (props: STreeNodeContentScope<T, K>) => unknown
-  'actions': (props: STreeNodeContentScope<T, K>) => unknown
-}>()
-
-function requireTreeRuntime(value: TreeRuntime<T, K> | undefined): TreeRuntime<T, K> {
-  if (value) return value
-  throw new Error('STreeNode must be rendered inside STree')
-}
-const runtime = requireTreeRuntime(inject<TreeRuntime<T, K>>(TREE_RUNTIME_KEY))
-
-const itemEl = ref<HTMLElement | null>(null)
-const actionsEl = ref<HTMLElement | null>(null)
-const actionRegistry = new TreeActionRegistrationStore(() => actionsEl.value)
-const rowContentContract: PassiveContentContract = {
-  owner: 'STreeNode',
-  region: 'passive row content',
-  guidance: 'Передайте действия через persistent-actions или actions slot. / Put actions in the persistent-actions or actions slot.',
-}
-
-const TreeActionRegion = defineComponent({
-  name: 'STreeActionRegion',
-  inheritAttrs: false,
-  props: {
-    context: {
-      type: Object as PropType<TreeActionContext>,
-      required: true,
-    },
-    setElement: {
-      type: Function as PropType<(element: unknown) => void>,
-      required: true,
-    },
-  },
-  setup(regionProps, { attrs, slots }) {
-    provide(TREE_ACTION_CONTEXT_KEY, regionProps.context)
-    return () => h('div', { ...attrs, ref: regionProps.setElement }, slots.default?.())
-  },
-})
-
-function setActionsElement(element: unknown): void {
-  if (element === null || element instanceof HTMLElement) {
-    actionsEl.value = element
-    return
-  }
-  throw new Error('STree action region ref must resolve to an HTMLElement')
-}
-
-const nodeKey = computed(() => runtime.model.key(props.node))
-const nodeLabel = computed(() => runtime.model.label(props.node))
-const nodeChildren = computed(() => runtime.model.children(props.node))
-const nodeIcon = computed(() => runtime.model.icon(props.node))
-const selection = computed(() => runtime.selection.value)
-const multipleKeys = computed(() => runtime.multipleKeys(props.node))
-const hasChildren = computed(() => nodeChildren.value.length > 0)
-const isExpanded = computed(() => runtime.expanded.value.has(nodeKey.value))
-const isTreeItemDisabled = computed(() => runtime.model.disabled(props.node))
-const isSelectionDisabled = computed(() =>
-  isTreeItemDisabled.value
-  || (selection.value.mode === 'multiple' && multipleKeys.value.length === 0),
-)
-const isSelected = computed(() => {
-  if (selection.value.mode === 'none') return false
-  if (selection.value.mode === 'single') return selection.value.key === nodeKey.value
-  return multipleKeys.value.length > 0
-    && multipleKeys.value.every((key) => selection.value.mode === 'multiple' && selection.value.keys.has(key))
-})
-const isPartiallySelected = computed(() => {
-  if (selection.value.mode !== 'multiple' || multipleKeys.value.length === 0 || isSelected.value) return false
-  return multipleKeys.value.some((key) => selection.value.mode === 'multiple' && selection.value.keys.has(key))
-})
-const hasSelectionRail = computed(() =>
-  runtime.selectionRail.value === 'visible' && selection.value.mode === 'multiple',
-)
-const hasActionSlots = computed(() => Boolean(slots['persistent-actions'] || slots.actions))
-const isRowInteractive = computed(() =>
-  selection.value.mode === 'single'
-  || selection.value.mode === 'multiple'
-  || (hasChildren.value && runtime.expandControl.value === 'row'),
-)
-const isActive = computed(() => runtime.activeKey.value === nodeKey.value)
-const itemId = computed(() => `s-tree-item-${selectionKeyToken('STree', nodeKey.value, 'rendered node key')}`)
-const nodeIndent = computed(() => {
-  if (runtime.density.value === 'compact') return `${props.level * 0.85 + 0.25}rem`
-  return `${props.level === 0 ? 1 : props.level * 1.5}rem`
-})
-const toggleLabel = computed(() => t(
-  isExpanded.value ? 'tree.collapseNode' : 'tree.expandNode',
-  { label: nodeLabel.value },
-))
-const selectionLabel = computed(() => t(
-  isSelected.value || isPartiallySelected.value ? 'tree.deselectNode' : 'tree.selectNode',
-  { label: nodeLabel.value },
-))
-const selectionPressedState = computed(() => isPartiallySelected.value ? 'mixed' : isSelected.value)
-const selectionCheckedState = computed(() => isPartiallySelected.value ? 'mixed' : isSelected.value)
-
-function toggle(): void {
-  runtime.toggleNode(props.node)
-}
-
-function select(): void {
-  if (isSelectionDisabled.value) return
-  if (selection.value.mode === 'multiple') runtime.checkNode(props.node)
-  else if (selection.value.mode === 'single') runtime.selectNode(props.node)
-}
-
-function activateRow(origin: TreeActivationOrigin): void {
-  if (runtime.expandControl.value === 'row' && hasChildren.value) {
-    toggle()
-    return
-  }
-  if (selection.value.mode === 'multiple') {
-    if (hasChildren.value) {
-      toggle()
-      return
-    }
-  }
-  if (selection.value.mode === 'single') runtime.selectNode(props.node)
-  if (!hasChildren.value) runtime.activateNode(props.node, origin)
-}
-
-function handleRowClick(): void {
-  runtime.activeKey.value = nodeKey.value
-  itemEl.value?.focus({ preventScroll: true })
-  if (isTreeItemDisabled.value) return
-  activateRow('pointer')
-}
-
-function eventElement(event: Event): Element | null {
-  return event.target instanceof Element ? event.target : null
-}
-
-function belongsToActions(event: Event): boolean {
-  const target = eventElement(event)
-  return Boolean(target && actionsEl.value?.contains(target))
-}
-
-function handleTreeItemClick(event: MouseEvent): void {
-  const owningTreeItem = event.composedPath().find((target) => (
-    target instanceof HTMLElement && target.getAttribute('role') === 'treeitem'
-  ))
-  if (owningTreeItem !== itemEl.value) return
-  if (belongsToActions(event)) return
-  handleRowClick()
-}
-
-function returnToTreeItem(): void {
-  runtime.activeKey.value = nodeKey.value
-  itemEl.value?.focus({ preventScroll: true })
-}
-
-function activateToggleAffordance(): void {
-  returnToTreeItem()
-  toggle()
-}
-
-function activateSelectionAffordance(): void {
-  returnToTreeItem()
-  select()
-}
-
-const scope = computed<STreeNodeContentScope<T, K>>(() => ({
-  node: props.node,
-  key: nodeKey.value,
-  isSelected: isSelected.value,
-  isPartiallySelected: isPartiallySelected.value,
-  isExpanded: isExpanded.value,
-  hasChildren: hasChildren.value,
-  toggle,
-  select,
-  level: props.level,
-  density: runtime.density.value,
-  actionsLayout: runtime.actionsLayout.value,
-  expandControl: runtime.expandControl.value,
-  selectionRail: runtime.selectionRail.value,
-  rowVariant: runtime.rowVariant.value,
-}))
-
-function registration(): RegisteredTreeItem<T, K> {
-  const element = itemEl.value
-  if (!element) throw new Error('STreeNode registration requires a mounted treeitem element')
-  return {
-    key: nodeKey.value,
-    parentKey: props.parentKey,
-    node: props.node,
-    element,
-    activate: activateRow,
-    select,
-    toggle,
-    expanded: () => isExpanded.value,
-    hasChildren: () => hasChildren.value,
-    disabled: () => isTreeItemDisabled.value,
-  }
-}
-
-function enterActions(): void {
-  actionRegistry.orderedEnabled()[0]?.focus({ preventScroll: true })
-}
-
-function handleActionsKeydown(event: KeyboardEvent): void {
-  const actions = actionRegistry.orderedEnabled()
-  const currentAction = actionRegistry.actionForTarget(event.target)
-  const currentIndex = currentAction ? actions.indexOf(currentAction) : -1
-  if (event.key === 'Escape') {
-    event.preventDefault()
-    event.stopPropagation()
-    returnToTreeItem()
-    return
-  }
-  if (event.key === 'Tab') {
-    event.preventDefault()
-    event.stopPropagation()
-    const next = actions[currentIndex + (event.shiftKey ? -1 : 1)]
-    if (next) next.focus({ preventScroll: true })
-    else returnToTreeItem()
-    return
-  }
-  if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) return
-  event.preventDefault()
-  event.stopPropagation()
-  const nextIndex = event.key === 'Home'
-    ? 0
-    : event.key === 'End'
-      ? actions.length - 1
-      : currentIndex + (event.key === 'ArrowLeft' || event.key === 'ArrowUp' ? -1 : 1)
-  actions[nextIndex]?.focus({ preventScroll: true })
-}
-
-function handleTreeItemKeydown(event: KeyboardEvent): void {
-  if (belongsToActions(event)) {
-    if (actionRegistry.actionForTarget(event.target)) handleActionsKeydown(event)
-    return
-  }
-  if (event.target !== itemEl.value) return
-  if (event.key === 'F2' && actionRegistry.orderedEnabled().length > 0) {
-    event.preventDefault()
-    enterActions()
-    return
-  }
-  runtime.handleItemKeydown(registration(), event)
-}
-
-onMounted(() => {
-  runtime.register(registration())
-})
-onBeforeUnmount(() => {
-  runtime.unregister(nodeKey.value)
-})
-</script>
-
-<style lang="postcss">
-@reference "../../../styles/reference.css";
-
-.s-tree-node-wrapper {
-  --s-tree-node-rail-width: 4rem;
-  --s-tree-node-toggle-width: 1.9rem;
-  position: relative;
-  list-style: none;
-}
-
-.s-tree-node-wrapper--compact {
-  --s-tree-node-rail-width: 3.15rem;
-  --s-tree-node-toggle-width: 1.62rem;
-}
-
-.s-tree-node-hitbox {
-  padding-block: 0.08rem;
-  border-bottom: var(--s-tree-row-border-bottom);
-  background: var(--s-tree-row-background);
-  transition: background-color var(--s-motion-fast) ease;
-}
-
-.s-tree-node-hitbox:hover,
-.s-tree-node-hitbox:focus-within {
-  background: var(--color-surface-100);
-}
-
-.s-tree-node-wrapper:focus-visible > .s-tree-node-hitbox {
-  outline: var(--s-focus-ring-width) solid var(--s-focus-ring-strong-color);
-  outline-offset: var(--s-focus-ring-inset-offset);
-}
-
-.s-tree-node-row {
-  display: flex;
-  min-width: 0;
-  align-items: flex-start;
-  padding-inline: 1rem;
-}
-
-.s-tree-node-row--with-selection-rail {
-  align-items: stretch;
-  padding-left: 0.25rem;
-}
-
-.s-tree-node-row--rail-selected,
-.s-tree-node-row--rail-partial {
-  background: var(--s-tree-row-selected-bg);
-}
-
-.s-tree-node-content-shell {
-  display: flex;
-  min-width: 0;
-  flex: 1 1 auto;
-  align-items: stretch;
-}
-
-.s-tree-node-selection-rail {
-  display: flex;
-  width: var(--s-tree-node-rail-width);
-  flex: 0 0 var(--s-tree-node-rail-width);
-  align-items: center;
-  justify-content: center;
-  border-right: 1px solid color-mix(in srgb, var(--color-surface-200) 76%, transparent);
-  padding: 0.16rem 0.5rem 0.16rem 0;
-}
-
-.s-tree-node-toggle-slot {
-  position: relative;
-  display: flex;
-  width: var(--s-tree-node-toggle-width);
-  min-height: 100%;
-  flex: 0 0 var(--s-tree-node-toggle-width);
-  align-self: stretch;
-  align-items: flex-start;
-  justify-content: center;
-  margin-right: 0.42rem;
-  padding-top: 0.28rem;
-  color: var(--color-surface-500);
-}
-
-.s-tree-node-toggle-slot--expanded::before {
-  position: absolute;
-  top: 1.88rem;
-  bottom: -0.22rem;
-  left: 50%;
-  width: 1px;
-  content: "";
-  background: var(--s-tree-branch-active-color);
-}
-
-.s-tree-node {
-  display: flex;
-  min-width: 0;
-  min-height: 3rem;
-  align-items: center;
-  justify-content: space-between;
-  border-radius: var(--radius-xs);
-  padding: 0.42rem 0.5rem;
-  color: var(--color-surface-700);
-}
-
-.s-tree-node__layout {
-  @apply grid w-full items-center gap-x-6;
-  grid-template-columns: minmax(0, 1fr) auto;
-}
-
-.s-tree-node__primary {
-  @apply flex min-w-0 flex-col gap-1;
-}
-
-.s-tree-node__center {
-  @apply min-w-0;
-}
-
-.s-tree-node__trailing {
-  @apply flex min-w-0 items-center justify-end gap-4;
-}
-
-.s-tree-node__header {
-  @apply flex min-w-0 items-center gap-2;
-}
-
-.s-tree-node__icon {
-  @apply shrink-0 text-surface-400 dark:text-surface-500;
-}
-
-.s-tree-node__title {
-  @apply min-w-0 font-semibold text-surface-900 dark:text-surface-50;
-  overflow-wrap: anywhere;
-  word-break: break-word;
-}
-
-.s-tree-node__meta {
-  @apply flex flex-wrap items-center justify-end gap-3 whitespace-nowrap text-sm text-surface-600 dark:text-surface-400;
-}
-
-.s-tree-node--selected {
-  @apply bg-primary-100 font-semibold text-primary-800 dark:bg-primary-900/60 dark:text-primary-200;
-}
-
-.s-tree-node--disabled {
-  cursor: not-allowed;
-  opacity: 0.58;
-}
-
-.s-tree-node--rail-selected,
-.s-tree-node--rail-partial {
-  background: transparent;
-  color: var(--color-surface-900);
-}
-
-.s-tree-node-right,
-.s-tree-node-actions {
-  display: flex;
-  min-width: 0;
-  align-items: center;
-}
-
-.s-tree-node-actions {
-  @apply ml-auto flex shrink-0 items-center gap-1 pl-2;
-}
-
-.s-tree-node-actions__persistent,
-.s-tree-node-actions__transient {
-  @apply flex items-center gap-1;
-}
-
-.s-tree-node-actions__transient {
-  opacity: 0;
-  transition: opacity var(--s-motion-fast) ease;
-}
-
-.s-tree-node:hover .s-tree-node-actions__transient,
-.s-tree-node:focus-within .s-tree-node-actions__transient {
-  opacity: 1;
-}
-
-.s-tree-node-wrapper--compact .s-tree-node-hitbox {
-  padding-block: 0;
-}
-
-.s-tree-node-wrapper--compact .s-tree-node-row {
-  padding-right: 0.25rem;
-}
-
-.s-tree-node-wrapper--compact .s-tree-node-selection-rail {
-  padding: 0.04rem 0.38rem 0.04rem 0;
-}
-
-.s-tree-node-wrapper--compact .s-tree-node {
-  min-height: var(--s-control-hitbox-2xs);
-  gap: 0.25rem;
-  padding: 0 0.25rem;
-}
-
-.s-tree-node-children {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.s-tree-node-wrapper--overlay-actions .s-tree-node {
-  position: relative;
-  display: grid;
-  overflow: hidden;
-  grid-template-columns: minmax(0, 1fr) max-content max-content;
-  column-gap: 1.25rem;
-  padding-right: 0.78rem;
-}
-
-.s-tree-node-wrapper--overlay-actions > .s-tree-node-hitbox .s-tree-node-content-shell {
-  position: relative;
-}
-
-.s-tree-node-wrapper--overlay-actions .s-tree-node-right {
-  position: relative;
-  z-index: var(--s-layer-sticky);
-  grid-column: 3;
-  justify-content: flex-end;
-}
-
-.s-tree-node-wrapper--overlay-actions > .s-tree-node-hitbox .s-tree-node-actions {
-  position: absolute;
-  top: 50%;
-  right: 0.42rem;
-  z-index: calc(var(--s-layer-sticky) + 1);
-  width: max-content;
-  padding: 0.16rem;
-  border-radius: var(--radius-sm);
-  background: color-mix(in srgb, var(--color-surface-0) 98%, transparent);
-  box-shadow: -18px 0 24px color-mix(in srgb, var(--color-surface-0) 86%, transparent);
-  opacity: 0;
-  pointer-events: none;
-  transform: translateY(-50%);
-  transition: opacity var(--s-motion-fast) ease, transform var(--s-motion-fast) ease;
-}
-
-.s-tree-node-wrapper--overlay-actions > .s-tree-node-hitbox .s-tree-node-actions--has-persistent {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.s-tree-node-wrapper--overlay-actions > .s-tree-node-hitbox:hover > .s-tree-node-row > .s-tree-node-content-shell > .s-tree-node-actions,
-.s-tree-node-wrapper--overlay-actions > .s-tree-node-hitbox:focus-within > .s-tree-node-row > .s-tree-node-content-shell > .s-tree-node-actions,
-.s-tree-node-wrapper--overlay-actions > .s-tree-node-hitbox:hover .s-tree-node > .s-tree-node-right > .s-tree-node-actions,
-.s-tree-node-wrapper--overlay-actions > .s-tree-node-hitbox:focus-within .s-tree-node > .s-tree-node-right > .s-tree-node-actions {
-  opacity: 1;
-  pointer-events: auto;
-  transform: translate(-0.04rem, -50%);
-}
-
-.s-tree-node-wrapper--row-table .s-tree-node-hitbox:hover,
-.s-tree-node-wrapper--row-table .s-tree-node-hitbox:focus-within {
-  background:
-    linear-gradient(90deg, color-mix(in srgb, var(--color-success-50) 36%, transparent), transparent 62%),
-    var(--color-surface-50);
-}
-
-.s-tree-node-wrapper--row-table .s-tree-node {
-  border-radius: 0;
-}
-
-.s-tree-node-wrapper--row-table .s-tree-node--rail-selected,
-.s-tree-node-wrapper--row-table .s-tree-node--rail-partial {
-  background: transparent;
-}
-
-.s-tree-node-wrapper--row-table .s-tree-node-right {
-  align-self: stretch;
-}
-
-.s-tree-node-wrapper--row-table .s-tree-node__meta {
-  height: 100%;
-}
-</style>