This is page 106 of 169. Use http://codebase.md/xmlui-org/xmlui/assets/img/%7Burl%7D?lines=false&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ ├── clean-turtles-grow.md
│ ├── config.json
│ ├── evil-carrots-hang.md
│ ├── icy-lizards-mate.md
│ ├── shy-boats-smash.md
│ ├── smooth-worms-march.md
│ ├── twelve-cameras-march.md
│ ├── weak-stars-stick.md
│ └── young-melons-dance.md
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-blog-optimized.yml
│ ├── deploy-blog.yml
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs-preview.yml
│ ├── deploy-docs.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests-fast.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .npmrc
├── .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
│ │ │ ├── icons
│ │ │ │ ├── github.svg
│ │ │ │ └── rss.svg
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ ├── rss.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── staticwebapp.config.json
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ ├── LinkButton.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ └── Separator.xmlui
│ │ ├── config.ts
│ │ └── Main.xmlui
│ └── 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
│ │ │ ├── ResponsiveBar.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
│ │ └── 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
│ │ │ ├── buffer-a-reactive-edit.md
│ │ │ ├── chain-a-refetch.md
│ │ │ ├── control-cache-invalidation.md
│ │ │ ├── copy-billing-to-shipping.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
│ │ │ ├── implement-an-authentication-gate.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
│ │ │ ├── set-width-for-input-fields-in-a-horizontal-layout.md
│ │ │ ├── share-a-modaldialog-across-components.md
│ │ │ ├── sync-selections-between-table-and-list-views.md
│ │ │ ├── update-ui-optimistically.md
│ │ │ ├── use-accessors-to-simplify-complex-expressions.md
│ │ │ ├── use-built-in-form-validation.md
│ │ │ ├── use-modal-dialog-onclose.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
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── 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
│ │ │ ├── icons
│ │ │ │ ├── github.svg
│ │ │ │ └── rss.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
│ │ └── staticwebapp.config.json
│ ├── 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
│ │ │ ├── LinkButton.xmlui
│ │ │ ├── NameValue.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ ├── PaletteItem.xmlui
│ │ │ ├── Palettes.xmlui
│ │ │ ├── SectionHeader.xmlui
│ │ │ ├── Separator.xmlui
│ │ │ ├── TBD.xmlui
│ │ │ ├── Test.xmlui
│ │ │ ├── ThemesIntro.xmlui
│ │ │ ├── ThousandThemes.xmlui
│ │ │ ├── TubeStops.xmlui
│ │ │ ├── TubeStops.xmlui.xs
│ │ │ └── TwoColumnCode.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── 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
│ └── 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
│ ├── conv-create-components.md
│ ├── conv-e2e-testing.md
│ ├── data-operations.md
│ ├── font-size.md
│ ├── form-infrastructure-issues.md
│ ├── form-infrastructure.md
│ ├── glossary.md
│ ├── images
│ │ ├── condensed-layout-content-scroll-no-gutters-bottom.svg
│ │ ├── condensed-layout-content-scroll-no-gutters-no-overflow.svg
│ │ ├── condensed-layout-content-scroll-no-gutters-top.svg
│ │ ├── condensed-layout-content-scroll-with-gutters-bottom.svg
│ │ ├── condensed-layout-content-scroll-with-gutters-no-overflow.svg
│ │ ├── condensed-layout-content-scroll-with-gutters-top.svg
│ │ ├── condensed-layout-no-gutters-bottom.svg
│ │ ├── condensed-layout-no-gutters-mid.svg
│ │ ├── condensed-layout-no-gutters-top.svg
│ │ ├── condensed-layout-no-overflow.svg
│ │ ├── condensed-layout-with-gutters-bottom.svg
│ │ ├── condensed-layout-with-gutters-no-overflow.svg
│ │ ├── condensed-layout-with-gutters-top.svg
│ │ ├── condensed-sticky-content-scroll-no-gutters-bottom.svg
│ │ ├── condensed-sticky-content-scroll-no-gutters-no-overflow.svg
│ │ ├── condensed-sticky-content-scroll-no-gutters-top.svg
│ │ ├── condensed-sticky-content-scroll-with-gutters-bottom.svg
│ │ ├── condensed-sticky-content-scroll-with-gutters-no-overflow.svg
│ │ ├── condensed-sticky-content-scroll-with-gutters-top.svg
│ │ ├── condensed-sticky-layout-no-gutters-bottom.svg
│ │ ├── condensed-sticky-layout-no-gutters-top.svg
│ │ ├── condensed-sticky-layout-no-overflow.svg
│ │ ├── condensed-sticky-layout-with-gutters-bottom.svg
│ │ ├── condensed-sticky-layout-with-gutters-no-overflow.svg
│ │ ├── condensed-sticky-layout-with-gutters-top.svg
│ │ ├── desktop-layout-no-overflow.svg
│ │ ├── desktop-layout-overflow-bottom.svg
│ │ ├── desktop-layout-overflow-top.svg
│ │ ├── horizontal-layout-content-scroll-no-gutters-bottom.svg
│ │ ├── horizontal-layout-content-scroll-no-gutters-top.svg
│ │ ├── horizontal-layout-content-scroll-no-gutters.svg
│ │ ├── horizontal-layout-content-scroll-with-gutters-bottom.svg
│ │ ├── horizontal-layout-content-scroll-with-gutters-diagram.svg
│ │ ├── horizontal-layout-content-scroll-with-gutters-top.svg
│ │ ├── horizontal-layout-diagram.svg
│ │ ├── horizontal-layout-no-gutters-overflow-scrollbar-bottom.svg
│ │ ├── horizontal-layout-no-gutters-overflow-scrollbar-top.svg
│ │ ├── horizontal-layout-overflow-scrollbar-bottom.svg
│ │ ├── horizontal-layout-overflow-scrollbar-nogutter-bottom.svg
│ │ ├── horizontal-layout-overflow-scrollbar-nogutter-mid.svg
│ │ ├── horizontal-layout-overflow-scrollbar-top.svg
│ │ ├── horizontal-layout-with-gutters-diagram.svg
│ │ ├── horizontal-sticky-content-scroll-no-gutters-bottom.svg
│ │ ├── horizontal-sticky-content-scroll-no-gutters-top.svg
│ │ ├── horizontal-sticky-content-scroll-no-gutters.svg
│ │ ├── horizontal-sticky-content-scroll-with-gutters-bottom.svg
│ │ ├── horizontal-sticky-content-scroll-with-gutters-top.svg
│ │ ├── horizontal-sticky-content-scroll-with-gutters.svg
│ │ ├── horizontal-sticky-layout-overflow-bottom.svg
│ │ ├── horizontal-sticky-layout-overflow-top.svg
│ │ ├── horizontal-sticky-layout-with-gutters-bottom-scroll.svg
│ │ ├── horizontal-sticky-layout-with-gutters-mid-scroll.svg
│ │ ├── horizontal-sticky-layout-with-gutters-no-overflow.svg
│ │ ├── horizontal-sticky-layout-with-gutters-overflow-bottom.svg
│ │ ├── horizontal-sticky-layout-with-gutters-overflow-mid.svg
│ │ ├── horizontal-sticky-layout-with-gutters-overflow-top.svg
│ │ ├── horizontal-sticky-layout-with-gutters.svg
│ │ ├── horizontal-sticky-layout.svg
│ │ ├── vertical-full-header-content-scroll-no-gutters-overflow-bottom.svg
│ │ ├── vertical-full-header-content-scroll-no-gutters-overflow-top.svg
│ │ ├── vertical-full-header-content-scroll-no-gutters.svg
│ │ ├── vertical-full-header-content-scroll-with-gutters-overflow-bottom.svg
│ │ ├── vertical-full-header-content-scroll-with-gutters-overflow-top.svg
│ │ ├── vertical-full-header-content-scroll-with-gutters.svg
│ │ ├── vertical-full-header-layout-no-gutters-overflow-bottom.svg
│ │ ├── vertical-full-header-layout-no-gutters-overflow-top.svg
│ │ ├── vertical-full-header-layout-no-gutters.svg
│ │ ├── vertical-full-header-layout-with-gutters-overflow-bottom.svg
│ │ ├── vertical-full-header-layout-with-gutters-overflow-top.svg
│ │ ├── vertical-full-header-layout-with-gutters.svg
│ │ ├── vertical-layout-content-scroll-no-gutters-overflow-bottom.svg
│ │ ├── vertical-layout-content-scroll-no-gutters-overflow-top.svg
│ │ ├── vertical-layout-content-scroll-no-gutters.svg
│ │ ├── vertical-layout-content-scroll-with-gutters-overflow-bottom.svg
│ │ ├── vertical-layout-content-scroll-with-gutters-overflow-top.svg
│ │ ├── vertical-layout-content-scroll-with-gutters.svg
│ │ ├── vertical-layout-no-gutters-overflow-bottom.svg
│ │ ├── vertical-layout-no-gutters-overflow-top.svg
│ │ ├── vertical-layout-no-gutters.svg
│ │ ├── vertical-layout-with-gutters-overflow-bottom.svg
│ │ ├── vertical-layout-with-gutters-overflow-top.svg
│ │ ├── vertical-layout-with-gutters.svg
│ │ ├── vertical-sticky-content-scroll-no-gutters-overflow-bottom.svg
│ │ ├── vertical-sticky-content-scroll-no-gutters-overflow-top.svg
│ │ ├── vertical-sticky-content-scroll-no-gutters.svg
│ │ ├── vertical-sticky-content-scroll-with-gutters-overflow-bottom.svg
│ │ ├── vertical-sticky-content-scroll-with-gutters-overflow-top.svg
│ │ ├── vertical-sticky-content-scroll-with-gutters.svg
│ │ ├── vertical-sticky-layout-no-gutters-overflow-bottom.svg
│ │ ├── vertical-sticky-layout-no-gutters-overflow-top.svg
│ │ ├── vertical-sticky-layout-no-gutters.svg
│ │ ├── vertical-sticky-layout-with-gutters-overflow-bottom.svg
│ │ ├── vertical-sticky-layout-with-gutters-overflow-top.svg
│ │ └── vertical-sticky-layout-with-gutters.svg
│ ├── index.md
│ ├── next
│ │ ├── component-dev-guide.md
│ │ ├── project-structure.md
│ │ ├── theme-context.md
│ │ ├── tiptap-design-considerations.md
│ │ └── working-with-code.md
│ ├── react-fundamentals.md
│ ├── refactoring-plan-eliminate-uses.md
│ ├── release-method.md
│ ├── standalone-app.md
│ ├── theme-variables-refactoring.md
│ ├── theming-styling.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-layout-mobile.spec.ts
│ │ │ ├── App-layout.spec.ts
│ │ │ ├── app-refactor.md
│ │ │ ├── App.md
│ │ │ ├── App.module.scss
│ │ │ ├── App.spec.ts
│ │ │ ├── App.tsx
│ │ │ ├── AppLayoutContext.ts
│ │ │ ├── AppNative.tsx
│ │ │ ├── AppNavigation.ts
│ │ │ ├── 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
│ │ │ ├── SearchIndexCollector.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.spec.ts
│ │ │ └── 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-styles.md
│ │ │ ├── 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
│ │ ├── Part
│ │ │ └── Part.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
│ │ │ ├── ResponsiveBarItem.tsx
│ │ │ └── ResponsiveBarNative.tsx
│ │ ├── Select
│ │ │ ├── HiddenOption.tsx
│ │ │ ├── MultiSelectOption.tsx
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ ├── SelectNative.tsx
│ │ │ ├── SelectOption.tsx
│ │ │ └── SimpleSelect.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
│ │ ├── Toast
│ │ │ ├── Toast.spec.ts
│ │ │ ├── Toast.tsx
│ │ │ └── ToastNative.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
│ │ │ ├── appState.ts
│ │ │ ├── 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
│ │ │ ├── state-plan.md
│ │ │ ├── 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
│ └── 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-disabled.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
│ ├── appstate.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
│ ├── inline-styles-disabled.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-core/theming/_themes.scss:
--------------------------------------------------------------------------------
```scss
@use "sass:string";
@use "sass:meta";
@use "sass:map";
@use "sass:list";
/*
* This file contains all CSS variables AppEngine uses for styling the UI, including individual visual components.
*
* We use a subset of these CSS variables in themes.
*/
// =====================================================================================================================
// We index all theme variables with this prefix to make a distinction from variables defined in other custom themes.
$THEME-VAR-PREFIX: xmlui;
/*
* This function creates a CSS variable name by combining the prefix and the argument variable name
*/
@function createVar($componentVariable) {
@return var(--#{$THEME-VAR-PREFIX}-#{$componentVariable});
}
@function createVarWithDefault($componentVariable, $defaultValue) {
@return var(--#{$THEME-VAR-PREFIX}-#{$componentVariable}, $defaultValue);
}
@function countSubstring($string, $delimiter: null) {
@if (meta.type-of($string) != "string") {
@return -1;
}
$list: ();
$length: string.length($string);
$count: 0;
$index: string.index($string, $delimiter);
$temp: $string;
@while $index != null {
$count: $count + 1;
$temp: string.slice($temp, $index + 1);
$index: string.index($temp, $delimiter);
}
@return $count;
}
/*
* This function allows other CSS modules to get the value of the CSS variable specified in $componentVariable.
Optionally, you can provide a $fallbackValue to set the variable's value if that is not defined.
*/
@function useVarInner($componentVariable, $fallbackValue: false) {
@if $fallbackValue {
$num: countSubstring($componentVariable, "var(");
@if ($num <= 1) {
@return var(#{str-slice($componentVariable, 5, -2)}, #{$fallbackValue});
}
//we offset with the number of 'vars' in the $componentVariable, because we have to offset backwards for the closing parenthesis
// typically when in a useVar we have a hVar as the first argument
$offset: -2;
@if ($num > 1) {
$offset: (-1 * $num) - 1;
}
//@if(string.index(#{$fallbackValue}, 'fontSize-sm')) {
// @debug 'original: ' + #{$componentVariable} + ", varcount: " + $num;
// @debug 'concatet:' + var(#{str-slice($componentVariable, 5, -2)}, #{$fallbackValue});
// @debug 'concat 2:' + var(#{str-slice($componentVariable, 5, $offset)}, #{$fallbackValue});
//}
@return string.unquote(
"var(#{str-slice($componentVariable, 5, $offset)}, #{$fallbackValue}#{str-slice($componentVariable, $offset + 1)}"
);
} @else {
@return $componentVariable;
}
}
@function reverse($list, $recursive: false) {
$result: ();
@for $i from length($list) * -1 through -1 {
@if type-of(nth($list, abs($i))) == list and $recursive {
$result: append($result, reverse(nth($list, abs($i)), $recursive));
} @else {
$result: append($result, nth($list, abs($i)));
}
}
@return $result;
}
@function useVar($vars...) {
$ret: false;
@each $var in reverse($vars) {
$ret: useVarInner($var, $ret);
}
@return $ret;
}
@function remove-nth($list, $index) {
$result: null;
@if type-of($index) != number {
@warn "$index: #{quote($index)} is not a number for `remove-nth`.";
} @else if $index == 0 {
@warn "List index 0 must be a non-zero integer for `remove-nth`.";
} @else if abs($index) > length($list) {
@warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
} @else {
$result: ();
$index: if($index < 0, length($list) + $index + 1, $index);
@for $i from 1 through length($list) {
@if $i != $index {
$result: append($result, nth($list, $i));
}
}
}
@return $result;
}
@function generate-combinations($list, $used: ()) {
$result: ();
@each $item in $list {
@if not index($used, $item) {
$result: append($result, $item, comma);
$used: append($used, $item, comma);
@if length($list) > 1 {
$rest: remove-nth($list, index($list, $item));
$combinations: generate-combinations($rest, $used);
@each $combination in $combinations {
$result: append($result, join($item, $combination), comma);
}
}
}
}
@return $result;
}
@function compare($string-a, $string-b) {
@return str-length($string-a) > str-length($string-b);
}
@function quick-sort($list) {
$less: ();
$equal: ();
$large: ();
@if length($list) > 1 {
$seed: nth($list, ceil(calc(length($list) / 2)));
@each $item in $list {
@if $item == $seed {
$equal: append($equal, $item, list-separator($list));
} @else if compare($item, $seed) {
$less: append($less, $item, list-separator($list));
} @else if not compare($item, $seed) {
$large: append($large, $item, list-separator($list));
}
}
@return join(join(quick-sort($less), $equal), quick-sort($large));
}
@return $list;
}
@function capitalize($string) {
@return to-upper-case(str-slice($string, 1, 1)) + str-slice($string, 2);
}
@function createHVar($attribute, $component, $traits: (), $states: (), $fallback: false) {
$stateCombinations: generate-combinations($states);
$sortedStateCombinations: ();
@each $stateComb in $stateCombinations {
$result: "";
@each $st in $stateComb {
$result: #{$result}--#{$st};
}
$sortedStateCombinations: append($sortedStateCombinations, $result);
}
$sortedStateCombinations: append($sortedStateCombinations, "");
$sortedStateCombinations: quick-sort($sortedStateCombinations);
$traitCombinations: generate-combinations($traits);
$sortedTraitCombinations: ();
@each $traitComb in $traitCombinations {
$result: "";
@each $st in $traitComb {
$result: #{$result}-#{$st};
}
$sortedTraitCombinations: append($sortedTraitCombinations, $result);
}
$sortedTraitCombinations: append($sortedTraitCombinations, "");
$sortedTraitCombinations: quick-sort($sortedTraitCombinations);
//@debug "trait combs: #{$sortedTraitCombinations}";
//@debug "state combs: #{$sortedStateCombinations}";
$base: #{$attribute}-#{capitalize($component)};
$vars: ();
@each $stateComb in $sortedStateCombinations {
@each $traitComb in $sortedTraitCombinations {
$vars: append($vars, createVar(#{$base}#{$traitComb}#{$stateComb}));
}
}
@if ($fallback != false) {
$vars: append($vars, $fallback);
}
@return useVar($vars...);
}
@function str-split($string, $separator) {
// empty array/list
$split-arr: ();
// first index of separator in string
$index: str-index($string, $separator);
// loop through string
@while $index != null {
// get the substring from the first character to the separator
$item: str-slice($string, 1, $index - 1);
// push item to array
$split-arr: append($split-arr, $item);
// remove item and separator from string
$string: str-slice($string, $index + 1);
// find new index of separator
$index: str-index($string, $separator);
}
// add the remaining string to list (the last item)
$split-arr: append($split-arr, $string);
@return $split-arr;
}
@function appendThemeVar($themeVars, $componentVariable) {
$split: str-split($componentVariable, ":");
$varName: list.nth($split, -1);
$cssVar: createVar($varName);
$themeVars: map.set($themeVars, #{$componentVariable}, $cssVar);
@return $themeVars;
}
@function appendThemeVarWithDefault($themeVars, $componentVariable, $defaultValue) {
$split: str-split($componentVariable, ":");
$varName: list.nth($split, -1);
$cssVar: createVarWithDefault($varName, $defaultValue);
$themeVars: map.set($themeVars, #{$componentVariable}, $cssVar);
@return $themeVars;
}
@function appendThemeVarWithFallback($themeVars, $componentVariable, $fallbackVar) {
$split: str-split($componentVariable, ":");
$varName: list.nth($split, -1);
$fallbackSplit: str-split($fallbackVar, ":");
$fallbackVarName: list.nth($fallbackSplit, -1);
$defaultValue: createVar($fallbackVarName);
$cssVar: createVarWithDefault($varName, $defaultValue);
$themeVars: map.set($themeVars, #{$componentVariable}, $cssVar);
@return $themeVars;
}
@function getThemeVar($themeVars, $componentVariable) {
@return map.get($themeVars, $componentVariable);
}
@function json-stringify($var) {
$var-type: type-of($var);
$encode-func-name: "_encode-#{$var-type}";
@if (function-exists($encode-func-name)) {
$encode-func: get-function($encode-func-name);
@return call($encode-func, $var);
}
@return $var; // strings and booleans don't need to be modified
}
@function stringify($var) {
@return '"#{$var}"';
}
@function _encode-string($string) {
@return stringify($string);
}
@function _encode-number($number) {
@if (unitless($number)) {
@return $number;
}
@return stringify($number);
}
@function _encode-null($string) {
@return "null";
}
@function _encode-color($color) {
@return stringify($color);
}
@function _encode-list($list) {
@return _encode-iterable($list);
}
@function _encode-map($map) {
@return _encode-iterable($map);
}
@function _encode-iterable($iterable) {
$is-list: type-of($iterable) == "list";
$is-map: type-of($iterable) == "map";
$str: "";
$opening-bracket: if($is-list, "[", "{");
$closing-bracket: if($is-list, "]", "}");
@each $key, $value in $iterable {
$entry-string: "";
@if ($is-list) {
$entry-string: json-stringify($key);
} @else if ($is-map) {
$entry-string: stringify($key) + ": " + json-stringify($value);
}
$str: $str + ", " + $entry-string;
}
$str: str-slice($str, 3); // remove leading ', ' from ', entry1, entry2'
@return $opening-bracket + $str + $closing-bracket;
}
// =====================================================================================================================
// Helper functions for theme variables
// This function composes padding variables for a given subject taking into
// account all possible padding directions
@function composePaddingVars($themeVars, $subject) {
$tmp: appendThemeVar($themeVars, "padding-#{$subject}") !global;
$tmpAll: getThemeVar($tmp, "padding-#{$subject}");
$tmp: appendThemeVarWithDefault($tmp, "paddingHorizontal-#{$subject}", $tmpAll) !global;
$tmpHorizontal: getThemeVar($tmp, "paddingHorizontal-#{$subject}");
$tmp: appendThemeVarWithDefault($tmp, "paddingVertical-#{$subject}", $tmpAll) !global;
$tmpVertical: getThemeVar($tmp, "paddingVertical-#{$subject}");
$tmp: appendThemeVarWithDefault($tmp, "paddingLeft-#{$subject}", $tmpHorizontal) !global;
$tmp: appendThemeVarWithDefault($tmp, "paddingRight-#{$subject}", $tmpHorizontal) !global;
$tmp: appendThemeVarWithDefault($tmp, "paddingTop-#{$subject}", $tmpVertical) !global;
$tmp: appendThemeVarWithDefault($tmp, "paddingBottom-#{$subject}", $tmpVertical) !global;
@return $tmp;
}
// This mixin applies padding variables to a given subject
@mixin paddingVars($themeVars, $subject) {
padding: getThemeVar($themeVars, "padding-#{$subject}");
padding-left: getThemeVar($themeVars, "paddingLeft-#{$subject}");
padding-right: getThemeVar($themeVars, "paddingRight-#{$subject}");
padding-top: getThemeVar($themeVars, "paddingTop-#{$subject}");
padding-bottom: getThemeVar($themeVars, "paddingBottom-#{$subject}");
}
// This function composes padding variables for a given subject taking into
// account all possible padding directions
@function composeBorderVars($themeVars, $subject) {
$tmp: appendThemeVar($themeVars, "border-#{$subject}") !global;
$tmpAll: getThemeVar($tmp, "border-#{$subject}");
$tmp: appendThemeVarWithDefault($tmp, "borderHorizontal-#{$subject}", $tmpAll) !global;
$tmpHorizontal: getThemeVar($tmp, "borderHorizontal-#{$subject}");
$tmp: appendThemeVarWithDefault($tmp, "borderVertical-#{$subject}", $tmpAll) !global;
$tmpVertical: getThemeVar($tmp, "borderVertical-#{$subject}");
$tmp: appendThemeVarWithDefault($tmp, "borderLeft-#{$subject}", $tmpHorizontal) !global;
$tmp: appendThemeVarWithDefault($tmp, "borderRight-#{$subject}", $tmpHorizontal) !global;
$tmp: appendThemeVarWithDefault($tmp, "borderTop-#{$subject}", $tmpVertical) !global;
$tmp: appendThemeVarWithDefault($tmp, "borderBottom-#{$subject}", $tmpVertical) !global;
$tmp: appendThemeVar($tmp, "borderWidth-#{$subject}") !global;
$tmpThickness: getThemeVar($tmp, "borderWidth-#{$subject}");
$tmp: appendThemeVarWithDefault($tmp, "borderHorizontalWidth-#{$subject}", $tmpThickness) !global;
$tmpThicknessHorizontal: getThemeVar($tmp, "borderHorizontalWidth-#{$subject}");
$tmp: appendThemeVarWithDefault(
$tmp,
"borderLeftWidth-#{$subject}",
$tmpThicknessHorizontal
) !global;
$tmp: appendThemeVarWithDefault(
$tmp,
"borderRightWidth-#{$subject}",
$tmpThicknessHorizontal
) !global;
$tmp: appendThemeVarWithDefault($tmp, "borderVerticalWidth-#{$subject}", $tmpThickness) !global;
$tmpThicknessVertical: getThemeVar($tmp, "borderVerticalWidth-#{$subject}");
$tmp: appendThemeVarWithDefault(
$tmp,
"borderTopWidth-#{$subject}",
$tmpThicknessVertical
) !global;
$tmp: appendThemeVarWithDefault(
$tmp,
"borderBottomWidth-#{$subject}",
$tmpThicknessVertical
) !global;
$tmp: appendThemeVar($tmp, "borderStyle-#{$subject}") !global;
$tmpStyle: getThemeVar($tmp, "borderStyle-#{$subject}");
$tmp: appendThemeVarWithDefault($tmp, "borderHorizontalStyle-#{$subject}", $tmpStyle) !global;
$tmpStyleHorizontal: getThemeVar($tmp, "borderHorizontalStyle-#{$subject}");
$tmp: appendThemeVarWithDefault($tmp, "borderLeftStyle-#{$subject}", $tmpStyleHorizontal) !global;
$tmp: appendThemeVarWithDefault(
$tmp,
"borderRightStyle-#{$subject}",
$tmpStyleHorizontal
) !global;
$tmp: appendThemeVarWithDefault($tmp, "borderVerticalStyle-#{$subject}", $tmpStyle) !global;
$tmpStyleVertical: getThemeVar($tmp, "borderVerticalStyle-#{$subject}");
$tmp: appendThemeVarWithDefault($tmp, "borderTopStyle-#{$subject}", $tmpStyleVertical) !global;
$tmp: appendThemeVarWithDefault($tmp, "borderBottomStyle-#{$subject}", $tmpStyleVertical) !global;
$tmp: appendThemeVar($tmp, "borderColor-#{$subject}") !global;
$tmpColor: getThemeVar($tmp, "borderColor-#{$subject}");
$tmp: appendThemeVarWithDefault($tmp, "borderHorizontalColor-#{$subject}", $tmpColor) !global;
$tmpColorHorizontal: getThemeVar($tmp, "borderHorizontalColor-#{$subject}");
$tmp: appendThemeVarWithDefault($tmp, "borderLeftColor-#{$subject}", $tmpColorHorizontal) !global;
$tmp: appendThemeVarWithDefault(
$tmp,
"borderRightColor-#{$subject}",
$tmpColorHorizontal
) !global;
$tmp: appendThemeVarWithDefault($tmp, "borderVerticalColor-#{$subject}", $tmpColor) !global;
$tmpColorVertical: getThemeVar($tmp, "borderVerticalColor-#{$subject}");
$tmp: appendThemeVarWithDefault($tmp, "borderTopColor-#{$subject}", $tmpColorVertical) !global;
$tmp: appendThemeVarWithDefault($tmp, "borderBottomColor-#{$subject}", $tmpColorVertical) !global;
$tmpRadius: appendThemeVar($tmp, "borderRadius-#{$subject}") !global;
$tmpRadiusAll: getThemeVar($tmpRadius, "borderRadius-#{$subject}") !global;
$tmp: appendThemeVarWithDefault(
$tmp,
"borderStartStartRadius-#{$subject}",
$tmpRadiusAll
) !global;
$tmp: appendThemeVarWithDefault($tmp, "borderStartEndRadius-#{$subject}", $tmpRadiusAll) !global;
$tmp: appendThemeVarWithDefault($tmp, "borderEndStartRadius-#{$subject}", $tmpRadiusAll) !global;
$tmp: appendThemeVarWithDefault($tmp, "borderEndEndRadius-#{$subject}", $tmpRadiusAll) !global;
$tmp: appendThemeVar($tmp, "borderStyle-#{$subject}") !global;
@return $tmp;
}
// This mixin applies padding variables to a given subject
@mixin borderVars($themeVars, $subject) {
border-left: getThemeVar($themeVars, "borderLeft-#{$subject}");
border-right: getThemeVar($themeVars, "borderRight-#{$subject}");
border-top: getThemeVar($themeVars, "borderTop-#{$subject}");
border-bottom: getThemeVar($themeVars, "borderBottom-#{$subject}");
border-left-style: getThemeVar($themeVars, "borderLeftStyle-#{$subject}");
border-right-style: getThemeVar($themeVars, "borderRightStyle-#{$subject}");
border-top-style: getThemeVar($themeVars, "borderTopStyle-#{$subject}");
border-bottom-style: getThemeVar($themeVars, "borderBottomStyle-#{$subject}");
border-left-width: getThemeVar($themeVars, "borderLeftWidth-#{$subject}");
border-right-width: getThemeVar($themeVars, "borderRightWidth-#{$subject}");
border-top-width: getThemeVar($themeVars, "borderTopWidth-#{$subject}");
border-bottom-width: getThemeVar($themeVars, "borderBottomWidth-#{$subject}");
border-left-color: getThemeVar($themeVars, "borderLeftColor-#{$subject}");
border-right-color: getThemeVar($themeVars, "borderRightColor-#{$subject}");
border-top-color: getThemeVar($themeVars, "borderTopColor-#{$subject}");
border-bottom-color: getThemeVar($themeVars, "borderBottomColor-#{$subject}");
border-radius: getThemeVar($themeVars, "borderRadius-#{$subject}");
border-start-start-radius: getThemeVar($themeVars, "borderStartStartRadius-#{$subject}");
border-start-end-radius: getThemeVar($themeVars, "borderStartEndRadius-#{$subject}");
border-end-start-radius: getThemeVar($themeVars, "borderEndStartRadius-#{$subject}");
border-end-end-radius: getThemeVar($themeVars, "borderEndEndRadius-#{$subject}");
}
// This function composes style variables for setting styles of text elements
@function composeTextVars($themeVars, $subject, $default: false) {
$tmp: if(
$default,
appendThemeVarWithFallback($themeVars, "textColor-#{$subject}", "textColor"),
appendThemeVar($themeVars, "textColor-#{$subject}")
) !global;
$tmp: if(
$default,
appendThemeVarWithFallback($tmp, "fontFamily-#{$subject}", "fontFamily"),
appendThemeVar($tmp, "fontFamily-#{$subject}")
) !global;
$tmp: if(
$default,
appendThemeVar($tmp, "fontSize-#{$subject}"),
appendThemeVar($tmp, "fontSize-#{$subject}")
) !global;
$tmp: if(
$default,
appendThemeVarWithFallback($tmp, "fontStyle-#{$subject}", "fontStyle-#{$default}"),
appendThemeVar($tmp, "fontStyle-#{$subject}")
) !global;
$tmp: if(
$default,
appendThemeVarWithFallback($tmp, "fontVariant-#{$subject}", "fontVariant-#{$default}"),
appendThemeVar($tmp, "fontVariant-#{$subject}")
) !global;
$tmp: if(
$default,
appendThemeVarWithFallback($tmp, "fontWeight-#{$subject}", "fontWeight-#{$default}"),
appendThemeVar($tmp, "fontWeight-#{$subject}")
) !global;
$tmp: if(
$default,
appendThemeVarWithFallback($tmp, "fontStretch-#{$subject}", "fontStretch-#{$default}"),
appendThemeVar($tmp, "fontStretch-#{$subject}")
) !global;
$tmp: if(
$default,
appendThemeVarWithFallback(
$tmp,
"textDecorationLine-#{$subject}",
"textDecorationLine-#{$default}"
),
appendThemeVar($tmp, "textDecorationLine-#{$subject}")
) !global;
$tmp: if(
$default,
appendThemeVarWithFallback(
$tmp,
"textDecorationColor-#{$subject}",
"textDecorationColor-#{$default}"
),
appendThemeVar($tmp, "textDecorationColor-#{$subject}")
) !global;
$tmp: if(
$default,
appendThemeVarWithFallback(
$tmp,
"textDecorationStyle-#{$subject}",
"textDecorationStyle-#{$default}"
),
appendThemeVar($tmp, "textDecorationStyle-#{$subject}")
) !global;
$tmp: if(
$default,
appendThemeVarWithFallback(
$tmp,
"textDecorationThickness-#{$subject}",
"textDecorationThickness-#{$default}"
),
appendThemeVar($tmp, "textDecorationThickness-#{$subject}")
) !global;
$tmp: if(
$default,
appendThemeVarWithFallback(
$tmp,
"textUnderlineOffset-#{$subject}",
"textUnderlineOffset-#{$default}"
),
appendThemeVar($tmp, "textUnderlineOffset-#{$subject}")
) !global;
$tmp: if(
$default,
appendThemeVar($tmp, "lineHeight-#{$subject}"),
appendThemeVar($tmp, "lineHeight-#{$subject}")
) !global;
$tmp: if(
$default,
appendThemeVarWithFallback($tmp, "backgroundColor-#{$subject}", "backgroundColor-#{$default}"),
appendThemeVar($tmp, "backgroundColor-#{$subject}")
) !global;
$tmp: if(
$default,
appendThemeVarWithFallback($tmp, "textTransform-#{$subject}", "textTransform-#{$default}"),
appendThemeVar($tmp, "textTransform-#{$subject}")
) !global;
$tmp: if(
$default,
appendThemeVarWithFallback($tmp, "letterSpacing-#{$subject}", "letterSpacing"),
appendThemeVar($tmp, "letterSpacing-#{$subject}")
) !global;
$tmp: if(
$default,
appendThemeVarWithFallback($tmp, "wordSpacing-#{$subject}", "wordSpacing-#{$default}"),
appendThemeVar($tmp, "wordSpacing-#{$subject}")
) !global;
$tmp: if(
$default,
appendThemeVarWithFallback($tmp, "textShadow-#{$subject}", "textShadow-#{$default}"),
appendThemeVar($tmp, "textShadow-#{$subject}")
) !global;
$tmp: if(
$default,
appendThemeVarWithFallback($tmp, "textIndent-#{$subject}", "textIndent-#{$default}"),
appendThemeVar($tmp, "textIndent-#{$subject}")
) !global;
$tmp: if(
$default,
appendThemeVarWithFallback($tmp, "textAlign-#{$subject}", "textAlign-#{$default}"),
appendThemeVar($tmp, "textAlign-#{$subject}")
) !global;
$tmp: if(
$default,
appendThemeVarWithFallback($tmp, "textAlignLast-#{$subject}", "textAlignLast-#{$default}"),
appendThemeVar($tmp, "textAlignLast-#{$subject}")
) !global;
$tmp: if(
$default,
appendThemeVarWithFallback($tmp, "wordBreak-#{$subject}", "wordBreak-#{$default}"),
appendThemeVar($tmp, "wordBreak-#{$subject}")
) !global;
$tmp: if(
$default,
appendThemeVarWithFallback($tmp, "wordWrap-#{$subject}", "wordWrap-#{$default}"),
appendThemeVar($tmp, "wordWrap-#{$subject}")
) !global;
$tmp: if(
$default,
appendThemeVarWithFallback($tmp, "direction-#{$subject}", "direction-#{$default}"),
appendThemeVar($tmp, "direction-#{$subject}")
) !global;
$tmp: if(
$default,
appendThemeVarWithFallback($tmp, "writingMode-#{$subject}", "writingMode-#{$default}"),
appendThemeVar($tmp, "writingMode-#{$subject}")
) !global;
$tmp: if(
$default,
appendThemeVarWithFallback($tmp, "lineBreak-#{$subject}", "lineBreak-#{$default}"),
appendThemeVar($tmp, "lineBreak-#{$subject}")
) !global;
@return $tmp;
}
@mixin textVars($themeVars, $subject) {
color: getThemeVar($themeVars, "textColor-#{$subject}");
font-family: getThemeVar($themeVars, "fontFamily-#{$subject}");
font-size: getThemeVar($themeVars, "fontSize-#{$subject}");
font-style: getThemeVar($themeVars, "fontStyle-#{$subject}");
font-weight: getThemeVar($themeVars, "fontWeight-#{$subject}");
font-stretch: getThemeVar($themeVars, "fontStretch-#{$subject}");
text-decoration-line: getThemeVar($themeVars, "textDecorationLine-#{$subject}");
text-decoration-color: getThemeVar($themeVars, "textDecorationColor-#{$subject}");
text-decoration-style: getThemeVar($themeVars, "textDecorationStyle-#{$subject}");
text-decoration-thickness: getThemeVar($themeVars, "textDecorationThickness-#{$subject}");
text-underline-offset: getThemeVar($themeVars, "textUnderlineOffset-#{$subject}");
line-height: getThemeVar($themeVars, "lineHeight-#{$subject}");
background-color: getThemeVar($themeVars, "backgroundColor-#{$subject}");
text-transform: getThemeVar($themeVars, "textTransform-#{$subject}");
letter-spacing: getThemeVar($themeVars, "letterSpacing-#{$subject}");
word-spacing: getThemeVar($themeVars, "wordSpacing-#{$subject}");
text-shadow: getThemeVar($themeVars, "textShadow-#{$subject}");
text-indent: getThemeVar($themeVars, "textIndent-#{$subject}");
text-align: getThemeVar($themeVars, "textAlign-#{$subject}");
text-align-last: getThemeVar($themeVars, "textAlignLast-#{$subject}");
word-break: getThemeVar($themeVars, "wordBreak-#{$subject}");
word-wrap: getThemeVar($themeVars, "wordWrap-#{$subject}");
direction: getThemeVar($themeVars, "direction-#{$subject}");
writing-mode: getThemeVar($themeVars, "writingMode-#{$subject}");
line-break: getThemeVar($themeVars, "lineBreak-#{$subject}");
}
@mixin ignoreTextVars() {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-style: inherit !important;
font-weight: inherit !important;
font-stretch: inherit !important;
text-decoration-line: inherit !important;
text-decoration-color: inherit !important;
text-decoration-style: inherit !important;
text-decoration-thickness: inherit !important;
text-underline-offset: inherit !important;
line-height: inherit !important;
background-color: inherit !important;
text-transform: inherit !important;
letter-spacing: inherit !important;
word-spacing: inherit !important;
text-shadow: inherit !important;
text-indent: inherit !important;
text-align: inherit !important;
text-align-last: inherit !important;
word-break: inherit !important;
word-wrap: inherit !important;
direction: inherit !important;
writing-mode: inherit !important;
line-break: inherit !important;
}
@mixin withMaxScreenSize($maxScreenSize) {
$query: "";
@for $i from 0 through $maxScreenSize {
@if $query == "" {
$query: "style(--screenSize: #{$i})";
} @else {
$query: "#{$query} or style(--screenSize: #{$i})";
}
}
@container (#{$query}) {
@content;
}
}
// =====================================================================================================================
// CSS variables for miscellaneous shadows
$boxShadow:
0 1px 3px 0 rgba(0, 0, 0, 0.1),
0 1px 2px 0 rgba(0, 0, 0, 0.06);
$boxShadow-md:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
$boxShadow-xxl:
0 8px 17px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
$boxShadow-spread: 0px 0px 30px rgba(0, 0, 0, 0.1);
$boxShadow-spread-2: -6px -4px 40px 10px rgba(0, 0, 0, 0.1);
$boxShadow-spread-2-xl: -6px -4px 40px 18px rgba(0, 0, 0, 0.1);
// CSS variables describing spacing between UI elements
$space-0: createVar(space-0);
$space-0_5: createVar(space-0_5);
$space-1: createVar(space-1);
$space-1_5: createVar(space-1_5);
$space-2: createVar(space-2);
$space-2_5: createVar(space-2_5);
$space-3: createVar(space-3);
$space-3_5: createVar(space-3_5);
$space-4: createVar(space-4);
$space-5: createVar(space-5);
$space-6: createVar(space-6);
$space-7: createVar(space-7);
$space-8: createVar(space-8);
$space-9: createVar(space-9);
$space-10: createVar(space-10);
$space-11: createVar(space-11);
$space-12: createVar(space-12);
$space-14: createVar(space-14);
$space-16: createVar(space-16);
$space-20: createVar(space-20);
$space-24: createVar(space-24);
$space-28: createVar(space-28);
$space-32: createVar(space-32);
$space-36: createVar(space-36);
$space-40: createVar(space-40);
$space-44: createVar(space-44);
$space-48: createVar(space-48);
$space-52: createVar(space-52);
$space-56: createVar(space-56);
$space-60: createVar(space-60);
$space-64: createVar(space-64);
$space-72: createVar(space-72);
$space-80: createVar(space-80);
$space-96: createVar(space-96);
// ---------------------------------------------------------------------------------------------------------------------
// Generic style variables
$textColor: createVar(textColor);
$textColor-primary: createVar(textColor);
$textColor-attention: createVar(textColor-attention);
$backgroundColor-attention: createVar(backgroundColor-attention);
$textColor-subtitle: createVar(textColor-subtitle);
$backgroundColor-primary: createVar(backgroundColor-primary);
$backgroundColor-secondary: createVar(backgroundColor-secondary);
$backgroundColor-Input-default: createVar(backgroundColor-Input-default);
$textColor--disabled: createVar(textColor--disabled);
$backgroundColor--disabled: createVar(backgroundColor--disabled);
$borderColor--disabled: createVar(borderColor--disabled);
$backgroundColor--selected: createVar(backgroundColor--selected);
$fontFamily: createVar(fontFamily);
$fontSize-tiny: createVar(fontSize-tiny);
$fontSize-xs: createVar(fontSize-xs);
$fontSize-code: createVar(fontSize-code);
$fontSize-sm: createVar(fontSize-sm);
$fontSize-base: createVar(fontSize-base);
$fontSize-lg: createVar(fontSize-lg);
$fontSize-xl: createVar(fontSize-xl);
$fontSize-2xl: createVar(fontSize-2xl);
$fontSize-3xl: createVar(fontSize-3xl);
$fontSize-4xl: createVar(fontSize-4xl);
$fontSize-5xl: createVar(fontSize-5xl);
$fontSize-6xl: createVar(fontSize-6xl);
$fontSize-7xl: createVar(fontSize-7xl);
$fontSize-8xl: createVar(fontSize-8xl);
$fontSize-9xl: createVar(fontSize-9xl);
$fontSize: createVar(fontSize);
$lineHeight-none: createVar(lineHeight-none);
$lineHeight-tight: createVar(lineHeight-tight);
$lineHeight-snug: createVar(lineHeight-snug);
$lineHeight-normal: createVar(lineHeight-normal);
$lineHeight-relaxed: createVar(lineHeight-relaxed);
$lineHeight-loose: createVar(lineHeight-loose);
$lineHeight: createVar(lineHeight);
$letterSpacing-tighter: createVar(letterSpacing-tighter);
$letterSpacing-tight: createVar(letterSpacing-tight);
$letterSpacing-normal: createVar(letterSpacing-normal);
$letterSpacing-wide: createVar(letterSpacing-wide);
$letterSpacing-wider: createVar(letterSpacing-wider);
$letterSpacing-widest: createVar(letterSpacing-widest);
$letterSpacing: createVar(letterSpacing);
$backgroundColor-overlay: createVar(backgroundColor-overlay);
$color-info: createVar(color-info);
$color-valid: createVar(color-valid);
$color-warning: createVar(color-warning);
$color-error: createVar(color-error);
$borderColor: createVar(borderColor);
$maxWidth-content: createVar(maxWidth-content);
$direction: createVar(direction);
$font-feature-settings: createVar(font-feature-settings);
$outlineColor--focus: createVar(outlineColor--focus);
$outlineWidth--focus: createVar(outlineWidth--focus);
$outlineStyle--focus: createVar(outlineStyle--focus);
$outlineOffset--focus: createVar(outlineOffset--focus);
$focus-outline: $outlineWidth--focus $outlineStyle--focus $outlineColor--focus;
$media-max-width-phone: createVar(media-max-width-phone);
$media-max-width-tablet: createVar(media-max-width-tablet);
// ---------------------------------------------------------------------------------------------------------------------
// Dropdown style variables
$backgroundColor-dropdown-item: createVar(backgroundColor-dropdown-item);
$backgroundColor-dropdown-item--active: createVar(backgroundColor-dropdown-item--active);
$borderColor-dropdown-item: createVar(borderColor-dropdown-item);
// ---------------------------------------------------------------------------------------------------------------------
// Tree style variables
$backgroundColor-tree-row--selected--before: createVar(backgroundColor-tree-row--selected--before);
// ---------------------------------------------------------------------------------------------------------------------
// Input border style variables
$borderColor-Input-default: createVar(borderColor-Input-default);
$borderColor-Input-default--hover: createVar(borderColor-Input-default--hover);
$borderColor-Input-default--success: createVar(borderColor-Input-default--success);
$borderColor-Input-default--warning: createVar(borderColor-Input-default--warning);
$borderColor-Input-default--error: createVar(borderColor-Input-default--error);
// ---------------------------------------------------------------------------------------------------------------------
// InputLabel style variables
$textColor-InputLabel-required: createVar(textColor-InputLabel-required);
// ---------------------------------------------------------------------------------------------------------------------
// formItem style variables
$textColor-FormItemLabel: createVar(textColor-FormItemLabel);
$fontSize-FormItemLabel: createVar(fontSize-FormItemLabel);
$fontWeight-FormItemLabel: createVar(fontWeight-FormItemLabel);
//----------------------------------------------------------------------------------------------------------------------
// Tab style variables
$color-primary-500: createVar(color-primary-500);
$color-danger-500: createVar(color-danger-500);
$backgroundColor: createVar(backgroundColor);
$textColor-secondary: createVar(textColor-secondary);
$fontWeight-light: createVar(fontWeight-light);
$fontWeight-normal: createVar(fontWeight-normal);
$fontWeight-medium: createVar(fontWeight-medium);
$fontWeight-bold: createVar(fontWeight-bold);
$borderRadius: createVar(borderRadius);
// body
$fontSize-root: createVar(fontSize-root);
$fontWeight: createVar(fontWeight);
```
--------------------------------------------------------------------------------
/xmlui/dev-docs/containers.md:
--------------------------------------------------------------------------------
```markdown
# XMLUI Container-Based State Management
A deep dive into XMLUI's hierarchical container system for managing component state, variables, and reactive data binding.
## Fundamentals of XMLUI Reactivity
XMLUI implements **automatic reactivity** where UI updates happen automatically when data changes, without manual DOM manipulation.
### The Reactive Loop
1. **Initial Render**: Framework renders UI from declarative markup
2. **Event Occurrence**: User interactions or system events trigger changes
3. **State Detection**: Framework detects state mutations transparently
4. **Selective Refresh**: Only affected components re-render
5. **Loop Continuation**: Process repeats for subsequent events
Developers write declarative expressions (`{count}` to display, `count++` to modify) and the framework handles UI synchronization automatically.
### The Role of Containers
Containers enable reactivity by providing:
- **State Storage**: Variables and data holders
- **Change Detection**: Proxy-based mutation tracking
- **Update Coordination**: Change propagation to affected components
- **Scope Management**: Control over state visibility
- **Performance**: Efficient updates without UI blocking
## Automatic Container Wrapping
XMLUI automatically wraps components in containers when they need reactive capabilities. Containers are created for:
- **App Root** - Wraps the entire application
- **User-Defined Components** - Each instance gets isolated state
- **Variables** (`var.*`) - Reactive state holders
- **Loaders** - Asynchronous data operations
- **Uses Declarations** - Explicit state inheritance control
- **Context Variables** - Framework-injected variables
- **Scripts** - JavaScript blocks with variables/functions
- **Code-Behind Files** - External script files
Every component receives a unique identifier (user-defined or framework-assigned). User-defined IDs enable programmatic access to component methods and properties. Component IDs are scoped to their declaring file and stored in the nearest parent container.
### App Root Container
For every XMLUI application, a root container is automatically created to wrap the entire application entry point (typically Main.xmlui). This ensures there's always a top-level container to manage application-wide state.
**Example - Main.xmlui:**
```xml
<!-- File: Main.xmlui -->
<App>
<VStack>
<Text id="title">Welcome to My App</Text>
<Button id="actionBtn" label="Click Me" />
<Button label="Cancel" />
</VStack>
</App>
```
```mermaid
%%{init: {"block": {"padding": 8}}}%%
block-beta
columns 1
AR["<div style='text-align: left; width: 100%; padding: 0 15px;'>🏠 App Root Container<br/>💡 Container State:<br/> ├─ title → Text reference<br/> ├─ actionBtn → Button reference<br/> └─ [[cancel]] → Button reference<br/>🌳 Component Tree:<br/> VStack:<br/> ├─ Text (id: title)<br/> ├─ Button (id: actionBtn)<br/> └─ Button (id: [[cancel]])</div>"]
classDef rootContainer fill:#f0f0f0,stroke:#888,stroke-width:2px,color:#333,padding-left:15px,padding-right:15px
class AR rootContainer
```
> **Note**: `[[cancel]]` is an framework-assigned ID for the Cancel button since it doesn't have an explicit `id` attribute.
In this example, XMLUI automatically creates a root container that stores the IDs for `title`, `actionBtn`, and `[[cancel]]`, making them accessible throughout the application.
### User-Defined Component Instance Containers
Each time you use a user-defined component (created with `<Component name="...">`) in your markup, XMLUI automatically creates a container for that specific instance. This ensures **Instance Isolation** - each component usage gets its own state container with isolated internal state.
**Example Files:**
**File: Main.xmlui**
```xml
<!-- File: Main.xmlui -->
<App>
<VStack>
<!-- Each MyButton usage creates its own container -->
<MyButton label="Save" /> <!-- Creates Container A -->
<MyButton label="Cancel" /> <!-- Creates Container B -->
<MyButton label="Delete" /> <!-- Creates Container C -->
</VStack>
</App>
```
**File: components/MyButton.xmlui**
```xml
<!-- File: components/MyButton.xmlui -->
<Component name="MyButton" var.count="{0}">
<Button
label="{$props.label} ({count})"
onClick="count++"
/>
</Component>
```
```mermaid
%%{init: {"block": {"padding": 8}}}%%
block-beta
columns 3
block:AppRoot:3
AR["<div style='text-align: left; width: 100%'>🏠 App Root Container<br/>💡 Container State: MyButton instances<br/>🌳 Component Tree:<br/> VStack:<br/> ├─ MyButton (Container A)<br/> ├─ MyButton (Container B)<br/> └─ MyButton (Container C)</div>"]
end
CA["<div style='text-align: left; width: 100%'>🏠 Container A<br/>💡 State:<br/> ├─ count: 0<br/> └─ $props.label: 'Save'<br/>🌳 Component: Button (Save 0)</div>"]
CB["<div style='text-align: left; width: 100%'>🏠 Container B<br/>💡 State:<br/> ├─ count: 0<br/> └─ $props.label: 'Cancel'<br/>🌳 Component: Button (Cancel 0)</div>"]
CC["<div style='text-align: left; width: 100%'>🏠 Container C<br/>💡 State:<br/> ├─ count: 0<br/> └─ $props.label: 'Delete'<br/>🌳 Component: Button (Delete 0)</div>"]
classDef rootContainer fill:#f0f0f0,stroke:#888,stroke-width:2px,color:#333
classDef innerContainer fill:#f8f8f8,stroke:#aaa,stroke-width:1px,color:#333
class AR,CC,CB,CA rootContainer
class ARS,ART,CHC,CHB,CHA,CSC,CSB,CSA innerContainer
```
Each `MyButton` instance gets its own container with isolated `count` variable - clicking one button doesn't affect the others.
### Variables
Variables are reactive state holders that trigger UI updates when changed. They can hold any JavaScript value, including functions.
**Variable Examples:**
```xml
<!-- Simple variable -->
<Stack var.count="{0}">
<Button onClick="count++" label="Count: {count}" />
</Stack>
<!-- Function variable -->
<Stack var.count="{0}" var.increment="{() => count++}">
<Button onClick="increment()" label="Count: {count}" />
</Stack>
<!-- Script-defined variables -->
<Stack>
<script>
let count = 0;
const increment = () => count++;
function reset() { count = 0; }
</script>
<Button onClick="increment()" label="Count: {count}" />
<Button onClick="reset()" label="Reset" />
</Stack>
```
**Role**: Variables provide reactive state storage. The container detects changes via proxy-based tracking and triggers selective UI updates.
### Loaders
Loaders handle asynchronous data operations. The framework creates them automatically when components have data requirements via the **ApiBoundComponent** system.
**Automatic Loader Creation:**
1. **Properties with DataSource/DataSourceRef types**
2. **Events with API action types** (APICall, FileDownload, FileUpload)
3. **Components with URL-based data properties**
```xml
<!-- Direct URL (most common) -->
<Table data="/api/users" />
<!-- Framework creates DataLoader automatically -->
<!-- Explicit DataSource -->
<DataSource id="users" url="/api/users" />
<Table data="{users}" />
<!-- Creates DataLoader managing loading states, errors, caching, polling -->
<!-- Event-based loader -->
<Button>
Save
<event name="click">
<APICall url="/api/save" method="POST" />
</event>
</Button>
<!-- Framework creates APICall handler -->
```
**Detection**: `ComponentAdapter` scans for specific object types requiring API operations and wraps the component in `ApiBoundComponent`.
**Role**: Loaders manage async state transitions (loading → loaded/error) and provide reactive properties like `users.value`, `users.inProgress`, `users.loaded`.
### Uses Declarations
The `uses` property controls state inheritance from parent containers:
```xml
<!-- Inherit all parent state (default) -->
<Stack><!-- children --></Stack>
<!-- Inherit no parent state -->
<Stack uses="[]"><!-- children --></Stack>
<!-- Inherit specific parent state -->
<Stack uses="['userInfo', 'theme']"><!-- children --></Stack>
```
> **Note**: XMLUI is moving toward automatic dependency detection to eliminate this property.
**Role**: Controls reactive data flow scope and prevents unnecessary re-renders from unrelated parent state changes.
### Context Variables
Context variables are framework-injected variables that provide contextual information. They start with `$` and cannot be declared via attributes.
**Examples** (not exhaustive):
- **Routing**: `$pathname`, `$routeParams`, `$queryParams`, `$linkInfo`
- **Iterators**: `$item`, `$itemIndex` (Lists, Tables)
- **Forms**: `$data`, `$validationResult`, `$value`, `$setValue` (FormItems)
- **Events**: `$param` (event handlers)
```xml
<!-- Automatically available in context -->
<Table data="/api/users">
<Column bindTo="name">
<Text>{$item.name}</Text> <!-- $item from Table -->
</Column>
</Table>
<Page url="/users/:id">
<Text>User ID: {$routeParams.id}</Text> <!-- $routeParams from Page -->
</Page>
```
**Role**: Injected into container state for reactive binding. When they change (route, current item), dependent UI updates automatically.
### Scripts
JavaScript blocks declaring variables and functions:
```xml
<Stack>
<script>
var counter = 0;
function increment() { counter++; }
var multiplier = (x) => x * 2;
</script>
<Button onClick="increment()" label="Count: {counter}" />
</Stack>
```
**Role**: Script declarations become part of the container's reactive state with automatic dependency tracking.
### Code-Behind Files
External script files for separating logic from markup.
**Naming Convention:**
- **Application Root**: `Main.xmlui.xs` (for `Main.xmlui`)
- **User-Defined Component**: `ComponentName.xmlui.xs` (for `ComponentName.xmlui`)
**Role**: Processed identically to inline `<script>` blocks. Exports become part of container's reactive state with dependency tracking.
### Container Creation Logic
**Important**: An `id` attribute alone does NOT create a container. Component IDs are stored in the nearest parent container.
Containers are created when components have these characteristics (via `isContainerLike` function):
```tsx
// From ContainerWrapper.tsx
export function isContainerLike(node: ComponentDef) {
if (node.type === "Container") return true;
return !!(
node.loaders || // Data loading
node.vars || // Variable declarations
node.uses || // Parent state scoping
node.contextVars || // Context variables
node.functions || // Function declarations
node.scriptCollected // Script blocks
);
}
```
**Examples:**
```xml
<!-- Creates container - has variable -->
<Stack var.count="{0}" />
<!-- Creates container - has script -->
<Stack><script>let x = 1;</script></Stack>
<!-- Creates container - has data loading -->
<Table data="/api/users" />
<!-- Does NOT create container - only has ID -->
<Stack id="myStack" />
<!-- Does NOT create container - only layout properties -->
<Stack direction="horizontal" />
```
## Container Architecture
### Container Hierarchy
Three React components work together:
```
ContainerWrapper
└── ErrorBoundary
└── StateContainer
└── ErrorBoundary
└── Container
```
### Core Components
**ContainerWrapper** (`/xmlui/src/components-core/rendering/ContainerWrapper.tsx`)
- Determines if a component needs containerization
- Wraps components with container characteristics
**StateContainer** (`/xmlui/src/components-core/rendering/StateContainer.tsx`)
- Manages state storage and composition
- Assembles state from multiple sources
- Handles state lifecycle
**Container** (`/xmlui/src/components-core/rendering/Container.tsx`)
- Executes event handlers asynchronously
- Manages state changes while maintaining UI responsiveness
## State Composition and Management
### ContainerState Type
```typescript
// From /xmlui/src/abstractions/ContainerDefs.ts
export type ContainerState = Record<string | symbol, any>;
```
### State Assembly Process
The `StateContainer` assembles the complete state from multiple layers:
1. **State from Parent**: Inherited state from parent containers (with optional scoping via `uses`)
2. **Component APIs**: Exposed component methods and properties
3. **Local Variables**: Variables declared in the current component
4. **Context Variables**: Variables provided to child components
5. **Routing Parameters**: URL parameters, query strings, and navigation context
### State Flow Implementation
```typescript
// Simplified flow from StateContainer.tsx
const stateFromOutside = extractScopedState(parentState, node.uses);
const componentStateWithApis = mergeComponentApis(componentState, componentApis);
const localVarsStateContext = useCombinedState(stateFromOutside, componentStateWithApis, node.contextVars);
const resolvedLocalVars = useVars(varDefinitions, functionDeps, localVarsStateContext, memoedVars);
const mergedWithVars = useMergedState(resolvedLocalVars, componentStateWithApis);
// State priority order (later overrides earlier):
// 1. stateFromOutside (parent state - lowest priority)
// 2. node.contextVars (context variables like $item)
// 3. mergedWithVars (local vars + component APIs - highest priority)
const combinedState = useCombinedState(
stateFromOutside, // Parent state (lowest priority) - allows shadowing
node.contextVars, // Context vars
mergedWithVars, // Local vars and component APIs (highest priority) - enables shadowing
routingParams // Routing parameters
);
```
**State Shadowing**: The priority order allows local variables to shadow (override) parent state variables with the same name. This enables child containers to define their own versions of variables without being forced to use the parent's state, supporting better component encapsulation.
### Variable Resolution and Memoization
Variables are resolved through a sophisticated memoization system:
```typescript
// From StateContainer.tsx - useVars function
type MemoedVars = Map<any, {
getDependencies: (value: string | CodeDeclaration, referenceTrackedApi: Record<string, ComponentApi>) => Array<string>;
obtainValue: (expression: any, state: ContainerState, appContext: AppContextObject | undefined, strict: boolean | undefined, stateDeps: Record<string, any>, appContextDeps: Record<string, any>) => any;
}>;
```
#### Variable Dependency Tracking
1. **Function Dependencies**: Arrow expressions and their variable dependencies are collected first
2. **Variable Dependencies**: Dependencies between variables are resolved in multiple passes
3. **Memoization**: Results are memoized based on dependency changes to avoid unnecessary recalculation
## Reducer-Based State Updates
### Container Actions
State changes are managed through Redux-style actions via the `ContainerActionKind` enum:
```typescript
// From /xmlui/src/components-core/rendering/containers.ts
export const enum ContainerActionKind {
LOADER_LOADED = "ContainerActionKind:LOADER_LOADED",
LOADER_IN_PROGRESS_CHANGED = "ContainerActionKind:LOADER_IN_PROGRESS_CHANGED",
LOADER_IS_REFETCHING_CHANGED = "ContainerActionKind:LOADER_IS_REFETCHING_CHANGED",
LOADER_ERROR = "ContainerActionKind:LOADER_ERROR",
EVENT_HANDLER_STARTED = "ContainerActionKind:EVENT_HANDLER_STARTED",
EVENT_HANDLER_COMPLETED = "ContainerActionKind:EVENT_HANDLER_COMPLETED",
EVENT_HANDLER_ERROR = "ContainerActionKind:EVENT_HANDLER_ERROR",
COMPONENT_STATE_CHANGED = "ContainerActionKind:COMPONENT_STATE_CHANGED",
STATE_PART_CHANGED = "ContainerActionKind:STATE_PART_CHANGED",
}
```
#### Event Handler State Preservation
The event handler lifecycle actions (`EVENT_HANDLER_STARTED`, `EVENT_HANDLER_COMPLETED`, `EVENT_HANDLER_ERROR`) implement a critical state preservation pattern. When setting lifecycle flags like `inProgress` or `error`, the reducer checks if state already exists for the component's `uid`:
```typescript
// From reducer.ts - state preservation pattern
case ContainerActionKind.EVENT_HANDLER_STARTED:
state[uid] = state[uid]
? { ...state[uid], [inProgressFlagName]: true }
: { [inProgressFlagName]: true };
break;
```
**Why This Matters**: Components with reducer state (like `DataSource` or `APICall`) maintain their `data`, `error`, and other properties throughout the event handler lifecycle. Without this preservation, setting the `inProgress` flag would replace the entire state object, losing critical data like loaded results or previous errors. This fix resolved issues where APIs would become non-functional after their first error because the state was being wiped out instead of updated.
### Partial State Changes
The most sophisticated action is `STATE_PART_CHANGED`, which handles deep object/array mutations:
```typescript
// Example: Updating nested property some.count++
{
"type": "ContainerActionKind:STATE_PART_CHANGED",
"payload": {
"actionType": "set",
"path": ["some", "count"],
"target": { "count": 0 },
"value": 1,
"localVars": resolvedLocalVars
}
}
```
The reducer uses Lodash's `setWith` to update nested paths while preserving object vs array types based on target structure.
## Proxy-Based Change Detection
### BuildProxy Function
State changes are detected using JavaScript Proxies that intercept get/set operations:
```typescript
// From /xmlui/src/components-core/rendering/buildProxy.ts
export function buildProxy(
proxyTarget: any,
callback: (changeInfo: ProxyCallbackArgs) => void,
tree: Array<string | symbol> = [],
): any {
return new Proxy(proxyTarget, {
get: function (target, prop, receiver) {
const value = Reflect.get(target, prop, receiver);
// Create nested proxies for objects and arrays
if (value && typeof value === "object" && ["Array", "Object"].includes(value.constructor.name)) {
if (!proxiedValues.has(value)) {
proxiedValues.set(value, buildProxy(value, callback, tree.concat(prop)));
}
return proxiedValues.get(value);
}
return value;
},
set: function (target, prop, value, receiver) {
// Notify of state changes
callback({
action: "set",
path: getPath(prop),
pathArray: tree.concat(prop),
target,
newValue: value,
previousValue: Reflect.get(target, prop, receiver),
});
return Reflect.set(target, prop, value, receiver);
}
});
}
```
### Change Propagation
When a proxied state change occurs:
1. **Detection**: Proxy intercepts the change and calls the callback
2. **Path Analysis**: Determines if the change belongs to current container or parent
3. **Dispatch**: Sends `STATE_PART_CHANGED` action to appropriate container
4. **Reduction**: Immer-based reducer applies the change immutably
5. **Re-render**: React re-renders affected components
## Component Identification and APIs
### Symbol-Based Component IDs
Components within containers are identified using JavaScript Symbols:
```typescript
// Component ID resolution
const componentUid = componentId ?? Symbol(id);
if (id) {
componentUid.description = id; // For debugging and API access
}
```
### Component ID Storage vs Accessibility
A key insight about XMLUI's component management is understanding where component IDs are stored, how they flow through the container hierarchy, and what happens when a component has an ID but doesn't create its own container.
**Component ID Creation and Storage Flow**
1. **Universal ID Assignment**: ALL components receive a unique Symbol-based ID, regardless of whether they create containers:
```tsx
// From ComponentAdapter.tsx - every component gets a UID
const uid = useMemo(() => Symbol(safeNode.uid), [safeNode.uid]);
```
2. **Container vs Non-Container Components**:
- **Components that create containers**: Store their child component IDs in their own `componentApis` state
- **Components that DON'T create containers**: Their IDs are stored in the nearest parent container
3. **Registration Mechanism**: Components register their APIs (including their ID) with the nearest container:
```tsx
// From ComponentAdapter.tsx - all components register with nearest container
const memoedRegisterComponentApi: RegisterComponentApiFn = useCallback(
(api) => {
registerComponentApi(uid, api); // Registers with nearest parent container
},
[registerComponentApi, uid],
);
```
4. **Storage in Parent Container**: The `StateContainer` maintains a `componentApis` map:
```tsx
// From StateContainer.tsx - parent container stores all child component IDs
const registerComponentApi: RegisterComponentApiFnInner = useCallback((uid, api) => {
setComponentApis(produce((draft) => {
if (!draft[uid]) {
draft[uid] = {};
}
Object.entries(api).forEach(([key, value]) => {
draft[uid][key] = value;
});
}));
}, []);
```
**Global Access Through State Composition**
Even though component IDs are stored hierarchically, they become accessible file-wide through state inheritance:
```tsx
// From StateContainer.tsx - state flows down through hierarchy
const combinedState = useCombinedState(
stateFromOutside, // Parent state (contains parent component IDs)
node.contextVars, // Framework context variables
mergedWithVars, // Local variables and component state
routingParams, // Routing parameters
);
```
**Example Scenarios**:
1. **Component with ID but no container**:
```xml
<Stack var.count="{0}"> <!-- Creates container A -->
<Button id="myBtn" /> <!-- ID stored in container A -->
<Text id="myText" /> <!-- ID also stored in container A -->
</Stack>
```
2. **Nested containers with inheritance**:
```xml
<Stack var.count="{0}"> <!-- Creates container A -->
<Button id="myBtn" /> <!-- ID stored in container A -->
<Stack var.data="{null}"> <!-- Creates container B -->
<Text>{myBtn.visible}</Text> <!-- Can access myBtn via state inheritance -->
<Button id="innerBtn" /> <!-- ID stored in container B -->
</Stack>
</Stack>
```
**Storage and Access Pattern**:
- `myBtn` and `myText` IDs are stored in container A's `componentApis` (they don't create their own containers)
- `innerBtn` ID is stored in container B's `componentApis`
- Container B inherits parent state through `stateFromOutside`, making `myBtn` accessible
- All components can reference each other within the same .xmlui file through the state inheritance chain
**Root Component Storage**:
If `<Stack id="myStack" />` is a root component that doesn't create its own container, its ID is stored in the automatically-created root container. XMLUI ensures there's always at least one container in the hierarchy to store component IDs.
This design ensures that:
- **Performance**: Each container only manages its direct responsibility
- **Usability**: All components within a .xmlui file can reference each other
- **Consistency**: Component IDs flow predictably through the container hierarchy
- **Reliability**: There's always a root container to store component IDs, even for simple root components
### Component API Registration
Components can expose APIs that other components can invoke:
```typescript
// From StateContainer.tsx
const registerComponentApi: RegisterComponentApiFnInner = useCallback((uid, api) => {
setComponentApis(produce((draft) => {
if (!draft[uid]) {
draft[uid] = {};
}
Object.entries(api).forEach(([key, value]) => {
if (draft[uid][key] !== value) {
draft[uid][key] = value;
}
});
}));
}, []);
```
APIs are merged into the component state so they're accessible via the component's ID:
```typescript
// API access pattern
componentStateWithApis[componentId] = { ...componentState, ...exposedApi };
```
#### API State Scoping
Component API state (particularly reducer state from loaders like `DataSource` or `APICall`) is carefully scoped to prevent state leakage between containers. When component APIs are exposed as string keys in the container state (using the component's `id` as the key), the StateContainer only includes reducer state for APIs that are actually registered within that specific container.
**Implementation**: The StateContainer maintains a Set of registered API keys and filters which reducer state properties are copied to string keys:
```typescript
// From StateContainer.tsx - API state scoping
const registeredApiKeys = new Set<string>();
for (const sym of Object.getOwnPropertySymbols(componentApis)) {
if (sym.description) {
registeredApiKeys.add(sym.description);
}
}
// Only copy reducer state if the API is registered in this container
for (const key of Object.keys(componentState)) {
if (registeredApiKeys.has(key)) {
ret[key] = { ...(ret[key] || {}), ...componentState[key] };
}
}
```
**Benefit**: This prevents child containers from inheriting parent API reducer state. For example, if a parent has a `DataSource` with `id="users"`, child containers won't see `users.inProgress`, `users.error`, or other reducer properties unless they register their own API with that ID. This ensures clean separation and prevents confusing state interactions.
## Asynchronous Event Handler Execution
### UI Responsiveness Strategy
The Container component maintains UI responsiveness during long-running operations through:
1. **Async Instruction Execution**: Each instruction in an event handler runs asynchronously
2. **State Synchronization Points**: Execution pauses after each instruction for state updates
3. **Promise-Based Coordination**: Uses promises to coordinate when state changes are committed
4. **Transition-Based Updates**: Uses React's `startTransition` for non-urgent updates
### Execution Flow
```typescript
// Simplified execution pattern from Container.tsx
const executeHandler = async (statements: Statement[], options: ExecutionOptions) => {
for (const statement of statements) {
// Execute statement
await processStatement(statement, evalContext);
// Collect state changes
if (changes.length > 0) {
// Dispatch state changes
changes.forEach(change => {
statePartChanged(change.pathArray, change.newValue, change.target, change.action);
});
// Create promise for this statement
const statementPromise = new Promise(resolve => {
statementPromiseResolvers.current.set(statementId, resolve);
});
// Increment version to trigger re-render
startTransition(() => {
setVersion(prev => prev + 1);
});
// Wait for state to be committed
await statementPromise;
}
}
};
```
### Version-Based Synchronization
The Container uses a version counter to coordinate state updates:
```typescript
// When version changes, resolve pending promises
useEffect(() => {
// Resolve all pending statement promises
statementPromiseResolvers.current.forEach(resolve => resolve());
statementPromiseResolvers.current.clear();
}, [version]);
```
## State Scoping and Inheritance
### Parent State Extraction
Child containers can limit which parent state they receive:
```typescript
// From StateContainer.tsx
function extractScopedState(parentState: ContainerState, uses?: string[]): ContainerState | undefined {
if (!uses) {
return parentState; // Inherit all parent state
}
if (uses.length === 0) {
return EMPTY_OBJECT; // Inherit no parent state
}
return pick(parentState, uses); // Inherit only specified keys
}
```
### Context Variables
Containers can provide context variables to their children:
```typescript
// contextVars flow down to child containers automatically
const localVarsStateContext = useCombinedState(
stateFromOutside,
componentStateWithApis,
node.contextVars // These become available to children
);
```
### State Merging Strategies
Different merging strategies are used for different state layers:
1. **Override**: Higher-priority state overrides lower-priority (`useCombinedState`)
2. **Merge**: Object and array values are deep-merged (`useMergedState`)
3. **Replace**: Simple values replace entirely
## Routing Integration
### Routing Parameters as State
Routing information is automatically injected into container state:
```typescript
// From StateContainer.tsx - useRoutingParams
const routingParams = useMemo(() => {
return {
$pathname: location.pathname,
$routeParams: routeParams, // URL parameters like :id
$queryParams: queryParamsMap, // Query string parameters
$linkInfo: linkInfo, // Navigation context
};
}, [linkInfo, location.pathname, queryParamsMap, routeParams]);
```
These are automatically available in all containers as context variables.
## Error Boundaries and Resilience
### Layered Error Protection
The container system has multiple error boundaries:
1. **Container-Level**: Protects StateContainer from Container errors
2. **StateContainer-Level**: Protects parent containers from child container errors
3. **Component-Level**: Individual component errors don't crash containers
### State Preservation
If a Container crashes during event handler execution, the StateContainer preserves its state, allowing recovery or graceful degradation.
## Performance Optimizations
### Memoization Strategies
1. **Component Memoization**: Container components are memoized to prevent unnecessary re-renders
2. **Variable Memoization**: Variable resolution results are cached based on dependencies
3. **Shallow Comparison**: State objects use shallow comparison for change detection
4. **Reference Tracking**: Proxy objects maintain stable references for nested access
### Change Detection Optimizations
1. **Path-Based Updates**: Only affected parts of state tree are updated
2. **Dependency Tracking**: Variables are only re-evaluated when their dependencies change
3. **Batch Updates**: Multiple changes in single instruction are batched together
4. **Transition Updates**: Non-urgent updates use React transitions for better performance
## Debugging Support
### State Transition Logging
The container reducer can log state transitions for debugging:
```typescript
// From reducer.ts
export function createContainerReducer(debugView: IDebugViewContext) {
const allowLogging = debugView.collectStateTransitions;
// ... logging implementation
}
```
### Component Keys and Resolution
Components receive resolved keys for debugging and tracking:
```typescript
// From renderChild.tsx
const key = extractParam(state, node.uid, appContext, true);
return (
<ComponentWrapper
key={key}
resolvedKey={key} // For debugging container parent chains
// ...
/>
);
```
## Integration Points
### DataSource Integration
DataSource components integrate with the container system through loader actions:
```typescript
// Loader state management
dispatch({
type: ContainerActionKind.LOADER_LOADED,
payload: {
uid: dataSourceUid,
data: fetchedData,
pageInfo: paginationInfo
}
});
```
### Form Integration
Form components manage their state through the container system while maintaining their own internal state for performance.
### API Integration
Component APIs are registered with containers and become part of the state, making them accessible to other components via component IDs.
## Key Design Principles
1. **Hierarchical Encapsulation**: State is scoped to container boundaries while allowing controlled inheritance
2. **Reactive Consistency**: All state changes automatically propagate to dependent UI elements
3. **Async Coordination**: Long-running operations don't block the UI thread
4. **Immutable Updates**: All state changes produce new immutable state objects
5. **Proxy Transparency**: State mutations are detected transparently without special syntax
6. **Error Isolation**: Component errors are contained and don't propagate to affect other parts of the application
This container-based architecture provides XMLUI with a robust, scalable state management solution that maintains the declarative programming model while handling complex state interactions and ensuring optimal performance characteristics.
```