This is page 110 of 144. Use http://codebase.md/xmlui-org/xmlui/assets/img/%7Burl%7D?format=md&lines=false&page={x} to view the full context.

# Directory Structure

```
├── .changeset
│   ├── config.json
│   ├── cyan-tools-design.md
│   ├── every-moments-teach.md
│   ├── full-symbols-accept.md
│   └── tricky-zoos-crash.md
├── .eslintrc.cjs
├── .github
│   ├── build-checklist.png
│   ├── ISSUE_TEMPLATE
│   │   ├── bug_report.md
│   │   └── feature_request.md
│   └── workflows
│       ├── deploy-blog-optimized.yml
│       ├── deploy-blog-swa.yml
│       ├── deploy-blog.yml
│       ├── deploy-docs-optimized.yml
│       ├── deploy-docs-swa.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
│   ├── package.json
│   ├── public
│   │   ├── blog
│   │   │   ├── images
│   │   │   │   ├── an-advanced-codefence.gif
│   │   │   │   ├── an-advanced-codefence.mp4
│   │   │   │   ├── blog-page-component.png
│   │   │   │   ├── blog-scrabble.png
│   │   │   │   ├── codefence-runner.png
│   │   │   │   ├── integrated-blog-search.png
│   │   │   │   ├── lorem-ipsum.png
│   │   │   │   ├── playground-checkbox-source.png
│   │   │   │   ├── playground.png
│   │   │   │   ├── use-xmlui-mcp-to-find-a-howto.png
│   │   │   │   └── xmlui-demo-gallery.png
│   │   │   ├── introducing-xmlui.md
│   │   │   ├── lorem-ipsum.md
│   │   │   ├── newest-post.md
│   │   │   ├── older-post.md
│   │   │   ├── xmlui-playground.md
│   │   │   └── xmlui-powered-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
│   │   ├── staticwebapp.config.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
│   │   │   │   ├── control-cache-invalidation.md
│   │   │   │   ├── debounce-user-input-for-api-calls.md
│   │   │   │   ├── debounce-with-changelistener.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
│   ├── tsconfig.json
│   ├── 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
│   ├── 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
│   │   └── 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
│   ├── 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
│   ├── 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
│   ├── 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.module.scss
│   │       │   ├── 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.tsx
│   │       │   ├── StandalonePlayground.tsx
│   │       │   ├── StandalonePlaygroundNative.module.scss
│   │       │   ├── StandalonePlaygroundNative.tsx
│   │       │   ├── ThemeSwitcher.module.scss
│   │       │   ├── ThemeSwitcher.tsx
│   │       │   └── utils.ts
│   │       ├── providers
│   │       │   ├── Toast.module.scss
│   │       │   └── ToastProvider.tsx
│   │       ├── state
│   │       │   └── store.ts
│   │       ├── themes
│   │       │   └── theme.ts
│   │       └── utils
│   │           └── helpers.ts
│   ├── 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
│   ├── xmlui-spreadsheet
│   │   ├── .gitignore
│   │   ├── demo
│   │   │   └── Main.xmlui
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── meta
│   │   │   └── componentsMetadata.ts
│   │   ├── package.json
│   │   └── src
│   │       ├── index.tsx
│   │       ├── Spreadsheet.tsx
│   │       └── SpreadsheetNative.tsx
│   └── 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.spec.ts
│           │   ├── HeroSection.tsx
│           │   └── HeroSectionNative.tsx
│           ├── index.tsx
│           ├── ScrollToTop
│           │   ├── ScrollToTop.module.scss
│           │   ├── ScrollToTop.tsx
│           │   └── ScrollToTopNative.tsx
│           └── vite-env.d.ts
├── playwright.config.ts
├── 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.cjs
    │   ├── 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
    │   ├── component-metadata.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
    │   ├── theme-variables-refactoring.md
    │   ├── ud-components.md
    │   └── xmlui-repo.md
    ├── package.json
    ├── scripts
    │   ├── coverage-only.js
    │   ├── e2e-test-summary.js
    │   ├── extract-component-metadata.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
    │   ├── generate-metadata-markdown.js
    │   ├── get-langserver-metadata.js
    │   ├── 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.module.scss
    │   │   │   │   ├── LabelList.spec.ts
    │   │   │   │   ├── LabelList.tsx
    │   │   │   │   └── 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
    │   │   │   └── test-padding.xmlui
    │   │   ├── 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.js
    │   ├── 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
    │   │   │   ├── index.ts
    │   │   │   ├── ModalDialogDriver.ts
    │   │   │   ├── NumberBoxDriver.ts
    │   │   │   ├── TextBoxDriver.ts
    │   │   │   ├── TimeInputDriver.ts
    │   │   │   ├── TimerDriver.ts
    │   │   │   └── TreeDriver.ts
    │   │   ├── fixtures.ts
    │   │   ├── index.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.json
    ├── tsdown.config.ts
    ├── vite.config.ts
    └── vitest.config.ts
```

# Files

--------------------------------------------------------------------------------
/xmlui/src/components/Table/TableNative.tsx:
--------------------------------------------------------------------------------

```typescript
import type { CSSProperties, ReactNode } from "react";
import {
  forwardRef,
  useCallback,
  useEffect,
  useLayoutEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import { flushSync } from "react-dom";
import type {
  CellContext,
  Column,
  ColumnDef,
  HeaderContext,
  PaginationState,
  RowData,
} from "@tanstack/react-table";
import {
  flexRender,
  getCoreRowModel,
  getPaginationRowModel,
  useReactTable,
} from "@tanstack/react-table";
import { composeRefs } from "@radix-ui/react-compose-refs";
import { useVirtualizer } from "@tanstack/react-virtual";
import { orderBy } from "lodash-es";
import classnames from "classnames";

import styles from "./Table.module.scss";

import "./react-table-config.d.ts";
import type { RegisterComponentApiFn } from "../../abstractions/RendererDefs";
import type { AsyncFunction } from "../../abstractions/FunctionDefs";
import { EMPTY_ARRAY } from "../../components-core/constants";
import { useEvent } from "../../components-core/utils/misc";
import {
  useHasExplicitHeight,
  useIsomorphicLayoutEffect,
  usePrevious,
  useResizeObserver,
  useScrollParent,
  useStartMargin,
} from "../../components-core/utils/hooks";
import { useTheme } from "../../components-core/theming/ThemeContext";
import { isThemeVarName } from "../../components-core/theming/transformThemeVars";
import { Spinner } from "../Spinner/SpinnerNative";
import { Toggle } from "../Toggle/Toggle";
import { Icon } from "../Icon/IconNative";
import { type OurColumnMetadata } from "../Column/TableContext";
import useRowSelection from "./useRowSelection";
import { PaginationNative, type Position } from "../Pagination/PaginationNative";

// =====================================================================================================================
// Helper types

// --- Declaration merging, see here: https://tanstack.com/table/v8/docs/api/core/table#meta
declare module "@tanstack/table-core" {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  interface TableMeta<TData extends RowData> {
    cellRenderer: (...args: any[]) => any;
  }

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  interface ColumnMeta<TData extends RowData, TValue> {
    style?: CSSProperties;
    starSizedWidth?: string;
    accessorKey?: string;
    pinTo?: string;
    cellRenderer?: (row: any, rowIdx: number, colIdx: number, value?: any) => ReactNode;
  }
}

/**
 * This type describes an arbitraty table row that has an integer identifier and an order index.
 */
type RowWithOrder = {
  /**
   * Order index; we use it with paging.
   */
  order: number;

  [x: string | number | symbol]: unknown;
};

type SortingDirection = "ascending" | "descending";
export const TablePaginationControlsLocationValues = ["top", "bottom", "both"] as const;
export type TablePaginationControlsLocation =
  (typeof TablePaginationControlsLocationValues)[number];

export const CheckboxToleranceValues = ["none", "compact", "comfortable", "spacious"] as const;
export type CheckboxTolerance = (typeof CheckboxToleranceValues)[number];

// =====================================================================================================================
// React Table component implementation

type CellVerticalAlign = "top" | "center" | "bottom";

type TableProps = {
  data: any[];
  columns?: OurColumnMetadata[];
  isPaginated?: boolean;
  loading?: boolean;
  headerHeight?: string | number;
  rowsSelectable?: boolean;
  enableMultiRowSelection?: boolean;
  initiallySelected?: string[];
  syncWithAppState?: any;
  pageSizeOptions?: number[];
  currentPageIndex?: number;
  pageSize?: number;
  paginationControlsLocation?: TablePaginationControlsLocation;
  rowDisabledPredicate?: (item: any) => boolean;
  sortBy?: string;
  sortingDirection?: SortingDirection;
  iconSortAsc?: string;
  iconSortDesc?: string;
  iconNoSort?: string;
  sortingDidChange?: AsyncFunction;
  onSelectionDidChange?: AsyncFunction;
  willSort?: AsyncFunction;
  style?: CSSProperties;
  className?: string;
  uid?: string;
  noDataRenderer?: () => ReactNode;
  autoFocus?: boolean;
  hideHeader?: boolean;
  hideNoDataView?: boolean;
  alwaysShowSelectionHeader?: boolean;
  registerComponentApi: RegisterComponentApiFn;
  noBottomBorder?: boolean;
  cellVerticalAlign?: CellVerticalAlign;
  showPageInfo?: boolean;
  showPageSizeSelector?: boolean;
  showCurrentPage?: boolean;
  buttonRowPosition?: Position;
  pageSizeSelectorPosition?: Position;
  pageInfoPosition?: Position;
  checkboxTolerance?: CheckboxTolerance;
};

function defaultIsRowDisabled(_: any) {
  return false;
}

const SELECT_COLUMN_WIDTH = 42;

const DEFAULT_PAGE_SIZES = [10];

/**
 * Maps checkbox tolerance values to pixel values
 * @param tolerance - The tolerance level
 * @returns The number of pixels for the tolerance
 */
const getCheckboxTolerancePixels = (tolerance: CheckboxTolerance): number => {
  switch (tolerance) {
    case "none":
      return 0;
    case "compact":
      return 8;
    case "comfortable":
      return 12;
    case "spacious":
      return 16;
    default:
      return 8; // fallback to compact
  }
};

/**
 * Helper function to check if a point is within the checkbox boundary
 * @param pointX - X coordinate of the point to check
 * @param pointY - Y coordinate of the point to check
 * @param checkboxRect - Bounding rectangle of the checkbox
 * @param tolerancePixels - Number of pixels to extend the boundary
 * @returns true if the point is within the checkbox or within tolerancePixels of its boundary
 */
const isWithinCheckboxBoundary = (
  pointX: number,
  pointY: number,
  checkboxRect: DOMRect,
  tolerancePixels: number,
): boolean => {
  // Calculate distance from point to checkbox boundaries
  const distanceToLeft = Math.abs(pointX - checkboxRect.left);
  const distanceToRight = Math.abs(pointX - checkboxRect.right);
  const distanceToTop = Math.abs(pointY - checkboxRect.top);
  const distanceToBottom = Math.abs(pointY - checkboxRect.bottom);

  // Check if point is within the checkbox bounds or within boundary pixels of any edge
  const withinHorizontalBounds = pointX >= checkboxRect.left && pointX <= checkboxRect.right;
  const withinVerticalBounds = pointY >= checkboxRect.top && pointY <= checkboxRect.bottom;
  const withinCheckbox = withinHorizontalBounds && withinVerticalBounds;

  const nearHorizontalBoundary =
    withinVerticalBounds &&
    (distanceToLeft <= tolerancePixels || distanceToRight <= tolerancePixels);
  const nearVerticalBoundary =
    withinHorizontalBounds &&
    (distanceToTop <= tolerancePixels || distanceToBottom <= tolerancePixels);

  return withinCheckbox || nearHorizontalBoundary || nearVerticalBoundary;
};

//These are the important styles to make sticky column pinning work!
//Apply styles like this using your CSS strategy of choice with this kind of logic to head cells, data cells, footer cells, etc.
//View the index.css file for more needed styles such as border-collapse: separate
const getCommonPinningStyles = (column: Column<RowWithOrder>): CSSProperties => {
  const isPinned = column.getIsPinned();
  // const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
  // const isFirstRightPinnedColumn = isPinned === "right" && column.getIsFirstColumn("right");

  return {
    // boxShadow: isLastLeftPinnedColumn
    //   ? "-4px 0 4px -4px gray inset"
    //   : isFirstRightPinnedColumn
    //   ? "4px 0 4px -4px gray inset"
    //   : undefined,
    left: isPinned === "left" ? `${column.getStart("left")}px` : undefined,
    right: isPinned === "right" ? `${column.getAfter("right")}px` : undefined,
    opacity: isPinned ? 0.95 : undefined,
    position: isPinned ? "sticky" : "relative",
    backgroundColor: isPinned ? "inherit" : undefined,
    zIndex: isPinned ? 1 : undefined,
  };
};

// eslint-disable-next-line react/display-name
export const Table = forwardRef(
  (
    {
      data = defaultProps.data,
      columns = defaultProps.columns,
      isPaginated = defaultProps.isPaginated,
      loading = defaultProps.loading,
      headerHeight,
      rowsSelectable = defaultProps.rowsSelectable,
      enableMultiRowSelection = defaultProps.enableMultiRowSelection,
      initiallySelected = defaultProps.initiallySelected,
      syncWithAppState,
      pageSizeOptions = defaultProps.pageSizeOptions,
      pageSize = pageSizeOptions?.[0] || DEFAULT_PAGE_SIZES[0],
      currentPageIndex = 0,
      rowDisabledPredicate = defaultIsRowDisabled,
      sortBy,
      sortingDirection = defaultProps.sortingDirection,
      iconSortAsc,
      iconSortDesc,
      iconNoSort,
      sortingDidChange,
      willSort,
      style,
      className,
      noDataRenderer,
      autoFocus = defaultProps.autoFocus,
      hideHeader = defaultProps.hideHeader,
      hideNoDataView = defaultProps.hideNoDataView,
      alwaysShowSelectionHeader = defaultProps.alwaysShowSelectionHeader,
      registerComponentApi,
      onSelectionDidChange,
      noBottomBorder = defaultProps.noBottomBorder,
      paginationControlsLocation = defaultProps.paginationControlsLocation,
      cellVerticalAlign = defaultProps.cellVerticalAlign,
      buttonRowPosition = defaultProps.buttonRowPosition,
      pageSizeSelectorPosition = defaultProps.pageSizeSelectorPosition,
      pageInfoPosition = defaultProps.pageInfoPosition,
      showCurrentPage = defaultProps.showCurrentPage,
      showPageInfo = defaultProps.showPageInfo,
      showPageSizeSelector = defaultProps.showPageSizeSelector,
      checkboxTolerance = defaultProps.checkboxTolerance,
      ...rest
      // cols
    }: TableProps,
    forwardedRef,
  ) => {
    const { getThemeVar } = useTheme();
    const safeData = Array.isArray(data) ? data : EMPTY_ARRAY;
    const wrapperRef = useRef<HTMLDivElement>(null);
    const ref = forwardedRef ? composeRefs(wrapperRef, forwardedRef) : wrapperRef;
    const tableRef = useRef<HTMLTableElement>(null);
    const estimatedHeightRef = useRef<number | null>(null);

    const safeColumns: OurColumnMetadata[] = useMemo(() => {
      if (columns) {
        return columns;
      }
      if (!safeData.length) {
        return EMPTY_ARRAY;
      }
      return Object.keys(safeData[0]).map((key: string) => ({ header: key, accessorKey: key }));
    }, [columns, safeData]);

    useEffect(() => {
      if (autoFocus) {
        wrapperRef.current!.focus();
      }
    }, [autoFocus]);

    // --- Keep track of visible table rows
    const [visibleItems, setVisibleItems] = useState<any[]>(EMPTY_ARRAY);

    // --- Track which row should show forced hover for checkbox
    const [hoveredRowId, setHoveredRowId] = useState<string | null>(null);

    // --- Track if the header checkbox should show forced hover
    const [headerCheckboxHovered, setHeaderCheckboxHovered] = useState<boolean>(false);

    // --- Calculate tolerance pixels from the prop
    const tolerancePixels = getCheckboxTolerancePixels(checkboxTolerance);

    // --- Get the operations to manage selected rows in a table
    const {
      toggleRow,
      checkAllRows,
      focusedIndex,
      onKeyDown,
      selectedRowIdMap,
      idKey,
      selectionApi,
    } = useRowSelection({
      items: safeData,
      visibleItems,
      rowsSelectable,
      enableMultiRowSelection,
      rowDisabledPredicate,
      onSelectionDidChange,
      initiallySelected,
      syncWithAppState,
    });

    // --- Create data with order information whenever the items in the table change
    const dataWithOrder = useMemo(() => {
      return safeData.map((item, index) => {
        return {
          ...item,
          order: index + 1,
        };
      });
    }, [safeData]);

    // --- Local or external sorting of data
    const [_sortBy, _setSortBy] = useState(sortBy);
    const [_sortingDirection, _setSortingDirection] = useState(sortingDirection);

    useLayoutEffect(() => {
      _setSortBy(sortBy);
    }, [sortBy]);

    useLayoutEffect(() => {
      _setSortingDirection(sortingDirection);
    }, [sortingDirection]);

    const sortedData = useMemo(() => {
      if (!_sortBy) {
        return dataWithOrder;
      }
      return orderBy(dataWithOrder, _sortBy, _sortingDirection === "ascending" ? "asc" : "desc");
    }, [_sortBy, _sortingDirection, dataWithOrder]);

    const _updateSorting = useCallback(
      async (accessorKey: string) => {
        let newDirection: SortingDirection = "ascending";
        let newSortBy = accessorKey;
        // The current key is the same as the last -> the user clicked on the same header twice
        if (_sortBy === accessorKey) {
          // The last sorting direction was ascending -> make it descending
          if (_sortingDirection === "ascending") {
            newDirection = "descending";
            // The last sorting direction was descending -> remove the sorting from the current key
          } else {
            newSortBy = undefined;
          }
        }

        // --- Check if sorting is allowed
        const result = await willSort?.(newSortBy, newDirection);
        if (result === false) {
          return;
        }

        _setSortingDirection(newDirection);
        _setSortBy(newSortBy);

        // External callback function is always called.
        // Even if sorting is internal, we can notify other components through this callback
        sortingDidChange?.(newSortBy, newDirection);
      },
      [_sortBy, willSort, sortingDidChange, _sortingDirection],
    );

    // --- Prepare column renderers according to columns defined in the table
    const columnsWithCustomCell: ColumnDef<any>[] = useMemo(() => {
      return safeColumns.map((col, idx) => {
        // --- Obtain column width information
        const { width, starSizedWidth } = getColumnWidth(col.width, true, "width");
        const { width: minWidth } = getColumnWidth(col.minWidth, false, "minWidth");
        const { width: maxWidth } = getColumnWidth(col.maxWidth, false, "maxWidth");

        const customColumn = {
          ...col,
          header: col.header ?? col.accessorKey ?? " ",
          id: "col_" + idx,
          size: width,
          minSize: minWidth,
          maxSize: maxWidth,
          enableResizing: col.canResize,
          enableSorting: col.canSort && !!col.accessorKey,
          enablePinning: col.pinTo !== undefined,
          meta: {
            starSizedWidth,
            pinTo: col.pinTo,
            style: col.style,
            className: col.className,
            accessorKey: col.accessorKey,
            cellRenderer: col.cellRenderer,
          },
        };
        return customColumn;

        function getColumnWidth(
          colWidth: any,
          allowStarSize: boolean,
          propName: string,
        ): { width?: number; starSizedWidth?: string } {
          let starSizedWidth: string;
          let width: number;
          const resolvedWidth = isThemeVarName(colWidth) ? getThemeVar(colWidth) : colWidth;
          if (typeof resolvedWidth === "number") {
            width = resolvedWidth;
          } else if (typeof resolvedWidth === "string") {
            const oneStarSizedWidthMatch = resolvedWidth.match(/^\s*\*\s*$/);
            if (allowStarSize && oneStarSizedWidthMatch) {
              starSizedWidth = "1*";
            } else {
              const starSizedWidthMatch = resolvedWidth.match(/^\s*(\d+)\s*\*\s*$/);
              if (allowStarSize && starSizedWidthMatch) {
                starSizedWidth = starSizedWidthMatch[1] + "*";
              } else {
                const pixelWidthMatch = resolvedWidth.match(/^\s*(\d+)\s*(px)?\s*$/);
                if (pixelWidthMatch) {
                  width = Number(pixelWidthMatch[1]);
                } else {
                  throw new Error(`Invalid TableColumnDef '${propName}' value: ${resolvedWidth}`);
                }
              }
            }
          }
          if (width === undefined && starSizedWidth === undefined && allowStarSize) {
            starSizedWidth = "1*";
          }
          return { width, starSizedWidth };
        }
      });
    }, [getThemeVar, safeColumns]);

    // --- Prepare column renderers according to columns defined in the table supporting optional row selection
    const columnsWithSelectColumn: ColumnDef<any>[] = useMemo(() => {
      // --- Extend the columns with a selection checkbox (indeterminate)
      const selectColumn = {
        id: "select",
        size: SELECT_COLUMN_WIDTH,
        enableResizing: false,
        enablePinning: true,
        meta: {
          pinTo: "left",
        },
        header: ({ table }: HeaderContext<any, unknown>) =>
          enableMultiRowSelection ? (
            <Toggle
              {...{
                className: classnames(styles.checkBoxWrapper, {
                  [styles.showInHeader]: alwaysShowSelectionHeader,
                  [styles.forceHoverWrapper]: headerCheckboxHovered,
                }),
                value: table.getIsAllRowsSelected(),
                indeterminate: table.getIsSomeRowsSelected(),
                forceHover: headerCheckboxHovered,
                onDidChange: () => {
                  const allSelected = table
                    .getRowModel()
                    .rows.every((row) => rowDisabledPredicate(row.original) || row.getIsSelected());
                  checkAllRows(!allSelected);
                },
              }}
            />
          ) : null,
        cell: ({ row }: CellContext<any, unknown>) => {
          return (
            <Toggle
              {...{
                className: classnames(styles.checkBoxWrapper, {
                  [styles.forceHoverWrapper]: hoveredRowId === row.id,
                }),
                value: row.getIsSelected(),
                indeterminate: row.getIsSomeSelected(),
                forceHover: hoveredRowId === row.id,
                onDidChange: () => {
                  // In single selection mode, allow deselection by checking if already selected
                  if (!enableMultiRowSelection && row.getIsSelected()) {
                    checkAllRows(false); // Deselect all (which is just this one row)
                  } else {
                    toggleRow(row.original, { metaKey: true });
                  }
                },
              }}
            />
          );
        },
      };
      return rowsSelectable ? [selectColumn, ...columnsWithCustomCell] : columnsWithCustomCell;
    }, [
      rowsSelectable,
      columnsWithCustomCell,
      enableMultiRowSelection,
      alwaysShowSelectionHeader,
      checkAllRows,
      toggleRow,
      rowDisabledPredicate,
      hoveredRowId,
      headerCheckboxHovered,
    ]);

    // --- Set up page information (using the first page size option)
    // const [pagination, setPagination] = useState<PaginationState>();
    const [pagination, setPagination] = useState<PaginationState>({
      pageSize: isPaginated ? pageSize : Number.MAX_VALUE,
      pageIndex: currentPageIndex,
    });

    const prevIsPaginated = usePrevious(isPaginated);

    useEffect(() => {
      if (!prevIsPaginated && isPaginated) {
        setPagination((prev) => {
          return {
            ...prev,
            pageSize: pageSize,
            pageIndex: 0,
          };
        });
      }
      if (prevIsPaginated && !isPaginated) {
        setPagination(() => {
          return {
            pageIndex: 0,
            pageSize: Number.MAX_VALUE,
          };
        });
      }
    }, [isPaginated, pageSizeOptions, prevIsPaginated, pageSize]);

    const [columnSizing, setColumnSizing] = useState<Record<string, number>>({});

    const columnPinning = useMemo(() => {
      const left: Array<string> = [];
      const right: Array<string> = [];
      columnsWithSelectColumn.forEach((col) => {
        if (col.meta?.pinTo === "right") {
          right.push(col.id!);
        }
        if (col.meta?.pinTo === "left") {
          left.push(col.id!);
        }
      });
      return {
        left,
        right,
      };
    }, [columnsWithSelectColumn]);

    // --- Use the @tanstack/core-table component that manages a table
    const table = useReactTable<RowWithOrder>({
      columns: columnsWithSelectColumn,
      data: sortedData,
      getCoreRowModel: getCoreRowModel(),
      getPaginationRowModel: isPaginated ? getPaginationRowModel() : undefined,
      enableRowSelection: rowsSelectable,
      enableMultiRowSelection,
      columnResizeMode: "onChange",
      getRowId: useCallback(
        (originalRow: any) => {
          return originalRow[idKey] + "";
        },
        [idKey],
      ),
      state: useMemo(
        () => ({
          pagination,
          rowSelection: selectedRowIdMap,
          columnSizing,
          columnPinning,
        }),
        [columnPinning, columnSizing, pagination, selectedRowIdMap],
      ),
      onColumnSizingChange: setColumnSizing,
      onPaginationChange: setPagination,
    });

    // --- Select the set of visible rows whenever the table rows change
    const rows = table.getRowModel().rows;
    useEffect(() => {
      setVisibleItems(rows.map((row) => row.original));
    }, [rows]);

    const scrollParent = useScrollParent(wrapperRef.current?.parentElement);
    const scrollRef = useRef(scrollParent);
    scrollRef.current = scrollParent;

    const hasHeight = useHasExplicitHeight(wrapperRef);

    const hasOutsideScroll = scrollRef.current && !hasHeight;

    const startMargin = useStartMargin(hasOutsideScroll, wrapperRef, scrollRef);

    const rowVirtualizer = useVirtualizer({
      count: rows.length,
      getScrollElement: useCallback(() => {
        return hasOutsideScroll && scrollRef?.current ? scrollRef?.current : wrapperRef.current;
      }, [scrollRef, hasOutsideScroll]),
      scrollMargin: startMargin,
      estimateSize: useCallback(() => {
        return estimatedHeightRef.current || 30;
      }, []),
      overscan: 5,
    });

    const paddingTop =
      rowVirtualizer.getVirtualItems().length > 0
        ? rowVirtualizer.getVirtualItems()?.[0]?.start - startMargin || 0
        : 0;
    const paddingBottom =
      rowVirtualizer.getVirtualItems().length > 0
        ? rowVirtualizer.getTotalSize() -
          (rowVirtualizer.getVirtualItems()?.[rowVirtualizer.getVirtualItems().length - 1]?.end -
            startMargin || 0)
        : 0;

    const hasData = safeData.length !== 0;

    const touchedSizesRef = useRef<Record<string, boolean>>({});
    const columnSizeTouched = useCallback((id: string) => {
      touchedSizesRef.current[id] = true;
    }, []);

    const recalculateStarSizes = useEvent(() => {
      if (!tableRef.current) {
        return;
      }
      let availableWidth = tableRef.current.clientWidth - 1;
      // -1 to prevent horizontal scroll in scaled browsers (when you zoom in)
      const widths: Record<string, number> = {};
      const columnsWithoutSize: Array<Column<RowWithOrder>> = [];
      const numberOfUnitsById: Record<string, number> = {};

      table.getAllColumns().forEach((column) => {
        if (column.columnDef.size !== undefined || touchedSizesRef.current[column.id]) {
          availableWidth -= columnSizing[column.id] || column.columnDef.size || 0;
        } else {
          columnsWithoutSize.push(column);
          let units: number;
          if (column.columnDef.meta?.starSizedWidth) {
            units = Number(column.columnDef.meta?.starSizedWidth.replace("*", "").trim()) || 1;
          } else {
            units = 1;
          }
          numberOfUnitsById[column.id] = units;
        }
      });
      const numberOfAllUnits = Object.values(numberOfUnitsById).reduce((acc, val) => acc + val, 0);
      columnsWithoutSize.forEach((column) => {
        widths[column.id] = Math.floor(
          availableWidth * (numberOfUnitsById[column.id] / numberOfAllUnits),
        );
      });
      flushSync(() => {
        setColumnSizing((prev) => {
          return {
            ...prev,
            ...widths,
          };
        });
      });
    });

    useResizeObserver(tableRef, recalculateStarSizes);

    useIsomorphicLayoutEffect(() => {
      queueMicrotask(() => {
        recalculateStarSizes();
      });
    }, [recalculateStarSizes, safeColumns]);

    useIsomorphicLayoutEffect(() => {
      registerComponentApi(selectionApi);
    }, [registerComponentApi, selectionApi]);

    const paginationControls = (
      <PaginationNative
        pageIndex={pagination.pageIndex}
        pageSize={pagination.pageSize}
        itemCount={safeData.length}
        pageSizeOptions={pageSizeOptions}
        onPageDidChange={(page) => table.setPageIndex(page)}
        onPageSizeDidChange={(size) => table.setPageSize(size)}
        showCurrentPage={showCurrentPage}
        showPageInfo={showPageInfo}
        showPageSizeSelector={showPageSizeSelector}
        buttonRowPosition={buttonRowPosition}
        pageInfoPosition={pageInfoPosition}
        pageSizeSelectorPosition={pageSizeSelectorPosition}
      />
    );

    return (
      <div
        {...rest}
        className={classnames(styles.wrapper, className, { [styles.noScroll]: hasOutsideScroll })}
        tabIndex={-1}
        onKeyDown={onKeyDown}
        ref={ref}
        style={style}
      >
        {isPaginated &&
          hasData &&
          rows.length > 0 &&
          pagination &&
          (paginationControlsLocation === "top" || paginationControlsLocation === "both") &&
          paginationControls}

        <table className={styles.table} ref={tableRef}>
          {!hideHeader && (
            <thead style={{ height: headerHeight }} className={styles.headerWrapper}>
              {table.getHeaderGroups().map((headerGroup, headerGroupIndex) => (
                <tr
                  key={`${headerGroup.id}-${headerGroupIndex}`}
                  className={classnames(styles.headerRow, {
                    [styles.allSelected]: table.getIsAllRowsSelected(),
                  })}
                  onClick={(event) => {
                    const target = event.target as HTMLElement;
                    const headerCell = target.closest("th");

                    // Only handle clicks for the select column header
                    if (headerCell && rowsSelectable && enableMultiRowSelection) {
                      const header = headerGroup.headers.find((h) => {
                        const headerElement = headerCell;
                        return (
                          headerElement?.getAttribute("data-column-id") === h.id ||
                          h.id === "select"
                        );
                      });

                      if (header && header.id === "select") {
                        const clickX = event.clientX;
                        const clickY = event.clientY;
                        const checkbox = headerCell.querySelector(
                          'input[type=\"checkbox\"]',
                        ) as HTMLInputElement;

                        if (checkbox) {
                          const checkboxRect = checkbox.getBoundingClientRect();

                          if (
                            isWithinCheckboxBoundary(clickX, clickY, checkboxRect, tolerancePixels)
                          ) {
                            // Prevent the default click and manually trigger the checkbox
                            event.preventDefault();
                            event.stopPropagation();

                            const allSelected = table
                              .getRowModel()
                              .rows.every(
                                (row) => rowDisabledPredicate(row.original) || row.getIsSelected(),
                              );
                            checkAllRows(!allSelected);
                          }
                        }
                      }
                    }
                  }}
                  onMouseMove={(event) => {
                    if (rowsSelectable && enableMultiRowSelection) {
                      const target = event.target as HTMLElement;
                      const headerCell = target.closest("th");

                      if (headerCell) {
                        const header = headerGroup.headers.find((h) => {
                          const headerElement = headerCell;
                          return (
                            headerElement?.getAttribute("data-column-id") === h.id ||
                            h.id === "select"
                          );
                        });

                        if (header && header.id === "select") {
                          const mouseX = event.clientX;
                          const mouseY = event.clientY;
                          const checkbox = headerCell.querySelector(
                            'input[type=\"checkbox\"]',
                          ) as HTMLInputElement;

                          if (checkbox) {
                            const checkboxRect = checkbox.getBoundingClientRect();
                            const shouldShowHover = isWithinCheckboxBoundary(
                              mouseX,
                              mouseY,
                              checkboxRect,
                              tolerancePixels,
                            );

                            if (shouldShowHover && !headerCheckboxHovered) {
                              setHeaderCheckboxHovered(true);
                              event.currentTarget.style.cursor = "pointer";
                            } else if (!shouldShowHover && headerCheckboxHovered) {
                              setHeaderCheckboxHovered(false);
                              event.currentTarget.style.cursor = "";
                            }
                          }
                        } else if (headerCheckboxHovered) {
                          setHeaderCheckboxHovered(false);
                          event.currentTarget.style.cursor = "";
                        }
                      }
                    }
                  }}
                  onMouseLeave={(event) => {
                    if (headerCheckboxHovered) {
                      setHeaderCheckboxHovered(false);
                      event.currentTarget.style.cursor = "";
                    }
                  }}
                >
                  {headerGroup.headers.map((header, headerIndex) => {
                    const { width, ...style } = header.column.columnDef.meta?.style || {};
                    const size = header.getSize();
                    const alignmentClass =
                      cellVerticalAlign === "top"
                        ? styles.alignTop
                        : cellVerticalAlign === "bottom"
                          ? styles.alignBottom
                          : styles.alignCenter;
                    return (
                      <th
                        key={`${header.id}-${headerIndex}`}
                        data-column-id={header.id}
                        className={classnames(styles.columnCell, alignmentClass)}
                        colSpan={header.colSpan}
                        style={{
                          position: "relative",
                          width: size,
                          ...getCommonPinningStyles(header.column),
                        }}
                      >
                        <ClickableHeader
                          hasSorting={
                            header.column.columnDef.enableSorting &&
                            !!header.column.columnDef.meta?.accessorKey
                          }
                          updateSorting={() =>
                            _updateSorting(header.column.columnDef.meta?.accessorKey)
                          }
                        >
                          <div className={styles.headerContent} style={style}>
                            {
                              flexRender(
                                header.column.columnDef.header,
                                header.getContext(),
                              ) as ReactNode
                            }
                            {header.column.columnDef.enableSorting && (
                              <span style={{ display: "inline-flex", maxWidth: 16 }}>
                                <ColumnOrderingIndicator
                                  iconSortAsc={iconSortAsc}
                                  iconSortDesc={iconSortDesc}
                                  iconNoSort={iconNoSort}
                                  direction={
                                    header.column.columnDef.meta?.accessorKey === _sortBy
                                      ? _sortingDirection
                                      : undefined
                                  }
                                />
                              </span>
                            )}
                          </div>
                        </ClickableHeader>
                        {header.column.getCanResize() && (
                          <div
                            {...{
                              onDoubleClick: () => {
                                touchedSizesRef.current[header.column.id] = false;
                                if (header.column.columnDef.size !== undefined) {
                                  header.column.resetSize();
                                } else {
                                  recalculateStarSizes();
                                }
                              },
                              onMouseDown: (event) => {
                                columnSizeTouched(header.column.id);
                                header.getResizeHandler()(event);
                              },
                              onTouchStart: (event) => {
                                columnSizeTouched(header.column.id);
                                header.getResizeHandler()(event);
                              },
                              className: classnames(styles.resizer, {
                                [styles.isResizing]: header.column.getIsResizing(),
                              }),
                            }}
                          />
                        )}
                      </th>
                    );
                  })}
                </tr>
              ))}
            </thead>
          )}
          {hasData && (
            <tbody className={styles.tableBody}>
              {paddingTop > 0 && (
                <tr>
                  <td style={{ height: `${paddingTop}px` }} />
                </tr>
              )}
              {rowVirtualizer.getVirtualItems().map((virtualRow) => {
                const rowIndex = virtualRow.index;
                const row = rows[rowIndex];
                return (
                  <tr
                    data-index={rowIndex}
                    key={`${row.id}-${rowIndex}`}
                    className={classnames(styles.row, {
                      [styles.selected]: row.getIsSelected(),
                      [styles.focused]: focusedIndex === rowIndex,
                      [styles.disabled]: rowDisabledPredicate(row.original),
                      [styles.noBottomBorder]: noBottomBorder,
                    })}
                    ref={(el) => {
                      if (el && estimatedHeightRef.current === null) {
                        estimatedHeightRef.current = Math.round(el.getBoundingClientRect().height);
                      }
                      rowVirtualizer.measureElement(el);
                    }}
                    onClick={(event) => {
                      if (event?.defaultPrevented) {
                        return;
                      }
                      const target = event.target as HTMLElement;
                      if (target.tagName.toLowerCase() === "input") {
                        return;
                      }

                      // Check if click is within checkbox boundary
                      const currentRow = event.currentTarget as HTMLElement;
                      const checkbox = currentRow.querySelector(
                        'input[type="checkbox"]',
                      ) as HTMLInputElement;

                      if (checkbox) {
                        const checkboxRect = checkbox.getBoundingClientRect();
                        const clickX = event.clientX;
                        const clickY = event.clientY;

                        if (
                          isWithinCheckboxBoundary(clickX, clickY, checkboxRect, tolerancePixels)
                        ) {
                          // Toggle the checkbox when clicking within the boundary
                          // In single selection mode, allow deselection by checking if already selected
                          if (!enableMultiRowSelection && row.getIsSelected()) {
                            checkAllRows(false); // Deselect all (which is just this one row)
                          } else {
                            toggleRow(row.original, { metaKey: true });
                          }
                          return;
                        }
                      }

                      toggleRow(row.original, event);
                    }}
                    onMouseMove={(event) => {
                      // Change cursor and hover state when within checkbox boundary
                      const currentRow = event.currentTarget as HTMLElement;
                      const checkbox = currentRow.querySelector(
                        'input[type="checkbox"]',
                      ) as HTMLInputElement;

                      if (checkbox) {
                        const checkboxRect = checkbox.getBoundingClientRect();
                        const mouseX = event.clientX;
                        const mouseY = event.clientY;

                        const shouldShowHover = isWithinCheckboxBoundary(
                          mouseX,
                          mouseY,
                          checkboxRect,
                          tolerancePixels,
                        );

                        // Update hover state and cursor based on proximity to checkbox
                        if (shouldShowHover) {
                          setHoveredRowId(row.id);
                          currentRow.style.cursor = "pointer";
                        } else {
                          setHoveredRowId(null);
                          currentRow.style.cursor = "";
                        }
                      }
                    }}
                    onMouseLeave={(event) => {
                      // Reset cursor and hover state when leaving the row
                      const currentRow = event.currentTarget as HTMLElement;
                      currentRow.style.cursor = "";
                      setHoveredRowId(null);
                    }}
                  >
                    {row.getVisibleCells().map((cell, i) => {
                      const cellRenderer = cell.column.columnDef?.meta?.cellRenderer;
                      const size = cell.column.getSize();
                      const alignmentClass =
                        cellVerticalAlign === "top"
                          ? styles.alignTop
                          : cellVerticalAlign === "bottom"
                            ? styles.alignBottom
                            : styles.alignCenter;
                      return (
                        <td
                          className={classnames(styles.cell, alignmentClass)}
                          key={`${cell.id}-${i}`}
                          style={{
                            // width: size,
                            width: size,
                            ...getCommonPinningStyles(cell.column),
                          }}
                        >
                          {/*we have to wrap it in a div, because tables...

                          The "Last Cell" Problem: Why This Happens
                          Even with box-sizing: border-box, the browser gives special treatment to the last column of a table.

                          With table-layout: fixed, the browser calculates the widths for all columns.
                          It strictly enforces the widths for columns 1, 2, 3, etc.
                          The last column is often used as a "catch-all" to ensure the total width of all columns exactly matches the width of the <table> element itself (e.g., 100%).
                          When you add padding-right to this very last cell, you create a conflict. The browser tries to simultaneously:
                          Keep the cell's right edge perfectly aligned with the table's right edge.
                          Render the padding inside that right edge.

                          Solution: The Inner Wrapper <div>
                          The most robust and common solution is to decouple the cell's width from its content's padding. You do this by adding a wrapper <div> inside the cell.
                          The <td> will be responsible only for setting the rigid width.
                          The inner <div> will be responsible only for handling the padding and content.
                           */}
                          <div className={styles.cellContent}>
                            {cellRenderer
                              ? cellRenderer(cell.row.original, rowIndex, i, cell?.getValue())
                              : (flexRender(
                                  cell.column.columnDef.cell,
                                  cell.getContext(),
                                ) as ReactNode)}
                          </div>
                        </td>
                      );
                    })}
                  </tr>
                );
              })}
              {paddingBottom > 0 && (
                <tr>
                  <td style={{ height: `${paddingBottom}px` }} />
                </tr>
              )}
            </tbody>
          )}
        </table>
        {loading && !hasData && (
          <div className={styles.loadingWrapper}>
            <Spinner />
          </div>
        )}
        {!hideNoDataView &&
          !loading &&
          !hasData &&
          (noDataRenderer ? (
            noDataRenderer()
          ) : (
            <div className={styles.noRows}>No data available</div>
          ))}

        {isPaginated &&
          hasData &&
          rows.length > 0 &&
          pagination &&
          (paginationControlsLocation === "bottom" || paginationControlsLocation === "both") &&
          paginationControls}
      </div>
    );
  },
);

type ClickableHeaderProps = {
  hasSorting?: boolean;
  updateSorting?: () => void;
  children?: ReactNode;
};

function ClickableHeader({ hasSorting, updateSorting, children }: ClickableHeaderProps) {
  return hasSorting ? (
    <button type="button" className={styles.clickableHeader} onClick={updateSorting}>
      {children}
    </button>
  ) : (
    <>{children}</>
  );
}

type ColumnOrderingIndicatorProps = {
  direction?: SortingDirection;
  iconSortAsc?: string;
  iconSortDesc?: string;
  iconNoSort?: string;
};

function ColumnOrderingIndicator({
  direction,
  iconSortAsc = "sortasc:Table",
  iconSortDesc = "sortdesc:Table",
  iconNoSort = "nosort:Table",
}: ColumnOrderingIndicatorProps) {
  if (direction === "ascending") {
    return <Icon name={iconSortAsc} fallback="sortasc" size="12" />; //sortasc
  } else if (direction === "descending") {
    return <Icon name={iconSortDesc} fallback="sortdesc" size="12" />; //sortdesc
  }
  return iconNoSort !== "-" ? (
    <Icon name={iconNoSort} fallback="nosort" size="12" />
  ) : (
    <Icon name={iconNoSort} size="12" />
  ); //nosort
}

export const defaultProps = {
  idKey: "id",
  data: EMPTY_ARRAY,
  columns: EMPTY_ARRAY,
  isPaginated: false,
  loading: false,
  rowsSelectable: false,
  enableMultiRowSelection: true,
  initiallySelected: EMPTY_ARRAY,
  pageSizeOptions: [5, 10, 15],
  sortingDirection: "ascending" as SortingDirection,
  autoFocus: false,
  hideHeader: false,
  hideNoDataView: false,
  alwaysShowSelectionHeader: false,
  noBottomBorder: false,
  paginationControlsLocation: "bottom" as TablePaginationControlsLocation,
  cellVerticalAlign: "center" as CellVerticalAlign,
  showPageInfo: true,
  showPageSizeSelector: true,
  showCurrentPage: true,
  buttonRowPosition: "center" as Position,
  pageSizeSelectorPosition: "start" as Position,
  pageInfoPosition: "end" as Position,
  checkboxTolerance: "compact" as CheckboxTolerance,
};

```

--------------------------------------------------------------------------------
/xmlui/src/components/ComponentProvider.tsx:
--------------------------------------------------------------------------------

```typescript
import type { ReactNode } from "react";
import { useEffect, useState } from "react";

import type {
  ComponentRendererDef,
  ComponentRendererFn,
  CompoundComponentRendererInfo,
} from "../abstractions/RendererDefs";
import type { Behavior } from "../components-core/behaviors/Behavior";
import {
  chStackComponentRenderer,
  cvStackComponentRenderer,
  hStackComponentRenderer,
  stackComponentRenderer,
  vStackComponentRenderer,
} from "./Stack/Stack";
import { responsiveBarComponentRenderer } from "./ResponsiveBar/ResponsiveBar";
import { spaceFillerComponentRenderer } from "./SpaceFiller/SpaceFiller";
import { textAreaComponentRenderer } from "./TextArea/TextArea";
import { navLinkComponentRenderer } from "./NavLink/NavLink";
import { localLinkComponentRenderer } from "./Link/Link";
import { treeComponentRenderer } from "./Tree/TreeComponent";
import { treeDisplayComponentRenderer } from "./TreeDisplay/TreeDisplay";
import { buttonComponentRenderer } from "./Button/Button";
import {
  h1ComponentRenderer,
  h2ComponentRenderer,
  h3ComponentRenderer,
  h4ComponentRenderer,
  h5ComponentRenderer,
  h6ComponentRenderer,
  headingComponentRenderer,
} from "./Heading/Heading";
import { textComponentRenderer } from "./Text/Text";
import { fragmentComponentRenderer } from "./Fragment/Fragment";
import { tableComponentRenderer } from "./Table/Table";
import { stickyBoxComponentRenderer } from "./StickyBox/StickyBox";
import { badgeComponentRenderer } from "./Badge/Badge";
import { avatarComponentRenderer } from "./Avatar/Avatar";
import { contentSeparatorComponentRenderer } from "./ContentSeparator/ContentSeparator";
import { cardComponentRenderer } from "./Card/Card";
import { flowLayoutComponentRenderer } from "./FlowLayout/FlowLayout";
import { modalViewComponentRenderer } from "./ModalDialog/ModalDialog";
import { noResultComponentRenderer } from "./NoResult/NoResult";
import { fileUploadDropZoneComponentRenderer } from "./FileUploadDropZone/FileUploadDropZone";
import { iconComponentRenderer } from "./Icon/Icon";
import { iframeComponentRenderer } from "./IFrame/IFrame";
import { itemsComponentRenderer } from "./Items/Items";
import { selectionStoreComponentRenderer } from "./SelectionStore/SelectionStore";
import { imageComponentRenderer } from "./Image/Image";
import { pageMetaTitleComponentRenderer } from "./PageMetaTitle/PageMetaTitle";
import { progressBarComponentRenderer } from "./ProgressBar/ProgressBar";
import {
  hSplitterComponentRenderer,
  splitterComponentRenderer,
  vSplitterComponentRenderer,
} from "./Splitter/Splitter";
import { queueComponentRenderer } from "./Queue/Queue";
import { CompoundComponent } from "../components-core/CompoundComponent";
import { dynamicHeightListComponentRenderer } from "./List/List";
import { positionedContainerComponentRenderer } from "./PositionedContainer/PositionedContainer";
import { changeListenerComponentRenderer } from "./ChangeListener/ChangeListener";
import { formItemComponentRenderer } from "./FormItem/FormItem";
import { passwordInputComponentRenderer, textBoxComponentRenderer } from "./TextBox/TextBox";
import { realTimeAdapterComponentRenderer } from "./RealTimeAdapter/RealTimeAdapter";
import { formComponentRenderer } from "./Form/Form";
import { emojiSelectorRenderer } from "./EmojiSelector/EmojiSelector";
import { numberBoxComponentRenderer } from "./NumberBox/NumberBox";
import { hoverCardComponentRenderer } from "./HoverCard/HoverCard";
import { appRenderer } from "./App/App";
import { navPanelRenderer } from "./NavPanel/NavPanel";
import { pageRenderer, pagesRenderer } from "./Pages/Pages";
import type {
  ComponentDef,
  ComponentMetadata,
  CompoundComponentDef,
} from "../abstractions/ComponentDefs";
import { footerRenderer } from "./Footer/Footer";
import { navGroupComponentRenderer } from "./NavGroup/NavGroup";
import { logoComponentRenderer } from "./Logo/Logo";
import { radioGroupRenderer } from "./RadioGroup/RadioGroup";
import { radioItemComponentRenderer } from "./RadioGroup/RadioItem";
import { SlotHolder } from "./Slot/Slot";
import { fileInputRenderer } from "./FileInput/FileInput";
import { spinnerComponentRenderer } from "./Spinner/Spinner";
import { markdownComponentRenderer } from "./Markdown/Markdown";
import { selectComponentRenderer } from "./Select/Select";
import { formSectionRenderer } from "./FormSection/FormSection";
import { checkboxComponentRenderer } from "./Checkbox/Checkbox";
import { switchComponentRenderer } from "./Switch/Switch";
import { appHeaderComponentRenderer } from "./AppHeader/AppHeader";
import {
  dropdownMenuComponentRenderer,
  menuItemRenderer,
  menuSeparatorRenderer,
  subMenuItemRenderer,
} from "./DropdownMenu/DropdownMenu";
import { expandableItemComponentRenderer } from "./ExpandableItem/ExpandableItem";
import { themeComponentRenderer } from "./Theme/Theme";
import { merge } from "lodash-es";
import type { ComponentRegistryEntry } from "./ComponentRegistryContext";
import { ComponentRegistryContext } from "./ComponentRegistryContext";
import { columnComponentRenderer } from "./Column/Column";
import type { ActionFunction, ActionRendererDef } from "../abstractions/ActionDefs";
import { apiAction } from "../components-core/action/APICall";
import { downloadAction } from "../components-core/action/FileDownloadAction";
import { uploadAction } from "../components-core/action/FileUploadAction";
import { navigateAction } from "../components-core/action/NavigateAction";
import { timedAction } from "../components-core/action/TimedAction";
import {
  tooltipBehavior,
  animationBehavior,
  labelBehavior,
  variantBehavior,
} from "../components-core/behaviors/CoreBehaviors";
import type {
  LoaderRenderer,
  LoaderRendererDef,
} from "../components-core/abstractions/LoaderRenderer";
import { apiLoaderRenderer } from "../components-core/loader/ApiLoader";
import { externalDataLoaderRenderer } from "../components-core/loader/ExternalDataLoader";
import { mockLoaderRenderer } from "../components-core/loader/MockLoaderRenderer";
import { dataLoaderRenderer } from "../components-core/loader/DataLoader";
import { datePickerComponentRenderer } from "./DatePicker/DatePicker";
import { dateInputComponentRenderer } from "./DateInput/DateInput";
import { timeInputComponentRenderer } from "./TimeInput/TimeInput";
import { timerComponentRenderer } from "./Timer/Timer";
import { redirectRenderer } from "./Redirect/Redirect";
import { tabsComponentRenderer } from "./Tabs/Tabs";
import { bookmarkComponentRenderer } from "./Bookmark/Bookmark";
import { appStateComponentRenderer } from "./AppState/AppState";
import { tableOfContentsRenderer } from "./TableOfContents/TableOfContents";
import { accordionComponentRenderer } from "./Accordion/Accordion";
import { tabItemComponentRenderer } from "./Tabs/TabItem";
import { accordionItemComponentRenderer } from "./Accordion/AccordionItem";
import { sliderComponentRenderer } from "./Slider/Slider";
import { carouselComponentRenderer } from "./Carousel/Carousel";
import { carouselItemComponentRenderer } from "./Carousel/CarouselItem";
import { createPropHolderComponent } from "../components-core/renderers";
import { breakoutComponentRenderer } from "./Breakout/Breakout";
import { toneChangerButtonComponentRenderer } from "./ToneChangerButton/ToneChangerButton";
import { toneSwitchComponentRenderer } from "./ToneSwitch/ToneSwitch";
import { apiCallRenderer } from "./APICall/APICall";
import { optionComponentRenderer } from "./Option/Option";
import { autoCompleteComponentRenderer } from "./AutoComplete/AutoComplete";
import type StandaloneExtensionManager from "../components-core/StandaloneExtensionManager";
import { backdropComponentRenderer } from "./Backdrop/Backdrop";
import type { ThemeDefinition } from "../abstractions/ThemingDefs";
import type { Extension } from "../abstractions/ExtensionDefs";
import {
  htmlAbbrTagRenderer,
  htmlAddressTagRenderer,
  htmlAreaTagRenderer,
  htmlArticleTagRenderer,
  htmlAsideTagRenderer,
  htmlATagRenderer,
  htmlAudioTagRenderer,
  htmlBdiTagRenderer,
  htmlBdoTagRenderer,
  htmlBlockquoteTagRenderer,
  htmlBrTagRenderer,
  htmlBTagRenderer,
  htmlButtonTagRenderer,
  htmlCanvasTagRenderer,
  htmlCaptionTagRenderer,
  htmlCiteTagRenderer,
  htmlCodeTagRenderer,
  htmlColgroupTagRenderer,
  htmlColTagRenderer,
  htmlDatalistTagRenderer,
  htmlDataTagRenderer,
  htmlDdTagRenderer,
  htmlDelTagRenderer,
  htmlDetailsTagRenderer,
  htmlDfnTagRenderer,
  htmlDialogTagRenderer,
  htmlDivTagRenderer,
  htmlDlTagRenderer,
  htmlDtTagRenderer,
  htmlEmbedTagRenderer,
  htmlEMTagRenderer,
  htmlFieldsetTagRenderer,
  htmlFigcaptionTagRenderer,
  htmlFigureTagRenderer,
  htmlFooterTagRenderer,
  htmlFormTagRenderer,
  htmlH1TagRenderer,
  htmlH2TagRenderer,
  htmlH3TagRenderer,
  htmlH4TagRenderer,
  htmlH5TagRenderer,
  htmlH6TagRenderer,
  htmlHeaderTagRenderer,
  htmlHrTagRenderer,
  htmlIframeTagRenderer,
  htmlImgTagRenderer,
  htmlInputTagRenderer,
  htmlInsTagRenderer,
  htmlITagRenderer,
  htmlKbdTagRenderer,
  htmlLabelTagRenderer,
  htmlLegendTagRenderer,
  htmlLiTagRenderer,
  htmlMainTagRenderer,
  htmlMapTagRenderer,
  htmlMarkTagRenderer,
  htmlMenuTagRenderer,
  htmlMeterTagRenderer,
  htmlNavTagRenderer,
  htmlObjectTagRenderer,
  htmlOlTagRenderer,
  htmlOptgroupTagRenderer,
  htmlOptionTagRenderer,
  htmlOutputTagRenderer,
  htmlParamTagRenderer,
  htmlPictureTagRenderer,
  htmlPreTagRenderer,
  htmlProgressTagRenderer,
  htmlPTagRenderer,
  htmlQTagRenderer,
  htmlRpTagRenderer,
  htmlRtTagRenderer,
  htmlRubyTagRenderer,
  htmlSampTagRenderer,
  htmlSectionTagRenderer,
  htmlSelectTagRenderer,
  htmlSmallTagRenderer,
  htmlSourceTagRenderer,
  htmlSpanTagRenderer,
  htmlSTagRenderer,
  htmlStrongTagRenderer,
  htmlSubTagRenderer,
  htmlSummaryTagRenderer,
  htmlSupTagRenderer,
  htmlTableTagRenderer,
  htmlTbodyTagRenderer,
  htmlTdTagRenderer,
  htmlTemplateTagRenderer,
  htmlTextareaTagRenderer,
  htmlTfootTagRenderer,
  htmlTheadTagRenderer,
  htmlThTagRenderer,
  htmlTimeTagRenderer,
  htmlTrackTagRenderer,
  htmlTrTagRenderer,
  htmlUlTagRenderer,
  htmlUTagRenderer,
  htmlVarTagRenderer,
  htmlVideoTagRenderer,
  htmlWbrTagRenderer,
} from "./HtmlTags/HtmlTags";
import { colorPickerComponentRenderer } from "./ColorPicker/ColorPicker";
import { inspectButtonComponentRenderer } from "./InspectButton/InspectButton";
import { nestedAppComponentRenderer } from "./NestedApp/NestedApp";
import { appWithCodeViewComponentRenderer } from "./NestedApp/AppWithCodeView";
import { codeBlockComponentRenderer } from "./CodeBlock/CodeBlock";
import { areaChartComponentRenderer } from "./Charts/AreaChart/AreaChart";
import { barChartComponentRenderer } from "./Charts/BarChart/BarChart";
import { donutChartComponentRenderer } from "./Charts/DonutChart/DonutChart";
import { labelListComponentRenderer } from "./Charts/LabelList/LabelList";
import { legendComponentRenderer } from "./Charts/Legend/Legend";
import { lineChartComponentRenderer } from "./Charts/LineChart/LineChart";
import { pieChartComponentRenderer } from "./Charts/PieChart/PieChart";
import { radarChartComponentRenderer } from "./Charts/RadarChart/RadarChart";

import { paginationComponentRenderer } from "./Pagination/Pagination";
import { tooltipComponentRenderer } from "./Tooltip/Tooltip";

/**
 * The framework has a specialized component concept, the "property holder
 * component." These components only hold property values but do not render
 * anything. The framework processes each of them in a particular way.
 *
 * The property holder components must be registered along with other
 * components, as apps may use them in their markup. The following constant
 * values declare renderer functions for the built-in property holders.
 */
const dataSourcePropHolder = createPropHolderComponent("DataSource");
const textNodePropHolder = createPropHolderComponent("TextNode");
const textNodeCDataPropHolder = createPropHolderComponent("TextNodeCData");

/**
 * Applications can contribute to the registry with their custom (third-party)
 * and application-specific components and others. This type holds the
 * definitions of these extra artifacts.
 */
export type ContributesDefinition = {
  /**
   * Native xmlui components that come with the app.
   */
  components?: ComponentRendererDef[];

  /**
   * Application-specific compound components that come with the app.
   */
  compoundComponents?: CompoundComponentDef[];

  /**
   * Themes that come with the app.
   */
  themes?: ThemeDefinition[];

  /**
   * Custom behaviors that come with the app.
   */
  behaviors?: Behavior[];
};

type ComponentName = {
  name: string;
  namespace: string;
};

const APP_NS = "#app-ns";
const CORE_NS = "#xmlui-core-ns";
const EXTENSIONS_NS = "XMLUIExtensions";

/**
 * This class implements the registry that holds the components available
 * in xmlui. Any component in this registry can be used in the xmlui markup.
 * An error is raised when the markup processor does not find a particular
 * component within the registry.
 */
export class ComponentRegistry {
  // --- The pool of available components
  private pool = new Map<string, Map<string, ComponentRegistryEntry>>(); // namespace -> name -> ComponentRegistryEntry;
  private namePool = new Map<string, ComponentName>();

  // --- The pool of available theme variable names
  private themeVars = new Set<string>();

  // --- Default theme variable values collected from the registered components
  private defaultThemeVars = {};

  // --- The pool of available action functions
  private actionFns = new Map<string, ActionFunction>();

  // --- The pool of available loader renderers
  private loaders = new Map<string, LoaderRenderer<any>>();

  // --- The pool of available behaviors
  private behaviors: Behavior[] = [];

  /**
   * The component constructor registers all xmlui core components, so each
   * registry instance incorporates the framework's core. It also receives a
   * `contributes` argument with information about accompanying (app-specific)
   * components that come with a particular app using the registry.
   * @param contributes Information about the components that come with the app
   * @param extensionManager Optional manager object that receives a notification
   * about component registrations
   */
  constructor(
    contributes: ContributesDefinition = {},
    private readonly extensionManager?: StandaloneExtensionManager,
  ) {
    this.extensionManager = extensionManager;

    // we register these first, so that core components with the same name can override them (without namespace)
    contributes.components?.forEach((renderer) => {
      this.registerAppComponent(renderer);
    });
    contributes.compoundComponents?.forEach((def) => {
      this.registerAppComponent({ compoundComponentDef: def });
    });

    if (process.env.VITE_USED_COMPONENTS_Stack !== "false") {
      this.registerCoreComponent(stackComponentRenderer);
      this.registerCoreComponent(vStackComponentRenderer);
      this.registerCoreComponent(hStackComponentRenderer);
      this.registerCoreComponent(cvStackComponentRenderer);
      this.registerCoreComponent(chStackComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_ResponsiveBar !== "false") {
      this.registerCoreComponent(responsiveBarComponentRenderer);
    }

    this.registerCoreComponent(SlotHolder);
    this.registerCoreComponent(dataSourcePropHolder);
    this.registerCoreComponent(textNodePropHolder);
    this.registerCoreComponent(textNodeCDataPropHolder);
    if (process.env.VITE_USED_COMPONENTS_SpaceFiller !== "false") {
      this.registerCoreComponent(spaceFillerComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_Textarea !== "false") {
      this.registerCoreComponent(textAreaComponentRenderer);
    }

    if (process.env.VITE_USED_COMPONENTS_AppHeader !== "false") {
      this.registerCoreComponent(appHeaderComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_Footer !== "false") {
      this.registerCoreComponent(footerRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_Logo !== "false") {
      this.registerCoreComponent(logoComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_NavLink !== "false") {
      this.registerCoreComponent(navLinkComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_NavGroup !== "false") {
      this.registerCoreComponent(navGroupComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_Link !== "false") {
      this.registerCoreComponent(localLinkComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_Form !== "false") {
      this.registerCoreComponent(formComponentRenderer);
      this.registerCoreComponent(formItemComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_Tree !== "false") {
      this.registerCoreComponent(treeComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_TreeDisplay !== "false") {
      this.registerCoreComponent(treeDisplayComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_Button !== "false") {
      this.registerCoreComponent(buttonComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_Checkbox !== "false") {
      this.registerCoreComponent(checkboxComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_Switch !== "false") {
      this.registerCoreComponent(switchComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_Heading !== "false") {
      this.registerCoreComponent(headingComponentRenderer);
      this.registerCoreComponent(h1ComponentRenderer);
      this.registerCoreComponent(h2ComponentRenderer);
      this.registerCoreComponent(h3ComponentRenderer);
      this.registerCoreComponent(h4ComponentRenderer);
      this.registerCoreComponent(h5ComponentRenderer);
      this.registerCoreComponent(h6ComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_Text !== "false") {
      this.registerCoreComponent(textComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_Fragment !== "false") {
      this.registerCoreComponent(fragmentComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_Table !== "false") {
      this.registerCoreComponent(tableComponentRenderer);
      this.registerCoreComponent(columnComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_List !== "false") {
      this.registerCoreComponent(dynamicHeightListComponentRenderer);
    }

    if (process.env.VITE_USED_COMPONENTS_App !== "false") {
      this.registerCoreComponent(appRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_NavPanel !== "false") {
      this.registerCoreComponent(navPanelRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_Pages !== "false") {
      this.registerCoreComponent(pagesRenderer);
      this.registerCoreComponent(pageRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_Redirect !== "false") {
      this.registerCoreComponent(redirectRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_StickyBox !== "false") {
      this.registerCoreComponent(stickyBoxComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_Badge !== "false") {
      this.registerCoreComponent(badgeComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_SimpleTooltip !== "false") {
      this.registerCoreComponent(tooltipComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_Avatar !== "false") {
      this.registerCoreComponent(avatarComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_ContentSeparator !== "false") {
      this.registerCoreComponent(contentSeparatorComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_Card !== "false") {
      this.registerCoreComponent(cardComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_ColorPicker !== "false") {
      this.registerCoreComponent(colorPickerComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_FlowLayout !== "false") {
      this.registerCoreComponent(flowLayoutComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_ModalDialog !== "false") {
      this.registerCoreComponent(modalViewComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_NoResult !== "false") {
      this.registerCoreComponent(noResultComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_Option !== "false") {
      this.registerCoreComponent(optionComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_TabItem !== "false") {
      this.registerCoreComponent(tabItemComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_AccordionItem !== "false") {
      this.registerCoreComponent(accordionItemComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_CarouselItem !== "false") {
      this.registerCoreComponent(carouselItemComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_FileUploadDropZone !== "false") {
      this.registerCoreComponent(fileUploadDropZoneComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_Icon !== "false") {
      this.registerCoreComponent(iconComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_Items !== "false") {
      this.registerCoreComponent(itemsComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_SelectionStore !== "false") {
      this.registerCoreComponent(selectionStoreComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_Image !== "false") {
      this.registerCoreComponent(imageComponentRenderer);
    }
    if (process.env.VITE_USED_COMPONENTS_IFrame !== "false") {
      this.registerCoreComponent(iframeComponentRenderer);
    }

    if (process.env.VITE_USED_COMPONENTS_Markdown !== "false") {
      this.registerCoreComponent(markdownComponentRenderer);
    }

    if (process.env.VITE_USED_COMPONENTS_Pagination !== "false") {
      this.registerCoreComponent(paginationComponentRenderer);
    }

    if (process.env.VITE_USED_COMPONENTS_Charts !== "false") {
      this.registerCoreComponent(areaChartComponentRenderer);
      this.registerCoreComponent(barChartComponentRenderer);
      this.registerCoreComponent(donutChartComponentRenderer);
      this.registerCoreComponent(labelListComponentRenderer);
      this.registerCoreComponent(legendComponentRenderer);
      this.registerCoreComponent(lineChartComponentRenderer);
      this.registerCoreComponent(pieChartComponentRenderer);
      this.registerCoreComponent(radarChartComponentRenderer);
    }

    if (process.env.VITE_USED_COMPONENTS_EmojiSelector !== "false") {
      this.registerCoreComponent(emojiSelectorRenderer);
    }

    if (process.env.VITE_USED_COMPONENTS_DatePicker !== "false") {
      this.registerCoreComponent(datePickerComponentRenderer);
      this.registerCoreComponent(dateInputComponentRenderer);
      this.registerCoreComponent(timeInputComponentRenderer);
      this.registerCoreComponent(timerComponentRenderer);
    }

    if (process.env.VITE_INCLUDE_REST_COMPONENTS !== "false") {
      //TODO, if it proves to be a working solution, make these components skippable, too
      this.registerCoreComponent(pageMetaTitleComponentRenderer);
      this.registerCoreComponent(progressBarComponentRenderer);
      this.registerCoreComponent(splitterComponentRenderer);
      this.registerCoreComponent(vSplitterComponentRenderer);
      this.registerCoreComponent(hSplitterComponentRenderer);
      this.registerCoreComponent(queueComponentRenderer);
      this.registerCoreComponent(positionedContainerComponentRenderer);
      this.registerCoreComponent(changeListenerComponentRenderer);
      this.registerCoreComponent(realTimeAdapterComponentRenderer);
      this.registerCoreComponent(textBoxComponentRenderer);
      this.registerCoreComponent(passwordInputComponentRenderer);
      this.registerCoreComponent(numberBoxComponentRenderer);
      this.registerCoreComponent(hoverCardComponentRenderer);
      this.registerCoreComponent(radioGroupRenderer);
      this.registerCoreComponent(radioItemComponentRenderer);
      this.registerCoreComponent(fileInputRenderer);
      this.registerCoreComponent(spinnerComponentRenderer);
      this.registerCoreComponent(selectComponentRenderer);
      this.registerCoreComponent(autoCompleteComponentRenderer);
      this.registerCoreComponent(dropdownMenuComponentRenderer);
      this.registerCoreComponent(toneChangerButtonComponentRenderer);
      this.registerCoreComponent(toneSwitchComponentRenderer);
      this.registerCoreComponent(inspectButtonComponentRenderer);
      this.registerCoreComponent(formSectionRenderer);
      this.registerCoreComponent(dropdownMenuComponentRenderer);
      this.registerCoreComponent(menuItemRenderer);
      this.registerCoreComponent(subMenuItemRenderer);
      this.registerCoreComponent(menuSeparatorRenderer);
      this.registerCoreComponent(expandableItemComponentRenderer);
      this.registerCoreComponent(tabsComponentRenderer);
      this.registerCoreComponent(bookmarkComponentRenderer);
      this.registerCoreComponent(tableOfContentsRenderer);
      this.registerCoreComponent(codeBlockComponentRenderer);
      // --- Nested app and related components
      this.registerCoreComponent(nestedAppComponentRenderer);
      this.registerCoreComponent(appWithCodeViewComponentRenderer);
      // --- New Bootstrap-inspired components
      this.registerCoreComponent(carouselComponentRenderer);
      this.registerCoreComponent(accordionComponentRenderer);
      this.registerCoreComponent(sliderComponentRenderer);
      this.registerCoreComponent(backdropComponentRenderer);
    }
    this.registerCoreComponent(breakoutComponentRenderer);
    this.registerCoreComponent(themeComponentRenderer);
    this.registerCoreComponent(appStateComponentRenderer);
    this.registerCoreComponent(apiCallRenderer);

    if (process.env.VITE_INCLUDE_HTML_COMPONENTS !== "false") {
      this.registerCoreComponent(htmlATagRenderer);
      this.registerCoreComponent(htmlAbbrTagRenderer);
      this.registerCoreComponent(htmlAddressTagRenderer);
      this.registerCoreComponent(htmlAreaTagRenderer);
      this.registerCoreComponent(htmlArticleTagRenderer);
      this.registerCoreComponent(htmlAsideTagRenderer);
      this.registerCoreComponent(htmlAudioTagRenderer);
      this.registerCoreComponent(htmlBTagRenderer);
      this.registerCoreComponent(htmlBdiTagRenderer);
      this.registerCoreComponent(htmlBdoTagRenderer);
      this.registerCoreComponent(htmlBlockquoteTagRenderer);
      this.registerCoreComponent(htmlBrTagRenderer);
      this.registerCoreComponent(htmlButtonTagRenderer);
      this.registerCoreComponent(htmlCanvasTagRenderer);
      this.registerCoreComponent(htmlCaptionTagRenderer);
      this.registerCoreComponent(htmlCiteTagRenderer);
      this.registerCoreComponent(htmlCodeTagRenderer);
      this.registerCoreComponent(htmlColTagRenderer);
      this.registerCoreComponent(htmlColgroupTagRenderer);
      this.registerCoreComponent(htmlDataTagRenderer);
      this.registerCoreComponent(htmlDatalistTagRenderer);
      this.registerCoreComponent(htmlDdTagRenderer);
      this.registerCoreComponent(htmlDelTagRenderer);
      this.registerCoreComponent(htmlDetailsTagRenderer);
      this.registerCoreComponent(htmlDfnTagRenderer);
      this.registerCoreComponent(htmlDialogTagRenderer);
      this.registerCoreComponent(htmlDivTagRenderer);
      this.registerCoreComponent(htmlDlTagRenderer);
      this.registerCoreComponent(htmlDtTagRenderer);
      this.registerCoreComponent(htmlEMTagRenderer);
      this.registerCoreComponent(htmlEmbedTagRenderer);
      this.registerCoreComponent(htmlFieldsetTagRenderer);
      this.registerCoreComponent(htmlFigcaptionTagRenderer);
      this.registerCoreComponent(htmlFigureTagRenderer);
      this.registerCoreComponent(htmlFooterTagRenderer);
      this.registerCoreComponent(htmlFormTagRenderer);
      this.registerCoreComponent(htmlH1TagRenderer);
      this.registerCoreComponent(htmlH2TagRenderer);
      this.registerCoreComponent(htmlH3TagRenderer);
      this.registerCoreComponent(htmlH4TagRenderer);
      this.registerCoreComponent(htmlH5TagRenderer);
      this.registerCoreComponent(htmlH6TagRenderer);
      this.registerCoreComponent(htmlHeaderTagRenderer);
      this.registerCoreComponent(htmlHrTagRenderer);
      this.registerCoreComponent(htmlITagRenderer);
      this.registerCoreComponent(htmlIframeTagRenderer);
      this.registerCoreComponent(htmlImgTagRenderer);
      this.registerCoreComponent(htmlInputTagRenderer);
      this.registerCoreComponent(htmlInsTagRenderer);
      this.registerCoreComponent(htmlKbdTagRenderer);
      this.registerCoreComponent(htmlLabelTagRenderer);
      this.registerCoreComponent(htmlLegendTagRenderer);
      this.registerCoreComponent(htmlLiTagRenderer);
      this.registerCoreComponent(htmlMainTagRenderer);
      this.registerCoreComponent(htmlMapTagRenderer);
      this.registerCoreComponent(htmlMarkTagRenderer);
      this.registerCoreComponent(htmlMenuTagRenderer);
      this.registerCoreComponent(htmlMeterTagRenderer);
      this.registerCoreComponent(htmlNavTagRenderer);
      this.registerCoreComponent(htmlObjectTagRenderer);
      this.registerCoreComponent(htmlOlTagRenderer);
      this.registerCoreComponent(htmlOptgroupTagRenderer);
      this.registerCoreComponent(htmlOptionTagRenderer);
      this.registerCoreComponent(htmlOutputTagRenderer);
      this.registerCoreComponent(htmlPTagRenderer);
      this.registerCoreComponent(htmlParamTagRenderer);
      this.registerCoreComponent(htmlPictureTagRenderer);
      this.registerCoreComponent(htmlPreTagRenderer);
      this.registerCoreComponent(htmlProgressTagRenderer);
      this.registerCoreComponent(htmlQTagRenderer);
      this.registerCoreComponent(htmlRpTagRenderer);
      this.registerCoreComponent(htmlRtTagRenderer);
      this.registerCoreComponent(htmlRubyTagRenderer);
      this.registerCoreComponent(htmlSTagRenderer);
      this.registerCoreComponent(htmlSampTagRenderer);
      this.registerCoreComponent(htmlSectionTagRenderer);
      this.registerCoreComponent(htmlSelectTagRenderer);
      this.registerCoreComponent(htmlSmallTagRenderer);
      this.registerCoreComponent(htmlSourceTagRenderer);
      this.registerCoreComponent(htmlSpanTagRenderer);
      this.registerCoreComponent(htmlStrongTagRenderer);
      this.registerCoreComponent(htmlSubTagRenderer);
      this.registerCoreComponent(htmlSummaryTagRenderer);
      this.registerCoreComponent(htmlSupTagRenderer);
      this.registerCoreComponent(htmlTableTagRenderer);
      this.registerCoreComponent(htmlTbodyTagRenderer);
      this.registerCoreComponent(htmlTdTagRenderer);
      this.registerCoreComponent(htmlTemplateTagRenderer);
      this.registerCoreComponent(htmlTextareaTagRenderer);
      this.registerCoreComponent(htmlTfootTagRenderer);
      this.registerCoreComponent(htmlThTagRenderer);
      this.registerCoreComponent(htmlTheadTagRenderer);
      this.registerCoreComponent(htmlTimeTagRenderer);
      this.registerCoreComponent(htmlTrTagRenderer);
      this.registerCoreComponent(htmlTrackTagRenderer);
      this.registerCoreComponent(htmlUTagRenderer);
      this.registerCoreComponent(htmlUlTagRenderer);
      this.registerCoreComponent(htmlVarTagRenderer);
      this.registerCoreComponent(htmlVideoTagRenderer);
      this.registerCoreComponent(htmlWbrTagRenderer);
      this.registerCoreComponent(htmlATagRenderer);
      this.registerCoreComponent(htmlAbbrTagRenderer);
      this.registerCoreComponent(htmlAddressTagRenderer);
      this.registerCoreComponent(htmlAreaTagRenderer);
      this.registerCoreComponent(htmlArticleTagRenderer);
      this.registerCoreComponent(htmlAsideTagRenderer);
      this.registerCoreComponent(htmlAudioTagRenderer);
      this.registerCoreComponent(htmlBTagRenderer);
      this.registerCoreComponent(htmlBdiTagRenderer);
      this.registerCoreComponent(htmlBdoTagRenderer);
      this.registerCoreComponent(htmlBlockquoteTagRenderer);
      this.registerCoreComponent(htmlBrTagRenderer);
      this.registerCoreComponent(htmlButtonTagRenderer);
      this.registerCoreComponent(htmlCanvasTagRenderer);
      this.registerCoreComponent(htmlCaptionTagRenderer);
      this.registerCoreComponent(htmlCiteTagRenderer);
      this.registerCoreComponent(htmlCodeTagRenderer);
      this.registerCoreComponent(htmlColTagRenderer);
      this.registerCoreComponent(htmlColgroupTagRenderer);
      this.registerCoreComponent(htmlDataTagRenderer);
      this.registerCoreComponent(htmlDatalistTagRenderer);
      this.registerCoreComponent(htmlDdTagRenderer);
      this.registerCoreComponent(htmlDelTagRenderer);
      this.registerCoreComponent(htmlDetailsTagRenderer);
      this.registerCoreComponent(htmlDfnTagRenderer);
      this.registerCoreComponent(htmlDialogTagRenderer);
      this.registerCoreComponent(htmlDivTagRenderer);
      this.registerCoreComponent(htmlDlTagRenderer);
      this.registerCoreComponent(htmlDtTagRenderer);
      this.registerCoreComponent(htmlEMTagRenderer);
      this.registerCoreComponent(htmlEmbedTagRenderer);
      this.registerCoreComponent(htmlFieldsetTagRenderer);
      this.registerCoreComponent(htmlFigcaptionTagRenderer);
      this.registerCoreComponent(htmlFigureTagRenderer);
      this.registerCoreComponent(htmlFooterTagRenderer);
      this.registerCoreComponent(htmlFormTagRenderer);
      this.registerCoreComponent(htmlH1TagRenderer);
      this.registerCoreComponent(htmlH2TagRenderer);
      this.registerCoreComponent(htmlH3TagRenderer);
      this.registerCoreComponent(htmlH4TagRenderer);
      this.registerCoreComponent(htmlH5TagRenderer);
      this.registerCoreComponent(htmlH6TagRenderer);
      this.registerCoreComponent(htmlHeaderTagRenderer);
      this.registerCoreComponent(htmlHrTagRenderer);
      this.registerCoreComponent(htmlITagRenderer);
      this.registerCoreComponent(htmlIframeTagRenderer);
      this.registerCoreComponent(htmlImgTagRenderer);
      this.registerCoreComponent(htmlInputTagRenderer);
      this.registerCoreComponent(htmlInsTagRenderer);
      this.registerCoreComponent(htmlKbdTagRenderer);
      this.registerCoreComponent(htmlLabelTagRenderer);
      this.registerCoreComponent(htmlLegendTagRenderer);
      this.registerCoreComponent(htmlLiTagRenderer);
      this.registerCoreComponent(htmlMainTagRenderer);
      this.registerCoreComponent(htmlMapTagRenderer);
      this.registerCoreComponent(htmlMarkTagRenderer);
      this.registerCoreComponent(htmlMenuTagRenderer);
      this.registerCoreComponent(htmlMeterTagRenderer);
      this.registerCoreComponent(htmlNavTagRenderer);
      this.registerCoreComponent(htmlObjectTagRenderer);
      this.registerCoreComponent(htmlOlTagRenderer);
      this.registerCoreComponent(htmlOptgroupTagRenderer);
      this.registerCoreComponent(htmlOptionTagRenderer);
      this.registerCoreComponent(htmlOutputTagRenderer);
      this.registerCoreComponent(htmlPTagRenderer);
      this.registerCoreComponent(htmlParamTagRenderer);
      this.registerCoreComponent(htmlPictureTagRenderer);
      this.registerCoreComponent(htmlPreTagRenderer);
      this.registerCoreComponent(htmlProgressTagRenderer);
      this.registerCoreComponent(htmlQTagRenderer);
      this.registerCoreComponent(htmlRpTagRenderer);
      this.registerCoreComponent(htmlRtTagRenderer);
      this.registerCoreComponent(htmlRubyTagRenderer);
      this.registerCoreComponent(htmlSTagRenderer);
      this.registerCoreComponent(htmlSampTagRenderer);
      this.registerCoreComponent(htmlSectionTagRenderer);
      this.registerCoreComponent(htmlSelectTagRenderer);
      this.registerCoreComponent(htmlSmallTagRenderer);
      this.registerCoreComponent(htmlSourceTagRenderer);
      this.registerCoreComponent(htmlSpanTagRenderer);
      this.registerCoreComponent(htmlStrongTagRenderer);
      this.registerCoreComponent(htmlSubTagRenderer);
      this.registerCoreComponent(htmlSummaryTagRenderer);
      this.registerCoreComponent(htmlSupTagRenderer);
      this.registerCoreComponent(htmlTableTagRenderer);
      this.registerCoreComponent(htmlTbodyTagRenderer);
      this.registerCoreComponent(htmlTdTagRenderer);
      this.registerCoreComponent(htmlTemplateTagRenderer);
      this.registerCoreComponent(htmlTextareaTagRenderer);
      this.registerCoreComponent(htmlTfootTagRenderer);
      this.registerCoreComponent(htmlThTagRenderer);
      this.registerCoreComponent(htmlTheadTagRenderer);
      this.registerCoreComponent(htmlTimeTagRenderer);
      this.registerCoreComponent(htmlTrTagRenderer);
      this.registerCoreComponent(htmlTrackTagRenderer);
      this.registerCoreComponent(htmlUTagRenderer);
      this.registerCoreComponent(htmlUlTagRenderer);
      this.registerCoreComponent(htmlVarTagRenderer);
      this.registerCoreComponent(htmlVideoTagRenderer);
      this.registerCoreComponent(htmlWbrTagRenderer);
    }

    this.registerActionFn(apiAction);
    this.registerActionFn(downloadAction);
    this.registerActionFn(uploadAction);
    this.registerActionFn(navigateAction);
    this.registerActionFn(timedAction);

    this.registerLoaderRenderer(apiLoaderRenderer);
    this.registerLoaderRenderer(externalDataLoaderRenderer);
    this.registerLoaderRenderer(mockLoaderRenderer);
    this.registerLoaderRenderer(dataLoaderRenderer);

    this.registerBehavior(variantBehavior);
    this.registerBehavior(tooltipBehavior);
    this.registerBehavior(animationBehavior);
    this.registerBehavior(labelBehavior);

    // Register external behaviors from contributes
    contributes.behaviors?.forEach((behavior) => {
      this.registerBehavior(behavior);
    });

    this.extensionManager?.subscribeToRegistrations(this.extensionRegistered);
  }

  /**
   * All theme variables used by the registered components.
   */
  get componentThemeVars() {
    return this.themeVars;
  }

  /**
   * The default values of theme variables used by the registered components.
   */
  get componentDefaultThemeVars() {
    return this.defaultThemeVars;
  }

  /**
   * All action functions registered in the component registry.
   */
  get actionFunctions(): Map<string, ActionFunction> {
    return this.actionFns;
  }

  /**
   * This method retrieves the registry entry of a component registered
   * with the specified key.
   * @param componentName The unique ID of the component
   * @returns The component registry entry, if found; otherwise, undefined.
   */
  lookupComponentRenderer(componentName: string): ComponentRegistryEntry | undefined {
    if (!componentName) {
      return undefined;
    }
    // componentName without namespace, 1. core, 2. app, 3. XMLUIExtension
    if (!componentName.includes(".")) {
      return (
        this.pool.get(CORE_NS)?.get(componentName) ||
        this.pool.get(APP_NS)?.get(componentName) ||
        this.pool.get(EXTENSIONS_NS)?.get(componentName)
      );
    }

    // order: componentName includes namespace, find in that pool
    const nameInfo = this.namePool.get(componentName);
    if (!nameInfo) {
      return undefined;
    }
    return this.pool.get(nameInfo.namespace)?.get(nameInfo.name);
  }

  /**
   * This method retrieves the registry entry of an action registered
   * with the specified key.
   * @param actionType The unique ID of the action
   * @returns The action registry entry, if found; otherwise, undefined.
   */
  lookupAction(actionType: string): ActionFunction | undefined {
    return this.actionFns.get(actionType);
  }

  /**
   * This method retrieves the registry entry of a loader registered with the
   * specified key.
   * @param type The unique ID of the loader
   * @returns The loader registry entry, if found; otherwise, undefined.
   */
  lookupLoaderRenderer(type: string): LoaderRenderer<any> | undefined {
    return this.loaders.get(type);
  }

  /**
   * This method checks whether a component with the specified key is
   * registered in the component registry.
   * @param componentName The unique ID of the component
   * @returns True if the component is registered; otherwise, false.
   */
  hasComponent(componentName: string) {
    return (
      this.lookupComponentRenderer(componentName) !== undefined ||
      this.loaders.get(componentName) !== undefined ||
      this.actionFns.get(componentName) !== undefined
    );
  }

  // --- Registers a loader renderer using its definition
  registerLoaderRenderer({ type, renderer }: LoaderRendererDef) {
    this.loaders.set(type, renderer);
  }

  /**
   * This method destroys the component registry; It unsubscribes from the component manager.
   * This method is called when the component registry is no longer needed, e.g., when the
   * component provider is unmounted (HMR).
   */
  destroy() {
    this.extensionManager?.unSubscribeFromRegistrations(this.extensionRegistered);
  }

  getExtensionManager() {
    return this.extensionManager;
  }

  private extensionRegistered = (extension: Extension) => {
    extension.components?.forEach((c) => {
      if ("type" in c) {
        // --- This is a regular component
        this.registerComponentRenderer(c, extension.namespace);
      } else if ("compoundComponentDef" in c) {
        // --- This is a user defined component
        this.registerCompoundComponentRenderer(c, extension.namespace);
      }
    });
  };

  // --- Registers a renderable component using its renderer function

  private registerCoreComponent = (
    component: ComponentRendererDef | CompoundComponentRendererInfo,
  ) => {
    if ("compoundComponentDef" in component) {
      this.registerCompoundComponentRenderer(component, CORE_NS);
    } else {
      this.registerComponentRenderer(component, CORE_NS);
    }
  };

  private registerAppComponent = (
    component: ComponentRendererDef | CompoundComponentRendererInfo,
  ) => {
    if ("compoundComponentDef" in component) {
      this.registerCompoundComponentRenderer(component, APP_NS);
    } else {
      this.registerComponentRenderer(component, APP_NS);
    }
  };

  // --- and metadata
  private registerComponentRenderer = (
    {
      type,
      renderer,
      metadata,
      isCompoundComponent,
    }: {
      type: string;
      renderer: ComponentRendererFn<any>;
      isCompoundComponent?: boolean;
      metadata?: ComponentMetadata;
    },
    namespace: string,
  ) => {
    const component: ComponentRegistryEntry = {
      renderer,
      descriptor: metadata,
      isCompoundComponent,
    };
    const fullName = `${namespace}.${type}`;
    if (!this.pool.has(namespace)) {
      this.pool.set(namespace, new Map());
    }
    this.pool.get(namespace).set(type, component);
    this.namePool.set(fullName, { name: type, namespace });
    if (metadata?.themeVars) {
      Object.keys(metadata.themeVars).forEach((key) => this.themeVars.add(key));
    }
    if (metadata?.defaultThemeVars) {
      merge(this.defaultThemeVars, metadata?.defaultThemeVars);
    }
  };

  // --- Registers a compound component using its definition and metadata
  private registerCompoundComponentRenderer(
    { compoundComponentDef, metadata }: CompoundComponentRendererInfo,
    namespace: string,
  ) {
    const component = {
      type: compoundComponentDef.name,
      renderer: (rendererContext: any) => {
        return (
          <CompoundComponent
            api={compoundComponentDef.api}
            scriptCollected={compoundComponentDef.component.scriptCollected}
            compound={compoundComponentDef.component as ComponentDef}
            {...rendererContext}
          />
        );
      },
      isCompoundComponent: true,
      metadata,
    };

    this.registerComponentRenderer(component, namespace);
  }

  // --- Registers an action function using its definition
  private registerActionFn({ actionName: functionName, actionFn }: ActionRendererDef) {
    this.actionFns.set(functionName, actionFn);
  }

  // --- Registers a behavior
  private registerBehavior(
    behavior: Behavior,
    location: "before" | "after" = "after",
    position?: string,
  ) {
    // If position is specified, insert relative to that behavior
    if (position) {
      const targetIndex = this.behaviors.findIndex((b) => b.name === position);
      if (targetIndex !== -1) {
        const insertIndex = location === "before" ? targetIndex : targetIndex + 1;
        this.behaviors.splice(insertIndex, 0, behavior);
        return;
      }
    }

    // Default: append to the end
    this.behaviors.push(behavior);
  }

  // --- Returns all registered behaviors
  getBehaviors(): Behavior[] {
    return this.behaviors;
  }
}

// --- Properties used by the ComponentProvider
type ComponentProviderProps = {
  // --- Child components to render
  children: ReactNode;

  // --- Definition of contributors
  contributes: ContributesDefinition;

  // --- The component manager instance used to manage components
  extensionManager?: StandaloneExtensionManager;
};

/**
 * This React component provides a context in which components can access the
 * component registry. The component ensures that child components are not
 * rendered before the component registry is initialized.
 */
export function ComponentProvider({
  children,
  contributes,
  extensionManager,
}: ComponentProviderProps) {
  const [componentRegistry, setComponentRegistry] = useState(
    () => new ComponentRegistry(contributes, extensionManager),
  );
  // --- Make sure the component registry is updated when the contributes or
  // --- component manager changes (e.g., due to HMR).
  useEffect(() => {
    setComponentRegistry((prev) => {
      prev.destroy();
      return new ComponentRegistry(contributes, extensionManager);
    });
  }, [extensionManager, contributes]);

  return (
    <ComponentRegistryContext.Provider value={componentRegistry}>
      {children}
    </ComponentRegistryContext.Provider>
  );
}

```

