This is page 98 of 145. Use http://codebase.md/xmlui-org/xmlui/xmlui-latest.js?lines=false&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ └── config.json
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-blog-optimized.yml
│ ├── deploy-blog-swa.yml
│ ├── deploy-blog.yml
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs-swa.yml
│ ├── deploy-docs.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│ ├── launch.json
│ └── settings.json
├── blog
│ ├── .gitignore
│ ├── .gitkeep
│ ├── CHANGELOG.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── an-advanced-codefence.gif
│ │ │ │ ├── an-advanced-codefence.mp4
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.png
│ │ │ │ ├── codefence-runner.png
│ │ │ │ ├── integrated-blog-search.png
│ │ │ │ ├── lorem-ipsum.png
│ │ │ │ ├── playground-checkbox-source.png
│ │ │ │ ├── playground.png
│ │ │ │ ├── use-xmlui-mcp-to-find-a-howto.png
│ │ │ │ └── xmlui-demo-gallery.png
│ │ │ ├── introducing-xmlui.md
│ │ │ ├── lorem-ipsum.md
│ │ │ ├── newest-post.md
│ │ │ ├── older-post.md
│ │ │ ├── xmlui-playground.md
│ │ │ └── xmlui-powered-blog.md
│ │ ├── mockServiceWorker.js
│ │ ├── resources
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ └── for-download
│ │ │ │ └── xmlui
│ │ │ │ └── xmlui-standalone.umd.js
│ │ │ ├── github.svg
│ │ │ ├── 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
│ │ └── web.config
│ ├── 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
│ │ └── themes
│ │ └── blog-theme.ts
│ └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── ComponentRefLinks.txt
│ ├── content
│ │ ├── _meta.json
│ │ ├── components
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── APICall.md
│ │ │ ├── App.md
│ │ │ ├── AppHeader.md
│ │ │ ├── AppState.md
│ │ │ ├── AutoComplete.md
│ │ │ ├── Avatar.md
│ │ │ ├── Backdrop.md
│ │ │ ├── Badge.md
│ │ │ ├── BarChart.md
│ │ │ ├── Bookmark.md
│ │ │ ├── Breakout.md
│ │ │ ├── Button.md
│ │ │ ├── Card.md
│ │ │ ├── Carousel.md
│ │ │ ├── ChangeListener.md
│ │ │ ├── Checkbox.md
│ │ │ ├── CHStack.md
│ │ │ ├── ColorPicker.md
│ │ │ ├── Column.md
│ │ │ ├── ContentSeparator.md
│ │ │ ├── CVStack.md
│ │ │ ├── DataSource.md
│ │ │ ├── DateInput.md
│ │ │ ├── DatePicker.md
│ │ │ ├── DonutChart.md
│ │ │ ├── DropdownMenu.md
│ │ │ ├── EmojiSelector.md
│ │ │ ├── ExpandableItem.md
│ │ │ ├── FileInput.md
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FlowLayout.md
│ │ │ ├── Footer.md
│ │ │ ├── Form.md
│ │ │ ├── FormItem.md
│ │ │ ├── FormSection.md
│ │ │ ├── Fragment.md
│ │ │ ├── H1.md
│ │ │ ├── H2.md
│ │ │ ├── H3.md
│ │ │ ├── H4.md
│ │ │ ├── H5.md
│ │ │ ├── H6.md
│ │ │ ├── Heading.md
│ │ │ ├── HSplitter.md
│ │ │ ├── HStack.md
│ │ │ ├── Icon.md
│ │ │ ├── IFrame.md
│ │ │ ├── Image.md
│ │ │ ├── Items.md
│ │ │ ├── LabelList.md
│ │ │ ├── Legend.md
│ │ │ ├── LineChart.md
│ │ │ ├── Link.md
│ │ │ ├── List.md
│ │ │ ├── Logo.md
│ │ │ ├── Markdown.md
│ │ │ ├── MenuItem.md
│ │ │ ├── MenuSeparator.md
│ │ │ ├── ModalDialog.md
│ │ │ ├── NavGroup.md
│ │ │ ├── NavLink.md
│ │ │ ├── NavPanel.md
│ │ │ ├── NoResult.md
│ │ │ ├── NumberBox.md
│ │ │ ├── Option.md
│ │ │ ├── Page.md
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── Pages.md
│ │ │ ├── Pagination.md
│ │ │ ├── PasswordInput.md
│ │ │ ├── PieChart.md
│ │ │ ├── ProgressBar.md
│ │ │ ├── Queue.md
│ │ │ ├── RadioGroup.md
│ │ │ ├── RealTimeAdapter.md
│ │ │ ├── Redirect.md
│ │ │ ├── Select.md
│ │ │ ├── Slider.md
│ │ │ ├── Slot.md
│ │ │ ├── SpaceFiller.md
│ │ │ ├── Spinner.md
│ │ │ ├── Splitter.md
│ │ │ ├── Stack.md
│ │ │ ├── StickyBox.md
│ │ │ ├── SubMenuItem.md
│ │ │ ├── Switch.md
│ │ │ ├── TabItem.md
│ │ │ ├── Table.md
│ │ │ ├── TableOfContents.md
│ │ │ ├── Tabs.md
│ │ │ ├── Text.md
│ │ │ ├── TextArea.md
│ │ │ ├── TextBox.md
│ │ │ ├── Theme.md
│ │ │ ├── TimeInput.md
│ │ │ ├── Timer.md
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneSwitch.md
│ │ │ ├── Tooltip.md
│ │ │ ├── Tree.md
│ │ │ ├── VSplitter.md
│ │ │ ├── VStack.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ ├── xmlui-spreadsheet
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Spreadsheet.md
│ │ │ └── xmlui-website-blocks
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Carousel.md
│ │ │ ├── HelloMd.md
│ │ │ ├── HeroSection.md
│ │ │ └── ScrollToTop.md
│ │ └── extensions
│ │ ├── _meta.json
│ │ ├── xmlui-animations
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Animation.md
│ │ │ ├── FadeAnimation.md
│ │ │ ├── FadeInAnimation.md
│ │ │ ├── FadeOutAnimation.md
│ │ │ ├── ScaleAnimation.md
│ │ │ └── SlideInAnimation.md
│ │ └── xmlui-website-blocks
│ │ ├── _meta.json
│ │ ├── _overview.md
│ │ ├── Carousel.md
│ │ ├── HelloMd.md
│ │ ├── HeroSection.md
│ │ └── ScrollToTop.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── pages
│ │ │ ├── _meta.json
│ │ │ ├── app-structure.md
│ │ │ ├── build-editor-component.md
│ │ │ ├── build-hello-world-component.md
│ │ │ ├── components-intro.md
│ │ │ ├── context-variables.md
│ │ │ ├── forms.md
│ │ │ ├── globals.md
│ │ │ ├── glossary.md
│ │ │ ├── helper-tags.md
│ │ │ ├── hosted-deployment.md
│ │ │ ├── howto
│ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md
│ │ │ │ ├── chain-a-refetch.md
│ │ │ │ ├── control-cache-invalidation.md
│ │ │ │ ├── debounce-user-input-for-api-calls.md
│ │ │ │ ├── debounce-with-changelistener.md
│ │ │ │ ├── debug-a-component.md
│ │ │ │ ├── delay-a-datasource-until-another-datasource-is-ready.md
│ │ │ │ ├── delegate-a-method.md
│ │ │ │ ├── do-custom-form-validation.md
│ │ │ │ ├── expose-a-method-from-a-component.md
│ │ │ │ ├── filter-and-transform-data-from-an-api.md
│ │ │ │ ├── group-items-in-list-by-a-property.md
│ │ │ │ ├── handle-background-operations.md
│ │ │ │ ├── hide-an-element-until-its-datasource-is-ready.md
│ │ │ │ ├── make-a-set-of-equal-width-cards.md
│ │ │ │ ├── make-a-table-responsive.md
│ │ │ │ ├── make-navpanel-width-responsive.md
│ │ │ │ ├── modify-a-value-reported-in-a-column.md
│ │ │ │ ├── paginate-a-list.md
│ │ │ │ ├── pass-data-to-a-modal-dialog.md
│ │ │ │ ├── react-to-button-click-not-keystrokes.md
│ │ │ │ ├── set-the-initial-value-of-a-select-from-fetched-data.md
│ │ │ │ ├── share-a-modaldialog-across-components.md
│ │ │ │ ├── sync-selections-between-table-and-list-views.md
│ │ │ │ ├── update-ui-optimistically.md
│ │ │ │ ├── use-built-in-form-validation.md
│ │ │ │ └── use-the-same-modaldialog-to-add-or-edit.md
│ │ │ ├── howto.md
│ │ │ ├── intro.md
│ │ │ ├── layout.md
│ │ │ ├── markup.md
│ │ │ ├── mcp.md
│ │ │ ├── modal-dialogs.md
│ │ │ ├── news-and-reviews.md
│ │ │ ├── reactive-intro.md
│ │ │ ├── refactoring.md
│ │ │ ├── routing-and-links.md
│ │ │ ├── samples
│ │ │ │ ├── color-palette.xmlui
│ │ │ │ ├── color-values.xmlui
│ │ │ │ ├── shadow-sizes.xmlui
│ │ │ │ ├── spacing-sizes.xmlui
│ │ │ │ ├── swatch.xmlui
│ │ │ │ ├── theme-gallery-brief.xmlui
│ │ │ │ └── theme-gallery.xmlui
│ │ │ ├── scoping.md
│ │ │ ├── scripting.md
│ │ │ ├── styles-and-themes
│ │ │ │ ├── common-units.md
│ │ │ │ ├── layout-props.md
│ │ │ │ ├── theme-variable-defaults.md
│ │ │ │ ├── theme-variables.md
│ │ │ │ └── themes.md
│ │ │ ├── template-properties.md
│ │ │ ├── test.md
│ │ │ ├── tutorial-01.md
│ │ │ ├── tutorial-02.md
│ │ │ ├── tutorial-03.md
│ │ │ ├── tutorial-04.md
│ │ │ ├── tutorial-05.md
│ │ │ ├── tutorial-06.md
│ │ │ ├── tutorial-07.md
│ │ │ ├── tutorial-08.md
│ │ │ ├── tutorial-09.md
│ │ │ ├── tutorial-10.md
│ │ │ ├── tutorial-11.md
│ │ │ ├── tutorial-12.md
│ │ │ ├── universal-properties.md
│ │ │ ├── user-defined-components.md
│ │ │ ├── vscode.md
│ │ │ ├── working-with-markdown.md
│ │ │ ├── working-with-text.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-charts
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── DonutChart.md
│ │ │ │ ├── LabelList.md
│ │ │ │ ├── Legend.md
│ │ │ │ ├── LineChart.md
│ │ │ │ └── PieChart.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ └── xmlui-spreadsheet
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ └── Spreadsheet.md
│ │ ├── resources
│ │ │ ├── devdocs
│ │ │ │ ├── debug-proxy-object-2.png
│ │ │ │ ├── debug-proxy-object.png
│ │ │ │ ├── table_editor_01.png
│ │ │ │ ├── table_editor_02.png
│ │ │ │ ├── table_editor_03.png
│ │ │ │ ├── table_editor_04.png
│ │ │ │ ├── table_editor_05.png
│ │ │ │ ├── table_editor_06.png
│ │ │ │ ├── table_editor_07.png
│ │ │ │ ├── table_editor_08.png
│ │ │ │ ├── table_editor_09.png
│ │ │ │ ├── table_editor_10.png
│ │ │ │ ├── table_editor_11.png
│ │ │ │ ├── table-editor-01.png
│ │ │ │ ├── table-editor-02.png
│ │ │ │ ├── table-editor-03.png
│ │ │ │ ├── table-editor-04.png
│ │ │ │ ├── table-editor-06.png
│ │ │ │ ├── table-editor-07.png
│ │ │ │ ├── table-editor-08.png
│ │ │ │ ├── table-editor-09.png
│ │ │ │ └── xmlui-rendering-of-tiptap-markdown.png
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ ├── clients.json
│ │ │ │ ├── daily-revenue.json
│ │ │ │ ├── dashboard-stats.json
│ │ │ │ ├── demo.xmlui
│ │ │ │ ├── demo.xmlui.xs
│ │ │ │ ├── downloads
│ │ │ │ │ └── downloads.json
│ │ │ │ ├── for-download
│ │ │ │ │ ├── index-with-api.html
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── mockApi.js
│ │ │ │ │ ├── start-darwin.sh
│ │ │ │ │ ├── start-linux.sh
│ │ │ │ │ ├── start.bat
│ │ │ │ │ └── xmlui
│ │ │ │ │ └── xmlui-standalone.umd.js
│ │ │ │ ├── getting-started
│ │ │ │ │ ├── cl-tutorial-final.zip
│ │ │ │ │ ├── cl-tutorial.zip
│ │ │ │ │ ├── cl-tutorial2.zip
│ │ │ │ │ ├── cl-tutorial3.zip
│ │ │ │ │ ├── cl-tutorial4.zip
│ │ │ │ │ ├── cl-tutorial5.zip
│ │ │ │ │ ├── cl-tutorial6.zip
│ │ │ │ │ ├── getting-started.zip
│ │ │ │ │ ├── hello-xmlui.zip
│ │ │ │ │ ├── xmlui-empty.zip
│ │ │ │ │ └── xmlui-starter.zip
│ │ │ │ ├── howto
│ │ │ │ │ └── component-icons
│ │ │ │ │ └── up-arrow.svg
│ │ │ │ ├── invoices.json
│ │ │ │ ├── monthly-status.json
│ │ │ │ ├── news-and-reviews.json
│ │ │ │ ├── products.json
│ │ │ │ ├── releases.json
│ │ │ │ ├── tutorials
│ │ │ │ │ ├── datasource
│ │ │ │ │ │ └── api.ts
│ │ │ │ │ └── p2do
│ │ │ │ │ ├── api.ts
│ │ │ │ │ └── todo-logo.svg
│ │ │ │ └── xmlui.json
│ │ │ ├── github.svg
│ │ │ ├── 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
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ ├── Boxes.xmlui
│ │ │ ├── Breadcrumb.xmlui
│ │ │ ├── ChangeLog.xmlui
│ │ │ ├── ColorPalette.xmlui
│ │ │ ├── DocumentLinks.xmlui
│ │ │ ├── DocumentPage.xmlui
│ │ │ ├── DocumentPageNoTOC.xmlui
│ │ │ ├── Icons.xmlui
│ │ │ ├── IncButton.xmlui
│ │ │ ├── IncButton2.xmlui
│ │ │ ├── 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
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│ ├── tsconfig.json
│ ├── xmlui-animations
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── Animation.tsx
│ │ ├── AnimationNative.tsx
│ │ ├── FadeAnimation.tsx
│ │ ├── FadeInAnimation.tsx
│ │ ├── FadeOutAnimation.tsx
│ │ ├── index.tsx
│ │ ├── ScaleAnimation.tsx
│ │ └── SlideInAnimation.tsx
│ ├── xmlui-devtools
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── devtools
│ │ │ │ ├── DevTools.tsx
│ │ │ │ ├── DevToolsNative.module.scss
│ │ │ │ ├── DevToolsNative.tsx
│ │ │ │ ├── ModalDialog.module.scss
│ │ │ │ ├── ModalDialog.tsx
│ │ │ │ ├── ModalVisibilityContext.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── editor
│ │ │ │ └── Editor.tsx
│ │ │ └── index.tsx
│ │ └── vite.config-overrides.ts
│ ├── xmlui-hello-world
│ │ ├── .gitignore
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── HelloWorld.module.scss
│ │ ├── HelloWorld.tsx
│ │ ├── HelloWorldNative.tsx
│ │ └── index.tsx
│ ├── xmlui-os-frames
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── IPhoneFrame.module.scss
│ │ ├── IPhoneFrame.tsx
│ │ ├── MacOSAppFrame.module.scss
│ │ ├── MacOSAppFrame.tsx
│ │ ├── WindowsAppFrame.module.scss
│ │ └── WindowsAppFrame.tsx
│ ├── xmlui-pdf
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ ├── components
│ │ │ │ └── Pdf.xmlui
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── LazyPdfNative.tsx
│ │ ├── Pdf.module.scss
│ │ └── Pdf.tsx
│ ├── xmlui-playground
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── hooks
│ │ │ ├── usePlayground.ts
│ │ │ └── useToast.ts
│ │ ├── index.tsx
│ │ ├── playground
│ │ │ ├── Box.module.scss
│ │ │ ├── Box.tsx
│ │ │ ├── CodeSelector.module.scss
│ │ │ ├── CodeSelector.tsx
│ │ │ ├── ConfirmationDialog.module.scss
│ │ │ ├── ConfirmationDialog.tsx
│ │ │ ├── Editor.tsx
│ │ │ ├── Header.module.scss
│ │ │ ├── Header.tsx
│ │ │ ├── Playground.tsx
│ │ │ ├── PlaygroundContent.module.scss
│ │ │ ├── PlaygroundContent.tsx
│ │ │ ├── PlaygroundNative.module.scss
│ │ │ ├── PlaygroundNative.tsx
│ │ │ ├── Preview.tsx
│ │ │ ├── StandalonePlayground.tsx
│ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ ├── ThemeSwitcher.module.scss
│ │ │ ├── ThemeSwitcher.tsx
│ │ │ └── utils.ts
│ │ ├── providers
│ │ │ ├── Toast.module.scss
│ │ │ └── ToastProvider.tsx
│ │ ├── state
│ │ │ └── store.ts
│ │ ├── themes
│ │ │ └── theme.ts
│ │ └── utils
│ │ └── helpers.ts
│ ├── xmlui-search
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Search.module.scss
│ │ └── Search.tsx
│ ├── xmlui-spreadsheet
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Spreadsheet.tsx
│ │ └── SpreadsheetNative.tsx
│ └── xmlui-website-blocks
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── demo
│ │ ├── components
│ │ │ ├── HeroBackgroundBreakoutPage.xmlui
│ │ │ ├── HeroBackgroundsPage.xmlui
│ │ │ ├── HeroContentsPage.xmlui
│ │ │ ├── HeroTextAlignPage.xmlui
│ │ │ ├── HeroTextPage.xmlui
│ │ │ └── HeroTonesPage.xmlui
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── default.ts
│ ├── index.html
│ ├── index.ts
│ ├── meta
│ │ └── componentsMetadata.ts
│ ├── package.json
│ ├── public
│ │ └── resources
│ │ ├── building.jpg
│ │ └── xmlui-logo.svg
│ └── src
│ ├── Carousel
│ │ ├── Carousel.module.scss
│ │ ├── Carousel.tsx
│ │ ├── CarouselContext.tsx
│ │ └── CarouselNative.tsx
│ ├── FancyButton
│ │ ├── FancyButton.module.scss
│ │ ├── FancyButton.tsx
│ │ └── FancyButton.xmlui
│ ├── Hello
│ │ ├── Hello.tsx
│ │ ├── Hello.xmlui
│ │ └── Hello.xmlui.xs
│ ├── HeroSection
│ │ ├── HeroSection.module.scss
│ │ ├── HeroSection.spec.ts
│ │ ├── HeroSection.tsx
│ │ └── HeroSectionNative.tsx
│ ├── index.tsx
│ ├── ScrollToTop
│ │ ├── ScrollToTop.module.scss
│ │ ├── ScrollToTop.tsx
│ │ └── ScrollToTopNative.tsx
│ └── vite-env.d.ts
├── playwright.config.ts
├── README.md
├── tools
│ ├── codefence
│ │ └── xmlui-code-fence-docs.md
│ ├── create-app
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── create-app.ts
│ │ ├── helpers
│ │ │ ├── copy.ts
│ │ │ ├── get-pkg-manager.ts
│ │ │ ├── git.ts
│ │ │ ├── install.ts
│ │ │ ├── is-folder-empty.ts
│ │ │ ├── is-writeable.ts
│ │ │ ├── make-dir.ts
│ │ │ └── validate-pkg.ts
│ │ ├── index.ts
│ │ ├── package.json
│ │ ├── templates
│ │ │ ├── default
│ │ │ │ └── ts
│ │ │ │ ├── gitignore
│ │ │ │ ├── index.html
│ │ │ │ ├── index.ts
│ │ │ │ ├── public
│ │ │ │ │ ├── mockServiceWorker.js
│ │ │ │ │ ├── resources
│ │ │ │ │ │ ├── favicon.ico
│ │ │ │ │ │ └── xmlui-logo.svg
│ │ │ │ │ └── serve.json
│ │ │ │ └── src
│ │ │ │ ├── components
│ │ │ │ │ ├── ApiAware.xmlui
│ │ │ │ │ ├── Home.xmlui
│ │ │ │ │ ├── IncButton.xmlui
│ │ │ │ │ └── PagePanel.xmlui
│ │ │ │ ├── config.ts
│ │ │ │ └── Main.xmlui
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ └── tsconfig.json
│ ├── create-xmlui-hello-world
│ │ ├── index.js
│ │ └── package.json
│ └── vscode
│ ├── .gitignore
│ ├── .vscode
│ │ ├── launch.json
│ │ └── tasks.json
│ ├── .vscodeignore
│ ├── build.sh
│ ├── CHANGELOG.md
│ ├── esbuild.js
│ ├── eslint.config.mjs
│ ├── formatter-docs.md
│ ├── generate-test-sample.sh
│ ├── LICENSE.md
│ ├── package-lock.json
│ ├── package.json
│ ├── README.md
│ ├── resources
│ │ ├── xmlui-logo.png
│ │ └── xmlui-markup-syntax-highlighting.png
│ ├── src
│ │ ├── extension.ts
│ │ └── server.ts
│ ├── syntaxes
│ │ └── xmlui.tmLanguage.json
│ ├── test-samples
│ │ └── sample.xmlui
│ ├── tsconfig.json
│ └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
├── .gitignore
├── bin
│ ├── bootstrap.cjs
│ ├── bootstrap.js
│ ├── build-lib.ts
│ ├── build.ts
│ ├── index.ts
│ ├── preview.ts
│ ├── start.ts
│ ├── vite-xmlui-plugin.ts
│ └── viteConfig.ts
├── CHANGELOG.md
├── conventions
│ ├── component-qa-checklist.md
│ ├── copilot-conventions.md
│ ├── create-xmlui-components.md
│ ├── mermaid.md
│ ├── testing-conventions.md
│ └── xmlui-in-a-nutshell.md
├── dev-docs
│ ├── accessibility.md
│ ├── build-system.md
│ ├── build-xmlui.md
│ ├── component-behaviors.md
│ ├── component-metadata.md
│ ├── components-with-options.md
│ ├── containers.md
│ ├── data-operations.md
│ ├── glossary.md
│ ├── index.md
│ ├── next
│ │ ├── component-dev-guide.md
│ │ ├── configuration-management-enhancement-summary.md
│ │ ├── documentation-scripts-refactoring-complete-summary.md
│ │ ├── documentation-scripts-refactoring-plan.md
│ │ ├── duplicate-pattern-extraction-summary.md
│ │ ├── error-handling-standardization-summary.md
│ │ ├── generating-component-reference.md
│ │ ├── index.md
│ │ ├── logging-consistency-implementation-summary.md
│ │ ├── project-build.md
│ │ ├── project-structure.md
│ │ ├── theme-context.md
│ │ ├── tiptap-design-considerations.md
│ │ ├── working-with-code.md
│ │ ├── xmlui-runtime-architecture
│ │ └── xmlui-wcag-accessibility-report.md
│ ├── react-fundamentals.md
│ ├── release-method.md
│ ├── standalone-app.md
│ ├── theme-variables-refactoring.md
│ ├── ud-components.md
│ └── xmlui-repo.md
├── package.json
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── extract-component-metadata.js
│ ├── generate-docs
│ │ ├── build-downloads-map.mjs
│ │ ├── build-pages-map.mjs
│ │ ├── components-config.json
│ │ ├── configuration-management.mjs
│ │ ├── constants.mjs
│ │ ├── create-theme-files.mjs
│ │ ├── DocsGenerator.mjs
│ │ ├── error-handling.mjs
│ │ ├── extensions-config.json
│ │ ├── folders.mjs
│ │ ├── generate-summary-files.mjs
│ │ ├── get-docs.mjs
│ │ ├── input-handler.mjs
│ │ ├── logger.mjs
│ │ ├── logging-standards.mjs
│ │ ├── MetadataProcessor.mjs
│ │ ├── pattern-utilities.mjs
│ │ └── utils.mjs
│ ├── generate-metadata-markdown.js
│ ├── get-langserver-metadata.js
│ ├── inline-links.mjs
│ └── README-e2e-summary.md
├── src
│ ├── abstractions
│ │ ├── _conventions.md
│ │ ├── ActionDefs.ts
│ │ ├── AppContextDefs.ts
│ │ ├── ComponentDefs.ts
│ │ ├── ContainerDefs.ts
│ │ ├── ExtensionDefs.ts
│ │ ├── FunctionDefs.ts
│ │ ├── RendererDefs.ts
│ │ ├── scripting
│ │ │ ├── BlockScope.ts
│ │ │ ├── Compilation.ts
│ │ │ ├── LogicalThread.ts
│ │ │ ├── LoopScope.ts
│ │ │ ├── modules.ts
│ │ │ ├── ScriptParserError.ts
│ │ │ ├── Token.ts
│ │ │ ├── TryScope.ts
│ │ │ └── TryScopeExp.ts
│ │ └── ThemingDefs.ts
│ ├── components
│ │ ├── _conventions.md
│ │ ├── abstractions.ts
│ │ ├── Accordion
│ │ │ ├── Accordion.md
│ │ │ ├── Accordion.module.scss
│ │ │ ├── Accordion.spec.ts
│ │ │ ├── Accordion.tsx
│ │ │ ├── AccordionContext.tsx
│ │ │ ├── AccordionItem.tsx
│ │ │ ├── AccordionItemNative.tsx
│ │ │ └── AccordionNative.tsx
│ │ ├── Animation
│ │ │ └── AnimationNative.tsx
│ │ ├── APICall
│ │ │ ├── APICall.md
│ │ │ ├── APICall.spec.ts
│ │ │ ├── APICall.tsx
│ │ │ └── APICallNative.tsx
│ │ ├── App
│ │ │ ├── App.md
│ │ │ ├── App.module.scss
│ │ │ ├── App.spec.ts
│ │ │ ├── App.tsx
│ │ │ ├── AppLayoutContext.ts
│ │ │ ├── AppNative.tsx
│ │ │ ├── AppStateContext.ts
│ │ │ ├── doc-resources
│ │ │ │ ├── condensed-sticky.xmlui
│ │ │ │ ├── condensed.xmlui
│ │ │ │ ├── horizontal-sticky.xmlui
│ │ │ │ ├── horizontal.xmlui
│ │ │ │ ├── vertical-full-header.xmlui
│ │ │ │ ├── vertical-sticky.xmlui
│ │ │ │ └── vertical.xmlui
│ │ │ ├── IndexerContext.ts
│ │ │ ├── LinkInfoContext.ts
│ │ │ ├── SearchContext.tsx
│ │ │ ├── Sheet.module.scss
│ │ │ └── Sheet.tsx
│ │ ├── AppHeader
│ │ │ ├── AppHeader.md
│ │ │ ├── AppHeader.module.scss
│ │ │ ├── AppHeader.spec.ts
│ │ │ ├── AppHeader.tsx
│ │ │ └── AppHeaderNative.tsx
│ │ ├── AppState
│ │ │ ├── AppState.md
│ │ │ ├── AppState.spec.ts
│ │ │ ├── AppState.tsx
│ │ │ └── AppStateNative.tsx
│ │ ├── AutoComplete
│ │ │ ├── AutoComplete.md
│ │ │ ├── AutoComplete.module.scss
│ │ │ ├── AutoComplete.spec.ts
│ │ │ ├── AutoComplete.tsx
│ │ │ ├── AutoCompleteContext.tsx
│ │ │ └── AutoCompleteNative.tsx
│ │ ├── Avatar
│ │ │ ├── Avatar.md
│ │ │ ├── Avatar.module.scss
│ │ │ ├── Avatar.spec.ts
│ │ │ ├── Avatar.tsx
│ │ │ └── AvatarNative.tsx
│ │ ├── Backdrop
│ │ │ ├── Backdrop.md
│ │ │ ├── Backdrop.module.scss
│ │ │ ├── Backdrop.spec.ts
│ │ │ ├── Backdrop.tsx
│ │ │ └── BackdropNative.tsx
│ │ ├── Badge
│ │ │ ├── Badge.md
│ │ │ ├── Badge.module.scss
│ │ │ ├── Badge.spec.ts
│ │ │ ├── Badge.tsx
│ │ │ └── BadgeNative.tsx
│ │ ├── Bookmark
│ │ │ ├── Bookmark.md
│ │ │ ├── Bookmark.module.scss
│ │ │ ├── Bookmark.spec.ts
│ │ │ ├── Bookmark.tsx
│ │ │ └── BookmarkNative.tsx
│ │ ├── Breakout
│ │ │ ├── Breakout.module.scss
│ │ │ ├── Breakout.spec.ts
│ │ │ ├── Breakout.tsx
│ │ │ └── BreakoutNative.tsx
│ │ ├── Button
│ │ │ ├── Button-style.spec.ts
│ │ │ ├── Button.md
│ │ │ ├── Button.module.scss
│ │ │ ├── Button.spec.ts
│ │ │ ├── Button.tsx
│ │ │ └── ButtonNative.tsx
│ │ ├── Card
│ │ │ ├── Card.md
│ │ │ ├── Card.module.scss
│ │ │ ├── Card.spec.ts
│ │ │ ├── Card.tsx
│ │ │ └── CardNative.tsx
│ │ ├── Carousel
│ │ │ ├── Carousel.md
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.spec.ts
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ ├── CarouselItem.tsx
│ │ │ ├── CarouselItemNative.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── ChangeListener
│ │ │ ├── ChangeListener.md
│ │ │ ├── ChangeListener.spec.ts
│ │ │ ├── ChangeListener.tsx
│ │ │ └── ChangeListenerNative.tsx
│ │ ├── chart-color-schemes.ts
│ │ ├── Charts
│ │ │ ├── AreaChart
│ │ │ │ ├── AreaChart.md
│ │ │ │ ├── AreaChart.spec.ts
│ │ │ │ ├── AreaChart.tsx
│ │ │ │ └── AreaChartNative.tsx
│ │ │ ├── BarChart
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── BarChart.module.scss
│ │ │ │ ├── BarChart.spec.ts
│ │ │ │ ├── BarChart.tsx
│ │ │ │ └── BarChartNative.tsx
│ │ │ ├── DonutChart
│ │ │ │ ├── DonutChart.spec.ts
│ │ │ │ └── DonutChart.tsx
│ │ │ ├── LabelList
│ │ │ │ ├── LabelList.module.scss
│ │ │ │ ├── LabelList.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ └── LabelListNative.tsx
│ │ │ ├── Legend
│ │ │ │ ├── Legend.spec.ts
│ │ │ │ ├── Legend.tsx
│ │ │ │ └── LegendNative.tsx
│ │ │ ├── LineChart
│ │ │ │ ├── LineChart.md
│ │ │ │ ├── LineChart.module.scss
│ │ │ │ ├── LineChart.spec.ts
│ │ │ │ ├── LineChart.tsx
│ │ │ │ └── LineChartNative.tsx
│ │ │ ├── PieChart
│ │ │ │ ├── PieChart.md
│ │ │ │ ├── PieChart.spec.ts
│ │ │ │ ├── PieChart.tsx
│ │ │ │ ├── PieChartNative.module.scss
│ │ │ │ └── PieChartNative.tsx
│ │ │ ├── RadarChart
│ │ │ │ ├── RadarChart.md
│ │ │ │ ├── RadarChart.spec.ts
│ │ │ │ ├── RadarChart.tsx
│ │ │ │ └── RadarChartNative.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── TooltipContent.module.scss
│ │ │ │ ├── TooltipContent.spec.ts
│ │ │ │ └── TooltipContent.tsx
│ │ │ └── utils
│ │ │ ├── abstractions.ts
│ │ │ └── ChartProvider.tsx
│ │ ├── Checkbox
│ │ │ ├── Checkbox.md
│ │ │ ├── Checkbox.spec.ts
│ │ │ └── Checkbox.tsx
│ │ ├── CodeBlock
│ │ │ ├── CodeBlock.module.scss
│ │ │ ├── CodeBlock.spec.ts
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CodeBlockNative.tsx
│ │ │ └── highlight-code.ts
│ │ ├── collectedComponentMetadata.ts
│ │ ├── ColorPicker
│ │ │ ├── ColorPicker.md
│ │ │ ├── ColorPicker.module.scss
│ │ │ ├── ColorPicker.spec.ts
│ │ │ ├── ColorPicker.tsx
│ │ │ └── ColorPickerNative.tsx
│ │ ├── Column
│ │ │ ├── Column.md
│ │ │ ├── Column.tsx
│ │ │ ├── ColumnNative.tsx
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ └── TableContext.tsx
│ │ ├── component-utils.ts
│ │ ├── ComponentProvider.tsx
│ │ ├── ComponentRegistryContext.tsx
│ │ ├── container-helpers.tsx
│ │ ├── ContentSeparator
│ │ │ ├── ContentSeparator.md
│ │ │ ├── ContentSeparator.module.scss
│ │ │ ├── ContentSeparator.spec.ts
│ │ │ ├── ContentSeparator.tsx
│ │ │ ├── ContentSeparatorNative.tsx
│ │ │ └── test-padding.xmlui
│ │ ├── DataSource
│ │ │ ├── DataSource.md
│ │ │ └── DataSource.tsx
│ │ ├── DateInput
│ │ │ ├── DateInput.md
│ │ │ ├── DateInput.module.scss
│ │ │ ├── DateInput.spec.ts
│ │ │ ├── DateInput.tsx
│ │ │ └── DateInputNative.tsx
│ │ ├── DatePicker
│ │ │ ├── DatePicker.md
│ │ │ ├── DatePicker.module.scss
│ │ │ ├── DatePicker.spec.ts
│ │ │ ├── DatePicker.tsx
│ │ │ └── DatePickerNative.tsx
│ │ ├── DropdownMenu
│ │ │ ├── DropdownMenu.md
│ │ │ ├── DropdownMenu.module.scss
│ │ │ ├── DropdownMenu.spec.ts
│ │ │ ├── DropdownMenu.tsx
│ │ │ ├── DropdownMenuNative.tsx
│ │ │ ├── MenuItem.md
│ │ │ └── SubMenuItem.md
│ │ ├── EmojiSelector
│ │ │ ├── EmojiSelector.md
│ │ │ ├── EmojiSelector.spec.ts
│ │ │ ├── EmojiSelector.tsx
│ │ │ └── EmojiSelectorNative.tsx
│ │ ├── ExpandableItem
│ │ │ ├── ExpandableItem.module.scss
│ │ │ ├── ExpandableItem.spec.ts
│ │ │ ├── ExpandableItem.tsx
│ │ │ └── ExpandableItemNative.tsx
│ │ ├── FileInput
│ │ │ ├── FileInput.md
│ │ │ ├── FileInput.module.scss
│ │ │ ├── FileInput.spec.ts
│ │ │ ├── FileInput.tsx
│ │ │ └── FileInputNative.tsx
│ │ ├── FileUploadDropZone
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FileUploadDropZone.module.scss
│ │ │ ├── FileUploadDropZone.spec.ts
│ │ │ ├── FileUploadDropZone.tsx
│ │ │ └── FileUploadDropZoneNative.tsx
│ │ ├── FlowLayout
│ │ │ ├── FlowLayout.md
│ │ │ ├── FlowLayout.module.scss
│ │ │ ├── FlowLayout.spec.ts
│ │ │ ├── FlowLayout.spec.ts-snapshots
│ │ │ │ └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
│ │ │ ├── FlowLayout.tsx
│ │ │ └── FlowLayoutNative.tsx
│ │ ├── Footer
│ │ │ ├── Footer.md
│ │ │ ├── Footer.module.scss
│ │ │ ├── Footer.spec.ts
│ │ │ ├── Footer.tsx
│ │ │ └── FooterNative.tsx
│ │ ├── Form
│ │ │ ├── Form.md
│ │ │ ├── Form.module.scss
│ │ │ ├── Form.spec.ts
│ │ │ ├── Form.tsx
│ │ │ ├── formActions.ts
│ │ │ ├── FormContext.ts
│ │ │ └── FormNative.tsx
│ │ ├── FormItem
│ │ │ ├── FormItem.md
│ │ │ ├── FormItem.module.scss
│ │ │ ├── FormItem.spec.ts
│ │ │ ├── FormItem.tsx
│ │ │ ├── FormItemNative.tsx
│ │ │ ├── HelperText.module.scss
│ │ │ ├── HelperText.tsx
│ │ │ ├── ItemWithLabel.tsx
│ │ │ └── Validations.ts
│ │ ├── FormSection
│ │ │ ├── FormSection.md
│ │ │ ├── FormSection.ts
│ │ │ └── FormSection.xmlui
│ │ ├── Fragment
│ │ │ ├── Fragment.spec.ts
│ │ │ └── Fragment.tsx
│ │ ├── Heading
│ │ │ ├── abstractions.ts
│ │ │ ├── H1.md
│ │ │ ├── H1.spec.ts
│ │ │ ├── H2.md
│ │ │ ├── H2.spec.ts
│ │ │ ├── H3.md
│ │ │ ├── H3.spec.ts
│ │ │ ├── H4.md
│ │ │ ├── H4.spec.ts
│ │ │ ├── H5.md
│ │ │ ├── H5.spec.ts
│ │ │ ├── H6.md
│ │ │ ├── H6.spec.ts
│ │ │ ├── Heading.md
│ │ │ ├── Heading.module.scss
│ │ │ ├── Heading.spec.ts
│ │ │ ├── Heading.tsx
│ │ │ └── HeadingNative.tsx
│ │ ├── HoverCard
│ │ │ ├── HoverCard.tsx
│ │ │ └── HovercardNative.tsx
│ │ ├── HtmlTags
│ │ │ ├── HtmlTags.module.scss
│ │ │ ├── HtmlTags.spec.ts
│ │ │ └── HtmlTags.tsx
│ │ ├── Icon
│ │ │ ├── AdmonitionDanger.tsx
│ │ │ ├── AdmonitionInfo.tsx
│ │ │ ├── AdmonitionNote.tsx
│ │ │ ├── AdmonitionTip.tsx
│ │ │ ├── AdmonitionWarning.tsx
│ │ │ ├── ApiIcon.tsx
│ │ │ ├── ArrowDropDown.module.scss
│ │ │ ├── ArrowDropDown.tsx
│ │ │ ├── ArrowDropUp.module.scss
│ │ │ ├── ArrowDropUp.tsx
│ │ │ ├── ArrowLeft.module.scss
│ │ │ ├── ArrowLeft.tsx
│ │ │ ├── ArrowRight.module.scss
│ │ │ ├── ArrowRight.tsx
│ │ │ ├── Attach.tsx
│ │ │ ├── Binding.module.scss
│ │ │ ├── Binding.tsx
│ │ │ ├── BoardIcon.tsx
│ │ │ ├── BoxIcon.tsx
│ │ │ ├── CheckIcon.tsx
│ │ │ ├── ChevronDownIcon.tsx
│ │ │ ├── ChevronLeft.tsx
│ │ │ ├── ChevronRight.tsx
│ │ │ ├── ChevronUpIcon.tsx
│ │ │ ├── CodeFileIcon.tsx
│ │ │ ├── CodeSandbox.tsx
│ │ │ ├── CompactListIcon.tsx
│ │ │ ├── ContentCopyIcon.tsx
│ │ │ ├── DarkToLightIcon.tsx
│ │ │ ├── DatabaseIcon.module.scss
│ │ │ ├── DatabaseIcon.tsx
│ │ │ ├── DocFileIcon.tsx
│ │ │ ├── DocIcon.tsx
│ │ │ ├── DotMenuHorizontalIcon.tsx
│ │ │ ├── DotMenuIcon.tsx
│ │ │ ├── EmailIcon.tsx
│ │ │ ├── EmptyFolderIcon.tsx
│ │ │ ├── ErrorIcon.tsx
│ │ │ ├── ExpressionIcon.tsx
│ │ │ ├── FillPlusCricleIcon.tsx
│ │ │ ├── FilterIcon.tsx
│ │ │ ├── FolderIcon.tsx
│ │ │ ├── GlobeIcon.tsx
│ │ │ ├── HomeIcon.tsx
│ │ │ ├── HyperLinkIcon.tsx
│ │ │ ├── Icon.md
│ │ │ ├── Icon.module.scss
│ │ │ ├── Icon.spec.ts
│ │ │ ├── Icon.tsx
│ │ │ ├── IconNative.tsx
│ │ │ ├── ImageFileIcon.tsx
│ │ │ ├── Inspect.tsx
│ │ │ ├── LightToDark.tsx
│ │ │ ├── LinkIcon.tsx
│ │ │ ├── ListIcon.tsx
│ │ │ ├── LooseListIcon.tsx
│ │ │ ├── MoonIcon.tsx
│ │ │ ├── MoreOptionsIcon.tsx
│ │ │ ├── NoSortIcon.tsx
│ │ │ ├── PDFIcon.tsx
│ │ │ ├── PenIcon.tsx
│ │ │ ├── PhoneIcon.tsx
│ │ │ ├── PhotoIcon.tsx
│ │ │ ├── PlusIcon.tsx
│ │ │ ├── SearchIcon.tsx
│ │ │ ├── ShareIcon.tsx
│ │ │ ├── SortAscendingIcon.tsx
│ │ │ ├── SortDescendingIcon.tsx
│ │ │ ├── StarsIcon.tsx
│ │ │ ├── SunIcon.tsx
│ │ │ ├── svg
│ │ │ │ ├── admonition_danger.svg
│ │ │ │ ├── admonition_info.svg
│ │ │ │ ├── admonition_note.svg
│ │ │ │ ├── admonition_tip.svg
│ │ │ │ ├── admonition_warning.svg
│ │ │ │ ├── api.svg
│ │ │ │ ├── arrow-dropdown.svg
│ │ │ │ ├── arrow-left.svg
│ │ │ │ ├── arrow-right.svg
│ │ │ │ ├── arrow-up.svg
│ │ │ │ ├── attach.svg
│ │ │ │ ├── binding.svg
│ │ │ │ ├── box.svg
│ │ │ │ ├── bulb.svg
│ │ │ │ ├── code-file.svg
│ │ │ │ ├── code-sandbox.svg
│ │ │ │ ├── dark_to_light.svg
│ │ │ │ ├── database.svg
│ │ │ │ ├── doc.svg
│ │ │ │ ├── empty-folder.svg
│ │ │ │ ├── expression.svg
│ │ │ │ ├── eye-closed.svg
│ │ │ │ ├── eye-dark.svg
│ │ │ │ ├── eye.svg
│ │ │ │ ├── file-text.svg
│ │ │ │ ├── filter.svg
│ │ │ │ ├── folder.svg
│ │ │ │ ├── img.svg
│ │ │ │ ├── inspect.svg
│ │ │ │ ├── light_to_dark.svg
│ │ │ │ ├── moon.svg
│ │ │ │ ├── pdf.svg
│ │ │ │ ├── photo.svg
│ │ │ │ ├── share.svg
│ │ │ │ ├── stars.svg
│ │ │ │ ├── sun.svg
│ │ │ │ ├── trending-down.svg
│ │ │ │ ├── trending-level.svg
│ │ │ │ ├── trending-up.svg
│ │ │ │ ├── txt.svg
│ │ │ │ ├── unknown-file.svg
│ │ │ │ ├── unlink.svg
│ │ │ │ └── xls.svg
│ │ │ ├── TableDeleteColumnIcon.tsx
│ │ │ ├── TableDeleteRowIcon.tsx
│ │ │ ├── TableInsertColumnIcon.tsx
│ │ │ ├── TableInsertRowIcon.tsx
│ │ │ ├── TrashIcon.tsx
│ │ │ ├── TrendingDownIcon.tsx
│ │ │ ├── TrendingLevelIcon.tsx
│ │ │ ├── TrendingUpIcon.tsx
│ │ │ ├── TxtIcon.tsx
│ │ │ ├── UnknownFileIcon.tsx
│ │ │ ├── UnlinkIcon.tsx
│ │ │ ├── UserIcon.tsx
│ │ │ ├── WarningIcon.tsx
│ │ │ └── XlsIcon.tsx
│ │ ├── IconProvider.tsx
│ │ ├── IconRegistryContext.tsx
│ │ ├── IFrame
│ │ │ ├── IFrame.md
│ │ │ ├── IFrame.module.scss
│ │ │ ├── IFrame.spec.ts
│ │ │ ├── IFrame.tsx
│ │ │ └── IFrameNative.tsx
│ │ ├── Image
│ │ │ ├── Image.md
│ │ │ ├── Image.module.scss
│ │ │ ├── Image.spec.ts
│ │ │ ├── Image.tsx
│ │ │ └── ImageNative.tsx
│ │ ├── Input
│ │ │ ├── index.ts
│ │ │ ├── InputAdornment.module.scss
│ │ │ ├── InputAdornment.tsx
│ │ │ ├── InputDivider.module.scss
│ │ │ ├── InputDivider.tsx
│ │ │ ├── InputLabel.module.scss
│ │ │ ├── InputLabel.tsx
│ │ │ ├── PartialInput.module.scss
│ │ │ └── PartialInput.tsx
│ │ ├── InspectButton
│ │ │ ├── InspectButton.module.scss
│ │ │ └── InspectButton.tsx
│ │ ├── Items
│ │ │ ├── Items.md
│ │ │ ├── Items.spec.ts
│ │ │ ├── Items.tsx
│ │ │ └── ItemsNative.tsx
│ │ ├── Link
│ │ │ ├── Link.md
│ │ │ ├── Link.module.scss
│ │ │ ├── Link.spec.ts
│ │ │ ├── Link.tsx
│ │ │ └── LinkNative.tsx
│ │ ├── List
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── List.md
│ │ │ ├── List.module.scss
│ │ │ ├── List.spec.ts
│ │ │ ├── List.tsx
│ │ │ └── ListNative.tsx
│ │ ├── Logo
│ │ │ ├── doc-resources
│ │ │ │ └── xmlui-logo.svg
│ │ │ ├── Logo.md
│ │ │ ├── Logo.tsx
│ │ │ └── LogoNative.tsx
│ │ ├── Markdown
│ │ │ ├── CodeText.module.scss
│ │ │ ├── CodeText.tsx
│ │ │ ├── Markdown.md
│ │ │ ├── Markdown.module.scss
│ │ │ ├── Markdown.spec.ts
│ │ │ ├── Markdown.tsx
│ │ │ ├── MarkdownNative.tsx
│ │ │ ├── parse-binding-expr.ts
│ │ │ └── utils.ts
│ │ ├── metadata-helpers.ts
│ │ ├── ModalDialog
│ │ │ ├── ConfirmationModalContextProvider.tsx
│ │ │ ├── Dialog.module.scss
│ │ │ ├── Dialog.tsx
│ │ │ ├── ModalDialog.md
│ │ │ ├── ModalDialog.module.scss
│ │ │ ├── ModalDialog.spec.ts
│ │ │ ├── ModalDialog.tsx
│ │ │ ├── ModalDialogNative.tsx
│ │ │ └── ModalVisibilityContext.tsx
│ │ ├── NavGroup
│ │ │ ├── NavGroup.md
│ │ │ ├── NavGroup.module.scss
│ │ │ ├── NavGroup.spec.ts
│ │ │ ├── NavGroup.tsx
│ │ │ ├── NavGroupContext.ts
│ │ │ └── NavGroupNative.tsx
│ │ ├── NavLink
│ │ │ ├── NavLink.md
│ │ │ ├── NavLink.module.scss
│ │ │ ├── NavLink.spec.ts
│ │ │ ├── NavLink.tsx
│ │ │ └── NavLinkNative.tsx
│ │ ├── NavPanel
│ │ │ ├── NavPanel.md
│ │ │ ├── NavPanel.module.scss
│ │ │ ├── NavPanel.spec.ts
│ │ │ ├── NavPanel.tsx
│ │ │ └── NavPanelNative.tsx
│ │ ├── NestedApp
│ │ │ ├── AppWithCodeView.module.scss
│ │ │ ├── AppWithCodeView.tsx
│ │ │ ├── AppWithCodeViewNative.tsx
│ │ │ ├── defaultProps.tsx
│ │ │ ├── logo.svg
│ │ │ ├── NestedApp.module.scss
│ │ │ ├── NestedApp.tsx
│ │ │ ├── NestedAppNative.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── NoResult
│ │ │ ├── NoResult.md
│ │ │ ├── NoResult.module.scss
│ │ │ ├── NoResult.spec.ts
│ │ │ ├── NoResult.tsx
│ │ │ └── NoResultNative.tsx
│ │ ├── NumberBox
│ │ │ ├── numberbox-abstractions.ts
│ │ │ ├── NumberBox.md
│ │ │ ├── NumberBox.module.scss
│ │ │ ├── NumberBox.spec.ts
│ │ │ ├── NumberBox.tsx
│ │ │ └── NumberBoxNative.tsx
│ │ ├── Option
│ │ │ ├── Option.md
│ │ │ ├── Option.spec.ts
│ │ │ ├── Option.tsx
│ │ │ ├── OptionNative.tsx
│ │ │ └── OptionTypeProvider.tsx
│ │ ├── PageMetaTitle
│ │ │ ├── PageMetaTilteNative.tsx
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── PageMetaTitle.spec.ts
│ │ │ └── PageMetaTitle.tsx
│ │ ├── Pages
│ │ │ ├── Page.md
│ │ │ ├── Pages.md
│ │ │ ├── Pages.module.scss
│ │ │ ├── Pages.tsx
│ │ │ └── PagesNative.tsx
│ │ ├── Pagination
│ │ │ ├── Pagination.md
│ │ │ ├── Pagination.module.scss
│ │ │ ├── Pagination.spec.ts
│ │ │ ├── Pagination.tsx
│ │ │ └── PaginationNative.tsx
│ │ ├── PositionedContainer
│ │ │ ├── PositionedContainer.module.scss
│ │ │ ├── PositionedContainer.tsx
│ │ │ └── PositionedContainerNative.tsx
│ │ ├── ProfileMenu
│ │ │ ├── ProfileMenu.module.scss
│ │ │ └── ProfileMenu.tsx
│ │ ├── ProgressBar
│ │ │ ├── ProgressBar.md
│ │ │ ├── ProgressBar.module.scss
│ │ │ ├── ProgressBar.spec.ts
│ │ │ ├── ProgressBar.tsx
│ │ │ └── ProgressBarNative.tsx
│ │ ├── Queue
│ │ │ ├── Queue.md
│ │ │ ├── Queue.spec.ts
│ │ │ ├── Queue.tsx
│ │ │ ├── queueActions.ts
│ │ │ └── QueueNative.tsx
│ │ ├── RadioGroup
│ │ │ ├── RadioGroup.md
│ │ │ ├── RadioGroup.module.scss
│ │ │ ├── RadioGroup.spec.ts
│ │ │ ├── RadioGroup.tsx
│ │ │ ├── RadioGroupNative.tsx
│ │ │ ├── RadioItem.tsx
│ │ │ └── RadioItemNative.tsx
│ │ ├── RealTimeAdapter
│ │ │ ├── RealTimeAdapter.tsx
│ │ │ └── RealTimeAdapterNative.tsx
│ │ ├── Redirect
│ │ │ ├── Redirect.md
│ │ │ ├── Redirect.spec.ts
│ │ │ └── Redirect.tsx
│ │ ├── ResponsiveBar
│ │ │ ├── README.md
│ │ │ ├── ResponsiveBar.md
│ │ │ ├── ResponsiveBar.module.scss
│ │ │ ├── ResponsiveBar.spec.ts
│ │ │ ├── ResponsiveBar.tsx
│ │ │ └── ResponsiveBarNative.tsx
│ │ ├── Select
│ │ │ ├── HiddenOption.tsx
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ └── SelectNative.tsx
│ │ ├── SelectionStore
│ │ │ ├── SelectionStore.md
│ │ │ ├── SelectionStore.tsx
│ │ │ └── SelectionStoreNative.tsx
│ │ ├── Slider
│ │ │ ├── Slider.md
│ │ │ ├── Slider.module.scss
│ │ │ ├── Slider.spec.ts
│ │ │ ├── Slider.tsx
│ │ │ └── SliderNative.tsx
│ │ ├── Slot
│ │ │ ├── Slot.md
│ │ │ ├── Slot.spec.ts
│ │ │ └── Slot.ts
│ │ ├── SlotItem.tsx
│ │ ├── SpaceFiller
│ │ │ ├── SpaceFiller.md
│ │ │ ├── SpaceFiller.module.scss
│ │ │ ├── SpaceFiller.spec.ts
│ │ │ ├── SpaceFiller.tsx
│ │ │ └── SpaceFillerNative.tsx
│ │ ├── Spinner
│ │ │ ├── Spinner.md
│ │ │ ├── Spinner.module.scss
│ │ │ ├── Spinner.spec.ts
│ │ │ ├── Spinner.tsx
│ │ │ └── SpinnerNative.tsx
│ │ ├── Splitter
│ │ │ ├── HSplitter.md
│ │ │ ├── HSplitter.spec.ts
│ │ │ ├── Splitter.md
│ │ │ ├── Splitter.module.scss
│ │ │ ├── Splitter.spec.ts
│ │ │ ├── Splitter.tsx
│ │ │ ├── SplitterNative.tsx
│ │ │ ├── utils.ts
│ │ │ ├── VSplitter.md
│ │ │ └── VSplitter.spec.ts
│ │ ├── Stack
│ │ │ ├── CHStack.md
│ │ │ ├── CHStack.spec.ts
│ │ │ ├── CVStack.md
│ │ │ ├── CVStack.spec.ts
│ │ │ ├── HStack.md
│ │ │ ├── HStack.spec.ts
│ │ │ ├── Stack.md
│ │ │ ├── Stack.module.scss
│ │ │ ├── Stack.spec.ts
│ │ │ ├── Stack.tsx
│ │ │ ├── StackNative.tsx
│ │ │ ├── VStack.md
│ │ │ └── VStack.spec.ts
│ │ ├── StickyBox
│ │ │ ├── StickyBox.md
│ │ │ ├── StickyBox.module.scss
│ │ │ ├── StickyBox.tsx
│ │ │ └── StickyBoxNative.tsx
│ │ ├── Switch
│ │ │ ├── Switch.md
│ │ │ ├── Switch.spec.ts
│ │ │ └── Switch.tsx
│ │ ├── Table
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── react-table-config.d.ts
│ │ │ ├── Table.md
│ │ │ ├── Table.module.scss
│ │ │ ├── Table.spec.ts
│ │ │ ├── Table.tsx
│ │ │ ├── TableNative.tsx
│ │ │ └── useRowSelection.tsx
│ │ ├── TableOfContents
│ │ │ ├── TableOfContents.module.scss
│ │ │ ├── TableOfContents.spec.ts
│ │ │ ├── TableOfContents.tsx
│ │ │ └── TableOfContentsNative.tsx
│ │ ├── Tabs
│ │ │ ├── TabContext.tsx
│ │ │ ├── TabItem.md
│ │ │ ├── TabItem.tsx
│ │ │ ├── TabItemNative.tsx
│ │ │ ├── Tabs.md
│ │ │ ├── Tabs.module.scss
│ │ │ ├── Tabs.spec.ts
│ │ │ ├── Tabs.tsx
│ │ │ └── TabsNative.tsx
│ │ ├── Text
│ │ │ ├── Text.md
│ │ │ ├── Text.module.scss
│ │ │ ├── Text.spec.ts
│ │ │ ├── Text.tsx
│ │ │ └── TextNative.tsx
│ │ ├── TextArea
│ │ │ ├── TextArea.md
│ │ │ ├── TextArea.module.scss
│ │ │ ├── TextArea.spec.ts
│ │ │ ├── TextArea.tsx
│ │ │ ├── TextAreaNative.tsx
│ │ │ ├── TextAreaResizable.tsx
│ │ │ └── useComposedRef.ts
│ │ ├── TextBox
│ │ │ ├── TextBox.md
│ │ │ ├── TextBox.module.scss
│ │ │ ├── TextBox.spec.ts
│ │ │ ├── TextBox.tsx
│ │ │ └── TextBoxNative.tsx
│ │ ├── Theme
│ │ │ ├── NotificationToast.tsx
│ │ │ ├── Theme.md
│ │ │ ├── Theme.module.scss
│ │ │ ├── Theme.spec.ts
│ │ │ ├── Theme.tsx
│ │ │ └── ThemeNative.tsx
│ │ ├── TimeInput
│ │ │ ├── TimeInput.md
│ │ │ ├── TimeInput.module.scss
│ │ │ ├── TimeInput.spec.ts
│ │ │ ├── TimeInput.tsx
│ │ │ ├── TimeInputNative.tsx
│ │ │ └── utils.ts
│ │ ├── Timer
│ │ │ ├── Timer.md
│ │ │ ├── Timer.spec.ts
│ │ │ ├── Timer.tsx
│ │ │ └── TimerNative.tsx
│ │ ├── Toggle
│ │ │ ├── Toggle.module.scss
│ │ │ └── Toggle.tsx
│ │ ├── ToneChangerButton
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneChangerButton.spec.ts
│ │ │ └── ToneChangerButton.tsx
│ │ ├── ToneSwitch
│ │ │ ├── ToneSwitch.md
│ │ │ ├── ToneSwitch.module.scss
│ │ │ ├── ToneSwitch.spec.ts
│ │ │ ├── ToneSwitch.tsx
│ │ │ └── ToneSwitchNative.tsx
│ │ ├── Tooltip
│ │ │ ├── Tooltip.md
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.spec.ts
│ │ │ ├── Tooltip.tsx
│ │ │ └── TooltipNative.tsx
│ │ ├── Tree
│ │ │ ├── testData.ts
│ │ │ ├── Tree-dynamic.spec.ts
│ │ │ ├── Tree-icons.spec.ts
│ │ │ ├── Tree.md
│ │ │ ├── Tree.spec.ts
│ │ │ ├── TreeComponent.module.scss
│ │ │ ├── TreeComponent.tsx
│ │ │ └── TreeNative.tsx
│ │ ├── TreeDisplay
│ │ │ ├── TreeDisplay.md
│ │ │ ├── TreeDisplay.module.scss
│ │ │ ├── TreeDisplay.tsx
│ │ │ └── TreeDisplayNative.tsx
│ │ ├── ValidationSummary
│ │ │ ├── ValidationSummary.module.scss
│ │ │ └── ValidationSummary.tsx
│ │ └── VisuallyHidden.tsx
│ ├── components-core
│ │ ├── abstractions
│ │ │ ├── ComponentRenderer.ts
│ │ │ ├── LoaderRenderer.ts
│ │ │ ├── standalone.ts
│ │ │ └── treeAbstractions.ts
│ │ ├── action
│ │ │ ├── actions.ts
│ │ │ ├── APICall.tsx
│ │ │ ├── FileDownloadAction.tsx
│ │ │ ├── FileUploadAction.tsx
│ │ │ ├── NavigateAction.tsx
│ │ │ └── TimedAction.tsx
│ │ ├── ApiBoundComponent.tsx
│ │ ├── appContext
│ │ │ ├── date-functions.ts
│ │ │ ├── math-function.ts
│ │ │ └── misc-utils.ts
│ │ ├── AppContext.tsx
│ │ ├── behaviors
│ │ │ ├── Behavior.tsx
│ │ │ └── CoreBehaviors.tsx
│ │ ├── component-hooks.ts
│ │ ├── ComponentDecorator.tsx
│ │ ├── ComponentViewer.tsx
│ │ ├── CompoundComponent.tsx
│ │ ├── constants.ts
│ │ ├── DebugViewProvider.tsx
│ │ ├── descriptorHelper.ts
│ │ ├── devtools
│ │ │ ├── InspectorDialog.module.scss
│ │ │ ├── InspectorDialog.tsx
│ │ │ └── InspectorDialogVisibilityContext.tsx
│ │ ├── EngineError.ts
│ │ ├── event-handlers.ts
│ │ ├── InspectorButton.module.scss
│ │ ├── InspectorContext.tsx
│ │ ├── interception
│ │ │ ├── abstractions.ts
│ │ │ ├── ApiInterceptor.ts
│ │ │ ├── ApiInterceptorProvider.tsx
│ │ │ ├── apiInterceptorWorker.ts
│ │ │ ├── Backend.ts
│ │ │ ├── Errors.ts
│ │ │ ├── IndexedDb.ts
│ │ │ ├── initMock.ts
│ │ │ ├── InMemoryDb.ts
│ │ │ ├── ReadonlyCollection.ts
│ │ │ └── useApiInterceptorContext.tsx
│ │ ├── loader
│ │ │ ├── ApiLoader.tsx
│ │ │ ├── DataLoader.tsx
│ │ │ ├── ExternalDataLoader.tsx
│ │ │ ├── Loader.tsx
│ │ │ ├── MockLoaderRenderer.tsx
│ │ │ └── PageableLoader.tsx
│ │ ├── LoaderComponent.tsx
│ │ ├── markup-check.ts
│ │ ├── parts.ts
│ │ ├── renderers.ts
│ │ ├── rendering
│ │ │ ├── AppContent.tsx
│ │ │ ├── AppRoot.tsx
│ │ │ ├── AppWrapper.tsx
│ │ │ ├── buildProxy.ts
│ │ │ ├── collectFnVarDeps.ts
│ │ │ ├── ComponentAdapter.tsx
│ │ │ ├── ComponentWrapper.tsx
│ │ │ ├── Container.tsx
│ │ │ ├── containers.ts
│ │ │ ├── ContainerWrapper.tsx
│ │ │ ├── ErrorBoundary.module.scss
│ │ │ ├── ErrorBoundary.tsx
│ │ │ ├── InvalidComponent.module.scss
│ │ │ ├── InvalidComponent.tsx
│ │ │ ├── nodeUtils.ts
│ │ │ ├── reducer.ts
│ │ │ ├── renderChild.tsx
│ │ │ ├── StandaloneComponent.tsx
│ │ │ ├── StateContainer.tsx
│ │ │ ├── UnknownComponent.module.scss
│ │ │ ├── UnknownComponent.tsx
│ │ │ └── valueExtractor.ts
│ │ ├── reportEngineError.ts
│ │ ├── RestApiProxy.ts
│ │ ├── script-runner
│ │ │ ├── asyncProxy.ts
│ │ │ ├── AttributeValueParser.ts
│ │ │ ├── bannedFunctions.ts
│ │ │ ├── BindingTreeEvaluationContext.ts
│ │ │ ├── eval-tree-async.ts
│ │ │ ├── eval-tree-common.ts
│ │ │ ├── eval-tree-sync.ts
│ │ │ ├── ParameterParser.ts
│ │ │ ├── process-statement-async.ts
│ │ │ ├── process-statement-common.ts
│ │ │ ├── process-statement-sync.ts
│ │ │ ├── ScriptingSourceTree.ts
│ │ │ ├── simplify-expression.ts
│ │ │ ├── statement-queue.ts
│ │ │ └── visitors.ts
│ │ ├── StandaloneApp.tsx
│ │ ├── StandaloneExtensionManager.ts
│ │ ├── TableOfContentsContext.tsx
│ │ ├── theming
│ │ │ ├── _themes.scss
│ │ │ ├── component-layout-resolver.ts
│ │ │ ├── extendThemeUtils.ts
│ │ │ ├── hvar.ts
│ │ │ ├── layout-resolver.ts
│ │ │ ├── parse-layout-props.ts
│ │ │ ├── StyleContext.tsx
│ │ │ ├── StyleRegistry.ts
│ │ │ ├── ThemeContext.tsx
│ │ │ ├── ThemeProvider.tsx
│ │ │ ├── themes
│ │ │ │ ├── base-utils.ts
│ │ │ │ ├── palette.ts
│ │ │ │ ├── root.ts
│ │ │ │ ├── solid.ts
│ │ │ │ ├── theme-colors.ts
│ │ │ │ └── xmlui.ts
│ │ │ ├── themeVars.module.scss
│ │ │ ├── themeVars.ts
│ │ │ ├── transformThemeVars.ts
│ │ │ └── utils.ts
│ │ ├── utils
│ │ │ ├── actionUtils.ts
│ │ │ ├── audio-utils.ts
│ │ │ ├── base64-utils.ts
│ │ │ ├── compound-utils.ts
│ │ │ ├── css-utils.ts
│ │ │ ├── DataLoaderQueryKeyGenerator.ts
│ │ │ ├── date-utils.ts
│ │ │ ├── extractParam.ts
│ │ │ ├── hooks.tsx
│ │ │ ├── LruCache.ts
│ │ │ ├── mergeProps.ts
│ │ │ ├── misc.ts
│ │ │ ├── request-params.ts
│ │ │ ├── statementUtils.ts
│ │ │ └── treeUtils.ts
│ │ └── xmlui-parser.ts
│ ├── index-standalone.ts
│ ├── index.scss
│ ├── index.ts
│ ├── language-server
│ │ ├── server-common.ts
│ │ ├── server-web-worker.ts
│ │ ├── server.ts
│ │ ├── services
│ │ │ ├── common
│ │ │ │ ├── docs-generation.ts
│ │ │ │ ├── lsp-utils.ts
│ │ │ │ ├── metadata-utils.ts
│ │ │ │ └── syntax-node-utilities.ts
│ │ │ ├── completion.ts
│ │ │ ├── diagnostic.ts
│ │ │ ├── format.ts
│ │ │ └── hover.ts
│ │ └── xmlui-metadata-generated.js
│ ├── logging
│ │ ├── LoggerContext.tsx
│ │ ├── LoggerInitializer.tsx
│ │ ├── LoggerService.ts
│ │ └── xmlui.ts
│ ├── logo.svg
│ ├── parsers
│ │ ├── common
│ │ │ ├── GenericToken.ts
│ │ │ ├── InputStream.ts
│ │ │ └── utils.ts
│ │ ├── scripting
│ │ │ ├── code-behind-collect.ts
│ │ │ ├── Lexer.ts
│ │ │ ├── modules.ts
│ │ │ ├── Parser.ts
│ │ │ ├── ParserError.ts
│ │ │ ├── ScriptingNodeTypes.ts
│ │ │ ├── TokenTrait.ts
│ │ │ ├── TokenType.ts
│ │ │ └── tree-visitor.ts
│ │ ├── style-parser
│ │ │ ├── errors.ts
│ │ │ ├── source-tree.ts
│ │ │ ├── StyleInputStream.ts
│ │ │ ├── StyleLexer.ts
│ │ │ ├── StyleParser.ts
│ │ │ └── tokens.ts
│ │ └── xmlui-parser
│ │ ├── CharacterCodes.ts
│ │ ├── diagnostics.ts
│ │ ├── fileExtensions.ts
│ │ ├── index.ts
│ │ ├── lint.ts
│ │ ├── parser.ts
│ │ ├── ParserError.ts
│ │ ├── scanner.ts
│ │ ├── syntax-kind.ts
│ │ ├── syntax-node.ts
│ │ ├── transform.ts
│ │ ├── utils.ts
│ │ ├── xmlui-serializer.ts
│ │ └── xmlui-tree.ts
│ ├── react-app-env.d.ts
│ ├── syntax
│ │ ├── monaco
│ │ │ ├── grammar.monacoLanguage.ts
│ │ │ ├── index.ts
│ │ │ ├── xmlui-dark.ts
│ │ │ ├── xmlui-light.ts
│ │ │ └── xmluiscript.monacoLanguage.ts
│ │ └── textMate
│ │ ├── index.ts
│ │ ├── xmlui-dark.json
│ │ ├── xmlui-light.json
│ │ ├── xmlui.json
│ │ └── xmlui.tmLanguage.json
│ ├── testing
│ │ ├── assertions.ts
│ │ ├── component-test-helpers.ts
│ │ ├── ComponentDrivers.ts
│ │ ├── drivers
│ │ │ ├── DateInputDriver.ts
│ │ │ ├── index.ts
│ │ │ ├── ModalDialogDriver.ts
│ │ │ ├── NumberBoxDriver.ts
│ │ │ ├── TextBoxDriver.ts
│ │ │ ├── TimeInputDriver.ts
│ │ │ ├── TimerDriver.ts
│ │ │ └── TreeDriver.ts
│ │ ├── fixtures.ts
│ │ ├── index.ts
│ │ ├── infrastructure
│ │ │ ├── index.html
│ │ │ ├── main.tsx
│ │ │ ├── public
│ │ │ │ ├── mockServiceWorker.js
│ │ │ │ ├── resources
│ │ │ │ │ ├── bell.svg
│ │ │ │ │ ├── box.svg
│ │ │ │ │ ├── doc.svg
│ │ │ │ │ ├── eye.svg
│ │ │ │ │ ├── flower-640x480.jpg
│ │ │ │ │ ├── sun.svg
│ │ │ │ │ ├── test-image-100x100.jpg
│ │ │ │ │ └── txt.svg
│ │ │ │ └── serve.json
│ │ │ └── TestBed.tsx
│ │ └── themed-app-test-helpers.ts
│ └── vite-env.d.ts
├── tests
│ ├── components
│ │ ├── CodeBlock
│ │ │ └── hightlight-code.test.ts
│ │ ├── playground-pattern.test.ts
│ │ └── Tree
│ │ └── Tree-states.test.ts
│ ├── components-core
│ │ ├── abstractions
│ │ │ └── treeAbstractions.test.ts
│ │ ├── container
│ │ │ └── buildProxy.test.ts
│ │ ├── interception
│ │ │ ├── orderBy.test.ts
│ │ │ ├── ReadOnlyCollection.test.ts
│ │ │ └── request-param-converter.test.ts
│ │ ├── scripts-runner
│ │ │ ├── AttributeValueParser.test.ts
│ │ │ ├── eval-tree-arrow-async.test.ts
│ │ │ ├── eval-tree-arrow.test.ts
│ │ │ ├── eval-tree-func-decl-async.test.ts
│ │ │ ├── eval-tree-func-decl.test.ts
│ │ │ ├── eval-tree-pre-post.test.ts
│ │ │ ├── eval-tree-regression.test.ts
│ │ │ ├── eval-tree.test.ts
│ │ │ ├── function-proxy.test.ts
│ │ │ ├── parser-regression.test.ts
│ │ │ ├── process-event.test.ts
│ │ │ ├── process-function.test.ts
│ │ │ ├── process-implicit-context.test.ts
│ │ │ ├── process-statement-asgn.test.ts
│ │ │ ├── process-statement-destruct.test.ts
│ │ │ ├── process-statement-regs.test.ts
│ │ │ ├── process-statement-sync.test.ts
│ │ │ ├── process-statement.test.ts
│ │ │ ├── process-switch-sync.test.ts
│ │ │ ├── process-switch.test.ts
│ │ │ ├── process-try-sync.test.ts
│ │ │ ├── process-try.test.ts
│ │ │ └── test-helpers.ts
│ │ ├── test-metadata-handler.ts
│ │ ├── theming
│ │ │ ├── border-segments.test.ts
│ │ │ ├── component-layout.resolver.test.ts
│ │ │ ├── layout-property-parser.test.ts
│ │ │ ├── layout-resolver.test.ts
│ │ │ ├── layout-resolver2.test.ts
│ │ │ ├── layout-vp-override.test.ts
│ │ │ └── padding-segments.test.ts
│ │ └── utils
│ │ ├── date-utils.test.ts
│ │ ├── format-human-elapsed-time.test.ts
│ │ └── LruCache.test.ts
│ ├── language-server
│ │ ├── completion.test.ts
│ │ ├── format.test.ts
│ │ ├── hover.test.ts
│ │ └── mockData.ts
│ └── parsers
│ ├── common
│ │ └── input-stream.test.ts
│ ├── markdown
│ │ └── parse-binding-expression.test.ts
│ ├── parameter-parser.test.ts
│ ├── paremeter-parser.test.ts
│ ├── scripting
│ │ ├── eval-tree-arrow.test.ts
│ │ ├── eval-tree-pre-post.test.ts
│ │ ├── eval-tree.test.ts
│ │ ├── function-proxy.test.ts
│ │ ├── lexer-literals.test.ts
│ │ ├── lexer-misc.test.ts
│ │ ├── module-parse.test.ts
│ │ ├── parser-arrow.test.ts
│ │ ├── parser-assignments.test.ts
│ │ ├── parser-binary.test.ts
│ │ ├── parser-destructuring.test.ts
│ │ ├── parser-errors.test.ts
│ │ ├── parser-expressions.test.ts
│ │ ├── parser-function.test.ts
│ │ ├── parser-literals.test.ts
│ │ ├── parser-primary.test.ts
│ │ ├── parser-regex.test.ts
│ │ ├── parser-statements.test.ts
│ │ ├── parser-unary.test.ts
│ │ ├── process-event.test.ts
│ │ ├── process-implicit-context.test.ts
│ │ ├── process-statement-asgn.test.ts
│ │ ├── process-statement-destruct.test.ts
│ │ ├── process-statement-regs.test.ts
│ │ ├── process-statement-sync.test.ts
│ │ ├── process-statement.test.ts
│ │ ├── process-switch-sync.test.ts
│ │ ├── process-switch.test.ts
│ │ ├── process-try-sync.test.ts
│ │ ├── process-try.test.ts
│ │ ├── simplify-expression.test.ts
│ │ ├── statement-hooks.test.ts
│ │ └── test-helpers.ts
│ ├── style-parser
│ │ ├── generateHvarChain.test.ts
│ │ ├── parseHVar.test.ts
│ │ ├── parser.test.ts
│ │ └── tokens.test.ts
│ └── xmlui
│ ├── lint.test.ts
│ ├── parser.test.ts
│ ├── scanner.test.ts
│ ├── transform.attr.test.ts
│ ├── transform.circular.test.ts
│ ├── transform.element.test.ts
│ ├── transform.errors.test.ts
│ ├── transform.escape.test.ts
│ ├── transform.regression.test.ts
│ ├── transform.script.test.ts
│ ├── transform.test.ts
│ └── xmlui.ts
├── tests-e2e
│ ├── api-bound-component-regression.spec.ts
│ ├── api-call-as-extracted-component.spec.ts
│ ├── assign-to-object-or-array-regression.spec.ts
│ ├── binding-regression.spec.ts
│ ├── children-as-template-context-vars.spec.ts
│ ├── compound-component.spec.ts
│ ├── context-vars-regression.spec.ts
│ ├── data-bindings.spec.ts
│ ├── datasource-and-api-usage-in-var.spec.ts
│ ├── datasource-direct-binding.spec.ts
│ ├── datasource-onLoaded-regression.spec.ts
│ ├── modify-array-item-regression.spec.ts
│ ├── namespaces.spec.ts
│ ├── push-to-array-regression.spec.ts
│ ├── screen-breakpoints.spec.ts
│ ├── scripting.spec.ts
│ ├── state-scope-in-pages.spec.ts
│ └── state-var-scopes.spec.ts
├── tsconfig.json
├── tsdown.config.ts
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/xmlui/src/components/Stack/Stack.spec.ts:
--------------------------------------------------------------------------------
```typescript
import { test, expect } from "../../testing/fixtures";
import { overflows, getBounds } from "../../testing/component-test-helpers";
const PAGE_WIDTH = 1280;
const PAGE_HEIGHT = 720;
test.use({ viewport: { width: PAGE_WIDTH, height: PAGE_HEIGHT } });
// =============================================================================
// BASIC FUNCTIONALITY TESTS
// =============================================================================
test.describe("Basic Functionality", () => {
test("can render empty", async ({ page, initTestBed }) => {
await initTestBed(`<Stack testId="stack"></Stack>`);
await expect(page.getByTestId("stack")).toBeAttached();
await expect(page.getByTestId("stack")).toBeEmpty();
});
});
// =============================================================================
// LAYOUT TESTS
// =============================================================================
test.describe("Layout", () => {
// "(horizontal) children with unspecified dimensions" -> width is content size, height is content size
test("(horizontal) children with unspecified dimensions", async ({ page, initTestBed }) => {
await initTestBed(`
<Stack testId="stack" orientation="horizontal" backgroundColor="lightgray" gap="0">
<Text testId="item_0" backgroundColor="cyan">Text #1</Text>
<Text testId="item_1" backgroundColor="yellow">Text #2</Text>
<Text testId="item_2" backgroundColor="lightgreen">Text #3</Text>
</Stack>
`);
const { width: stackWidth, height: stackHeight } = await getBounds(page.getByTestId("stack"));
const { width: itemWidth0, height: itemHeight0 } = await getBounds(page.getByTestId("item_0"));
const { width: itemWidth1 } = await getBounds(page.getByTestId("item_1"));
const { width: itemWidth2, right: itemRight2 } = await getBounds(page.getByTestId("item_2"));
const itemWidthSum = itemWidth0 + itemWidth1 + itemWidth2;
// ensure the elements are not overflowing and that the stack is not as wide as the width-sum of the elements
// this can be stated, since we set the viewport size at the start,
// which is bigger than the width-sum of the elements
expect(itemWidthSum).toBeLessThan(stackWidth);
//no gaps between elements
// with tolerance, since we are comparing floating point number. The pixel values could be non-whole numbers
// in which case adding up fractions could have a very small difference that would make the test fail
expect(itemWidthSum).toEqualWithTolerance(itemRight2);
// enusre that the stack is as tall as the tallest element (they all have the same height in this case)
expect(stackHeight).toEqual(itemHeight0);
});
// "(vertical) children with unspecified dimensions" -> width fills available space, height is content size
test("(vertical) children with unspecified dimensions, orientation is implicit", async ({
page,
initTestBed,
}) => {
await initTestBed(`
<Stack testId="stack" backgroundColor="lightgray" gap="0">
<Text testId="item_0" backgroundColor="cyan">Text #1</Text>
<Text testId="item_1" backgroundColor="yellow">Text #2</Text>
<Text testId="item_2" backgroundColor="lightgreen">Text #3</Text>
</Stack>
`);
const { height: stackHeight, width: stackWidth } = await getBounds(page.getByTestId("stack"));
const itemDims0 = await getBounds(page.getByTestId("item_0"));
const itemDims1 = await getBounds(page.getByTestId("item_1"));
const itemDims2 = await getBounds(page.getByTestId("item_2"));
const itemHeightSum = itemDims0.height + itemDims1.height + itemDims2.height;
expect(itemHeightSum).toEqualWithTolerance(stackHeight);
expect(itemDims0.width).toEqual(stackWidth);
expect(itemDims1.width).toEqual(stackWidth);
expect(itemDims2.width).toEqual(stackWidth);
});
// "(horizontal) block children with unspecified dimensions" -> width is content size,
// height is content size, block children are treated as inline elements
test("(horizontal) block children with unspecified dimensions", async ({ page, initTestBed }) => {
await initTestBed(`
<Fragment>
<Stack testId="stack" orientation="horizontal" backgroundColor="lightgray" gap="0">
<Text testId="item_0" backgroundColor="cyan">Heading 1</Text>
<Text testId="item_1" backgroundColor="yellow">Heading 2</Text>
<Text testId="item_2" backgroundColor="lightgreen">Heading 3</Text>
</Stack>
<Stack testId="stack2" orientation="horizontal" backgroundColor="lightgray">
<Text testId="item_3" backgroundColor="coral">Heading 1Heading 2Heading 3</Text>
</Stack>
</Fragment>
`);
const { width: stackWidth, height: stackHeight } = await getBounds(page.getByTestId("stack"));
const { width: itemWidth0, height: itemHeight0 } = await getBounds(page.getByTestId("item_0"));
const { width: itemWidth1, height: itemHeight1 } = await getBounds(page.getByTestId("item_1"));
const { width: itemWidth2, height: itemHeight2 } = await getBounds(page.getByTestId("item_2"));
const { width: itemWidth3 } = await getBounds(page.getByTestId("item_3"));
const itemWidthSum = itemWidth0 + itemWidth1 + itemWidth2;
const tallestItemHeight = Math.max(itemHeight0, itemHeight1, itemHeight2);
expect(itemWidthSum).toBeLessThan(stackWidth);
expect(itemWidthSum).toEqualWithTolerance(itemWidth3);
expect(stackHeight).toEqual(tallestItemHeight);
});
// "(horizontal) children with fixed dimensions" -> Stack does not alter dimensions
test("(horizontal) children with fixed dimensions", async ({ page, initTestBed }) => {
await initTestBed(`
<Stack testId="stack" orientation="horizontal" gap="0">
<Text testId="item_0" backgroundColor="cyan" width="72px" height="36px">72 x 36</Text>
<Text testId="item_1" backgroundColor="yellow" width="144px" height="72px">144 x 72</Text>
<Text testId="item_2" backgroundColor="lightgreen" width="64px" height="48px">64 x 48</Text>
</Stack>
`);
const { height: stackHeight } = await getBounds(page.getByTestId("stack"));
const itemDims0 = await getBounds(page.getByTestId("item_0"));
const itemDims1 = await getBounds(page.getByTestId("item_1"));
const itemDims2 = await getBounds(page.getByTestId("item_2"));
const tallestItemHeight = 72;
const itemWidthSum = 72 + 144 + 64;
//no gaps between items
expect(itemWidthSum).toEqualWithTolerance(itemDims2.right);
expect(stackHeight).toEqual(tallestItemHeight);
expect(itemDims0).toMatchObject({ width: 72, height: 36 });
expect(itemDims1).toMatchObject({ width: 144, height: 72 });
expect(itemDims2).toMatchObject({ width: 64, height: 48 });
});
// "(vertical) children with fixed dimensions" -> Stack does not alter dimensions
test("(vertical) children with fixed dimensions", async ({ page, initTestBed }) => {
await initTestBed(`
<Stack testId="stack" orientation="vertical" gap="0">
<Text testId="item_0" backgroundColor="cyan" width="72px" height="36px">72 x 36</Text>
<Text testId="item_1" backgroundColor="yellow" width="144px" height="72px">144 x 72</Text>
<Text testId="item_2" backgroundColor="lightgreen" width="64px" height="48px">64 x 48</Text>
</Stack>
`);
const { width: stackWidth, height: stackHeight } = await getBounds(page.getByTestId("stack"));
const itemDims0 = await getBounds(page.getByTestId("item_0"));
const itemDims1 = await getBounds(page.getByTestId("item_1"));
const itemDims2 = await getBounds(page.getByTestId("item_2"));
const widestItemWidth = 144;
const itemHeightSum = 36 + 72 + 48;
expect(widestItemWidth).toBeLessThan(stackWidth);
expect(itemHeightSum).toEqualWithTolerance(itemDims2.bottom);
expect(itemHeightSum).toEqualWithTolerance(stackHeight);
expect(itemDims0).toMatchObject({ width: 72, height: 36 });
expect(itemDims1).toMatchObject({ width: 144, height: 72 });
expect(itemDims2).toMatchObject({ width: 64, height: 48 });
});
// (horizontal) children with fixed width and unspecified height -> item height is the same as stack height
test("(horizontal) children with fixed width and unspecified height", async ({
page,
initTestBed,
}) => {
await initTestBed(`
<Stack testId="stack" orientation="horizontal" gap="0">
<Text testId="item_0" backgroundColor="cyan" width="72px">W: 72</Text>
<Text testId="item_1" backgroundColor="yellow" width="144px">W: 144</Text>
<Text testId="item_2" backgroundColor="lightgreen" width="48px">W: 48 + long, long, long text</Text>
</Stack>
`);
const { height: stackHeight, width: stackWidth } = await getBounds(page.getByTestId("stack"));
const itemDims0 = await getBounds(page.getByTestId("item_0"));
const itemDims1 = await getBounds(page.getByTestId("item_1"));
const itemDims2 = await getBounds(page.getByTestId("item_2"));
const itemWidthSum = itemDims0.width + itemDims1.width + itemDims2.width;
expect(itemWidthSum).toEqualWithTolerance(itemDims2.right);
expect(itemWidthSum).toBeLessThan(stackWidth);
expect(itemDims0.height).toEqual(stackHeight);
expect(itemDims1.height).toEqual(stackHeight);
expect(itemDims2.height).toEqual(stackHeight);
expect(itemDims0.width).toEqual(72);
expect(itemDims1.width).toEqual(144);
expect(itemDims2.width).toEqual(48);
});
// (vertical) children with fixed height and unspecified width -> width fills available space
test("(vertical) children with fixed height and unspecified width ", async ({
page,
initTestBed,
}) => {
await initTestBed(`
<Stack testId="stack" orientation="vertical" gap="0">
<Text testId="item_0" backgroundColor="cyan" height="36px">H: 36</Text>
<Text testId="item_1" backgroundColor="yellow" height="72px">H: 72</Text>
<Text testId="item_2" backgroundColor="lightgreen" height="48px">H: 48 + long, long, long text</Text>
</Stack>
`);
const { height: stackHeight, width: stackWidth } = await getBounds(page.getByTestId("stack"));
const itemDims0 = await getBounds(page.getByTestId("item_0"));
const itemDims1 = await getBounds(page.getByTestId("item_1"));
const itemDims2 = await getBounds(page.getByTestId("item_2"));
const itemHeightSum = 36 + 72 + 48;
expect(itemHeightSum).toEqualWithTolerance(itemDims2.bottom);
expect(itemHeightSum).toEqualWithTolerance(stackHeight);
expect(itemDims0.width).toEqual(stackWidth);
expect(itemDims1.width).toEqual(stackWidth);
expect(itemDims2.width).toEqual(stackWidth);
expect(itemDims0.height).toEqual(36);
expect(itemDims1.height).toEqual(72);
expect(itemDims2.height).toEqual(48);
});
// (horizontal) children with fixed height and unspecified width -> item widths are conent size, item heights are not altered
test("(horizontal) children with fixed height and unspecified width", async ({
page,
initTestBed,
}) => {
await initTestBed(`
<Stack testId="stack" orientation="horizontal" gap="0">
<Text testId="item_0" backgroundColor="cyan" height="36px">H: 36</Text>
<Text testId="item_1" backgroundColor="yellow" height="72px">H: 72</Text>
<Text testId="item_2" backgroundColor="lightgreen" height="48px">H: 48</Text>
</Stack>
`);
const { height: stackHeight, width: stackWidth } = await getBounds(page.getByTestId("stack"));
const itemDims0 = await getBounds(page.getByTestId("item_0"));
const itemDims1 = await getBounds(page.getByTestId("item_1"));
const itemDims2 = await getBounds(page.getByTestId("item_2"));
const itemWidthSum = itemDims0.width + itemDims1.width + itemDims2.width;
const tallestItemHeight = 72;
expect(itemWidthSum).toBeLessThan(stackWidth);
expect(stackHeight).toEqual(tallestItemHeight);
expect(itemDims0.height).toEqual(36);
expect(itemDims1.height).toEqual(72);
expect(itemDims2.height).toEqual(48);
});
// (vertical) children with fixed width and unspecified height -> item heights are content size, widths are not altered
test("(vertical) children with fixed width and unspecified height", async ({
page,
initTestBed,
}) => {
await initTestBed(`
<Stack testId="stack" orientation="vertical" gap="0">
<Text testId="item_0" backgroundColor="cyan" width="72px">W: 72</Text>
<Text testId="item_1" backgroundColor="yellow" width="144px">W: 144</Text>
<Text testId="item_2" backgroundColor="lightgreen" width="48px">W: 48 + long, long, long text</Text>
</Stack>
`);
const { height: stackHeight } = await getBounds(page.getByTestId("stack"));
const itemDims0 = await getBounds(page.getByTestId("item_0"));
const itemDims1 = await getBounds(page.getByTestId("item_1"));
const itemDims2 = await getBounds(page.getByTestId("item_2"));
const itemHeightSum = itemDims0.height + itemDims1.height + itemDims2.height;
expect(itemHeightSum).toEqualWithTolerance(itemDims2.bottom);
expect(itemHeightSum).toEqualWithTolerance(stackHeight);
expect(itemDims0.width).toEqual(72);
expect(itemDims1.width).toEqual(144);
expect(itemDims2.width).toEqual(48);
});
test("(horizontal) percentage sizing", async ({ page, initTestBed }) => {
await initTestBed(`
<Stack testId="stack" orientation="horizontal" backgroundColor="lightgray" gap="0">
<Text testId="item_0" backgroundColor="cyan" width="20%">W: 20%</Text>
<H2 testId="item_1" backgroundColor="yellow" width="50%">W: 50%</H2>
<H5 testId="item_2" backgroundColor="lightgreen" width="20%">W: 20% + long, long, long text</H5>
</Stack>
`);
const { width: stackWidth } = await getBounds(page.getByTestId("stack"));
const { width: itemWidth0 } = await getBounds(page.getByTestId("item_0"));
const { width: itemWidth1 } = await getBounds(page.getByTestId("item_1"));
const { width: itemWidth2, right: lastItemRight } = await getBounds(page.getByTestId("item_2"));
const itemWidthSum = itemWidth0 + itemWidth1 + itemWidth2;
expect(stackWidth).toEqual(PAGE_WIDTH);
expect(itemWidthSum).toEqualWithTolerance(lastItemRight);
expect(itemWidth0).toEqualWithTolerance(0.2 * stackWidth);
expect(itemWidth1).toEqualWithTolerance(0.5 * stackWidth);
expect(itemWidth2).toEqualWithTolerance(0.2 * stackWidth);
});
test("(vertical) percentage sizing", async ({ page, initTestBed }) => {
await initTestBed(`
<Stack testId="stack" height="180px" orientation="vertical" backgroundColor="lightgray" gap="0">
<Text testId="item_0" backgroundColor="cyan" height="20%">W: 20%</Text>
<Text testId="item_1" backgroundColor="yellow" height="50%">W: 50%</Text>
<Text testId="item_2" backgroundColor="lightgreen" height="20%">W: 20% + long, long, long text</Text>
</Stack>
`);
const { height: stackHeight, width: stackWidth } = await getBounds(page.getByTestId("stack"));
const { height: itemHeight0, width: itemWidth0 } = await getBounds(page.getByTestId("item_0"));
const { height: itemHeight1 } = await getBounds(page.getByTestId("item_1"));
const { height: itemHeight2, bottom: lastItemBottom } = await getBounds(
page.getByTestId("item_2"),
);
const itemHeightSum = itemHeight0 + itemHeight1 + itemHeight2;
expect(itemWidth0).toEqual(stackWidth);
expect(itemHeightSum).toEqualWithTolerance(lastItemBottom);
expect(itemHeight0).toEqualWithTolerance(0.2 * stackHeight);
expect(itemHeight1).toEqualWithTolerance(0.5 * stackHeight);
expect(itemHeight2).toEqualWithTolerance(0.2 * stackHeight);
});
test("(horizontal) percentage sizing fully filled", async ({ page, initTestBed }) => {
await initTestBed(`
<Stack testId="stack" orientation="horizontal" backgroundColor="lightgray" gap="0">
<Text testId="item_0" backgroundColor="cyan" width="20%">W: 20%</Text>
<H2 testId="item_1" backgroundColor="yellow" width="50%">W: 50%</H2>
<H5 testId="item_2" backgroundColor="lightgreen" width="30%">W: 30% + long, long, long text</H5>
</Stack>
`);
const { width: stackWidth } = await getBounds(page.getByTestId("stack"));
const { right: lastItemRight } = await getBounds(page.getByTestId("item_2"));
expect(stackWidth).toEqualWithTolerance(lastItemRight);
});
test("(vertical) percentage sizing fully filled", async ({ page, initTestBed }) => {
await initTestBed(`
<Stack testId="stack" height="180px" orientation="vertical" backgroundColor="lightgray" gap="0">
<Text testId="item_0" backgroundColor="cyan" height="20%">W: 20%</Text>
<Text testId="item_1" backgroundColor="yellow" height="50%">W: 50%</Text>
<Text testId="item_2" backgroundColor="lightgreen" height="30%">W: 30% + long, long, long text</Text>
</Stack>
`);
const { height: stackHeight } = await getBounds(page.getByTestId("stack"));
const { bottom: lastItemBottom } = await getBounds(page.getByTestId("item_2"));
expect(stackHeight).toEqualWithTolerance(lastItemBottom);
});
// (horizontal) percentage overflow X
test("(horizontal) percentage overflow X", async ({ page, initTestBed }) => {
await initTestBed(`
<Stack testId="stack" orientation="horizontal" backgroundColor="lightgray" gap="0">
<Text testId="item_0" backgroundColor="cyan" width="30%">W: 30%</Text>
<H2 testId="item_1" backgroundColor="yellow" width="50%">W: 50%</H2>
<H5 testId="item_2" backgroundColor="lightgreen" width="40%">W: 40% + long, long, long text</H5>
</Stack>
`);
const isOverflown = await overflows(page.getByTestId("stack"), "x");
expect(isOverflown).toEqual(true);
});
// (vertical) percentage overflow Y
test("(vertical) percentage overflow Y", async ({ page, initTestBed }) => {
await initTestBed(`
<Stack testId="stack" orientation="vertical" height="180px" backgroundColor="lightgray" gap="0">
<Text testId="item_0" backgroundColor="cyan" height="30%">H: 30%</Text>
<H2 testId="item_1" backgroundColor="yellow" height="60%">H: 60%</H2>
<H5 testId="item_2" backgroundColor="lightgreen" height="20%">H: 20% + long, long, long text</H5>
</Stack>
`);
const isOverflown = await overflows(page.getByTestId("stack"), "y");
expect(isOverflown).toEqual(true);
});
test("(horizontal) star sizing", async ({ page, initTestBed }) => {
await initTestBed(`
<Stack testId="stack" width="100%" orientation="horizontal" backgroundColor="lightgray" gap="0">
<Text testId="item_0" backgroundColor="cyan" width="100px">W: 100</Text>
<Text testId="item_1" backgroundColor="yellow" width="3*">W: 3*</Text>
<Text testId="item_2" backgroundColor="lightgreen" width="*">W: *</Text>
</Stack>
`);
const { width: stackWidth } = await getBounds(page.getByTestId("stack"));
const { width: itemWidth0 } = await getBounds(page.getByTestId("item_0"));
const { width: itemWidth1 } = await getBounds(page.getByTestId("item_1"));
const { width: itemWidth2, right: lastItemRight } = await getBounds(page.getByTestId("item_2"));
const itemWidthSum = itemWidth0 + itemWidth1 + itemWidth2;
const expectedItemWidth0 = 100;
const expectedItemWidth1 = (stackWidth - 100) * (3 / 4);
const expectedItemWidth2 = (stackWidth - 100) * (1 / 4);
expect(itemWidthSum).toEqualWithTolerance(lastItemRight);
expect(itemWidth0).toEqual(expectedItemWidth0);
expect(itemWidth1).toEqualWithTolerance(expectedItemWidth1);
expect(itemWidth2).toEqualWithTolerance(expectedItemWidth2);
});
// (horizontal) star sizing comparison -> Larger Stack have larger star sized children, px sizes are same
test("(horizontal) star sizing comparison", async ({ page, initTestBed }) => {
await initTestBed(`
<Fragment>
<Stack testId="stack_0" orientation="horizontal" width="600px" gap="0">
<Text testId="ref_item_0" backgroundColor="cyan" width="100px">W: 100</Text>
<Text testId="ref_item_1" backgroundColor="yellow" width="3*">W: 3*</Text>
<Text testId="ref_item_2" backgroundColor="lightgreen" width="*">W: *</Text>
</Stack>
<Stack testId="stack_1" orientation="horizontal" width="300px" gap="0">
<Text testId="item_0" backgroundColor="cyan" width="100px">W: 100</Text>
<Text testId="item_1" backgroundColor="yellow" width="3*">W: 3*</Text>
<Text testId="item_2" backgroundColor="lightgreen" width="*">W: *</Text>
</Stack>
</Fragment>
`);
const { width: refItemWidth0 } = await getBounds(page.getByTestId("ref_item_0"));
const { width: refItemWidth1 } = await getBounds(page.getByTestId("ref_item_1"));
const { width: refItemWidth2 } = await getBounds(page.getByTestId("ref_item_2"));
const { width: itemWidth0 } = await getBounds(page.getByTestId("item_0"));
const { width: itemWidth1 } = await getBounds(page.getByTestId("item_1"));
const { width: itemWidth2 } = await getBounds(page.getByTestId("item_2"));
expect(refItemWidth0).toEqual(itemWidth0);
expect(refItemWidth1).toBeGreaterThan(itemWidth1);
expect(refItemWidth2).toBeGreaterThan(itemWidth2);
});
// (vertical) star sizing comparison -> Larger Stack have larger star sized children, px sizes are same
test("(vertical) star sizing comparison", async ({ page, initTestBed }) => {
await initTestBed(`
<Fragment>
<Stack testId="stack_0" orientation="vertical" height="600px" gap="0">
<Text testId="ref_item_0" backgroundColor="cyan" height="100px">W: 100</Text>
<Text testId="ref_item_1" backgroundColor="yellow" height="3*">W: 3*</Text>
<Text testId="ref_item_2" backgroundColor="lightgreen" height="*">W: *</Text>
</Stack>
<Stack testId="stack_1" orientation="vertical" height="300px" gap="0">
<Text testId="item_0" backgroundColor="cyan" height="100px">W: 100</Text>
<Text testId="item_1" backgroundColor="yellow" height="3*">W: 3*</Text>
<Text testId="item_2" backgroundColor="lightgreen" height="*">W: *</Text>
</Stack>
</Fragment>
`);
const { height: refItemHeight0 } = await getBounds(page.getByTestId("ref_item_0"));
const { height: refItemHeight1 } = await getBounds(page.getByTestId("ref_item_1"));
const { height: refItemHeight2 } = await getBounds(page.getByTestId("ref_item_2"));
const { height: itemHeight0 } = await getBounds(page.getByTestId("item_0"));
const { height: itemHeight1 } = await getBounds(page.getByTestId("item_1"));
const { height: itemHeight2 } = await getBounds(page.getByTestId("item_2"));
expect(refItemHeight0).toEqual(itemHeight0);
expect(refItemHeight1).toBeGreaterThan(itemHeight1);
expect(refItemHeight2).toBeGreaterThan(itemHeight2);
});
// (horizontal) gaps + percentage -> children use available space
test("(horizontal) paddings + percentage", async ({ page, initTestBed }) => {
await initTestBed(`
<Stack testId="stack" orientation="horizontal" backgroundColor="lightgray" gap="0"
paddingHorizontal="50px" paddingVertical="50px">
<Text testId="item_0" backgroundColor="cyan" width="25%">W: 25%</Text>
<Text testId="item_1" backgroundColor="yellow" width="50%">W: 50%</Text>
<Text testId="item_2" backgroundColor="lightgreen" width="25%">W: 25%</Text>
</Stack>
`);
const { width: stackWidth } = await getBounds(page.getByTestId("stack"));
const { width: itemWidth0, left: firstItemLeft } = await getBounds(page.getByTestId("item_0"));
const { width: itemWidth1 } = await getBounds(page.getByTestId("item_1"));
const { width: itemWidth2, right: lastItemRight } = await getBounds(page.getByTestId("item_2"));
const itemWidthSum = itemWidth0 + itemWidth1 + itemWidth2;
expect(firstItemLeft).toEqual(50);
expect(lastItemRight).toEqual(stackWidth - 50);
expect(itemWidthSum).toEqualWithTolerance(stackWidth - 2 * 50);
});
// (vertical) gaps + percentage -> children use available space
test("(vertical) paddings + percentage", async ({ page, initTestBed }) => {
await initTestBed(`
<Stack testId="stack" orientation="vertical" backgroundColor="lightgray" gap="0"
height="240px" paddingHorizontal="50px" paddingVertical="50px">
<Text testId="item_0" backgroundColor="cyan" height="25%">H: 25%</Text>
<Text testId="item_1" backgroundColor="yellow" height="50%">H: 50%</Text>
<Text testId="item_2" backgroundColor="lightgreen" height="25%">H: 25%</Text>
</Stack>
`);
const { height: stackHeight } = await getBounds(page.getByTestId("stack"));
const { top: firstItemTop } = await getBounds(page.getByTestId("item_0"));
const { bottom: lastItemBottom } = await getBounds(page.getByTestId("item_2"));
expect(firstItemTop).toEqual(50);
expect(lastItemBottom).toEqual(stackHeight - 50);
});
test("(horizontal) gaps", async ({ page, initTestBed }) => {
await initTestBed(`
<Stack orientation="horizontal" backgroundColor="lightgray" gap="50px">
<Stack testId="item_0" backgroundColor="red" height="36px" width="36px" />
<Stack testId="item_1" backgroundColor="green" height="36px" width="36px" />
<Stack testId="item_2" backgroundColor="blue" height="36px" width="36px" />
</Stack>
`);
const itemDims0 = await getBounds(page.getByTestId("item_0"));
const itemDims1 = await getBounds(page.getByTestId("item_1"));
const itemDims2 = await getBounds(page.getByTestId("item_2"));
expect(itemDims0.left).toEqual(0);
expect(itemDims1.left).toEqual(itemDims0.right + 50);
expect(itemDims2.left).toEqual(2 * (itemDims0.right + 50));
});
test("(vertical) gaps", async ({ page, initTestBed }) => {
await initTestBed(`
<Stack orientation="vertical" backgroundColor="lightgray" gap="50px">
<Stack testId="item_0" backgroundColor="red" height="36px" width="36px" />
<Stack testId="item_1" backgroundColor="green" height="36px" width="36px" />
<Stack testId="item_2" backgroundColor="blue" height="36px" width="36px" />
</Stack>
`);
const itemDims0 = await getBounds(page.getByTestId("item_0"));
const itemDims1 = await getBounds(page.getByTestId("item_1"));
const itemDims2 = await getBounds(page.getByTestId("item_2"));
expect(itemDims0.top).toEqual(0);
expect(itemDims1.top).toEqual(itemDims0.bottom + 50);
expect(itemDims2.top).toEqual(2 * (itemDims0.bottom + 50));
});
// (horizontal) gaps + percentage -> gaps push the content out of the container
test("(horizontal) gaps + percentage", async ({ page, initTestBed }) => {
await initTestBed(`
<Stack testId="stack" orientation="horizontal" backgroundColor="lightgray" padding="1rem" gap="2rem">
<Stack backgroundColor="red" height="36px" width="25%" />
<Stack backgroundColor="green" height="36px" width="50%" />
<Stack backgroundColor="blue" height="36px" width="25%" />
</Stack>
`);
const isOverflown = await overflows(page.getByTestId("stack"), "x");
expect(isOverflown).toEqual(true);
});
// (horizontal) gaps + star sizing -> gaps don't push the content out of the container
test("(horizontal) gaps + star sizing", async ({ page, initTestBed }) => {
await initTestBed(`
<Stack testId="stack" orientation="horizontal" backgroundColor="lightgray" padding="1rem" gap="2rem">
<Stack backgroundColor="red" height="36px" width="*" />
<Stack backgroundColor="green" height="36px" width="*" />
<Stack backgroundColor="blue" height="36px" width="*" />
<Stack backgroundColor="purple" height="36px" width="*" />
</Stack>
`);
const isOverflown = await overflows(page.getByTestId("stack"), "x");
expect(isOverflown).toEqual(false);
});
test("(horizontal) rtl rendering direction", async ({ page, initTestBed }) => {
await initTestBed(`
<Stack testId="stack" orientation="horizontal" gap="1rem" direction="rtl">
<Stack testId="item_0" backgroundColor="red" height="36px" width="36px" />
<Stack testId="item_1" backgroundColor="green" height="36px" width="36px" />
<Stack testId="item_2" backgroundColor="blue" height="36px" width="36px" />
</Stack>
`);
const { right: stackRight } = await getBounds(page.getByTestId("stack"));
const { right: itemRight0, left: itemLeft0 } = await getBounds(page.getByTestId("item_0"));
const { left: itemLeft1 } = await getBounds(page.getByTestId("item_1"));
const { left: itemLeft2 } = await getBounds(page.getByTestId("item_2"));
expect(itemLeft2).toBeLessThan(itemLeft1);
expect(itemLeft1).toBeLessThan(itemLeft0);
expect(itemRight0).toEqual(stackRight);
});
test("(horizontal) reverse rendering direction", async ({ page, initTestBed }) => {
await initTestBed(`
<Stack testId="stack" orientation="horizontal" gap="1rem" reverse="true">
<Stack testId="item_0" backgroundColor="red" height="36px" width="36px" />
<Stack testId="item_1" backgroundColor="green" height="36px" width="36px" />
<Stack testId="item_2" backgroundColor="blue" height="36px" width="36px" />
</Stack>
`);
const { right: stackRight } = await getBounds(page.getByTestId("stack"));
const { right: itemRight0, left: itemLeft0 } = await getBounds(page.getByTestId("item_0"));
const { left: itemLeft1 } = await getBounds(page.getByTestId("item_1"));
const { left: itemLeft2 } = await getBounds(page.getByTestId("item_2"));
expect(itemLeft2).toBeLessThan(itemLeft1);
expect(itemLeft1).toBeLessThan(itemLeft0);
expect(itemRight0).toEqual(stackRight);
});
test("(vertical) reverse rendering direction", async ({ page, initTestBed }) => {
await initTestBed(`
<Stack testId="stack" orientation="vertical" gap="1rem" reverse="true">
<Stack testId="item_0" backgroundColor="red" height="36px" width="36px" />
<Stack testId="item_1" backgroundColor="green" height="36px" width="36px" />
<Stack testId="item_2" backgroundColor="blue" height="36px" width="36px" />
</Stack>
`);
const { bottom: stackBottom } = await getBounds(page.getByTestId("stack"));
const { bottom: itemBottom0, top: itemTop0 } = await getBounds(page.getByTestId("item_0"));
const { top: itemTop1 } = await getBounds(page.getByTestId("item_1"));
const { top: itemTop2 } = await getBounds(page.getByTestId("item_2"));
expect(itemTop2).toBeLessThan(itemTop1);
expect(itemTop1).toBeLessThan(itemTop0);
expect(itemBottom0).toEqual(stackBottom);
});
test("(horizontal) content wrapping", async ({ page, initTestBed }) => {
await initTestBed(`
<Stack testId="stack" orientation="horizontal" gap="1rem" wrapContent="true">
<Stack testId="item_0" backgroundColor="red" height="36px" width="25%" />
<Stack testId="item_1" backgroundColor="green" height="36px" width="40%" />
<Stack testId="item_2" backgroundColor="blue" height="36px" width="20%" />
<Stack testId="item_3" backgroundColor="purple" height="36px" width="30%" />
</Stack>
`);
const { right: stackRight, bottom: stackBottom } = await getBounds(page.getByTestId("stack"));
const { left: itemLeft0, bottom: itemBottom0 } = await getBounds(page.getByTestId("item_0"));
const { left: itemLeft1 } = await getBounds(page.getByTestId("item_1"));
const { left: itemLeft2, right: itemRight2 } = await getBounds(page.getByTestId("item_2"));
const {
left: itemLeft3,
bottom: itemBottom3,
top: itemTop3,
} = await getBounds(page.getByTestId("item_3"));
expect(itemLeft0).toBeLessThan(itemLeft1);
expect(itemLeft1).toBeLessThan(itemLeft2);
expect(itemRight2).toBeLessThan(stackRight);
expect(itemBottom0).toBeLessThan(itemTop3);
expect(itemLeft3).toEqual(itemLeft0);
expect(itemBottom3).toEqual(stackBottom);
});
test("(horizontal) horizontalAlignment center", async ({ page, initTestBed }) => {
await initTestBed(`
<Stack testId="stack" orientation="horizontal" horizontalAlignment="center" gap="0">
<Stack testId="item_0" backgroundColor="red" height="36px" width="36px" />
<Stack testId="item_1" backgroundColor="green" height="36px" width="36px" />
<Stack testId="item_2" backgroundColor="blue" height="36px" width="36px" />
</Stack>
`);
const { right: stackRight } = await getBounds(page.getByTestId("stack"));
const { left: itemLeft0 } = await getBounds(page.getByTestId("item_0"));
const { right: itemRight2 } = await getBounds(page.getByTestId("item_2"));
const itemWidthSum = 3 * 36;
expect(itemLeft0).toEqual(stackRight / 2 - itemWidthSum / 2);
expect(itemRight2).toEqual(stackRight / 2 + itemWidthSum / 2);
});
test("(vertical) horizontal alignment end", async ({ page, initTestBed }) => {
await initTestBed(`
<Stack testId="stack" orientation="vertical" horizontalAlignment="end" gap="0">
<Stack testId="item_0" backgroundColor="red" height="36px" width="36px" />
<Stack testId="item_1" backgroundColor="green" height="36px" width="36px" />
<Stack testId="item_2" backgroundColor="blue" height="36px" width="36px" />
</Stack>
`);
const { right: stackRight } = await getBounds(page.getByTestId("stack"));
const { right: itemRight0 } = await getBounds(page.getByTestId("item_0"));
const { right: itemRight1 } = await getBounds(page.getByTestId("item_1"));
const { right: itemRight2 } = await getBounds(page.getByTestId("item_2"));
expect(itemRight0).toEqual(stackRight);
expect(itemRight1).toEqual(stackRight);
expect(itemRight2).toEqual(stackRight);
});
test("(horizontal) verticalAlignment center", async ({ page, initTestBed }) => {
await initTestBed(`
<Stack testId="stack" orientation="horizontal" gap="1rem" verticalAlignment="center">
<Stack testId="item_0" backgroundColor="red" height="36px" width="36px" />
<Stack testId="item_1" backgroundColor="green" height="72px" width="36px" />
<Stack testId="item_2" backgroundColor="blue" height="48px" width="36px" />
</Stack>
`);
const stackDims = await getBounds(page.getByTestId("stack"));
const itemDims0 = await getBounds(page.getByTestId("item_0"));
const itemDims1 = await getBounds(page.getByTestId("item_1"));
const itemDims2 = await getBounds(page.getByTestId("item_2"));
expect(itemDims0.top).toEqual(stackDims.height / 2 - itemDims0.height / 2);
expect(itemDims0.bottom).toEqual(stackDims.height / 2 + itemDims0.height / 2);
expect(itemDims1.top).toEqual(stackDims.top);
expect(itemDims1.bottom).toEqual(stackDims.bottom);
expect(itemDims2.top).toEqual(stackDims.height / 2 - itemDims2.height / 2);
expect(itemDims2.bottom).toEqual(stackDims.height / 2 + itemDims2.height / 2);
});
test(`overflowY="scroll"`, async ({ page, initTestBed }) => {
await initTestBed(`
<VStack testId="stack" width="100px" height="60px" backgroundColor="cyan"
overflowY="scroll">
<Text testId="item0">
As its container width and height are fixed, this long text does not
fit into it; it will overflow.
</Text>
</VStack>
`);
const { scrollHeight, clientHeight } = await page
.getByTestId("stack")
.evaluate((elem) => ({ scrollHeight: elem.scrollHeight, clientHeight: elem.clientHeight }));
expect(scrollHeight).toBeGreaterThan(clientHeight);
});
test(`overflowX="scroll"`, async ({ page, initTestBed }) => {
await initTestBed(`
<HStack testId="stack" width="100px" height="60px" backgroundColor="cyan"
overflowX="scroll">
<Text testId="item0">
As its container width and height are fixed, this long text does not
fit into it; it will overflow.
</Text>
</HStack>
`);
const { scrollWidth, clientWidth } = await page
.getByTestId("stack")
.evaluate((elem) => ({ scrollWidth: elem.scrollWidth, clientWidth: elem.clientWidth }));
expect(scrollWidth).toBeGreaterThan(clientWidth);
});
// When you set overflowX to scroll, it will automatically set overflowY to scroll if the text exceeds the viewport vertically
test(`overflowX sets overflowY`, async ({ page, initTestBed }) => {
await initTestBed(`
<VStack testId="stack" height="50px" width="300px" backgroundColor="cyan"
overflowX="scroll">
<Text width="400px" backgroundColor="silver" opacity="0.8">
This text sets its size explicitly bigger than its container.
As it does not fit into the container's viewport, it overflows.
However, its container supports horizontal scrolling so you can
see its content.
</Text>
</VStack>
`);
const { scrollHeight, clientHeight, scrollWidth, clientWidth } = await page
.getByTestId("stack")
.evaluate((elem) => ({
scrollHeight: elem.scrollHeight,
clientHeight: elem.clientHeight,
scrollWidth: elem.scrollWidth,
clientWidth: elem.clientWidth,
}));
expect(scrollWidth).toBeGreaterThan(clientWidth);
expect(scrollHeight).toBeGreaterThan(clientHeight);
});
});
```
--------------------------------------------------------------------------------
/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** - a programming model where UI updates happen automatically when underlying data changes, without requiring manual DOM manipulation or explicit update calls.
### The Reactive Loop
XMLUI follows a simple reactive cycle:
1. **Initial Render**: Framework renders the complete UI from declarative markup
2. **Event Occurrence**: User interactions or system events trigger changes
3. **Automatic State Detection**: Framework detects state mutations transparently
4. **Selective UI Refresh**: Only components affected by the state change re-render
5. **Loop Continuation**: Process repeats for subsequent events
From a developer perspective, reactivity means:
- **Write declarative expressions**: Use `{count}` to display values, `count++` to modify them
- **No manual updates**: Framework automatically handles UI synchronization
- **Transparent mutations**: Change variables directly without special APIs
- **Predictable behavior**: UI always reflects current state consistently
### The Role of Containers in Reactivity Implementation
Containers are the **core mechanism** that enables XMLUI's automatic reactivity. They provide the infrastructure necessary to detect state changes, coordinate updates, and maintain UI consistency.
Reactivity requires several technical capabilities:
- **State Storage**: A place to hold component variables and data
- **Change Detection**: Mechanism to detect when state mutations occur
- **Update Coordination**: System to propagate changes to affected UI components
- **Scope Management**: Control over which components can access which state
- **Performance Optimization**: Efficient updates that don't block the UI
Containers provide all these capabilities through a hierarchical architecture that mirrors the component structure.
## Automatic Container Wrapping
XMLUI **automatically wraps components with containers** when they need reactive capabilities. You declare variables or data sources, and the framework creates the container infrastructure.
The framework creates containers for these cases:
- **App Root Container** - Wraps the entire application entry point
- **User-Defined Component Containers** - Each component instance gets isolated state
- **Variables** - Reactive state holders that trigger UI updates
- **Loaders** - Handle asynchronous data operations
- **Uses Declarations** - Control state inheritance from parents
- **Context Variables** - Framework-injected variables (routing, forms)
- **Scripts** - JavaScript blocks with variables and functions
- **Code-Behind Files** - External script files for application root or component roots
Every component receives an identifier (user-defined or framework-assigned). **User-defined IDs enable programmatic component interaction** - accessing methods, properties, and APIs. Framework IDs handle internal state. Component IDs scope to their declaring file (.xmlui). These IDs are stored in the App Root and User-Defined Component Containers.
### 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 in XMLUI are reactive state holders that automatically trigger UI updates when changed. They can contain any JavaScript value, including functions. Variables can declare functions, and those functions can be invoked.
**Simple Variable Example:**
```xml
<Stack var.count="{0}">
<Button onClick="count++" label="Count: {count}" />
</Stack>
```
**Function Variable Example:**
```xml
<Stack var.count="{0}" var.increment="{() => count++}">
<Button onClick="increment()" label="Count: {count}" />
</Stack>
```
Variables and functions can also be defined in `<script>` tags:
```xml
<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 in Reactivity**: Variables provide the state storage layer for reactive data binding. When a variable changes, the container detects this through proxy-based change detection and triggers selective UI updates. Functions participate in dependency tracking - when they reference other variables, the system tracks these dependencies and re-evaluates when dependencies change.
### Loaders (`loaders`)
Loaders are XMLUI's mechanism for handling asynchronous data operations. The framework automatically creates loaders when it recognizes that components contain data-handling requirements. This happens through the **ApiBoundComponent** system.
**Automatic Loader Creation Cases:**
1. **Properties with DataSource/DataSourceRef types**: When a component property contains a `DataSource` or `DataSourceRef` object
2. **Events with API action types**: When a component event contains `APICall`, `FileDownload`, or `FileUpload` objects
3. **Components with data properties**: Any component with URL-based `data` properties
```xml
<!-- Property-based loader creation -->
<Table data="{users}" />
<!-- Framework creates internal DataLoader when 'users' references a DataSource -->
<!-- Direct URL pattern (frequently used) -->
<Table data="/api/users" />
<!-- Framework automatically creates DataLoader for URL-based data properties -->
<!-- Event-based loader creation -->
<Button>
Save
<event name="click">
<APICall url="/api/save" method="POST" />
</event>
</Button>
<!-- Framework creates APICall handler -->
<!-- Explicit DataSource (also creates loaders) -->
<DataSource id="users" url="/api/users" />
<Table data="{users}" />
<!-- Creates DataLoader managing: loading states, error states, caching, polling -->
```
**Framework Detection Process**: The `ComponentAdapter` scans component properties and events for specific object types that require API operations. It looks for:
- **Properties**: Objects with `type: "DataSource"` or `type: "DataSourceRef"`
- **Events**: Objects with `type: "APICall"`, `type: "FileDownload"`, or `type: "FileUpload"`
When any of these object types are found, the framework wraps the component in an `ApiBoundComponent`, which automatically generates the necessary loaders and wires them into the container system.
**Role in Reactivity**: Loaders manage asynchronous state transitions (loading → loaded/error) and integrate with the container's reducer system via actions like `LOADER_LOADED`, `LOADER_IN_PROGRESS_CHANGED`, etc. They provide reactive properties like `users.value`, `users.inProgress`, `users.loaded`.
### Uses Declarations (`uses`)
The `uses` property provides explicit control over state inheritance from parent containers:
```xml
<!-- Inherit all parent state (default) -->
<Stack>
<!-- children -->
</Stack>
<!-- Inherit no parent state -->
<Stack uses="[]">
<!-- children -->
</Stack>
<!-- Inherit only specific parent state -->
<Stack uses="['userInfo', 'theme']">
<!-- children -->
</Stack>
```
**Note**: XMLUI is moving toward automating the use of `uses` declarations, with plans to eliminate this property in favor of automatic dependency detection.
**Role in Reactivity**: Controls the scope of reactive data flow between parent and child containers. This prevents unnecessary re-renders when unrelated parent state changes and provides explicit data dependencies.
### Context Variables
Context variables are automatically injected by the framework and component implementations to provide contextual information to child components. These cannot be declared through attributes but are provided by the React implementation of XMLUI components.
**Naming Convention**: Context variables start with `$` by convention to distinguish them from user-defined variables.
**Examples of Context Variables** (not exhaustive):
- **Routing**: `$pathname`, `$routeParams`, `$queryParams`, `$linkInfo`
- **Iterators**: `$item`, `$itemIndex` (in Lists, Tables, etc.)
- **Forms**: `$data`, `$validationResult`, `$value`, `$setValue` (in FormItems)
- **Events**: `$param` (in event handlers)
Different components may inject additional context variables specific to their functionality.
```xml
<!-- Context variables are automatically available -->
<Table data="/api/users">
<Column bindTo="name">
<Text>{$item.name}</Text> <!-- $item provided by Table -->
</Column>
</Table>
<Page url="/users/:id">
<Text>User ID: {$routeParams.id}</Text> <!-- $routeParams provided by Page -->
</Page>
```
**Role in Reactivity**: Context variables are automatically injected into the container state, making them available for reactive data binding. When these variables change (e.g., route changes, current item changes), all dependent UI elements automatically update.
### Scripts
JavaScript code blocks that declare 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 in Reactivity**: Scripts are parsed and their declarations (variables, functions) become part of the container's reactive state. The scripting system integrates with the dependency tracking and memoization systems to ensure efficient updates.
### Code-Behind Files
Code-behind files provide a way to define scripts in separate files rather than inline within components. The framework automatically treats these external script files as if they were `<script>` declarations within the application root or user-defined component root.
**File Naming Convention:**
- **Application Root**: `Main.xmlui.xs` (for `Main.xmlui`)
- **User-Defined Component**: `ComponentName.xmlui.xs` (for `ComponentName.xmlui`)
**Role in Reactivity**: Code-behind files are processed identically to inline `<script>` blocks. Their variable and function declarations become part of the container's reactive state, with the same dependency tracking and memoization behavior. The framework automatically imports and executes code-behind files during component initialization, making their exports available in the component's reactive scope.
### Examples
**Important**: Simply having an `id` attribute does NOT automatically create a container. Component IDs are handled differently and are stored in the nearest parent container.
Components are wrapped in containers when they have any of these characteristics (determined by the `isContainerLike` function):
```tsx
// From ContainerWrapper.tsx - Container creation logic
export function isContainerLike(node: ComponentDef) {
if (node.type === "Container") {
return true;
}
// If any of the following properties have a value, we need a container
return !!(
node.loaders || // Data loading operations
node.vars || // Variable declarations
node.uses || // Parent state scoping
node.contextVars || // Context variable provision
node.functions || // Function declarations
node.scriptCollected // Script blocks
);
}
```
**Container Creation 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 Structure, Hierarchy, and Features
This section explores the architectural design of containers, their hierarchical organization, and how they support XMLUI's special concepts like loaders, user-defined components, and reactive variables.
### Container Hierarchy
The container system consists of three main React components working together:
```
ContainerWrapper
└── ErrorBoundary
└── StateContainer
└── ErrorBoundary
└── Container
```
### Core Container Components
#### ContainerWrapper
- **Purpose**: Outer wrapper that converts components into containerized form
- **Location**: `/xmlui/src/components-core/rendering/ContainerWrapper.tsx`
- **Key Responsibility**: Determines if a component needs containerization and wraps it accordingly
Components are wrapped in containers if they have any of these characteristics:
- Loaders (data management operations)
- Variables declared (`vars`)
- Context variables (`contextVars`)
- Scripts (`script` or `scriptCollected`)
- Explicit state usage declarations (`uses` property)
#### StateContainer
- **Purpose**: Manages the actual state storage and state composition
- **Location**: `/xmlui/src/components-core/rendering/StateContainer.tsx`
- **Key Responsibility**: Assembles state from multiple sources and manages state lifecycle
#### Container
- **Purpose**: Executes event handlers and manages state changes while maintaining UI responsiveness
- **Location**: `/xmlui/src/components-core/rendering/Container.tsx`
- **Key Responsibility**: Asynchronous event handler execution and state synchronization
## 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.
```