@pgcorp/ui-kit 0.1.0

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

@@ -0,0 +1,761 @@
+<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 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 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(() =>
+  `${isExpanded.value ? 'Свернуть' : 'Развернуть'} узел ${nodeLabel.value}`,
+)
+const selectionLabel = computed(() =>
+  `${isSelected.value || isPartiallySelected.value ? 'Снять выбор' : 'Выбрать'}: ${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: 1.75rem;
+  gap: 0.25rem;
+  padding: 0 0.25rem;
+}
+
+.s-tree-node-wrapper--overlay-actions .s-tree-node {
+  position: relative;
+  display: grid;
+  overflow: hidden;
+  grid-template-columns: minmax(0, 1fr) max-content;
+  gap: 1.25rem;
+  padding-right: 0.78rem;
+}
+
+.s-tree-node-wrapper--overlay-actions .s-tree-node-right {
+  position: relative;
+  z-index: var(--s-layer-sticky);
+  grid-column: 2;
+  justify-content: flex-end;
+}
+
+.s-tree-node-wrapper--overlay-actions .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;
+  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-actions--has-persistent {
+  opacity: 1;
+}
+
+.s-tree-node-wrapper--overlay-actions .s-tree-node:hover .s-tree-node-actions,
+.s-tree-node-wrapper--overlay-actions .s-tree-node:focus-within .s-tree-node-actions {
+  opacity: 1;
+  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>