This is page 138 of 141. Use http://codebase.md/xmlui-org/xmlui/tools/vscode/resources/%7BimageSrc%7D?format=md&page={x} to view the full context.

# Directory Structure

```
├── .changeset
│   └── config.json
├── .eslintrc.cjs
├── .github
│   ├── build-checklist.png
│   ├── ISSUE_TEMPLATE
│   │   ├── bug_report.md
│   │   └── feature_request.md
│   └── workflows
│       ├── deploy-blog.yml
│       ├── deploy-docs-optimized.yml
│       ├── deploy-docs.yml
│       ├── prepare-versions.yml
│       ├── release-packages.yml
│       ├── run-all-tests.yml
│       └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│   ├── launch.json
│   └── settings.json
├── blog
│   ├── .gitignore
│   ├── .gitkeep
│   ├── CHANGELOG.md
│   ├── extensions.ts
│   ├── index.html
│   ├── index.ts
│   ├── layout-changes.md
│   ├── package.json
│   ├── public
│   │   ├── blog
│   │   │   ├── images
│   │   │   │   ├── blog-page-component.png
│   │   │   │   ├── blog-scrabble.png
│   │   │   │   ├── integrated-blog-search.png
│   │   │   │   └── lorem-ipsum.png
│   │   │   ├── lorem-ipsum.md
│   │   │   ├── newest-post.md
│   │   │   ├── older-post.md
│   │   │   └── welcome-to-the-xmlui-blog.md
│   │   ├── mockServiceWorker.js
│   │   ├── resources
│   │   │   ├── favicon.ico
│   │   │   ├── files
│   │   │   │   └── for-download
│   │   │   │       └── xmlui
│   │   │   │           └── xmlui-standalone.umd.js
│   │   │   ├── github.svg
│   │   │   ├── llms.txt
│   │   │   ├── logo-dark.svg
│   │   │   ├── logo.svg
│   │   │   ├── pg-popout.svg
│   │   │   ├── rss.svg
│   │   │   └── xmlui-logo.svg
│   │   ├── serve.json
│   │   └── web.config
│   ├── scripts
│   │   ├── download-latest-xmlui.js
│   │   ├── generate-rss.js
│   │   ├── get-releases.js
│   │   └── utils.js
│   ├── src
│   │   ├── components
│   │   │   ├── BlogOverview.xmlui
│   │   │   ├── BlogPage.xmlui
│   │   │   └── PageNotFound.xmlui
│   │   ├── config.ts
│   │   ├── Main.xmlui
│   │   └── themes
│   │       └── blog-theme.ts
│   └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│   ├── .gitignore
│   ├── CHANGELOG.md
│   ├── ComponentRefLinks.txt
│   ├── content
│   │   ├── _meta.json
│   │   ├── components
│   │   │   ├── _meta.json
│   │   │   ├── _overview.md
│   │   │   ├── APICall.md
│   │   │   ├── App.md
│   │   │   ├── AppHeader.md
│   │   │   ├── AppState.md
│   │   │   ├── AutoComplete.md
│   │   │   ├── Avatar.md
│   │   │   ├── Backdrop.md
│   │   │   ├── Badge.md
│   │   │   ├── BarChart.md
│   │   │   ├── Bookmark.md
│   │   │   ├── Breakout.md
│   │   │   ├── Button.md
│   │   │   ├── Card.md
│   │   │   ├── Carousel.md
│   │   │   ├── ChangeListener.md
│   │   │   ├── Checkbox.md
│   │   │   ├── CHStack.md
│   │   │   ├── ColorPicker.md
│   │   │   ├── Column.md
│   │   │   ├── ContentSeparator.md
│   │   │   ├── CVStack.md
│   │   │   ├── DataSource.md
│   │   │   ├── DateInput.md
│   │   │   ├── DatePicker.md
│   │   │   ├── DonutChart.md
│   │   │   ├── DropdownMenu.md
│   │   │   ├── EmojiSelector.md
│   │   │   ├── ExpandableItem.md
│   │   │   ├── FileInput.md
│   │   │   ├── FileUploadDropZone.md
│   │   │   ├── FlowLayout.md
│   │   │   ├── Footer.md
│   │   │   ├── Form.md
│   │   │   ├── FormItem.md
│   │   │   ├── FormSection.md
│   │   │   ├── Fragment.md
│   │   │   ├── H1.md
│   │   │   ├── H2.md
│   │   │   ├── H3.md
│   │   │   ├── H4.md
│   │   │   ├── H5.md
│   │   │   ├── H6.md
│   │   │   ├── Heading.md
│   │   │   ├── HSplitter.md
│   │   │   ├── HStack.md
│   │   │   ├── Icon.md
│   │   │   ├── IFrame.md
│   │   │   ├── Image.md
│   │   │   ├── Items.md
│   │   │   ├── LabelList.md
│   │   │   ├── Legend.md
│   │   │   ├── LineChart.md
│   │   │   ├── Link.md
│   │   │   ├── List.md
│   │   │   ├── Logo.md
│   │   │   ├── Markdown.md
│   │   │   ├── MenuItem.md
│   │   │   ├── MenuSeparator.md
│   │   │   ├── ModalDialog.md
│   │   │   ├── NavGroup.md
│   │   │   ├── NavLink.md
│   │   │   ├── NavPanel.md
│   │   │   ├── NoResult.md
│   │   │   ├── NumberBox.md
│   │   │   ├── Option.md
│   │   │   ├── Page.md
│   │   │   ├── PageMetaTitle.md
│   │   │   ├── Pages.md
│   │   │   ├── Pagination.md
│   │   │   ├── PasswordInput.md
│   │   │   ├── PieChart.md
│   │   │   ├── ProgressBar.md
│   │   │   ├── Queue.md
│   │   │   ├── RadioGroup.md
│   │   │   ├── RealTimeAdapter.md
│   │   │   ├── Redirect.md
│   │   │   ├── Select.md
│   │   │   ├── Slider.md
│   │   │   ├── Slot.md
│   │   │   ├── SpaceFiller.md
│   │   │   ├── Spinner.md
│   │   │   ├── Splitter.md
│   │   │   ├── Stack.md
│   │   │   ├── StickyBox.md
│   │   │   ├── SubMenuItem.md
│   │   │   ├── Switch.md
│   │   │   ├── TabItem.md
│   │   │   ├── Table.md
│   │   │   ├── TableOfContents.md
│   │   │   ├── Tabs.md
│   │   │   ├── Text.md
│   │   │   ├── TextArea.md
│   │   │   ├── TextBox.md
│   │   │   ├── Theme.md
│   │   │   ├── TimeInput.md
│   │   │   ├── Timer.md
│   │   │   ├── ToneChangerButton.md
│   │   │   ├── ToneSwitch.md
│   │   │   ├── Tooltip.md
│   │   │   ├── Tree.md
│   │   │   ├── VSplitter.md
│   │   │   ├── VStack.md
│   │   │   ├── xmlui-animations
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   ├── Animation.md
│   │   │   │   ├── FadeAnimation.md
│   │   │   │   ├── FadeInAnimation.md
│   │   │   │   ├── FadeOutAnimation.md
│   │   │   │   ├── ScaleAnimation.md
│   │   │   │   └── SlideInAnimation.md
│   │   │   ├── xmlui-pdf
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   └── Pdf.md
│   │   │   ├── xmlui-spreadsheet
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   └── Spreadsheet.md
│   │   │   └── xmlui-website-blocks
│   │   │       ├── _meta.json
│   │   │       ├── _overview.md
│   │   │       ├── Carousel.md
│   │   │       ├── HelloMd.md
│   │   │       ├── HeroSection.md
│   │   │       └── ScrollToTop.md
│   │   └── extensions
│   │       ├── _meta.json
│   │       ├── xmlui-animations
│   │       │   ├── _meta.json
│   │       │   ├── _overview.md
│   │       │   ├── Animation.md
│   │       │   ├── FadeAnimation.md
│   │       │   ├── FadeInAnimation.md
│   │       │   ├── FadeOutAnimation.md
│   │       │   ├── ScaleAnimation.md
│   │       │   └── SlideInAnimation.md
│   │       └── xmlui-website-blocks
│   │           ├── _meta.json
│   │           ├── _overview.md
│   │           ├── Carousel.md
│   │           ├── HelloMd.md
│   │           ├── HeroSection.md
│   │           └── ScrollToTop.md
│   ├── extensions.ts
│   ├── index.html
│   ├── index.ts
│   ├── package.json
│   ├── public
│   │   ├── feed.rss
│   │   ├── mockServiceWorker.js
│   │   ├── pages
│   │   │   ├── _meta.json
│   │   │   ├── app-structure.md
│   │   │   ├── build-editor-component.md
│   │   │   ├── build-hello-world-component.md
│   │   │   ├── components-intro.md
│   │   │   ├── context-variables.md
│   │   │   ├── forms.md
│   │   │   ├── globals.md
│   │   │   ├── glossary.md
│   │   │   ├── helper-tags.md
│   │   │   ├── hosted-deployment.md
│   │   │   ├── howto
│   │   │   │   ├── assign-a-complex-json-literal-to-a-component-variable.md
│   │   │   │   ├── chain-a-refetch.md
│   │   │   │   ├── debug-a-component.md
│   │   │   │   ├── delay-a-datasource-until-another-datasource-is-ready.md
│   │   │   │   ├── delegate-a-method.md
│   │   │   │   ├── do-custom-form-validation.md
│   │   │   │   ├── expose-a-method-from-a-component.md
│   │   │   │   ├── filter-and-transform-data-from-an-api.md
│   │   │   │   ├── group-items-in-list-by-a-property.md
│   │   │   │   ├── handle-background-operations.md
│   │   │   │   ├── hide-an-element-until-its-datasource-is-ready.md
│   │   │   │   ├── make-a-set-of-equal-width-cards.md
│   │   │   │   ├── make-a-table-responsive.md
│   │   │   │   ├── make-navpanel-width-responsive.md
│   │   │   │   ├── modify-a-value-reported-in-a-column.md
│   │   │   │   ├── paginate-a-list.md
│   │   │   │   ├── pass-data-to-a-modal-dialog.md
│   │   │   │   ├── react-to-button-click-not-keystrokes.md
│   │   │   │   ├── set-the-initial-value-of-a-select-from-fetched-data.md
│   │   │   │   ├── share-a-modaldialog-across-components.md
│   │   │   │   ├── sync-selections-between-table-and-list-views.md
│   │   │   │   ├── update-ui-optimistically.md
│   │   │   │   ├── use-built-in-form-validation.md
│   │   │   │   └── use-the-same-modaldialog-to-add-or-edit.md
│   │   │   ├── howto.md
│   │   │   ├── intro.md
│   │   │   ├── layout.md
│   │   │   ├── markup.md
│   │   │   ├── mcp.md
│   │   │   ├── modal-dialogs.md
│   │   │   ├── news-and-reviews.md
│   │   │   ├── reactive-intro.md
│   │   │   ├── refactoring.md
│   │   │   ├── routing-and-links.md
│   │   │   ├── samples
│   │   │   │   ├── color-palette.xmlui
│   │   │   │   ├── color-values.xmlui
│   │   │   │   ├── shadow-sizes.xmlui
│   │   │   │   ├── spacing-sizes.xmlui
│   │   │   │   ├── swatch.xmlui
│   │   │   │   ├── theme-gallery-brief.xmlui
│   │   │   │   └── theme-gallery.xmlui
│   │   │   ├── scoping.md
│   │   │   ├── scripting.md
│   │   │   ├── styles-and-themes
│   │   │   │   ├── common-units.md
│   │   │   │   ├── layout-props.md
│   │   │   │   ├── theme-variable-defaults.md
│   │   │   │   ├── theme-variables.md
│   │   │   │   └── themes.md
│   │   │   ├── template-properties.md
│   │   │   ├── test.md
│   │   │   ├── tutorial-01.md
│   │   │   ├── tutorial-02.md
│   │   │   ├── tutorial-03.md
│   │   │   ├── tutorial-04.md
│   │   │   ├── tutorial-05.md
│   │   │   ├── tutorial-06.md
│   │   │   ├── tutorial-07.md
│   │   │   ├── tutorial-08.md
│   │   │   ├── tutorial-09.md
│   │   │   ├── tutorial-10.md
│   │   │   ├── tutorial-11.md
│   │   │   ├── tutorial-12.md
│   │   │   ├── universal-properties.md
│   │   │   ├── user-defined-components.md
│   │   │   ├── vscode.md
│   │   │   ├── working-with-markdown.md
│   │   │   ├── working-with-text.md
│   │   │   ├── xmlui-animations
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   ├── Animation.md
│   │   │   │   ├── FadeAnimation.md
│   │   │   │   ├── FadeInAnimation.md
│   │   │   │   ├── FadeOutAnimation.md
│   │   │   │   ├── ScaleAnimation.md
│   │   │   │   └── SlideInAnimation.md
│   │   │   ├── xmlui-charts
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   ├── BarChart.md
│   │   │   │   ├── DonutChart.md
│   │   │   │   ├── LabelList.md
│   │   │   │   ├── Legend.md
│   │   │   │   ├── LineChart.md
│   │   │   │   └── PieChart.md
│   │   │   ├── xmlui-pdf
│   │   │   │   ├── _meta.json
│   │   │   │   ├── _overview.md
│   │   │   │   └── Pdf.md
│   │   │   └── xmlui-spreadsheet
│   │   │       ├── _meta.json
│   │   │       ├── _overview.md
│   │   │       └── Spreadsheet.md
│   │   ├── resources
│   │   │   ├── devdocs
│   │   │   │   ├── debug-proxy-object-2.png
│   │   │   │   ├── debug-proxy-object.png
│   │   │   │   ├── table_editor_01.png
│   │   │   │   ├── table_editor_02.png
│   │   │   │   ├── table_editor_03.png
│   │   │   │   ├── table_editor_04.png
│   │   │   │   ├── table_editor_05.png
│   │   │   │   ├── table_editor_06.png
│   │   │   │   ├── table_editor_07.png
│   │   │   │   ├── table_editor_08.png
│   │   │   │   ├── table_editor_09.png
│   │   │   │   ├── table_editor_10.png
│   │   │   │   ├── table_editor_11.png
│   │   │   │   ├── table-editor-01.png
│   │   │   │   ├── table-editor-02.png
│   │   │   │   ├── table-editor-03.png
│   │   │   │   ├── table-editor-04.png
│   │   │   │   ├── table-editor-06.png
│   │   │   │   ├── table-editor-07.png
│   │   │   │   ├── table-editor-08.png
│   │   │   │   ├── table-editor-09.png
│   │   │   │   └── xmlui-rendering-of-tiptap-markdown.png
│   │   │   ├── favicon.ico
│   │   │   ├── files
│   │   │   │   ├── clients.json
│   │   │   │   ├── daily-revenue.json
│   │   │   │   ├── dashboard-stats.json
│   │   │   │   ├── demo.xmlui
│   │   │   │   ├── demo.xmlui.xs
│   │   │   │   ├── downloads
│   │   │   │   │   └── downloads.json
│   │   │   │   ├── for-download
│   │   │   │   │   ├── index-with-api.html
│   │   │   │   │   ├── index.html
│   │   │   │   │   ├── mockApi.js
│   │   │   │   │   ├── start-darwin.sh
│   │   │   │   │   ├── start-linux.sh
│   │   │   │   │   ├── start.bat
│   │   │   │   │   └── xmlui
│   │   │   │   │       └── xmlui-standalone.umd.js
│   │   │   │   ├── getting-started
│   │   │   │   │   ├── cl-tutorial-final.zip
│   │   │   │   │   ├── cl-tutorial.zip
│   │   │   │   │   ├── cl-tutorial2.zip
│   │   │   │   │   ├── cl-tutorial3.zip
│   │   │   │   │   ├── cl-tutorial4.zip
│   │   │   │   │   ├── cl-tutorial5.zip
│   │   │   │   │   ├── cl-tutorial6.zip
│   │   │   │   │   ├── getting-started.zip
│   │   │   │   │   ├── hello-xmlui.zip
│   │   │   │   │   ├── xmlui-empty.zip
│   │   │   │   │   └── xmlui-starter.zip
│   │   │   │   ├── howto
│   │   │   │   │   └── component-icons
│   │   │   │   │       └── up-arrow.svg
│   │   │   │   ├── invoices.json
│   │   │   │   ├── monthly-status.json
│   │   │   │   ├── news-and-reviews.json
│   │   │   │   ├── products.json
│   │   │   │   ├── releases.json
│   │   │   │   ├── tutorials
│   │   │   │   │   ├── datasource
│   │   │   │   │   │   └── api.ts
│   │   │   │   │   └── p2do
│   │   │   │   │       ├── api.ts
│   │   │   │   │       └── todo-logo.svg
│   │   │   │   └── xmlui.json
│   │   │   ├── github.svg
│   │   │   ├── images
│   │   │   │   ├── apiaction-tutorial
│   │   │   │   │   ├── add-success.png
│   │   │   │   │   ├── apiaction-param.png
│   │   │   │   │   ├── change-completed.png
│   │   │   │   │   ├── change-in-progress.png
│   │   │   │   │   ├── confirm-delete.png
│   │   │   │   │   ├── data-error.png
│   │   │   │   │   ├── data-progress.png
│   │   │   │   │   ├── data-success.png
│   │   │   │   │   ├── display-1.png
│   │   │   │   │   ├── item-deleted.png
│   │   │   │   │   ├── item-updated.png
│   │   │   │   │   ├── missing-api-key.png
│   │   │   │   │   ├── new-item-added.png
│   │   │   │   │   └── test-message.png
│   │   │   │   ├── chat-api
│   │   │   │   │   └── domain-model.svg
│   │   │   │   ├── components
│   │   │   │   │   ├── image
│   │   │   │   │   │   └── breakfast.jpg
│   │   │   │   │   ├── markdown
│   │   │   │   │   │   └── colors.png
│   │   │   │   │   └── modal
│   │   │   │   │       ├── deep_link_dialog_1.jpg
│   │   │   │   │       └── deep_link_dialog_2.jpg
│   │   │   │   ├── create-apps
│   │   │   │   │   ├── collapsed-vertical.png
│   │   │   │   │   ├── using-forms-warning-dialog.png
│   │   │   │   │   └── using-forms.png
│   │   │   │   ├── datasource-tutorial
│   │   │   │   │   ├── data-with-header.png
│   │   │   │   │   ├── filtered-data.png
│   │   │   │   │   ├── filtered-items.png
│   │   │   │   │   ├── initial-page-items.png
│   │   │   │   │   ├── list-items.png
│   │   │   │   │   ├── next-page-items.png
│   │   │   │   │   ├── no-data.png
│   │   │   │   │   ├── pagination-1.jpg
│   │   │   │   │   ├── pagination-1.png
│   │   │   │   │   ├── polling-1.png
│   │   │   │   │   ├── refetch-data.png
│   │   │   │   │   ├── slow-loading.png
│   │   │   │   │   ├── test-message.png
│   │   │   │   │   ├── Thumbs.db
│   │   │   │   │   ├── unconventional-data.png
│   │   │   │   │   └── unfiltered-items.png
│   │   │   │   ├── flower.jpg
│   │   │   │   ├── get-started
│   │   │   │   │   ├── add-new-contact.png
│   │   │   │   │   ├── app-modified.png
│   │   │   │   │   ├── app-start.png
│   │   │   │   │   ├── app-with-boxes.png
│   │   │   │   │   ├── app-with-toast.png
│   │   │   │   │   ├── boilerplate-structure.png
│   │   │   │   │   ├── cl-initial.png
│   │   │   │   │   ├── cl-start.png
│   │   │   │   │   ├── contact-counts.png
│   │   │   │   │   ├── contact-dialog-title.png
│   │   │   │   │   ├── contact-dialog.png
│   │   │   │   │   ├── contact-menus.png
│   │   │   │   │   ├── contact-predicates.png
│   │   │   │   │   ├── context-menu.png
│   │   │   │   │   ├── dashboard-numbers.png
│   │   │   │   │   ├── default-contact-list.png
│   │   │   │   │   ├── delete-contact.png
│   │   │   │   │   ├── delete-task.png
│   │   │   │   │   ├── detailed-template.png
│   │   │   │   │   ├── edit-contact-details.png
│   │   │   │   │   ├── edited-contact-saved.png
│   │   │   │   │   ├── empty-sections.png
│   │   │   │   │   ├── filter-completed.png
│   │   │   │   │   ├── fullwidth-desktop.png
│   │   │   │   │   ├── fullwidth-mobile.png
│   │   │   │   │   ├── initial-table.png
│   │   │   │   │   ├── items-and-badges.png
│   │   │   │   │   ├── loading-message.png
│   │   │   │   │   ├── new-contact-button.png
│   │   │   │   │   ├── new-contact-saved.png
│   │   │   │   │   ├── no-empty-sections.png
│   │   │   │   │   ├── personal-todo-initial.png
│   │   │   │   │   ├── piechart.png
│   │   │   │   │   ├── review-today.png
│   │   │   │   │   ├── rudimentary-dashboard.png
│   │   │   │   │   ├── section-collapsed.png
│   │   │   │   │   ├── sectioned-items.png
│   │   │   │   │   ├── sections-ordered.png
│   │   │   │   │   ├── spacex-list-with-links.png
│   │   │   │   │   ├── spacex-list.png
│   │   │   │   │   ├── start-personal-todo-1.png
│   │   │   │   │   ├── submit-new-contact.png
│   │   │   │   │   ├── submit-new-task.png
│   │   │   │   │   ├── syntax-highlighting.png
│   │   │   │   │   ├── table-with-badge.png
│   │   │   │   │   ├── template-with-card.png
│   │   │   │   │   ├── test-emulated-api.png
│   │   │   │   │   ├── Thumbs.db
│   │   │   │   │   ├── todo-logo.png
│   │   │   │   │   └── xmlui-tools.png
│   │   │   │   ├── HelloApp.png
│   │   │   │   ├── HelloApp2.png
│   │   │   │   ├── logos
│   │   │   │   │   ├── xmlui1.svg
│   │   │   │   │   ├── xmlui2.svg
│   │   │   │   │   ├── xmlui3.svg
│   │   │   │   │   ├── xmlui4.svg
│   │   │   │   │   ├── xmlui5.svg
│   │   │   │   │   ├── xmlui6.svg
│   │   │   │   │   └── xmlui7.svg
│   │   │   │   ├── pdf
│   │   │   │   │   └── dummy-pdf.jpg
│   │   │   │   ├── rendering-engine
│   │   │   │   │   ├── AppEngine-flow.svg
│   │   │   │   │   ├── Component.svg
│   │   │   │   │   ├── CompoundComponent.svg
│   │   │   │   │   ├── RootComponent.svg
│   │   │   │   │   └── tree-with-containers.svg
│   │   │   │   ├── reviewers-guide
│   │   │   │   │   ├── AppEngine-flow.svg
│   │   │   │   │   └── incbutton-in-action.png
│   │   │   │   ├── tools
│   │   │   │   │   └── boilerplate-structure.png
│   │   │   │   ├── try.svg
│   │   │   │   ├── tutorial
│   │   │   │   │   ├── app-chat-history.png
│   │   │   │   │   ├── app-content-placeholder.png
│   │   │   │   │   ├── app-header-and-content.png
│   │   │   │   │   ├── app-links-channel-selected.png
│   │   │   │   │   ├── app-links-click.png
│   │   │   │   │   ├── app-navigation.png
│   │   │   │   │   ├── finished-ex01.png
│   │   │   │   │   ├── finished-ex02.png
│   │   │   │   │   ├── hello.png
│   │   │   │   │   ├── splash-screen-advanced.png
│   │   │   │   │   ├── splash-screen-after-click.png
│   │   │   │   │   ├── splash-screen-centered.png
│   │   │   │   │   ├── splash-screen-events.png
│   │   │   │   │   ├── splash-screen-expression.png
│   │   │   │   │   ├── splash-screen-reuse-after.png
│   │   │   │   │   ├── splash-screen-reuse-before.png
│   │   │   │   │   └── splash-screen.png
│   │   │   │   └── tutorial-01.png
│   │   │   ├── llms.txt
│   │   │   ├── logo-dark.svg
│   │   │   ├── logo.svg
│   │   │   ├── pg-popout.svg
│   │   │   └── xmlui-logo.svg
│   │   ├── serve.json
│   │   └── web.config
│   ├── scripts
│   │   ├── download-latest-xmlui.js
│   │   ├── generate-rss.js
│   │   ├── get-releases.js
│   │   └── utils.js
│   ├── src
│   │   ├── components
│   │   │   ├── BlogOverview.xmlui
│   │   │   ├── BlogPage.xmlui
│   │   │   ├── Boxes.xmlui
│   │   │   ├── Breadcrumb.xmlui
│   │   │   ├── ChangeLog.xmlui
│   │   │   ├── ColorPalette.xmlui
│   │   │   ├── DocumentLinks.xmlui
│   │   │   ├── DocumentPage.xmlui
│   │   │   ├── DocumentPageNoTOC.xmlui
│   │   │   ├── Icons.xmlui
│   │   │   ├── IncButton.xmlui
│   │   │   ├── IncButton2.xmlui
│   │   │   ├── NameValue.xmlui
│   │   │   ├── PageNotFound.xmlui
│   │   │   ├── PaletteItem.xmlui
│   │   │   ├── Palettes.xmlui
│   │   │   ├── SectionHeader.xmlui
│   │   │   ├── TBD.xmlui
│   │   │   ├── Test.xmlui
│   │   │   ├── ThemesIntro.xmlui
│   │   │   ├── ThousandThemes.xmlui
│   │   │   ├── TubeStops.xmlui
│   │   │   ├── TubeStops.xmlui.xs
│   │   │   └── TwoColumnCode.xmlui
│   │   ├── config.ts
│   │   ├── Main.xmlui
│   │   └── themes
│   │       ├── docs-theme.ts
│   │       ├── earthtone.ts
│   │       ├── xmlui-gray-on-default.ts
│   │       ├── xmlui-green-on-default.ts
│   │       └── xmlui-orange-on-default.ts
│   └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│   ├── xmlui-animations
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   ├── src
│   │   │   ├── Animation.tsx
│   │   │   ├── AnimationNative.tsx
│   │   │   ├── FadeAnimation.tsx
│   │   │   ├── FadeInAnimation.tsx
│   │   │   ├── FadeOutAnimation.tsx
│   │   │   ├── index.tsx
│   │   │   ├── ScaleAnimation.tsx
│   │   │   └── SlideInAnimation.tsx
│   │   └── tsconfig.json
│   ├── xmlui-devtools
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   ├── src
│   │   │   ├── devtools
│   │   │   │   ├── DevTools.tsx
│   │   │   │   ├── DevToolsNative.module.scss
│   │   │   │   ├── DevToolsNative.tsx
│   │   │   │   ├── ModalDialog.module.scss
│   │   │   │   ├── ModalDialog.tsx
│   │   │   │   ├── ModalVisibilityContext.tsx
│   │   │   │   ├── Tooltip.module.scss
│   │   │   │   ├── Tooltip.tsx
│   │   │   │   └── utils.ts
│   │   │   ├── editor
│   │   │   │   └── Editor.tsx
│   │   │   └── index.tsx
│   │   ├── tsconfig.json
│   │   └── vite.config-overrides.ts
│   ├── xmlui-hello-world
│   │   ├── .gitignore
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   ├── src
│   │   │   ├── HelloWorld.module.scss
│   │   │   ├── HelloWorld.tsx
│   │   │   ├── HelloWorldNative.tsx
│   │   │   └── index.tsx
│   │   └── tsconfig.json
│   ├── xmlui-os-frames
│   │   ├── .gitignore
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   ├── src
│   │   │   ├── index.tsx
│   │   │   ├── IPhoneFrame.module.scss
│   │   │   ├── IPhoneFrame.tsx
│   │   │   ├── MacOSAppFrame.module.scss
│   │   │   ├── MacOSAppFrame.tsx
│   │   │   ├── WindowsAppFrame.module.scss
│   │   │   └── WindowsAppFrame.tsx
│   │   └── tsconfig.json
│   ├── xmlui-pdf
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── demo
│   │   │   ├── components
│   │   │   │   └── Pdf.xmlui
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   ├── src
│   │   │   ├── index.tsx
│   │   │   ├── LazyPdfNative.tsx
│   │   │   ├── Pdf.module.scss
│   │   │   └── Pdf.tsx
│   │   └── tsconfig.json
│   ├── xmlui-playground
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   ├── src
│   │   │   ├── hooks
│   │   │   │   ├── usePlayground.ts
│   │   │   │   └── useToast.ts
│   │   │   ├── index.tsx
│   │   │   ├── playground
│   │   │   │   ├── Box.module.scss
│   │   │   │   ├── Box.tsx
│   │   │   │   ├── CodeSelector.tsx
│   │   │   │   ├── ConfirmationDialog.module.scss
│   │   │   │   ├── ConfirmationDialog.tsx
│   │   │   │   ├── Editor.tsx
│   │   │   │   ├── Header.module.scss
│   │   │   │   ├── Header.tsx
│   │   │   │   ├── Playground.tsx
│   │   │   │   ├── PlaygroundContent.module.scss
│   │   │   │   ├── PlaygroundContent.tsx
│   │   │   │   ├── PlaygroundNative.module.scss
│   │   │   │   ├── PlaygroundNative.tsx
│   │   │   │   ├── Preview.module.scss
│   │   │   │   ├── Preview.tsx
│   │   │   │   ├── Select.module.scss
│   │   │   │   ├── StandalonePlayground.tsx
│   │   │   │   ├── StandalonePlaygroundNative.module.scss
│   │   │   │   ├── StandalonePlaygroundNative.tsx
│   │   │   │   ├── ThemeSwitcher.module.scss
│   │   │   │   ├── ThemeSwitcher.tsx
│   │   │   │   ├── ToneSwitcher.tsx
│   │   │   │   ├── Tooltip.module.scss
│   │   │   │   ├── Tooltip.tsx
│   │   │   │   └── utils.ts
│   │   │   ├── providers
│   │   │   │   ├── Toast.module.scss
│   │   │   │   └── ToastProvider.tsx
│   │   │   ├── state
│   │   │   │   └── store.ts
│   │   │   ├── themes
│   │   │   │   └── theme.ts
│   │   │   └── utils
│   │   │       └── helpers.ts
│   │   └── tsconfig.json
│   ├── xmlui-search
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   ├── src
│   │   │   ├── index.tsx
│   │   │   ├── Search.module.scss
│   │   │   └── Search.tsx
│   │   └── tsconfig.json
│   ├── xmlui-spreadsheet
│   │   ├── .gitignore
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   ├── src
│   │   │   ├── index.tsx
│   │   │   ├── Spreadsheet.tsx
│   │   │   └── SpreadsheetNative.tsx
│   │   └── tsconfig.json
│   └── xmlui-website-blocks
│       ├── .gitignore
│       ├── CHANGELOG.md
│       ├── demo
│       │   ├── components
│       │   │   ├── HeroBackgroundBreakoutPage.xmlui
│       │   │   ├── HeroBackgroundsPage.xmlui
│       │   │   ├── HeroContentsPage.xmlui
│       │   │   ├── HeroTextAlignPage.xmlui
│       │   │   ├── HeroTextPage.xmlui
│       │   │   └── HeroTonesPage.xmlui
│       │   ├── Main.xmlui
│       │   └── themes
│       │       └── default.ts
│       ├── index.html
│       ├── index.ts
│       ├── meta
│       │   └── componentsMetadata.ts
│       ├── package.json
│       ├── public
│       │   └── resources
│       │       ├── building.jpg
│       │       └── xmlui-logo.svg
│       ├── src
│       │   ├── Carousel
│       │   │   ├── Carousel.module.scss
│       │   │   ├── Carousel.tsx
│       │   │   ├── CarouselContext.tsx
│       │   │   └── CarouselNative.tsx
│       │   ├── FancyButton
│       │   │   ├── FancyButton.module.scss
│       │   │   ├── FancyButton.tsx
│       │   │   └── FancyButton.xmlui
│       │   ├── Hello
│       │   │   ├── Hello.tsx
│       │   │   ├── Hello.xmlui
│       │   │   └── Hello.xmlui.xs
│       │   ├── HeroSection
│       │   │   ├── HeroSection.module.scss
│       │   │   ├── HeroSection.tsx
│       │   │   └── HeroSectionNative.tsx
│       │   ├── index.tsx
│       │   ├── ScrollToTop
│       │   │   ├── ScrollToTop.module.scss
│       │   │   ├── ScrollToTop.tsx
│       │   │   └── ScrollToTopNative.tsx
│       │   └── vite-env.d.ts
│       └── tsconfig.json
├── README.md
├── tools
│   ├── codefence
│   │   └── xmlui-code-fence-docs.md
│   ├── create-app
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── create-app.ts
│   │   ├── helpers
│   │   │   ├── copy.ts
│   │   │   ├── get-pkg-manager.ts
│   │   │   ├── git.ts
│   │   │   ├── install.ts
│   │   │   ├── is-folder-empty.ts
│   │   │   ├── is-writeable.ts
│   │   │   ├── make-dir.ts
│   │   │   └── validate-pkg.ts
│   │   ├── index.ts
│   │   ├── package.json
│   │   ├── templates
│   │   │   ├── default
│   │   │   │   └── ts
│   │   │   │       ├── gitignore
│   │   │   │       ├── index.html
│   │   │   │       ├── index.ts
│   │   │   │       ├── public
│   │   │   │       │   ├── mockServiceWorker.js
│   │   │   │       │   ├── resources
│   │   │   │       │   │   ├── favicon.ico
│   │   │   │       │   │   └── xmlui-logo.svg
│   │   │   │       │   └── serve.json
│   │   │   │       └── src
│   │   │   │           ├── components
│   │   │   │           │   ├── ApiAware.xmlui
│   │   │   │           │   ├── Home.xmlui
│   │   │   │           │   ├── IncButton.xmlui
│   │   │   │           │   └── PagePanel.xmlui
│   │   │   │           ├── config.ts
│   │   │   │           └── Main.xmlui
│   │   │   ├── index.ts
│   │   │   └── types.ts
│   │   └── tsconfig.json
│   ├── create-xmlui-hello-world
│   │   ├── index.js
│   │   └── package.json
│   └── vscode
│       ├── .gitignore
│       ├── .vscode
│       │   ├── launch.json
│       │   └── tasks.json
│       ├── .vscodeignore
│       ├── build.sh
│       ├── CHANGELOG.md
│       ├── esbuild.js
│       ├── eslint.config.mjs
│       ├── formatter-docs.md
│       ├── generate-test-sample.sh
│       ├── LICENSE.md
│       ├── package-lock.json
│       ├── package.json
│       ├── README.md
│       ├── resources
│       │   ├── xmlui-logo.png
│       │   └── xmlui-markup-syntax-highlighting.png
│       ├── src
│       │   ├── extension.ts
│       │   └── server.ts
│       ├── syntaxes
│       │   └── xmlui.tmLanguage.json
│       ├── test-samples
│       │   └── sample.xmlui
│       ├── tsconfig.json
│       └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
    ├── .gitignore
    ├── bin
    │   ├── bootstrap.js
    │   ├── build-lib.ts
    │   ├── build.ts
    │   ├── index.ts
    │   ├── preview.ts
    │   ├── start.ts
    │   ├── vite-xmlui-plugin.ts
    │   └── viteConfig.ts
    ├── CHANGELOG.md
    ├── conventions
    │   ├── component-qa-checklist.md
    │   ├── copilot-conventions.md
    │   ├── create-xmlui-components.md
    │   ├── mermaid.md
    │   ├── testing-conventions.md
    │   └── xmlui-in-a-nutshell.md
    ├── dev-docs
    │   ├── accessibility.md
    │   ├── build-system.md
    │   ├── build-xmlui.md
    │   ├── component-behaviors.md
    │   ├── components-with-options.md
    │   ├── containers.md
    │   ├── data-operations.md
    │   ├── glossary.md
    │   ├── index.md
    │   ├── next
    │   │   ├── component-dev-guide.md
    │   │   ├── configuration-management-enhancement-summary.md
    │   │   ├── documentation-scripts-refactoring-complete-summary.md
    │   │   ├── documentation-scripts-refactoring-plan.md
    │   │   ├── duplicate-pattern-extraction-summary.md
    │   │   ├── error-handling-standardization-summary.md
    │   │   ├── generating-component-reference.md
    │   │   ├── index.md
    │   │   ├── logging-consistency-implementation-summary.md
    │   │   ├── project-build.md
    │   │   ├── project-structure.md
    │   │   ├── theme-context.md
    │   │   ├── tiptap-design-considerations.md
    │   │   ├── working-with-code.md
    │   │   ├── xmlui-runtime-architecture
    │   │   └── xmlui-wcag-accessibility-report.md
    │   ├── react-fundamentals.md
    │   ├── release-method.md
    │   ├── standalone-app.md
    │   ├── ud-components.md
    │   └── xmlui-repo.md
    ├── package.json
    ├── playwright.config.ts
    ├── scripts
    │   ├── coverage-only.js
    │   ├── e2e-test-summary.js
    │   ├── generate-docs
    │   │   ├── build-downloads-map.mjs
    │   │   ├── build-pages-map.mjs
    │   │   ├── components-config.json
    │   │   ├── configuration-management.mjs
    │   │   ├── constants.mjs
    │   │   ├── create-theme-files.mjs
    │   │   ├── DocsGenerator.mjs
    │   │   ├── error-handling.mjs
    │   │   ├── extensions-config.json
    │   │   ├── folders.mjs
    │   │   ├── generate-summary-files.mjs
    │   │   ├── get-docs.mjs
    │   │   ├── input-handler.mjs
    │   │   ├── logger.mjs
    │   │   ├── logging-standards.mjs
    │   │   ├── MetadataProcessor.mjs
    │   │   ├── pattern-utilities.mjs
    │   │   └── utils.mjs
    │   ├── get-langserver-metadata.mjs
    │   ├── inline-links.mjs
    │   └── README-e2e-summary.md
    ├── src
    │   ├── abstractions
    │   │   ├── _conventions.md
    │   │   ├── ActionDefs.ts
    │   │   ├── AppContextDefs.ts
    │   │   ├── ComponentDefs.ts
    │   │   ├── ContainerDefs.ts
    │   │   ├── ExtensionDefs.ts
    │   │   ├── FunctionDefs.ts
    │   │   ├── RendererDefs.ts
    │   │   ├── scripting
    │   │   │   ├── BlockScope.ts
    │   │   │   ├── Compilation.ts
    │   │   │   ├── LogicalThread.ts
    │   │   │   ├── LoopScope.ts
    │   │   │   ├── modules.ts
    │   │   │   ├── ScriptParserError.ts
    │   │   │   ├── Token.ts
    │   │   │   ├── TryScope.ts
    │   │   │   └── TryScopeExp.ts
    │   │   └── ThemingDefs.ts
    │   ├── components
    │   │   ├── _conventions.md
    │   │   ├── abstractions.ts
    │   │   ├── Accordion
    │   │   │   ├── Accordion.md
    │   │   │   ├── Accordion.module.scss
    │   │   │   ├── Accordion.spec.ts
    │   │   │   ├── Accordion.tsx
    │   │   │   ├── AccordionContext.tsx
    │   │   │   ├── AccordionItem.tsx
    │   │   │   ├── AccordionItemNative.tsx
    │   │   │   └── AccordionNative.tsx
    │   │   ├── Animation
    │   │   │   └── AnimationNative.tsx
    │   │   ├── APICall
    │   │   │   ├── APICall.md
    │   │   │   ├── APICall.spec.ts
    │   │   │   ├── APICall.tsx
    │   │   │   └── APICallNative.tsx
    │   │   ├── App
    │   │   │   ├── App.md
    │   │   │   ├── App.module.scss
    │   │   │   ├── App.spec.ts
    │   │   │   ├── App.tsx
    │   │   │   ├── AppLayoutContext.ts
    │   │   │   ├── AppNative.tsx
    │   │   │   ├── AppStateContext.ts
    │   │   │   ├── doc-resources
    │   │   │   │   ├── condensed-sticky.xmlui
    │   │   │   │   ├── condensed.xmlui
    │   │   │   │   ├── horizontal-sticky.xmlui
    │   │   │   │   ├── horizontal.xmlui
    │   │   │   │   ├── vertical-full-header.xmlui
    │   │   │   │   ├── vertical-sticky.xmlui
    │   │   │   │   └── vertical.xmlui
    │   │   │   ├── IndexerContext.ts
    │   │   │   ├── LinkInfoContext.ts
    │   │   │   ├── SearchContext.tsx
    │   │   │   ├── Sheet.module.scss
    │   │   │   └── Sheet.tsx
    │   │   ├── AppHeader
    │   │   │   ├── AppHeader.md
    │   │   │   ├── AppHeader.module.scss
    │   │   │   ├── AppHeader.spec.ts
    │   │   │   ├── AppHeader.tsx
    │   │   │   └── AppHeaderNative.tsx
    │   │   ├── AppState
    │   │   │   ├── AppState.md
    │   │   │   ├── AppState.spec.ts
    │   │   │   ├── AppState.tsx
    │   │   │   └── AppStateNative.tsx
    │   │   ├── AutoComplete
    │   │   │   ├── AutoComplete.md
    │   │   │   ├── AutoComplete.module.scss
    │   │   │   ├── AutoComplete.spec.ts
    │   │   │   ├── AutoComplete.tsx
    │   │   │   ├── AutoCompleteContext.tsx
    │   │   │   └── AutoCompleteNative.tsx
    │   │   ├── Avatar
    │   │   │   ├── Avatar.md
    │   │   │   ├── Avatar.module.scss
    │   │   │   ├── Avatar.spec.ts
    │   │   │   ├── Avatar.tsx
    │   │   │   └── AvatarNative.tsx
    │   │   ├── Backdrop
    │   │   │   ├── Backdrop.md
    │   │   │   ├── Backdrop.module.scss
    │   │   │   ├── Backdrop.spec.ts
    │   │   │   ├── Backdrop.tsx
    │   │   │   └── BackdropNative.tsx
    │   │   ├── Badge
    │   │   │   ├── Badge.md
    │   │   │   ├── Badge.module.scss
    │   │   │   ├── Badge.spec.ts
    │   │   │   ├── Badge.tsx
    │   │   │   └── BadgeNative.tsx
    │   │   ├── Bookmark
    │   │   │   ├── Bookmark.md
    │   │   │   ├── Bookmark.module.scss
    │   │   │   ├── Bookmark.spec.ts
    │   │   │   ├── Bookmark.tsx
    │   │   │   └── BookmarkNative.tsx
    │   │   ├── Breakout
    │   │   │   ├── Breakout.module.scss
    │   │   │   ├── Breakout.spec.ts
    │   │   │   ├── Breakout.tsx
    │   │   │   └── BreakoutNative.tsx
    │   │   ├── Button
    │   │   │   ├── Button-style.spec.ts
    │   │   │   ├── Button.md
    │   │   │   ├── Button.module.scss
    │   │   │   ├── Button.spec.ts
    │   │   │   ├── Button.tsx
    │   │   │   └── ButtonNative.tsx
    │   │   ├── Card
    │   │   │   ├── Card.md
    │   │   │   ├── Card.module.scss
    │   │   │   ├── Card.spec.ts
    │   │   │   ├── Card.tsx
    │   │   │   └── CardNative.tsx
    │   │   ├── Carousel
    │   │   │   ├── Carousel.md
    │   │   │   ├── Carousel.module.scss
    │   │   │   ├── Carousel.spec.ts
    │   │   │   ├── Carousel.tsx
    │   │   │   ├── CarouselContext.tsx
    │   │   │   ├── CarouselItem.tsx
    │   │   │   ├── CarouselItemNative.tsx
    │   │   │   └── CarouselNative.tsx
    │   │   ├── ChangeListener
    │   │   │   ├── ChangeListener.md
    │   │   │   ├── ChangeListener.spec.ts
    │   │   │   ├── ChangeListener.tsx
    │   │   │   └── ChangeListenerNative.tsx
    │   │   ├── chart-color-schemes.ts
    │   │   ├── Charts
    │   │   │   ├── AreaChart
    │   │   │   │   ├── AreaChart.md
    │   │   │   │   ├── AreaChart.spec.ts
    │   │   │   │   ├── AreaChart.tsx
    │   │   │   │   └── AreaChartNative.tsx
    │   │   │   ├── BarChart
    │   │   │   │   ├── BarChart.md
    │   │   │   │   ├── BarChart.module.scss
    │   │   │   │   ├── BarChart.spec.ts
    │   │   │   │   ├── BarChart.tsx
    │   │   │   │   └── BarChartNative.tsx
    │   │   │   ├── DonutChart
    │   │   │   │   ├── DonutChart.spec.ts
    │   │   │   │   └── DonutChart.tsx
    │   │   │   ├── LabelList
    │   │   │   │   ├── LabelList.spec.ts
    │   │   │   │   ├── LabelList.tsx
    │   │   │   │   ├── LabelListNative.module.scss
    │   │   │   │   └── LabelListNative.tsx
    │   │   │   ├── Legend
    │   │   │   │   ├── Legend.spec.ts
    │   │   │   │   ├── Legend.tsx
    │   │   │   │   └── LegendNative.tsx
    │   │   │   ├── LineChart
    │   │   │   │   ├── LineChart.md
    │   │   │   │   ├── LineChart.module.scss
    │   │   │   │   ├── LineChart.spec.ts
    │   │   │   │   ├── LineChart.tsx
    │   │   │   │   └── LineChartNative.tsx
    │   │   │   ├── PieChart
    │   │   │   │   ├── PieChart.md
    │   │   │   │   ├── PieChart.spec.ts
    │   │   │   │   ├── PieChart.tsx
    │   │   │   │   ├── PieChartNative.module.scss
    │   │   │   │   └── PieChartNative.tsx
    │   │   │   ├── RadarChart
    │   │   │   │   ├── RadarChart.md
    │   │   │   │   ├── RadarChart.spec.ts
    │   │   │   │   ├── RadarChart.tsx
    │   │   │   │   └── RadarChartNative.tsx
    │   │   │   ├── Tooltip
    │   │   │   │   ├── TooltipContent.module.scss
    │   │   │   │   ├── TooltipContent.spec.ts
    │   │   │   │   └── TooltipContent.tsx
    │   │   │   └── utils
    │   │   │       ├── abstractions.ts
    │   │   │       └── ChartProvider.tsx
    │   │   ├── Checkbox
    │   │   │   ├── Checkbox.md
    │   │   │   ├── Checkbox.spec.ts
    │   │   │   └── Checkbox.tsx
    │   │   ├── CodeBlock
    │   │   │   ├── CodeBlock.module.scss
    │   │   │   ├── CodeBlock.spec.ts
    │   │   │   ├── CodeBlock.tsx
    │   │   │   ├── CodeBlockNative.tsx
    │   │   │   └── highlight-code.ts
    │   │   ├── collectedComponentMetadata.ts
    │   │   ├── ColorPicker
    │   │   │   ├── ColorPicker.md
    │   │   │   ├── ColorPicker.module.scss
    │   │   │   ├── ColorPicker.spec.ts
    │   │   │   ├── ColorPicker.tsx
    │   │   │   └── ColorPickerNative.tsx
    │   │   ├── Column
    │   │   │   ├── Column.md
    │   │   │   ├── Column.tsx
    │   │   │   ├── ColumnNative.tsx
    │   │   │   ├── doc-resources
    │   │   │   │   └── list-component-data.js
    │   │   │   └── TableContext.tsx
    │   │   ├── component-utils.ts
    │   │   ├── ComponentProvider.tsx
    │   │   ├── ComponentRegistryContext.tsx
    │   │   ├── container-helpers.tsx
    │   │   ├── ContentSeparator
    │   │   │   ├── ContentSeparator.md
    │   │   │   ├── ContentSeparator.module.scss
    │   │   │   ├── ContentSeparator.spec.ts
    │   │   │   ├── ContentSeparator.tsx
    │   │   │   └── ContentSeparatorNative.tsx
    │   │   ├── DataSource
    │   │   │   ├── DataSource.md
    │   │   │   └── DataSource.tsx
    │   │   ├── DateInput
    │   │   │   ├── DateInput.md
    │   │   │   ├── DateInput.module.scss
    │   │   │   ├── DateInput.spec.ts
    │   │   │   ├── DateInput.tsx
    │   │   │   └── DateInputNative.tsx
    │   │   ├── DatePicker
    │   │   │   ├── DatePicker.md
    │   │   │   ├── DatePicker.module.scss
    │   │   │   ├── DatePicker.spec.ts
    │   │   │   ├── DatePicker.tsx
    │   │   │   └── DatePickerNative.tsx
    │   │   ├── DropdownMenu
    │   │   │   ├── DropdownMenu.md
    │   │   │   ├── DropdownMenu.module.scss
    │   │   │   ├── DropdownMenu.spec.ts
    │   │   │   ├── DropdownMenu.tsx
    │   │   │   ├── DropdownMenuNative.tsx
    │   │   │   ├── MenuItem.md
    │   │   │   └── SubMenuItem.md
    │   │   ├── EmojiSelector
    │   │   │   ├── EmojiSelector.md
    │   │   │   ├── EmojiSelector.spec.ts
    │   │   │   ├── EmojiSelector.tsx
    │   │   │   └── EmojiSelectorNative.tsx
    │   │   ├── ExpandableItem
    │   │   │   ├── ExpandableItem.module.scss
    │   │   │   ├── ExpandableItem.spec.ts
    │   │   │   ├── ExpandableItem.tsx
    │   │   │   └── ExpandableItemNative.tsx
    │   │   ├── FileInput
    │   │   │   ├── FileInput.md
    │   │   │   ├── FileInput.module.scss
    │   │   │   ├── FileInput.spec.ts
    │   │   │   ├── FileInput.tsx
    │   │   │   └── FileInputNative.tsx
    │   │   ├── FileUploadDropZone
    │   │   │   ├── FileUploadDropZone.md
    │   │   │   ├── FileUploadDropZone.module.scss
    │   │   │   ├── FileUploadDropZone.spec.ts
    │   │   │   ├── FileUploadDropZone.tsx
    │   │   │   └── FileUploadDropZoneNative.tsx
    │   │   ├── FlowLayout
    │   │   │   ├── FlowLayout.md
    │   │   │   ├── FlowLayout.module.scss
    │   │   │   ├── FlowLayout.spec.ts
    │   │   │   ├── FlowLayout.spec.ts-snapshots
    │   │   │   │   └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
    │   │   │   ├── FlowLayout.tsx
    │   │   │   └── FlowLayoutNative.tsx
    │   │   ├── Footer
    │   │   │   ├── Footer.md
    │   │   │   ├── Footer.module.scss
    │   │   │   ├── Footer.spec.ts
    │   │   │   ├── Footer.tsx
    │   │   │   └── FooterNative.tsx
    │   │   ├── Form
    │   │   │   ├── Form.md
    │   │   │   ├── Form.module.scss
    │   │   │   ├── Form.spec.ts
    │   │   │   ├── Form.tsx
    │   │   │   ├── formActions.ts
    │   │   │   ├── FormContext.ts
    │   │   │   └── FormNative.tsx
    │   │   ├── FormItem
    │   │   │   ├── FormItem.md
    │   │   │   ├── FormItem.module.scss
    │   │   │   ├── FormItem.spec.ts
    │   │   │   ├── FormItem.tsx
    │   │   │   ├── FormItemNative.tsx
    │   │   │   ├── HelperText.module.scss
    │   │   │   ├── HelperText.tsx
    │   │   │   ├── ItemWithLabel.tsx
    │   │   │   └── Validations.ts
    │   │   ├── FormSection
    │   │   │   ├── FormSection.md
    │   │   │   ├── FormSection.ts
    │   │   │   └── FormSection.xmlui
    │   │   ├── Fragment
    │   │   │   ├── Fragment.spec.ts
    │   │   │   └── Fragment.tsx
    │   │   ├── Heading
    │   │   │   ├── abstractions.ts
    │   │   │   ├── H1.md
    │   │   │   ├── H1.spec.ts
    │   │   │   ├── H2.md
    │   │   │   ├── H2.spec.ts
    │   │   │   ├── H3.md
    │   │   │   ├── H3.spec.ts
    │   │   │   ├── H4.md
    │   │   │   ├── H4.spec.ts
    │   │   │   ├── H5.md
    │   │   │   ├── H5.spec.ts
    │   │   │   ├── H6.md
    │   │   │   ├── H6.spec.ts
    │   │   │   ├── Heading.md
    │   │   │   ├── Heading.module.scss
    │   │   │   ├── Heading.spec.ts
    │   │   │   ├── Heading.tsx
    │   │   │   └── HeadingNative.tsx
    │   │   ├── HoverCard
    │   │   │   ├── HoverCard.tsx
    │   │   │   └── HovercardNative.tsx
    │   │   ├── HtmlTags
    │   │   │   ├── HtmlTags.module.scss
    │   │   │   ├── HtmlTags.spec.ts
    │   │   │   └── HtmlTags.tsx
    │   │   ├── Icon
    │   │   │   ├── AdmonitionDanger.tsx
    │   │   │   ├── AdmonitionInfo.tsx
    │   │   │   ├── AdmonitionNote.tsx
    │   │   │   ├── AdmonitionTip.tsx
    │   │   │   ├── AdmonitionWarning.tsx
    │   │   │   ├── ApiIcon.tsx
    │   │   │   ├── ArrowDropDown.module.scss
    │   │   │   ├── ArrowDropDown.tsx
    │   │   │   ├── ArrowDropUp.module.scss
    │   │   │   ├── ArrowDropUp.tsx
    │   │   │   ├── ArrowLeft.module.scss
    │   │   │   ├── ArrowLeft.tsx
    │   │   │   ├── ArrowRight.module.scss
    │   │   │   ├── ArrowRight.tsx
    │   │   │   ├── Attach.tsx
    │   │   │   ├── Binding.module.scss
    │   │   │   ├── Binding.tsx
    │   │   │   ├── BoardIcon.tsx
    │   │   │   ├── BoxIcon.tsx
    │   │   │   ├── CheckIcon.tsx
    │   │   │   ├── ChevronDownIcon.tsx
    │   │   │   ├── ChevronLeft.tsx
    │   │   │   ├── ChevronRight.tsx
    │   │   │   ├── ChevronUpIcon.tsx
    │   │   │   ├── CodeFileIcon.tsx
    │   │   │   ├── CodeSandbox.tsx
    │   │   │   ├── CompactListIcon.tsx
    │   │   │   ├── ContentCopyIcon.tsx
    │   │   │   ├── DarkToLightIcon.tsx
    │   │   │   ├── DatabaseIcon.module.scss
    │   │   │   ├── DatabaseIcon.tsx
    │   │   │   ├── DocFileIcon.tsx
    │   │   │   ├── DocIcon.tsx
    │   │   │   ├── DotMenuHorizontalIcon.tsx
    │   │   │   ├── DotMenuIcon.tsx
    │   │   │   ├── EmailIcon.tsx
    │   │   │   ├── EmptyFolderIcon.tsx
    │   │   │   ├── ErrorIcon.tsx
    │   │   │   ├── ExpressionIcon.tsx
    │   │   │   ├── FillPlusCricleIcon.tsx
    │   │   │   ├── FilterIcon.tsx
    │   │   │   ├── FolderIcon.tsx
    │   │   │   ├── GlobeIcon.tsx
    │   │   │   ├── HomeIcon.tsx
    │   │   │   ├── HyperLinkIcon.tsx
    │   │   │   ├── Icon.md
    │   │   │   ├── Icon.module.scss
    │   │   │   ├── Icon.spec.ts
    │   │   │   ├── Icon.tsx
    │   │   │   ├── IconNative.tsx
    │   │   │   ├── ImageFileIcon.tsx
    │   │   │   ├── Inspect.tsx
    │   │   │   ├── LightToDark.tsx
    │   │   │   ├── LinkIcon.tsx
    │   │   │   ├── ListIcon.tsx
    │   │   │   ├── LooseListIcon.tsx
    │   │   │   ├── MoonIcon.tsx
    │   │   │   ├── MoreOptionsIcon.tsx
    │   │   │   ├── NoSortIcon.tsx
    │   │   │   ├── PDFIcon.tsx
    │   │   │   ├── PenIcon.tsx
    │   │   │   ├── PhoneIcon.tsx
    │   │   │   ├── PhotoIcon.tsx
    │   │   │   ├── PlusIcon.tsx
    │   │   │   ├── SearchIcon.tsx
    │   │   │   ├── ShareIcon.tsx
    │   │   │   ├── SortAscendingIcon.tsx
    │   │   │   ├── SortDescendingIcon.tsx
    │   │   │   ├── StarsIcon.tsx
    │   │   │   ├── SunIcon.tsx
    │   │   │   ├── svg
    │   │   │   │   ├── admonition_danger.svg
    │   │   │   │   ├── admonition_info.svg
    │   │   │   │   ├── admonition_note.svg
    │   │   │   │   ├── admonition_tip.svg
    │   │   │   │   ├── admonition_warning.svg
    │   │   │   │   ├── api.svg
    │   │   │   │   ├── arrow-dropdown.svg
    │   │   │   │   ├── arrow-left.svg
    │   │   │   │   ├── arrow-right.svg
    │   │   │   │   ├── arrow-up.svg
    │   │   │   │   ├── attach.svg
    │   │   │   │   ├── binding.svg
    │   │   │   │   ├── box.svg
    │   │   │   │   ├── bulb.svg
    │   │   │   │   ├── code-file.svg
    │   │   │   │   ├── code-sandbox.svg
    │   │   │   │   ├── dark_to_light.svg
    │   │   │   │   ├── database.svg
    │   │   │   │   ├── doc.svg
    │   │   │   │   ├── empty-folder.svg
    │   │   │   │   ├── expression.svg
    │   │   │   │   ├── eye-closed.svg
    │   │   │   │   ├── eye-dark.svg
    │   │   │   │   ├── eye.svg
    │   │   │   │   ├── file-text.svg
    │   │   │   │   ├── filter.svg
    │   │   │   │   ├── folder.svg
    │   │   │   │   ├── img.svg
    │   │   │   │   ├── inspect.svg
    │   │   │   │   ├── light_to_dark.svg
    │   │   │   │   ├── moon.svg
    │   │   │   │   ├── pdf.svg
    │   │   │   │   ├── photo.svg
    │   │   │   │   ├── share.svg
    │   │   │   │   ├── stars.svg
    │   │   │   │   ├── sun.svg
    │   │   │   │   ├── trending-down.svg
    │   │   │   │   ├── trending-level.svg
    │   │   │   │   ├── trending-up.svg
    │   │   │   │   ├── txt.svg
    │   │   │   │   ├── unknown-file.svg
    │   │   │   │   ├── unlink.svg
    │   │   │   │   └── xls.svg
    │   │   │   ├── TableDeleteColumnIcon.tsx
    │   │   │   ├── TableDeleteRowIcon.tsx
    │   │   │   ├── TableInsertColumnIcon.tsx
    │   │   │   ├── TableInsertRowIcon.tsx
    │   │   │   ├── TrashIcon.tsx
    │   │   │   ├── TrendingDownIcon.tsx
    │   │   │   ├── TrendingLevelIcon.tsx
    │   │   │   ├── TrendingUpIcon.tsx
    │   │   │   ├── TxtIcon.tsx
    │   │   │   ├── UnknownFileIcon.tsx
    │   │   │   ├── UnlinkIcon.tsx
    │   │   │   ├── UserIcon.tsx
    │   │   │   ├── WarningIcon.tsx
    │   │   │   └── XlsIcon.tsx
    │   │   ├── IconProvider.tsx
    │   │   ├── IconRegistryContext.tsx
    │   │   ├── IFrame
    │   │   │   ├── IFrame.md
    │   │   │   ├── IFrame.module.scss
    │   │   │   ├── IFrame.spec.ts
    │   │   │   ├── IFrame.tsx
    │   │   │   └── IFrameNative.tsx
    │   │   ├── Image
    │   │   │   ├── Image.md
    │   │   │   ├── Image.module.scss
    │   │   │   ├── Image.spec.ts
    │   │   │   ├── Image.tsx
    │   │   │   └── ImageNative.tsx
    │   │   ├── Input
    │   │   │   ├── index.ts
    │   │   │   ├── InputAdornment.module.scss
    │   │   │   ├── InputAdornment.tsx
    │   │   │   ├── InputDivider.module.scss
    │   │   │   ├── InputDivider.tsx
    │   │   │   ├── InputLabel.module.scss
    │   │   │   ├── InputLabel.tsx
    │   │   │   ├── PartialInput.module.scss
    │   │   │   └── PartialInput.tsx
    │   │   ├── InspectButton
    │   │   │   ├── InspectButton.module.scss
    │   │   │   └── InspectButton.tsx
    │   │   ├── Items
    │   │   │   ├── Items.md
    │   │   │   ├── Items.spec.ts
    │   │   │   ├── Items.tsx
    │   │   │   └── ItemsNative.tsx
    │   │   ├── Link
    │   │   │   ├── Link.md
    │   │   │   ├── Link.module.scss
    │   │   │   ├── Link.spec.ts
    │   │   │   ├── Link.tsx
    │   │   │   └── LinkNative.tsx
    │   │   ├── List
    │   │   │   ├── doc-resources
    │   │   │   │   └── list-component-data.js
    │   │   │   ├── List.md
    │   │   │   ├── List.module.scss
    │   │   │   ├── List.spec.ts
    │   │   │   ├── List.tsx
    │   │   │   └── ListNative.tsx
    │   │   ├── Logo
    │   │   │   ├── doc-resources
    │   │   │   │   └── xmlui-logo.svg
    │   │   │   ├── Logo.md
    │   │   │   ├── Logo.tsx
    │   │   │   └── LogoNative.tsx
    │   │   ├── Markdown
    │   │   │   ├── CodeText.module.scss
    │   │   │   ├── CodeText.tsx
    │   │   │   ├── Markdown.md
    │   │   │   ├── Markdown.module.scss
    │   │   │   ├── Markdown.spec.ts
    │   │   │   ├── Markdown.tsx
    │   │   │   ├── MarkdownNative.tsx
    │   │   │   ├── parse-binding-expr.ts
    │   │   │   └── utils.ts
    │   │   ├── metadata-helpers.ts
    │   │   ├── ModalDialog
    │   │   │   ├── ConfirmationModalContextProvider.tsx
    │   │   │   ├── Dialog.module.scss
    │   │   │   ├── Dialog.tsx
    │   │   │   ├── ModalDialog.md
    │   │   │   ├── ModalDialog.module.scss
    │   │   │   ├── ModalDialog.spec.ts
    │   │   │   ├── ModalDialog.tsx
    │   │   │   ├── ModalDialogNative.tsx
    │   │   │   └── ModalVisibilityContext.tsx
    │   │   ├── NavGroup
    │   │   │   ├── NavGroup.md
    │   │   │   ├── NavGroup.module.scss
    │   │   │   ├── NavGroup.spec.ts
    │   │   │   ├── NavGroup.tsx
    │   │   │   ├── NavGroupContext.ts
    │   │   │   └── NavGroupNative.tsx
    │   │   ├── NavLink
    │   │   │   ├── NavLink.md
    │   │   │   ├── NavLink.module.scss
    │   │   │   ├── NavLink.spec.ts
    │   │   │   ├── NavLink.tsx
    │   │   │   └── NavLinkNative.tsx
    │   │   ├── NavPanel
    │   │   │   ├── NavPanel.md
    │   │   │   ├── NavPanel.module.scss
    │   │   │   ├── NavPanel.spec.ts
    │   │   │   ├── NavPanel.tsx
    │   │   │   └── NavPanelNative.tsx
    │   │   ├── NestedApp
    │   │   │   ├── AppWithCodeView.module.scss
    │   │   │   ├── AppWithCodeView.tsx
    │   │   │   ├── AppWithCodeViewNative.tsx
    │   │   │   ├── defaultProps.tsx
    │   │   │   ├── logo.svg
    │   │   │   ├── NestedApp.module.scss
    │   │   │   ├── NestedApp.tsx
    │   │   │   ├── NestedAppNative.tsx
    │   │   │   ├── Tooltip.module.scss
    │   │   │   ├── Tooltip.tsx
    │   │   │   └── utils.ts
    │   │   ├── NoResult
    │   │   │   ├── NoResult.md
    │   │   │   ├── NoResult.module.scss
    │   │   │   ├── NoResult.spec.ts
    │   │   │   ├── NoResult.tsx
    │   │   │   └── NoResultNative.tsx
    │   │   ├── NumberBox
    │   │   │   ├── numberbox-abstractions.ts
    │   │   │   ├── NumberBox.md
    │   │   │   ├── NumberBox.module.scss
    │   │   │   ├── NumberBox.spec.ts
    │   │   │   ├── NumberBox.tsx
    │   │   │   └── NumberBoxNative.tsx
    │   │   ├── Option
    │   │   │   ├── Option.md
    │   │   │   ├── Option.spec.ts
    │   │   │   ├── Option.tsx
    │   │   │   ├── OptionNative.tsx
    │   │   │   └── OptionTypeProvider.tsx
    │   │   ├── PageMetaTitle
    │   │   │   ├── PageMetaTilteNative.tsx
    │   │   │   ├── PageMetaTitle.md
    │   │   │   ├── PageMetaTitle.spec.ts
    │   │   │   └── PageMetaTitle.tsx
    │   │   ├── Pages
    │   │   │   ├── Page.md
    │   │   │   ├── Pages.md
    │   │   │   ├── Pages.module.scss
    │   │   │   ├── Pages.tsx
    │   │   │   └── PagesNative.tsx
    │   │   ├── Pagination
    │   │   │   ├── Pagination.md
    │   │   │   ├── Pagination.module.scss
    │   │   │   ├── Pagination.spec.ts
    │   │   │   ├── Pagination.tsx
    │   │   │   └── PaginationNative.tsx
    │   │   ├── PositionedContainer
    │   │   │   ├── PositionedContainer.module.scss
    │   │   │   ├── PositionedContainer.tsx
    │   │   │   └── PositionedContainerNative.tsx
    │   │   ├── ProfileMenu
    │   │   │   ├── ProfileMenu.module.scss
    │   │   │   └── ProfileMenu.tsx
    │   │   ├── ProgressBar
    │   │   │   ├── ProgressBar.md
    │   │   │   ├── ProgressBar.module.scss
    │   │   │   ├── ProgressBar.spec.ts
    │   │   │   ├── ProgressBar.tsx
    │   │   │   └── ProgressBarNative.tsx
    │   │   ├── Queue
    │   │   │   ├── Queue.md
    │   │   │   ├── Queue.spec.ts
    │   │   │   ├── Queue.tsx
    │   │   │   ├── queueActions.ts
    │   │   │   └── QueueNative.tsx
    │   │   ├── RadioGroup
    │   │   │   ├── RadioGroup.md
    │   │   │   ├── RadioGroup.module.scss
    │   │   │   ├── RadioGroup.spec.ts
    │   │   │   ├── RadioGroup.tsx
    │   │   │   ├── RadioGroupNative.tsx
    │   │   │   ├── RadioItem.tsx
    │   │   │   └── RadioItemNative.tsx
    │   │   ├── RealTimeAdapter
    │   │   │   ├── RealTimeAdapter.tsx
    │   │   │   └── RealTimeAdapterNative.tsx
    │   │   ├── Redirect
    │   │   │   ├── Redirect.md
    │   │   │   ├── Redirect.spec.ts
    │   │   │   └── Redirect.tsx
    │   │   ├── ResponsiveBar
    │   │   │   ├── README.md
    │   │   │   ├── ResponsiveBar.md
    │   │   │   ├── ResponsiveBar.module.scss
    │   │   │   ├── ResponsiveBar.spec.ts
    │   │   │   ├── ResponsiveBar.tsx
    │   │   │   └── ResponsiveBarNative.tsx
    │   │   ├── Select
    │   │   │   ├── HiddenOption.tsx
    │   │   │   ├── OptionContext.ts
    │   │   │   ├── Select.md
    │   │   │   ├── Select.module.scss
    │   │   │   ├── Select.spec.ts
    │   │   │   ├── Select.tsx
    │   │   │   ├── SelectContext.tsx
    │   │   │   └── SelectNative.tsx
    │   │   ├── SelectionStore
    │   │   │   ├── SelectionStore.md
    │   │   │   ├── SelectionStore.tsx
    │   │   │   └── SelectionStoreNative.tsx
    │   │   ├── Slider
    │   │   │   ├── Slider.md
    │   │   │   ├── Slider.module.scss
    │   │   │   ├── Slider.spec.ts
    │   │   │   ├── Slider.tsx
    │   │   │   └── SliderNative.tsx
    │   │   ├── Slot
    │   │   │   ├── Slot.md
    │   │   │   ├── Slot.spec.ts
    │   │   │   └── Slot.ts
    │   │   ├── SlotItem.tsx
    │   │   ├── SpaceFiller
    │   │   │   ├── SpaceFiller.md
    │   │   │   ├── SpaceFiller.module.scss
    │   │   │   ├── SpaceFiller.spec.ts
    │   │   │   ├── SpaceFiller.tsx
    │   │   │   └── SpaceFillerNative.tsx
    │   │   ├── Spinner
    │   │   │   ├── Spinner.md
    │   │   │   ├── Spinner.module.scss
    │   │   │   ├── Spinner.spec.ts
    │   │   │   ├── Spinner.tsx
    │   │   │   └── SpinnerNative.tsx
    │   │   ├── Splitter
    │   │   │   ├── HSplitter.md
    │   │   │   ├── HSplitter.spec.ts
    │   │   │   ├── Splitter.md
    │   │   │   ├── Splitter.module.scss
    │   │   │   ├── Splitter.spec.ts
    │   │   │   ├── Splitter.tsx
    │   │   │   ├── SplitterNative.tsx
    │   │   │   ├── utils.ts
    │   │   │   ├── VSplitter.md
    │   │   │   └── VSplitter.spec.ts
    │   │   ├── Stack
    │   │   │   ├── CHStack.md
    │   │   │   ├── CHStack.spec.ts
    │   │   │   ├── CVStack.md
    │   │   │   ├── CVStack.spec.ts
    │   │   │   ├── HStack.md
    │   │   │   ├── HStack.spec.ts
    │   │   │   ├── Stack.md
    │   │   │   ├── Stack.module.scss
    │   │   │   ├── Stack.spec.ts
    │   │   │   ├── Stack.tsx
    │   │   │   ├── StackNative.tsx
    │   │   │   ├── VStack.md
    │   │   │   └── VStack.spec.ts
    │   │   ├── StickyBox
    │   │   │   ├── StickyBox.md
    │   │   │   ├── StickyBox.module.scss
    │   │   │   ├── StickyBox.tsx
    │   │   │   └── StickyBoxNative.tsx
    │   │   ├── Switch
    │   │   │   ├── Switch.md
    │   │   │   ├── Switch.spec.ts
    │   │   │   └── Switch.tsx
    │   │   ├── Table
    │   │   │   ├── doc-resources
    │   │   │   │   └── list-component-data.js
    │   │   │   ├── react-table-config.d.ts
    │   │   │   ├── Table.md
    │   │   │   ├── Table.module.scss
    │   │   │   ├── Table.spec.ts
    │   │   │   ├── Table.tsx
    │   │   │   ├── TableNative.tsx
    │   │   │   └── useRowSelection.tsx
    │   │   ├── TableOfContents
    │   │   │   ├── TableOfContents.module.scss
    │   │   │   ├── TableOfContents.spec.ts
    │   │   │   ├── TableOfContents.tsx
    │   │   │   └── TableOfContentsNative.tsx
    │   │   ├── Tabs
    │   │   │   ├── TabContext.tsx
    │   │   │   ├── TabItem.md
    │   │   │   ├── TabItem.tsx
    │   │   │   ├── TabItemNative.tsx
    │   │   │   ├── Tabs.md
    │   │   │   ├── Tabs.module.scss
    │   │   │   ├── Tabs.spec.ts
    │   │   │   ├── Tabs.tsx
    │   │   │   └── TabsNative.tsx
    │   │   ├── Text
    │   │   │   ├── Text.md
    │   │   │   ├── Text.module.scss
    │   │   │   ├── Text.spec.ts
    │   │   │   ├── Text.tsx
    │   │   │   └── TextNative.tsx
    │   │   ├── TextArea
    │   │   │   ├── TextArea.md
    │   │   │   ├── TextArea.module.scss
    │   │   │   ├── TextArea.spec.ts
    │   │   │   ├── TextArea.tsx
    │   │   │   ├── TextAreaNative.tsx
    │   │   │   ├── TextAreaResizable.tsx
    │   │   │   └── useComposedRef.ts
    │   │   ├── TextBox
    │   │   │   ├── TextBox.md
    │   │   │   ├── TextBox.module.scss
    │   │   │   ├── TextBox.spec.ts
    │   │   │   ├── TextBox.tsx
    │   │   │   └── TextBoxNative.tsx
    │   │   ├── Theme
    │   │   │   ├── NotificationToast.tsx
    │   │   │   ├── Theme.md
    │   │   │   ├── Theme.module.scss
    │   │   │   ├── Theme.spec.ts
    │   │   │   ├── Theme.tsx
    │   │   │   └── ThemeNative.tsx
    │   │   ├── TimeInput
    │   │   │   ├── TimeInput.md
    │   │   │   ├── TimeInput.module.scss
    │   │   │   ├── TimeInput.spec.ts
    │   │   │   ├── TimeInput.tsx
    │   │   │   ├── TimeInputNative.tsx
    │   │   │   └── utils.ts
    │   │   ├── Timer
    │   │   │   ├── Timer.md
    │   │   │   ├── Timer.spec.ts
    │   │   │   ├── Timer.tsx
    │   │   │   └── TimerNative.tsx
    │   │   ├── Toggle
    │   │   │   ├── Toggle.module.scss
    │   │   │   └── Toggle.tsx
    │   │   ├── ToneChangerButton
    │   │   │   ├── ToneChangerButton.md
    │   │   │   ├── ToneChangerButton.spec.ts
    │   │   │   └── ToneChangerButton.tsx
    │   │   ├── ToneSwitch
    │   │   │   ├── ToneSwitch.md
    │   │   │   ├── ToneSwitch.module.scss
    │   │   │   ├── ToneSwitch.spec.ts
    │   │   │   ├── ToneSwitch.tsx
    │   │   │   └── ToneSwitchNative.tsx
    │   │   ├── Tooltip
    │   │   │   ├── Tooltip.md
    │   │   │   ├── Tooltip.module.scss
    │   │   │   ├── Tooltip.spec.ts
    │   │   │   ├── Tooltip.tsx
    │   │   │   └── TooltipNative.tsx
    │   │   ├── Tree
    │   │   │   ├── testData.ts
    │   │   │   ├── Tree-dynamic.spec.ts
    │   │   │   ├── Tree-icons.spec.ts
    │   │   │   ├── Tree.md
    │   │   │   ├── Tree.spec.ts
    │   │   │   ├── TreeComponent.module.scss
    │   │   │   ├── TreeComponent.tsx
    │   │   │   └── TreeNative.tsx
    │   │   ├── TreeDisplay
    │   │   │   ├── TreeDisplay.md
    │   │   │   ├── TreeDisplay.module.scss
    │   │   │   ├── TreeDisplay.tsx
    │   │   │   └── TreeDisplayNative.tsx
    │   │   ├── ValidationSummary
    │   │   │   ├── ValidationSummary.module.scss
    │   │   │   └── ValidationSummary.tsx
    │   │   └── VisuallyHidden.tsx
    │   ├── components-core
    │   │   ├── abstractions
    │   │   │   ├── ComponentRenderer.ts
    │   │   │   ├── LoaderRenderer.ts
    │   │   │   ├── standalone.ts
    │   │   │   └── treeAbstractions.ts
    │   │   ├── action
    │   │   │   ├── actions.ts
    │   │   │   ├── APICall.tsx
    │   │   │   ├── FileDownloadAction.tsx
    │   │   │   ├── FileUploadAction.tsx
    │   │   │   ├── NavigateAction.tsx
    │   │   │   └── TimedAction.tsx
    │   │   ├── ApiBoundComponent.tsx
    │   │   ├── appContext
    │   │   │   ├── date-functions.ts
    │   │   │   ├── math-function.ts
    │   │   │   └── misc-utils.ts
    │   │   ├── AppContext.tsx
    │   │   ├── behaviors
    │   │   │   ├── Behavior.tsx
    │   │   │   └── CoreBehaviors.tsx
    │   │   ├── component-hooks.ts
    │   │   ├── ComponentDecorator.tsx
    │   │   ├── ComponentViewer.tsx
    │   │   ├── CompoundComponent.tsx
    │   │   ├── constants.ts
    │   │   ├── DebugViewProvider.tsx
    │   │   ├── descriptorHelper.ts
    │   │   ├── devtools
    │   │   │   ├── InspectorDialog.module.scss
    │   │   │   ├── InspectorDialog.tsx
    │   │   │   └── InspectorDialogVisibilityContext.tsx
    │   │   ├── EngineError.ts
    │   │   ├── event-handlers.ts
    │   │   ├── InspectorButton.module.scss
    │   │   ├── InspectorContext.tsx
    │   │   ├── interception
    │   │   │   ├── abstractions.ts
    │   │   │   ├── ApiInterceptor.ts
    │   │   │   ├── ApiInterceptorProvider.tsx
    │   │   │   ├── apiInterceptorWorker.ts
    │   │   │   ├── Backend.ts
    │   │   │   ├── Errors.ts
    │   │   │   ├── IndexedDb.ts
    │   │   │   ├── initMock.ts
    │   │   │   ├── InMemoryDb.ts
    │   │   │   ├── ReadonlyCollection.ts
    │   │   │   └── useApiInterceptorContext.tsx
    │   │   ├── loader
    │   │   │   ├── ApiLoader.tsx
    │   │   │   ├── DataLoader.tsx
    │   │   │   ├── ExternalDataLoader.tsx
    │   │   │   ├── Loader.tsx
    │   │   │   ├── MockLoaderRenderer.tsx
    │   │   │   └── PageableLoader.tsx
    │   │   ├── LoaderComponent.tsx
    │   │   ├── markup-check.ts
    │   │   ├── parts.ts
    │   │   ├── renderers.ts
    │   │   ├── rendering
    │   │   │   ├── AppContent.tsx
    │   │   │   ├── AppRoot.tsx
    │   │   │   ├── AppWrapper.tsx
    │   │   │   ├── buildProxy.ts
    │   │   │   ├── collectFnVarDeps.ts
    │   │   │   ├── ComponentAdapter.tsx
    │   │   │   ├── ComponentWrapper.tsx
    │   │   │   ├── Container.tsx
    │   │   │   ├── containers.ts
    │   │   │   ├── ContainerWrapper.tsx
    │   │   │   ├── ErrorBoundary.module.scss
    │   │   │   ├── ErrorBoundary.tsx
    │   │   │   ├── InvalidComponent.module.scss
    │   │   │   ├── InvalidComponent.tsx
    │   │   │   ├── nodeUtils.ts
    │   │   │   ├── reducer.ts
    │   │   │   ├── renderChild.tsx
    │   │   │   ├── StandaloneComponent.tsx
    │   │   │   ├── StateContainer.tsx
    │   │   │   ├── UnknownComponent.module.scss
    │   │   │   ├── UnknownComponent.tsx
    │   │   │   └── valueExtractor.ts
    │   │   ├── reportEngineError.ts
    │   │   ├── RestApiProxy.ts
    │   │   ├── script-runner
    │   │   │   ├── asyncProxy.ts
    │   │   │   ├── AttributeValueParser.ts
    │   │   │   ├── bannedFunctions.ts
    │   │   │   ├── BindingTreeEvaluationContext.ts
    │   │   │   ├── eval-tree-async.ts
    │   │   │   ├── eval-tree-common.ts
    │   │   │   ├── eval-tree-sync.ts
    │   │   │   ├── ParameterParser.ts
    │   │   │   ├── process-statement-async.ts
    │   │   │   ├── process-statement-common.ts
    │   │   │   ├── process-statement-sync.ts
    │   │   │   ├── ScriptingSourceTree.ts
    │   │   │   ├── simplify-expression.ts
    │   │   │   ├── statement-queue.ts
    │   │   │   └── visitors.ts
    │   │   ├── StandaloneApp.tsx
    │   │   ├── StandaloneExtensionManager.ts
    │   │   ├── TableOfContentsContext.tsx
    │   │   ├── theming
    │   │   │   ├── _themes.scss
    │   │   │   ├── component-layout-resolver.ts
    │   │   │   ├── extendThemeUtils.ts
    │   │   │   ├── hvar.ts
    │   │   │   ├── layout-resolver.ts
    │   │   │   ├── parse-layout-props.ts
    │   │   │   ├── StyleContext.tsx
    │   │   │   ├── StyleRegistry.ts
    │   │   │   ├── ThemeContext.tsx
    │   │   │   ├── ThemeProvider.tsx
    │   │   │   ├── themes
    │   │   │   │   ├── base-utils.ts
    │   │   │   │   ├── palette.ts
    │   │   │   │   ├── root.ts
    │   │   │   │   ├── solid.ts
    │   │   │   │   ├── theme-colors.ts
    │   │   │   │   └── xmlui.ts
    │   │   │   ├── themeVars.module.scss
    │   │   │   ├── themeVars.ts
    │   │   │   ├── transformThemeVars.ts
    │   │   │   └── utils.ts
    │   │   ├── utils
    │   │   │   ├── actionUtils.ts
    │   │   │   ├── audio-utils.ts
    │   │   │   ├── base64-utils.ts
    │   │   │   ├── compound-utils.ts
    │   │   │   ├── css-utils.ts
    │   │   │   ├── DataLoaderQueryKeyGenerator.ts
    │   │   │   ├── date-utils.ts
    │   │   │   ├── extractParam.ts
    │   │   │   ├── hooks.tsx
    │   │   │   ├── LruCache.ts
    │   │   │   ├── mergeProps.ts
    │   │   │   ├── misc.ts
    │   │   │   ├── request-params.ts
    │   │   │   ├── statementUtils.ts
    │   │   │   └── treeUtils.ts
    │   │   └── xmlui-parser.ts
    │   ├── index-standalone.ts
    │   ├── index.scss
    │   ├── index.ts
    │   ├── language-server
    │   │   ├── server-common.ts
    │   │   ├── server-web-worker.ts
    │   │   ├── server.ts
    │   │   ├── services
    │   │   │   ├── common
    │   │   │   │   ├── docs-generation.ts
    │   │   │   │   ├── lsp-utils.ts
    │   │   │   │   ├── metadata-utils.ts
    │   │   │   │   └── syntax-node-utilities.ts
    │   │   │   ├── completion.ts
    │   │   │   ├── diagnostic.ts
    │   │   │   ├── format.ts
    │   │   │   └── hover.ts
    │   │   └── xmlui-metadata-generated.mjs
    │   ├── logging
    │   │   ├── LoggerContext.tsx
    │   │   ├── LoggerInitializer.tsx
    │   │   ├── LoggerService.ts
    │   │   └── xmlui.ts
    │   ├── logo.svg
    │   ├── parsers
    │   │   ├── common
    │   │   │   ├── GenericToken.ts
    │   │   │   ├── InputStream.ts
    │   │   │   └── utils.ts
    │   │   ├── scripting
    │   │   │   ├── code-behind-collect.ts
    │   │   │   ├── Lexer.ts
    │   │   │   ├── modules.ts
    │   │   │   ├── Parser.ts
    │   │   │   ├── ParserError.ts
    │   │   │   ├── ScriptingNodeTypes.ts
    │   │   │   ├── TokenTrait.ts
    │   │   │   ├── TokenType.ts
    │   │   │   └── tree-visitor.ts
    │   │   ├── style-parser
    │   │   │   ├── errors.ts
    │   │   │   ├── source-tree.ts
    │   │   │   ├── StyleInputStream.ts
    │   │   │   ├── StyleLexer.ts
    │   │   │   ├── StyleParser.ts
    │   │   │   └── tokens.ts
    │   │   └── xmlui-parser
    │   │       ├── CharacterCodes.ts
    │   │       ├── diagnostics.ts
    │   │       ├── fileExtensions.ts
    │   │       ├── index.ts
    │   │       ├── lint.ts
    │   │       ├── parser.ts
    │   │       ├── ParserError.ts
    │   │       ├── scanner.ts
    │   │       ├── syntax-kind.ts
    │   │       ├── syntax-node.ts
    │   │       ├── transform.ts
    │   │       ├── utils.ts
    │   │       ├── xmlui-serializer.ts
    │   │       └── xmlui-tree.ts
    │   ├── react-app-env.d.ts
    │   ├── syntax
    │   │   ├── monaco
    │   │   │   ├── grammar.monacoLanguage.ts
    │   │   │   ├── index.ts
    │   │   │   ├── xmlui-dark.ts
    │   │   │   ├── xmlui-light.ts
    │   │   │   └── xmluiscript.monacoLanguage.ts
    │   │   └── textMate
    │   │       ├── index.ts
    │   │       ├── xmlui-dark.json
    │   │       ├── xmlui-light.json
    │   │       ├── xmlui.json
    │   │       └── xmlui.tmLanguage.json
    │   ├── testing
    │   │   ├── assertions.ts
    │   │   ├── component-test-helpers.ts
    │   │   ├── ComponentDrivers.ts
    │   │   ├── drivers
    │   │   │   ├── DateInputDriver.ts
    │   │   │   ├── ModalDialogDriver.ts
    │   │   │   ├── NumberBoxDriver.ts
    │   │   │   ├── TextBoxDriver.ts
    │   │   │   ├── TimeInputDriver.ts
    │   │   │   ├── TimerDriver.ts
    │   │   │   └── TreeDriver.ts
    │   │   ├── fixtures.ts
    │   │   ├── infrastructure
    │   │   │   ├── index.html
    │   │   │   ├── main.tsx
    │   │   │   ├── public
    │   │   │   │   ├── mockServiceWorker.js
    │   │   │   │   ├── resources
    │   │   │   │   │   ├── bell.svg
    │   │   │   │   │   ├── box.svg
    │   │   │   │   │   ├── doc.svg
    │   │   │   │   │   ├── eye.svg
    │   │   │   │   │   ├── flower-640x480.jpg
    │   │   │   │   │   ├── sun.svg
    │   │   │   │   │   ├── test-image-100x100.jpg
    │   │   │   │   │   └── txt.svg
    │   │   │   │   └── serve.json
    │   │   │   └── TestBed.tsx
    │   │   └── themed-app-test-helpers.ts
    │   └── vite-env.d.ts
    ├── tests
    │   ├── components
    │   │   ├── CodeBlock
    │   │   │   └── hightlight-code.test.ts
    │   │   ├── playground-pattern.test.ts
    │   │   └── Tree
    │   │       └── Tree-states.test.ts
    │   ├── components-core
    │   │   ├── abstractions
    │   │   │   └── treeAbstractions.test.ts
    │   │   ├── container
    │   │   │   └── buildProxy.test.ts
    │   │   ├── interception
    │   │   │   ├── orderBy.test.ts
    │   │   │   ├── ReadOnlyCollection.test.ts
    │   │   │   └── request-param-converter.test.ts
    │   │   ├── scripts-runner
    │   │   │   ├── AttributeValueParser.test.ts
    │   │   │   ├── eval-tree-arrow-async.test.ts
    │   │   │   ├── eval-tree-arrow.test.ts
    │   │   │   ├── eval-tree-func-decl-async.test.ts
    │   │   │   ├── eval-tree-func-decl.test.ts
    │   │   │   ├── eval-tree-pre-post.test.ts
    │   │   │   ├── eval-tree-regression.test.ts
    │   │   │   ├── eval-tree.test.ts
    │   │   │   ├── function-proxy.test.ts
    │   │   │   ├── parser-regression.test.ts
    │   │   │   ├── process-event.test.ts
    │   │   │   ├── process-function.test.ts
    │   │   │   ├── process-implicit-context.test.ts
    │   │   │   ├── process-statement-asgn.test.ts
    │   │   │   ├── process-statement-destruct.test.ts
    │   │   │   ├── process-statement-regs.test.ts
    │   │   │   ├── process-statement-sync.test.ts
    │   │   │   ├── process-statement.test.ts
    │   │   │   ├── process-switch-sync.test.ts
    │   │   │   ├── process-switch.test.ts
    │   │   │   ├── process-try-sync.test.ts
    │   │   │   ├── process-try.test.ts
    │   │   │   └── test-helpers.ts
    │   │   ├── test-metadata-handler.ts
    │   │   ├── theming
    │   │   │   ├── border-segments.test.ts
    │   │   │   ├── component-layout.resolver.test.ts
    │   │   │   ├── layout-property-parser.test.ts
    │   │   │   ├── layout-resolver.test.ts
    │   │   │   ├── layout-resolver2.test.ts
    │   │   │   ├── layout-vp-override.test.ts
    │   │   │   └── padding-segments.test.ts
    │   │   └── utils
    │   │       ├── date-utils.test.ts
    │   │       ├── format-human-elapsed-time.test.ts
    │   │       └── LruCache.test.ts
    │   ├── language-server
    │   │   ├── completion.test.ts
    │   │   ├── format.test.ts
    │   │   ├── hover.test.ts
    │   │   └── mockData.ts
    │   └── parsers
    │       ├── common
    │       │   └── input-stream.test.ts
    │       ├── markdown
    │       │   └── parse-binding-expression.test.ts
    │       ├── parameter-parser.test.ts
    │       ├── paremeter-parser.test.ts
    │       ├── scripting
    │       │   ├── eval-tree-arrow.test.ts
    │       │   ├── eval-tree-pre-post.test.ts
    │       │   ├── eval-tree.test.ts
    │       │   ├── function-proxy.test.ts
    │       │   ├── lexer-literals.test.ts
    │       │   ├── lexer-misc.test.ts
    │       │   ├── module-parse.test.ts
    │       │   ├── parser-arrow.test.ts
    │       │   ├── parser-assignments.test.ts
    │       │   ├── parser-binary.test.ts
    │       │   ├── parser-destructuring.test.ts
    │       │   ├── parser-errors.test.ts
    │       │   ├── parser-expressions.test.ts
    │       │   ├── parser-function.test.ts
    │       │   ├── parser-literals.test.ts
    │       │   ├── parser-primary.test.ts
    │       │   ├── parser-regex.test.ts
    │       │   ├── parser-statements.test.ts
    │       │   ├── parser-unary.test.ts
    │       │   ├── process-event.test.ts
    │       │   ├── process-implicit-context.test.ts
    │       │   ├── process-statement-asgn.test.ts
    │       │   ├── process-statement-destruct.test.ts
    │       │   ├── process-statement-regs.test.ts
    │       │   ├── process-statement-sync.test.ts
    │       │   ├── process-statement.test.ts
    │       │   ├── process-switch-sync.test.ts
    │       │   ├── process-switch.test.ts
    │       │   ├── process-try-sync.test.ts
    │       │   ├── process-try.test.ts
    │       │   ├── simplify-expression.test.ts
    │       │   ├── statement-hooks.test.ts
    │       │   └── test-helpers.ts
    │       ├── style-parser
    │       │   ├── generateHvarChain.test.ts
    │       │   ├── parseHVar.test.ts
    │       │   ├── parser.test.ts
    │       │   └── tokens.test.ts
    │       └── xmlui
    │           ├── lint.test.ts
    │           ├── parser.test.ts
    │           ├── scanner.test.ts
    │           ├── transform.attr.test.ts
    │           ├── transform.circular.test.ts
    │           ├── transform.element.test.ts
    │           ├── transform.errors.test.ts
    │           ├── transform.escape.test.ts
    │           ├── transform.regression.test.ts
    │           ├── transform.script.test.ts
    │           ├── transform.test.ts
    │           └── xmlui.ts
    ├── tests-e2e
    │   ├── api-bound-component-regression.spec.ts
    │   ├── api-call-as-extracted-component.spec.ts
    │   ├── assign-to-object-or-array-regression.spec.ts
    │   ├── binding-regression.spec.ts
    │   ├── children-as-template-context-vars.spec.ts
    │   ├── compound-component.spec.ts
    │   ├── context-vars-regression.spec.ts
    │   ├── data-bindings.spec.ts
    │   ├── datasource-and-api-usage-in-var.spec.ts
    │   ├── datasource-direct-binding.spec.ts
    │   ├── datasource-onLoaded-regression.spec.ts
    │   ├── modify-array-item-regression.spec.ts
    │   ├── namespaces.spec.ts
    │   ├── push-to-array-regression.spec.ts
    │   ├── screen-breakpoints.spec.ts
    │   ├── scripting.spec.ts
    │   ├── state-scope-in-pages.spec.ts
    │   └── state-var-scopes.spec.ts
    ├── tsconfig.bin.json
    ├── tsconfig.json
    ├── tsconfig.node.json
    ├── vite.config.ts
    └── vitest.config.ts
```

# Files

--------------------------------------------------------------------------------
/xmlui/src/components/Tree/Tree.spec.ts:
--------------------------------------------------------------------------------

```typescript
import { SKIP_REASON } from "../../testing/component-test-helpers";
import { expect, test } from "../../testing/fixtures";

import {
  apiStyleData,
  apiStyleHierarchy,
  customDynamicTreeData,
  customFieldsData1,
  customFieldsData2,
  customFieldsHierarchy1,
  customFieldsHierarchy2,
  customIconFieldData,
  customIconFieldHierarchy,
  databaseStyleData,
  databaseStyleHierarchy,
  dataWithStateIcons,
  dynamicFlatData,
  dynamicTreeData,
  flatDataWithIcons,
  flatTreeData,
  hierarchyDataWithIcons,
  hierarchyTreeData,
  hierarchyWithStateIcons,
  multiBranchTreeData,
} from "./testData";

// =============================================================================
// BASIC FUNCTIONALITY TESTS
// =============================================================================

test.describe("Basic Functionality", () => {
  test("component renders with default props", async ({ initTestBed, createTreeDriver }) => {
    await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" dataFormat="flat" data='{${JSON.stringify(flatTreeData)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.id}" verticalAlignment="center">
                <Icon name="folder" />
                <Text value="{$item.name}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();
    await expect(tree.getByTestId("1")).toBeVisible();
    await expect(tree.getByTestId("2")).not.toBeVisible();
    await expect(tree.getByTestId("3")).not.toBeVisible();
    await expect(tree.getByTestId("4")).not.toBeVisible();
  });

  test("displays flat data format correctly", async ({ initTestBed, createTreeDriver }) => {
    await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" dataFormat="flat" defaultExpanded="all"
            data='{${JSON.stringify(flatTreeData)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.id}:{$item.depth}" verticalAlignment="center">
                <Icon name="folder" />
                <Text value="{$item.name}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();
    await expect(tree.getByTestId("1:0")).toBeVisible();
    await expect(tree.getByTestId("2:1")).toBeVisible();
    await expect(tree.getByTestId("3:1")).toBeVisible();
    await expect(tree.getByTestId("4:2")).toBeVisible();
  });

  test("displays hierarchy data format correctly", async ({ initTestBed, createTreeDriver }) => {
    await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" dataFormat="hierarchy" defaultExpanded="all"
            data='{${JSON.stringify(hierarchyTreeData)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.id}:{$item.depth}" verticalAlignment="center">
                <Icon name="folder" />
                <Text id="{$item.id}" value="{$item.name}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();
    await expect(tree.getByTestId("1:0")).toBeVisible();
    await expect(tree.getByTestId("2:1")).toBeVisible();
    await expect(tree.getByTestId("3:1")).toBeVisible();
    await expect(tree.getByTestId("4:2")).toBeVisible();
  });

  test("uses flat as default data format when dataFormat is not specified", async ({
    initTestBed,
    createTreeDriver,
  }) => {
    await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" defaultExpanded="all"
            data='{${JSON.stringify(flatTreeData)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.id}:{$item.depth}" verticalAlignment="center">
                <Icon name="folder" />
                <Text id="{$item.id}" value="{$item.name}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();
    await expect(tree.getByTestId("1:0")).toBeVisible();
    await expect(tree.getByTestId("2:1")).toBeVisible();
    await expect(tree.getByTestId("3:1")).toBeVisible();
    await expect(tree.getByTestId("4:2")).toBeVisible();
  });

  test("handles custom idField, nameField, and parentIdField mapping", async ({
    initTestBed,
    createTreeDriver,
  }) => {
    await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat" 
            defaultExpanded="all"
            idField="nodeId"
            nameField="title"
            parentIdField="parent"
            data='{${JSON.stringify(customFieldsData1)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.nodeId}:{$item.depth}" verticalAlignment="center">
                <Icon name="folder" />
                <Text value="{$item.title}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();
    await expect(tree.getByTestId("A1:0")).toBeVisible();
    await expect(tree.getByTestId("A2:1")).toBeVisible();
    await expect(tree.getByTestId("A3:1")).toBeVisible();
    await expect(tree.getByTestId("A4:2")).toBeVisible();
  });

  test("handles alternative field names (id, displayName, parentId)", async ({
    initTestBed,
    createTreeDriver,
  }) => {
    await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat" 
            defaultExpanded="all"
            idField="id"
            nameField="displayName"
            parentIdField="parentId"
            data='{${JSON.stringify(customFieldsData2)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.id}:{$item.depth}" verticalAlignment="center">
                <Icon name="folder" />
                <Text value="{$item.displayName}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();
    await expect(tree.getByTestId("100:0")).toBeVisible();
    await expect(tree.getByTestId("101:1")).toBeVisible();
    await expect(tree.getByTestId("102:1")).toBeVisible();
    await expect(tree.getByTestId("103:2")).toBeVisible();
  });

  test("handles database-style field names (pk, label, parent_id)", async ({
    initTestBed,
    createTreeDriver,
  }) => {
    await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat" 
            defaultExpanded="all"
            idField="pk"
            nameField="label"
            parentIdField="parent_id"
            data='{${JSON.stringify(databaseStyleData)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.pk}:{$item.depth}" verticalAlignment="center">
                <Icon name="folder" />
                <Text value="{$item.label}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();
    await expect(tree.getByTestId("root-1:0")).toBeVisible();
    await expect(tree.getByTestId("child-1:1")).toBeVisible();
    await expect(tree.getByTestId("child-2:1")).toBeVisible();
    await expect(tree.getByTestId("grandchild-1:2")).toBeVisible();
  });

  test("handles API-style field names (key, text, parentKey)", async ({
    initTestBed,
    createTreeDriver,
  }) => {
    await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat" 
            defaultExpanded="all"
            idField="key"
            nameField="text"
            parentIdField="parentKey"
            data='{${JSON.stringify(apiStyleData)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.key}:{$item.depth}" verticalAlignment="center">
                <Icon name="folder" />
                <Text value="{$item.text}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();
    await expect(tree.getByTestId("item1:0")).toBeVisible();
    await expect(tree.getByTestId("item2:1")).toBeVisible();
    await expect(tree.getByTestId("item3:1")).toBeVisible();
    await expect(tree.getByTestId("item4:2")).toBeVisible();
  });

  test("handles iconField mapping with default icon field name", async ({
    initTestBed,
    createTreeDriver,
  }) => {
    await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat" 
            defaultExpanded="all"
            data='{${JSON.stringify(flatDataWithIcons)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.id}:icon:{$item.icon}" verticalAlignment="center">
                <Text testId="icon:{$item.icon}" value="[{$item.icon}]" />
                <Text value="{$item.name}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();
    await expect(tree.getByTestId("1:icon:folder")).toBeVisible();
    await expect(tree.getByTestId("2:icon:file-pdf")).toBeVisible();
    await expect(tree.getByTestId("3:icon:folder")).toBeVisible();
    await expect(tree.getByTestId("4:icon:file-image")).toBeVisible();
    // Verify individual icon markers
    await expect(tree.getByTestId("icon:folder")).toBeVisible();
    await expect(tree.getByTestId("icon:file-pdf")).toBeVisible();
    await expect(tree.getByTestId("icon:file-image")).toBeVisible();
  });

  test("handles custom iconField mapping", async ({ initTestBed, createTreeDriver }) => {
    await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat" 
            defaultExpanded="all"
            idField="nodeId"
            nameField="title"
            iconField="iconType"
            parentIdField="parent"
            data='{${JSON.stringify(customIconFieldData)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.nodeId}:icon:{$item.iconType}" verticalAlignment="center">
                <Text testId="icon-type:{$item.iconType}" value="[{$item.iconType}]" />
                <Text value="{$item.title}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();
    await expect(tree.getByTestId("A1:icon:project-folder")).toBeVisible();
    await expect(tree.getByTestId("A2:icon:code-folder")).toBeVisible();
    await expect(tree.getByTestId("A3:icon:typescript-file")).toBeVisible();
    await expect(tree.getByTestId("A4:icon:typescript-file")).toBeVisible();
    // Verify individual icon type markers
    await expect(tree.getByTestId("icon-type:project-folder")).toBeVisible();
    await expect(tree.getByTestId("icon-type:code-folder")).toBeVisible();
    await expect(tree.getByTestId("icon-type:typescript-file")).toBeVisible();
  });

  test("handles iconExpandedField and iconCollapsedField mapping", async ({
    initTestBed,
    createTreeDriver,
  }) => {
    await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat" 
            iconField="icon"
            iconExpandedField="iconExpanded"
            iconCollapsedField="iconCollapsed"
            data='{${JSON.stringify(dataWithStateIcons)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.id}:icon:{$item.icon}:expanded:{$item.iconExpanded}:collapsed:{$item.iconCollapsed}" verticalAlignment="center">
                <Text testId="state-icon:{$isExpanded ? $item.iconExpanded : $item.iconCollapsed}" value="[{$isExpanded ? $item.iconExpanded || $item.icon : $item.iconCollapsed || $item.icon}]" />
                <Text value="{$item.name}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();
    await expect(
      tree.getByTestId("1:icon:folder:expanded:folder-open:collapsed:folder-closed"),
    ).toBeVisible();
    await expect(
      tree.getByTestId("2:icon:folder:expanded:folder-open:collapsed:folder-closed"),
    ).not.toBeVisible(); // Should be collapsed initially
    await expect(
      tree.getByTestId("3:icon:file-text:expanded:undefined:collapsed:undefined"),
    ).not.toBeVisible(); // Should be nested and collapsed
    // Verify collapsed state icons are shown initially (since defaultExpanded is not set)
    await expect(tree.getByTestId("state-icon:folder-closed")).toBeVisible();
  });

  test("handles missing icon fields gracefully", async ({ initTestBed, createTreeDriver }) => {
    await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat" 
            defaultExpanded="all"
            iconField="nonExistentIcon"
            data='{${JSON.stringify(flatTreeData)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.id}:icon:{$item.nonExistentIcon || 'no-icon'}" verticalAlignment="center">
                <Text testId="fallback-icon:{$item.nonExistentIcon || 'default'}" value="[{$item.nonExistentIcon || 'default'}]" />
                <Text value="{$item.name}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();
    await expect(tree.getByTestId("1:icon:no-icon")).toBeVisible();
    await expect(tree.getByTestId("2:icon:no-icon")).toBeVisible();
    await expect(tree.getByTestId("3:icon:no-icon")).toBeVisible();
    await expect(tree.getByTestId("4:icon:no-icon")).toBeVisible();
    // Verify fallback icons
    await expect(tree.getByTestId("fallback-icon:default")).toBeVisible();
  });

  // Selectable Field Mapping Tests
  test("handles default selectableField mapping (all nodes selectable by default)", async ({
    initTestBed,
    createTreeDriver,
  }) => {
    await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat" 
            defaultExpanded="all"
            data='{${JSON.stringify(flatTreeData)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.id}:selectable:{$item.selectable}" verticalAlignment="center">
                <Text value="{$item.name} (Selectable: {$item.selectable})" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();
    // All nodes should be selectable by default (true)
    await expect(tree.getByTestId("1:selectable:true")).toBeVisible();
    await expect(tree.getByTestId("2:selectable:true")).toBeVisible();
    await expect(tree.getByTestId("3:selectable:true")).toBeVisible();
    await expect(tree.getByTestId("4:selectable:true")).toBeVisible();
  });

  test("handles custom selectableField mapping with mixed selectable states", async ({
    initTestBed,
    createTreeDriver,
  }) => {
    const customSelectableData = [
      { id: "1", name: "Root Item 1", parentId: null, isSelectable: true },
      { id: "2", name: "Child Item 1.1", parentId: "1", isSelectable: false },
      { id: "3", name: "Child Item 1.2", parentId: "1", isSelectable: true },
      { id: "4", name: "Grandchild Item 1.1.1", parentId: "2", isSelectable: false },
      { id: "5", name: "Another Child", parentId: "1", isSelectable: true },
    ];

    await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat" 
            defaultExpanded="all"
            selectableField="isSelectable"
            data='{${JSON.stringify(customSelectableData)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.id}:selectable:{$item.selectable}" verticalAlignment="center">
                <Text value="{$item.name} - Selectable: {$item.selectable}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();

    // Verify mapped selectable states
    await expect(tree.getByTestId("1:selectable:true")).toBeVisible(); // Root selectable
    await expect(tree.getByTestId("2:selectable:false")).toBeVisible(); // Child not selectable
    await expect(tree.getByTestId("3:selectable:true")).toBeVisible(); // Child selectable
    await expect(tree.getByTestId("4:selectable:false")).toBeVisible(); // Grandchild not selectable
    await expect(tree.getByTestId("5:selectable:true")).toBeVisible(); // Another child selectable
  });

  test("handles selectableField with fallback to true when field is missing", async ({
    initTestBed,
    createTreeDriver,
  }) => {
    const partialSelectableData = [
      { id: "1", name: "Root Item 1", parentId: null, canSelect: true },
      { id: "2", name: "Child Item 1.1", parentId: "1" }, // Missing canSelect field
      { id: "3", name: "Child Item 1.2", parentId: "1", canSelect: false },
      { id: "4", name: "Grandchild Item 1.1.1", parentId: "2" }, // Missing canSelect field
    ];

    await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat" 
            defaultExpanded="all"
            selectableField="canSelect"
            data='{${JSON.stringify(partialSelectableData)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.id}:selectable:{$item.selectable}" verticalAlignment="center">
                <Text value="{$item.name} - Selectable: {$item.selectable}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();

    // Verify fallback behavior: missing field defaults to true
    await expect(tree.getByTestId("1:selectable:true")).toBeVisible(); // Explicitly true
    await expect(tree.getByTestId("2:selectable:true")).toBeVisible(); // Missing field, defaults to true
    await expect(tree.getByTestId("3:selectable:false")).toBeVisible(); // Explicitly false
    await expect(tree.getByTestId("4:selectable:true")).toBeVisible(); // Missing field, defaults to true
  });

  test("handles selectableField in hierarchy data format", async ({
    initTestBed,
    createTreeDriver,
  }) => {
    const hierarchySelectableData = [
      {
        id: "A1",
        title: "Project",
        allowSelection: true,
        children: [
          {
            id: "A2",
            title: "Source",
            allowSelection: false,
            children: [{ id: "A3", title: "App.tsx", allowSelection: true }],
          },
          { id: "A4", title: "Tests", allowSelection: true },
        ],
      },
    ];

    await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="hierarchy" 
            defaultExpanded="all"
            idField="id"
            nameField="title"
            selectableField="allowSelection"
            childrenField="children"
            data='{${JSON.stringify(hierarchySelectableData)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.id}:selectable:{$item.selectable}" verticalAlignment="center">
                <Text value="{$item.title} - Selectable: {$item.selectable}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();

    // Verify hierarchy with selectableField mapping
    await expect(tree.getByTestId("A1:selectable:true")).toBeVisible(); // Project selectable
    await expect(tree.getByTestId("A2:selectable:false")).toBeVisible(); // Source not selectable
    await expect(tree.getByTestId("A3:selectable:true")).toBeVisible(); // App.tsx selectable
    await expect(tree.getByTestId("A4:selectable:true")).toBeVisible(); // Tests selectable
  });

  test("validates selectableField affects actual selection behavior", async ({
    initTestBed,
    createTreeDriver,
  }) => {
    const selectableBehaviorData = [
      { id: "1", name: "Selectable Root", parentId: null, canClick: true },
      { id: "2", name: "Non-Selectable Child", parentId: "1", canClick: false },
      { id: "3", name: "Selectable Child", parentId: "1", canClick: true },
    ];

    await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat" 
            defaultExpanded="all"
            selectableField="canClick"
            data='{${JSON.stringify(selectableBehaviorData)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.id}" verticalAlignment="center">
                <Text value="{$item.name} ({$item.selectable ? 'Clickable' : 'Not Clickable'})" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();

    // Verify all nodes are visible
    await expect(tree.getByTestId("1")).toBeVisible();
    await expect(tree.getByTestId("2")).toBeVisible();
    await expect(tree.getByTestId("3")).toBeVisible();

    // Test selection behavior: selectable nodes should be clickable for selection
    // This verifies that the selectable property is correctly mapped and used internally
    const selectableNode = tree.getByTestId("1");
    const nonSelectableNode = tree.getByTestId("2");
    const anotherSelectableNode = tree.getByTestId("3");

    // Click on selectable nodes - should work
    await selectableNode.click();
    // Note: Detailed selection behavior testing would require checking internal state
    // which might be tested in other selection-focused test cases

    await anotherSelectableNode.click();
    // The actual selection assertion would depend on visible selection styling
    // or other indicators that would be tested in selection-specific tests
  });

  // Hierarchical Data Format Field Mapping Tests
  test("handles custom idField, nameField, and childrenField mapping for hierarchy data", async ({
    initTestBed,
    createTreeDriver,
  }) => {
    await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="hierarchy" 
            defaultExpanded="all"
            idField="nodeId"
            nameField="title"
            childrenField="items"
            data='{${JSON.stringify(customFieldsHierarchy1)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.nodeId}:{$item.depth}" verticalAlignment="center">
                <Icon name="folder" />
                <Text value="{$item.title}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();
    await expect(tree.getByTestId("A1:0")).toBeVisible();
    await expect(tree.getByTestId("A2:1")).toBeVisible();
    await expect(tree.getByTestId("A3:1")).toBeVisible();
    await expect(tree.getByTestId("A4:2")).toBeVisible();
  });

  test("handles alternative hierarchy field names (id, displayName, subNodes)", async ({
    initTestBed,
    createTreeDriver,
  }) => {
    await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="hierarchy" 
            defaultExpanded="all"
            idField="id"
            nameField="displayName"
            childrenField="subNodes"
            data='{${JSON.stringify(customFieldsHierarchy2)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.id}:{$item.depth}" verticalAlignment="center">
                <Icon name="folder" />
                <Text value="{$item.displayName}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();
    await expect(tree.getByTestId("100:0")).toBeVisible();
    await expect(tree.getByTestId("101:1")).toBeVisible();
    await expect(tree.getByTestId("102:1")).toBeVisible();
    await expect(tree.getByTestId("103:2")).toBeVisible();
  });

  test("handles database-style hierarchy field names (pk, label, nested_items)", async ({
    initTestBed,
    createTreeDriver,
  }) => {
    await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="hierarchy" 
            defaultExpanded="all"
            idField="pk"
            nameField="label"
            childrenField="nested_items"
            data='{${JSON.stringify(databaseStyleHierarchy)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.pk}:{$item.depth}" verticalAlignment="center">
                <Icon name="folder" />
                <Text value="{$item.label}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();
    await expect(tree.getByTestId("root-1:0")).toBeVisible();
    await expect(tree.getByTestId("child-1:1")).toBeVisible();
    await expect(tree.getByTestId("child-2:1")).toBeVisible();
    await expect(tree.getByTestId("grandchild-1:2")).toBeVisible();
  });

  test("handles API-style hierarchy field names (key, text, nodes)", async ({
    initTestBed,
    createTreeDriver,
  }) => {
    await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="hierarchy" 
            defaultExpanded="all"
            idField="key"
            nameField="text"
            childrenField="nodes"
            data='{${JSON.stringify(apiStyleHierarchy)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.key}:{$item.depth}" verticalAlignment="center">
                <Icon name="folder" />
                <Text value="{$item.text}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();
    await expect(tree.getByTestId("item1:0")).toBeVisible();
    await expect(tree.getByTestId("item2:1")).toBeVisible();
    await expect(tree.getByTestId("item3:1")).toBeVisible();
    await expect(tree.getByTestId("item4:2")).toBeVisible();
  });

  test("handles iconField mapping in hierarchy data with default field name", async ({
    initTestBed,
    createTreeDriver,
  }) => {
    await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="hierarchy" 
            defaultExpanded="all"
            data='{${JSON.stringify(hierarchyDataWithIcons)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.id}:icon:{$item.icon}" verticalAlignment="center">
                <Text testId="hierarchy-icon:{$item.icon}" value="[{$item.icon}]" />
                <Text value="{$item.name}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();
    await expect(tree.getByTestId("1:icon:folder")).toBeVisible();
    await expect(tree.getByTestId("2:icon:file-pdf")).toBeVisible();
    await expect(tree.getByTestId("3:icon:folder")).toBeVisible();
    await expect(tree.getByTestId("4:icon:file-image")).toBeVisible();
    // Verify individual icon markers
    await expect(tree.getByTestId("hierarchy-icon:folder")).toBeVisible();
    await expect(tree.getByTestId("hierarchy-icon:file-pdf")).toBeVisible();
    await expect(tree.getByTestId("hierarchy-icon:file-image")).toBeVisible();
  });

  test("handles custom iconField mapping in hierarchy data", async ({
    initTestBed,
    createTreeDriver,
  }) => {
    await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="hierarchy" 
            defaultExpanded="all"
            idField="nodeId"
            nameField="title"
            iconField="iconType"
            childrenField="items"
            data='{${JSON.stringify(customIconFieldHierarchy)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.nodeId}:icon:{$item.iconType}" verticalAlignment="center">
                <Text testId="hierarchy-icon-type:{$item.iconType}" value="[{$item.iconType}]" />
                <Text value="{$item.title}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();
    await expect(tree.getByTestId("A1:icon:project-folder")).toBeVisible();
    await expect(tree.getByTestId("A2:icon:code-folder")).toBeVisible();
    await expect(tree.getByTestId("A3:icon:typescript-file")).toBeVisible();
    await expect(tree.getByTestId("A4:icon:typescript-file")).toBeVisible();
    // Verify individual icon type markers
    await expect(tree.getByTestId("hierarchy-icon-type:project-folder")).toBeVisible();
    await expect(tree.getByTestId("hierarchy-icon-type:code-folder")).toBeVisible();
    await expect(tree.getByTestId("hierarchy-icon-type:typescript-file")).toBeVisible();
  });

  test("handles iconExpandedField and iconCollapsedField in hierarchy data", async ({
    initTestBed,
    createTreeDriver,
  }) => {
    await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="hierarchy" 
            iconField="icon"
            iconExpandedField="iconExpanded"
            iconCollapsedField="iconCollapsed"
            data='{${JSON.stringify(hierarchyWithStateIcons)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.id}:icon:{$item.icon}:expanded:{$item.iconExpanded}:collapsed:{$item.iconCollapsed}" verticalAlignment="center">
                <Text testId="hierarchy-state-icon:{$isExpanded ? $item.iconExpanded : $item.iconCollapsed}" value="[{$isExpanded ? $item.iconExpanded || $item.icon : $item.iconCollapsed || $item.icon}]" />
                <Text value="{$item.name}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();
    await expect(
      tree.getByTestId("1:icon:folder:expanded:folder-open:collapsed:folder-closed"),
    ).toBeVisible();
    await expect(
      tree.getByTestId("2:icon:folder:expanded:folder-open:collapsed:folder-closed"),
    ).not.toBeVisible(); // Should be collapsed initially
    await expect(
      tree.getByTestId("3:icon:file-text:expanded:undefined:collapsed:undefined"),
    ).not.toBeVisible(); // Should be nested and collapsed
    // Verify collapsed state icons are shown initially (since defaultExpanded is not set)
    await expect(tree.getByTestId("hierarchy-state-icon:folder-closed")).toBeVisible();
  });

  test("handles missing icon fields gracefully in hierarchy data", async ({
    initTestBed,
    createTreeDriver,
  }) => {
    await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="hierarchy" 
            defaultExpanded="all"
            iconField="nonExistentIcon"
            data='{${JSON.stringify(hierarchyTreeData)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.id}:icon:{$item.nonExistentIcon || 'no-icon'}" verticalAlignment="center">
                <Text testId="hierarchy-fallback-icon:{$item.nonExistentIcon || 'default'}" value="[{$item.nonExistentIcon || 'default'}]" />
                <Text value="{$item.name}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();
    await expect(tree.getByTestId("1:icon:no-icon")).toBeVisible();
    await expect(tree.getByTestId("2:icon:no-icon")).toBeVisible();
    await expect(tree.getByTestId("3:icon:no-icon")).toBeVisible();
    await expect(tree.getByTestId("4:icon:no-icon")).toBeVisible();
    // Verify fallback icons
    await expect(tree.getByTestId("hierarchy-fallback-icon:default")).toBeVisible();
  });

  // =============================================================================
  // $ITEM CONTEXT PROPERTIES TESTS
  // =============================================================================

  test("passes all core $item properties correctly to item template", async ({
    initTestBed,
    createTreeDriver,
  }) => {
    await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat" 
            defaultExpanded="all"
            data='{${JSON.stringify(flatTreeData)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.key}:props:name:{$item.name}|depth:{$item.depth}" verticalAlignment="center">
                <Text value="{$item.name} (ID: {$item.id}, Key: {$item.key}, Depth: {$item.depth})" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();
    // Verify core properties for different items
    await expect(tree.getByTestId("1:props:name:Root Item 1|depth:0")).toBeVisible();
    await expect(tree.getByTestId("2:props:name:Child Item 1.1|depth:1")).toBeVisible();
    await expect(tree.getByTestId("3:props:name:Child Item 1.2|depth:1")).toBeVisible();
    await expect(tree.getByTestId("4:props:name:Grandchild Item 1.1.1|depth:2")).toBeVisible();
  });

  test("passes original source data properties via $item spread", async ({
    initTestBed,
    createTreeDriver,
  }) => {
    const dataWithExtraProps = [
      {
        id: 1,
        name: "Root",
        category: "folder",
        size: "large",
        customField: "value1",
        parentId: null,
      },
      { id: 2, name: "Child", category: "file", size: "small", customField: "value2", parentId: 1 },
    ];

    await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat" 
            defaultExpanded="all"
            data='{${JSON.stringify(dataWithExtraProps)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.id}:extra:{$item.category}:{$item.size}:{$item.customField}" verticalAlignment="center">
                <Text value="{$item.name} - {$item.category} ({$item.size}) [{$item.customField}]" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();
    await expect(tree.getByTestId("1:extra:folder:large:value1")).toBeVisible();
    await expect(tree.getByTestId("2:extra:file:small:value2")).toBeVisible();
  });

  test("passes icon properties correctly via $item", async ({ initTestBed, createTreeDriver }) => {
    await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat" 
            defaultExpanded="all"
            data='{${JSON.stringify(flatDataWithIcons)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.key}:icon:{$item.icon}" verticalAlignment="center">
                <Text value="{$item.name} [{$item.icon}]" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();
    await expect(tree.getByTestId("1:icon:folder")).toBeVisible();
    await expect(tree.getByTestId("2:icon:file-pdf")).toBeVisible();
    await expect(tree.getByTestId("3:icon:folder")).toBeVisible();
    await expect(tree.getByTestId("4:icon:file-image")).toBeVisible();
  });

  test("passes TreeNode internal properties via $item spread", async ({
    initTestBed,
    createTreeDriver,
  }) => {
    await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat" 
            defaultExpanded="all"
            data='{${JSON.stringify(flatTreeData)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.key}:internal:selectable:{$item.selectable}" verticalAlignment="center">
                <Text value="{$item.name} (Selectable: {$item.selectable})" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();
    await expect(tree.getByTestId("1:internal:selectable:true")).toBeVisible();
    await expect(tree.getByTestId("2:internal:selectable:true")).toBeVisible();
    await expect(tree.getByTestId("3:internal:selectable:true")).toBeVisible();
    await expect(tree.getByTestId("4:internal:selectable:true")).toBeVisible();
  });

  test("passes custom field mapped properties correctly in hierarchy format", async ({
    initTestBed,
    createTreeDriver,
  }) => {
    await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="hierarchy" 
            defaultExpanded="all"
            idField="nodeId"
            nameField="title"
            iconField="iconType"
            childrenField="items"
            data='{${JSON.stringify(customIconFieldHierarchy)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.nodeId}:mapped:name:{$item.name}|title:{$item.title}|iconType:{$item.iconType}" verticalAlignment="center">
                <Text value="Mapped: {$item.name} | Original: {$item.title} | Icon: {$item.iconType}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();
    await expect(
      tree.getByTestId("A1:mapped:name:Project|title:Project|iconType:project-folder"),
    ).toBeVisible();
    await expect(
      tree.getByTestId("A2:mapped:name:Source|title:Source|iconType:code-folder"),
    ).toBeVisible();
    await expect(
      tree.getByTestId("A3:mapped:name:App.tsx|title:App.tsx|iconType:typescript-file"),
    ).toBeVisible();
  });

  test("validates $item properties maintain referential integrity across re-renders", async ({
    initTestBed,
    createTreeDriver,
  }) => {
    await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat" 
            defaultExpanded="all"
            data='{${JSON.stringify(flatTreeData)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.key}:integrity:name:{$item.name}" verticalAlignment="center">
                <Text value="{$item.name}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();
    // Verify that basic properties are accessible and consistent
    await expect(tree.getByTestId("1:integrity:name:Root Item 1")).toBeVisible();
    await expect(tree.getByTestId("2:integrity:name:Child Item 1.1")).toBeVisible();
    await expect(tree.getByTestId("3:integrity:name:Child Item 1.2")).toBeVisible();
    await expect(tree.getByTestId("4:integrity:name:Grandchild Item 1.1.1")).toBeVisible();
  });

  // =============================================================================
  // SELECTION MANAGEMENT TESTS
  // =============================================================================

  test.describe("Selection Management", () => {
    test("handles selectedValue property with visual feedback", async ({
      initTestBed,
      createTreeDriver,
    }) => {
      const SELECTED_BG_COLOR = "rgb(255, 100, 100)";
      const SELECTED_TEXT_COLOR = "rgb(255, 255, 255)";
      await initTestBed(
        `
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat"
            defaultExpanded="all"
            selectedValue="{2}"
            data='{${JSON.stringify(flatTreeData)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.id}" verticalAlignment="center">
                <Text value="{$item.name}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
        `,
        {
          testThemeVars: {
            "backgroundColor-Tree-row--selected": SELECTED_BG_COLOR,
            "textColor-Tree--selected": SELECTED_TEXT_COLOR,
          },
        },
      );

      const tree = await createTreeDriver("tree");

      // Get row wrappers directly using getNodeWrapperByMarker
      const selectedRowWrapper = tree.getNodeWrapperByTestId("2");
      const item1RowWrapper = tree.getNodeWrapperByTestId("1");
      const item3RowWrapper = tree.getNodeWrapperByTestId("3");
      const item4RowWrapper = tree.getNodeWrapperByTestId("4");

      await expect(selectedRowWrapper).toBeVisible();

      // Test selected item has correct styling
      await expect(selectedRowWrapper).toHaveCSS("background-color", SELECTED_BG_COLOR);
      await expect(selectedRowWrapper).toHaveCSS("color", SELECTED_TEXT_COLOR);
      await expect(selectedRowWrapper).toHaveClass(/selected/);

      // Test non-selected items don't have selected styling
      await expect(item1RowWrapper).not.toHaveCSS("background-color", SELECTED_BG_COLOR);
      await expect(item3RowWrapper).not.toHaveCSS("background-color", SELECTED_BG_COLOR);
      await expect(item4RowWrapper).not.toHaveCSS("background-color", SELECTED_BG_COLOR);
      await expect(item1RowWrapper).not.toHaveClass(/selected/);
      await expect(item3RowWrapper).not.toHaveClass(/selected/);
      await expect(item4RowWrapper).not.toHaveClass(/selected/);
    });

    test("handles selection with different selectedValue types", async ({
      initTestBed,
      createTreeDriver,
    }) => {
      const SELECTED_BG_COLOR = "rgb(200, 100, 255)";
      const SELECTED_TEXT_COLOR = "rgb(255, 255, 255)";

      await initTestBed(
        `
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat"
            defaultExpanded="all"
            selectedValue="{3}"
            data='{${JSON.stringify(flatTreeData)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.id}" verticalAlignment="center">
                <Text value="{$item.name}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
        `,
        {
          testThemeVars: {
            "backgroundColor-Tree-row--selected": SELECTED_BG_COLOR,
            "textColor-Tree--selected": SELECTED_TEXT_COLOR,
          },
        },
      );

      const tree = await createTreeDriver("tree");

      // Get row wrappers directly using getNodeWrapperByMarker
      const item1RowWrapper = tree.getNodeWrapperByTestId("1");
      const item2RowWrapper = tree.getNodeWrapperByTestId("2");
      const item3RowWrapper = tree.getNodeWrapperByTestId("3");
      const item4RowWrapper = tree.getNodeWrapperByTestId("4");

      await expect(item1RowWrapper).toBeVisible();

      // Item 3 should be selected (with proper string comparison handling)
      await expect(item3RowWrapper).toHaveCSS("background-color", SELECTED_BG_COLOR);
      await expect(item3RowWrapper).toHaveCSS("color", SELECTED_TEXT_COLOR);
      await expect(item3RowWrapper).toHaveClass(/selected/);

      // Other items should not be selected
      await expect(item1RowWrapper).not.toHaveCSS("background-color", SELECTED_BG_COLOR);
      await expect(item2RowWrapper).not.toHaveCSS("background-color", SELECTED_BG_COLOR);
      await expect(item4RowWrapper).not.toHaveCSS("background-color", SELECTED_BG_COLOR);

      // Verify class names are correctly applied
      await expect(item1RowWrapper).not.toHaveClass(/selected/);
      await expect(item2RowWrapper).not.toHaveClass(/selected/);
      await expect(item4RowWrapper).not.toHaveClass(/selected/);
    });

    test("handles selection with type mismatch tolerance", async ({
      initTestBed,
      createTreeDriver,
    }) => {
      const SELECTED_BG_COLOR = "rgb(100, 200, 50)";
      const SELECTED_TEXT_COLOR = "rgb(255, 255, 255)";
      await initTestBed(
        `
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat"
            defaultExpanded="all"
            selectedValue="{2}"
            data='{${JSON.stringify(flatTreeData)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.id}" verticalAlignment="center">
                <Text value="{$item.name}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
        `,
        {
          testThemeVars: {
            "backgroundColor-Tree-row--selected": SELECTED_BG_COLOR,
            "textColor-Tree--selected": SELECTED_TEXT_COLOR,
          },
        },
      );

      const tree = await createTreeDriver("tree");

      // Get row wrapper directly using getNodeWrapperByMarker
      const selectedRowWrapper = tree.getNodeWrapperByTestId("2");

      await expect(selectedRowWrapper).toBeVisible();

      // Verify selection styling is applied correctly despite type mismatch (selectedValue: number vs itemKey: number)
      await expect(selectedRowWrapper).toHaveCSS("background-color", SELECTED_BG_COLOR);
      await expect(selectedRowWrapper).toHaveCSS("color", SELECTED_TEXT_COLOR);
      await expect(selectedRowWrapper).toHaveClass(/selected/);
    });

    test("selection state overrides hover state styling", async ({
      initTestBed,
      createTreeDriver,
    }) => {
      const SELECTED_BG_COLOR = "rgb(200, 0, 0)";
      const SELECTED_TEXT_COLOR = "rgb(255, 255, 255)";
      const HOVER_BG_COLOR = "rgb(0, 0, 200)";
      const HOVER_TEXT_COLOR = "rgb(255, 255, 0)";
      await initTestBed(
        `
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat"
            defaultExpanded="all"
            selectedValue="{2}"
            data='{${JSON.stringify(flatTreeData)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.id}" verticalAlignment="center">
                <Text value="{$item.name}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
        `,
        {
          testThemeVars: {
            "backgroundColor-Tree-row--selected": SELECTED_BG_COLOR,
            "textColor-Tree--selected": SELECTED_TEXT_COLOR,
            "backgroundColor-Tree-row--hover": HOVER_BG_COLOR,
            "textColor-Tree--hover": HOVER_TEXT_COLOR,
          },
        },
      );

      const tree = await createTreeDriver("tree");

      // Get row wrappers directly using getNodeWrapperByMarker
      const selectedRowWrapper = tree.getNodeWrapperByTestId("2");
      const item1RowWrapper = tree.getNodeWrapperByTestId("1");
      const item3RowWrapper = tree.getNodeWrapperByTestId("3");

      await expect(selectedRowWrapper).toBeVisible();

      // Hover over the selected item - selection should override hover
      await selectedRowWrapper.hover();
      await expect(selectedRowWrapper).toHaveCSS("background-color", SELECTED_BG_COLOR);
      await expect(selectedRowWrapper).toHaveCSS("color", SELECTED_TEXT_COLOR);

      // Hover over non-selected items - should show hover state
      await item1RowWrapper.hover();
      await expect(item1RowWrapper).toHaveCSS("background-color", HOVER_BG_COLOR);
      await expect(item1RowWrapper).toHaveCSS("color", HOVER_TEXT_COLOR);

      await item3RowWrapper.hover();
      await expect(item3RowWrapper).toHaveCSS("background-color", HOVER_BG_COLOR);
      await expect(item3RowWrapper).toHaveCSS("color", HOVER_TEXT_COLOR);

      // Verify selected item maintains selection styling even after hovering other items
      await expect(selectedRowWrapper).toHaveCSS("background-color", SELECTED_BG_COLOR);
      await expect(selectedRowWrapper).toHaveCSS("color", SELECTED_TEXT_COLOR);
    });

    test("supports interactive selection changes", async ({ initTestBed, createTreeDriver }) => {
      const SELECTED_BG_COLOR = "rgb(200, 100, 255)";
      const SELECTED_TEXT_COLOR = "rgb(255, 255, 255)";
      const FOCUS_OUTLINE_COLOR = "rgb(255, 100, 100)";

      await initTestBed(
        `
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat"
            defaultExpanded="all"
            selectedValue="{2}"
            data='{${JSON.stringify(flatTreeData)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.id}" verticalAlignment="center">
                <Text value="{$item.name}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
        `,
        {
          testThemeVars: {
            "backgroundColor-Tree-row--selected": SELECTED_BG_COLOR,
            "textColor-Tree--selected": SELECTED_TEXT_COLOR,
            "outlineColor-Tree--focus": FOCUS_OUTLINE_COLOR,
          },
        },
      );

      const tree = await createTreeDriver("tree");
      await tree.component.focus();

      // Get row wrappers directly using getNodeWrapperByMarker
      const item1RowWrapper = tree.getNodeWrapperByTestId("1");
      const item2RowWrapper = tree.getNodeWrapperByTestId("2");

      await expect(item1RowWrapper).toBeVisible();

      // Item 2 should be initially selected
      await expect(item2RowWrapper).toHaveCSS("background-color", SELECTED_BG_COLOR);
      await expect(item2RowWrapper).toHaveCSS("color", SELECTED_TEXT_COLOR);
      await expect(item2RowWrapper).toHaveClass(/selected/);

      // Click on item 1 to change selection
      await tree.getByTestId("1").click();

      // Item 1 should now be selected
      await expect(item1RowWrapper).toHaveCSS("background-color", SELECTED_BG_COLOR);
      await expect(item1RowWrapper).toHaveCSS("color", SELECTED_TEXT_COLOR);
      await expect(item1RowWrapper).toHaveClass(/selected/);

      // Item 2 should no longer be selected
      await expect(item2RowWrapper).not.toHaveCSS("background-color", SELECTED_BG_COLOR);
      await expect(item2RowWrapper).not.toHaveClass(/selected/);

      // Verify the tree container maintains focus
      await expect(tree.component).toBeFocused();
    });

    test("handles null/undefined selection gracefully", async ({
      initTestBed,
      createTreeDriver,
    }) => {
      const SELECTED_BG_COLOR = "rgb(255, 0, 0)";
      await initTestBed(
        `
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat"
            defaultExpanded="all"
            selectedValue="{null}"
            data='{${JSON.stringify(flatTreeData)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.id}" verticalAlignment="center">
                <Text value="{$item.name}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
        `,
        {
          testThemeVars: {
            "backgroundColor-Tree-row--selected": SELECTED_BG_COLOR,
          },
        },
      );

      const tree = await createTreeDriver("tree");

      // Get row wrappers to test no selection highlighting
      const rowWrapper1 = tree.getNodeWrapperByTestId("1");
      const rowWrapper2 = tree.getNodeWrapperByTestId("2");
      const rowWrapper3 = tree.getNodeWrapperByTestId("3");
      const rowWrapper4 = tree.getNodeWrapperByTestId("4");

      await expect(rowWrapper1).toBeVisible();

      // Verify no items are selected when selectedValue is null
      await expect(rowWrapper1).not.toHaveCSS("background-color", SELECTED_BG_COLOR);
      await expect(rowWrapper2).not.toHaveCSS("background-color", SELECTED_BG_COLOR);
      await expect(rowWrapper3).not.toHaveCSS("background-color", SELECTED_BG_COLOR);
      await expect(rowWrapper4).not.toHaveCSS("background-color", SELECTED_BG_COLOR);

      // Verify no items have selected class
      await expect(rowWrapper1).not.toHaveClass(/selected/);
      await expect(rowWrapper2).not.toHaveClass(/selected/);
      await expect(rowWrapper3).not.toHaveClass(/selected/);
      await expect(rowWrapper4).not.toHaveClass(/selected/);

      // Verify tree is still functional - can select items by clicking
      await tree.getByTestId("2").click();
      await expect(rowWrapper2).toHaveCSS("background-color", SELECTED_BG_COLOR);
      await expect(rowWrapper2).toHaveClass(/selected/);
    });

    test("handles invalid selection values gracefully", async ({
      initTestBed,
      createTreeDriver,
    }) => {
      const SELECTED_BG_COLOR = "rgb(0, 255, 0)";
      await initTestBed(
        `
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat"
            defaultExpanded="all"
            selectedValue="999"
            data='{${JSON.stringify(flatTreeData)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.id}" verticalAlignment="center">
                <Text value="{$item.name}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
        `,
        {
          testThemeVars: {
            "backgroundColor-Tree-row--selected": SELECTED_BG_COLOR,
          },
        },
      );

      const tree = await createTreeDriver("tree");

      // Get row wrappers to test no selection highlighting
      const rowWrapper1 = tree.getNodeWrapperByTestId("1");
      const rowWrapper2 = tree.getNodeWrapperByTestId("2");
      const rowWrapper3 = tree.getNodeWrapperByTestId("3");
      const rowWrapper4 = tree.getNodeWrapperByTestId("4");

      await expect(rowWrapper1).toBeVisible();

      // Verify component doesn't crash with invalid selectedValue and no items are selected
      await expect(rowWrapper1).not.toHaveCSS("background-color", SELECTED_BG_COLOR);
      await expect(rowWrapper2).not.toHaveCSS("background-color", SELECTED_BG_COLOR);
      await expect(rowWrapper3).not.toHaveCSS("background-color", SELECTED_BG_COLOR);
      await expect(rowWrapper4).not.toHaveCSS("background-color", SELECTED_BG_COLOR);

      // Verify no items have selected class
      await expect(rowWrapper1).not.toHaveClass(/selected/);
      await expect(rowWrapper2).not.toHaveClass(/selected/);
      await expect(rowWrapper3).not.toHaveClass(/selected/);
      await expect(rowWrapper4).not.toHaveClass(/selected/);

      // Verify tree is still functional - can select valid items by clicking
      await tree.getByTestId("3").click();
      await expect(rowWrapper3).toHaveCSS("background-color", SELECTED_BG_COLOR);
      await expect(rowWrapper3).toHaveClass(/selected/);
    });

    // =============================================================================
    // FOCUS MANAGEMENT SUB-TESTS
    // =============================================================================

    test("supports keyboard focus navigation with visual feedback", async ({
      initTestBed,
      createTreeDriver,
      page,
    }) => {
      const FOCUS_OUTLINE_COLOR = "rgb(255, 0, 255)";
      const FOCUS_OUTLINE_WIDTH = "3px";
      await initTestBed(
        `
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat"
            defaultExpanded="all"
            data='{${JSON.stringify(flatTreeData)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.id}" verticalAlignment="center">
                <Text value="{$item.name}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
        `,
        {
          testThemeVars: {
            "outlineColor-Tree--focus": FOCUS_OUTLINE_COLOR,
            "outlineWidth-Tree--focus": FOCUS_OUTLINE_WIDTH,
          },
        },
      );

      const tree = await createTreeDriver("tree");

      await expect(tree.getByTestId("1")).toBeVisible();

      // Focus the tree to trigger focus styling
      await tree.component.focus();

      // Use keyboard navigation to trigger focus on an item
      await page.keyboard.press("ArrowDown");

      // The second item should be focused now
      const focusedItem = tree.getNodeWrapperByTestId("2");
      await expect(focusedItem).toBeVisible();

      // Check that focus outline uses custom theme variables
      // Focus styling uses inset box-shadow with the outline color
      await expect(focusedItem).toHaveCSS(
        "box-shadow",
        `${FOCUS_OUTLINE_COLOR} 0px 0px 0px 2px inset`,
      );

      // Also verify the focused item has the correct CSS class
      await expect(focusedItem).toHaveClass(/focused/);

      // Verify box-shadow contains the custom focus outline color
      const boxShadowValue = await focusedItem.evaluate((el) => getComputedStyle(el).boxShadow);
      expect(boxShadowValue).toContain(FOCUS_OUTLINE_COLOR);

      // Test that focus can move to different items
      await page.keyboard.press("ArrowDown");
      const nextFocusedItem = tree.getNodeWrapperByTestId("4"); // Should be the grandchild
      await expect(nextFocusedItem).toHaveClass(/focused/);
      await expect(nextFocusedItem).toHaveCSS(
        "box-shadow",
        `${FOCUS_OUTLINE_COLOR} 0px 0px 0px 2px inset`,
      );

      // Previous item should no longer be focused
      await expect(focusedItem).not.toHaveClass(/focused/);

      // Navigate back up
      await page.keyboard.press("ArrowUp");
      await expect(focusedItem).toHaveClass(/focused/);
      await expect(nextFocusedItem).not.toHaveClass(/focused/);
    });

    test("focus styling supports comprehensive theme variables", async ({
      initTestBed,
      createTreeDriver,
      page,
    }) => {
      const FOCUS_OUTLINE_COLOR = "rgb(0, 255, 0)";
      const FOCUS_OUTLINE_WIDTH = "4px";
      const FOCUS_OUTLINE_STYLE = "solid";
      const FOCUS_OUTLINE_OFFSET = "2px";

      await initTestBed(
        `
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat"
            defaultExpanded="all"
            data='{${JSON.stringify(flatTreeData)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.id}" verticalAlignment="center">
                <Text value="{$item.name}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
        `,
        {
          testThemeVars: {
            "outlineColor-Tree--focus": FOCUS_OUTLINE_COLOR,
            "outlineWidth-Tree--focus": FOCUS_OUTLINE_WIDTH,
            "outlineStyle-Tree--focus": FOCUS_OUTLINE_STYLE,
            "outlineOffset-Tree--focus": FOCUS_OUTLINE_OFFSET,
          },
        },
      );

      const tree = await createTreeDriver("tree");

      await expect(tree.getNodeWrapperByTestId("1")).toBeVisible();

      // Focus the tree and navigate to an item
      await tree.component.focus();
      await page.keyboard.press("ArrowDown", {delay: 100});

      // Test focused item has all custom theme variables applied
      const focusedItem = tree.getNodeWrapperByTestId("2");
      await expect(focusedItem).toHaveClass(/focused/);

      // Verify the focus outline uses all custom theme variables
      // Note: In the current implementation, focus uses inset box-shadow rather than outline
      // but the theme variables should still be available for potential outline styling
      const boxShadowValue = await focusedItem.evaluate((el) => getComputedStyle(el).boxShadow);
      expect(boxShadowValue).toContain("0, 255, 0"); // Check for green color components
    });

    test("combined selection and focus states work together", async ({
      initTestBed,
      createTreeDriver,
      page,
    }) => {
      const SELECTED_BG_COLOR = "rgb(255, 50, 50)";
      const SELECTED_TEXT_COLOR = "rgb(255, 255, 255)";
      const HOVER_BG_COLOR = "rgb(50, 255, 50)";
      const HOVER_TEXT_COLOR = "rgb(0, 0, 0)";
      const DEFAULT_TEXT_COLOR = "rgb(100, 100, 100)";
      const FOCUS_OUTLINE_COLOR = "rgb(50, 50, 255)";

      await initTestBed(
        `
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat"
            defaultExpanded="all"
            selectedValue="{3}"
            data='{${JSON.stringify(flatTreeData)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.id}" verticalAlignment="center">
                <Text value="{$item.name}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
        `,
        {
          testThemeVars: {
            "backgroundColor-Tree-row--selected": SELECTED_BG_COLOR,
            "textColor-Tree--selected": SELECTED_TEXT_COLOR,
            "backgroundColor-Tree-row--hover": HOVER_BG_COLOR,
            "textColor-Tree--hover": HOVER_TEXT_COLOR,
            "textColor-Tree": DEFAULT_TEXT_COLOR,
            "outlineColor-Tree--focus": FOCUS_OUTLINE_COLOR,
          },
        },
      );

      const tree = await createTreeDriver("tree");

      // Test all theme variables work correctly in isolation and combination
      const selectedRowWrapper = tree.getNodeWrapperByTestId("3");
      const normalRowWrapper = tree.getNodeWrapperByTestId("1");
      const hoverRowWrapper = tree.getNodeWrapperByTestId("2");

      await expect(selectedRowWrapper).toBeVisible();

      // Test selected item styling
      await expect(selectedRowWrapper).toHaveCSS("background-color", SELECTED_BG_COLOR);
      await expect(selectedRowWrapper).toHaveCSS("color", SELECTED_TEXT_COLOR);
      await expect(selectedRowWrapper).toHaveClass(/selected/);

      // Test default text color on normal items
      await expect(normalRowWrapper).toHaveCSS("color", DEFAULT_TEXT_COLOR);
      await expect(normalRowWrapper).not.toHaveClass(/selected/);

      // Test hover styling on non-selected item
      await hoverRowWrapper.hover();
      await expect(hoverRowWrapper).toHaveCSS("background-color", HOVER_BG_COLOR);
      await expect(hoverRowWrapper).toHaveCSS("color", HOVER_TEXT_COLOR);

      // Test hover on selected item (selection should override)
      await selectedRowWrapper.hover();
      await expect(selectedRowWrapper).toHaveCSS("background-color", SELECTED_BG_COLOR);
      await expect(selectedRowWrapper).toHaveCSS("color", SELECTED_TEXT_COLOR);

      // Test focus styling - ensure we can detect focus
      await tree.component.focus();
      // Give some time for focus to be applied
      await page.waitForTimeout(100);

      // Check if any item has focus, or skip focus-specific checks for this comprehensive test
      // The focus behavior is already tested in the dedicated focus tests
      const anyFocusedElement = page.locator('[data-test-id="tree"] .focused');
      const hasFocusedElement = (await anyFocusedElement.count()) > 0;

      if (hasFocusedElement) {
        // If we have focused elements, verify the color
        const focusedElement = anyFocusedElement.first();
        const finalBoxShadowValue = await focusedElement.evaluate(
          (el) => getComputedStyle(el).boxShadow,
        );
        expect(finalBoxShadowValue).toContain("50, 50, 255");
      }
      // If no focused element, skip focus-specific validation since focus behavior varies

      // Verify all theme variables are working simultaneously
      // Selected item maintains selection while tree has focus
      await expect(selectedRowWrapper).toHaveCSS("background-color", SELECTED_BG_COLOR);
      await expect(selectedRowWrapper).toHaveCSS("color", SELECTED_TEXT_COLOR);
    });

    test("applies selection and focus with multiple theme configurations", async ({
      initTestBed,
      createTreeDriver,
      page,
    }) => {
      const SELECTED_BG_COLOR = "rgb(50, 100, 200)";
      const SELECTED_TEXT_COLOR = "rgb(255, 255, 255)";
      const FOCUS_OUTLINE_COLOR = "rgb(255, 165, 0)";
      const DEFAULT_TEXT_COLOR = "rgb(64, 64, 64)";

      await initTestBed(
        `
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat"
            defaultExpanded="all"
            selectedValue="{2}"
            data='{${JSON.stringify(flatTreeData)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.id}" verticalAlignment="center">
                <Text value="{$item.name}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
        `,
        {
          testThemeVars: {
            "backgroundColor-Tree-row--selected": SELECTED_BG_COLOR,
            "textColor-Tree--selected": SELECTED_TEXT_COLOR,
            "outlineColor-Tree--focus": FOCUS_OUTLINE_COLOR,
            "textColor-Tree": DEFAULT_TEXT_COLOR,
          },
        },
      );

      const tree = await createTreeDriver("tree");

      // Get row wrappers directly using getNodeWrapperByMarker
      const selectedRowWrapper = tree.getNodeWrapperByTestId("2");
      const nonSelectedRowWrapper = tree.getNodeWrapperByTestId("1");

      await expect(selectedRowWrapper).toBeVisible();

      // Test selection theme variables
      await expect(selectedRowWrapper).toHaveCSS("background-color", SELECTED_BG_COLOR);
      await expect(selectedRowWrapper).toHaveCSS("color", SELECTED_TEXT_COLOR);

      // Test default text color on non-selected items
      await expect(nonSelectedRowWrapper).toHaveCSS("color", DEFAULT_TEXT_COLOR);

      // Focus the tree and navigate to trigger focus styling
      await tree.component.focus();
      await page.keyboard.press("ArrowDown");

      // Check if any item received focus (focus behavior can be timing-dependent in tests)
      const focusedItem = page.locator('[data-test-id="tree"] .focused');
      const focusedItemCount = await focusedItem.count();

      if (focusedItemCount > 0) {
        // If we have focused elements, verify the focus styling uses custom theme variables
        await expect(focusedItem.first()).toBeVisible();
        await expect(focusedItem.first()).toHaveCSS(
          "box-shadow",
          `${FOCUS_OUTLINE_COLOR} 0px 0px 0px 2px inset`,
        );
      }
      // If no focused element found, skip focus-specific validation as focus behavior is tested elsewhere
    });
  });

  // =============================================================================
  // EXPANSION STATE TESTS
  // =============================================================================

  test.describe("Expansion States", () => {
    test("handles defaultExpanded none", async ({ initTestBed, createTreeDriver }) => {
      await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat" 
            defaultExpanded="none"
            data='{${JSON.stringify(flatTreeData)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.id}:{$item.name}:depth:{$item.depth}" verticalAlignment="center">
                <Text value="{$item.name} (depth: {$item.depth})" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
      const tree = await createTreeDriver("tree");
      await expect(tree.component).toBeVisible();

      // Only root level (depth 0) should be visible with defaultExpanded="none"
      await expect(tree.getByTestId("1:Root Item 1:depth:0")).toBeVisible();

      // Child nodes (depth 1+) should NOT be visible initially
      await expect(tree.getByTestId("2:Child Item 1.1:depth:1")).not.toBeVisible();
      await expect(tree.getByTestId("3:Child Item 1.2:depth:1")).not.toBeVisible();
      await expect(tree.getByTestId("4:Grandchild Item 1.1.1:depth:2")).not.toBeVisible();
    });

    test("handles defaultExpanded all", async ({ initTestBed, createTreeDriver }) => {
      await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat" 
            defaultExpanded="all"
            data='{${JSON.stringify(flatTreeData)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.id}:{$item.name}:depth:{$item.depth}" verticalAlignment="center">
                <Text value="{$item.name} (depth: {$item.depth})" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
      const tree = await createTreeDriver("tree");
      await expect(tree.component).toBeVisible();

      // All nodes at all depths should be visible with defaultExpanded="all"
      await expect(tree.getByTestId("1:Root Item 1:depth:0")).toBeVisible();
      await expect(tree.getByTestId("2:Child Item 1.1:depth:1")).toBeVisible();
      await expect(tree.getByTestId("3:Child Item 1.2:depth:1")).toBeVisible();
      await expect(tree.getByTestId("4:Grandchild Item 1.1.1:depth:2")).toBeVisible();
    });

    test("handles defaultExpanded first-level", async ({ initTestBed, createTreeDriver }) => {
      await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat" 
            defaultExpanded="first-level"
            data='{${JSON.stringify(flatTreeData)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.id}:{$item.name}:depth:{$item.depth}" verticalAlignment="center">
                <Text value="{$item.name} (depth: {$item.depth})" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
      const tree = await createTreeDriver("tree");
      await expect(tree.component).toBeVisible();

      // Root level (depth 0) and first level (depth 1) should be visible
      await expect(tree.getByTestId("1:Root Item 1:depth:0")).toBeVisible();
      await expect(tree.getByTestId("2:Child Item 1.1:depth:1")).toBeVisible();
      await expect(tree.getByTestId("3:Child Item 1.2:depth:1")).toBeVisible();

      // Second level and deeper (depth 2+) should NOT be visible
      await expect(tree.getByTestId("4:Grandchild Item 1.1.1:depth:2")).not.toBeVisible();
    });

    test("handles defaultExpanded with array of string IDs - expands specific nodes making all children visible", async ({
      initTestBed,
      createTreeDriver,
    }) => {
      await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat" 
            idField="pk"
            nameField="label"
            parentIdField="parent_id"
            defaultExpanded='{["root-1", "child-1"]}'
            data='{${JSON.stringify(databaseStyleData)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.pk}:{$item.label}:depth:{$item.depth}:expanded" verticalAlignment="center">
                <Text value="{$item.label} (ID: {$item.pk}, Depth: {$item.depth})" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
      const tree = await createTreeDriver("tree");
      await expect(tree.component).toBeVisible();

      // When defaultExpanded=["root-1", "child-1"], these specific nodes should be expanded:

      // 1. Root node "root-1" is expanded → its direct children become visible
      await expect(tree.getByTestId("root-1:Root Item 1:depth:0:expanded")).toBeVisible();
      await expect(tree.getByTestId("child-1:Child Item 1.1:depth:1:expanded")).toBeVisible();
      await expect(tree.getByTestId("child-2:Child Item 1.2:depth:1:expanded")).toBeVisible();

      // 2. Child node "child-1" is also expanded → its children become visible
      await expect(
        tree.getByTestId("grandchild-1:Grandchild Item 1.1.1:depth:2:expanded"),
      ).toBeVisible();

      // Verify expansion behavior: each ID in the array expands that specific node,
      // making its direct children visible. If a child is also in the expansion array,
      // it will also be expanded, showing its children recursively.
    });

    test("handles defaultExpanded array with nodes from different parent branches", async ({
      initTestBed,
      createTreeDriver,
    }) => {
      await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat" 
            defaultExpanded='{["doc-root", "proj-web", "media-images"]}'
            data='{${JSON.stringify(multiBranchTreeData)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.id}:{$item.name}:depth:{$item.depth}" verticalAlignment="center">
                <Text value="{$item.name} (ID: {$item.id}, Depth: {$item.depth})" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
      const tree = await createTreeDriver("tree");
      await expect(tree.component).toBeVisible();

      // Branch A: "doc-root" is expanded → its direct children are visible
      await expect(tree.getByTestId("doc-root:Documents:depth:0")).toBeVisible();
      await expect(tree.getByTestId("doc-reports:Reports:depth:1")).toBeVisible();
      await expect(tree.getByTestId("doc-invoices:Invoices:depth:1")).toBeVisible();
      // But grandchildren of doc-root should NOT be visible (doc-reports not expanded)
      await expect(tree.getByTestId("doc-q1-report:Q1 Report.pdf:depth:2")).not.toBeVisible();
      await expect(tree.getByTestId("doc-inv-001:Invoice-001.pdf:depth:2")).not.toBeVisible();

      // Branch B: "proj-root" is auto-expanded because "proj-web" is in defaultExpanded
      await expect(tree.getByTestId("proj-root:Projects:depth:0")).toBeVisible();
      await expect(tree.getByTestId("proj-web:Web Apps:depth:1")).toBeVisible(); // Now visible due to auto-expansion
      await expect(tree.getByTestId("proj-mobile:Mobile Apps:depth:1")).toBeVisible(); // Also visible due to parent expansion
      // proj-web is expanded → its children are visible
      await expect(tree.getByTestId("proj-ecommerce:E-commerce Site:depth:2")).toBeVisible();
      await expect(tree.getByTestId("proj-dashboard:Admin Dashboard:depth:2")).toBeVisible();
      // proj-mobile is NOT expanded → its children remain hidden
      await expect(tree.getByTestId("proj-ios-app:iOS Shopping App:depth:2")).not.toBeVisible();

      // Branch C: "media-root" is auto-expanded because "media-images" is in defaultExpanded
      await expect(tree.getByTestId("media-root:Media:depth:0")).toBeVisible();
      await expect(tree.getByTestId("media-images:Images:depth:1")).toBeVisible(); // Now visible due to auto-expansion
      await expect(tree.getByTestId("media-videos:Videos:depth:1")).toBeVisible(); // Also visible due to parent expansion
      // media-images is expanded → its children are visible
      await expect(tree.getByTestId("media-profile-pic:profile.jpg:depth:2")).toBeVisible();
      await expect(tree.getByTestId("media-banner:banner.png:depth:2")).toBeVisible();

      // This test validates that defaultExpanded array automatically expands parent paths:
      // 1. Each ID in defaultExpanded array is expanded AND its full parent path is auto-expanded
      // 2. Auto-expansion ensures target nodes are visible by expanding their parents
      // 3. Multiple independent branches can have different expansion states
      // 4. Only specifically targeted nodes (plus necessary parents) are expanded
    });

    test("handles defaultExpanded array expanding multiple independent root branches", async ({
      initTestBed,
      createTreeDriver,
    }) => {
      await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat" 
            defaultExpanded='{["doc-root", "proj-root", "doc-reports", "proj-web"]}'
            data='{${JSON.stringify(multiBranchTreeData)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.id}:{$item.name}:depth:{$item.depth}" verticalAlignment="center">
                <Text value="{$item.name} (ID: {$item.id}, Depth: {$item.depth})" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
      const tree = await createTreeDriver("tree");
      await expect(tree.component).toBeVisible();

      // Branch A: "doc-root" expanded → children visible, "doc-reports" also expanded → grandchildren visible
      await expect(tree.getByTestId("doc-root:Documents:depth:0")).toBeVisible();
      await expect(tree.getByTestId("doc-reports:Reports:depth:1")).toBeVisible();
      await expect(tree.getByTestId("doc-invoices:Invoices:depth:1")).toBeVisible();
      // doc-reports is expanded → its children are visible
      await expect(tree.getByTestId("doc-q1-report:Q1 Report.pdf:depth:2")).toBeVisible();
      await expect(tree.getByTestId("doc-q2-report:Q2 Report.pdf:depth:2")).toBeVisible();
      // doc-invoices is NOT expanded → its children are hidden
      await expect(tree.getByTestId("doc-inv-001:Invoice-001.pdf:depth:2")).not.toBeVisible();

      // Branch B: "proj-root" expanded → children visible, "proj-web" also expanded → grandchildren visible
      await expect(tree.getByTestId("proj-root:Projects:depth:0")).toBeVisible();
      await expect(tree.getByTestId("proj-web:Web Apps:depth:1")).toBeVisible();
      await expect(tree.getByTestId("proj-mobile:Mobile Apps:depth:1")).toBeVisible();
      // proj-web is expanded → its children are visible
      await expect(tree.getByTestId("proj-ecommerce:E-commerce Site:depth:2")).toBeVisible();
      await expect(tree.getByTestId("proj-dashboard:Admin Dashboard:depth:2")).toBeVisible();
      // proj-mobile is NOT expanded → its children are hidden
      await expect(tree.getByTestId("proj-ios-app:iOS Shopping App:depth:2")).not.toBeVisible();

      // Branch C: "media-root" is NOT in defaultExpanded → children remain hidden
      await expect(tree.getByTestId("media-root:Media:depth:0")).toBeVisible();
      await expect(tree.getByTestId("media-images:Images:depth:1")).not.toBeVisible();
      await expect(tree.getByTestId("media-videos:Videos:depth:1")).not.toBeVisible();

      // This test validates complete multi-branch expansion:
      // 1. Multiple root branches can be independently expanded
      // 2. Sub-nodes within expanded branches can also be selectively expanded
      // 3. Each expansion is isolated - expanding one branch doesn't affect others
      // 4. Deep nesting works correctly with selective expansion at each level
    });

    test("auto-expands parent paths for defaultExpanded array to ensure target nodes are visible", async ({
      initTestBed,
      createTreeDriver,
    }) => {
      await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat" 
            defaultExpanded='{["proj-web", "media-images"]}'
            data='{${JSON.stringify(multiBranchTreeData)}}'>
            <property name="itemTemplate">
              <HStack testId="{$item.id}:{$item.name}:depth:{$item.depth}" verticalAlignment="center">
                <Text value="{$item.name} (ID: {$item.id}, Depth: {$item.depth})" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);
      const tree = await createTreeDriver("tree");
      await expect(tree.component).toBeVisible();

      // The key behavior: even though we only specified "proj-web" and "media-images" in defaultExpanded,
      // their parent paths should be automatically expanded to make them visible

      // Branch A: "doc-root" is NOT in defaultExpanded → should remain collapsed
      await expect(tree.getByTestId("doc-root:Documents:depth:0")).toBeVisible();
      await expect(tree.getByTestId("doc-reports:Reports:depth:1")).not.toBeVisible();
      await expect(tree.getByTestId("doc-invoices:Invoices:depth:1")).not.toBeVisible();

      // Branch B: "proj-web" is in defaultExpanded → parent "proj-root" should auto-expand to make it visible
      await expect(tree.getByTestId("proj-root:Projects:depth:0")).toBeVisible();
      await expect(tree.getByTestId("proj-web:Web Apps:depth:1")).toBeVisible(); // Target node should be visible
      await expect(tree.getByTestId("proj-mobile:Mobile Apps:depth:1")).toBeVisible(); // Sibling visible due to parent expansion
      // proj-web is expanded → its children should be visible
      await expect(tree.getByTestId("proj-ecommerce:E-commerce Site:depth:2")).toBeVisible();
      await expect(tree.getByTestId("proj-dashboard:Admin Dashboard:depth:2")).toBeVisible();
      // proj-mobile is NOT expanded → its children remain hidden
      await expect(tree.getByTestId("proj-ios-app:iOS Shopping App:depth:2")).not.toBeVisible();

      // Branch C: "media-images" is in defaultExpanded → parent "media-root" should auto-expand
      await expect(tree.getByTestId("media-root:Media:depth:0")).toBeVisible();
      await expect(tree.getByTestId("media-images:Images:depth:1")).toBeVisible(); // Target node should be visible
      await expect(tree.getByTestId("media-videos:Videos:depth:1")).toBeVisible(); // Sibling visible due to parent expansion
      // media-images is expanded → its children should be visible
      await expect(tree.getByTestId("media-profile-pic:profile.jpg:depth:2")).toBeVisible();
      await expect(tree.getByTestId("media-banner:banner.png:depth:2")).toBeVisible();

      // This test validates the auto-expansion behavior:
      // 1. When a node ID is in defaultExpanded, all its parent nodes are automatically expanded
      // 2. This ensures the target node is visible and can display its expanded state
      // 3. Parent expansion makes sibling nodes visible but doesn't expand them
      // 4. Only the specifically targeted nodes (plus their parents) are expanded
    });

    test.skip(
      "handles expandedValues property",
      SKIP_REASON.TO_BE_IMPLEMENTED(),
      async ({ initTestBed, page }) => {
        // TODO: Test controlled expansion state with expandedValues prop
        // TODO: Verify expansion state synchronization with external control
        await initTestBed(`
        <Tree 
          testId="tree" 
          data="{flatTreeData}" 
          dataFormat="flat"
          expandedValues="{[1]}"
        />
      `);
      },
    );

    test.skip(
      "supports expansion toggle by chevron click",
      SKIP_REASON.TO_BE_IMPLEMENTED(),
      async ({ initTestBed, page }) => {
        // TODO: Test clicking expand/collapse chevron toggles node expansion
        // TODO: Verify child nodes become visible/hidden appropriately
        await initTestBed(`
        <Tree 
          testId="tree" 
          data="{flatTreeData}" 
          dataFormat="flat"
        />
      `);
      },
    );

    test.skip(
      "supports expansion toggle by item click when enabled",
      SKIP_REASON.TO_BE_IMPLEMENTED(),
      async ({ initTestBed, page }) => {
        // TODO: Test itemClickExpands prop enables expansion on full item click
        // TODO: Verify clicking anywhere on item (not just chevron) toggles expansion
        await initTestBed(`
        <Tree 
          testId="tree" 
          data="{flatTreeData}" 
          dataFormat="flat"
          itemClickExpands="true"
        />
      `);
      },
    );

    test.skip(
      "handles autoExpandToSelection",
      SKIP_REASON.TO_BE_IMPLEMENTED(),
      async ({ initTestBed, page }) => {
        // TODO: Test automatic expansion of path to selected item
        // TODO: Verify all parent nodes of selected item are expanded
        await initTestBed(`
        <Tree 
          testId="tree" 
          data="{flatTreeData}" 
          dataFormat="flat"
          selectedValue="4"
          autoExpandToSelection="true"
        />
      `);
      },
    );
  });
});

// =============================================================================
// EVENTS TESTS
// =============================================================================

test.describe("Events", () => {
  test.describe("selectionDidChange Event", () => {
    test("fires when user clicks on a selectable node", async ({
      initTestBed,
      createTreeDriver,
    }) => {
      const { testStateDriver } = await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat" 
            data='{${JSON.stringify(flatTreeData)}}'
            onSelectionDidChange="event => testState = event">
            <property name="itemTemplate">
              <HStack testId="{$item.id}">
                <Text value="{$item.name}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);

      const tree = await createTreeDriver("tree");

      // Click on the first item
      await tree.getByTestId("1").click();

      // Verify selectionDidChange event was fired with correct data
      await expect.poll(() => testStateDriver.testState()).toBeDefined();
      const event = await testStateDriver.testState();
      expect(event.newNode).toBeDefined();
      expect(event.newNode.id).toBe(1);
      expect(event.newNode.displayName).toBe("Root Item 1");
      expect(event.previousNode).toBeNull();
    });

    test("fires with previous node when selection changes", async ({
      initTestBed,
      createTreeDriver,
    }) => {
      const { testStateDriver } = await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="flat" 
            defaultExpanded="all"
            data='{${JSON.stringify(flatTreeData)}}'
            onSelectionDidChange="event => testState = event">
            <property name="itemTemplate">
              <HStack testId="{$item.id}">
                <Text value="{$item.name}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);

      const tree = await createTreeDriver("tree");

      // First selection
      await tree.getByTestId("1").click();

      // Second selection
      await tree.getByTestId("2").click();

      // Verify event has both previous and new node
      await expect.poll(() => testStateDriver.testState()?.then((s) => s?.newNode?.id)).toBe(2);
      const event = await testStateDriver.testState();
      expect(event.previousNode.id).toBe(1);
    });
  });

  test.describe("nodeDidExpand Event", () => {
    test("fires after successful node expansion", async ({ initTestBed, createTreeDriver }) => {
      const { testStateDriver } = await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="hierarchy"
            itemClickExpands="true"
            data='{${JSON.stringify(hierarchyTreeData)}}'
            onNodeDidExpand="node => testState = node">
            <property name="itemTemplate">
              <HStack testId="{$item.id}">
                <Text value="{$item.name}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);

      const tree = await createTreeDriver("tree");

      // Click to expand first node
      await tree.getByTestId("1").click();

      // Verify nodeDidExpand event fired
      await expect.poll(() => testStateDriver.testState().then((s) => s?.id)).toBe(1);

      // Verify child is now visible
      await expect(tree.getByTestId("2")).toBeVisible();
    });
  });

  test.describe("nodeDidCollapse Event", () => {
    test("fires after successful node collapse", async ({ initTestBed, createTreeDriver }) => {
      const { testStateDriver } = await initTestBed(`
        <VStack height="400px">
          <Tree testId="tree" 
            dataFormat="hierarchy" 
            itemClickExpands="true"
            defaultExpanded="all"
            data='{${JSON.stringify(hierarchyTreeData)}}'
            onNodeDidCollapse="node => testState = node">
            <property name="itemTemplate">
              <HStack testId="{$item.id}">
                <Text value="{$item.name}" />
              </HStack>
            </property>
          </Tree>
        </VStack>
      `);

      const tree = await createTreeDriver("tree");

      // First, verify child is visible (node starts expanded)
      await expect(tree.getByTestId("2")).toBeVisible();

      // Click to collapse expanded node
      await tree.getByTestId("1").click();

      // Verify nodeDidCollapse fired with correct node
      await expect.poll(() => testStateDriver.testState().then((s) => s?.id)).toBe(1);

      // Verify child is no longer visible
      await expect(tree.getByTestId("2")).not.toBeVisible();
    });

    // Note: Additional collapse tests can be added when TreeDriver supports programmatic collapse operations
  });

  // =============================================================================
  // KEYBOARD EVENT TESTS
  // =============================================================================

  test.describe("Keyboard Events", () => {
    test.describe("selectionDidChange Event via Keyboard", () => {
      test("fires when Enter key is pressed on a selectable node", async ({
        initTestBed,
        createTreeDriver,
      }) => {
        const { testStateDriver } = await initTestBed(`
          <VStack height="400px">
            <Tree testId="tree" 
              dataFormat="flat" 
              data='{${JSON.stringify(flatTreeData)}}'
              onSelectionDidChange="event => testState = event">
              <property name="itemTemplate">
                <HStack testId="{$item.id}">
                  <Text value="{$item.name}" />
                </HStack>
              </property>
            </Tree>
          </VStack>
        `);

        const tree = await createTreeDriver("tree");

        // Focus the tree and navigate to first item
        await tree.component.focus();

        // Press Enter to select the focused node
        await tree.component.press("Enter");

        // Verify selectionDidChange event was fired with correct data
        await expect.poll(() => testStateDriver.testState()).toBeDefined();
        const event = await testStateDriver.testState();
        expect(event.newNode).toBeDefined();
        expect(event.newNode.id).toBe(1);
        expect(event.newNode.displayName).toBe("Root Item 1");
        expect(event.previousNode).toBeNull();
      });

      test("fires when Space key is pressed on a selectable node", async ({
        initTestBed,
        createTreeDriver,
      }) => {
        const { testStateDriver } = await initTestBed(`
          <VStack height="400px">
            <Tree testId="tree" 
              dataFormat="flat" 
              data='{${JSON.stringify(flatTreeData)}}'
              onSelectionDidChange="event => testState = event">
              <property name="itemTemplate">
                <HStack testId="{$item.id}">
                  <Text value="{$item.name}" />
                </HStack>
              </property>
            </Tree>
          </VStack>
        `);

        const tree = await createTreeDriver("tree");

        // Focus the tree (this starts focus on first item)
        await tree.component.focus();

        // Press Space to select the currently focused node (should be first node)
        await tree.component.press("Space");

        // Verify selectionDidChange event was fired with correct data
        await expect.poll(() => testStateDriver.testState()).toBeDefined();
        const event = await testStateDriver.testState();
        expect(event.newNode).toBeDefined();
        expect(event.newNode.id).toBe(1); // Should be first node since we didn't navigate
        expect(event.newNode.displayName).toBe("Root Item 1");
        expect(event.previousNode).toBeNull();
      });

      test("fires with previous node when selection changes via keyboard", async ({
        initTestBed,
        createTreeDriver,
      }) => {
        const { testStateDriver } = await initTestBed(`
          <VStack height="400px">
            <Tree testId="tree" 
              dataFormat="flat" 
              defaultExpanded="all"
              data='{${JSON.stringify(flatTreeData)}}'
              onSelectionDidChange="event => testState = event">
              <property name="itemTemplate">
                <HStack testId="{$item.id}">
                  <Text value="{$item.name}" />
                </HStack>
              </property>
            </Tree>
          </VStack>
        `);

        const tree = await createTreeDriver("tree");

        // Click to select first node (using mouse to establish baseline)
        await tree.getByTestId("1").click();

        // Now use keyboard to navigate and select second node
        await tree.component.focus();
        await tree.component.press("ArrowDown"); // Navigate to second node
        await tree.component.press("Enter"); // Select it

        // Verify event has both previous and new node
        await expect.poll(() => testStateDriver.testState()?.then((s) => s?.newNode?.id)).toBe(2);
        const event = await testStateDriver.testState();
        expect(event.previousNode.id).toBe(1);
        expect(event.newNode.id).toBe(2);
      });
    });

    test.describe("nodeDidExpand Event via Keyboard", () => {
      test("fires when Right arrow key expands a collapsed node", async ({
        initTestBed,
        createTreeDriver,
      }) => {
        const { testStateDriver } = await initTestBed(`
          <VStack height="400px">
            <Tree testId="tree" 
              dataFormat="hierarchy"
              data='{${JSON.stringify(hierarchyTreeData)}}'
              onNodeDidExpand="node => testState = node">
              <property name="itemTemplate">
                <HStack testId="{$item.id}">
                  <Text value="{$item.name}" />
                </HStack>
              </property>
            </Tree>
          </VStack>
        `);

        const tree = await createTreeDriver("tree");

        // Focus the tree (first node should be focused)
        await tree.component.focus();

        // Press Right arrow to expand the first node
        await tree.component.press("ArrowRight");

        // Verify nodeDidExpand event fired
        await expect.poll(() => testStateDriver.testState().then((s) => s?.id)).toBe(1);

        // Verify child is now visible
        await expect(tree.getByTestId("2")).toBeVisible();
      });

      test("fires when Enter key expands a collapsed node with children", async ({
        initTestBed,
        createTreeDriver,
      }) => {
        const { testStateDriver } = await initTestBed(`
          <VStack height="400px">
            <Tree testId="tree" 
              dataFormat="hierarchy"
              data='{${JSON.stringify(hierarchyTreeData)}}'
              onNodeDidExpand="node => testState = node">
              <property name="itemTemplate">
                <HStack testId="{$item.id}">
                  <Text value="{$item.name}" />
                </HStack>
              </property>
            </Tree>
          </VStack>
        `);

        const tree = await createTreeDriver("tree");

        // Focus the tree and press Enter to expand first node
        await tree.component.focus();
        await tree.component.press("Enter");

        // Verify nodeDidExpand event fired
        await expect.poll(() => testStateDriver.testState().then((s) => s?.id)).toBe(1);

        // Verify child is now visible
        await expect(tree.getByTestId("2")).toBeVisible();
      });

      test("only Enter key expands nodes - Space only selects", async ({
        initTestBed,
        createTreeDriver,
      }) => {
        const { testStateDriver } = await initTestBed(`
          <VStack height="400px" var.selectionFired="false">
            <Tree testId="tree" 
              dataFormat="hierarchy"
              data='{${JSON.stringify(hierarchyTreeData)}}'
              onNodeDidExpand="node => testState = node"
              onSelectionDidChange="event => selectionFired = true">
              <property name="itemTemplate">
                <HStack testId="{$item.id}">
                  <Text value="{$item.name}" />
                </HStack>
              </property>
            </Tree>
          </VStack>
        `);

        const tree = await createTreeDriver("tree");

        // Focus the tree and press Space - should only trigger selection, not expansion
        await tree.component.focus();
        await tree.component.press("Space");

        // Wait a bit to ensure no expansion event fires
        await tree.component.waitFor({ timeout: 1000 });

        // Verify no expansion event fired (testState should remain null)
        const expandState = await testStateDriver.testState();
        expect(expandState).toBeNull();

        // Verify children are still not visible
        await expect(tree.getByTestId("2")).not.toBeVisible();
      });
    });

    test.describe("nodeDidCollapse Event via Keyboard", () => {
      test("fires when Left arrow key collapses an expanded node", async ({
        initTestBed,
        createTreeDriver,
      }) => {
        const { testStateDriver } = await initTestBed(`
          <VStack height="400px">
            <Tree testId="tree" 
              dataFormat="hierarchy" 
              defaultExpanded="all"
              data='{${JSON.stringify(hierarchyTreeData)}}'
              onNodeDidCollapse="node => testState = node">
              <property name="itemTemplate">
                <HStack testId="{$item.id}">
                  <Text value="{$item.name}" />
                </HStack>
              </property>
            </Tree>
          </VStack>
        `);

        const tree = await createTreeDriver("tree");

        // Verify child is initially visible (node starts expanded)
        await expect(tree.getByTestId("2")).toBeVisible();

        // Focus the tree and press Left arrow to collapse the first node
        await tree.component.focus();
        await tree.component.press("ArrowLeft");

        // Verify nodeDidCollapse fired with correct node
        await expect.poll(() => testStateDriver.testState().then((s) => s?.id)).toBe(1);

        // Verify child is no longer visible
        await expect(tree.getByTestId("2")).not.toBeVisible();
      });

      test("fires when Left arrow navigates from child to parent and collapses parent", async ({
        initTestBed,
        createTreeDriver,
      }) => {
        const { testStateDriver } = await initTestBed(`
          <VStack height="400px">
            <Tree testId="tree" 
              dataFormat="hierarchy" 
              defaultExpanded="all"
              data='{${JSON.stringify(hierarchyTreeData)}}'
              onNodeDidCollapse="node => testState = node">
              <property name="itemTemplate">
                <HStack testId="{$item.id}">
                  <Text value="{$item.name}" />
                </HStack>
              </property>
            </Tree>
          </VStack>
        `);

        const tree = await createTreeDriver("tree");

        // Verify child is initially visible (node starts expanded)
        await expect(tree.getByTestId("2")).toBeVisible();
        await tree.component.focus();
        await tree.component.press("ArrowDown"); // Move to child node
        await tree.component.press("ArrowLeft"); // Navigate to parent

        // Then collapse the parent by pressing Left again
        await tree.component.press("ArrowLeft");

        // Verify nodeDidCollapse fired with correct node
        await expect.poll(() => testStateDriver.testState().then((s) => s?.id)).toBe(1);

        // Verify child is no longer visible
        await expect(tree.getByTestId("2")).not.toBeVisible();
      });
    });

    test.describe("Complex Keyboard Event Scenarios", () => {
      test("fires multiple events during keyboard navigation session", async ({
        initTestBed,
        createTreeDriver,
      }) => {
        const { testStateDriver } = await initTestBed(`
          <VStack height="400px" var.eventCount="0" var.lastEvent="">
            <Tree testId="tree" 
              dataFormat="hierarchy"
              data='{${JSON.stringify(hierarchyTreeData)}}'
              onSelectionDidChange="event => { eventCount++; lastEvent = 'selection:' + event.newNode?.id; testState = { count: eventCount, last: lastEvent }; }"
              onNodeDidExpand="node => { eventCount++; lastEvent = 'expand:' + node.id; testState = { count: eventCount, last: lastEvent }; }"
              onNodeDidCollapse="node => { eventCount++; lastEvent = 'collapse:' + node.id; testState = { count: eventCount, last: lastEvent }; }">
              <property name="itemTemplate">
                <HStack testId="{$item.id}">
                  <Text value="{$item.name}" />
                </HStack>
              </property>
            </Tree>
          </VStack>
        `);

        const tree = await createTreeDriver("tree");

        // Simple keyboard interaction sequence
        await tree.component.focus();

        // 1. Select and expand first node (Enter does both)
        await tree.component.press("Enter");

        // 2. Navigate to child and select it
        await tree.component.press("ArrowDown");
        await tree.component.press("Space"); // Select child (Space only selects)

        // Verify we have multiple events (using poll for async events)
        await expect.poll(() => testStateDriver.testState().then((s) => s?.count)).toBe(2);
        const result = await testStateDriver.testState();

        // Check that we captured events (last event should be selection)
        expect(result.last).toMatch(/selection:\d+/);
      });

      test("handles rapid keyboard interactions without missing events", async ({
        initTestBed,
        createTreeDriver,
      }) => {
        const { testStateDriver } = await initTestBed(`
          <VStack height="400px" var.expandCount="0">
            <Tree testId="tree" 
              dataFormat="hierarchy"
              data='{${JSON.stringify(hierarchyTreeData)}}'
              onNodeDidExpand="node => { expandCount++; testState = expandCount; }">
              <property name="itemTemplate">
                <HStack testId="{$item.id}">
                  <Text value="{$item.name}" />
                </HStack>
              </property>
            </Tree>
          </VStack>
        `);

        const tree = await createTreeDriver("tree");
        await tree.component.focus();

        // Rapid expand/collapse sequence
        await tree.component.press("ArrowRight"); // Expand
        await tree.component.press("ArrowLeft"); // Collapse
        await tree.component.press("ArrowRight"); // Expand again
        await tree.component.press("ArrowLeft"); // Collapse again
        await tree.component.press("ArrowRight"); // Expand third time

        // Verify all expansion events were captured
        await expect.poll(() => testStateDriver.testState()).toBe(3);
      });
    });
  });

  // =============================================================================
  // API EVENT TESTS
  // =============================================================================

  test.describe("API Events", () => {
    test.describe("nodeDidExpand Event via API", () => {
      test("fires when expandNode() API method is called", async ({
        initTestBed,
        createTreeDriver,
        createButtonDriver,
      }) => {
        const { testStateDriver } = await initTestBed(`
          <Fragment>
            <VStack height="400px">
              <Tree id="treeApi" testId="tree"
                dataFormat="hierarchy"
                defaultExpanded="none"
                data='{${JSON.stringify(hierarchyTreeData)}}'
                onNodeDidExpand="node => testState = node">
                <property name="itemTemplate">
                  <HStack testId="{$item.id}">
                    <Text value="{$item.name}" />
                  </HStack>
                </property>
              </Tree>
            </VStack>
            <Button testId="expand-btn" label="Expand Node 1" onClick="
              treeApi.expandNode(1);
            " />
          </Fragment>
        `);

        const tree = await createTreeDriver("tree");
        const expandButton = await createButtonDriver("expand-btn");

        // Initially, child should not be visible
        await expect(tree.getByTestId("2")).not.toBeVisible();

        // Trigger API expansion
        await expandButton.click();

        // Verify nodeDidExpand event fired
        await expect.poll(() => testStateDriver.testState().then((s) => s?.id)).toBe(1);

        // Verify child is now visible
        await expect(tree.getByTestId("2")).toBeVisible();
      });

      test("fires for expandAll() API method", async ({
        page,
        initTestBed,
        createTreeDriver,
        createButtonDriver,
      }) => {
        await initTestBed(`
          <Fragment>
            <VStack height="400px" var.expandEvents="[]">
              <Text testId="eventsText">{expandEvents}</Text>
              <Tree id="treeApi" testId="tree"
                dataFormat="hierarchy"
                defaultExpanded="none"
                data='{${JSON.stringify(hierarchyTreeData)}}'
                onNodeDidExpand="node => {expandEvents.push(node.id)}"
              >
                <property name="itemTemplate">
                  <HStack testId="{$item.id}">
                    <Text value="{$item.name}" />
                  </HStack>
                </property>
              </Tree>
            </VStack>
            <Button testId="expand-all-btn" label="Expand All" onClick="
              treeApi.expandAll();
            " />
          </Fragment>
        `);

        const tree = await createTreeDriver("tree");
        const expandAllButton = await createButtonDriver("expand-all-btn");

        // Trigger API expand all
        await expandAllButton.click();

        const eventsText = page.getByTestId("eventsText");

        // expandAll() does not fire individual nodeDidExpand events
        // This is the correct behavior - mass operations should not fire individual events
        await expect(eventsText).toHaveText("[]");

        // But verify the visual result is correct - all nodes should be visible
        await expect(tree.getByTestId("2")).toBeVisible();
        await expect(tree.getByTestId("4")).toBeVisible();
      });

      test("fires for expandToLevel() API method", async ({
        page,
        initTestBed,
        createTreeDriver,
        createButtonDriver,
      }) => {
        await initTestBed(`
          <Fragment>
            <VStack height="400px" var.expandEvents="[]">
              <Text testId="eventsText">{expandEvents}</Text>
              <Tree id="treeApi" testId="tree"
                dataFormat="hierarchy"
                defaultExpanded="none"
                data='{${JSON.stringify(hierarchyTreeData)}}'
                onNodeDidExpand="node => {expandEvents.push(node.id)}"
              >
                <property name="itemTemplate">
                  <HStack testId="{$item.id}">
                    <Text value="{$item.name}" />
                  </HStack>
                </property>
              </Tree>
            </VStack>
            <Button testId="expand-level-btn" label="Expand to Level 1" onClick="
              treeApi.expandToLevel(1);
            " />
          </Fragment>
        `);

        const tree = await createTreeDriver("tree");
        const expandLevelButton = await createButtonDriver("expand-level-btn");

        // Trigger API expand to level
        await expandLevelButton.click();

        const eventsText = page.getByTestId("eventsText");

        // expandToLevel() does not fire individual nodeDidExpand events
        // This is the correct behavior - mass operations should not fire individual events
        await expect(eventsText).toHaveText("[]");

        // But verify the visual result is correct - level 1 nodes should be visible
        await expect(tree.getByTestId("2")).toBeVisible();
      });
    });

    test.describe("nodeDidCollapse Event via API", () => {
      test("fires when collapseNode() API method is called", async ({
        initTestBed,
        createTreeDriver,
        createButtonDriver,
      }) => {
        const { testStateDriver } = await initTestBed(`
          <Fragment>
            <VStack height="400px">
              <Tree id="treeApi" testId="tree"
                dataFormat="hierarchy"
                defaultExpanded="all"
                data='{${JSON.stringify(hierarchyTreeData)}}'
                onNodeDidCollapse="node => testState = node">
                <property name="itemTemplate">
                  <HStack testId="{$item.id}">
                    <Text value="{$item.name}" />
                  </HStack>
                </property>
              </Tree>
            </VStack>
            <Button testId="collapse-btn" label="Collapse Node 1" onClick="
              treeApi.collapseNode(1);
            " />
          </Fragment>
        `);

        const tree = await createTreeDriver("tree");
        const collapseButton = await createButtonDriver("collapse-btn");

        // Initially, child should be visible (starts expanded)
        await expect(tree.getByTestId("2")).toBeVisible();

        // Trigger API collapse
        await collapseButton.click();

        // Verify nodeDidCollapse event fired
        await expect.poll(() => testStateDriver.testState().then((s) => s?.id)).toBe(1);

        // Verify child is no longer visible
        await expect(tree.getByTestId("2")).not.toBeVisible();
      });

      test("fires for collapseAll() API method", async ({
        page,
        initTestBed,
        createTreeDriver,
        createButtonDriver,
      }) => {
        await initTestBed(`
          <Fragment>
            <VStack height="400px" var.collapseEvents="[]">
              <Text testId="eventsText">{collapseEvents}</Text>
              <Tree id="treeApi" testId="tree"
                dataFormat="hierarchy"
                defaultExpanded="all"
                data='{${JSON.stringify(hierarchyTreeData)}}'
                onNodeDidCollapse="node => {collapseEvents.push(node.id)}"
              >
                <property name="itemTemplate">
                  <HStack testId="{$item.id}">
                    <Text value="{$item.name}" />
                  </HStack>
                </property>
              </Tree>
            </VStack>
            <Button testId="collapse-all-btn" label="Collapse All" onClick="
              treeApi.collapseAll();
            " />
          </Fragment>
        `);

        const tree = await createTreeDriver("tree");
        const collapseAllButton = await createButtonDriver("collapse-all-btn");

        // Initially, children should be visible (starts expanded)
        await expect(tree.getByTestId("2")).toBeVisible();

        // Trigger API collapse all
        await collapseAllButton.click();

        const eventsText = page.getByTestId("eventsText");

        // collapseAll() does not fire individual nodeDidCollapse events
        // This is the correct behavior - mass operations should not fire individual events
        await expect(eventsText).toHaveText("[]");

        // But verify the visual result is correct - children should no longer be visible
        await expect(tree.getByTestId("2")).not.toBeVisible();
      });
    });

    test.describe("selectionDidChange Event via API", () => {
      test("fires when selectNode() API method is called", async ({
        initTestBed,
        createTreeDriver,
        createButtonDriver,
      }) => {
        const { testStateDriver } = await initTestBed(`
          <Fragment>
            <VStack height="400px">
              <Tree id="treeApi" testId="tree"
                dataFormat="flat"
                data='{${JSON.stringify(flatTreeData)}}'
                onSelectionDidChange="event => testState = event">
                <property name="itemTemplate">
                  <HStack testId="{$item.id}">
                    <Text value="{$item.name}" />
                  </HStack>
                </property>
              </Tree>
            </VStack>
            <Button testId="select-btn" label="Select Node 2" onClick="
              treeApi.selectNode(2);
            " />
          </Fragment>
        `);

        const tree = await createTreeDriver("tree");
        const selectButton = await createButtonDriver("select-btn");

        // Trigger API selection
        await selectButton.click();

        // Verify selectionDidChange event fired
        await expect.poll(() => testStateDriver.testState()).toBeDefined();
        const event = await testStateDriver.testState();
        expect(event.newNode).toBeDefined();
        expect(event.newNode.id).toBe(2);
        expect(event.newNode.displayName).toBe("Child Item 1.1");
        expect(event.previousNode).toBeNull();
      });

      test("fires with previous node when changing selection via API", async ({
        page,
        initTestBed,
        createTreeDriver,
        createButtonDriver,
      }) => {
        await initTestBed(`
          <Fragment>
            <VStack height="400px" var.selectionEvents="{[]}">
              <Text testId="eventsText">{JSON.stringify(selectionEvents)}</Text>
              <Tree id="treeApi" testId="tree"
                dataFormat="flat"
                defaultExpanded="all"
                data='{${JSON.stringify(flatTreeData)}}'
                onSelectionDidChange="event => {selectionEvents.push({prev: event.previousNode?.id || null, new: event.newNode?.id || null});}"
              >
                <property name="itemTemplate">
                  <HStack testId="{$item.id}">
                    <Text value="{$item.name}" />
                  </HStack>
                </property>
              </Tree>
            </VStack>
            <Button testId="select-first-btn" label="Select First" onClick="treeApi.selectNode(1);" />
            <Button testId="select-second-btn" label="Select Second" onClick="treeApi.selectNode(2);" />
          </Fragment>
        `);

        const tree = await createTreeDriver("tree");
        const selectFirstButton = await createButtonDriver("select-first-btn");
        const selectSecondButton = await createButtonDriver("select-second-btn");

        // First selection
        await selectFirstButton.click();

        // Second selection
        await selectSecondButton.click();

        const eventsText = page.getByTestId("eventsText");

        // Verify we have both selection events with correct previous/new node IDs
        await expect(eventsText).toHaveText('[{"prev":null,"new":1},{"prev":1,"new":2}]');
      });

      test("fires when clearSelection() API method is called", async ({
        initTestBed,
        createTreeDriver,
        createButtonDriver,
      }) => {
        const { testStateDriver } = await initTestBed(`
          <Fragment>
            <VStack height="400px">
              <Tree id="treeApi" testId="tree"
                dataFormat="flat"
                selectedValue="1"
                data='{${JSON.stringify(flatTreeData)}}'
                onSelectionDidChange="event => testState = event">
                <property name="itemTemplate">
                  <HStack testId="{$item.id}">
                    <Text value="{$item.name}" />
                  </HStack>
                </property>
              </Tree>
            </VStack>
            <Button testId="clear-btn" label="Clear Selection" onClick="
              treeApi.clearSelection();
            " />
          </Fragment>
        `);

        const tree = await createTreeDriver("tree");
        const clearButton = await createButtonDriver("clear-btn");

        // Trigger API clear selection
        await clearButton.click();

        // Verify selectionDidChange event fired with null newNode
        await expect.poll(() => testStateDriver.testState()).toBeDefined();
        const event = await testStateDriver.testState();
        expect(event.newNode).toBeNull();
        expect(event.previousNode).toBeDefined();
        expect(event.previousNode.id).toBe(1);
      });
    });
  });
});

// =============================================================================
// ACCESSIBILITY TESTS
// =============================================================================

test.describe("Accessibility", () => {
  test("has proper ARIA attributes", async ({ initTestBed, createTreeDriver }) => {
    await initTestBed(`
      <VStack height="400px">
        <Tree testId="tree" 
          dataFormat="flat" 
          defaultExpanded="all"
          data='{${JSON.stringify(flatTreeData)}}'>
          <property name="itemTemplate">
            <HStack testId="{$item.id}:aria" verticalAlignment="center">
              <Text value="{$item.name}" />
            </HStack>
          </property>
        </Tree>
      </VStack>
    `);

    const tree = await createTreeDriver("tree");

    // Test main tree container ARIA attributes
    await expect(tree.component).toHaveAttribute("role", "tree");
    await expect(tree.component).toHaveAttribute("aria-label", "Tree navigation");
    await expect(tree.component).toHaveAttribute("aria-multiselectable", "false");

    // Test tree items have proper ARIA attributes
    // Find treeitems by their role attribute
    const treeItems = tree.component.locator('[role="treeitem"]');

    // Test first tree item (should be expanded due to defaultExpanded="all")
    const firstTreeItem = treeItems.first();
    await expect(firstTreeItem).toHaveAttribute("role", "treeitem");
    await expect(firstTreeItem).toHaveAttribute("aria-level", "1");
    await expect(firstTreeItem).toHaveAttribute("aria-expanded", "true");
    await expect(firstTreeItem).toHaveAttribute("aria-selected", "false");
    await expect(firstTreeItem).toHaveAttribute("aria-label", "Root Item 1");

    // Test that we have the expected number of tree items (4 total in flatTreeData)
    await expect(treeItems).toHaveCount(4);

    // Test second tree item (Child Item 1.1)
    const secondTreeItem = treeItems.nth(1);
    await expect(secondTreeItem).toHaveAttribute("aria-level", "2");
    await expect(secondTreeItem).toHaveAttribute("aria-label", "Child Item 1.1");

    // Test third tree item (Grandchild Item 1.1.1)
    const thirdTreeItem = treeItems.nth(2);
    await expect(thirdTreeItem).toHaveAttribute("aria-level", "3");
    await expect(thirdTreeItem).toHaveAttribute("aria-label", "Grandchild Item 1.1.1");

    // Test fourth tree item (Child Item 1.2)
    const fourthTreeItem = treeItems.nth(3);
    await expect(fourthTreeItem).toHaveAttribute("aria-level", "2");
    await expect(fourthTreeItem).toHaveAttribute("aria-label", "Child Item 1.2");
  });

  test("supports keyboard navigation", async ({ initTestBed, createTreeDriver }) => {
    await initTestBed(`
      <VStack height="400px">
        <Tree testId="tree" 
          dataFormat="flat" 
          data='{${JSON.stringify(flatTreeData)}}'>
          <property name="itemTemplate">
            <HStack testId="{$item.id}:keyboard" verticalAlignment="center">
              <Text value="{$item.name}" />
            </HStack>
          </property>
        </Tree>
      </VStack>
    `);

    const tree = await createTreeDriver("tree");

    // Focus the tree
    await tree.component.focus();

    // Test Arrow Down navigation
    await tree.component.press("ArrowDown");
    // First item should be focused after initial focus + ArrowDown

    // Test Arrow Up navigation
    await tree.component.press("ArrowUp");
    // Should stay at first item (can't go up from first)

    // Navigate down to second item
    await tree.component.press("ArrowDown");

    // Test Enter for selection/expansion
    await tree.component.press("Enter");

    // Test Arrow Right for expansion (if has children)
    await tree.component.press("ArrowRight");

    // Test Arrow Left for collapse/parent navigation
    await tree.component.press("ArrowLeft");

    // Test Home key
    await tree.component.press("Home");

    // Test End key
    await tree.component.press("End");

    // Test Space for selection
    await tree.component.press(" ");

    // Verify tree is still visible and functional after keyboard interactions
    await expect(tree.getByTestId("1:keyboard")).toBeVisible();
  });

  test("supports itemClickExpands behavior", async ({ initTestBed, createTreeDriver }) => {
    await initTestBed(`
      <VStack height="400px">
        <Tree testId="tree" 
          dataFormat="flat" 
          itemClickExpands="true"
          data='{${JSON.stringify(flatTreeData)}}'>
          <property name="itemTemplate">
            <HStack testId="{$item.id}:expand-click" verticalAlignment="center">
              <Text value="{$item.name}" />
            </HStack>
          </property>
        </Tree>
      </VStack>
    `);

    const tree = await createTreeDriver("tree");

    // Initially, only root item should be visible (tree starts collapsed)
    await expect(tree.getByTestId("1:expand-click")).toBeVisible();
    await expect(tree.getByTestId("2:expand-click")).not.toBeVisible();

    // Click on the root item (not the expand/collapse icon) to expand it
    await tree.getByTestId("1:expand-click").click();

    // After clicking, children should be visible
    await expect(tree.getByTestId("2:expand-click")).toBeVisible();
    await expect(tree.getByTestId("3:expand-click")).toBeVisible();

    // Click on child item that has its own children
    await tree.getByTestId("2:expand-click").click();

    // Grandchild should become visible
    await expect(tree.getByTestId("4:expand-click")).toBeVisible();

    // Click again to collapse
    await tree.getByTestId("2:expand-click").click();

    // Grandchild should be hidden
    await expect(tree.getByTestId("4:expand-click")).not.toBeVisible();
  });

  test("works with screen readers", async ({ initTestBed, createTreeDriver }) => {
    await initTestBed(`
      <VStack height="400px">
        <Tree testId="tree" 
          dataFormat="flat" 
          defaultExpanded="all"
          data='{${JSON.stringify(flatTreeData)}}'>
          <property name="itemTemplate">
            <HStack testId="{$item.id}:screen-reader" verticalAlignment="center">
              <Text value="{$item.name}" />
            </HStack>
          </property>
        </Tree>
      </VStack>
    `);

    const tree = await createTreeDriver("tree");

    // Test semantic structure that screen readers depend on
    await expect(tree.component).toHaveAttribute("role", "tree");

    // Verify all tree items have proper semantic markup
    const treeItems = tree.component.locator('[role="treeitem"]');
    await expect(treeItems).toHaveCount(4);

    // Test each item has required accessibility information
    for (let i = 0; i < 4; i++) {
      const item = treeItems.nth(i);

      // Each item must have a level for screen reader navigation
      await expect(item).toHaveAttribute("aria-level");

      // Each item must have a label for screen reader announcement
      await expect(item).toHaveAttribute("aria-label");

      // Each item must have selection state
      await expect(item).toHaveAttribute("aria-selected");
    }

    // Test hierarchical relationships are properly communicated
    const rootItem = treeItems.first();
    await expect(rootItem).toHaveAttribute("aria-level", "1");
    await expect(rootItem).toHaveAttribute("aria-expanded", "true");

    // Test child items have correct level hierarchy
    const childItem = treeItems.nth(1);
    await expect(childItem).toHaveAttribute("aria-level", "2");

    // Test grandchild has deeper level
    const grandchildItem = treeItems.nth(2);
    await expect(grandchildItem).toHaveAttribute("aria-level", "3");

    // Test that all items have selection state (even if not selected)
    const allItems = tree.component.locator('[aria-selected="false"]');
    await expect(allItems).toHaveCount(4); // All items should be unselected initially

    // Test expansion states are properly communicated
    const expandedItems = tree.component.locator('[aria-expanded="true"]');
    await expect(expandedItems).toHaveCount(2); // Root and Child Item 1.1 (which has a grandchild)

    // Test that tree is focusable for keyboard navigation
    await expect(tree.component).toHaveAttribute("tabindex", "0");

    // Verify semantic structure is maintained for screen reader navigation
    await expect(tree.component).toHaveAttribute("role", "tree");
    await expect(treeItems.first()).toHaveAttribute("role", "treeitem");

    // Test that all required accessibility information is present
    // This ensures screen readers can properly announce tree structure
    const firstItem = treeItems.first();
    await expect(firstItem).toHaveAttribute("aria-level");
    await expect(firstItem).toHaveAttribute("aria-label");
    await expect(firstItem).toHaveAttribute("aria-expanded");
    await expect(firstItem).toHaveAttribute("aria-selected");
  });
});

// =============================================================================
// PERFORMANCE TESTS
// =============================================================================

test.describe("Performance", () => {
  test("handles large datasets efficiently", async ({ initTestBed, createTreeDriver }) => {
    // Generate a large dataset with 1000+ items in a hierarchical structure
    const generateLargeDataset = (numItems = 1000) => {
      const data = [];
      let id = 1;

      // Create root items (10% of total)
      const numRoots = Math.ceil(numItems * 0.1);
      for (let i = 0; i < numRoots; i++) {
        data.push({
          id: id++,
          name: `Root Item ${i + 1}`,
          parentId: null,
        });
      }

      // Create child items distributed under roots
      const itemsPerRoot = Math.floor((numItems - numRoots) / numRoots);
      for (let rootIndex = 0; rootIndex < numRoots; rootIndex++) {
        const rootId = rootIndex + 1;

        for (let j = 0; j < itemsPerRoot && id <= numItems; j++) {
          data.push({
            id: id++,
            name: `Child Item ${rootId}.${j + 1}`,
            parentId: rootId,
          });
        }
      }

      return data;
    };

    const largeDataset = generateLargeDataset(1000);

    const startTime = performance.now();

    await initTestBed(`
      <VStack height="400px">
        <Tree testId="tree" 
          dataFormat="flat" 
          data='{${JSON.stringify(largeDataset)}}'>
          <property name="itemTemplate">
            <HStack testId="{$item.id}:perf" verticalAlignment="center">
              <Text value="{$item.name}" />
            </HStack>
          </property>
        </Tree>
      </VStack>
    `);

    const tree = await createTreeDriver("tree");

    // Verify tree renders
    await expect(tree.component).toBeVisible();

    const renderTime = performance.now() - startTime;

    // Should render large dataset within reasonable time (< 5 seconds)
    expect(renderTime).toBeLessThan(5000);

    // Test that only root items are initially visible (virtualization working)
    await expect(tree.getByTestId("1:perf")).toBeVisible();
    await expect(tree.getByTestId("2:perf")).toBeVisible();

    // Verify scrolling performance - scroll to end of visible items
    const scrollStartTime = performance.now();
    await tree.component.press("End"); // Scroll to last visible item
    const scrollTime = performance.now() - scrollStartTime;

    // Scrolling should be fast (< 1 second)
    expect(scrollTime).toBeLessThan(1000);

    // Test expansion performance
    const expandStartTime = performance.now();
    await tree.getByTestId("1:perf").click(); // Expand first root item
    const expandTime = performance.now() - expandStartTime;

    // Expansion should be fast (< 500ms)
    expect(expandTime).toBeLessThan(500);
  });

  test("maintains smooth scrolling with virtualization", async ({
    initTestBed,
    createTreeDriver,
  }) => {
    // Create a dataset specifically for scroll testing
    const scrollTestData = [];
    for (let i = 1; i <= 500; i++) {
      scrollTestData.push({
        id: i,
        name: `Scroll Item ${i}`,
        parentId: null,
      });
    }

    await initTestBed(`
      <VStack height="300px">
        <Tree testId="scroll-tree" 
          dataFormat="flat" 
          data='{${JSON.stringify(scrollTestData)}}'>
          <property name="itemTemplate">
            <HStack testId="{$item.id}:scroll">
              <Text value="{$item.name}" />
            </HStack>
          </property>
        </Tree>
      </VStack>
    `);

    const tree = await createTreeDriver("scroll-tree");

    // Verify tree is visible
    await expect(tree.component).toBeVisible();
    await expect(tree.getByTestId("1:scroll")).toBeVisible();

    // Test keyboard scrolling performance
    await tree.component.focus();

    // Scroll down 50 times rapidly
    const rapidScrollStartTime = performance.now();
    for (let i = 0; i < 50; i++) {
      await tree.component.press("ArrowDown");
    }
    const rapidScrollTime = performance.now() - rapidScrollStartTime;

    // Rapid keyboard scrolling should remain responsive (< 2 seconds)
    expect(rapidScrollTime).toBeLessThan(2000);

    // Verify we can reach different parts of the large list
    await tree.component.press("Home"); // Go to start
    await expect(tree.getByTestId("1:scroll")).toBeVisible();

    await tree.component.press("End"); // Go to end
    // Should be able to navigate to end without timeout
  });
});

// =============================================================================
// THEME VARIABLES TESTS
// =============================================================================

test.describe("Theme Variables", () => {
  test("applies custom tree text color theme variable", async ({
    initTestBed,
    createTreeDriver,
  }) => {
    const TEXT_COLOR = "rgb(128, 0, 128)";
    await initTestBed(
      `
      <VStack height="400px">
        <Tree testId="tree" 
          dataFormat="flat"
          defaultExpanded="all"
          data='{${JSON.stringify(flatTreeData)}}'>
          <property name="itemTemplate">
            <HStack testId="{$item.id}" verticalAlignment="center">
              <Text value="{$item.name}" />
            </HStack>
          </property>
        </Tree>
      </VStack>
      `,
      {
        testThemeVars: {
          "textColor-Tree": TEXT_COLOR,
        },
      },
    );

    const tree = await createTreeDriver("tree");

    // Get row wrappers directly using getNodeWrapperByMarker
    const rowWrapper1 = tree.getNodeWrapperByTestId("1");
    const rowWrapper2 = tree.getNodeWrapperByTestId("2");
    const rowWrapper3 = tree.getNodeWrapperByTestId("3");
    const rowWrapper4 = tree.getNodeWrapperByTestId("4");

    await expect(rowWrapper1).toBeVisible();

    // Test all items have correct default text color
    await expect(rowWrapper1).toHaveCSS("color", TEXT_COLOR);
    await expect(rowWrapper2).toHaveCSS("color", TEXT_COLOR);
    await expect(rowWrapper3).toHaveCSS("color", TEXT_COLOR);
    await expect(rowWrapper4).toHaveCSS("color", TEXT_COLOR);
  });

  test("applies custom hover state theme variables", async ({
    initTestBed,
    createTreeDriver,
    page,
  }) => {
    const HOVER_BG_COLOR = "rgb(255, 255, 0)";
    const HOVER_TEXT_COLOR = "rgb(0, 0, 255)";
    await initTestBed(
      `
      <VStack height="400px">
        <Tree testId="tree" 
          dataFormat="flat"
          defaultExpanded="all"
          data='{${JSON.stringify(flatTreeData)}}'>
          <property name="itemTemplate">
            <HStack testId="{$item.id}" verticalAlignment="center">
              <Text value="{$item.name}" />
            </HStack>
          </property>
        </Tree>
      </VStack>
      `,
      {
        testThemeVars: {
          "backgroundColor-Tree-row--hover": HOVER_BG_COLOR,
          "textColor-Tree--hover": HOVER_TEXT_COLOR,
        },
      },
    );

    const tree = await createTreeDriver("tree");

    // Get row wrappers directly using getNodeWrapperByMarker
    const rowWrapper1 = tree.getNodeWrapperByTestId("1");
    const rowWrapper2 = tree.getNodeWrapperByTestId("2");
    const rowWrapper3 = tree.getNodeWrapperByTestId("3");

    await expect(rowWrapper1).toBeVisible();

    // Test hover on first item
    await rowWrapper1.hover();
    await expect(rowWrapper1).toHaveCSS("background-color", HOVER_BG_COLOR);
    await expect(rowWrapper1).toHaveCSS("color", HOVER_TEXT_COLOR);

    // Test hover on second item
    await rowWrapper2.hover();
    await expect(rowWrapper2).toHaveCSS("background-color", HOVER_BG_COLOR);
    await expect(rowWrapper2).toHaveCSS("color", HOVER_TEXT_COLOR);

    // Test hover on third item
    await rowWrapper3.hover();
    await expect(rowWrapper3).toHaveCSS("background-color", HOVER_BG_COLOR);
    await expect(rowWrapper3).toHaveCSS("color", HOVER_TEXT_COLOR);
  });
});

// =============================================================================
// EDGE CASES TESTS
// =============================================================================

test.describe("Edge Cases", () => {
  test("handles null/undefined data gracefully", async ({ initTestBed, createTreeDriver }) => {
    await initTestBed(`
      <VStack height="200px">
        <Tree 
          testId="tree" 
          data="{null}" 
          dataFormat="flat"
        />
      </VStack>
    `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();
  });

  test("handles malformed data gracefully", async ({ initTestBed, createTreeDriver }) => {
    const malformedData = [
      { id: 1, name: "Valid Item" },
      { /* missing id */ name: "Invalid Item" },
      null,
      undefined,
    ];

    await initTestBed(`
      <VStack height="200px">
        <Tree 
          testId="tree" 
          data='{${JSON.stringify(malformedData)}}' 
          dataFormat="flat"
        />
      </VStack>
    `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();
  });

  test("handles circular references in hierarchy data", async ({
    initTestBed,
    createTreeDriver,
  }) => {
    const circularData = [
      { id: 1, name: "Item 1", parentId: 2 },
      { id: 2, name: "Item 2", parentId: 1 },
    ];

    await initTestBed(`
      <VStack height="200px">
        <Tree 
          testId="tree" 
          data='{${JSON.stringify(circularData)}}' 
          dataFormat="flat"
        />
      </VStack>
    `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();
  });

  test("handles duplicate IDs gracefully", async ({ initTestBed, createTreeDriver }) => {
    const duplicateIdData = [
      { id: 1, name: "Item 1" },
      { id: 1, name: "Duplicate Item 1" },
      { id: 2, name: "Item 2" },
    ];

    await initTestBed(`
      <VStack height="200px">
      <Tree 
          testId="tree" 
          data='{${JSON.stringify(duplicateIdData)}}' 
          dataFormat="flat"
        />
      </VStack>
    `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();
  });

  test("handles orphaned nodes in flat data", async ({ initTestBed, createTreeDriver }) => {
    const orphanedData = [
      { id: 1, name: "Root Item" },
      { id: 2, name: "Orphaned Item", parentId: 999 }, // non-existent parent
    ];

    await initTestBed(`
      <VStack height="200px">
        <Tree 
          testId="tree" 
          data='{${JSON.stringify(orphanedData)}}' 
          dataFormat="flat"
        />
      </VStack>
    `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();
  });

  test("handles deeply nested data structures", async ({ initTestBed, createTreeDriver }) => {
    const deepData = Array.from({ length: 100 }, (_, i) => ({
      id: i + 1,
      name: `Level ${i + 1}`,
      parentId: i === 0 ? null : i,
    }));

    await initTestBed(`
      <VStack height="200px">
        <Tree 
          testId="tree" 
          data='{${JSON.stringify(deepData)}}' 
          dataFormat="flat"
          selectedValue="{100}"
        />
      </VStack>
    `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();
  });

  test("handles invalid dataFormat values", async ({ initTestBed, createTreeDriver }) => {
    const orphanedData = [
      { id: 1, name: "Root Item" },
      { id: 2, name: "Orphaned Item", parentId: 999 }, // non-existent parent
    ];

    await initTestBed(`
      <VStack height="200px">
        <Tree 
          testId="tree" 
          data='{${JSON.stringify(orphanedData)}}' 
          dataFormat="invalid-format"
        />
      </VStack>
    `);
    const tree = await createTreeDriver("tree");
    await expect(tree.component).toBeVisible();
  });
});


```

