atomicuilibrary 0.0.1 → 0.1.3

package/dist/cjs/ui-tree.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-ClkOYpT8.js');
+var index = require('./index-C32cWsm5.js');
 
-const treeCss = () => `@charset "UTF-8";.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;width:100%;--tree-bg:var(--bg-primary, #ffffff);--tree-text:var(--text-primary, #1f2937);--tree-text-muted:var(--color-primary, #6b7280);--tree-border-color:var(--border-default, #e5e7eb);--tree-primary:var(--color-success, #3dcd58);--tree-primary-50:rgba(var(--color-success-rgb, 61, 205, 88), 0.08);--tree-primary-100:rgba(var(--color-success-rgb, 61, 205, 88), 0.15);--tree-primary-200:rgba(var(--color-success-rgb, 61, 205, 88), 0.25);--tree-muted:var(--color-primary, #9ca3af);--tree-node-hover-bg:rgba(0, 0, 0, 0.02);--tree-line-color-default:rgba(0, 0, 0, 0.15);--tree-error:var(--color-danger, #ef4444);--tree-info:var(--color-primary, #10b981);--tree-success:var(--color-success, #10b981);--tree-warning:var(--color-warning, #f59e0b)}.tree-container{width:100%;background:var(--tree-bg);border-radius:8px;overflow:visible;}.tree-container.tree-theme-dark{--tree-bg:var(--bg-primary, #1f2937);--tree-text:var(--bg-primary, #f3f4f6);--tree-text-muted:var(--color-primary, #9ca3af);--tree-border-color:var(--border-default, #374151);--tree-node-hover-bg:rgba(255, 255, 255, 0.05);--tree-line-color-default:rgba(255, 255, 255, 0.1);background:var(--tree-bg);color:var(--tree-text)}.tree-container.tree-variant-bordered{border:1px solid var(--tree-border-color)}.tree-container.tree-variant-rounded{border-radius:12px}.tree-container.tree-variant-rounded .tree-node{border-radius:8px}.tree-container.tree-variant-minimal{background:transparent}.tree-container.tree-variant-minimal .tree-node{background:transparent}.tree-container.tree-variant-minimal .tree-node:hover{background:rgba(0, 0, 0, 0.02)}.tree-container.tree-variant-glass{--tree-glass-bg:rgba(255, 255, 255, 0.1);--tree-glass-border:rgba(255, 255, 255, 0.2);--tree-glass-text:var(--text-primary, #111827);background:var(--tree-glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--tree-glass-border);box-shadow:0 8px 32px 0 rgba(31, 38, 135, 0.1)}.tree-container.tree-variant-glass .tree-node{color:var(--tree-glass-text)}.tree-container.tree-variant-glass .tree-node:hover{background:rgba(255, 255, 255, 0.2)}.tree-container.tree-variant-glass .tree-node.tree-node-selected{background:var(--tree-primary-200)}.tree-container.tree-variant-glass .tree-search input{background:rgba(255, 255, 255, 0.2);border-color:rgba(255, 255, 255, 0.3);color:var(--tree-text)}.tree-container.tree-variant-glass .tree-search input::placeholder{color:var(--tree-text-muted)}.tree-container.tree-variant-glass .tree-line{background:var(--tree-line-color-default)}.tree-container.tree-glow{box-shadow:0 0 20px var(--tree-primary-200);border-color:var(--tree-primary-100)}.tree-theme-dark.tree-variant-glass{--tree-glass-bg:rgba(17, 24, 39, 0.4);--tree-glass-border:rgba(255, 255, 255, 0.1);--tree-glass-text:var(--tree-text);background:var(--tree-glass-bg);border:1px solid var(--tree-glass-border)}.tree-theme-dark.tree-variant-glass .tree-node{color:var(--tree-glass-text)}.tree-theme-dark.tree-variant-glass .tree-node:hover{background:rgba(255, 255, 255, 0.1)}.tree-theme-dark.tree-variant-glass .tree-search input{background:rgba(0, 0, 0, 0.2);border-color:var(--tree-glass-border)}.tree-theme-dark.tree-variant-glass .tree-line{background:var(--tree-glass-border)}.tree-search{position:relative;padding:16px;border-bottom:1px solid var(--tree-border-color)}.tree-search ui-icon{position:absolute;left:28px;top:50%;transform:translateY(-50%);color:var(--tree-muted);font-size:14px}.tree-search input{width:100%;padding:10px 12px 10px 36px;border:1px solid var(--tree-border-color);background:transparent;color:inherit;border-radius:6px;font-size:14px;outline:none;transition:all 0.2s}.tree-search input:focus{border-color:var(--tree-primary);box-shadow:0 0 0 3px var(--tree-primary-50)}.tree-search input::placeholder{color:var(--tree-muted)}.tree-theme-dark .tree-search input:focus{border-color:var(--tree-primary)}.tree-inner{position:relative}.tree-node{position:relative;display:block;width:100%}.tree-connector-harness-group{position:absolute;left:24px;top:0;width:var(--tree-indent-full, 100%);height:100%;pointer-events:none;z-index:1}.tree-v-line-container{position:absolute;left:0;top:0;width:100%;height:100%}.tree-hook-container{position:absolute;left:0;top:0;width:100%}.tree-connectors-svg{display:block;width:100%;height:100%;overflow:visible}.tree-connectors-svg path,.tree-connectors-svg line{transition:stroke 0.3s ease, stroke-width 0.3s ease, stroke-opacity 0.4s ease}.tree-connectors-svg .path-highlight{--line-color-final:var(--tree-primary) !important;stroke:var(--line-color-final) !important;stroke-opacity:1 !important;filter:drop-shadow(0 0 5px var(--tree-primary-400))}.tree-theme-dark .tree-line{--default-line-color:rgba(255, 255, 255, 0.1)}.tree-expand-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--tree-text-muted);font-size:11px;cursor:pointer;z-index:2}.tree-expand-icon:hover{color:var(--tree-primary)}.tree-expand-icon{margin-right:8px}.tree-animated .tree-node-expanded .tree-expand-icon ui-icon{transform:rotate(0deg)}.tree-animated .tree-node-collapsed .tree-expand-icon ui-icon{transform:rotate(-90deg)}.tree-expand-spacer{width:24px;height:24px;flex-shrink:0;margin-right:8px}.tree-checkbox{display:flex;align-items:center;justify-content:center}.tree-checkbox input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:var(--tree-primary)}.tree-node-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;font-size:16px;color:var(--tree-primary)}.tree-node-icon.tree-node-icon-spacer{visibility:hidden}.tree-node-icon.tree-node-icon-default{color:var(--tree-text-muted)}.tree-theme-dark .tree-node-icon.tree-node-icon-default{color:var(--tree-text-muted)}.tree-node-content{display:flex;align-items:center;gap:8px;flex:1;min-width:0;position:relative;z-index:2;cursor:pointer;transition:background-color 0.2s ease}.tree-node-content:hover{background-color:var(--tree-node-hover-bg)}.tree-node-content .tree-node-text-group{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.tree-node-content .tree-node-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:var(--tree-text)}.tree-theme-dark .tree-node-label{color:var(--tree-text)}.tree-node-spinner{display:flex;align-items:center;color:var(--tree-primary)}.tree-node-actions{display:flex;align-items:center;gap:4px;opacity:0;transition:opacity 0.2s;pointer-events:none;margin-left:8px}.tree-node:hover .tree-node-actions{opacity:1;pointer-events:auto}.tree-action-btn{background:transparent;border:none;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tree-text-muted);transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);padding:0;margin-left:2px}.tree-action-btn:hover{background:var(--tree-primary-100);color:var(--tree-primary);transform:scale(1.1);box-shadow:0 0 10px var(--tree-primary-50)}.tree-action-btn:active{transform:scale(0.95)}.tree-theme-dark .tree-action-btn{color:var(--tree-text-muted)}.tree-theme-dark .tree-action-btn:hover{background:var(--tree-node-hover-bg)}.tree-node-badge{padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600;flex-shrink:0}.tree-node-badge.tree-node-badge-default{background:var(--tree-border-color);color:var(--tree-text-muted)}.tree-node-badge.tree-node-badge-primary{background:var(--tree-primary-100);color:var(--tree-primary)}.tree-node-badge.tree-node-badge-secondary{background:var(--tree-border-color);color:var(--tree-text-muted)}.tree-node-badge.tree-node-badge-success{background:var(--tree-primary-100);color:var(--tree-success)}.tree-node-badge.tree-node-badge-danger{background:rgba(var(--color-danger-rgb, 239, 68, 68), 0.1);color:var(--tree-error)}.tree-node-badge.tree-node-badge-warning{background:rgba(var(--color-warning-rgb, 245, 158, 11), 0.1);color:var(--color-warning, #f59e0b)}.tree-node-badge.tree-node-badge-info{background:rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);color:var(--tree-info)}.tree-node-counter{display:flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;background:var(--tree-primary);color:var(--tree-bg);border-radius:11px;font-size:11px;font-weight:600;flex-shrink:0}.tree-children{overflow:hidden}.tree-animated .tree-children{animation:slideDown 0.2s ease-out}@keyframes slideDown{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.tree-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:var(--tree-text-muted)}.tree-empty i{font-size:48px;margin-bottom:12px;opacity:0.5}.tree-empty p{margin:0;font-size:14px}.tree-orientation-horizontal .tree-content{overflow-x:auto}.tree-orientation-horizontal .tree-node-wrapper{display:flex}.tree-orientation-horizontal .tree-children{display:flex;flex-direction:column;margin-left:24px;padding-left:24px;border-left:1px solid var(--tree-border-color)}.tree-orientation-horizontal .tree-node{padding-left:0}.tree-layout-org-chart .tree-content{display:flex;justify-content:center;padding:60px 40px;overflow:auto;min-height:400px}.tree-layout-org-chart .tree-node-wrapper{display:flex;flex-direction:column;align-items:center;position:relative;padding:20px 0 0 0;transition:all 0.3s ease}.tree-layout-org-chart .tree-node-wrapper::before,.tree-layout-org-chart .tree-node-wrapper::after{content:"";position:absolute;top:0;right:50%;width:50%;height:20px;border-top:var(--tree-line-width, 1px) solid var(--tree-line-color, rgba(0, 0, 0, 0.1))}.tree-layout-org-chart .tree-node-wrapper::after{right:auto;left:50%;border-left:var(--tree-line-width, 1px) solid var(--tree-line-color, rgba(0, 0, 0, 0.1))}.tree-layout-org-chart{}.tree-layout-org-chart .tree-content>.tree-node-wrapper::before,.tree-layout-org-chart .tree-content>.tree-node-wrapper::after{display:none !important}.tree-layout-org-chart .tree-content>.tree-node-wrapper{padding-top:0}.tree-layout-org-chart{}.tree-layout-org-chart .tree-node-wrapper:first-child::before{border:0 none}.tree-layout-org-chart .tree-node-wrapper:last-child::after{border:0 none}.tree-layout-org-chart .tree-node-wrapper:first-child:not(:only-child)::after{border-radius:12px 0 0 0}.tree-layout-org-chart .tree-node-wrapper:last-child:not(:only-child)::before{border-right:var(--tree-line-width, 1px) solid var(--tree-line-color, rgba(0, 0, 0, 0.1));border-radius:0 12px 0 0}.tree-layout-org-chart{}.tree-layout-org-chart .tree-node-wrapper:only-child::after{border-radius:0;border-left:var(--tree-line-width, 1px) solid var(--tree-line-color, rgba(0, 0, 0, 0.1))}.tree-layout-org-chart .tree-node-wrapper:only-child::before{display:none}.tree-layout-org-chart{}.tree-layout-org-chart .tree-node-branch>.tree-node::after{content:"";position:absolute;bottom:-20px;left:50%;width:1px;height:20px;background:var(--tree-line-color-default)}.tree-layout-org-chart .tree-node{border:1px solid var(--tree-border-color);background:var(--tree-bg);box-shadow:0 4px 12px var(--tree-primary-50);padding:12px 24px;min-width:160px;max-width:300px;justify-content:center;margin:0 15px;z-index:2;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);border-radius:10px}.tree-layout-org-chart .tree-node:hover{border-color:var(--tree-primary);box-shadow:0 12px 24px var(--tree-primary-100);transform:translateY(-4px)}.tree-layout-org-chart .tree-node.tree-node-selected{border-color:var(--tree-primary);background:var(--tree-primary-50)}.tree-layout-org-chart .tree-children{display:flex;flex-direction:row;justify-content:center;position:relative;padding-top:20px}.tree-layout-org-chart{}.tree-layout-org-chart.tree-theme-dark .tree-node{background:var(--tree-bg);border-color:var(--tree-border-color);box-shadow:0 4px 12px rgba(0, 0, 0, 0.2)}.tree-layout-org-chart.tree-theme-dark .tree-node-wrapper::before,.tree-layout-org-chart.tree-theme-dark .tree-node-wrapper::after{border-color:var(--tree-line-color-default)}.tree-layout-org-chart.tree-theme-dark .tree-node-branch>.tree-node::after{background:var(--tree-line-color-default)}.tree-hide-lines .tree-lines,.tree-hide-lines .tree-node-wrapper::before,.tree-hide-lines .tree-node-wrapper::after,.tree-hide-lines .tree-line-vertical::after,.tree-hide-lines .tree-node::after{display:none !important}.tree-variant-modern-green{--tree-bg:var(--bg-secondary, #0f172a);--tree-text:var(--bg-primary, #f8fafc);--tree-text-muted:var(--color-primary, #94a3b8);--tree-primary:var(--color-success, #10b981);--tree-line-color-default:var(--color-success, #10b981);background:var(--tree-bg);color:var(--tree-text);border:1px solid rgba(var(--color-success-rgb, 16, 185, 129), 0.2);box-shadow:0 4px 20px rgba(0, 0, 0, 0.4)}.tree-variant-modern-green .tree-node{color:var(--tree-text-muted);font-weight:500;letter-spacing:0.02em}.tree-variant-modern-green .tree-node:hover{background:var(--tree-primary-50);color:var(--tree-primary)}.tree-variant-modern-green .tree-node.tree-node-selected{background:var(--tree-primary-100);color:var(--tree-primary);border-left:2px solid var(--tree-primary)}.tree-variant-modern-green .tree-line{--default-line-color:var(--tree-primary);--line-width:2px;opacity:0.6}.tree-variant-modern-green .tree-line-curved{border-bottom-left-radius:14px}.tree-variant-modern-green .tree-search input{background:rgba(0, 0, 0, 0.3);border-color:var(--tree-primary-100);color:var(--tree-text)}.tree-variant-modern-green .tree-search input:focus{border-color:var(--tree-primary);box-shadow:0 0 0 3px var(--tree-primary-100)}.tree-variant-modern-green .tree-node-icon{color:var(--tree-primary)}.tree-variant-modern-green .tree-expand-icon{color:var(--tree-primary)}.tree-variant-modern-green .tree-expand-icon:hover{color:var(--tree-primary)}.tree-node-selected{border-top:0 none !important}.tree-node-selected::before,.tree-node-selected::after{border-top:0 none !important}.tree-node[draggable=true]{cursor:move}.tree-node:active{opacity:0.6}.tree-drop-indicator{height:2px;background:var(--tree-primary);border-radius:2px;margin:0 8px;box-shadow:0 0 6px var(--tree-primary-200);animation:pulseIndicator 0.5s ease infinite alternate}@keyframes pulseIndicator{from{opacity:0.7}to{opacity:1}}.tree-node.tree-drop-inside>.tree-node-content{outline:2px dashed var(--tree-primary);outline-offset:-2px;border-radius:6px;background:var(--tree-primary-50)}.tree-children-drop-target{background:var(--tree-primary-50);border-radius:6px}.tree-edit-input{flex:1;min-width:80px;padding:2px 8px;border:1.5px solid var(--tree-primary);border-radius:4px;font-size:13px;font-family:inherit;color:var(--tree-text);background:var(--tree-bg);outline:none;box-shadow:0 0 0 3px var(--tree-primary-50)}.tree-edit-input:focus{box-shadow:0 0 0 3px var(--tree-primary-100)}.tree-theme-dark .tree-edit-input{background:rgba(255, 255, 255, 0.05);color:var(--tree-text)}.tree-search-icon{position:absolute;left:28px;top:50%;transform:translateY(-50%);color:var(--tree-muted);pointer-events:none}.tree-search-clear{position:absolute;right:26px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--tree-text-muted);padding:4px;display:flex;align-items:center;border-radius:4px;transition:color 0.2s, background 0.2s}.tree-search-clear:hover{color:var(--tree-error);background:rgba(var(--color-danger-rgb, 239, 68, 68), 0.08)}.tree-toolbar{display:flex;align-items:center;gap:4px;padding:6px 12px;border-bottom:1px solid var(--tree-border-color);background:rgba(0, 0, 0, 0.01)}.tree-theme-dark .tree-toolbar{background:rgba(255, 255, 255, 0.02)}.tree-toolbar-sep{width:1px;height:18px;background:var(--tree-border-color);margin:0 4px}.tree-toolbar-btn{display:flex;align-items:center;gap:5px;padding:5px 10px;border:1px solid var(--tree-border-color);border-radius:6px;background:var(--tree-bg);color:var(--tree-text-muted);font-size:12px;cursor:pointer;transition:all 0.15s;white-space:nowrap}.tree-toolbar-btn:hover:not(:disabled){background:var(--tree-primary-50);color:var(--tree-primary);border-color:var(--tree-primary)}.tree-toolbar-btn:disabled{opacity:0.4;cursor:not-allowed}.tree-context-menu{min-width:170px;background:var(--tree-bg);border:1px solid var(--tree-border-color);border-radius:10px;box-shadow:0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);padding:6px;z-index:9999;animation:contextMenuIn 0.12s cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden}@keyframes contextMenuIn{from{opacity:0;transform:scale(0.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}.tree-context-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:6px;font-size:13px;color:var(--tree-text);cursor:pointer;transition:background 0.12s}.tree-context-item:hover{background:var(--tree-primary-50);color:var(--tree-primary)}.tree-context-item.disabled{opacity:0.4;pointer-events:none}.tree-context-item.tree-context-item-danger{color:var(--tree-error)}.tree-context-item.tree-context-item-danger:hover{background:rgba(var(--color-danger-rgb, 239, 68, 68), 0.08);color:var(--tree-error)}.tree-context-separator{height:1px;background:var(--tree-border-color);margin:4px 6px}.tree-theme-dark .tree-context-menu{background:var(--bg-primary, #1f2937);border-color:var(--border-default, #374151);box-shadow:0 8px 32px rgba(0, 0, 0, 0.4)}.tree-node-avatar{width:24px;height:24px;flex-shrink:0;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center}.tree-node-avatar img{width:100%;height:100%;object-fit:cover}.tree-node-avatar-initials{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;flex-shrink:0}.tree-node-avatar-initials.tree-node-avatar-primary{background:var(--tree-primary-100);color:var(--tree-primary)}.tree-node-avatar-initials.tree-node-avatar-success{background:rgba(var(--color-success-rgb, 16, 185, 129), 0.1);color:var(--tree-success)}.tree-node-avatar-initials.tree-node-avatar-danger{background:rgba(var(--color-danger-rgb, 239, 68, 68), 0.1);color:var(--tree-error)}.tree-node-avatar-initials.tree-node-avatar-warning{background:rgba(var(--color-warning-rgb, 245, 158, 11), 0.1);color:var(--tree-warning)}.tree-node-avatar-initials.tree-node-avatar-info{background:rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);color:var(--tree-info)}.tree-node-avatar-initials.tree-node-avatar-default{background:var(--tree-border-color);color:var(--tree-text-muted)}.tree-node-description{font-size:11px;color:var(--tree-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tree-node-tag{padding:1px 7px;border-radius:12px;font-size:10px;font-weight:600;background:var(--tree-border-color);color:var(--tree-text-muted);white-space:nowrap;flex-shrink:0}.tree-node-lock{display:flex;align-items:center;color:var(--tree-text-muted);flex-shrink:0;margin-left:4px}.tree-action-danger:hover{color:var(--tree-error) !important;background:rgba(var(--color-danger-rgb, 239, 68, 68), 0.1) !important}.tree-action-warning:hover{color:var(--tree-warning) !important;background:rgba(var(--color-warning-rgb, 245, 158, 11), 0.1) !important}.tree-action-success:hover{color:var(--tree-success) !important;background:rgba(var(--color-success-rgb, 16, 185, 129), 0.1) !important}.tree-highlight{background:rgba(245, 200, 10, 0.35);color:inherit;border-radius:2px;padding:0 1px}.tree-variant-compact .tree-node-content{min-height:28px !important;font-size:12px}.tree-variant-compact .tree-expand-icon,.tree-variant-compact .tree-expand-spacer{width:18px;height:18px}.tree-variant-compact .tree-node-icon{width:16px;height:16px;font-size:13px}.tree-variant-directory{--tree-primary:var(--color-warning, #f59e0b)}.tree-variant-directory .tree-node-branch>.tree-node-content .tree-node-icon ui-icon{color:var(--color-warning, #f59e0b)}.tree-variant-directory .tree-node-leaf>.tree-node-content .tree-node-icon ui-icon{color:var(--color-primary, #60a5fa)}.tree-variant-directory .tree-node-selected>.tree-node-content{background:rgba(var(--color-warning-rgb, 245, 158, 11), 0.08)}.tree-variant-cards .tree-node-content{border:1px solid var(--tree-border-color);border-radius:10px;margin:3px 8px 3px 0;padding-right:12px !important;background:var(--tree-bg);box-shadow:0 1px 3px rgba(0, 0, 0, 0.04);transition:box-shadow 0.2s, border-color 0.2s}.tree-variant-cards .tree-node-content:hover{border-color:var(--tree-primary);box-shadow:0 4px 12px var(--tree-primary-50)}.tree-variant-cards .tree-node-selected>.tree-node-content{border-color:var(--tree-primary);background:var(--tree-primary-50);box-shadow:0 4px 12px var(--tree-primary-100)}.tree-variant-cards.tree-theme-dark .tree-node-content{background:rgba(255, 255, 255, 0.04);border-color:var(--tree-border-color);box-shadow:0 1px 3px rgba(0, 0, 0, 0.2)}.tree-variant-git-graph{--tree-git-lane-color:rgba(100, 116, 139, 0.45);--tree-git-commit-color:var(--tree-primary);--tree-git-commit-leaf-color:rgba(148, 163, 184, 0.85)}.tree-variant-git-graph .tree-connector-harness-group{display:none}.tree-variant-git-graph .tree-node-content{position:relative}.tree-variant-git-graph .tree-node-content::before,.tree-variant-git-graph .tree-node-content::after{content:"";position:absolute;pointer-events:none;z-index:1}.tree-variant-git-graph{}.tree-variant-git-graph .tree-node-content::before{left:calc(var(--depth, 0) * var(--tree-indent, 24px) + 12px);top:0;bottom:0;width:1.5px;background:var(--tree-git-lane-color)}.tree-variant-git-graph{}.tree-variant-git-graph .tree-node-content::after{left:calc(var(--depth, 0) * var(--tree-indent, 24px) + 8px);top:50%;width:9px;height:9px;transform:translateY(-50%);border-radius:50%;background:var(--tree-git-commit-color);box-shadow:0 0 0 2px var(--tree-bg)}.tree-variant-git-graph .tree-node-leaf>.tree-node-content::after{background:var(--tree-git-commit-leaf-color)}.tree-variant-git-graph .tree-node-selected>.tree-node-content::after{width:10px;height:10px;background:var(--tree-primary);box-shadow:0 0 0 2px var(--tree-bg), 0 0 0 6px var(--tree-primary-50)}.tree-variant-git-graph .tree-node:hover>.tree-node-content::before{background:color-mix(in srgb, var(--tree-primary) 35%, var(--tree-git-lane-color))}.tree-theme-dark.tree-variant-git-graph{--tree-git-lane-color:rgba(148, 163, 184, 0.35);--tree-git-commit-leaf-color:rgba(203, 213, 225, 0.85)}.tree-node-focused>.tree-node-content{outline:2px solid var(--tree-primary);outline-offset:-1px;border-radius:4px}.tree-content::-webkit-scrollbar{width:4px}.tree-content::-webkit-scrollbar-track{background:transparent}.tree-content::-webkit-scrollbar-thumb{background:var(--tree-border-color);border-radius:4px}.tree-theme-dark.tree-layout-org-chart .tree-node{background:var(--bg-primary, #1f2937);border-color:var(--border-default, #374151);color:var(--tree-text)}.tree-theme-dark.tree-layout-org-chart .tree-node:hover{border-color:var(--tree-primary)}.tree-node-sm>.tree-node-content{min-height:32px !important;font-size:12px}.tree-node-md>.tree-node-content{min-height:40px !important;font-size:14px}.tree-node-lg>.tree-node-content{min-height:48px !important;font-size:16px}.tree-node-primary>.tree-node-content .tree-node-label{color:var(--tree-primary)}.tree-node-success>.tree-node-content .tree-node-label{color:var(--tree-success)}.tree-node-danger>.tree-node-content .tree-node-label{color:var(--tree-error)}.tree-node-warning>.tree-node-content .tree-node-label{color:var(--tree-warning)}.tree-node-info>.tree-node-content .tree-node-label{color:var(--tree-info)}.tree-animated .tree-children{animation:treeSlideIn 0.18s cubic-bezier(0.4, 0, 0.2, 1)}@keyframes treeSlideIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}`;
+const treeCss = () => `@charset "UTF-8";.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;width:100%;--tree-bg:var(--bg-primary, #ffffff);--tree-text:var(--text-primary, #1f2937);--tree-text-muted:var(--text-muted, #6b7280);--tree-border-color:var(--border-default, #e5e7eb);--tree-primary:var(--color-primary, #3b82f6);--tree-primary-50:rgba(var(--color-primary-rgb, 59, 130, 246), 0.08);--tree-primary-100:rgba(var(--color-primary-rgb, 59, 130, 246), 0.15);--tree-primary-200:rgba(var(--color-primary-rgb, 59, 130, 246), 0.25);--tree-black:#111827;--tree-white:#ffffff;--tree-muted:var(--text-muted, #9ca3af);--tree-node-hover-bg:rgba(0, 0, 0, 0.02);--tree-line-color-default:var(--tree-text);--tree-error:var(--color-danger, #ef4444);--tree-info:var(--color-info, #3b82f6);--tree-success:var(--color-success, #10b981);--tree-warning:var(--color-warning, #f59e0b)}.tree-container{width:100%;background:var(--tree-bg);border-radius:8px;overflow:visible;}.tree-container.tree-theme-dark{--tree-bg:var(--bg-primary, #1f2937);--tree-text:var(--tree-white);--tree-text-muted:var(--text-muted, #9ca3af);--tree-border-color:var(--border-default, #374151);--tree-node-hover-bg:rgba(255, 255, 255, 0.05);--tree-line-color-default:var(--tree-text);background:var(--tree-bg);color:var(--tree-text)}.tree-container.tree-variant-bordered{border:1px solid var(--tree-border-color)}.tree-container.tree-variant-rounded{border-radius:12px}.tree-container.tree-variant-rounded .tree-node{border-radius:8px}.tree-container.tree-variant-minimal{background:transparent}.tree-container.tree-variant-minimal .tree-node{background:transparent}.tree-container.tree-variant-minimal .tree-node:hover{background:rgba(0, 0, 0, 0.02)}.tree-container.tree-variant-glass{--tree-glass-bg:rgba(255, 255, 255, 0.1);--tree-glass-border:rgba(255, 255, 255, 0.2);--tree-glass-text:var(--text-primary, #111827);background:var(--tree-glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--tree-glass-border);box-shadow:0 8px 32px 0 rgba(31, 38, 135, 0.1)}.tree-container.tree-variant-glass .tree-node{color:var(--tree-glass-text)}.tree-container.tree-variant-glass .tree-node:hover{background:rgba(255, 255, 255, 0.2)}.tree-container.tree-variant-glass .tree-node.tree-node-selected{background:var(--tree-primary-200)}.tree-container.tree-variant-glass .tree-search input{background:rgba(255, 255, 255, 0.2);border-color:rgba(255, 255, 255, 0.3);color:var(--tree-text)}.tree-container.tree-variant-glass .tree-search input::placeholder{color:var(--tree-text-muted)}.tree-container.tree-variant-glass .tree-line{background:var(--tree-line-color-default)}.tree-container.tree-glow{box-shadow:0 0 20px var(--tree-primary-200);border-color:var(--tree-primary-100)}.tree-theme-dark.tree-variant-glass{--tree-glass-bg:rgba(17, 24, 39, 0.4);--tree-glass-border:rgba(255, 255, 255, 0.1);--tree-glass-text:var(--tree-text);background:var(--tree-glass-bg);border:1px solid var(--tree-glass-border)}.tree-theme-dark.tree-variant-glass .tree-node{color:var(--tree-glass-text)}.tree-theme-dark.tree-variant-glass .tree-node:hover{background:rgba(255, 255, 255, 0.1)}.tree-theme-dark.tree-variant-glass .tree-search input{background:rgba(0, 0, 0, 0.2);border-color:var(--tree-glass-border)}.tree-theme-dark.tree-variant-glass .tree-line{background:var(--tree-glass-border)}.tree-search{position:relative;padding:16px;border-bottom:1px solid var(--tree-border-color)}.tree-search ui-icon{position:absolute;left:28px;top:50%;transform:translateY(-50%);color:var(--tree-muted);font-size:14px}.tree-search input{width:100%;padding:10px 12px 10px 36px;border:1px solid var(--tree-border-color);background:transparent;color:inherit;border-radius:6px;font-size:14px;outline:none;transition:all 0.2s}.tree-search input:focus{border-color:var(--tree-primary);box-shadow:0 0 0 3px var(--tree-primary-50)}.tree-search input::placeholder{color:var(--tree-muted)}.tree-theme-dark .tree-search input:focus{border-color:var(--tree-primary)}.tree-inner{position:relative}.tree-node{position:relative;display:block;width:100%}.tree-connector-harness-group{position:absolute;left:24px;top:0;width:var(--tree-indent-full, 100%);height:100%;pointer-events:none;z-index:1}.tree-v-line-container{position:absolute;left:0;top:0;width:100%;height:100%}.tree-hook-container{position:absolute;left:0;top:0;width:100%}.tree-connectors-svg{display:block;width:100%;height:100%;overflow:visible}.tree-connectors-svg path,.tree-connectors-svg line{transition:stroke 0.3s ease, stroke-width 0.3s ease, stroke-opacity 0.4s ease}.tree-connectors-svg .path-highlight{--line-color-final:var(--tree-primary) !important;stroke:var(--line-color-final) !important;stroke-opacity:1 !important;filter:drop-shadow(0 0 5px var(--tree-primary-400))}.tree-theme-dark .tree-line{--default-line-color:rgba(255, 255, 255, 0.1)}.tree-expand-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--tree-node-content-color, var(--tree-text));font-size:11px;cursor:pointer;z-index:2}.tree-expand-icon:hover{color:var(--tree-node-content-color, var(--tree-text))}.tree-expand-icon{margin-right:8px}.tree-animated .tree-node-expanded .tree-expand-icon ui-icon{transform:rotate(0deg)}.tree-animated .tree-node-collapsed .tree-expand-icon ui-icon{transform:rotate(-90deg)}.tree-expand-spacer{width:24px;height:24px;flex-shrink:0;margin-right:8px}.tree-checkbox{display:flex;align-items:center;justify-content:center}.tree-checkbox input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:var(--tree-primary)}.tree-node-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;font-size:16px;color:var(--tree-node-content-color, var(--tree-text))}.tree-node-icon ui-icon{color:inherit}.tree-node-icon.tree-node-icon-spacer{visibility:hidden}.tree-node-icon.tree-node-icon-default{color:var(--tree-text-muted)}.tree-theme-dark .tree-node-icon.tree-node-icon-default{color:var(--tree-text-muted)}.tree-node-content{display:flex;align-items:center;gap:8px;flex:1;min-width:0;position:relative;z-index:2;cursor:pointer;color:var(--tree-node-content-color, var(--tree-text));transition:background-color 0.2s ease}.tree-node-content:hover{background-color:var(--tree-node-hover-bg)}.tree-node-content .tree-node-text-group{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.tree-node-content .tree-node-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:var(--tree-node-content-color, var(--tree-text))}.tree-theme-dark .tree-node-label{color:var(--tree-node-content-color, var(--tree-text))}.tree-node-spinner{display:flex;align-items:center;color:var(--tree-primary)}.tree-node-actions{display:flex;align-items:center;gap:4px;opacity:0;transition:opacity 0.2s;pointer-events:none;margin-left:8px}.tree-node:hover .tree-node-actions{opacity:1;pointer-events:auto}.tree-action-btn{background:transparent;border:none;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tree-text-muted);transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);padding:0;margin-left:2px}.tree-action-btn:hover{background:var(--tree-primary-100);color:var(--tree-primary);transform:scale(1.1);box-shadow:0 0 10px var(--tree-primary-50)}.tree-action-btn:active{transform:scale(0.95)}.tree-theme-dark .tree-action-btn{color:var(--tree-text-muted)}.tree-theme-dark .tree-action-btn:hover{background:var(--tree-node-hover-bg)}.tree-node-badge{padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600;flex-shrink:0}.tree-node-badge.tree-node-badge-default{background:var(--tree-border-color);color:var(--tree-text-muted)}.tree-node-badge.tree-node-badge-primary{background:var(--tree-primary-100);color:var(--tree-primary)}.tree-node-badge.tree-node-badge-secondary{background:var(--tree-border-color);color:var(--tree-text-muted)}.tree-node-badge.tree-node-badge-success{background:var(--tree-primary-100);color:var(--tree-success)}.tree-node-badge.tree-node-badge-danger{background:rgba(var(--color-danger-rgb, 239, 68, 68), 0.1);color:var(--tree-error)}.tree-node-badge.tree-node-badge-warning{background:rgba(var(--color-warning-rgb, 245, 158, 11), 0.1);color:var(--color-warning, #f59e0b)}.tree-node-badge.tree-node-badge-info{background:rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);color:var(--tree-info)}.tree-node-counter{display:flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;background:var(--tree-primary);color:var(--tree-bg);border-radius:11px;font-size:11px;font-weight:600;flex-shrink:0}.tree-children{overflow:hidden}.tree-animated .tree-children{animation:slideDown 0.2s ease-out}@keyframes slideDown{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.tree-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:var(--tree-text-muted)}.tree-empty i{font-size:48px;margin-bottom:12px;opacity:0.5}.tree-empty p{margin:0;font-size:14px}.tree-orientation-horizontal .tree-content{overflow-x:auto}.tree-orientation-horizontal .tree-node-wrapper{display:flex}.tree-orientation-horizontal .tree-children{display:flex;flex-direction:column;margin-left:24px;padding-left:24px;border-left:1px solid var(--tree-border-color)}.tree-orientation-horizontal .tree-node{padding-left:0}.tree-layout-org-chart .tree-content{display:flex;justify-content:center;padding:60px 40px;overflow:auto;min-height:400px}.tree-layout-org-chart .tree-node-wrapper{display:flex;flex-direction:column;align-items:center;position:relative;padding:20px 0 0 0;transition:all 0.3s ease}.tree-layout-org-chart .tree-node-wrapper::before,.tree-layout-org-chart .tree-node-wrapper::after{content:"";position:absolute;top:0;right:50%;width:50%;height:20px;border-top:var(--tree-line-width, 1px) solid var(--tree-line-color, rgba(0, 0, 0, 0.1))}.tree-layout-org-chart .tree-node-wrapper::after{right:auto;left:50%;border-left:var(--tree-line-width, 1px) solid var(--tree-line-color, rgba(0, 0, 0, 0.1))}.tree-layout-org-chart{}.tree-layout-org-chart .tree-content>.tree-node-wrapper::before,.tree-layout-org-chart .tree-content>.tree-node-wrapper::after{display:none !important}.tree-layout-org-chart .tree-content>.tree-node-wrapper{padding-top:0}.tree-layout-org-chart{}.tree-layout-org-chart .tree-node-wrapper:first-child::before{border:0 none}.tree-layout-org-chart .tree-node-wrapper:last-child::after{border:0 none}.tree-layout-org-chart .tree-node-wrapper:first-child:not(:only-child)::after{border-radius:12px 0 0 0}.tree-layout-org-chart .tree-node-wrapper:last-child:not(:only-child)::before{border-right:var(--tree-line-width, 1px) solid var(--tree-line-color, rgba(0, 0, 0, 0.1));border-radius:0 12px 0 0}.tree-layout-org-chart{}.tree-layout-org-chart .tree-node-wrapper:only-child::after{border-radius:0;border-left:var(--tree-line-width, 1px) solid var(--tree-line-color, rgba(0, 0, 0, 0.1))}.tree-layout-org-chart .tree-node-wrapper:only-child::before{display:none}.tree-layout-org-chart{}.tree-layout-org-chart .tree-node-branch>.tree-node::after{content:"";position:absolute;bottom:-20px;left:50%;width:1px;height:20px;background:var(--tree-line-color-default)}.tree-layout-org-chart .tree-node{border:1px solid var(--tree-border-color);background:var(--tree-bg);box-shadow:0 4px 12px var(--tree-primary-50);padding:12px 24px;min-width:160px;max-width:300px;justify-content:center;margin:0 15px;z-index:2;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);border-radius:10px}.tree-layout-org-chart .tree-node:hover{border-color:var(--tree-primary);box-shadow:0 12px 24px var(--tree-primary-100);transform:translateY(-4px)}.tree-layout-org-chart .tree-node.tree-node-selected{border-color:var(--tree-primary);background:var(--tree-primary-50)}.tree-layout-org-chart .tree-children{display:flex;flex-direction:row;justify-content:center;position:relative;padding-top:20px}.tree-layout-org-chart{}.tree-layout-org-chart.tree-theme-dark .tree-node{background:var(--tree-bg);border-color:var(--tree-border-color);box-shadow:0 4px 12px rgba(0, 0, 0, 0.2)}.tree-layout-org-chart.tree-theme-dark .tree-node-wrapper::before,.tree-layout-org-chart.tree-theme-dark .tree-node-wrapper::after{border-color:var(--tree-line-color-default)}.tree-layout-org-chart.tree-theme-dark .tree-node-branch>.tree-node::after{background:var(--tree-line-color-default)}.tree-hide-lines .tree-lines,.tree-hide-lines .tree-node-wrapper::before,.tree-hide-lines .tree-node-wrapper::after,.tree-hide-lines .tree-line-vertical::after,.tree-hide-lines .tree-node::after{display:none !important}.tree-variant-modern-green{--tree-bg:var(--bg-secondary, #0f172a);--tree-text:var(--bg-primary, #f8fafc);--tree-text-muted:var(--color-primary, #94a3b8);--tree-primary:var(--color-success, #10b981);--tree-line-color-default:var(--color-success, #10b981);background:var(--tree-bg);color:var(--tree-text);border:1px solid rgba(var(--color-success-rgb, 16, 185, 129), 0.2);box-shadow:0 4px 20px rgba(0, 0, 0, 0.4)}.tree-variant-modern-green .tree-node{color:var(--tree-text-muted);font-weight:500;letter-spacing:0.02em}.tree-variant-modern-green .tree-node:hover{background:var(--tree-primary-50);color:var(--tree-primary)}.tree-variant-modern-green .tree-node.tree-node-selected{background:var(--tree-primary-100);color:var(--tree-primary);border-left:2px solid var(--tree-primary)}.tree-variant-modern-green .tree-line{--default-line-color:var(--tree-primary);--line-width:2px;opacity:0.6}.tree-variant-modern-green .tree-line-curved{border-bottom-left-radius:14px}.tree-variant-modern-green .tree-search input{background:rgba(0, 0, 0, 0.3);border-color:var(--tree-primary-100);color:var(--tree-text)}.tree-variant-modern-green .tree-search input:focus{border-color:var(--tree-primary);box-shadow:0 0 0 3px var(--tree-primary-100)}.tree-variant-modern-green .tree-node-icon{color:inherit}.tree-variant-modern-green .tree-expand-icon{color:var(--tree-primary)}.tree-variant-modern-green .tree-expand-icon:hover{color:var(--tree-primary)}.tree-node-selected{border-top:0 none !important}.tree-node-selected::before,.tree-node-selected::after{border-top:0 none !important}.tree-node[draggable=true]{cursor:move}.tree-node:active{opacity:0.6}.tree-drop-indicator{height:2px;background:var(--tree-primary);border-radius:2px;margin:0 8px;box-shadow:0 0 6px var(--tree-primary-200);animation:pulseIndicator 0.5s ease infinite alternate}@keyframes pulseIndicator{from{opacity:0.7}to{opacity:1}}.tree-node.tree-drop-inside>.tree-node-content{outline:2px dashed var(--tree-primary);outline-offset:-2px;border-radius:6px;background:var(--tree-primary-50)}.tree-children-drop-target{background:var(--tree-primary-50);border-radius:6px}.tree-edit-input{flex:1;min-width:80px;padding:2px 8px;border:1.5px solid var(--tree-primary);border-radius:4px;font-size:13px;font-family:inherit;color:var(--tree-text);background:var(--tree-bg);outline:none;box-shadow:0 0 0 3px var(--tree-primary-50)}.tree-edit-input:focus{box-shadow:0 0 0 3px var(--tree-primary-100)}.tree-theme-dark .tree-edit-input{background:rgba(255, 255, 255, 0.05);color:var(--tree-text)}.tree-search-icon{position:absolute;left:28px;top:50%;transform:translateY(-50%);color:var(--tree-muted);pointer-events:none}.tree-search-clear{position:absolute;right:26px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--tree-text-muted);padding:4px;display:flex;align-items:center;border-radius:4px;transition:color 0.2s, background 0.2s}.tree-search-clear:hover{color:var(--tree-error);background:rgba(var(--color-danger-rgb, 239, 68, 68), 0.08)}.tree-toolbar{display:flex;align-items:center;gap:4px;padding:6px 12px;border-bottom:1px solid var(--tree-border-color);background:rgba(0, 0, 0, 0.01)}.tree-theme-dark .tree-toolbar{background:rgba(255, 255, 255, 0.02)}.tree-toolbar-sep{width:1px;height:18px;background:var(--tree-border-color);margin:0 4px}.tree-toolbar-btn{display:flex;align-items:center;gap:5px;padding:5px 10px;border:1px solid var(--tree-border-color);border-radius:6px;background:var(--tree-bg);color:var(--tree-text-muted);font-size:12px;cursor:pointer;transition:all 0.15s;white-space:nowrap}.tree-toolbar-btn:hover:not(:disabled){background:var(--tree-primary-50);color:var(--tree-primary);border-color:var(--tree-primary)}.tree-toolbar-btn:disabled{opacity:0.4;cursor:not-allowed}.tree-context-menu{min-width:170px;background:var(--tree-bg);border:1px solid var(--tree-border-color);border-radius:10px;box-shadow:0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);padding:6px;z-index:9999;animation:contextMenuIn 0.12s cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden}@keyframes contextMenuIn{from{opacity:0;transform:scale(0.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}.tree-context-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:6px;font-size:13px;color:var(--tree-text);cursor:pointer;transition:background 0.12s}.tree-context-item:hover{background:var(--tree-primary-50);color:var(--tree-primary)}.tree-context-item.disabled{opacity:0.4;pointer-events:none}.tree-context-item.tree-context-item-danger{color:var(--tree-error)}.tree-context-item.tree-context-item-danger:hover{background:rgba(var(--color-danger-rgb, 239, 68, 68), 0.08);color:var(--tree-error)}.tree-context-separator{height:1px;background:var(--tree-border-color);margin:4px 6px}.tree-theme-dark .tree-context-menu{background:var(--bg-primary, #1f2937);border-color:var(--border-default, #374151);box-shadow:0 8px 32px rgba(0, 0, 0, 0.4)}.tree-node-avatar{width:24px;height:24px;flex-shrink:0;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center}.tree-node-avatar img{width:100%;height:100%;object-fit:cover}.tree-node-avatar-initials{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;flex-shrink:0}.tree-node-avatar-initials.tree-node-avatar-primary{background:var(--tree-primary-100);color:var(--tree-primary)}.tree-node-avatar-initials.tree-node-avatar-success{background:rgba(var(--color-success-rgb, 16, 185, 129), 0.1);color:var(--tree-success)}.tree-node-avatar-initials.tree-node-avatar-danger{background:rgba(var(--color-danger-rgb, 239, 68, 68), 0.1);color:var(--tree-error)}.tree-node-avatar-initials.tree-node-avatar-warning{background:rgba(var(--color-warning-rgb, 245, 158, 11), 0.1);color:var(--tree-warning)}.tree-node-avatar-initials.tree-node-avatar-info{background:rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);color:var(--tree-info)}.tree-node-avatar-initials.tree-node-avatar-default{background:var(--tree-border-color);color:var(--tree-text-muted)}.tree-node-description{font-size:11px;color:var(--tree-node-content-color, var(--tree-text));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tree-node-tag{padding:1px 7px;border-radius:12px;font-size:10px;font-weight:600;background:var(--tree-border-color);color:var(--tree-text-muted);white-space:nowrap;flex-shrink:0}.tree-node-lock{display:flex;align-items:center;color:var(--tree-node-content-color, var(--tree-text));flex-shrink:0;margin-left:4px}.tree-action-danger:hover{color:var(--tree-error) !important;background:rgba(var(--color-danger-rgb, 239, 68, 68), 0.1) !important}.tree-action-warning:hover{color:var(--tree-warning) !important;background:rgba(var(--color-warning-rgb, 245, 158, 11), 0.1) !important}.tree-action-success:hover{color:var(--tree-success) !important;background:rgba(var(--color-success-rgb, 16, 185, 129), 0.1) !important}.tree-highlight{background:rgba(245, 200, 10, 0.35);color:inherit;border-radius:2px;padding:0 1px}.tree-variant-compact .tree-node-content{min-height:28px !important;font-size:12px}.tree-variant-compact .tree-expand-icon,.tree-variant-compact .tree-expand-spacer{width:18px;height:18px}.tree-variant-compact .tree-node-icon{width:16px;height:16px;font-size:13px}.tree-variant-directory{--tree-primary:var(--color-warning, #f59e0b)}.tree-variant-directory .tree-node-branch>.tree-node-content .tree-node-icon ui-icon{color:inherit}.tree-variant-directory .tree-node-leaf>.tree-node-content .tree-node-icon ui-icon{color:inherit}.tree-variant-directory .tree-node-selected>.tree-node-content{background:rgba(var(--color-warning-rgb, 245, 158, 11), 0.08)}.tree-variant-cards .tree-node-content{border:1px solid var(--tree-border-color);border-radius:10px;margin:3px 8px 3px 0;padding-right:12px !important;background:var(--tree-bg);box-shadow:0 1px 3px rgba(0, 0, 0, 0.04);transition:box-shadow 0.2s, border-color 0.2s}.tree-variant-cards .tree-node-content:hover{border-color:var(--tree-primary);box-shadow:0 4px 12px var(--tree-primary-50)}.tree-variant-cards .tree-node-selected>.tree-node-content{border-color:var(--tree-primary);background:var(--tree-primary-50);box-shadow:0 4px 12px var(--tree-primary-100)}.tree-variant-cards.tree-theme-dark .tree-node-content{background:rgba(255, 255, 255, 0.04);border-color:var(--tree-border-color);box-shadow:0 1px 3px rgba(0, 0, 0, 0.2)}.tree-variant-git-graph{--tree-git-lane-color:rgba(100, 116, 139, 0.45);--tree-git-commit-color:var(--tree-primary);--tree-git-commit-leaf-color:rgba(148, 163, 184, 0.85)}.tree-variant-git-graph .tree-connector-harness-group{display:none}.tree-variant-git-graph .tree-node-content{position:relative}.tree-variant-git-graph .tree-node-content::before,.tree-variant-git-graph .tree-node-content::after{content:"";position:absolute;pointer-events:none;z-index:1}.tree-variant-git-graph{}.tree-variant-git-graph .tree-node-content::before{left:calc(var(--depth, 0) * var(--tree-indent, 24px) + 12px);top:0;bottom:0;width:1.5px;background:var(--tree-git-lane-color)}.tree-variant-git-graph{}.tree-variant-git-graph .tree-node-content::after{left:calc(var(--depth, 0) * var(--tree-indent, 24px) + 8px);top:50%;width:9px;height:9px;transform:translateY(-50%);border-radius:50%;background:var(--tree-git-commit-color);box-shadow:0 0 0 2px var(--tree-bg)}.tree-variant-git-graph .tree-node-leaf>.tree-node-content::after{background:var(--tree-git-commit-leaf-color)}.tree-variant-git-graph .tree-node-selected>.tree-node-content::after{width:10px;height:10px;background:var(--tree-primary);box-shadow:0 0 0 2px var(--tree-bg), 0 0 0 6px var(--tree-primary-50)}.tree-variant-git-graph .tree-node:hover>.tree-node-content::before{background:color-mix(in srgb, var(--tree-primary) 35%, var(--tree-git-lane-color))}.tree-theme-dark.tree-variant-git-graph{--tree-git-lane-color:rgba(148, 163, 184, 0.35);--tree-git-commit-leaf-color:rgba(203, 213, 225, 0.85)}.tree-node-focused>.tree-node-content{outline:2px solid var(--tree-primary);outline-offset:-1px;border-radius:4px}.tree-content::-webkit-scrollbar{width:4px}.tree-content::-webkit-scrollbar-track{background:transparent}.tree-content::-webkit-scrollbar-thumb{background:var(--tree-border-color);border-radius:4px}.tree-theme-dark.tree-layout-org-chart .tree-node{background:var(--bg-primary, #1f2937);border-color:var(--border-default, #374151);color:var(--tree-text)}.tree-theme-dark.tree-layout-org-chart .tree-node:hover{border-color:var(--tree-primary)}.tree-node-sm>.tree-node-content{min-height:32px !important;font-size:12px}.tree-node-md>.tree-node-content{min-height:40px !important;font-size:14px}.tree-node-lg>.tree-node-content{min-height:48px !important;font-size:16px}.tree-node-primary>.tree-node-content .tree-node-label{color:var(--tree-primary)}.tree-node-success>.tree-node-content .tree-node-label{color:var(--tree-success)}.tree-node-danger>.tree-node-content .tree-node-label{color:var(--tree-error)}.tree-node-warning>.tree-node-content .tree-node-label{color:var(--tree-warning)}.tree-node-info>.tree-node-content .tree-node-label{color:var(--tree-info)}.tree-node-black>.tree-node-content .tree-node-label{color:var(--tree-black)}.tree-node-white>.tree-node-content .tree-node-label{color:var(--tree-white)}.tree-animated .tree-children{animation:treeSlideIn 0.18s cubic-bezier(0.4, 0, 0.2, 1)}@keyframes treeSlideIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}`;
 
 const Tree = class {
     constructor(hostRef) {
@@ -691,6 +691,13 @@ const Tree = class {
             label.substring(idx + this.searchTerm.length),
         ];
     }
+    getNodeVisualColor(node) {
+        if (node.color)
+            return `var(--tree-${node.color})`;
+        if (this.expandIconColor)
+            return this.expandIconColor;
+        return 'var(--tree-text)';
+    }
     _renderExpandIcon(isExpanded, node) {
         let iconName = '';
         let style = {};
@@ -716,12 +723,10 @@ const Tree = class {
                     break;
             }
         }
-        if (this.expandIconColor) {
-            style.color = this.expandIconColor;
-        }
+        style.color = this.getNodeVisualColor(node);
         return (index.h("div", { class: "tree-expand-icon", onClick: (e) => { e.stopPropagation(); this.internalNodes = this._toggleNode(node.id); } }, index.h("ui-icon", { name: iconName, library: library, size: this.expandIconSize, style: style })));
     }
-    renderNode(node, level = 0, path = [], isLast = false, parentPath = [], index$1 = 0, groupHasIcons = false) {
+    renderNode(node, level = 0, path = [], isLast = false, parentPath = [], index$1 = 0, groupHasIcons = false, ancestorColors = []) {
         const hasChildren = !!(node.children?.length);
         const canExpand = hasChildren || (this.lazyLoad && node.isLeaf === false);
         const isExpanded = !!node.expanded;
@@ -732,6 +737,10 @@ const Tree = class {
         const depth = level;
         const baseWidth = this.connectorWidth || 1.8;
         const selPathIds = this._selectionPathIds || new Set();
+        const nodeVisualColor = this.getNodeVisualColor(node);
+        // Determine the color for the branch coming out of this node
+        const nodeBranchColor = node.connectorColor || (node.color ? `var(--tree-${node.color})` : null) || this.connectorColor || 'var(--tree-line-color-default)';
+        const currentAncestorColors = [...ancestorColors, nodeBranchColor];
         // SVG connectors
         const connectors = [];
         if (this.showLines && this.layout === 'tree' && depth > 0) {
@@ -741,7 +750,7 @@ const Tree = class {
                 const segW = Math.max(0.6, baseWidth - i * 0.3);
                 const lx = i * this.indent + 12;
                 const isHL = selPathIds.has(currentPath[i + 1] ?? '');
-                const color = node.connectorColor || this.connectorColor || 'var(--tree-line-color-default)';
+                const color = ancestorColors[i] || 'var(--tree-line-color-default)';
                 const opacity = this.connectorOpacity;
                 const showV = i < depth - 1 ? !parentPath[i + 1] : !isLast;
                 if (showV) {
@@ -784,11 +793,13 @@ const Tree = class {
             'aria-disabled': node.disabled ? 'true' : undefined,
             tabindex: (this.focusedNodeId === node.id || (this.focusedNodeId === null && level === 0 && index$1 === 0)) ? '0' : '-1',
         };
-        const nodeContent = (index.h("div", { class: nodeClasses, key: node.id, "data-node-id": node.id, "data-depth": depth, style: { '--depth': String(depth) } }, this.layout === 'tree' && connectors, isDragOver && this.dragPosition === 'before' && index.h("div", { class: "tree-drop-indicator tree-drop-before-line" }), index.h("div", { class: "tree-node-content", style: this.layout === 'tree' ? { paddingLeft: `${(depth + 1) * this.indent}px`, minHeight: `${this.nodeHeight}px` } : { minHeight: `${this.nodeHeight}px` }, onClick: (e) => !isEditing && this.handleNodeClick(node, currentPath, e), onDblClick: () => this.inlineEdit && !node.disabled && this.startEditing(node), onContextMenu: (e) => this.handleContextMenu(node, e), draggable: this.enableDrag && !node.disabled, onDragStart: (e) => this.handleDragStart(node, e), onDragOver: (e) => this.handleDragOver(node, e), onDragLeave: (e) => this.handleDragLeave(e), onDrop: (e) => this.handleDrop(node, e), ...ariaAttrs }, this.expandable && canExpand
+        const nodeContent = (index.h("div", { class: nodeClasses, key: node.id, "data-node-id": node.id, "data-depth": depth, style: { '--depth': String(depth) } }, this.layout === 'tree' && connectors, isDragOver && this.dragPosition === 'before' && index.h("div", { class: "tree-drop-indicator tree-drop-before-line" }), index.h("div", { class: "tree-node-content", style: this.layout === 'tree'
+                ? { paddingLeft: `${(depth + 1) * this.indent}px`, minHeight: `${this.nodeHeight}px`, '--tree-node-content-color': nodeVisualColor }
+                : { minHeight: `${this.nodeHeight}px`, '--tree-node-content-color': nodeVisualColor }, onClick: (e) => !isEditing && this.handleNodeClick(node, currentPath, e), onDblClick: () => this.inlineEdit && !node.disabled && this.startEditing(node), onContextMenu: (e) => this.handleContextMenu(node, e), draggable: this.enableDrag && !node.disabled, onDragStart: (e) => this.handleDragStart(node, e), onDragOver: (e) => this.handleDragOver(node, e), onDragLeave: (e) => this.handleDragLeave(e), onDrop: (e) => this.handleDrop(node, e), ...ariaAttrs }, this.expandable && canExpand
             ? this._renderExpandIcon(isExpanded, node)
-            : index.h("div", { class: "tree-expand-spacer" }), this.checkboxes && (index.h("div", { class: "tree-checkbox" }, index.h("ui-checkbox", { checked: !!node.checked, disabled: !!node.disabled, indeterminate: !!node.indeterminate, onCheckboxChange: (e) => this.handleCheckboxChange(node, e), size: "sm" }))), this.showAvatars && (node.avatar || node.avatarInitials) && (index.h("div", { class: "tree-node-avatar" }, node.avatar
+            : index.h("div", { class: "tree-expand-spacer" }), this.checkboxes && (index.h("div", { class: "tree-checkbox", onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation() }, index.h("ui-checkbox", { checked: !!node.checked, disabled: !!node.disabled, indeterminate: !!node.indeterminate, onCheckboxChange: (e) => this.handleCheckboxChange(node, e), size: "sm" }))), this.showAvatars && (node.avatar || node.avatarInitials) && (index.h("div", { class: "tree-node-avatar" }, node.avatar
             ? index.h("img", { src: node.avatar, alt: node.label })
-            : index.h("span", { class: `tree-node-avatar-initials tree-node-avatar-${node.color ?? 'primary'}` }, node.avatarInitials))), (nodeIcon || groupHasIcons) && (index.h("div", { class: `tree-node-icon${!nodeIcon ? ' tree-node-icon-spacer' : ''}` }, nodeIcon && !node.loading && (index.h("ui-icon", { name: nodeIcon, library: node.iconLibrary ?? this.iconLibrary, size: "16px", style: { color: node.color ? `var(--tree-${node.color})` : undefined } })), node.loading && index.h("ui-icon", { name: "loader-2", library: "lucide", spin: true, size: "16px" }))), index.h("div", { class: "tree-node-text-group" }, isEditing
+            : index.h("span", { class: `tree-node-avatar-initials tree-node-avatar-${node.color ?? 'primary'}` }, node.avatarInitials))), (nodeIcon || groupHasIcons) && (index.h("div", { class: `tree-node-icon${!nodeIcon ? ' tree-node-icon-spacer' : ''}` }, nodeIcon && !node.loading && (index.h("ui-icon", { name: nodeIcon, library: node.iconLibrary ?? this.iconLibrary, size: "16px" })), node.loading && index.h("ui-icon", { name: "loader-2", library: "lucide", spin: true, size: "16px" }))), index.h("div", { class: "tree-node-text-group" }, isEditing
             ? (index.h("ui-input", { class: "tree-edit-input", type: "text", value: this.editingValue, onInputChange: (e) => { this.editingValue = e.detail; }, onInputKeydown: (e) => {
                     if (e.detail.key === 'Enter')
                         this.commitEditing(node);
@@ -798,12 +809,12 @@ const Tree = class {
                 }, onInputBlur: () => this.commitEditing(node), autoFocus: true, size: "sm", fullWidth: true }))
             : index.h("div", { class: "tree-node-label" }, this.renderLabel(node.label ?? '')), node.description && !isEditing && index.h("div", { class: "tree-node-description" }, node.description)), node.tag && index.h("div", { class: "tree-node-tag" }, node.tag), node.badge && index.h("div", { class: `tree-node-badge tree-node-badge-${node.color ?? 'primary'}` }, node.badge), node.counter !== undefined && index.h("div", { class: "tree-node-counter" }, node.counter), node.locked && (index.h("div", { class: "tree-node-lock", title: node.lockTooltip ?? 'Locked' }, index.h("ui-icon", { name: "lock", library: "fontawesome", size: "12px" }))), this.showNodeActions && (node.actions?.length ?? 0) > 0 && (index.h("div", { class: "tree-node-actions" }, node.actions.map((action) => (index.h("ui-button", { variant: "ghost", size: "sm", class: `tree-action-btn${action.color ? ` tree-action-${action.color}` : ''}`, icon: action.icon, iconLibrary: action.library ?? this.iconLibrary, iconSize: "13px", ariaLabel: action.tooltip, disabled: !!action.disabled, onClick: (e) => { e.stopPropagation(); this.nodeAction.emit({ node, action: String(action.id ?? '') }); } })))))), isDragOver && this.dragPosition === 'after' && index.h("div", { class: "tree-drop-indicator tree-drop-after-line" }), canExpand && isExpanded && this.layout === 'tree' && (index.h("div", { class: `tree-children${isDragOver && this.dragPosition === 'inside' ? ' tree-children-drop-target' : ''}` }, hasChildren && node.children.map((child, idx) => {
             const childHasIcons = node.children.some(c => c.icon || this.showIcons);
-            return this.renderNode(child, level + 1, currentPath, idx === node.children.length - 1, [...parentPath, isLast], idx, childHasIcons);
+            return this.renderNode(child, level + 1, currentPath, idx === node.children.length - 1, [...parentPath, isLast], idx, childHasIcons, currentAncestorColors);
         })))));
         if (this.layout === 'org-chart') {
             return (index.h("div", { class: "tree-node-wrapper" }, nodeContent, canExpand && isExpanded && (index.h("div", { class: "tree-children" }, hasChildren && node.children.map((child, idx) => {
                 const childHasIcons = node.children.some(c => c.icon || this.showIcons);
-                return this.renderNode(child, level + 1, currentPath, idx === node.children.length - 1, [...parentPath, isLast], idx, childHasIcons);
+                return this.renderNode(child, level + 1, currentPath, idx === node.children.length - 1, [...parentPath, isLast], idx, childHasIcons, currentAncestorColors);
             })))));
         }
         return nodeContent;
@@ -843,7 +854,7 @@ const Tree = class {
             'tree-selectable': this.selectable,
             'tree-glow': this.showGlow,
         };
-        return (index.h(index.Host, { key: 'dae18b9d9751a023555e848bb0b5aaebdd235770', class: cls, style: { '--tree-indent': `${this.indent}px`, '--tree-node-height': `${this.nodeHeight}px` }, onKeyDown: this.handleKeyDown, tabIndex: 0 }, index.h("div", { key: '9b15d92f21722bcd345733cfa44206e3c83a2fa9', class: "tree-inner", role: "tree", "aria-multiselectable": this.multiSelect ? 'true' : 'false' }, this.searchable && (index.h("div", { key: 'be71bda4e65cfcf704616ef2ae563630bffde2fa', class: "tree-search" }, index.h("ui-icon", { key: '53d76e4229942408bf50ab0c72d3ce6d1811fbd2', name: "search", library: "fontawesome", size: "13px", class: "tree-search-icon" }), index.h("ui-input", { key: 'b8edf92c3dda73600fd0a653739aa1206be64698', type: "text", placeholder: "Search tree...", value: this.searchTerm, onInputChange: (e) => this.handleSearchInput(e), ariaLabel: "Search tree", size: "sm", fullWidth: true }), this.searchTerm && (index.h("ui-button", { key: '66800256ed8fc8139dab93bd920d25a2a6219cdf', variant: "ghost", size: "sm", class: "tree-search-clear", icon: "times", iconLibrary: "fontawesome", iconSize: "11px", ariaLabel: "Clear search", onClick: () => { this.searchTerm = ''; } })))), this.undoRedoEnabled && (index.h("div", { key: 'a391e1e016e422fbdd2781a09daf176bf8fe58df', class: "tree-toolbar" }, index.h("ui-button", { key: '73de8c1affc18220f94912f546c7e992d81850ed', variant: "ghost", size: "sm", icon: "undo", iconLibrary: "fontawesome", iconSize: "13px", label: "Undo", ariaLabel: "Undo (Ctrl+Z)", disabled: !this.undoStack.length, onClick: () => this.undo() }), index.h("ui-button", { key: '0aebc8cafd66fb273eb7e39b682a29a24f73bfcc', variant: "ghost", size: "sm", icon: "redo", iconLibrary: "fontawesome", iconSize: "13px", label: "Redo", ariaLabel: "Redo (Ctrl+Shift+Z)", disabled: !this.redoStack.length, onClick: () => this.redo() }), index.h("div", { key: '5bf0083e6ccd220d480a29f0fce27e220dba4231', class: "tree-toolbar-sep" }), index.h("ui-button", { key: '4aee1b4dfa0e8a99770e2ea55670cf17a3491bfb', variant: "ghost", size: "sm", icon: "expand", iconLibrary: "fontawesome", iconSize: "13px", ariaLabel: "Expand all", onClick: () => this.expandAllNodes() }), index.h("ui-button", { key: '31c8f23735e0aabb53bee60f63f823f0facbf4c2', variant: "ghost", size: "sm", icon: "compress", iconLibrary: "fontawesome", iconSize: "13px", ariaLabel: "Collapse all", onClick: () => this.collapseAllNodes() }))), index.h("div", { key: 'c635c7a4205a04d0fbb29bbbf666d82e3799e76e', class: "tree-content", style: this.virtualScroll ? { height: `${this.virtualScrollHeight}px`, overflowY: 'auto' } : {}, onScroll: () => this.virtualScroll && this.el.forceUpdate() }, this.virtualScroll && this.layout === 'tree' ? ((() => {
+        return (index.h(index.Host, { key: '59147cb567d01f4e12449fa3cd109eca5210ee1f', class: cls, style: { '--tree-indent': `${this.indent}px`, '--tree-node-height': `${this.nodeHeight}px` }, onKeyDown: this.handleKeyDown, tabIndex: 0 }, index.h("div", { key: '6cb12a3325b553dd316b424e21aa022b99ce0874', class: "tree-inner", role: "tree", "aria-multiselectable": this.multiSelect ? 'true' : 'false' }, this.searchable && (index.h("div", { key: '8ad616baffd4342b933c0081ea7119ca980ecc3e', class: "tree-search" }, index.h("ui-icon", { key: 'eb797f0781e9a8327c8a8637c6e9a3a3ab311280', name: "search", library: "fontawesome", size: "13px", class: "tree-search-icon" }), index.h("ui-input", { key: '0aea765a1be6e7896a84515f9956e53203f3621a', type: "text", placeholder: "Search tree...", value: this.searchTerm, onInputChange: (e) => this.handleSearchInput(e), ariaLabel: "Search tree", size: "sm", fullWidth: true }), this.searchTerm && (index.h("ui-button", { key: 'ae8a8d96cd5652801b1a87dd736adf12225ed599', variant: "ghost", size: "sm", class: "tree-search-clear", icon: "times", iconLibrary: "fontawesome", iconSize: "11px", ariaLabel: "Clear search", onClick: () => { this.searchTerm = ''; } })))), this.undoRedoEnabled && (index.h("div", { key: '273b197684072616b1593a140f7f3e18d254c8e4', class: "tree-toolbar" }, index.h("ui-button", { key: 'd852d87dafa4ddf297d30d4abbc0fb33c535eeba', variant: "ghost", size: "sm", icon: "undo", iconLibrary: "fontawesome", iconSize: "13px", label: "Undo", ariaLabel: "Undo (Ctrl+Z)", disabled: !this.undoStack.length, onClick: () => this.undo() }), index.h("ui-button", { key: '3947cdc4e5d97a53f2fbeafdf6eaa1d2b17db732', variant: "ghost", size: "sm", icon: "redo", iconLibrary: "fontawesome", iconSize: "13px", label: "Redo", ariaLabel: "Redo (Ctrl+Shift+Z)", disabled: !this.redoStack.length, onClick: () => this.redo() }), index.h("div", { key: 'ed355126526964054489a73c2499dbc7a9ed4ac2', class: "tree-toolbar-sep" }), index.h("ui-button", { key: '782ebfa66fb49ecfa93b88d72d3b4f5b32063909', variant: "ghost", size: "sm", icon: "expand", iconLibrary: "fontawesome", iconSize: "13px", ariaLabel: "Expand all", onClick: () => this.expandAllNodes() }), index.h("ui-button", { key: '17b5a4ca2c4d8a8bc9789774b69a2495faec0b47', variant: "ghost", size: "sm", icon: "compress", iconLibrary: "fontawesome", iconSize: "13px", ariaLabel: "Collapse all", onClick: () => this.collapseAllNodes() }))), index.h("div", { key: '42a81f5678c64d660a61bece182cc9a58937448c', class: "tree-content", style: this.virtualScroll ? { height: `${this.virtualScrollHeight}px`, overflowY: 'auto' } : {}, onScroll: () => this.virtualScroll && this.el.forceUpdate() }, this.virtualScroll && this.layout === 'tree' ? ((() => {
             const visibleNodes = this._getVisibleNodes(filtered);
             const scrollTop = this.el.shadowRoot?.querySelector('.tree-content')?.scrollTop || 0;
             const startIndex = Math.max(0, Math.floor(scrollTop / this.nodeHeight) - 2);
@@ -851,10 +862,14 @@ const Tree = class {
             return (index.h("div", { class: "tree-virtual-scroller", style: { height: `${visibleNodes.length * this.nodeHeight}px`, position: 'relative' } }, index.h("div", { class: "tree-virtual-offset", style: { transform: `translateY(${startIndex * this.nodeHeight}px)` } }, visibleNodes.slice(startIndex, endIndex).map((node, _idx) => {
                 const path = this._findPath(node.id, this.internalNodes) || [];
                 const isLast = false; // Hard to determine in flat list without extra metadata
-                return this.renderNode(node, path.length - 1, path.slice(0, -1), isLast, [], 0, false);
+                const ancestorColors = path.map(pid => {
+                    const pNode = this._findNode(pid, this.internalNodes);
+                    return pNode?.connectorColor || (pNode?.color ? `var(--tree-${pNode.color})` : null) || this.connectorColor || 'var(--tree-line-color-default)';
+                });
+                return this.renderNode(node, path.length - 1, path.slice(0, -1), isLast, [], 0, false, ancestorColors);
             }))));
         })()) : (filtered.length > 0
-            ? filtered.map((node, idx) => this.renderNode(node, 0, [], idx === filtered.length - 1, [], idx, topHasIcons))
+            ? filtered.map((node, idx) => this.renderNode(node, 0, [], idx === filtered.length - 1, [], idx, topHasIcons, []))
             : (index.h("div", { class: "tree-empty" }, index.h("ui-icon", { name: "folder-open", library: "fontawesome", size: "40px" }), index.h("p", null, this.searchTerm ? 'No results found' : 'No items')))))), this.renderContextMenu()));
     }
     static get watchers() { return {

package/dist/cjs/ui-workspace-manager.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-ClkOYpT8.js');
-var security = require('./security-E1JcwxGc.js');
-var dom = require('./dom-oP1E4Rd3.js');
+var index = require('./index-C32cWsm5.js');
+var security = require('./security-CNaNip8F.js');
+var dom = require('./dom-BvBb0kmW.js');
 
 const workspaceManagerCss = () => `.sr-only.sc-ui-workspace-manager{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only.sc-ui-workspace-manager{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.sc-ui-workspace-manager-h{display:flex;height:100%;width:100%;overflow:hidden}.lm-vertical-nav.sc-ui-workspace-manager{width:50px;background:var(--bg-secondary, #2b2b2b);display:flex;flex-direction:column;align-items:center;padding:0;gap:0;overflow-y:auto;flex-shrink:0}.lm-vertical-nav.lm-vertical-nav-left.sc-ui-workspace-manager{border-right:1px solid var(--border-strong, #3e3e42);box-shadow:2px 0 8px rgba(0, 0, 0, 0.3)}.lm-vertical-nav.lm-vertical-nav-right.sc-ui-workspace-manager{border-left:1px solid var(--border-strong, #3e3e42);box-shadow:-2px 0 8px rgba(0, 0, 0, 0.3)}.lm-vertical-nav.sc-ui-workspace-manager .lm-nav-item.sc-ui-workspace-manager{width:100%;height:50px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted, #858585);transition:all 0.15s ease;padding:0;position:relative}.lm-vertical-nav.sc-ui-workspace-manager .lm-nav-item.sc-ui-workspace-manager::before{content:"";position:absolute;top:0;bottom:0;width:2px;background:transparent;transition:background 0.15s ease}.lm-vertical-nav.sc-ui-workspace-manager .lm-nav-item.sc-ui-workspace-manager i.sc-ui-workspace-manager{font-size:24px;margin-bottom:0}.lm-vertical-nav.sc-ui-workspace-manager .lm-nav-item.sc-ui-workspace-manager .lm-nav-label.sc-ui-workspace-manager{font-size:8px;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;font-weight:400;letter-spacing:0.5px;text-transform:uppercase}.lm-vertical-nav.sc-ui-workspace-manager .lm-nav-item.sc-ui-workspace-manager:hover{background:var(--bg-secondary, #2d2d30);color:var(--text-standard, #ffffff)}.lm-vertical-nav.sc-ui-workspace-manager .lm-nav-item.sc-ui-workspace-manager:hover::before{background:var(--bg-secondary, #505050)}.lm-vertical-nav.sc-ui-workspace-manager .lm-nav-item.sc-ui-workspace-manager:active,.lm-vertical-nav.sc-ui-workspace-manager .lm-nav-item.active.sc-ui-workspace-manager{background:var(--bg-primary, #1e1e1e);color:var(--text-standard, #ffffff)}.lm-vertical-nav.sc-ui-workspace-manager .lm-nav-item.sc-ui-workspace-manager:active::before,.lm-vertical-nav.sc-ui-workspace-manager .lm-nav-item.active.sc-ui-workspace-manager::before{background:var(--color-primary, #007acc)}.lm-vertical-nav.lm-vertical-nav-left.sc-ui-workspace-manager .lm-nav-item.sc-ui-workspace-manager::before{left:0}.lm-vertical-nav.lm-vertical-nav-right.sc-ui-workspace-manager .lm-nav-item.sc-ui-workspace-manager::before{right:0}.lm-container.sc-ui-workspace-manager{position:relative;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.lm-container.lm-maximized.sc-ui-workspace-manager{background:var(--bg-secondary, #0f172a)}.lm-maximized-panel.sc-ui-workspace-manager{width:100%;height:100%;display:flex;flex-direction:column;background:var(--bg-secondary, #0f172a);overflow:hidden}.lm-maximized-header.sc-ui-workspace-manager{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg, var(--color-primary, #1e3a8a) 0%, var(--color-primary, #10b981) 100%);color:var(--text-standard, #ffffff);padding:8px 12px;border-bottom:1px solid var(--color-primary-hover, #2563eb);flex-shrink:0;min-height:40px;box-shadow:0 2px 8px rgba(0, 0, 0, 0.3)}.lm-maximized-header.sc-ui-workspace-manager .lm-maximized-title.sc-ui-workspace-manager{font-size:16px;font-weight:600}.lm-maximized-header.sc-ui-workspace-manager .lm-maximized-actions.sc-ui-workspace-manager{display:flex;gap:8px}.lm-maximized-header.sc-ui-workspace-manager .lm-maximized-actions.sc-ui-workspace-manager button.sc-ui-workspace-manager{background:rgba(255, 255, 255, 0.2);border:none;color:var(--text-standard, #ffffff);cursor:pointer;padding:6px 10px;border-radius:4px;transition:all 0.2s;font-size:14px}.lm-maximized-header.sc-ui-workspace-manager .lm-maximized-actions.sc-ui-workspace-manager button.sc-ui-workspace-manager:hover{background:rgba(255, 255, 255, 0.3);transform:scale(1.05)}.lm-maximized-header.sc-ui-workspace-manager .lm-maximized-actions.sc-ui-workspace-manager button.sc-ui-workspace-manager i.sc-ui-workspace-manager{pointer-events:none}.lm-maximized-content.sc-ui-workspace-manager{flex:1;overflow:auto;background:var(--bg-secondary, #0f172a);color:var(--text-standard, #e5e7eb)}.lm-maximized-content.sc-ui-workspace-manager::-webkit-scrollbar{width:8px;height:8px}.lm-maximized-content.sc-ui-workspace-manager::-webkit-scrollbar-track{background:var(--bg-primary, #1e293b)}.lm-maximized-content.sc-ui-workspace-manager::-webkit-scrollbar-thumb{background:var(--color-primary, #475569);border-radius:4px}.lm-maximized-content.sc-ui-workspace-manager::-webkit-scrollbar-thumb:hover{background:var(--color-primary, #64748b)}.lm-slot.sc-ui-workspace-manager{width:100%;height:100%;display:flex;flex-direction:column;min-height:0;min-width:0}.lm-region.sc-ui-workspace-manager{display:flex;flex-direction:column;height:100%;width:100%;min-height:0;min-width:0;overflow:visible;position:relative}.lm-region.lm-region-navigation.sc-ui-workspace-manager .lm-region-header.sc-ui-workspace-manager{background:var(--color-primary, #1e3a8a);border-bottom:2px solid var(--color-primary, #10b981)}.lm-region.lm-region-title-only.sc-ui-workspace-manager .lm-region-header.sc-ui-workspace-manager{background:var(--color-primary, #374151);justify-content:center;padding:8px 12px}.lm-region.lm-region-no-header.sc-ui-workspace-manager .lm-region-content.sc-ui-workspace-manager{border-radius:0}.lm-region.lm-region-content-only.sc-ui-workspace-manager{overflow:hidden}.lm-region.lm-region-content-only.sc-ui-workspace-manager .lm-panel-host.sc-ui-workspace-manager{width:100%;height:100%;margin:0;padding:0;border:none;background:transparent}.lm-region.lm-region-header-only.sc-ui-workspace-manager .lm-region-header.sc-ui-workspace-manager{background:var(--bg-primary, #1f2937);padding:6px 12px;border-bottom:2px solid var(--color-primary, #10b981)}.lm-region-title.sc-ui-workspace-manager{flex:1;display:flex;align-items:center;font-weight:600;font-size:14px;color:var(--text-standard, #e5e7eb);padding:0 8px}.lm-navigation-header.sc-ui-workspace-manager{flex:1;display:flex;align-items:center;gap:8px;padding:0 8px}.lm-navigation-title.sc-ui-workspace-manager{font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-standard, #ffffff)}.lm-region-header.sc-ui-workspace-manager{display:flex;align-items:center;gap:4px;background:var(--bg-primary, #1f2937);color:var(--text-standard, #e5e7eb);padding:2px 6px;border-bottom:1px solid var(--border-default, #374151);flex-shrink:0;min-height:36px;min-width:0;width:100%;overflow:visible;position:relative;z-index:11000;box-shadow:0 1px 3px rgba(0, 0, 0, 0.2)}.lm-tabs-container.sc-ui-workspace-manager{display:flex;align-items:center;gap:4px;background:var(--bg-secondary, #0f172a);padding:0 4px;flex:1;min-width:0;overflow:visible;max-width:100%}.lm-tab-scroll-btn.sc-ui-workspace-manager{display:flex;align-items:center;justify-content:center;width:28px;height:28px;min-width:28px;cursor:pointer;flex-shrink:0;flex-basis:28px;transition:all 0.2s ease}.lm-tab-scroll-btn.sc-ui-workspace-manager:hover{transform:translateY(-1px)}.lm-tab-scroll-btn.sc-ui-workspace-manager:active{transform:scale(0.95)}.lm-tab-scroll-btn.sc-ui-workspace-manager i.sc-ui-workspace-manager{font-size:12px}.lm-tabs.sc-ui-workspace-manager{display:flex;gap:2px;overflow-x:auto;overflow-y:visible;scrollbar-width:thin;scrollbar-color:var(--text-secondary, #374151) var(--text-primary, #1f2937);flex:1;min-width:0}.lm-tabs.sc-ui-workspace-manager::-webkit-scrollbar{height:6px}.lm-tabs.sc-ui-workspace-manager::-webkit-scrollbar-track{background:var(--bg-primary, #1f2937)}.lm-tabs.sc-ui-workspace-manager::-webkit-scrollbar-thumb{background:var(--color-primary, #374151);border-radius:3px}.lm-tabs.sc-ui-workspace-manager::-webkit-scrollbar-thumb:hover{background:var(--color-primary, #4b5563)}.lm-tab-separator.sc-ui-workspace-manager{width:1px;background:linear-gradient(to bottom, transparent 20%, var(--color-primary, #10b981) 50%, transparent 80%);margin:0 4px;flex-shrink:0;opacity:0.5}.lm-panel-dropdown-wrapper.sc-ui-workspace-manager{position:relative;flex-shrink:0;z-index:1}.lm-panel-list-btn.sc-ui-workspace-manager{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--border-default, #374151);background:var(--bg-primary, #1f2937);color:var(--text-muted, #9ca3af);border-radius:4px;cursor:pointer;flex-shrink:0;transition:all 0.2s ease}.lm-panel-list-btn.sc-ui-workspace-manager:hover{background:var(--color-primary, #374151);color:var(--text-standard, #e5e7eb);border-color:var(--border-dark)}.lm-panel-list-btn.sc-ui-workspace-manager:active{transform:scale(0.95)}.lm-panel-list-btn.sc-ui-workspace-manager i.sc-ui-workspace-manager{font-size:14px}.lm-panel-dropdown-menu.sc-ui-workspace-manager{position:absolute;top:calc(100% + 4px);right:0;min-width:220px;max-width:320px;max-height:400px;overflow-y:auto;background:var(--bg-primary, #1f2937);border:1px solid var(--border-default, #374151);border-radius:6px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.5);z-index:2;scrollbar-width:thin;scrollbar-color:var(--text-secondary, #4b5563) var(--text-primary, #1f2937)}.lm-panel-dropdown-menu.sc-ui-workspace-manager::-webkit-scrollbar{width:6px}.lm-panel-dropdown-menu.sc-ui-workspace-manager::-webkit-scrollbar-track{background:var(--bg-primary, #1f2937)}.lm-panel-dropdown-menu.sc-ui-workspace-manager::-webkit-scrollbar-thumb{background:var(--color-primary, #4b5563);border-radius:3px}.lm-panel-dropdown-menu.sc-ui-workspace-manager::-webkit-scrollbar-thumb:hover{background:var(--color-primary, #6b7280)}.lm-panel-dropdown-header.sc-ui-workspace-manager{padding:8px 12px;font-size:11px;font-weight:600;text-transform:uppercase;color:var(--text-secondary);border-bottom:1px solid var(--border-default, #374151);background:var(--bg-secondary, #111827);position:sticky;top:0;z-index:1}.lm-panel-dropdown-item.sc-ui-workspace-manager{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;transition:all 0.15s ease;color:var(--text-standard, #e5e7eb);font-size:13px}.lm-panel-dropdown-item.sc-ui-workspace-manager:hover{background:var(--color-primary, #374151)}.lm-panel-dropdown-item.active.sc-ui-workspace-manager{background:var(--color-primary, #10b981);color:var(--text-standard, #ffffff);font-weight:500}.lm-panel-dropdown-item.sc-ui-workspace-manager i.sc-ui-workspace-manager:first-child{width:16px;text-align:center;font-size:12px;color:var(--text-muted, #9ca3af)}.lm-panel-dropdown-item.sc-ui-workspace-manager .lm-panel-dropdown-title.sc-ui-workspace-manager{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lm-panel-dropdown-item.sc-ui-workspace-manager .fa-check.sc-ui-workspace-manager{color:var(--text-standard, #ffffff);font-size:12px}.lm-panel-dropdown-item.sc-ui-workspace-manager .lm-dot.sc-ui-workspace-manager{width:6px;height:6px;border-radius:50%;background:var(--color-warning, #f59e0b)}.lm-minimize-btn.sc-ui-workspace-manager{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--border-default, #374151);background:var(--bg-primary, #1f2937);color:var(--text-muted, #9ca3af);border-radius:4px;cursor:pointer;flex-shrink:0;transition:all 0.2s ease}.lm-minimize-btn.sc-ui-workspace-manager:hover{background:var(--color-primary, #10b981);color:var(--text-standard, #ffffff);border-color:var(--primary-color)}.lm-minimize-btn.sc-ui-workspace-manager:active{transform:scale(0.95)}.lm-minimize-btn.sc-ui-workspace-manager i.sc-ui-workspace-manager{font-size:14px}.lm-close-all-btn.sc-ui-workspace-manager{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--border-default, #374151);background:var(--bg-primary, #1f2937);color:var(--text-muted, #9ca3af);border-radius:4px;cursor:pointer;flex-shrink:0;transition:all 0.2s ease}.lm-close-all-btn.sc-ui-workspace-manager:hover{background:var(--color-danger, #991b1b);color:var(--color-danger, #fca5a5);border-color:var(--color-danger-hover, #dc2626)}.lm-close-all-btn.sc-ui-workspace-manager:active{transform:scale(0.95)}.lm-close-all-btn.sc-ui-workspace-manager i.sc-ui-workspace-manager{font-size:14px}.lm-actions-menu-wrapper.sc-ui-workspace-manager{position:relative;flex-shrink:0;z-index:1}.lm-actions-menu-btn.sc-ui-workspace-manager{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--border-default, #374151);background:var(--bg-primary, #1f2937);color:var(--text-muted, #9ca3af);border-radius:4px;cursor:pointer;flex-shrink:0;transition:all 0.2s ease}.lm-actions-menu-btn.sc-ui-workspace-manager:hover{background:var(--color-primary, #374151);color:var(--text-standard, #e5e7eb);border-color:var(--border-dark)}.lm-actions-menu-btn.sc-ui-workspace-manager:active{transform:scale(0.95)}.lm-actions-menu-btn.sc-ui-workspace-manager i.sc-ui-workspace-manager{font-size:14px}.lm-actions-dropdown-menu.sc-ui-workspace-manager{position:absolute;top:calc(100% + 4px);right:0;min-width:180px;background:var(--bg-primary, #1f2937);border:1px solid var(--border-default, #374151);border-radius:6px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.5);z-index:2;overflow:hidden}.lm-actions-menu-item.sc-ui-workspace-manager{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:all 0.15s ease;color:var(--text-standard, #e5e7eb);font-size:13px}.lm-actions-menu-item.sc-ui-workspace-manager:hover{background:var(--color-primary, #374151)}.lm-actions-menu-item.sc-ui-workspace-manager i.sc-ui-workspace-manager{width:16px;text-align:center;font-size:13px;color:var(--text-muted, #9ca3af)}.lm-actions-menu-item.sc-ui-workspace-manager span.sc-ui-workspace-manager{flex:1}.lm-actions-menu-divider.sc-ui-workspace-manager{height:1px;background:var(--color-primary, #374151);margin:4px 0}.lm-tab.sc-ui-workspace-manager{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:4px 4px 0 0;background:var(--bg-secondary, #111827);cursor:pointer;user-select:none;white-space:nowrap;flex-shrink:0;transition:all 0.2s ease;border:1px solid transparent;border-bottom:none;position:relative;z-index:1}.lm-tab.sc-ui-workspace-manager:hover{background:var(--bg-primary, #1f2937);border-color:var(--border-dark);transform:translateY(-1px);z-index:2}.lm-tab.sc-ui-workspace-manager .fa-thumbtack.sc-ui-workspace-manager{color:var(--primary-color);font-size:11px;animation:pinPulse 2s ease-in-out infinite}@keyframes pinPulse{0%,100%{opacity:0.7}50%{opacity:1}}.lm-tab.active.sc-ui-workspace-manager{background:var(--bg-primary, #0b1020);color:var(--text-standard, #ffffff);border-color:var(--primary-color);box-shadow:0 2px 8px rgba(var(--color-success-rgb, 61, 205, 88), 0.2)}.lm-tab.sc-ui-workspace-manager .lm-dot.sc-ui-workspace-manager{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--color-danger, #eab308)}.lm-region-actions.sc-ui-workspace-manager{margin-left:auto;display:inline-flex;gap:6px}.lm-region-actions.sc-ui-workspace-manager button.sc-ui-workspace-manager{appearance:none;border:none;background:transparent;color:inherit;padding:6px;cursor:pointer;border-radius:4px;transition:all 0.2s ease;display:inline-flex;align-items:center;justify-content:center}.lm-region-actions.sc-ui-workspace-manager button.sc-ui-workspace-manager:hover{background:var(--color-primary, #374151);color:var(--primary-color)}.lm-region-actions.sc-ui-workspace-manager button.sc-ui-workspace-manager:active{transform:scale(0.95)}.lm-tab.sc-ui-workspace-manager .lm-tab-btn.sc-ui-workspace-manager{appearance:none;border:none;background:transparent;color:inherit;padding:4px;cursor:pointer;border-radius:4px;transition:all 0.15s ease;display:inline-flex;align-items:center;justify-content:center}.lm-tab.sc-ui-workspace-manager .lm-tab-btn.sc-ui-workspace-manager:hover{background:rgba(var(--color-success-rgb, 61, 205, 88), 0.15);color:var(--primary-color);transform:scale(1.1)}.lm-tab.sc-ui-workspace-manager .lm-tab-btn.sc-ui-workspace-manager:active{transform:scale(0.9)}.lm-tab.sc-ui-workspace-manager .lm-tab-btn.lm-tab-actions.sc-ui-workspace-manager:hover{background:rgba(156, 163, 175, 0.15);color:var(--text-muted, #9ca3af)}.lm-tab.sc-ui-workspace-manager .lm-tab-btn.lm-close.sc-ui-workspace-manager:hover{background:rgba(var(--color-danger-rgb, 220, 38, 38), 0.15);color:var(--color-danger-hover, #dc2626)}.lm-tab-actions-wrapper.sc-ui-workspace-manager{position:relative;display:inline-flex;align-items:center;z-index:1}.lm-tab.sc-ui-workspace-manager:has(.lm-tab-actions-menu){z-index:10002}.lm-tab-actions-menu.sc-ui-workspace-manager{position:absolute;top:100%;right:0;margin-top:4px;background:var(--bg-primary, #1f2937);border:1px solid var(--border-default, #374151);border-radius:6px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.3);z-index:10001;min-width:140px;overflow:hidden;animation:slideDown 0.15s ease}.lm-tab-actions-menu-fixed.sc-ui-workspace-manager{position:fixed;background:var(--bg-primary, #1f2937);border:1px solid var(--border-default, #374151);border-radius:6px;box-shadow:0 4px 24px rgba(0, 0, 0, 0.5);z-index:12000;min-width:160px;overflow:hidden;transform:translateX(-100%);animation:slideDown 0.15s ease}.lm-tab-actions-item.sc-ui-workspace-manager{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;color:var(--text-standard, #e5e7eb);font-size:13px;transition:all 0.15s ease}.lm-tab-actions-item.sc-ui-workspace-manager i.sc-ui-workspace-manager{width:16px;text-align:center;font-size:13px;color:var(--text-muted, #9ca3af)}.lm-tab-actions-item.sc-ui-workspace-manager:hover{background:var(--color-primary, #374151);color:var(--primary-color)}.lm-tab-actions-item.sc-ui-workspace-manager:hover i.sc-ui-workspace-manager{color:var(--primary-color)}.lm-tab-actions-item.lm-tab-actions-danger.sc-ui-workspace-manager{color:var(--color-danger, #fca5a5)}.lm-tab-actions-item.lm-tab-actions-danger.sc-ui-workspace-manager i.sc-ui-workspace-manager{color:var(--color-danger, #fca5a5)}.lm-tab-actions-item.lm-tab-actions-danger.sc-ui-workspace-manager:hover{background:var(--color-danger, #991b1b);color:var(--text-standard, #ffffff)}.lm-tab-actions-item.lm-tab-actions-danger.sc-ui-workspace-manager:hover i.sc-ui-workspace-manager{color:var(--text-standard, #ffffff)}.lm-tab-actions-item.sc-ui-workspace-manager:first-child{border-top-left-radius:6px;border-top-right-radius:6px}.lm-tab-actions-item.sc-ui-workspace-manager:last-child{border-bottom-left-radius:6px;border-bottom-right-radius:6px}.lm-tab-actions-divider.sc-ui-workspace-manager{height:1px;background:var(--color-primary, #374151);margin:4px 8px}.lm-region-content.sc-ui-workspace-manager{position:relative;flex:1;background:var(--bg-secondary, #0f172a);color:var(--text-standard, #e5e7eb);min-height:0;min-width:0;overflow:hidden;display:flex;flex-direction:column}.lm-panel-host.sc-ui-workspace-manager{position:absolute;inset:0;padding:0;overflow:auto;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:var(--text-secondary, #374151) var(--text-primary, #0f172a)}.lm-panel-host.sc-ui-workspace-manager::-webkit-scrollbar{width:8px;height:8px}.lm-panel-host.sc-ui-workspace-manager::-webkit-scrollbar-track{background:var(--bg-secondary, #0f172a)}.lm-panel-host.sc-ui-workspace-manager::-webkit-scrollbar-thumb{background:var(--color-primary, #374151);border-radius:4px}.lm-panel-host.sc-ui-workspace-manager::-webkit-scrollbar-thumb:hover{background:var(--color-primary, #4b5563)}.lm-empty.sc-ui-workspace-manager{position:absolute;inset:0;display:grid;place-items:center;color:var(--text-muted, #9ca3af);font-size:14px;font-style:italic}.lm-popout-layer.sc-ui-workspace-manager{position:absolute;inset:0;pointer-events:none}.lm-popout-window.sc-ui-workspace-manager{position:absolute;background:var(--bg-secondary, #0f172a);border:1px solid var(--color-success, #3dcd58);border-radius:10px;box-shadow:0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(var(--color-success-rgb, 61, 205, 88), 0.3);overflow:hidden;pointer-events:auto;display:flex;flex-direction:column;backdrop-filter:blur(10px)}.lm-popout-header.sc-ui-workspace-manager{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:linear-gradient(135deg, var(--bg-primary, #1f2937), var(--bg-secondary, #111827));border-bottom:1px solid var(--border-default, #374151);cursor:move;user-select:none}.lm-popout-header.sc-ui-workspace-manager:active{cursor:grabbing}.lm-popout-content.sc-ui-workspace-manager{flex:1;overflow:auto;padding:0;scrollbar-width:thin;scrollbar-color:var(--text-secondary, #374151) var(--text-primary, #0f172a)}.lm-popout-content.sc-ui-workspace-manager::-webkit-scrollbar{width:8px;height:8px}.lm-popout-content.sc-ui-workspace-manager::-webkit-scrollbar-track{background:var(--bg-secondary, #0f172a)}.lm-popout-content.sc-ui-workspace-manager::-webkit-scrollbar-thumb{background:var(--color-primary, #374151);border-radius:4px}.lm-popout-content.sc-ui-workspace-manager::-webkit-scrollbar-thumb:hover{background:var(--color-primary, #4b5563)}.lm-tabs.drag-over.sc-ui-workspace-manager,.lm-region-content.drag-over.sc-ui-workspace-manager{outline:2px dashed var(--color-success, #3dcd58)}.lm-context-menu.sc-ui-workspace-manager{position:fixed;background:var(--bg-secondary, #111827);color:var(--text-standard, #e5e7eb);border:1px solid var(--border-default, #374151);border-radius:6px;box-shadow:0 8px 24px rgba(0, 0, 0, 0.4);padding:6px;display:grid;gap:4px;z-index:11000}.lm-context-menu.sc-ui-workspace-manager button.sc-ui-workspace-manager{appearance:none;border:none;background:var(--bg-primary, #1f2937);color:inherit;padding:6px 8px;border-radius:4px;cursor:pointer;text-align:left;display:flex;align-items:center;gap:8px}.lm-context-menu.sc-ui-workspace-manager button.sc-ui-workspace-manager:disabled{opacity:0.5;cursor:not-allowed;color:var(--text-secondary)}.lm-context-menu.sc-ui-workspace-manager button.sc-ui-workspace-manager i.sc-ui-workspace-manager{width:14px;text-align:center}.lm-context-menu.sc-ui-workspace-manager button.sc-ui-workspace-manager:hover:not(:disabled){background:var(--color-primary, #374151)}.lm-navigation-content.sc-ui-workspace-manager{flex:1;overflow-y:auto;overflow-x:hidden;background:var(--bg-secondary, #0f172a)}.lm-navigation-content.sc-ui-workspace-manager::-webkit-scrollbar{width:8px}.lm-navigation-content.sc-ui-workspace-manager::-webkit-scrollbar-track{background:var(--bg-primary, #1e293b)}.lm-navigation-content.sc-ui-workspace-manager::-webkit-scrollbar-thumb{background:var(--color-primary, #475569);border-radius:4px}.lm-navigation-content.sc-ui-workspace-manager::-webkit-scrollbar-thumb:hover{background:var(--color-primary, #64748b)}.lm-navigation-section.sc-ui-workspace-manager{border-bottom:1px solid var(--border-subtle, #1e293b)}.lm-navigation-section.sc-ui-workspace-manager:last-child{border-bottom:none}.lm-navigation-section-header.sc-ui-workspace-manager{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--bg-primary, #1f2937);color:var(--text-standard, #e5e7eb);cursor:pointer;transition:all 0.2s;border-left:3px solid transparent}.lm-navigation-section-header.sc-ui-workspace-manager:hover{background:var(--color-primary, #374151)}.lm-navigation-section-header.active.sc-ui-workspace-manager{background:var(--color-primary, #1e3a8a);border-left-color:var(--primary-color);font-weight:600}.lm-navigation-section-header.sc-ui-workspace-manager i.sc-ui-workspace-manager{font-size:14px;color:var(--text-muted, #9ca3af);width:16px;text-align:center}.lm-navigation-section-title.sc-ui-workspace-manager{flex:1;font-size:13px}.lm-navigation-section-close.sc-ui-workspace-manager{display:none;background:transparent;border:none;color:var(--text-muted, #9ca3af);cursor:pointer;padding:4px;border-radius:3px;transition:all 0.2s}.lm-navigation-section-close.sc-ui-workspace-manager:hover{background:rgba(255, 255, 255, 0.1);color:var(--text-standard, #ffffff)}.lm-navigation-section-close.sc-ui-workspace-manager i.sc-ui-workspace-manager{font-size:12px;pointer-events:none}.lm-navigation-section-header.sc-ui-workspace-manager:hover .lm-navigation-section-close.sc-ui-workspace-manager{display:block}.lm-navigation-section-content.sc-ui-workspace-manager{padding:12px;background:var(--bg-secondary, #0f172a);overflow:auto;max-height:400px}.lm-navigation-section-content.sc-ui-workspace-manager::-webkit-scrollbar{width:6px}.lm-navigation-section-content.sc-ui-workspace-manager::-webkit-scrollbar-track{background:var(--bg-primary, #1e293b)}.lm-navigation-section-content.sc-ui-workspace-manager::-webkit-scrollbar-thumb{background:var(--color-primary, #475569);border-radius:3px}.lm-navigation-section-content.sc-ui-workspace-manager::-webkit-scrollbar-thumb:hover{background:var(--color-primary, #64748b)}.lm-header-only-title.sc-ui-workspace-manager{flex:1;display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--text-standard, #e5e7eb)}.lm-header-only-title.sc-ui-workspace-manager i.sc-ui-workspace-manager{font-size:14px;color:var(--text-muted, #9ca3af)}.lm-header-only-title.sc-ui-workspace-manager span.sc-ui-workspace-manager{color:var(--text-standard, #ffffff)}.lm-header-only-actions.sc-ui-workspace-manager{display:flex;align-items:center;gap:8px}.lm-header-btn.sc-ui-workspace-manager{background:rgba(255, 255, 255, 0.1);border:none;color:var(--text-standard, #e5e7eb);cursor:pointer;padding:6px 10px;border-radius:4px;transition:all 0.2s;font-size:13px;display:flex;align-items:center;justify-content:center}.lm-header-btn.sc-ui-workspace-manager:hover{background:rgba(255, 255, 255, 0.2);transform:scale(1.05)}.lm-header-btn.sc-ui-workspace-manager i.sc-ui-workspace-manager{pointer-events:none}.lm-context-menu.sc-ui-workspace-manager hr.sc-ui-workspace-manager{border:none;border-top:1px solid var(--border-default, #374151);margin:6px 0}`;
 

package/dist/collection/assets/js/component-config.js

@@ -38,4 +38,5 @@ export const COMPONENTS = [
   { id: 'layout-manager', label: '🏗️ Layout Manager', icon: '🏗️' },
   { id: 'animate-on-scroll', label: '✨ Animate on Scroll', icon: '✨' },
   { id: 'list', label: '📋 List', icon: '📋' },
+  { id: 'label', label: '🏷️ Label', icon: '🏷️' },
 ];

package/dist/collection/assets/js/demo-loader.js

@@ -80,7 +80,6 @@ const demoModules = {
   'tooltip': () => import('/app-ui/build/assets/js/demos/tooltip-demo.js'),
   'toggle-group': () => import('/app-ui/build/assets/js/demos/switch-demo.js?v=30'),
   'button-group': () => import('/app-ui/build/assets/js/demos/button-demo.js'),
-  'smart-dialog': () => import('/app-ui/build/assets/js/demos/smart-dialog-demo.js'),
   'home': () => import('/app-ui/build/assets/js/demos/home-demo.js'),
   'toolbar': () => import('/app-ui/build/assets/js/demos/toolbar-demo.js'),
   'dashboard': () => import('/app-ui/build/assets/js/demos/dashboard-demo.js'),
@@ -88,6 +87,8 @@ const demoModules = {
   'overview': () => import('/app-ui/build/assets/js/demos/overview-demo.js'),
   'complex-form': () => import('/app-ui/build/assets/js/demos/complex-form-demo.js'),
   'dropdown-subtitle': () => import('/app-ui/build/assets/js/demos/dropdown-subtitle-demo.js'),
+  'masonry': () => import('/app-ui/build/assets/js/demos/masonry-demo.js'),
+  'label': () => import('/app-ui/build/assets/js/demos/label-demo.js'),
 };
 
 const loadedDemos = new Set();

package/dist/collection/assets/js/demos/about-demo.js

@@ -1,13 +1,13 @@
-// About Demo / Info Page
+// About Demo / Info Page
 export function initAboutDemo() {
   const section = document.getElementById('about');
   if (!section) return;
 
   section.innerHTML = `
-    <div style="background-color: white; border-radius: 12px; padding: 40px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); max-width: 900px; margin: 0 auto;">
+    <div style="background-color:var(--bg-primary,white); border-radius: 12px; padding: 40px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); max-width: 900px; margin: 0 auto;">
       <div style="text-align: center; margin-bottom: 40px;">
-        <h1 style="font-size: 2.5rem; color: #1e293b; margin-bottom: 10px;">Modern UI Kit</h1>
-        <p style="font-size: 1.1rem; color: #64748b;">A comprehensive library of high-performance Stencil.js components.</p>
+        <h1 style="font-size: 2.5rem; color:var(--text-primary,#1e293b); margin-bottom: 10px;">Modern UI Kit</h1>
+        <p style="font-size: 1.1rem; color:var(--text-secondary,#64748b);">A comprehensive library of high-performance Stencil.js components.</p>
         <div style="display: flex; justify-content: center; gap: 15px; margin-top: 20px;">
           <ui-pill label="v2.4.0" color="info" variant="outline"></ui-pill>
           <ui-pill label="Production Ready" color="success" variant="outline"></ui-pill>
@@ -16,24 +16,24 @@ export function initAboutDemo() {
       </div>
 
       <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-bottom: 50px;">
-        <div style="padding: 20px; border: 1px solid #e2e8f0; border-radius: 8px;">
+        <div style="padding: 20px; border:1px solid var(--border-default,#e2e8f0); border-radius: 8px;">
            <div style="font-size: 24px; margin-bottom: 10px;">⚡</div>
            <h3 style="margin-bottom: 8px;">High Performance</h3>
-           <p style="color: #64748b; font-size: 14px; line-height: 1.6;">Built with Stencil.js for near-native performance and tiny bundle sizes.</p>
+           <p style="color:var(--text-secondary,#64748b); font-size: 14px; line-height: 1.6;">Built with Stencil.js for near-native performance and tiny bundle sizes.</p>
         </div>
-        <div style="padding: 20px; border: 1px solid #e2e8f0; border-radius: 8px;">
+        <div style="padding: 20px; border:1px solid var(--border-default,#e2e8f0); border-radius: 8px;">
            <div style="font-size: 24px; margin-bottom: 10px;">🎨</div>
            <h3 style="margin-bottom: 8px;">Themeable</h3>
-           <p style="color: #64748b; font-size: 14px; line-height: 1.6;">Full CSS Variable support for deep customization and dark mode out of the box.</p>
+           <p style="color:var(--text-secondary,#64748b); font-size: 14px; line-height: 1.6;">Full CSS Variable support for deep customization and dark mode out of the box.</p>
         </div>
-        <div style="padding: 20px; border: 1px solid #e2e8f0; border-radius: 8px;">
+        <div style="padding: 20px; border:1px solid var(--border-default,#e2e8f0); border-radius: 8px;">
            <div style="font-size: 24px; margin-bottom: 10px;">🧩</div>
            <h3 style="margin-bottom: 8px;">Framework Agnostic</h3>
-           <p style="color: #64748b; font-size: 14px; line-height: 1.6;">Works with React, Vue, Angular, or plain HTML/JS without overhead.</p>
+           <p style="color:var(--text-secondary,#64748b); font-size: 14px; line-height: 1.6;">Works with React, Vue, Angular, or plain HTML/JS without overhead.</p>
         </div>
       </div>
 
-      <div style="background-color: #f8fafc; border-radius: 8px; padding: 30px; border-left: 4px solid #10b981;">
+      <div style="background-color:var(--bg-secondary,#f8fafc); border-radius: 8px; padding: 30px; border-left: 4px solid #10b981;">
         <h4 style="margin-bottom: 15px;">Quick Start Guide</h4>
         <div style="background: #1e293b; color: #e2e8f0; padding: 15px; border-radius: 6px; font-family: monospace; font-size: 13px; margin-bottom: 20px;">
           npm install @company/ui-kit<br><br>
@@ -43,8 +43,8 @@ export function initAboutDemo() {
         <ui-button id="exploreBtn" label="Start Exploring Components" color="success" variant="outline"></ui-button>
       </div>
 
-      <footer style="margin-top: 50px; text-align: center; border-top: 1px solid #e2e8f0; padding-top: 20px;">
-        <p style="color: #94a3b8; font-size: 12px;">© 2024 Modern UI Systems. All rights reserved.</p>
+      <footer style="margin-top: 50px; text-align: center; border-top:1px solid var(--border-default,#e2e8f0); padding-top: 20px;">
+        <p style="color:var(--text-secondary,#64748b); font-size: 12px;">© 2024 Modern UI Systems. All rights reserved.</p>
       </footer>
     </div>
   `;