"${e.to}"`);break}}const Dl={compact:{itemHeight:24,factor:.8},default:{itemHeight:30,factor:1},relaxed:{itemHeight:36,factor:1.2}};function nw(t,e){if(typeof t=="number")return{itemHeight:e??Dl.default.itemHeight,factor:t};const i=Dl[t??"default"];return{itemHeight:e??i.itemHeight,factor:i.factor}}const w$=Dl.default.itemHeight,Ow=10,v$=420;var k$=`@layer base, theme, unsafe;
+
+@layer base {
+ :host {
+ /*
+ CSS variables use a fallback stack to ensure user and theme colors slot
+ in with ease. User colors take precedence over theme colors, which take
+ precedence over defaults.
+
+ Fallback order:
+
+ 1. --trees-*-override (explicit)
+ 2. --trees-theme-* (e.g. Shiki/VS Code tokens)
+ 3. defaults
+
+ Theme variable names mirror Shiki/VS Code theme file JSON tokens.
+
+ // Available CSS Color Overrides
+ --trees-fg-override
+ --trees-fg-muted-override
+ --trees-bg-override
+ --trees-bg-muted-override
+ --trees-accent-override
+ --trees-border-color-override
+
+ --trees-focus-ring-color-override
+ --trees-focus-ring-width-override
+ --trees-focus-ring-offset-override
+
+ --trees-search-fg-override
+ --trees-search-font-weight-override
+ --trees-search-bg-override
+
+ --trees-selected-fg-override
+ --trees-selected-bg-override
+ --trees-selected-focused-border-color-override
+
+ // Git Status Color Overrides
+ --trees-status-added-override
+ --trees-status-ignored-override
+ --trees-status-modified-override
+ --trees-status-renamed-override
+ --trees-status-untracked-override
+ --trees-status-deleted-override
+ --trees-git-added-color-override
+ --trees-git-ignored-color-override
+ --trees-git-modified-color-override
+ --trees-git-renamed-color-override
+ --trees-git-untracked-color-override
+ --trees-git-deleted-color-override
+
+ // Built-in File Icon Color Overrides
+ --trees-file-icon-color
+ --trees-file-icon-color-astro
+ --trees-file-icon-color-babel
+ --trees-file-icon-color-bash
+ --trees-file-icon-color-biome
+ --trees-file-icon-color-bootstrap
+ --trees-file-icon-color-browserslist
+ --trees-file-icon-color-bun
+ --trees-file-icon-color-c
+ --trees-file-icon-color-cpp
+ --trees-file-icon-color-claude
+ --trees-file-icon-color-css
+ --trees-file-icon-color-database
+ --trees-file-icon-color-default
+ --trees-file-icon-color-docker
+ --trees-file-icon-color-eslint
+ --trees-file-icon-color-git
+ --trees-file-icon-color-go
+ --trees-file-icon-color-graphql
+ --trees-file-icon-color-html
+ --trees-file-icon-color-image
+ --trees-file-icon-color-javascript
+ --trees-file-icon-color-json
+ --trees-file-icon-color-markdown
+ --trees-file-icon-color-mcp
+ --trees-file-icon-color-npm
+ --trees-file-icon-color-oxc
+ --trees-file-icon-color-postcss
+ --trees-file-icon-color-prettier
+ --trees-file-icon-color-python
+ --trees-file-icon-color-react
+ --trees-file-icon-color-ruby
+ --trees-file-icon-color-rust
+ --trees-file-icon-color-sass
+ --trees-file-icon-color-svg
+ --trees-file-icon-color-svelte
+ --trees-file-icon-color-svgo
+ --trees-file-icon-color-swift
+ --trees-file-icon-color-table
+ --trees-file-icon-color-text
+ --trees-file-icon-color-tailwind
+ --trees-file-icon-color-terraform
+ --trees-file-icon-color-typescript
+ --trees-file-icon-color-vite
+ --trees-file-icon-color-vscode
+ --trees-file-icon-color-vue
+ --trees-file-icon-color-wasm
+ --trees-file-icon-color-webpack
+ --trees-file-icon-color-yml
+ --trees-file-icon-color-zig
+ --trees-file-icon-color-zip
+
+ // Density
+ //
+ // A unitless scale factor for padding, gaps, and indentation. Usually
+ // set via \`density\` on useFileTree. Individual overrides take precedence.
+ //
+ // Compact: 0.8
+ // Default: 1
+ // Relaxed: 1.2
+ //
+ --trees-density-override
+
+ // Available CSS Layout Overrides
+ --trees-gap-override
+ --trees-border-radius-override
+ --trees-font-family-override
+ --trees-font-size-override
+ --trees-font-weight-regular-override
+ --trees-font-weight-semibold-override
+ --trees-level-gap-override
+ --trees-item-padding-x-override
+ --trees-item-margin-x-override
+ --trees-item-row-gap-override
+ --trees-icon-width-override
+ --trees-icon-nudge-override
+ --trees-scrollbar-gutter-override
+ --trees-padding-inline-override
+ */
+
+ --trees-accent: var(--trees-accent-override, #009fff);
+ --trees-fg: var(
+ --trees-fg-override,
+ var(--trees-theme-sidebar-fg, light-dark(#6c6c71, #adadb1))
+ );
+ --trees-fg-muted: var(
+ --trees-fg-muted-override,
+ var(--trees-theme-sidebar-header-fg, light-dark(#84848a, #84848a))
+ );
+ --trees-bg: var(
+ --trees-bg-override,
+ var(--trees-theme-sidebar-bg, light-dark(#f8f8f8, #141415))
+ );
+ /* var(--trees-theme-list-hover-bg, light-dark(#dfebff59, #19283c59)) */
+ --trees-bg-muted: var(
+ --trees-bg-muted-override,
+ var(
+ --trees-theme-list-hover-bg,
+ light-dark(
+ color-mix(
+ in lab,
+ var(--trees-accent) var(--trees-bg-alpha-light, 8%),
+ var(--trees-bg)
+ ),
+ color-mix(
+ in lab,
+ var(--trees-accent) var(--trees-bg-alpha-dark, 10%),
+ var(--trees-bg)
+ )
+ )
+ )
+ );
+ --trees-input-bg: var(
+ --trees-input-bg-override,
+ light-dark(#f8f8f8, #070707)
+ );
+
+ --trees-added-light: #16a994;
+ --trees-added-dark: #00cab1;
+ --trees-ignored-light: #adadb1;
+ --trees-ignored-dark: #4a4a4e;
+ --trees-modified-light: #1ca1c7;
+ --trees-modified-dark: #08c0ef;
+ --trees-renamed-light: #d5a910;
+ --trees-renamed-dark: #ffd452;
+ --trees-untracked-light: #16a994;
+ --trees-untracked-dark: #00cab1;
+ --trees-deleted-light: #ff2e3f;
+ --trees-deleted-dark: #ff6762;
+
+ --trees-border-color: var(
+ --trees-border-color-override,
+ var(--trees-theme-sidebar-border, light-dark(#eeeeef, #070707))
+ );
+ --trees-indent-guide-bg: var(
+ --trees-indent-guide-bg-override,
+ color-mix(in lab, var(--trees-fg-muted) 25%, transparent)
+ );
+ --trees-density: var(--trees-density-override, 1);
+ --trees-border-radius: var(
+ --trees-border-radius-override,
+ calc(6px * var(--trees-density))
+ );
+
+ --trees-font-family: var(--trees-font-family-override, system-ui);
+ --trees-font-size: var(--trees-font-size-override, 13px);
+ --trees-font-weight-regular: var(--trees-font-weight-regular-override, 400);
+ --trees-font-weight-semibold: var(
+ --trees-font-weight-semibold-override,
+ 600
+ );
+
+ --trees-focus-ring-color: var(
+ --trees-focus-ring-color-override,
+ var(--trees-theme-focus-ring, var(--trees-accent))
+ );
+ --trees-focus-ring-width: var(--trees-focus-ring-width-override, 1px);
+ --trees-focus-ring-offset: var(--trees-focus-ring-offset-override, -1px);
+
+ --trees-search-fg: var(
+ --trees-search-fg-override,
+ var(--trees-theme-input-fg, var(--trees-fg))
+ );
+ --trees-search-font-weight: var(--trees-search-font-weight-override, 600);
+ --trees-search-bg: var(
+ --trees-search-bg-override,
+ var(--trees-theme-input-bg, var(--trees-input-bg))
+ );
+
+ --trees-scrollbar-thumb: var(
+ --trees-scrollbar-thumb-override,
+ var(
+ --trees-theme-scrollbar-thumb,
+ color-mix(in lab, var(--trees-fg) 25%, var(--trees-bg))
+ )
+ );
+
+ --trees-selected-fg: var(
+ --trees-selected-fg-override,
+ var(--trees-theme-list-active-selection-fg, var(--trees-fg))
+ );
+ --trees-selected-bg: var(
+ --trees-selected-bg-override,
+ var(
+ --trees-theme-list-active-selection-bg,
+ light-dark(
+ color-mix(in lab, var(--trees-accent) 12%, var(--trees-bg)),
+ color-mix(in lab, var(--trees-accent) 15%, var(--trees-bg))
+ )
+ )
+ );
+ --trees-selected-focused-border-color: var(
+ --trees-selected-focused-border-color-override,
+ var(--trees-theme-focus-ring, var(--trees-accent))
+ );
+
+ /* Git status (e.g. from Shiki theme gitDecoration.*) */
+ --trees-status-added: var(
+ --trees-status-added-override,
+ var(
+ --trees-theme-git-added-fg,
+ light-dark(var(--trees-added-light), var(--trees-added-dark))
+ )
+ );
+ --trees-status-ignored: var(
+ --trees-status-ignored-override,
+ var(
+ --trees-theme-git-ignored-fg,
+ light-dark(var(--trees-ignored-light), var(--trees-ignored-dark))
+ )
+ );
+ --trees-status-modified: var(
+ --trees-status-modified-override,
+ var(
+ --trees-theme-git-modified-fg,
+ light-dark(var(--trees-modified-light), var(--trees-modified-dark))
+ )
+ );
+ --trees-status-renamed: var(
+ --trees-status-renamed-override,
+ var(
+ --trees-theme-git-renamed-fg,
+ light-dark(var(--trees-renamed-light), var(--trees-renamed-dark))
+ )
+ );
+ --trees-status-untracked: var(
+ --trees-status-untracked-override,
+ var(
+ --trees-theme-git-untracked-fg,
+ light-dark(var(--trees-untracked-light), var(--trees-untracked-dark))
+ )
+ );
+ --trees-status-deleted: var(
+ --trees-status-deleted-override,
+ var(
+ --trees-theme-git-deleted-fg,
+ light-dark(var(--trees-deleted-light), var(--trees-deleted-dark))
+ )
+ );
+ --trees-git-modified-color: var(
+ --trees-git-modified-color-override,
+ var(--trees-status-modified)
+ );
+ --trees-git-added-color: var(
+ --trees-git-added-color-override,
+ var(--trees-status-added)
+ );
+ --trees-git-ignored-color: var(
+ --trees-git-ignored-color-override,
+ var(--trees-status-ignored)
+ );
+ --trees-git-deleted-color: var(
+ --trees-git-deleted-color-override,
+ var(--trees-status-deleted)
+ );
+ --trees-git-renamed-color: var(
+ --trees-git-renamed-color-override,
+ var(--trees-status-renamed)
+ );
+ --trees-git-untracked-color: var(
+ --trees-git-untracked-color-override,
+ var(--trees-status-untracked)
+ );
+
+ --trees-icon-gray: light-dark(#84848a, #adadb1);
+ --trees-icon-red: light-dark(#d52c36, #ff6762);
+ --trees-icon-vermilion: light-dark(#ff8c5b, #d5512f);
+ --trees-icon-orange: light-dark(#d47628, #ffa359);
+ --trees-icon-yellow: light-dark(#d5a910, #ffd452);
+ --trees-icon-green: light-dark(#199f43, #5ecc71);
+ --trees-icon-teal: light-dark(#17a5af, #64d1db);
+ --trees-icon-cyan: light-dark(#1ca1c7, #68cdf2);
+ --trees-icon-blue: light-dark(#1a85d4, #69b1ff);
+ --trees-icon-indigo: light-dark(#693acf, #9d6afb);
+ --trees-icon-purple: light-dark(#a631be, #d568ea);
+ --trees-icon-pink: light-dark(#d32a61, #ff678d);
+ --trees-icon-mauve: light-dark(#594c5b, #79697b);
+
+ --trees-file-icon-color-default: var(
+ --trees-file-icon-color,
+ var(--trees-icon-gray)
+ );
+ --trees-file-icon-color-astro: var(
+ --trees-file-icon-color,
+ var(--trees-icon-purple)
+ );
+ --trees-file-icon-color-babel: var(
+ --trees-file-icon-color,
+ var(--trees-icon-yellow)
+ );
+ --trees-file-icon-color-bash: var(
+ --trees-file-icon-color,
+ var(--trees-icon-green)
+ );
+ --trees-file-icon-color-biome: var(
+ --trees-file-icon-color,
+ var(--trees-icon-blue)
+ );
+ --trees-file-icon-color-bootstrap: var(
+ --trees-file-icon-color,
+ var(--trees-icon-indigo)
+ );
+ --trees-file-icon-color-browserslist: var(
+ --trees-file-icon-color,
+ var(--trees-icon-yellow)
+ );
+ --trees-file-icon-color-bun: var(
+ --trees-file-icon-color,
+ var(--trees-icon-mauve)
+ );
+ --trees-file-icon-color-c: var(
+ --trees-file-icon-color,
+ var(--trees-icon-blue)
+ );
+ --trees-file-icon-color-cpp: var(
+ --trees-file-icon-color,
+ var(--trees-icon-blue)
+ );
+ --trees-file-icon-color-claude: var(
+ --trees-file-icon-color,
+ var(--trees-icon-orange)
+ );
+ --trees-file-icon-color-css: var(
+ --trees-file-icon-color,
+ var(--trees-icon-indigo)
+ );
+ --trees-file-icon-color-database: var(
+ --trees-file-icon-color,
+ var(--trees-icon-purple)
+ );
+ --trees-file-icon-color-docker: var(
+ --trees-file-icon-color,
+ var(--trees-icon-blue)
+ );
+ --trees-file-icon-color-eslint: var(
+ --trees-file-icon-color,
+ var(--trees-icon-indigo)
+ );
+ --trees-file-icon-color-git: var(
+ --trees-file-icon-vermilion,
+ var(--trees-icon-vermilion)
+ );
+ --trees-file-icon-color-go: var(
+ --trees-file-icon-color,
+ var(--trees-icon-cyan)
+ );
+ --trees-file-icon-color-graphql: var(
+ --trees-file-icon-color,
+ var(--trees-icon-pink)
+ );
+ --trees-file-icon-color-html: var(
+ --trees-file-icon-color,
+ var(--trees-icon-orange)
+ );
+ --trees-file-icon-color-image: var(
+ --trees-file-icon-color,
+ var(--trees-icon-pink)
+ );
+ --trees-file-icon-color-javascript: var(
+ --trees-file-icon-color,
+ var(--trees-icon-yellow)
+ );
+ --trees-file-icon-color-json: var(
+ --trees-file-icon-color,
+ var(--trees-icon-orange)
+ );
+ --trees-file-icon-color-markdown: var(
+ --trees-file-icon-color,
+ var(--trees-icon-green)
+ );
+ --trees-file-icon-color-mcp: var(
+ --trees-file-icon-color,
+ var(--trees-icon-teal)
+ );
+ --trees-file-icon-color-npm: var(
+ --trees-file-icon-color,
+ var(--trees-icon-red)
+ );
+ --trees-file-icon-color-oxc: var(
+ --trees-file-icon-cyan,
+ var(--trees-icon-cyan)
+ );
+ --trees-file-icon-color-postcss: var(
+ --trees-file-icon-color,
+ var(--trees-icon-red)
+ );
+ --trees-file-icon-color-prettier: var(
+ --trees-file-icon-color,
+ var(--trees-icon-teal)
+ );
+ --trees-file-icon-color-python: var(
+ --trees-file-icon-color,
+ var(--trees-icon-blue)
+ );
+ --trees-file-icon-color-react: var(
+ --trees-file-icon-color,
+ var(--trees-icon-cyan)
+ );
+ --trees-file-icon-color-ruby: var(
+ --trees-file-icon-color,
+ var(--trees-icon-red)
+ );
+ --trees-file-icon-color-rust: var(
+ --trees-file-icon-color,
+ var(--trees-icon-orange)
+ );
+ --trees-file-icon-color-sass: var(
+ --trees-file-icon-color,
+ var(--trees-icon-pink)
+ );
+ --trees-file-icon-color-svg: var(
+ --trees-file-icon-color,
+ var(--trees-icon-orange)
+ );
+ --trees-file-icon-color-svelte: var(
+ --trees-file-icon-color,
+ var(--trees-icon-red)
+ );
+ --trees-file-icon-color-svgo: var(
+ --trees-file-icon-color,
+ var(--trees-icon-green)
+ );
+ --trees-file-icon-color-swift: var(
+ --trees-file-icon-color,
+ var(--trees-icon-orange)
+ );
+ --trees-file-icon-color-table: var(
+ --trees-file-icon-color,
+ var(--trees-icon-teal)
+ );
+ --trees-file-icon-color-text: var(
+ --trees-file-icon-color,
+ var(--trees-icon-gray)
+ );
+ --trees-file-icon-color-tailwind: var(
+ --trees-file-icon-color,
+ var(--trees-icon-cyan)
+ );
+ --trees-file-icon-color-terraform: var(
+ --trees-file-icon-color,
+ var(--trees-icon-indigo)
+ );
+ --trees-file-icon-color-typescript: var(
+ --trees-file-icon-color,
+ var(--trees-icon-blue)
+ );
+ --trees-file-icon-color-vite: var(
+ --trees-file-icon-color,
+ var(--trees-icon-purple)
+ );
+ --trees-file-icon-color-vscode: var(
+ --trees-file-icon-color,
+ var(--trees-icon-blue)
+ );
+ --trees-file-icon-color-vue: var(
+ --trees-file-icon-color,
+ var(--trees-icon-green)
+ );
+ --trees-file-icon-color-wasm: var(
+ --trees-file-icon-color,
+ var(--trees-icon-indigo)
+ );
+ --trees-file-icon-color-webpack: var(
+ --trees-file-icon-color,
+ var(--trees-icon-blue)
+ );
+ --trees-file-icon-color-yml: var(
+ --trees-file-icon-color,
+ var(--trees-icon-red)
+ );
+ --trees-file-icon-color-zig: var(
+ --trees-file-icon-color,
+ var(--trees-icon-orange)
+ );
+ --trees-file-icon-color-zip: var(
+ --trees-file-icon-color,
+ var(--trees-icon-orange)
+ );
+
+ --trees-level-gap: var(
+ --trees-level-gap-override,
+ calc(8px * var(--trees-density))
+ );
+ --trees-item-padding-x: var(
+ --trees-item-padding-x-override,
+ calc(8px * var(--trees-density))
+ );
+ --trees-item-margin-x: var(
+ --trees-item-margin-x-override,
+ calc(2px * var(--trees-density))
+ );
+ --trees-item-row-gap: var(
+ --trees-item-row-gap-override,
+ calc(6px * var(--trees-density))
+ );
+ --trees-icon-width: var(--trees-icon-width-override, 16px);
+ --trees-icon-nudge: var(
+ --trees-icon-nudge-override,
+ calc(1px * var(--trees-density))
+ );
+ --trees-row-height: var(--trees-item-height, 30px);
+ --trees-git-lane-width: var(--trees-git-lane-width-override, 12px);
+ --trees-action-lane-width: var(
+ --trees-action-lane-width-override,
+ calc(var(--trees-icon-width) + 2px)
+ );
+ /* Keep the floating trigger aligned with the row's action lane. Going in
+ from the root's right edge: the scroll container reserves
+ \`--trees-padding-inline\` of effective inset on each side (its asymmetric
+ padding formula cancels the scrollbar gutter on the right), the row
+ sits inside that inset, and its trailing \`--trees-item-padding-x\` is the
+ action lane itself. The trigger's own focus-ring margin then trims one
+ pixel back so the button's visible right edge lines up with the lane. */
+ --trees-context-menu-trigger-inline-offset: calc(
+ var(--trees-padding-inline) + var(--trees-item-padding-x) -
+ var(--trees-focus-ring-width)
+ );
+
+ --trees-scrollbar-gutter: var(--trees-scrollbar-gutter-override, 6px);
+ --trees-padding-inline: var(--trees-padding-inline-override, 16px);
+
+ color-scheme: light dark;
+ display: flex;
+ flex-direction: column;
+ font-size: var(--trees-font-size);
+ color: var(--trees-fg);
+ background-color: var(--trees-bg);
+ --truncate-marker-background-color: var(--trees-bg);
+ --truncate-marker-background-overlay-color: transparent;
+ font-family: var(--trees-font-family);
+ font-weight: var(--trees-font-weight-regular);
+ }
+
+ :host([data-file-tree-virtualized='true']) {
+ height: 100%;
+ overflow: hidden;
+ }
+
+ [data-file-tree-virtualized-wrapper='true'] {
+ height: 100%;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ }
+
+ [data-file-tree-virtualized-root='true'] {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ }
+
+ [data-file-tree-virtualized-scroll='true'],
+ [data-file-tree-scrollbar-measure='true'] {
+ --trees-scrollbar-thumb-current: transparent;
+ overflow-y: auto;
+ scrollbar-gutter: stable;
+
+ &:hover {
+ --trees-scrollbar-thumb-current: var(--trees-scrollbar-thumb);
+ }
+
+ &::-webkit-scrollbar {
+ width: var(--trees-scrollbar-gutter);
+ height: var(--trees-scrollbar-gutter);
+ }
+
+ &::-webkit-scrollbar-track {
+ background: transparent;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background-color: var(--trees-scrollbar-thumb-current);
+ border: 1px solid transparent;
+ background-clip: content-box;
+ border-radius: calc(var(--trees-scrollbar-gutter) / 2);
+ }
+
+ &::-webkit-scrollbar-corner {
+ background-color: transparent;
+ }
+ }
+
+ /* These are styles for a temporarily generated element to measure the size
+ * of the scrollbar. It's intended to be somewhat similar in scrollbar style
+ * scope to the scrollable tree so \`--trees-scrollbar-gutter-measured\` is an
+ * accurate reflection of the size the scrollbar gutter takes up. */
+ [data-file-tree-scrollbar-measure='true'] {
+ position: absolute;
+ top: 0;
+ left: 0;
+ visibility: hidden;
+ pointer-events: none;
+ width: 100px;
+ height: 100px;
+ }
+
+ @supports (-moz-appearance: none) {
+ [data-file-tree-virtualized-scroll='true'],
+ [data-file-tree-scrollbar-measure='true'] {
+ scrollbar-width: thin;
+ scrollbar-color: var(--trees-scrollbar-thumb-current) transparent;
+ }
+ }
+
+ [data-file-tree-virtualized-scroll='true'] {
+ position: relative;
+ overflow-y: auto;
+ flex: 1 1 0;
+ min-height: 0;
+ padding-inline: max(
+ calc(var(--trees-padding-inline) - var(--trees-item-margin-x)),
+ 0px
+ )
+ /* NOTE(amadeus): We can assume that all Webkit based browser gutters
+ * will align to the value of '--trees-scrollbar-gutter', however if not, then
+ * \`--trees-scrollbar-gutter-measured\` should correct it. Mostly we are
+ * hoping to avoid SSR alignment jumps if possible. In non-SSR'd environments
+ * \`--trees-scrollbar-gutter-measured\` should always be immediately available.
+ */
+ max(
+ calc(
+ var(--trees-padding-inline) - var(--trees-item-margin-x) -
+ var(
+ --trees-scrollbar-gutter-measured,
+ var(--trees-scrollbar-gutter)
+ )
+ ),
+ 0px
+ );
+ }
+
+ @supports (-moz-appearance: none) {
+ [data-file-tree-virtualized-scroll='true'] {
+ padding-inline: max(
+ calc(var(--trees-padding-inline) - var(--trees-item-margin-x)),
+ 0px
+ )
+ /* NOTE(amadeus): However on Firefox it can vary a little bit, but most
+ * likely the majority of cases will default to a 0px width scrollbar lets
+ * inherit that first to avoid SSR jumps. In non-SSR'd environments
+ * \`--trees-scrollbar-gutter-measured\` should always be immediately available.
+ */
+ max(
+ calc(
+ var(--trees-padding-inline) - var(--trees-item-margin-x) -
+ var(--trees-scrollbar-gutter-measured, 0px)
+ ),
+ 0px
+ );
+ }
+ }
+
+ [data-file-tree-sticky-overlay='true'] {
+ position: sticky;
+ top: 0;
+ height: 0;
+ z-index: 4;
+ overflow: visible;
+ pointer-events: none;
+ }
+
+ /* The overlay DOM is kept populated even at scrollTop=0 so the browser has
+ * the rendered rows on hand the moment scrolling begins — otherwise the
+ * compositor paints a scrolled frame before React can mount the overlay,
+ * and the topmost sticky folder jumps up by a couple of pixels before it
+ * "snaps" into its pinned position. We hide it via CSS whenever the scroll
+ * is at the top and no scroll is in progress, so the preview doesn't leak
+ * through at rest. \`data-overlay-reveal\` is stamped on the root only when
+ * the user initiates a scroll while already at the top — exactly the case
+ * where we need the pre-mounted overlay to be visible through the first
+ * compositor frame. It is deliberately distinct from the general
+ * \`data-is-scrolling\` flag so a scroll that ends at the top (e.g. ArrowUp
+ * navigation) re-hides the overlay the instant the scroll lands, rather
+ * than waiting for the hover-suppression timer to elapse. */
+ [data-file-tree-virtualized-root='true'][data-scroll-at-top='true']:not(
+ [data-overlay-reveal]
+ )
+ [data-file-tree-sticky-overlay='true'] {
+ visibility: hidden;
+ }
+
+ [data-file-tree-sticky-overlay-content='true'] {
+ background-color: var(--trees-bg);
+ position: relative;
+ pointer-events: none;
+ }
+
+ [data-file-tree-virtualized-list='true'] {
+ background-color: var(--trees-bg);
+ position: relative;
+ min-height: 100%;
+ width: 100%;
+ overflow-anchor: none;
+
+ &[data-is-scrolling] {
+ pointer-events: none;
+ }
+ }
+
+ [data-file-tree-virtualized-sticky-offset='true'] {
+ contain: layout size;
+ }
+
+ [data-file-tree-virtualized-sticky='true'] {
+ position: sticky;
+ top: 0;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ isolation: isolate;
+ /* Promote to its own compositor layer so text inside the window is
+ * rasterized once and GPU-translated during scroll. Without this, the
+ * browser re-paints the window (and its text) at every scroll frame,
+ * which produces visible 1px shake / character tearing. */
+ will-change: transform;
+ }
+
+ [data-file-tree-search-container] {
+ display: flex;
+ padding: 0;
+ padding-inline: var(--trees-padding-inline);
+ margin-bottom: var(--trees-item-row-gap);
+ }
+
+ [data-file-tree-search-input] {
+ --trees-focus-ring-width: 2px;
+ font-family: var(--trees-font-family);
+ font-size: var(--trees-font-size);
+ flex: 1;
+ height: var(--trees-row-height);
+ /* 1px breathing room so the focus-visible outline isn't clipped when the
+ * input sits flush against the top of the scroll container. */
+ margin-block: 1px;
+ padding-inline: var(--trees-item-padding-x);
+ line-height: var(--trees-row-height);
+ color: var(--trees-search-fg);
+ background-color: var(--trees-search-bg);
+ border: 1px solid var(--trees-border-color);
+ border-radius: var(--trees-border-radius);
+ outline: none;
+
+ &::placeholder {
+ color: color-mix(
+ in lab,
+ var(--trees-search-fg) 65%,
+ var(--trees-search-bg)
+ );
+ }
+
+ &:focus-visible,
+ &[data-file-tree-search-input-fake-focus='true'] {
+ outline: var(--trees-focus-ring-width) solid var(--trees-focus-ring-color);
+ outline-offset: var(--trees-focus-ring-offset);
+ }
+ }
+
+ /* The wrapper for the tree items */
+ [role='tree'] {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ gap: var(--trees-gap-override, 0);
+ }
+
+ /* LIST ITEM */
+ [data-type='item'] {
+ color: inherit;
+ font-family: var(--trees-font-family);
+ font-size: var(--trees-font-size);
+ text-align: start;
+ outline: none;
+ background-color: var(--trees-bg);
+ border: none;
+ position: relative;
+
+ padding: 0 var(--trees-item-padding-x);
+ margin: 0 var(--trees-item-margin-x);
+ cursor: pointer;
+ -webkit-user-select: none;
+ user-select: none;
+ -webkit-touch-callout: none;
+ touch-action: manipulation;
+ display: flex;
+ flex: 0 0 var(--trees-row-height);
+ align-items: center;
+ height: var(--trees-row-height);
+ line-height: var(--trees-row-height);
+ gap: var(--trees-item-row-gap);
+ border-radius: var(--trees-border-radius);
+ /* Row states may be translucent, so markers paint the tree background first
+ * and then the state color on top to avoid compositing the same alpha twice. */
+ --truncate-marker-background-color: var(--trees-bg);
+ --truncate-marker-background-overlay-color: transparent;
+ --truncate-marker-block-inset: 0px;
+
+ &:hover,
+ &[data-item-context-hover='true'] {
+ background-color: var(--trees-bg-muted);
+ --truncate-marker-background-overlay-color: var(--trees-bg-muted);
+ }
+
+ &[data-item-focused='true'],
+ &:focus-visible {
+ z-index: 2;
+
+ /* Flattened segment markers sit high enough to cover the row outline unless
+ * their painted background is inset by the focus ring width. */
+ [data-item-flattened-subitems] {
+ --truncate-marker-block-inset: var(--trees-focus-ring-width);
+ }
+
+ &::before {
+ position: absolute;
+ inset: 0;
+ content: '';
+ display: block;
+ border-radius: var(--trees-border-radius);
+ outline: var(--trees-focus-ring-width) solid
+ var(--trees-focus-ring-color);
+ outline-offset: var(--trees-focus-ring-offset);
+ pointer-events: none;
+ }
+
+ &[data-item-selected='true']::before {
+ outline-color: var(--trees-selected-focused-border-color);
+ }
+ }
+
+ &[data-item-selected='true'] {
+ color: var(--trees-selected-fg);
+ background-color: var(--trees-selected-bg);
+ --truncate-marker-background-overlay-color: var(--trees-selected-bg);
+ z-index: 3;
+
+ [data-item-section='icon'] {
+ color: var(--trees-selected-fg);
+ }
+ }
+
+ &[data-item-search-match='true'] {
+ font-weight: var(--trees-search-font-weight);
+ }
+ }
+
+ [data-type='item'][data-file-tree-sticky-row='true'] {
+ pointer-events: auto;
+ }
+
+ /* Sticky rows opt back into pointer events because the overlay wrapper is
+ * inert. During scroll, put them back under the same hover suppression as
+ * the virtualized list so translucent hover states and menu triggers do not
+ * paint over rows moving beneath the sticky stack. */
+ [data-file-tree-virtualized-root='true'][data-is-scrolling]
+ [data-type='item'][data-file-tree-sticky-row='true'] {
+ pointer-events: none;
+ }
+
+ [data-file-tree-virtualized-root='true'][data-is-scrolling]
+ [data-type='item'][data-file-tree-sticky-row='true']:hover:not(
+ [data-item-selected='true']
+ ),
+ [data-file-tree-virtualized-root='true'][data-is-scrolling]
+ [data-type='item'][data-file-tree-sticky-row='true'][data-item-context-hover='true']:not(
+ [data-item-selected='true']
+ ) {
+ background-color: var(--trees-bg);
+ --truncate-marker-background-overlay-color: transparent;
+ }
+
+ [data-item-selected='true']:has(+ [data-item-selected='true']) {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+
+ [data-item-selected='true'] + [data-item-selected='true'] {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+
+ /* Flattened Directory Parts */
+ [data-item-flattened-subitems] {
+ display: inline-flex;
+ align-items: center;
+ gap: 2px;
+ }
+ [data-item-flattened-subitem]:hover,
+ [data-item-flattened-subitem-drag-target='true'] {
+ text-decoration: underline;
+ }
+
+ /* Icon for each item */
+ [data-item-section='icon'] {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--trees-fg-muted);
+ fill: currentColor;
+ width: var(--trees-icon-width);
+ }
+
+ :where([data-item-section='icon'] > [data-icon-token]) {
+ color: var(--trees-fg-muted);
+ }
+
+ [data-file-tree-colored-icons='true'] {
+ [data-icon-token='astro'] {
+ color: var(--trees-file-icon-color-astro);
+ }
+ [data-icon-token='babel'] {
+ color: var(--trees-file-icon-color-babel);
+ }
+ [data-icon-token='bash'] {
+ color: var(--trees-file-icon-color-bash);
+ }
+ [data-icon-token='biome'] {
+ color: var(--trees-file-icon-color-biome);
+ }
+ [data-icon-token='bootstrap'] {
+ color: var(--trees-file-icon-color-bootstrap);
+ }
+ [data-icon-token='browserslist'] {
+ color: var(--trees-file-icon-color-browserslist);
+ }
+ [data-icon-token='bun'] {
+ color: var(--trees-file-icon-color-bun);
+ }
+ [data-icon-token='c'] {
+ color: var(--trees-file-icon-color-c);
+ }
+ [data-icon-token='cpp'] {
+ color: var(--trees-file-icon-color-cpp);
+ }
+ [data-icon-token='claude'] {
+ color: var(--trees-file-icon-color-claude);
+ }
+ [data-icon-token='css'] {
+ color: var(--trees-file-icon-color-css);
+ }
+ [data-icon-token='database'] {
+ color: var(--trees-file-icon-color-database);
+ }
+ [data-icon-token='default'] {
+ color: var(--trees-file-icon-color-default);
+ }
+ [data-icon-token='docker'] {
+ color: var(--trees-file-icon-color-docker);
+ }
+ [data-icon-token='eslint'] {
+ color: var(--trees-file-icon-color-eslint);
+ }
+ [data-icon-token='git'] {
+ color: var(--trees-file-icon-color-git);
+ }
+ [data-icon-token='go'] {
+ color: var(--trees-file-icon-color-go);
+ }
+ [data-icon-token='graphql'] {
+ color: var(--trees-file-icon-color-graphql);
+ }
+ [data-icon-token='html'] {
+ color: var(--trees-file-icon-color-html);
+ }
+ [data-icon-token='image'] {
+ color: var(--trees-file-icon-color-image);
+ }
+ [data-icon-token='javascript'] {
+ color: var(--trees-file-icon-color-javascript);
+ }
+ [data-icon-token='json'] {
+ color: var(--trees-file-icon-color-json);
+ }
+ [data-icon-token='markdown'] {
+ color: var(--trees-file-icon-color-markdown);
+ }
+ [data-icon-token='mcp'] {
+ color: var(--trees-file-icon-color-mcp);
+ }
+ [data-icon-token='npm'] {
+ color: var(--trees-file-icon-color-npm);
+ }
+ [data-icon-token='oxc'] {
+ color: var(--trees-file-icon-color-oxc);
+ }
+ [data-icon-token='postcss'] {
+ color: var(--trees-file-icon-color-postcss);
+ }
+ [data-icon-token='prettier'] {
+ color: var(--trees-file-icon-color-prettier);
+ }
+ [data-icon-token='python'] {
+ color: var(--trees-file-icon-color-python);
+ }
+ [data-icon-token='react'] {
+ color: var(--trees-file-icon-color-react);
+ }
+ [data-icon-token='ruby'] {
+ color: var(--trees-file-icon-color-ruby);
+ }
+ [data-icon-token='rust'] {
+ color: var(--trees-file-icon-color-rust);
+ }
+ [data-icon-token='sass'] {
+ color: var(--trees-file-icon-color-sass);
+ }
+ [data-icon-token='svg'] {
+ color: var(--trees-file-icon-color-svg);
+ }
+ [data-icon-token='svelte'] {
+ color: var(--trees-file-icon-color-svelte);
+ }
+ [data-icon-token='svgo'] {
+ color: var(--trees-file-icon-color-svgo);
+ }
+ [data-icon-token='swift'] {
+ color: var(--trees-file-icon-color-swift);
+ }
+ [data-icon-token='table'] {
+ color: var(--trees-file-icon-color-table);
+ }
+ [data-icon-token='text'] {
+ color: var(--trees-file-icon-color-text);
+ }
+ [data-icon-token='tailwind'] {
+ color: var(--trees-file-icon-color-tailwind);
+ }
+ [data-icon-token='terraform'] {
+ color: var(--trees-file-icon-color-terraform);
+ }
+ [data-icon-token='typescript'] {
+ color: var(--trees-file-icon-color-typescript);
+ }
+ [data-icon-token='vite'] {
+ color: var(--trees-file-icon-color-vite);
+ }
+ [data-icon-token='vscode'] {
+ color: var(--trees-file-icon-color-vscode);
+ }
+ [data-icon-token='vue'] {
+ color: var(--trees-file-icon-color-vue);
+ }
+ [data-icon-token='wasm'] {
+ color: var(--trees-file-icon-color-wasm);
+ }
+ [data-icon-token='webpack'] {
+ color: var(--trees-file-icon-color-webpack);
+ }
+ [data-icon-token='yml'] {
+ color: var(--trees-file-icon-color-yml);
+ }
+ [data-icon-token='zig'] {
+ color: var(--trees-file-icon-color-zig);
+ }
+ [data-icon-token='zip'] {
+ color: var(--trees-file-icon-color-zip);
+ }
+ }
+
+ /* Chevron rotation and visual alignment */
+ /* Chevron pointing down */
+ [data-icon-name='file-tree-icon-chevron'] {
+ &[data-align-capitals='false'] {
+ transform: translate(0, var(--trees-icon-nudge));
+ }
+ &[data-align-capitals='true'] {
+ transform: translate(0, 0);
+ }
+ }
+
+ [data-item-section='content'] {
+ flex: 0 1 auto;
+ text-align: start;
+ min-width: 0;
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ /* Breaks middle truncate component to also set this */
+ /* white-space: nowrap; */
+ }
+
+ [data-item-section='decoration'] {
+ flex: 1 1 0;
+ min-width: 0;
+ display: flex;
+ justify-content: flex-end;
+ text-align: end;
+ overflow: hidden;
+ color: var(--trees-fg-muted);
+ }
+
+ [data-item-section='decoration'] > span {
+ min-width: 0;
+ max-width: 100%;
+ display: inline-flex;
+ align-items: center;
+ justify-content: flex-end;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ [data-item-section='git'],
+ [data-item-section='action'] {
+ flex: 0 0 auto;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ [data-item-section='git'] {
+ width: var(--trees-git-lane-width);
+ }
+
+ [data-item-section='action'] {
+ width: var(--trees-action-lane-width);
+ color: var(--trees-fg-muted);
+ fill: currentColor;
+ pointer-events: none;
+ }
+
+ [data-item-section='git'] > span,
+ [data-item-section='action'] > span {
+ width: 100%;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ [data-item-action-affordance='decorative'] {
+ opacity: 0.85;
+ }
+
+ [data-item-rename-input] {
+ appearance: none;
+ width: 100%;
+ min-width: 0;
+ height: calc(var(--trees-row-height) - 4px);
+ font-family: inherit;
+ font-size: inherit;
+ /* line-height: calc(var(--trees-row-height) - 8px); */
+ color: inherit;
+ background-color: transparent;
+ border: 0;
+ padding-inline: 6px;
+ outline: none;
+ box-sizing: border-box;
+ }
+
+ [data-item-section='content']:has([data-item-rename-input])
+ ~ [data-item-section='action'],
+ [data-item-section='content']:has([data-item-rename-input])
+ ~ [data-item-section='decoration'] {
+ display: none;
+ }
+
+ /* Chevron pointing right */
+ [aria-expanded='false'][data-item-type='folder']
+ > [data-item-section='icon']
+ > [data-icon-name='file-tree-icon-chevron'] {
+ &[data-align-capitals='true'] {
+ transform: rotate(-90deg)
+ translate(
+ calc(var(--trees-icon-nudge) / 2),
+ calc(var(--trees-icon-nudge) / 2)
+ );
+ }
+ &[data-align-capitals='false'] {
+ transform: rotate(-90deg)
+ translate(
+ calc(var(--trees-icon-nudge) / 2 * -1),
+ calc(var(--trees-icon-nudge) / 2)
+ );
+ }
+ }
+
+ /* LIST IDENTATION */
+ /* Spacing container */
+ [data-item-section='spacing'] {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ height: var(--trees-row-height);
+ padding-left: calc(calc(var(--trees-icon-width) / 2) - 0.5px);
+
+ &:empty {
+ padding-left: 0;
+ }
+ }
+
+ /* Spacing per level */
+ [data-item-section='spacing-item'] {
+ transform: translateX(-0.25px);
+ display: inline-block;
+ border-left: 1px solid var(--trees-indent-guide-bg);
+ height: 100%;
+ margin-right: calc(var(--trees-level-gap) - 1px);
+ opacity: 0;
+ transition: opacity 150ms ease;
+
+ & + & {
+ margin-left: calc(
+ var(--trees-item-row-gap) + calc(var(--trees-icon-width) / 2) - 0.5px
+ );
+ }
+ }
+
+ :host(:hover) [data-item-section='spacing-item'] {
+ opacity: 0.75;
+ }
+
+ /* Git status indicator */
+
+ /* This is a folder that contains a git change */
+ [data-item-contains-git-change='true'] > [data-item-section='git'] {
+ color: var(--trees-git-modified-color);
+ opacity: 0.5;
+ fill: currentColor;
+ }
+
+ /* These are files that have a git change */
+ [data-item-git-status] {
+ &
+ > :where([data-item-section='icon'])
+ > :where(:not([data-icon-name='file-tree-icon-chevron'])) {
+ color: var(--trees-item-git-status-color);
+ }
+ & > [data-item-section='content'] {
+ color: var(--trees-item-git-status-color);
+ }
+ & > [data-item-section='git'] {
+ color: var(--trees-item-git-status-color);
+ font-weight: var(--trees-font-weight-semibold);
+ }
+ }
+
+ [data-item-git-status='added'] {
+ --trees-item-git-status-color: var(--trees-git-added-color);
+ }
+
+ [data-item-git-status='deleted'] {
+ --trees-item-git-status-color: var(--trees-git-deleted-color);
+ }
+
+ [data-item-git-status='ignored'] {
+ --trees-item-git-status-color: var(--trees-git-ignored-color);
+
+ & > [data-item-section='icon'] {
+ opacity: 0.5;
+ }
+ }
+
+ [data-item-section='git'] [data-icon-name='file-tree-icon-dot'] {
+ /* this is a nudge to align the dot with the likely lowercase text. it's slightly
+ generalizable, but other fonts are gonna need other nudges i assume */
+ transform: translateY(calc(0.65ex - 50%));
+ }
+
+ [data-item-git-status='modified'] {
+ --trees-item-git-status-color: var(--trees-git-modified-color);
+ }
+
+ [data-item-git-status='renamed'] {
+ --trees-item-git-status-color: var(--trees-git-renamed-color);
+ }
+
+ [data-item-git-status='untracked'] {
+ --trees-item-git-status-color: var(--trees-git-untracked-color);
+ }
+
+ /* Drag and drop */
+ [data-item-drag-target='true'] {
+ background-color: var(--trees-selected-bg);
+ }
+
+ [data-item-dragging='true'] {
+ opacity: 0.5;
+ }
+
+ /* Lock icon for locked paths (sibling of content) */
+ [data-item-section='lock'] {
+ flex: 0 0 auto;
+ margin-left: auto;
+ display: flex;
+ align-items: center;
+ color: var(--trees-fg-muted);
+ }
+ [data-item-section='lock'] svg {
+ display: block;
+ }
+
+ [data-type='header-slot'] {
+ display: block;
+ flex: 0 0 auto;
+ }
+
+ [data-type='context-menu-wash'] {
+ position: absolute;
+ inset: 0;
+ z-index: 3;
+ background-color: transparent;
+ touch-action: none;
+ }
+
+ [data-type='context-menu-anchor'] {
+ position: absolute;
+ top: 0;
+ right: var(--trees-context-menu-trigger-inline-offset);
+ z-index: 4;
+ display: none;
+ align-items: center;
+
+ &[data-visible='true'] {
+ display: flex;
+ }
+ }
+
+ /* Hide the floating trigger while the scroll container is actively moving.
+ * The anchor is positioned against the root, not the scroll content, so its
+ * \`top\` follows the row via a React state update — one frame behind the
+ * compositor. That delay is visible as the trigger hovering over the wrong
+ * row during the first frame of a scroll. The \`data-is-scrolling\` flag on
+ * the root is flipped synchronously on \`wheel\`/\`touchmove\`/\`keydown\` before
+ * the compositor commits the next paint, so this selector hides the anchor
+ * in the same frame the scroll begins. */
+ [data-file-tree-virtualized-root='true'][data-is-scrolling]
+ [data-type='context-menu-anchor'] {
+ display: none;
+ }
+
+ [data-type='context-menu-anchor'] > slot[name='context-menu'] {
+ display: block;
+ width: 0;
+ min-width: 0;
+ flex: 0 0 0;
+ overflow: visible;
+ }
+
+ /* Single floating context menu trigger */
+ [data-type='context-menu-trigger'] {
+ all: unset;
+ align-items: center;
+ justify-content: center;
+ width: var(--trees-action-lane-width);
+ color: var(--trees-fg-muted);
+ fill: currentColor;
+ cursor: pointer;
+ font-family: var(--trees-font-family);
+ font-size: var(--trees-font-size);
+ border-top-right-radius: var(--trees-border-radius);
+ border-bottom-right-radius: var(--trees-border-radius);
+ margin: var(--trees-focus-ring-width);
+ height: calc(var(--trees-row-height) - var(--trees-focus-ring-width) * 2);
+ border-width: 0;
+ transition: color 120ms ease;
+
+ display: flex;
+ }
+
+ [data-type='context-menu-trigger']:hover,
+ [data-type='context-menu-trigger'][aria-expanded='true'] {
+ color: var(--trees-fg);
+ }
+
+ /** @pierre/truncate css here, manually copy pasted for now */
+ [data-truncate-container] {
+ /* CUSTOM TO TREES, TO SUPPORT THE OUTLINE */
+ margin-top: -1px;
+ margin-bottom: -1px;
+
+ /* Width of the fade from default marker to text */
+ --truncate-internal-marker-fade-width: var(
+ --truncate-marker-fade-width,
+ 2px
+ );
+ /* Width of the solid color between the fade from the default marker to the text */
+ --truncate-internal-marker-gap: var(--truncate-marker-gap, 0px);
+ /* Opacity of the marker 'color' property, not of the element itself */
+ --truncate-internal-marker-opacity: var(--truncate-marker-opacity, 50%);
+ /* Opacity of the marker 'color' property specifically for the middle truncate, not opacity of the element itself */
+ --truncate-internal-middle-marker-opacity: var(
+ --truncate-middle-marker-opacity,
+ 80%
+ );
+ /* Background color of the default marker */
+ --truncate-internal-marker-background-color: var(
+ --truncate-marker-background-color,
+ light-dark(white, black)
+ );
+ --truncate-internal-marker-background-overlay-color: var(
+ --truncate-marker-background-overlay-color,
+ transparent
+ );
+ --truncate-internal-marker-block-inset: var(
+ --truncate-marker-block-inset,
+ 0px
+ );
+ /* Duration of the fade out animation for the marker */
+ --truncate-internal-marker-fade-out-duration: var(
+ --truncate-marker-fade-out-duration,
+ 0ms
+ );
+ /* Duration of the fade in animation for the marker */
+ --truncate-internal-marker-fade-in-duration: var(
+ --truncate-marker-fade-in-duration,
+ 100ms
+ );
+
+ /* FADE Variant specifics */
+ --truncate-internal-fade-marker-color: var(
+ --truncate-fade-marker-color,
+ #000
+ );
+ --truncate-internal-fade-marker-width: var(
+ --truncate-fade-marker-width,
+ 0.2lh
+ );
+
+ /*
+ In some special cases people might be adding spacing in other ways
+ that would benefit from being able to override this, however the container
+ query below can't use this and would need to be redeclared with the overridden
+ value. It's a bad time, but better than nothing.
+ */
+ --truncate-internal-single-line-height: 1lh;
+
+ height: var(--truncate-internal-single-line-height);
+ min-width: 0;
+ overflow: hidden;
+ }
+
+ [data-truncate-marker] {
+ display: flex;
+ position: absolute;
+ height: var(--truncate-internal-single-line-height);
+ padding-block: var(--truncate-internal-marker-block-inset);
+ box-sizing: border-box;
+ align-items: center;
+ background-clip: content-box;
+ z-index: 2;
+ color: color-mix(
+ in srgb,
+ currentColor var(--truncate-internal-marker-opacity),
+ transparent
+ );
+
+ /* Core trick for hiding the marker until overflow occurs */
+ opacity: 0;
+ transition: opacity var(--truncate-internal-marker-fade-out-duration)
+ ease-in-out;
+ }
+
+ @container measure (height > 1lh) {
+ [data-truncate-marker] {
+ opacity: 1;
+ transition: opacity var(--truncate-internal-marker-fade-in-duration)
+ ease-in-out;
+ }
+ }
+
+ [data-truncate-grid] {
+ display: grid;
+ position: relative;
+ }
+
+ [data-truncate-content='visible'] {
+ white-space: nowrap;
+ }
+
+ [data-truncate-content='overflow'] {
+ opacity: 0;
+ pointer-events: none;
+ -webkit-user-select: none;
+ user-select: none;
+ word-break: break-all;
+ margin-top: calc(-1 * var(--truncate-internal-single-line-height));
+ }
+
+ [data-truncate-marker-cell] {
+ container: measure / size;
+ overflow: visible;
+ -webkit-user-select: none;
+ user-select: none;
+ pointer-events: none;
+ }
+
+ [data-truncate-container='truncate'] {
+ & [data-truncate-grid] {
+ grid-template-columns: minmax(0, max-content) 0;
+ }
+ & [data-truncate-marker] {
+ right: 0;
+ }
+ & [data-truncate-fade] {
+ margin-right: calc(-2 * var(--truncate-internal-fade-marker-width));
+ }
+ }
+
+ [data-truncate-container='fruncate'] {
+ & [data-truncate-grid] {
+ grid-template-columns: 0 minmax(0, max-content) auto;
+ }
+ & [data-truncate-content] {
+ direction: rtl;
+ }
+ & [data-truncate-content] > span {
+ unicode-bidi: plaintext;
+ }
+ & [data-truncate-fade] {
+ margin-left: calc(-2 * var(--truncate-internal-fade-marker-width));
+ }
+ }
+
+ [data-truncate-variant='default'] {
+ & [data-truncate-marker] {
+ background-color: var(--truncate-internal-marker-background-color);
+ background-image: linear-gradient(
+ var(--truncate-internal-marker-background-overlay-color),
+ var(--truncate-internal-marker-background-overlay-color)
+ );
+ }
+ & [data-truncate-marker]::after,
+ & [data-truncate-marker]::before {
+ content: '';
+ position: absolute;
+ width: calc(
+ var(--truncate-internal-marker-fade-width) +
+ var(--truncate-internal-marker-gap)
+ );
+ inset-block-start: var(--truncate-internal-marker-block-inset);
+ height: max(
+ 0px,
+ calc(
+ var(--truncate-internal-single-line-height) -
+ var(--truncate-internal-marker-block-inset) * 2
+ )
+ );
+ background-color: var(--truncate-internal-marker-background-color);
+ background-image: linear-gradient(
+ var(--truncate-internal-marker-background-overlay-color),
+ var(--truncate-internal-marker-background-overlay-color)
+ );
+ mask-image: linear-gradient(
+ var(--truncate-internal-fade-dir),
+ #000 0%,
+ #000 var(--truncate-internal-marker-gap),
+ transparent 100%
+ );
+ }
+ & [data-truncate-marker]::after {
+ --truncate-internal-fade-dir: to right;
+ right: calc(
+ -1 *
+ (
+ var(--truncate-internal-marker-fade-width) +
+ var(--truncate-internal-marker-gap)
+ )
+ );
+ }
+ & [data-truncate-marker]::before {
+ --truncate-internal-fade-dir: to left;
+ left: calc(
+ -1 *
+ (
+ var(--truncate-internal-marker-fade-width) +
+ var(--truncate-internal-marker-gap)
+ )
+ );
+ }
+ }
+
+ [data-truncate-variant='fade'] {
+ & [data-truncate-marker] {
+ background: transparent;
+ }
+ }
+
+ [data-truncate-fade] {
+ box-shadow:
+ 0 0 calc(var(--truncate-internal-fade-marker-width) / 2)
+ var(--truncate-internal-fade-marker-color),
+ 0 0 var(--truncate-internal-fade-marker-width)
+ var(--truncate-internal-fade-marker-color);
+ width: calc(var(--truncate-internal-fade-marker-width) * 2);
+ height: calc(
+ var(--truncate-internal-single-line-height) -
+ (var(--truncate-internal-fade-marker-width) * 2)
+ );
+ margin: var(--truncate-internal-fade-marker-width) 0;
+ }
+
+ [data-truncate-group-container='middle'] {
+ & [data-truncate-container] {
+ --truncate-marker-opacity: var(--truncate-internal-middle-marker-opacity);
+ }
+
+ display: flex;
+ min-width: 0;
+
+ & > div {
+ min-width: 0;
+ }
+
+ & > div[data-truncate-segment-priority='1'] {
+ flex: 0 1 max-content;
+ }
+ & > div[data-truncate-segment-priority='2'] {
+ flex: 0 999999 max-content;
+ }
+ }
+}
+`;const _$="@layer base, unsafe;";function R$(t){return`${_$}
+@layer base {
+ ${t}
+}`}function rw(t){return`${_$}
+@layer unsafe {
+ ${t}
+}`}const Z$=new WeakMap;function sw(t){const e=Z$.get(t);if(e!=null)return e;const i=document.createElement("div");i.setAttribute(cx,"true");const n=document.createElement("div");n.style.position="relative",n.style.height="200%",i.appendChild(n),t.appendChild(i);const O=Math.max(i.offsetWidth-i.clientWidth,0);return i.remove(),Z$.set(t,O),O}function ow(t,e){if(!t.isConnected)return;const i=sw(e);if(i==null)return;const n=e.querySelector(`style[${wf}]`),O=n instanceof HTMLStyleElement?n:document.createElement("style");n instanceof HTMLStyleElement||(O.setAttribute(wf,""),e.appendChild(O)),O.textContent=`:host { ${hx}: ${i}px; }`}let Oo;function aw(t){if(typeof CSSStyleSheet<"u"&&typeof CSSStyleSheet.prototype.replaceSync=="function"&&"adoptedStyleSheets"in t){Oo==null&&(Oo=new CSSStyleSheet,Oo.replaceSync(R$(k$)));let e=!1;try{t.adoptedStyleSheets=[Oo],e=!0}catch{}if(e){t.querySelector(`style[${Tl}]`)?.remove();return}}if(t.querySelector(`style[${Tl}]`)==null){const e=document.createElement("style");e.setAttribute(Tl,""),e.textContent=R$(k$),t.prepend(e)}}function Ll(t,e){lw(t,e),aw(e),ow(t,e)}function lw(t,e){const i=t.querySelector('template[shadowrootmode="open"], template[data-file-tree-shadowrootmode="open"]');i instanceof HTMLTemplateElement&&(e.childNodes.length>0||(e.appendChild(i.content.cloneNode(!0)),i.hasAttribute("shadowrootmode")&&i.remove()))}if(typeof HTMLElement<"u"&&customElements.get(ar)==null){class t extends HTMLElement{constructor(){super()}connectedCallback(){const i=this.shadowRoot??this.attachShadow({mode:"open"});Ll(this,i)}}if(customElements.define(ar,t),typeof document<"u")for(const e of Array.from(document.querySelectorAll(ar)))e instanceof HTMLElement&&Ll(e,e.shadowRoot??e.attachShadow({mode:"open"}))}const cw=!0,hw=t=>t.startsWith(vf)?t.slice(vf.length):t;function dw(t){const e=t.lastIndexOf("/");return e<0?{parentPath:"",baseName:t}:{parentPath:t.slice(0,e),baseName:t.slice(e+1)}}function uw(t,e){return t===""?e:`${t}/${e}`}function fw({files:t,path:e,isFolder:i,nextBasename:n}){const O=hw(e),r=n.trim();if(r.length===0)return{error:"Name cannot be empty."};if(r.includes("/"))return{error:'Name cannot include "/".'};const{parentPath:s,baseName:o}=dw(O);if(r===o)return{nextFiles:t,sourcePath:O,destinationPath:O,isFolder:i};const a=uw(s,r),l=new Array(t.length),c=new Set;if(!i){const $=`${a}/`;let Q=!1;for(let p=0;p P));if(!p){if(h g&&C.top=i?oc:sQ($,rv(c+h,i,e.itemHeight)),g=p+1,b=ac(P)?oc:sQ(Math.max(g,P.startIndex-r),Math.min(i-1,P.endIndex+r)),X=Ov(b,e.itemHeight);return{occlusion:{firstOccludedIndex:Q,lastOccludedIndex:p,occludedCount:m},physical:{itemHeight:e.itemHeight,maxScrollTop:s,overscan:r,scrollTop:o,totalHeight:n,totalRowCount:i,viewportHeight:O},projected:{contentHeight:d,paneHeight:h,paneTop:c},sticky:{height:l,rows:a},visible:P,window:{endIndex:b.endIndex,height:X,offsetTop:ac(b)?0:b.startIndex*e.itemHeight,startIndex:b.startIndex}}}const cv={added:"A",deleted:"D",ignored:null,modified:"M",renamed:"R",untracked:"U"},hv={added:"Git status: added",deleted:"Git status: deleted",ignored:"Git status: ignored",modified:"Git status: modified",renamed:"Git status: renamed",untracked:"Git status: untracked"},dv="Contains git status items";function lQ(t){const{currentScrollTop:e,focusedIndex:i,itemHeight:n,topInset:O=0,viewportHeight:r}=t;if(i<0)return null;const s=Math.max(0,O),o=i*n,a=o+n;if(o
s&&ht(O,h-s,-1),ht(O,d-h,Q),dn(r,O,$),s=d}}return l(e),a(!o),o}static empty(e){return new De(e?[e,-1]:[],[])}static fromJSON(e){if(!Array.isArray(e))throw new RangeError("Invalid JSON representation of ChangeSet");let i=[],n=[];for(let O=0;Ou||d==u&&l.startSide>0&&l.endSide<=0)continue;(u-d||l.endSide-l.startSide)<0||(s<0&&(s=d),l.point&&(o=Math.max(o,u-d)),n.push(l),O.push(d-s),r.push(u-s))}return{mapped:n.length?new Zc(O,r,n,o):null,pos:s}}}class re{constructor(e,i,n,O){this.chunkPos=e,this.chunk=i,this.nextLayer=n,this.maxPoint=O}static create(e,i,n,O){return new re(e,i,n,O)}get length(){let e=this.chunk.length-1;return e<0?0:Math.max(this.chunkEnd(e),this.nextLayer.length)}get size(){if(this.isEmpty)return 0;let e=this.nextLayer.size;for(let i of this.chunk)e+=i.value.length;return e}chunkEnd(e){return this.chunkPos[e]+this.chunk[e].length}update(e){let{add:i=[],sort:n=!1,filterFrom:O=0,filterTo:r=this.length}=e,s=e.filter;if(i.length==0&&!s)return this;if(n&&(i=i.slice().sort(Rc)),this.isEmpty)return i.length?re.of(i):this;let o=new $p(this,null,-1).goto(0),a=0,l=[],c=new Ei;for(;o.value||as)break;o=u,d<=0&&t.next(),d>=0&&i.next()}}function zc(t,e){if(t.length!=e.length)return!1;for(let i=0;i{if(this.cache.add(s),s.isComposite())return!1},enter:s=>this.cache.add(s),leave:()=>{},break:()=>{}}}run(e,i){let n=i&&this.getCompositionContext(i.text);for(let O=0,r=0,s=0;;){let o=sO(t)),i.from,e.head>i.from?-1:1);return n==i.from?i:x.cursor(n,n2e6)for(let y of e)y.from>=c.from&&y.from