@skygraph/styles 0.2.4 → 0.6.6

package/components/tree.css

@@ -1,601 +1,601 @@
-/* === Tree === */
-
-.sg-tree {
-  font-size: var(--sg-font-size);
-  color: var(--sg-color-text);
-  line-height: var(--sg-line-height);
-  position: relative;
-  outline: none;
-}
-
-.sg-tree:focus-visible {
-  outline: 2px solid var(--sg-color-primary);
-  outline-offset: -2px;
-  border-radius: var(--sg-border-radius);
-}
-
-.sg-tree-empty {
-  padding: var(--sg-padding-lg);
-  text-align: center;
-  color: var(--sg-color-text-tertiary);
-}
-
-/* ═══════════════════════════════════════════
-   SEARCH BAR
-   ═══════════════════════════════════════════ */
-
-.sg-tree-search {
-  position: relative;
-  margin-bottom: var(--sg-margin-sm);
-}
-
-.sg-tree-search-input {
-  width: 100%;
-  height: 32px;
-  padding: 0 28px 0 var(--sg-padding-sm);
-  border: 1px solid var(--sg-color-border);
-  border-radius: var(--sg-border-radius);
-  background: var(--sg-color-bg-container);
-  color: var(--sg-color-text);
-  font-size: var(--sg-font-size);
-  outline: none;
-  transition:
-    border-color var(--sg-transition-duration) var(--sg-transition-timing),
-    box-shadow var(--sg-transition-duration) var(--sg-transition-timing);
-  box-sizing: border-box;
-}
-
-.sg-tree-search-input::placeholder {
-  color: var(--sg-color-text-tertiary);
-}
-
-.sg-tree-search-input:focus {
-  border-color: var(--sg-color-primary);
-  box-shadow: 0 0 0 2px var(--sg-color-primary-bg);
-}
-
-.sg-tree-search-clear {
-  position: absolute;
-  right: 6px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  background: none;
-  color: var(--sg-color-text-tertiary);
-  cursor: pointer;
-  font-size: 14px;
-  border-radius: 50%;
-  padding: 0;
-  line-height: 1;
-  transition:
-    color var(--sg-transition-duration) var(--sg-transition-timing),
-    background var(--sg-transition-duration) var(--sg-transition-timing);
-}
-
-.sg-tree-search-clear:hover {
-  color: var(--sg-color-text);
-  background: var(--sg-color-bg-hover);
-}
-
-/* ═══════════════════════════════════════════
-   TOOLBAR
-   ═══════════════════════════════════════════ */
-
-.sg-tree-toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--sg-padding-xs) 0;
-  margin-bottom: var(--sg-margin-xs);
-  border-bottom: 1px solid var(--sg-color-border);
-}
-
-.sg-tree-toolbar-actions {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-}
-
-.sg-tree-toolbar-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 26px;
-  height: 26px;
-  border: none;
-  background: none;
-  color: var(--sg-color-text-secondary);
-  cursor: pointer;
-  border-radius: var(--sg-border-radius-sm);
-  font-size: 14px;
-  padding: 0;
-  transition:
-    color var(--sg-transition-duration) var(--sg-transition-timing),
-    background var(--sg-transition-duration) var(--sg-transition-timing);
-}
-
-.sg-tree-toolbar-btn:hover {
-  color: var(--sg-color-primary);
-  background: var(--sg-color-bg-hover);
-}
-
-.sg-tree-toolbar-divider {
-  width: 1px;
-  height: 16px;
-  background: var(--sg-color-border);
-  margin: 0 4px;
-}
-
-.sg-tree-toolbar-extra {
-  display: flex;
-  align-items: center;
-}
-
-/* ═══════════════════════════════════════════
-   NODE
-   ═══════════════════════════════════════════ */
-
-.sg-tree-node {
-  display: flex;
-  align-items: center;
-  padding: 2px 4px;
-  cursor: default;
-  transition: background-color var(--sg-transition-duration) var(--sg-transition-timing);
-  border-radius: var(--sg-border-radius-sm);
-  min-height: 28px;
-  position: relative;
-  user-select: none;
-}
-
-.sg-tree-node:hover {
-  background: var(--sg-color-bg-hover);
-}
-
-.sg-tree-node-selected {
-  background: var(--sg-color-primary-bg);
-}
-
-.sg-tree-node-selected:hover {
-  background: var(--sg-color-primary-bg);
-}
-
-.sg-tree-node-disabled {
-  color: var(--sg-color-text-disabled);
-  cursor: not-allowed;
-}
-
-.sg-tree-node-disabled:hover {
-  background: transparent;
-}
-
-.sg-tree-disabled .sg-tree-node {
-  color: var(--sg-color-text-disabled);
-  cursor: not-allowed;
-}
-
-.sg-tree-disabled .sg-tree-node:hover {
-  background: transparent;
-}
-
-/* Focused node */
-
-.sg-tree-node-focused {
-  outline: 2px solid var(--sg-color-primary);
-  outline-offset: -2px;
-  z-index: 1;
-}
-
-.sg-tree-node-focused.sg-tree-node-selected {
-  outline-color: var(--sg-color-primary);
-}
-
-/* Dragging state */
-
-.sg-tree-node-dragging {
-  opacity: 0.4;
-}
-
-/* Block node */
-
-.sg-tree-block-node .sg-tree-node {
-  display: flex;
-}
-
-.sg-tree-block-node .sg-tree-title {
-  flex: 1;
-}
-
-/* ═══════════════════════════════════════════
-   SWITCHER
-   ═══════════════════════════════════════════ */
-
-.sg-tree-switcher {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  flex-shrink: 0;
-  cursor: pointer;
-  user-select: none;
-  color: var(--sg-color-text-secondary);
-  font-size: 12px;
-}
-
-.sg-tree-switcher-arrow {
-  transition: transform 0.2s ease;
-}
-
-.sg-tree-switcher-arrow-open {
-  transform: rotate(90deg);
-}
-
-.sg-tree-switcher-open {
-  /* reserved */
-}
-
-.sg-tree-switcher-close {
-  /* reserved */
-}
-
-.sg-tree-switcher-noop {
-  cursor: default;
-  width: 24px;
-}
-
-.sg-tree-switcher-leaf {
-  cursor: default;
-  color: var(--sg-color-text-tertiary);
-  font-size: 10px;
-}
-
-.sg-tree-switcher-leaf-icon {
-  cursor: default;
-}
-
-.sg-tree-switcher-loading {
-  cursor: default;
-}
-
-.sg-tree-switcher:hover:not(.sg-tree-switcher-noop):not(.sg-tree-switcher-leaf):not(
-    .sg-tree-switcher-loading
-  ) {
-  color: var(--sg-color-primary);
-}
-
-/* ═══════════════════════════════════════════
-   CHECKBOX IN TREE
-   ═══════════════════════════════════════════ */
-
-.sg-tree-node .sg-checkbox {
-  margin-right: var(--sg-margin-xs);
-  flex-shrink: 0;
-}
-
-/* ═══════════════════════════════════════════
-   ICON
-   ═══════════════════════════════════════════ */
-
-.sg-tree-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  margin-right: var(--sg-margin-xs);
-  flex-shrink: 0;
-  font-size: var(--sg-font-size);
-}
-
-/* ═══════════════════════════════════════════
-   TITLE
-   ═══════════════════════════════════════════ */
-
-.sg-tree-title {
-  display: inline-flex;
-  align-items: center;
-  padding: 0 var(--sg-padding-xs);
-  border-radius: var(--sg-border-radius-sm);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-height: 22px;
-}
-
-.sg-tree-title-selectable {
-  cursor: pointer;
-}
-
-.sg-tree-title-selectable:hover {
-  color: var(--sg-color-primary);
-}
-
-.sg-tree-node-selected .sg-tree-title {
-  color: var(--sg-color-primary);
-  font-weight: 500;
-}
-
-/* ═══════════════════════════════════════════
-   SEARCH HIGHLIGHT
-   ═══════════════════════════════════════════ */
-
-.sg-tree-highlight {
-  color: var(--sg-color-error);
-  font-weight: 600;
-  background: var(--sg-color-warning-bg, rgba(255, 200, 0, 0.15));
-  border-radius: 2px;
-  padding: 0 1px;
-}
-
-/* ═══════════════════════════════════════════
-   INLINE EDIT
-   ═══════════════════════════════════════════ */
-
-.sg-tree-node-editing .sg-tree-title {
-  padding: 0;
-}
-
-.sg-tree-edit-input {
-  height: 22px;
-  padding: 0 var(--sg-padding-xs);
-  border: 1px solid var(--sg-color-primary);
-  border-radius: var(--sg-border-radius-sm);
-  background: var(--sg-color-bg-container);
-  color: var(--sg-color-text);
-  font-size: var(--sg-font-size);
-  font-family: inherit;
-  outline: none;
-  box-shadow: 0 0 0 2px var(--sg-color-primary-bg);
-  min-width: 80px;
-  box-sizing: border-box;
-}
-
-/* ═══════════════════════════════════════════
-   NODE ACTIONS (hover buttons)
-   ═══════════════════════════════════════════ */
-
-.sg-tree-actions {
-  display: none;
-  align-items: center;
-  gap: 2px;
-  margin-left: auto;
-  padding-left: var(--sg-padding-xs);
-  flex-shrink: 0;
-}
-
-.sg-tree-node:hover .sg-tree-actions,
-.sg-tree-node-focused .sg-tree-actions {
-  display: flex;
-}
-
-.sg-tree-action-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  border: none;
-  background: none;
-  color: var(--sg-color-text-secondary);
-  cursor: pointer;
-  border-radius: var(--sg-border-radius-sm);
-  font-size: 12px;
-  padding: 0;
-  transition:
-    color var(--sg-transition-duration) var(--sg-transition-timing),
-    background var(--sg-transition-duration) var(--sg-transition-timing);
-}
-
-.sg-tree-action-btn:hover {
-  color: var(--sg-color-primary);
-  background: var(--sg-color-bg-hover);
-}
-
-.sg-tree-action-danger:hover {
-  color: var(--sg-color-error);
-}
-
-/*
- * Специфичность выше, чем у `.sg-tree-action-btn:hover`, чтобы победить :hover-состояние
- * в disabled-ветке без `!important`.
- */
-.sg-tree-action-btn.sg-tree-action-disabled,
-.sg-tree-action-btn.sg-tree-action-disabled:hover {
-  color: var(--sg-color-text-disabled);
-  cursor: not-allowed;
-  background: none;
-}
-
-/* ═══════════════════════════════════════════
-   STATUS INDICATORS
-   ═══════════════════════════════════════════ */
-
-.sg-tree-status {
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  margin-right: 6px;
-  flex-shrink: 0;
-}
-
-.sg-tree-status-success {
-  background: var(--sg-color-success);
-}
-.sg-tree-status-warning {
-  background: var(--sg-color-warning);
-}
-.sg-tree-status-error {
-  background: var(--sg-color-error);
-}
-.sg-tree-status-info {
-  background: var(--sg-color-primary);
-}
-
-.sg-tree-node-status-success {
-  border-left: 2px solid var(--sg-color-success);
-}
-.sg-tree-node-status-warning {
-  border-left: 2px solid var(--sg-color-warning);
-}
-.sg-tree-node-status-error {
-  border-left: 2px solid var(--sg-color-error);
-}
-.sg-tree-node-status-info {
-  border-left: 2px solid var(--sg-color-primary);
-}
-
-/* ═══════════════════════════════════════════
-   CONNECTING LINES (tree guide lines)
-   ═══════════════════════════════════════════ */
-
-.sg-tree-show-line .sg-tree-node {
-  position: relative;
-}
-
-.sg-tree-indent-line {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 1px;
-  background: var(--sg-color-border);
-}
-
-.sg-tree-indent-line-hidden {
-  display: none;
-}
-
-.sg-tree-indent-branch {
-  position: absolute;
-  top: 0;
-  width: 12px;
-  height: 50%;
-  border-left: 1px solid var(--sg-color-border);
-  border-bottom: 1px solid var(--sg-color-border);
-  border-bottom-left-radius: 4px;
-}
-
-.sg-tree-indent-branch-last {
-  /* same styles, parent line will be hidden via indent-line-hidden */
-}
-
-/* ═══════════════════════════════════════════
-   DIRECTORY MODE
-   ═══════════════════════════════════════════ */
-
-.sg-tree-directory .sg-tree-node {
-  padding: 2px 8px;
-}
-
-.sg-tree-directory .sg-tree-node-selected {
-  background: var(--sg-color-primary);
-}
-
-.sg-tree-directory .sg-tree-node-selected .sg-tree-title,
-.sg-tree-directory .sg-tree-node-selected .sg-tree-icon {
-  color: var(--sg-color-white);
-}
-
-.sg-tree-directory .sg-tree-node-selected .sg-tree-switcher {
-  color: var(--sg-color-white);
-}
-
-.sg-tree-directory .sg-tree-node-selected .sg-tree-status {
-  box-shadow: 0 0 0 1px var(--sg-color-white);
-}
-
-.sg-tree-directory .sg-tree-node-selected .sg-tree-actions .sg-tree-action-btn {
-  color: rgba(255, 255, 255, 0.7);
-}
-
-.sg-tree-directory .sg-tree-node-selected .sg-tree-actions .sg-tree-action-btn:hover {
-  color: var(--sg-color-white);
-  background: rgba(255, 255, 255, 0.15);
-}
-
-/* ═══════════════════════════════════════════
-   DRAG & DROP
-   ═══════════════════════════════════════════ */
-
-.sg-tree-node-draggable {
-  cursor: grab;
-}
-
-.sg-tree-node-draggable:active {
-  cursor: grabbing;
-}
-
-.sg-tree-node-drop-inner {
-  background: var(--sg-color-primary-bg);
-  outline: 1px dashed var(--sg-color-primary);
-  outline-offset: -1px;
-}
-
-/* Drop indicators use an inset box-shadow rather than a real border so the
- * node box size never changes mid-drag. A 2px border re-flowed the row on
- * every `dragover`, which shifted the hit-box and made the indicator (and
- * the whole tree) flicker/jitter. box-shadow paints without affecting
- * layout — same 2px line, no reflow. */
-.sg-tree-node-drop-before {
-  box-shadow: inset 0 2px 0 var(--sg-color-primary);
-}
-
-.sg-tree-node-drop-after {
-  box-shadow: inset 0 -2px 0 var(--sg-color-primary);
-}
-
-/* ═══════════════════════════════════════════
-   ANIMATION
-   ═══════════════════════════════════════════ */
-
-.sg-tree-animated .sg-tree-node {
-  animation: sg-tree-node-in 0.2s ease-out;
-}
-
-@keyframes sg-tree-node-in {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* ═══════════════════════════════════════════
-   VIRTUAL SCROLL
-   ═══════════════════════════════════════════ */
-
-.sg-tree-virtual-container {
-  will-change: transform;
-  outline: none;
-}
-
-.sg-tree-virtual-container:focus-visible {
-  outline: 2px solid var(--sg-color-primary);
-  outline-offset: -2px;
-  border-radius: var(--sg-border-radius);
-}
-
-.sg-tree-virtual-container::-webkit-scrollbar {
-  width: 6px;
-}
-
-.sg-tree-virtual-container::-webkit-scrollbar-thumb {
-  background: var(--sg-color-border);
-  border-radius: 3px;
-}
-
-.sg-tree-virtual-container::-webkit-scrollbar-thumb:hover {
-  background: var(--sg-color-text-tertiary);
-}
-
-.sg-tree-virtual-container::-webkit-scrollbar-track {
-  background: transparent;
-}
+/* === Tree === */
+
+.sg-tree {
+  font-size: var(--sg-font-size);
+  color: var(--sg-color-text);
+  line-height: var(--sg-line-height);
+  position: relative;
+  outline: none;
+}
+
+.sg-tree:focus-visible {
+  outline: 2px solid var(--sg-color-primary);
+  outline-offset: -2px;
+  border-radius: var(--sg-border-radius);
+}
+
+.sg-tree-empty {
+  padding: var(--sg-padding-lg);
+  text-align: center;
+  color: var(--sg-color-text-tertiary);
+}
+
+/* ═══════════════════════════════════════════
+   SEARCH BAR
+   ═══════════════════════════════════════════ */
+
+.sg-tree-search {
+  position: relative;
+  margin-bottom: var(--sg-margin-sm);
+}
+
+.sg-tree-search-input {
+  width: 100%;
+  height: 32px;
+  padding: 0 28px 0 var(--sg-padding-sm);
+  border: 1px solid var(--sg-color-border);
+  border-radius: var(--sg-border-radius);
+  background: var(--sg-color-bg-container);
+  color: var(--sg-color-text);
+  font-size: var(--sg-font-size);
+  outline: none;
+  transition:
+    border-color var(--sg-transition-duration) var(--sg-transition-timing),
+    box-shadow var(--sg-transition-duration) var(--sg-transition-timing);
+  box-sizing: border-box;
+}
+
+.sg-tree-search-input::placeholder {
+  color: var(--sg-color-text-tertiary);
+}
+
+.sg-tree-search-input:focus {
+  border-color: var(--sg-color-primary);
+  box-shadow: 0 0 0 2px var(--sg-color-primary-bg);
+}
+
+.sg-tree-search-clear {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: none;
+  color: var(--sg-color-text-tertiary);
+  cursor: pointer;
+  font-size: 14px;
+  border-radius: 50%;
+  padding: 0;
+  line-height: 1;
+  transition:
+    color var(--sg-transition-duration) var(--sg-transition-timing),
+    background var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+.sg-tree-search-clear:hover {
+  color: var(--sg-color-text);
+  background: var(--sg-color-bg-hover);
+}
+
+/* ═══════════════════════════════════════════
+   TOOLBAR
+   ═══════════════════════════════════════════ */
+
+.sg-tree-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--sg-padding-xs) 0;
+  margin-bottom: var(--sg-margin-xs);
+  border-bottom: 1px solid var(--sg-color-border);
+}
+
+.sg-tree-toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.sg-tree-toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border: none;
+  background: none;
+  color: var(--sg-color-text-secondary);
+  cursor: pointer;
+  border-radius: var(--sg-border-radius-sm);
+  font-size: 14px;
+  padding: 0;
+  transition:
+    color var(--sg-transition-duration) var(--sg-transition-timing),
+    background var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+.sg-tree-toolbar-btn:hover {
+  color: var(--sg-color-primary);
+  background: var(--sg-color-bg-hover);
+}
+
+.sg-tree-toolbar-divider {
+  width: 1px;
+  height: 16px;
+  background: var(--sg-color-border);
+  margin: 0 4px;
+}
+
+.sg-tree-toolbar-extra {
+  display: flex;
+  align-items: center;
+}
+
+/* ═══════════════════════════════════════════
+   NODE
+   ═══════════════════════════════════════════ */
+
+.sg-tree-node {
+  display: flex;
+  align-items: center;
+  padding: 2px 4px;
+  cursor: default;
+  transition: background-color var(--sg-transition-duration) var(--sg-transition-timing);
+  border-radius: var(--sg-border-radius-sm);
+  min-height: 28px;
+  position: relative;
+  user-select: none;
+}
+
+.sg-tree-node:hover {
+  background: var(--sg-color-bg-hover);
+}
+
+.sg-tree-node-selected {
+  background: var(--sg-color-primary-bg);
+}
+
+.sg-tree-node-selected:hover {
+  background: var(--sg-color-primary-bg);
+}
+
+.sg-tree-node-disabled {
+  color: var(--sg-color-text-disabled);
+  cursor: not-allowed;
+}
+
+.sg-tree-node-disabled:hover {
+  background: transparent;
+}
+
+.sg-tree-disabled .sg-tree-node {
+  color: var(--sg-color-text-disabled);
+  cursor: not-allowed;
+}
+
+.sg-tree-disabled .sg-tree-node:hover {
+  background: transparent;
+}
+
+/* Focused node */
+
+.sg-tree-node-focused {
+  outline: 2px solid var(--sg-color-primary);
+  outline-offset: -2px;
+  z-index: 1;
+}
+
+.sg-tree-node-focused.sg-tree-node-selected {
+  outline-color: var(--sg-color-primary);
+}
+
+/* Dragging state */
+
+.sg-tree-node-dragging {
+  opacity: 0.4;
+}
+
+/* Block node */
+
+.sg-tree-block-node .sg-tree-node {
+  display: flex;
+}
+
+.sg-tree-block-node .sg-tree-title {
+  flex: 1;
+}
+
+/* ═══════════════════════════════════════════
+   SWITCHER
+   ═══════════════════════════════════════════ */
+
+.sg-tree-switcher {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  cursor: pointer;
+  user-select: none;
+  color: var(--sg-color-text-secondary);
+  font-size: 12px;
+}
+
+.sg-tree-switcher-arrow {
+  transition: transform 0.2s ease;
+}
+
+.sg-tree-switcher-arrow-open {
+  transform: rotate(90deg);
+}
+
+.sg-tree-switcher-open {
+  /* reserved */
+}
+
+.sg-tree-switcher-close {
+  /* reserved */
+}
+
+.sg-tree-switcher-noop {
+  cursor: default;
+  width: 24px;
+}
+
+.sg-tree-switcher-leaf {
+  cursor: default;
+  color: var(--sg-color-text-tertiary);
+  font-size: 10px;
+}
+
+.sg-tree-switcher-leaf-icon {
+  cursor: default;
+}
+
+.sg-tree-switcher-loading {
+  cursor: default;
+}
+
+.sg-tree-switcher:hover:not(.sg-tree-switcher-noop):not(.sg-tree-switcher-leaf):not(
+    .sg-tree-switcher-loading
+  ) {
+  color: var(--sg-color-primary);
+}
+
+/* ═══════════════════════════════════════════
+   CHECKBOX IN TREE
+   ═══════════════════════════════════════════ */
+
+.sg-tree-node .sg-checkbox {
+  margin-right: var(--sg-margin-xs);
+  flex-shrink: 0;
+}
+
+/* ═══════════════════════════════════════════
+   ICON
+   ═══════════════════════════════════════════ */
+
+.sg-tree-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-right: var(--sg-margin-xs);
+  flex-shrink: 0;
+  font-size: var(--sg-font-size);
+}
+
+/* ═══════════════════════════════════════════
+   TITLE
+   ═══════════════════════════════════════════ */
+
+.sg-tree-title {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 var(--sg-padding-xs);
+  border-radius: var(--sg-border-radius-sm);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-height: 22px;
+}
+
+.sg-tree-title-selectable {
+  cursor: pointer;
+}
+
+.sg-tree-title-selectable:hover {
+  color: var(--sg-color-primary);
+}
+
+.sg-tree-node-selected .sg-tree-title {
+  color: var(--sg-color-primary);
+  font-weight: 500;
+}
+
+/* ═══════════════════════════════════════════
+   SEARCH HIGHLIGHT
+   ═══════════════════════════════════════════ */
+
+.sg-tree-highlight {
+  color: var(--sg-color-error);
+  font-weight: 600;
+  background: var(--sg-color-warning-bg, rgba(255, 200, 0, 0.15));
+  border-radius: 2px;
+  padding: 0 1px;
+}
+
+/* ═══════════════════════════════════════════
+   INLINE EDIT
+   ═══════════════════════════════════════════ */
+
+.sg-tree-node-editing .sg-tree-title {
+  padding: 0;
+}
+
+.sg-tree-edit-input {
+  height: 22px;
+  padding: 0 var(--sg-padding-xs);
+  border: 1px solid var(--sg-color-primary);
+  border-radius: var(--sg-border-radius-sm);
+  background: var(--sg-color-bg-container);
+  color: var(--sg-color-text);
+  font-size: var(--sg-font-size);
+  font-family: inherit;
+  outline: none;
+  box-shadow: 0 0 0 2px var(--sg-color-primary-bg);
+  min-width: 80px;
+  box-sizing: border-box;
+}
+
+/* ═══════════════════════════════════════════
+   NODE ACTIONS (hover buttons)
+   ═══════════════════════════════════════════ */
+
+.sg-tree-actions {
+  display: none;
+  align-items: center;
+  gap: 2px;
+  margin-left: auto;
+  padding-left: var(--sg-padding-xs);
+  flex-shrink: 0;
+}
+
+.sg-tree-node:hover .sg-tree-actions,
+.sg-tree-node-focused .sg-tree-actions {
+  display: flex;
+}
+
+.sg-tree-action-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border: none;
+  background: none;
+  color: var(--sg-color-text-secondary);
+  cursor: pointer;
+  border-radius: var(--sg-border-radius-sm);
+  font-size: 12px;
+  padding: 0;
+  transition:
+    color var(--sg-transition-duration) var(--sg-transition-timing),
+    background var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+.sg-tree-action-btn:hover {
+  color: var(--sg-color-primary);
+  background: var(--sg-color-bg-hover);
+}
+
+.sg-tree-action-danger:hover {
+  color: var(--sg-color-error);
+}
+
+/*
+ * Специфичность выше, чем у `.sg-tree-action-btn:hover`, чтобы победить :hover-состояние
+ * в disabled-ветке без `!important`.
+ */
+.sg-tree-action-btn.sg-tree-action-disabled,
+.sg-tree-action-btn.sg-tree-action-disabled:hover {
+  color: var(--sg-color-text-disabled);
+  cursor: not-allowed;
+  background: none;
+}
+
+/* ═══════════════════════════════════════════
+   STATUS INDICATORS
+   ═══════════════════════════════════════════ */
+
+.sg-tree-status {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  margin-right: 6px;
+  flex-shrink: 0;
+}
+
+.sg-tree-status-success {
+  background: var(--sg-color-success);
+}
+.sg-tree-status-warning {
+  background: var(--sg-color-warning);
+}
+.sg-tree-status-error {
+  background: var(--sg-color-error);
+}
+.sg-tree-status-info {
+  background: var(--sg-color-primary);
+}
+
+.sg-tree-node-status-success {
+  border-left: 2px solid var(--sg-color-success);
+}
+.sg-tree-node-status-warning {
+  border-left: 2px solid var(--sg-color-warning);
+}
+.sg-tree-node-status-error {
+  border-left: 2px solid var(--sg-color-error);
+}
+.sg-tree-node-status-info {
+  border-left: 2px solid var(--sg-color-primary);
+}
+
+/* ═══════════════════════════════════════════
+   CONNECTING LINES (tree guide lines)
+   ═══════════════════════════════════════════ */
+
+.sg-tree-show-line .sg-tree-node {
+  position: relative;
+}
+
+.sg-tree-indent-line {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: var(--sg-color-border);
+}
+
+.sg-tree-indent-line-hidden {
+  display: none;
+}
+
+.sg-tree-indent-branch {
+  position: absolute;
+  top: 0;
+  width: 12px;
+  height: 50%;
+  border-left: 1px solid var(--sg-color-border);
+  border-bottom: 1px solid var(--sg-color-border);
+  border-bottom-left-radius: 4px;
+}
+
+.sg-tree-indent-branch-last {
+  /* same styles, parent line will be hidden via indent-line-hidden */
+}
+
+/* ═══════════════════════════════════════════
+   DIRECTORY MODE
+   ═══════════════════════════════════════════ */
+
+.sg-tree-directory .sg-tree-node {
+  padding: 2px 8px;
+}
+
+.sg-tree-directory .sg-tree-node-selected {
+  background: var(--sg-color-primary);
+}
+
+.sg-tree-directory .sg-tree-node-selected .sg-tree-title,
+.sg-tree-directory .sg-tree-node-selected .sg-tree-icon {
+  color: var(--sg-color-white);
+}
+
+.sg-tree-directory .sg-tree-node-selected .sg-tree-switcher {
+  color: var(--sg-color-white);
+}
+
+.sg-tree-directory .sg-tree-node-selected .sg-tree-status {
+  box-shadow: 0 0 0 1px var(--sg-color-white);
+}
+
+.sg-tree-directory .sg-tree-node-selected .sg-tree-actions .sg-tree-action-btn {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.sg-tree-directory .sg-tree-node-selected .sg-tree-actions .sg-tree-action-btn:hover {
+  color: var(--sg-color-white);
+  background: rgba(255, 255, 255, 0.15);
+}
+
+/* ═══════════════════════════════════════════
+   DRAG & DROP
+   ═══════════════════════════════════════════ */
+
+.sg-tree-node-draggable {
+  cursor: grab;
+}
+
+.sg-tree-node-draggable:active {
+  cursor: grabbing;
+}
+
+.sg-tree-node-drop-inner {
+  background: var(--sg-color-primary-bg);
+  outline: 1px dashed var(--sg-color-primary);
+  outline-offset: -1px;
+}
+
+/* Drop indicators use an inset box-shadow rather than a real border so the
+ * node box size never changes mid-drag. A 2px border re-flowed the row on
+ * every `dragover`, which shifted the hit-box and made the indicator (and
+ * the whole tree) flicker/jitter. box-shadow paints without affecting
+ * layout — same 2px line, no reflow. */
+.sg-tree-node-drop-before {
+  box-shadow: inset 0 2px 0 var(--sg-color-primary);
+}
+
+.sg-tree-node-drop-after {
+  box-shadow: inset 0 -2px 0 var(--sg-color-primary);
+}
+
+/* ═══════════════════════════════════════════
+   ANIMATION
+   ═══════════════════════════════════════════ */
+
+.sg-tree-animated .sg-tree-node {
+  animation: sg-tree-node-in 0.2s ease-out;
+}
+
+@keyframes sg-tree-node-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ═══════════════════════════════════════════
+   VIRTUAL SCROLL
+   ═══════════════════════════════════════════ */
+
+.sg-tree-virtual-container {
+  will-change: transform;
+  outline: none;
+}
+
+.sg-tree-virtual-container:focus-visible {
+  outline: 2px solid var(--sg-color-primary);
+  outline-offset: -2px;
+  border-radius: var(--sg-border-radius);
+}
+
+.sg-tree-virtual-container::-webkit-scrollbar {
+  width: 6px;
+}
+
+.sg-tree-virtual-container::-webkit-scrollbar-thumb {
+  background: var(--sg-color-border);
+  border-radius: 3px;
+}
+
+.sg-tree-virtual-container::-webkit-scrollbar-thumb:hover {
+  background: var(--sg-color-text-tertiary);
+}
+
+.sg-tree-virtual-container::-webkit-scrollbar-track {
+  background: transparent;
+}