This is page 26 of 141. Use http://codebase.md/xmlui-org/xmlui/mockApiDef.js?lines=false&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ ├── config.json
│ ├── cool-queens-look.md
│ ├── hot-berries-argue.md
│ ├── twelve-guests-care.md
│ └── wise-towns-dance.md
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-blog.yml
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│ ├── launch.json
│ └── settings.json
├── blog
│ ├── .gitignore
│ ├── .gitkeep
│ ├── CHANGELOG.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.png
│ │ │ │ ├── integrated-blog-search.png
│ │ │ │ └── lorem-ipsum.png
│ │ │ ├── lorem-ipsum.md
│ │ │ ├── newest-post.md
│ │ │ ├── older-post.md
│ │ │ └── welcome-to-the-xmlui-blog.md
│ │ ├── mockServiceWorker.js
│ │ ├── netlify.toml
│ │ ├── resources
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ └── for-download
│ │ │ │ └── xmlui
│ │ │ │ └── xmlui-standalone.umd.js
│ │ │ ├── github.svg
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ ├── Debug.xmlui
│ │ │ └── PageNotFound.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ ├── Main.xmlui.xs
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── ComponentRefLinks.txt
│ ├── content
│ │ ├── _meta.json
│ │ ├── components
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── APICall.md
│ │ │ ├── App.md
│ │ │ ├── AppHeader.md
│ │ │ ├── AppState.md
│ │ │ ├── AutoComplete.md
│ │ │ ├── Avatar.md
│ │ │ ├── Backdrop.md
│ │ │ ├── Badge.md
│ │ │ ├── BarChart.md
│ │ │ ├── Bookmark.md
│ │ │ ├── Breakout.md
│ │ │ ├── Button.md
│ │ │ ├── Card.md
│ │ │ ├── Carousel.md
│ │ │ ├── ChangeListener.md
│ │ │ ├── Checkbox.md
│ │ │ ├── CHStack.md
│ │ │ ├── ColorPicker.md
│ │ │ ├── Column.md
│ │ │ ├── ContentSeparator.md
│ │ │ ├── CVStack.md
│ │ │ ├── DataSource.md
│ │ │ ├── DateInput.md
│ │ │ ├── DatePicker.md
│ │ │ ├── DonutChart.md
│ │ │ ├── DropdownMenu.md
│ │ │ ├── EmojiSelector.md
│ │ │ ├── ExpandableItem.md
│ │ │ ├── FileInput.md
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FlowLayout.md
│ │ │ ├── Footer.md
│ │ │ ├── Form.md
│ │ │ ├── FormItem.md
│ │ │ ├── FormSection.md
│ │ │ ├── Fragment.md
│ │ │ ├── H1.md
│ │ │ ├── H2.md
│ │ │ ├── H3.md
│ │ │ ├── H4.md
│ │ │ ├── H5.md
│ │ │ ├── H6.md
│ │ │ ├── Heading.md
│ │ │ ├── HSplitter.md
│ │ │ ├── HStack.md
│ │ │ ├── Icon.md
│ │ │ ├── IFrame.md
│ │ │ ├── Image.md
│ │ │ ├── Items.md
│ │ │ ├── LabelList.md
│ │ │ ├── Legend.md
│ │ │ ├── LineChart.md
│ │ │ ├── Link.md
│ │ │ ├── List.md
│ │ │ ├── Logo.md
│ │ │ ├── Markdown.md
│ │ │ ├── MenuItem.md
│ │ │ ├── MenuSeparator.md
│ │ │ ├── ModalDialog.md
│ │ │ ├── NavGroup.md
│ │ │ ├── NavLink.md
│ │ │ ├── NavPanel.md
│ │ │ ├── NoResult.md
│ │ │ ├── NumberBox.md
│ │ │ ├── Option.md
│ │ │ ├── Page.md
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── Pages.md
│ │ │ ├── Pagination.md
│ │ │ ├── PasswordInput.md
│ │ │ ├── PieChart.md
│ │ │ ├── ProgressBar.md
│ │ │ ├── Queue.md
│ │ │ ├── RadioGroup.md
│ │ │ ├── RealTimeAdapter.md
│ │ │ ├── Redirect.md
│ │ │ ├── Select.md
│ │ │ ├── Slider.md
│ │ │ ├── Slot.md
│ │ │ ├── SpaceFiller.md
│ │ │ ├── Spinner.md
│ │ │ ├── Splitter.md
│ │ │ ├── Stack.md
│ │ │ ├── StickyBox.md
│ │ │ ├── SubMenuItem.md
│ │ │ ├── Switch.md
│ │ │ ├── TabItem.md
│ │ │ ├── Table.md
│ │ │ ├── TableOfContents.md
│ │ │ ├── Tabs.md
│ │ │ ├── Text.md
│ │ │ ├── TextArea.md
│ │ │ ├── TextBox.md
│ │ │ ├── Theme.md
│ │ │ ├── TimeInput.md
│ │ │ ├── Timer.md
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneSwitch.md
│ │ │ ├── Tooltip.md
│ │ │ ├── Tree.md
│ │ │ ├── VSplitter.md
│ │ │ ├── VStack.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ ├── xmlui-spreadsheet
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Spreadsheet.md
│ │ │ └── xmlui-website-blocks
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Carousel.md
│ │ │ ├── HelloMd.md
│ │ │ ├── HeroSection.md
│ │ │ └── ScrollToTop.md
│ │ └── extensions
│ │ ├── _meta.json
│ │ ├── xmlui-animations
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Animation.md
│ │ │ ├── FadeAnimation.md
│ │ │ ├── FadeInAnimation.md
│ │ │ ├── FadeOutAnimation.md
│ │ │ ├── ScaleAnimation.md
│ │ │ └── SlideInAnimation.md
│ │ └── xmlui-website-blocks
│ │ ├── _meta.json
│ │ ├── _overview.md
│ │ ├── Carousel.md
│ │ ├── HelloMd.md
│ │ ├── HeroSection.md
│ │ └── ScrollToTop.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── pages
│ │ │ ├── _meta.json
│ │ │ ├── app-structure.md
│ │ │ ├── build-editor-component.md
│ │ │ ├── build-hello-world-component.md
│ │ │ ├── components-intro.md
│ │ │ ├── context-variables.md
│ │ │ ├── forms.md
│ │ │ ├── globals.md
│ │ │ ├── glossary.md
│ │ │ ├── helper-tags.md
│ │ │ ├── hosted-deployment.md
│ │ │ ├── howto
│ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md
│ │ │ │ ├── chain-a-refetch.md
│ │ │ │ ├── debug-a-component.md
│ │ │ │ ├── delay-a-datasource-until-another-datasource-is-ready.md
│ │ │ │ ├── delegate-a-method.md
│ │ │ │ ├── do-custom-form-validation.md
│ │ │ │ ├── expose-a-method-from-a-component.md
│ │ │ │ ├── filter-and-transform-data-from-an-api.md
│ │ │ │ ├── group-items-in-list-by-a-property.md
│ │ │ │ ├── handle-background-operations.md
│ │ │ │ ├── hide-an-element-until-its-datasource-is-ready.md
│ │ │ │ ├── make-a-set-of-equal-width-cards.md
│ │ │ │ ├── make-a-table-responsive.md
│ │ │ │ ├── make-navpanel-width-responsive.md
│ │ │ │ ├── modify-a-value-reported-in-a-column.md
│ │ │ │ ├── paginate-a-list.md
│ │ │ │ ├── pass-data-to-a-modal-dialog.md
│ │ │ │ ├── react-to-button-click-not-keystrokes.md
│ │ │ │ ├── set-the-initial-value-of-a-select-from-fetched-data.md
│ │ │ │ ├── share-a-modaldialog-across-components.md
│ │ │ │ ├── sync-selections-between-table-and-list-views.md
│ │ │ │ ├── update-ui-optimistically.md
│ │ │ │ ├── use-built-in-form-validation.md
│ │ │ │ └── use-the-same-modaldialog-to-add-or-edit.md
│ │ │ ├── howto.md
│ │ │ ├── intro.md
│ │ │ ├── layout.md
│ │ │ ├── markup.md
│ │ │ ├── mcp.md
│ │ │ ├── modal-dialogs.md
│ │ │ ├── news-and-reviews.md
│ │ │ ├── reactive-intro.md
│ │ │ ├── refactoring.md
│ │ │ ├── routing-and-links.md
│ │ │ ├── samples
│ │ │ │ ├── color-palette.xmlui
│ │ │ │ ├── color-values.xmlui
│ │ │ │ ├── shadow-sizes.xmlui
│ │ │ │ ├── spacing-sizes.xmlui
│ │ │ │ ├── swatch.xmlui
│ │ │ │ ├── theme-gallery-brief.xmlui
│ │ │ │ └── theme-gallery.xmlui
│ │ │ ├── scoping.md
│ │ │ ├── scripting.md
│ │ │ ├── styles-and-themes
│ │ │ │ ├── common-units.md
│ │ │ │ ├── layout-props.md
│ │ │ │ ├── theme-variable-defaults.md
│ │ │ │ ├── theme-variables.md
│ │ │ │ └── themes.md
│ │ │ ├── template-properties.md
│ │ │ ├── test.md
│ │ │ ├── tutorial-01.md
│ │ │ ├── tutorial-02.md
│ │ │ ├── tutorial-03.md
│ │ │ ├── tutorial-04.md
│ │ │ ├── tutorial-05.md
│ │ │ ├── tutorial-06.md
│ │ │ ├── tutorial-07.md
│ │ │ ├── tutorial-08.md
│ │ │ ├── tutorial-09.md
│ │ │ ├── tutorial-10.md
│ │ │ ├── tutorial-11.md
│ │ │ ├── tutorial-12.md
│ │ │ ├── universal-properties.md
│ │ │ ├── user-defined-components.md
│ │ │ ├── vscode.md
│ │ │ ├── working-with-markdown.md
│ │ │ ├── working-with-text.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-charts
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── DonutChart.md
│ │ │ │ ├── LabelList.md
│ │ │ │ ├── Legend.md
│ │ │ │ ├── LineChart.md
│ │ │ │ └── PieChart.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ └── xmlui-spreadsheet
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ └── Spreadsheet.md
│ │ ├── resources
│ │ │ ├── devdocs
│ │ │ │ ├── debug-proxy-object-2.png
│ │ │ │ ├── debug-proxy-object.png
│ │ │ │ ├── table_editor_01.png
│ │ │ │ ├── table_editor_02.png
│ │ │ │ ├── table_editor_03.png
│ │ │ │ ├── table_editor_04.png
│ │ │ │ ├── table_editor_05.png
│ │ │ │ ├── table_editor_06.png
│ │ │ │ ├── table_editor_07.png
│ │ │ │ ├── table_editor_08.png
│ │ │ │ ├── table_editor_09.png
│ │ │ │ ├── table_editor_10.png
│ │ │ │ ├── table_editor_11.png
│ │ │ │ ├── table-editor-01.png
│ │ │ │ ├── table-editor-02.png
│ │ │ │ ├── table-editor-03.png
│ │ │ │ ├── table-editor-04.png
│ │ │ │ ├── table-editor-06.png
│ │ │ │ ├── table-editor-07.png
│ │ │ │ ├── table-editor-08.png
│ │ │ │ ├── table-editor-09.png
│ │ │ │ └── xmlui-rendering-of-tiptap-markdown.png
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ ├── clients.json
│ │ │ │ ├── daily-revenue.json
│ │ │ │ ├── dashboard-stats.json
│ │ │ │ ├── demo.xmlui
│ │ │ │ ├── demo.xmlui.xs
│ │ │ │ ├── downloads
│ │ │ │ │ └── downloads.json
│ │ │ │ ├── for-download
│ │ │ │ │ ├── index-with-api.html
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── mockApi.js
│ │ │ │ │ ├── start-darwin.sh
│ │ │ │ │ ├── start-linux.sh
│ │ │ │ │ ├── start.bat
│ │ │ │ │ └── xmlui
│ │ │ │ │ └── xmlui-standalone.umd.js
│ │ │ │ ├── getting-started
│ │ │ │ │ ├── cl-tutorial-final.zip
│ │ │ │ │ ├── cl-tutorial.zip
│ │ │ │ │ ├── cl-tutorial2.zip
│ │ │ │ │ ├── cl-tutorial3.zip
│ │ │ │ │ ├── cl-tutorial4.zip
│ │ │ │ │ ├── cl-tutorial5.zip
│ │ │ │ │ ├── cl-tutorial6.zip
│ │ │ │ │ ├── getting-started.zip
│ │ │ │ │ ├── hello-xmlui.zip
│ │ │ │ │ ├── xmlui-empty.zip
│ │ │ │ │ └── xmlui-starter.zip
│ │ │ │ ├── howto
│ │ │ │ │ └── component-icons
│ │ │ │ │ └── up-arrow.svg
│ │ │ │ ├── invoices.json
│ │ │ │ ├── monthly-status.json
│ │ │ │ ├── news-and-reviews.json
│ │ │ │ ├── products.json
│ │ │ │ ├── releases.json
│ │ │ │ ├── tutorials
│ │ │ │ │ ├── datasource
│ │ │ │ │ │ └── api.ts
│ │ │ │ │ └── p2do
│ │ │ │ │ ├── api.ts
│ │ │ │ │ └── todo-logo.svg
│ │ │ │ └── xmlui.json
│ │ │ ├── github.svg
│ │ │ ├── images
│ │ │ │ ├── apiaction-tutorial
│ │ │ │ │ ├── add-success.png
│ │ │ │ │ ├── apiaction-param.png
│ │ │ │ │ ├── change-completed.png
│ │ │ │ │ ├── change-in-progress.png
│ │ │ │ │ ├── confirm-delete.png
│ │ │ │ │ ├── data-error.png
│ │ │ │ │ ├── data-progress.png
│ │ │ │ │ ├── data-success.png
│ │ │ │ │ ├── display-1.png
│ │ │ │ │ ├── item-deleted.png
│ │ │ │ │ ├── item-updated.png
│ │ │ │ │ ├── missing-api-key.png
│ │ │ │ │ ├── new-item-added.png
│ │ │ │ │ └── test-message.png
│ │ │ │ ├── chat-api
│ │ │ │ │ └── domain-model.svg
│ │ │ │ ├── components
│ │ │ │ │ ├── image
│ │ │ │ │ │ └── breakfast.jpg
│ │ │ │ │ ├── markdown
│ │ │ │ │ │ └── colors.png
│ │ │ │ │ └── modal
│ │ │ │ │ ├── deep_link_dialog_1.jpg
│ │ │ │ │ └── deep_link_dialog_2.jpg
│ │ │ │ ├── create-apps
│ │ │ │ │ ├── collapsed-vertical.png
│ │ │ │ │ ├── using-forms-warning-dialog.png
│ │ │ │ │ └── using-forms.png
│ │ │ │ ├── datasource-tutorial
│ │ │ │ │ ├── data-with-header.png
│ │ │ │ │ ├── filtered-data.png
│ │ │ │ │ ├── filtered-items.png
│ │ │ │ │ ├── initial-page-items.png
│ │ │ │ │ ├── list-items.png
│ │ │ │ │ ├── next-page-items.png
│ │ │ │ │ ├── no-data.png
│ │ │ │ │ ├── pagination-1.jpg
│ │ │ │ │ ├── pagination-1.png
│ │ │ │ │ ├── polling-1.png
│ │ │ │ │ ├── refetch-data.png
│ │ │ │ │ ├── slow-loading.png
│ │ │ │ │ ├── test-message.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── unconventional-data.png
│ │ │ │ │ └── unfiltered-items.png
│ │ │ │ ├── flower.jpg
│ │ │ │ ├── get-started
│ │ │ │ │ ├── add-new-contact.png
│ │ │ │ │ ├── app-modified.png
│ │ │ │ │ ├── app-start.png
│ │ │ │ │ ├── app-with-boxes.png
│ │ │ │ │ ├── app-with-toast.png
│ │ │ │ │ ├── boilerplate-structure.png
│ │ │ │ │ ├── cl-initial.png
│ │ │ │ │ ├── cl-start.png
│ │ │ │ │ ├── contact-counts.png
│ │ │ │ │ ├── contact-dialog-title.png
│ │ │ │ │ ├── contact-dialog.png
│ │ │ │ │ ├── contact-menus.png
│ │ │ │ │ ├── contact-predicates.png
│ │ │ │ │ ├── context-menu.png
│ │ │ │ │ ├── dashboard-numbers.png
│ │ │ │ │ ├── default-contact-list.png
│ │ │ │ │ ├── delete-contact.png
│ │ │ │ │ ├── delete-task.png
│ │ │ │ │ ├── detailed-template.png
│ │ │ │ │ ├── edit-contact-details.png
│ │ │ │ │ ├── edited-contact-saved.png
│ │ │ │ │ ├── empty-sections.png
│ │ │ │ │ ├── filter-completed.png
│ │ │ │ │ ├── fullwidth-desktop.png
│ │ │ │ │ ├── fullwidth-mobile.png
│ │ │ │ │ ├── initial-table.png
│ │ │ │ │ ├── items-and-badges.png
│ │ │ │ │ ├── loading-message.png
│ │ │ │ │ ├── new-contact-button.png
│ │ │ │ │ ├── new-contact-saved.png
│ │ │ │ │ ├── no-empty-sections.png
│ │ │ │ │ ├── personal-todo-initial.png
│ │ │ │ │ ├── piechart.png
│ │ │ │ │ ├── review-today.png
│ │ │ │ │ ├── rudimentary-dashboard.png
│ │ │ │ │ ├── section-collapsed.png
│ │ │ │ │ ├── sectioned-items.png
│ │ │ │ │ ├── sections-ordered.png
│ │ │ │ │ ├── spacex-list-with-links.png
│ │ │ │ │ ├── spacex-list.png
│ │ │ │ │ ├── start-personal-todo-1.png
│ │ │ │ │ ├── submit-new-contact.png
│ │ │ │ │ ├── submit-new-task.png
│ │ │ │ │ ├── syntax-highlighting.png
│ │ │ │ │ ├── table-with-badge.png
│ │ │ │ │ ├── template-with-card.png
│ │ │ │ │ ├── test-emulated-api.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── todo-logo.png
│ │ │ │ │ └── xmlui-tools.png
│ │ │ │ ├── HelloApp.png
│ │ │ │ ├── HelloApp2.png
│ │ │ │ ├── logos
│ │ │ │ │ ├── xmlui1.svg
│ │ │ │ │ ├── xmlui2.svg
│ │ │ │ │ ├── xmlui3.svg
│ │ │ │ │ ├── xmlui4.svg
│ │ │ │ │ ├── xmlui5.svg
│ │ │ │ │ ├── xmlui6.svg
│ │ │ │ │ └── xmlui7.svg
│ │ │ │ ├── pdf
│ │ │ │ │ └── dummy-pdf.jpg
│ │ │ │ ├── rendering-engine
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ ├── Component.svg
│ │ │ │ │ ├── CompoundComponent.svg
│ │ │ │ │ ├── RootComponent.svg
│ │ │ │ │ └── tree-with-containers.svg
│ │ │ │ ├── reviewers-guide
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ └── incbutton-in-action.png
│ │ │ │ ├── tools
│ │ │ │ │ └── boilerplate-structure.png
│ │ │ │ ├── try.svg
│ │ │ │ ├── tutorial
│ │ │ │ │ ├── app-chat-history.png
│ │ │ │ │ ├── app-content-placeholder.png
│ │ │ │ │ ├── app-header-and-content.png
│ │ │ │ │ ├── app-links-channel-selected.png
│ │ │ │ │ ├── app-links-click.png
│ │ │ │ │ ├── app-navigation.png
│ │ │ │ │ ├── finished-ex01.png
│ │ │ │ │ ├── finished-ex02.png
│ │ │ │ │ ├── hello.png
│ │ │ │ │ ├── splash-screen-advanced.png
│ │ │ │ │ ├── splash-screen-after-click.png
│ │ │ │ │ ├── splash-screen-centered.png
│ │ │ │ │ ├── splash-screen-events.png
│ │ │ │ │ ├── splash-screen-expression.png
│ │ │ │ │ ├── splash-screen-reuse-after.png
│ │ │ │ │ ├── splash-screen-reuse-before.png
│ │ │ │ │ └── splash-screen.png
│ │ │ │ └── tutorial-01.png
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ ├── Boxes.xmlui
│ │ │ ├── Breadcrumb.xmlui
│ │ │ ├── ChangeLog.xmlui
│ │ │ ├── ColorPalette.xmlui
│ │ │ ├── DocumentLinks.xmlui
│ │ │ ├── DocumentPage.xmlui
│ │ │ ├── DocumentPageNoTOC.xmlui
│ │ │ ├── Icons.xmlui
│ │ │ ├── IncButton.xmlui
│ │ │ ├── IncButton2.xmlui
│ │ │ ├── NameValue.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ ├── PaletteItem.xmlui
│ │ │ ├── Palettes.xmlui
│ │ │ ├── SectionHeader.xmlui
│ │ │ ├── TBD.xmlui
│ │ │ ├── Test.xmlui
│ │ │ ├── ThemesIntro.xmlui
│ │ │ ├── ThousandThemes.xmlui
│ │ │ ├── TubeStops.xmlui
│ │ │ ├── TubeStops.xmlui.xs
│ │ │ └── TwoColumnCode.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│ ├── xmlui-animations
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── Animation.tsx
│ │ │ ├── AnimationNative.tsx
│ │ │ ├── FadeAnimation.tsx
│ │ │ ├── FadeInAnimation.tsx
│ │ │ ├── FadeOutAnimation.tsx
│ │ │ ├── index.tsx
│ │ │ ├── ScaleAnimation.tsx
│ │ │ └── SlideInAnimation.tsx
│ │ └── tsconfig.json
│ ├── xmlui-devtools
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── devtools
│ │ │ │ ├── DevTools.tsx
│ │ │ │ ├── DevToolsNative.module.scss
│ │ │ │ ├── DevToolsNative.tsx
│ │ │ │ ├── ModalDialog.module.scss
│ │ │ │ ├── ModalDialog.tsx
│ │ │ │ ├── ModalVisibilityContext.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── editor
│ │ │ │ └── Editor.tsx
│ │ │ └── index.tsx
│ │ ├── tsconfig.json
│ │ └── vite.config-overrides.ts
│ ├── xmlui-hello-world
│ │ ├── .gitignore
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── HelloWorld.module.scss
│ │ │ ├── HelloWorld.tsx
│ │ │ ├── HelloWorldNative.tsx
│ │ │ └── index.tsx
│ │ └── tsconfig.json
│ ├── xmlui-os-frames
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── IPhoneFrame.module.scss
│ │ │ ├── IPhoneFrame.tsx
│ │ │ ├── MacOSAppFrame.module.scss
│ │ │ ├── MacOSAppFrame.tsx
│ │ │ ├── WindowsAppFrame.module.scss
│ │ │ └── WindowsAppFrame.tsx
│ │ └── tsconfig.json
│ ├── xmlui-pdf
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ ├── components
│ │ │ │ └── Pdf.xmlui
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── LazyPdfNative.tsx
│ │ │ ├── Pdf.module.scss
│ │ │ └── Pdf.tsx
│ │ └── tsconfig.json
│ ├── xmlui-playground
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── hooks
│ │ │ │ ├── usePlayground.ts
│ │ │ │ └── useToast.ts
│ │ │ ├── index.tsx
│ │ │ ├── playground
│ │ │ │ ├── Box.module.scss
│ │ │ │ ├── Box.tsx
│ │ │ │ ├── CodeSelector.tsx
│ │ │ │ ├── ConfirmationDialog.module.scss
│ │ │ │ ├── ConfirmationDialog.tsx
│ │ │ │ ├── Editor.tsx
│ │ │ │ ├── Header.module.scss
│ │ │ │ ├── Header.tsx
│ │ │ │ ├── Playground.tsx
│ │ │ │ ├── PlaygroundContent.module.scss
│ │ │ │ ├── PlaygroundContent.tsx
│ │ │ │ ├── PlaygroundNative.module.scss
│ │ │ │ ├── PlaygroundNative.tsx
│ │ │ │ ├── Preview.module.scss
│ │ │ │ ├── Preview.tsx
│ │ │ │ ├── Select.module.scss
│ │ │ │ ├── StandalonePlayground.tsx
│ │ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ │ ├── ThemeSwitcher.module.scss
│ │ │ │ ├── ThemeSwitcher.tsx
│ │ │ │ ├── ToneSwitcher.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── providers
│ │ │ │ ├── Toast.module.scss
│ │ │ │ └── ToastProvider.tsx
│ │ │ ├── state
│ │ │ │ └── store.ts
│ │ │ ├── themes
│ │ │ │ └── theme.ts
│ │ │ └── utils
│ │ │ └── helpers.ts
│ │ └── tsconfig.json
│ ├── xmlui-search
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── Search.module.scss
│ │ │ └── Search.tsx
│ │ └── tsconfig.json
│ ├── xmlui-spreadsheet
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── Spreadsheet.tsx
│ │ │ └── SpreadsheetNative.tsx
│ │ └── tsconfig.json
│ └── xmlui-website-blocks
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── demo
│ │ ├── components
│ │ │ ├── HeroBackgroundBreakoutPage.xmlui
│ │ │ ├── HeroBackgroundsPage.xmlui
│ │ │ ├── HeroContentsPage.xmlui
│ │ │ ├── HeroTextAlignPage.xmlui
│ │ │ ├── HeroTextPage.xmlui
│ │ │ └── HeroTonesPage.xmlui
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── default.ts
│ ├── index.html
│ ├── index.ts
│ ├── meta
│ │ └── componentsMetadata.ts
│ ├── package.json
│ ├── public
│ │ └── resources
│ │ ├── building.jpg
│ │ └── xmlui-logo.svg
│ ├── src
│ │ ├── Carousel
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── FancyButton
│ │ │ ├── FancyButton.module.scss
│ │ │ ├── FancyButton.tsx
│ │ │ └── FancyButton.xmlui
│ │ ├── Hello
│ │ │ ├── Hello.tsx
│ │ │ ├── Hello.xmlui
│ │ │ └── Hello.xmlui.xs
│ │ ├── HeroSection
│ │ │ ├── HeroSection.module.scss
│ │ │ ├── HeroSection.tsx
│ │ │ └── HeroSectionNative.tsx
│ │ ├── index.tsx
│ │ ├── ScrollToTop
│ │ │ ├── ScrollToTop.module.scss
│ │ │ ├── ScrollToTop.tsx
│ │ │ └── ScrollToTopNative.tsx
│ │ └── vite-env.d.ts
│ └── tsconfig.json
├── README.md
├── tools
│ ├── codefence
│ │ └── xmlui-code-fence-docs.md
│ ├── create-app
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── create-app.ts
│ │ ├── helpers
│ │ │ ├── copy.ts
│ │ │ ├── get-pkg-manager.ts
│ │ │ ├── git.ts
│ │ │ ├── install.ts
│ │ │ ├── is-folder-empty.ts
│ │ │ ├── is-writeable.ts
│ │ │ ├── make-dir.ts
│ │ │ └── validate-pkg.ts
│ │ ├── index.ts
│ │ ├── package.json
│ │ ├── templates
│ │ │ ├── default
│ │ │ │ └── ts
│ │ │ │ ├── gitignore
│ │ │ │ ├── index.html
│ │ │ │ ├── index.ts
│ │ │ │ ├── public
│ │ │ │ │ ├── mockServiceWorker.js
│ │ │ │ │ ├── resources
│ │ │ │ │ │ ├── favicon.ico
│ │ │ │ │ │ └── xmlui-logo.svg
│ │ │ │ │ └── serve.json
│ │ │ │ └── src
│ │ │ │ ├── components
│ │ │ │ │ ├── ApiAware.xmlui
│ │ │ │ │ ├── Home.xmlui
│ │ │ │ │ ├── IncButton.xmlui
│ │ │ │ │ └── PagePanel.xmlui
│ │ │ │ ├── config.ts
│ │ │ │ └── Main.xmlui
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ └── tsconfig.json
│ ├── create-xmlui-hello-world
│ │ ├── index.js
│ │ └── package.json
│ └── vscode
│ ├── .gitignore
│ ├── .vscode
│ │ ├── launch.json
│ │ └── tasks.json
│ ├── .vscodeignore
│ ├── build.sh
│ ├── CHANGELOG.md
│ ├── esbuild.js
│ ├── eslint.config.mjs
│ ├── formatter-docs.md
│ ├── generate-test-sample.sh
│ ├── LICENSE.md
│ ├── package-lock.json
│ ├── package.json
│ ├── README.md
│ ├── resources
│ │ ├── xmlui-logo.png
│ │ └── xmlui-markup-syntax-highlighting.png
│ ├── src
│ │ ├── extension.ts
│ │ └── server.ts
│ ├── syntaxes
│ │ └── xmlui.tmLanguage.json
│ ├── test-samples
│ │ └── sample.xmlui
│ ├── tsconfig.json
│ └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
├── .gitignore
├── bin
│ ├── bootstrap.js
│ ├── build-lib.ts
│ ├── build.ts
│ ├── index.ts
│ ├── preview.ts
│ ├── start.ts
│ ├── vite-xmlui-plugin.ts
│ └── viteConfig.ts
├── CHANGELOG.md
├── conventions
│ ├── component-qa-checklist.md
│ ├── copilot-conventions.md
│ ├── create-xmlui-components.md
│ ├── mermaid.md
│ ├── testing-conventions.md
│ └── xmlui-in-a-nutshell.md
├── dev-docs
│ ├── accessibility.md
│ ├── build-system.md
│ ├── build-xmlui.md
│ ├── component-behaviors.md
│ ├── containers.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
│ ├── state-management.md
│ ├── ud-components.md
│ └── xmlui-repo.md
├── package.json
├── playwright.config.ts
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── generate-docs
│ │ ├── build-downloads-map.mjs
│ │ ├── build-pages-map.mjs
│ │ ├── components-config.json
│ │ ├── configuration-management.mjs
│ │ ├── constants.mjs
│ │ ├── create-theme-files.mjs
│ │ ├── DocsGenerator.mjs
│ │ ├── error-handling.mjs
│ │ ├── extensions-config.json
│ │ ├── folders.mjs
│ │ ├── generate-summary-files.mjs
│ │ ├── get-docs.mjs
│ │ ├── input-handler.mjs
│ │ ├── logger.mjs
│ │ ├── logging-standards.mjs
│ │ ├── MetadataProcessor.mjs
│ │ ├── pattern-utilities.mjs
│ │ └── utils.mjs
│ ├── get-langserver-metadata.mjs
│ ├── inline-links.mjs
│ └── README-e2e-summary.md
├── src
│ ├── abstractions
│ │ ├── _conventions.md
│ │ ├── ActionDefs.ts
│ │ ├── AppContextDefs.ts
│ │ ├── ComponentDefs.ts
│ │ ├── ContainerDefs.ts
│ │ ├── ExtensionDefs.ts
│ │ ├── FunctionDefs.ts
│ │ ├── RendererDefs.ts
│ │ ├── scripting
│ │ │ ├── BlockScope.ts
│ │ │ ├── Compilation.ts
│ │ │ ├── LogicalThread.ts
│ │ │ ├── LoopScope.ts
│ │ │ ├── modules.ts
│ │ │ ├── ScriptParserError.ts
│ │ │ ├── Token.ts
│ │ │ ├── TryScope.ts
│ │ │ └── TryScopeExp.ts
│ │ └── ThemingDefs.ts
│ ├── components
│ │ ├── _conventions.md
│ │ ├── abstractions.ts
│ │ ├── Accordion
│ │ │ ├── Accordion.md
│ │ │ ├── Accordion.module.scss
│ │ │ ├── Accordion.spec.ts
│ │ │ ├── Accordion.tsx
│ │ │ ├── AccordionContext.tsx
│ │ │ ├── AccordionItem.tsx
│ │ │ ├── AccordionItemNative.tsx
│ │ │ └── AccordionNative.tsx
│ │ ├── Animation
│ │ │ └── AnimationNative.tsx
│ │ ├── APICall
│ │ │ ├── APICall.md
│ │ │ ├── APICall.spec.ts
│ │ │ ├── APICall.tsx
│ │ │ └── APICallNative.tsx
│ │ ├── App
│ │ │ ├── App.md
│ │ │ ├── App.module.scss
│ │ │ ├── App.spec.ts
│ │ │ ├── App.tsx
│ │ │ ├── AppLayoutContext.ts
│ │ │ ├── AppNative.tsx
│ │ │ ├── AppStateContext.ts
│ │ │ ├── doc-resources
│ │ │ │ ├── condensed-sticky.xmlui
│ │ │ │ ├── condensed.xmlui
│ │ │ │ ├── horizontal-sticky.xmlui
│ │ │ │ ├── horizontal.xmlui
│ │ │ │ ├── vertical-full-header.xmlui
│ │ │ │ ├── vertical-sticky.xmlui
│ │ │ │ └── vertical.xmlui
│ │ │ ├── IndexerContext.ts
│ │ │ ├── LinkInfoContext.ts
│ │ │ ├── SearchContext.tsx
│ │ │ ├── Sheet.module.scss
│ │ │ └── Sheet.tsx
│ │ ├── AppHeader
│ │ │ ├── AppHeader.md
│ │ │ ├── AppHeader.module.scss
│ │ │ ├── AppHeader.spec.ts
│ │ │ ├── AppHeader.tsx
│ │ │ └── AppHeaderNative.tsx
│ │ ├── AppState
│ │ │ ├── AppState.md
│ │ │ ├── AppState.spec.ts
│ │ │ ├── AppState.tsx
│ │ │ └── AppStateNative.tsx
│ │ ├── AutoComplete
│ │ │ ├── AutoComplete.md
│ │ │ ├── AutoComplete.module.scss
│ │ │ ├── AutoComplete.spec.ts
│ │ │ ├── AutoComplete.tsx
│ │ │ ├── AutoCompleteContext.tsx
│ │ │ └── AutoCompleteNative.tsx
│ │ ├── Avatar
│ │ │ ├── Avatar.md
│ │ │ ├── Avatar.module.scss
│ │ │ ├── Avatar.spec.ts
│ │ │ ├── Avatar.tsx
│ │ │ └── AvatarNative.tsx
│ │ ├── Backdrop
│ │ │ ├── Backdrop.md
│ │ │ ├── Backdrop.module.scss
│ │ │ ├── Backdrop.spec.ts
│ │ │ ├── Backdrop.tsx
│ │ │ └── BackdropNative.tsx
│ │ ├── Badge
│ │ │ ├── Badge.md
│ │ │ ├── Badge.module.scss
│ │ │ ├── Badge.spec.ts
│ │ │ ├── Badge.tsx
│ │ │ └── BadgeNative.tsx
│ │ ├── Bookmark
│ │ │ ├── Bookmark.md
│ │ │ ├── Bookmark.module.scss
│ │ │ ├── Bookmark.spec.ts
│ │ │ ├── Bookmark.tsx
│ │ │ └── BookmarkNative.tsx
│ │ ├── Breakout
│ │ │ ├── Breakout.module.scss
│ │ │ ├── Breakout.spec.ts
│ │ │ ├── Breakout.tsx
│ │ │ └── BreakoutNative.tsx
│ │ ├── Button
│ │ │ ├── Button-style.spec.ts
│ │ │ ├── Button.md
│ │ │ ├── Button.module.scss
│ │ │ ├── Button.spec.ts
│ │ │ ├── Button.tsx
│ │ │ └── ButtonNative.tsx
│ │ ├── Card
│ │ │ ├── Card.md
│ │ │ ├── Card.module.scss
│ │ │ ├── Card.spec.ts
│ │ │ ├── Card.tsx
│ │ │ └── CardNative.tsx
│ │ ├── Carousel
│ │ │ ├── Carousel.md
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.spec.ts
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ ├── CarouselItem.tsx
│ │ │ ├── CarouselItemNative.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── ChangeListener
│ │ │ ├── ChangeListener.md
│ │ │ ├── ChangeListener.spec.ts
│ │ │ ├── ChangeListener.tsx
│ │ │ └── ChangeListenerNative.tsx
│ │ ├── chart-color-schemes.ts
│ │ ├── Charts
│ │ │ ├── AreaChart
│ │ │ │ ├── AreaChart.md
│ │ │ │ ├── AreaChart.spec.ts
│ │ │ │ ├── AreaChart.tsx
│ │ │ │ └── AreaChartNative.tsx
│ │ │ ├── BarChart
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── BarChart.module.scss
│ │ │ │ ├── BarChart.spec.ts
│ │ │ │ ├── BarChart.tsx
│ │ │ │ └── BarChartNative.tsx
│ │ │ ├── DonutChart
│ │ │ │ ├── DonutChart.spec.ts
│ │ │ │ └── DonutChart.tsx
│ │ │ ├── LabelList
│ │ │ │ ├── LabelList.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ ├── LabelListNative.module.scss
│ │ │ │ └── LabelListNative.tsx
│ │ │ ├── Legend
│ │ │ │ ├── Legend.spec.ts
│ │ │ │ ├── Legend.tsx
│ │ │ │ └── LegendNative.tsx
│ │ │ ├── LineChart
│ │ │ │ ├── LineChart.md
│ │ │ │ ├── LineChart.module.scss
│ │ │ │ ├── LineChart.spec.ts
│ │ │ │ ├── LineChart.tsx
│ │ │ │ └── LineChartNative.tsx
│ │ │ ├── PieChart
│ │ │ │ ├── PieChart.md
│ │ │ │ ├── PieChart.spec.ts
│ │ │ │ ├── PieChart.tsx
│ │ │ │ ├── PieChartNative.module.scss
│ │ │ │ └── PieChartNative.tsx
│ │ │ ├── RadarChart
│ │ │ │ ├── RadarChart.md
│ │ │ │ ├── RadarChart.spec.ts
│ │ │ │ ├── RadarChart.tsx
│ │ │ │ └── RadarChartNative.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── TooltipContent.module.scss
│ │ │ │ ├── TooltipContent.spec.ts
│ │ │ │ └── TooltipContent.tsx
│ │ │ └── utils
│ │ │ ├── abstractions.ts
│ │ │ └── ChartProvider.tsx
│ │ ├── Checkbox
│ │ │ ├── Checkbox.md
│ │ │ ├── Checkbox.spec.ts
│ │ │ └── Checkbox.tsx
│ │ ├── CodeBlock
│ │ │ ├── CodeBlock.module.scss
│ │ │ ├── CodeBlock.spec.ts
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CodeBlockNative.tsx
│ │ │ └── highlight-code.ts
│ │ ├── collectedComponentMetadata.ts
│ │ ├── ColorPicker
│ │ │ ├── ColorPicker.md
│ │ │ ├── ColorPicker.module.scss
│ │ │ ├── ColorPicker.spec.ts
│ │ │ ├── ColorPicker.tsx
│ │ │ └── ColorPickerNative.tsx
│ │ ├── Column
│ │ │ ├── Column.md
│ │ │ ├── Column.tsx
│ │ │ ├── ColumnNative.tsx
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ └── TableContext.tsx
│ │ ├── component-utils.ts
│ │ ├── ComponentProvider.tsx
│ │ ├── ComponentRegistryContext.tsx
│ │ ├── container-helpers.tsx
│ │ ├── ContentSeparator
│ │ │ ├── ContentSeparator.md
│ │ │ ├── ContentSeparator.module.scss
│ │ │ ├── ContentSeparator.spec.ts
│ │ │ ├── ContentSeparator.tsx
│ │ │ └── ContentSeparatorNative.tsx
│ │ ├── DataSource
│ │ │ ├── DataSource.md
│ │ │ └── DataSource.tsx
│ │ ├── DateInput
│ │ │ ├── DateInput.md
│ │ │ ├── DateInput.module.scss
│ │ │ ├── DateInput.spec.ts
│ │ │ ├── DateInput.tsx
│ │ │ └── DateInputNative.tsx
│ │ ├── DatePicker
│ │ │ ├── DatePicker.md
│ │ │ ├── DatePicker.module.scss
│ │ │ ├── DatePicker.spec.ts
│ │ │ ├── DatePicker.tsx
│ │ │ └── DatePickerNative.tsx
│ │ ├── DropdownMenu
│ │ │ ├── DropdownMenu.md
│ │ │ ├── DropdownMenu.module.scss
│ │ │ ├── DropdownMenu.spec.ts
│ │ │ ├── DropdownMenu.tsx
│ │ │ ├── DropdownMenuNative.tsx
│ │ │ ├── MenuItem.md
│ │ │ └── SubMenuItem.md
│ │ ├── EmojiSelector
│ │ │ ├── EmojiSelector.md
│ │ │ ├── EmojiSelector.spec.ts
│ │ │ ├── EmojiSelector.tsx
│ │ │ └── EmojiSelectorNative.tsx
│ │ ├── ExpandableItem
│ │ │ ├── ExpandableItem.module.scss
│ │ │ ├── ExpandableItem.spec.ts
│ │ │ ├── ExpandableItem.tsx
│ │ │ └── ExpandableItemNative.tsx
│ │ ├── FileInput
│ │ │ ├── FileInput.md
│ │ │ ├── FileInput.module.scss
│ │ │ ├── FileInput.spec.ts
│ │ │ ├── FileInput.tsx
│ │ │ └── FileInputNative.tsx
│ │ ├── FileUploadDropZone
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FileUploadDropZone.module.scss
│ │ │ ├── FileUploadDropZone.spec.ts
│ │ │ ├── FileUploadDropZone.tsx
│ │ │ └── FileUploadDropZoneNative.tsx
│ │ ├── FlowLayout
│ │ │ ├── FlowLayout.md
│ │ │ ├── FlowLayout.module.scss
│ │ │ ├── FlowLayout.spec.ts
│ │ │ ├── FlowLayout.spec.ts-snapshots
│ │ │ │ └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
│ │ │ ├── FlowLayout.tsx
│ │ │ └── FlowLayoutNative.tsx
│ │ ├── Footer
│ │ │ ├── Footer.md
│ │ │ ├── Footer.module.scss
│ │ │ ├── Footer.spec.ts
│ │ │ ├── Footer.tsx
│ │ │ └── FooterNative.tsx
│ │ ├── Form
│ │ │ ├── Form.md
│ │ │ ├── Form.module.scss
│ │ │ ├── Form.spec.ts
│ │ │ ├── Form.tsx
│ │ │ ├── formActions.ts
│ │ │ ├── FormContext.ts
│ │ │ └── FormNative.tsx
│ │ ├── FormItem
│ │ │ ├── FormItem.md
│ │ │ ├── FormItem.module.scss
│ │ │ ├── FormItem.spec.ts
│ │ │ ├── FormItem.tsx
│ │ │ ├── FormItemNative.tsx
│ │ │ ├── HelperText.module.scss
│ │ │ ├── HelperText.tsx
│ │ │ ├── ItemWithLabel.tsx
│ │ │ └── Validations.ts
│ │ ├── FormSection
│ │ │ ├── FormSection.md
│ │ │ ├── FormSection.ts
│ │ │ └── FormSection.xmlui
│ │ ├── Fragment
│ │ │ ├── Fragment.spec.ts
│ │ │ └── Fragment.tsx
│ │ ├── Heading
│ │ │ ├── abstractions.ts
│ │ │ ├── H1.md
│ │ │ ├── H1.spec.ts
│ │ │ ├── H2.md
│ │ │ ├── H2.spec.ts
│ │ │ ├── H3.md
│ │ │ ├── H3.spec.ts
│ │ │ ├── H4.md
│ │ │ ├── H4.spec.ts
│ │ │ ├── H5.md
│ │ │ ├── H5.spec.ts
│ │ │ ├── H6.md
│ │ │ ├── H6.spec.ts
│ │ │ ├── Heading.md
│ │ │ ├── Heading.module.scss
│ │ │ ├── Heading.spec.ts
│ │ │ ├── Heading.tsx
│ │ │ └── HeadingNative.tsx
│ │ ├── HoverCard
│ │ │ ├── HoverCard.tsx
│ │ │ └── HovercardNative.tsx
│ │ ├── HtmlTags
│ │ │ ├── HtmlTags.module.scss
│ │ │ ├── HtmlTags.spec.ts
│ │ │ └── HtmlTags.tsx
│ │ ├── Icon
│ │ │ ├── AdmonitionDanger.tsx
│ │ │ ├── AdmonitionInfo.tsx
│ │ │ ├── AdmonitionNote.tsx
│ │ │ ├── AdmonitionTip.tsx
│ │ │ ├── AdmonitionWarning.tsx
│ │ │ ├── ApiIcon.tsx
│ │ │ ├── ArrowDropDown.module.scss
│ │ │ ├── ArrowDropDown.tsx
│ │ │ ├── ArrowDropUp.module.scss
│ │ │ ├── ArrowDropUp.tsx
│ │ │ ├── ArrowLeft.module.scss
│ │ │ ├── ArrowLeft.tsx
│ │ │ ├── ArrowRight.module.scss
│ │ │ ├── ArrowRight.tsx
│ │ │ ├── Attach.tsx
│ │ │ ├── Binding.module.scss
│ │ │ ├── Binding.tsx
│ │ │ ├── BoardIcon.tsx
│ │ │ ├── BoxIcon.tsx
│ │ │ ├── CheckIcon.tsx
│ │ │ ├── ChevronDownIcon.tsx
│ │ │ ├── ChevronLeft.tsx
│ │ │ ├── ChevronRight.tsx
│ │ │ ├── ChevronUpIcon.tsx
│ │ │ ├── CodeFileIcon.tsx
│ │ │ ├── CodeSandbox.tsx
│ │ │ ├── CompactListIcon.tsx
│ │ │ ├── ContentCopyIcon.tsx
│ │ │ ├── DarkToLightIcon.tsx
│ │ │ ├── DatabaseIcon.module.scss
│ │ │ ├── DatabaseIcon.tsx
│ │ │ ├── DocFileIcon.tsx
│ │ │ ├── DocIcon.tsx
│ │ │ ├── DotMenuHorizontalIcon.tsx
│ │ │ ├── DotMenuIcon.tsx
│ │ │ ├── EmailIcon.tsx
│ │ │ ├── EmptyFolderIcon.tsx
│ │ │ ├── ErrorIcon.tsx
│ │ │ ├── ExpressionIcon.tsx
│ │ │ ├── FillPlusCricleIcon.tsx
│ │ │ ├── FilterIcon.tsx
│ │ │ ├── FolderIcon.tsx
│ │ │ ├── GlobeIcon.tsx
│ │ │ ├── HomeIcon.tsx
│ │ │ ├── HyperLinkIcon.tsx
│ │ │ ├── Icon.md
│ │ │ ├── Icon.module.scss
│ │ │ ├── Icon.spec.ts
│ │ │ ├── Icon.tsx
│ │ │ ├── IconNative.tsx
│ │ │ ├── ImageFileIcon.tsx
│ │ │ ├── Inspect.tsx
│ │ │ ├── LightToDark.tsx
│ │ │ ├── LinkIcon.tsx
│ │ │ ├── ListIcon.tsx
│ │ │ ├── LooseListIcon.tsx
│ │ │ ├── MoonIcon.tsx
│ │ │ ├── MoreOptionsIcon.tsx
│ │ │ ├── NoSortIcon.tsx
│ │ │ ├── PDFIcon.tsx
│ │ │ ├── PenIcon.tsx
│ │ │ ├── PhoneIcon.tsx
│ │ │ ├── PhotoIcon.tsx
│ │ │ ├── PlusIcon.tsx
│ │ │ ├── SearchIcon.tsx
│ │ │ ├── ShareIcon.tsx
│ │ │ ├── SortAscendingIcon.tsx
│ │ │ ├── SortDescendingIcon.tsx
│ │ │ ├── StarsIcon.tsx
│ │ │ ├── SunIcon.tsx
│ │ │ ├── svg
│ │ │ │ ├── admonition_danger.svg
│ │ │ │ ├── admonition_info.svg
│ │ │ │ ├── admonition_note.svg
│ │ │ │ ├── admonition_tip.svg
│ │ │ │ ├── admonition_warning.svg
│ │ │ │ ├── api.svg
│ │ │ │ ├── arrow-dropdown.svg
│ │ │ │ ├── arrow-left.svg
│ │ │ │ ├── arrow-right.svg
│ │ │ │ ├── arrow-up.svg
│ │ │ │ ├── attach.svg
│ │ │ │ ├── binding.svg
│ │ │ │ ├── box.svg
│ │ │ │ ├── bulb.svg
│ │ │ │ ├── code-file.svg
│ │ │ │ ├── code-sandbox.svg
│ │ │ │ ├── dark_to_light.svg
│ │ │ │ ├── database.svg
│ │ │ │ ├── doc.svg
│ │ │ │ ├── empty-folder.svg
│ │ │ │ ├── expression.svg
│ │ │ │ ├── eye-closed.svg
│ │ │ │ ├── eye-dark.svg
│ │ │ │ ├── eye.svg
│ │ │ │ ├── file-text.svg
│ │ │ │ ├── filter.svg
│ │ │ │ ├── folder.svg
│ │ │ │ ├── img.svg
│ │ │ │ ├── inspect.svg
│ │ │ │ ├── light_to_dark.svg
│ │ │ │ ├── moon.svg
│ │ │ │ ├── pdf.svg
│ │ │ │ ├── photo.svg
│ │ │ │ ├── share.svg
│ │ │ │ ├── stars.svg
│ │ │ │ ├── sun.svg
│ │ │ │ ├── trending-down.svg
│ │ │ │ ├── trending-level.svg
│ │ │ │ ├── trending-up.svg
│ │ │ │ ├── txt.svg
│ │ │ │ ├── unknown-file.svg
│ │ │ │ ├── unlink.svg
│ │ │ │ └── xls.svg
│ │ │ ├── TableDeleteColumnIcon.tsx
│ │ │ ├── TableDeleteRowIcon.tsx
│ │ │ ├── TableInsertColumnIcon.tsx
│ │ │ ├── TableInsertRowIcon.tsx
│ │ │ ├── TrashIcon.tsx
│ │ │ ├── TrendingDownIcon.tsx
│ │ │ ├── TrendingLevelIcon.tsx
│ │ │ ├── TrendingUpIcon.tsx
│ │ │ ├── TxtIcon.tsx
│ │ │ ├── UnknownFileIcon.tsx
│ │ │ ├── UnlinkIcon.tsx
│ │ │ ├── UserIcon.tsx
│ │ │ ├── WarningIcon.tsx
│ │ │ └── XlsIcon.tsx
│ │ ├── IconProvider.tsx
│ │ ├── IconRegistryContext.tsx
│ │ ├── IFrame
│ │ │ ├── IFrame.md
│ │ │ ├── IFrame.module.scss
│ │ │ ├── IFrame.spec.ts
│ │ │ ├── IFrame.tsx
│ │ │ └── IFrameNative.tsx
│ │ ├── Image
│ │ │ ├── Image.md
│ │ │ ├── Image.module.scss
│ │ │ ├── Image.spec.ts
│ │ │ ├── Image.tsx
│ │ │ └── ImageNative.tsx
│ │ ├── Input
│ │ │ ├── index.ts
│ │ │ ├── InputAdornment.module.scss
│ │ │ ├── InputAdornment.tsx
│ │ │ ├── InputDivider.module.scss
│ │ │ ├── InputDivider.tsx
│ │ │ ├── InputLabel.module.scss
│ │ │ ├── InputLabel.tsx
│ │ │ ├── PartialInput.module.scss
│ │ │ └── PartialInput.tsx
│ │ ├── InspectButton
│ │ │ ├── InspectButton.module.scss
│ │ │ └── InspectButton.tsx
│ │ ├── Items
│ │ │ ├── Items.md
│ │ │ ├── Items.spec.ts
│ │ │ ├── Items.tsx
│ │ │ └── ItemsNative.tsx
│ │ ├── Link
│ │ │ ├── Link.md
│ │ │ ├── Link.module.scss
│ │ │ ├── Link.spec.ts
│ │ │ ├── Link.tsx
│ │ │ └── LinkNative.tsx
│ │ ├── List
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── List.md
│ │ │ ├── List.module.scss
│ │ │ ├── List.spec.ts
│ │ │ ├── List.tsx
│ │ │ └── ListNative.tsx
│ │ ├── Logo
│ │ │ ├── doc-resources
│ │ │ │ └── xmlui-logo.svg
│ │ │ ├── Logo.md
│ │ │ ├── Logo.tsx
│ │ │ └── LogoNative.tsx
│ │ ├── Markdown
│ │ │ ├── CodeText.module.scss
│ │ │ ├── CodeText.tsx
│ │ │ ├── Markdown.md
│ │ │ ├── Markdown.module.scss
│ │ │ ├── Markdown.spec.ts
│ │ │ ├── Markdown.tsx
│ │ │ ├── MarkdownNative.tsx
│ │ │ ├── parse-binding-expr.ts
│ │ │ └── utils.ts
│ │ ├── metadata-helpers.ts
│ │ ├── ModalDialog
│ │ │ ├── ConfirmationModalContextProvider.tsx
│ │ │ ├── Dialog.module.scss
│ │ │ ├── Dialog.tsx
│ │ │ ├── ModalDialog.md
│ │ │ ├── ModalDialog.module.scss
│ │ │ ├── ModalDialog.spec.ts
│ │ │ ├── ModalDialog.tsx
│ │ │ ├── ModalDialogNative.tsx
│ │ │ └── ModalVisibilityContext.tsx
│ │ ├── NavGroup
│ │ │ ├── NavGroup.md
│ │ │ ├── NavGroup.module.scss
│ │ │ ├── NavGroup.spec.ts
│ │ │ ├── NavGroup.tsx
│ │ │ ├── NavGroupContext.ts
│ │ │ └── NavGroupNative.tsx
│ │ ├── NavLink
│ │ │ ├── NavLink.md
│ │ │ ├── NavLink.module.scss
│ │ │ ├── NavLink.spec.ts
│ │ │ ├── NavLink.tsx
│ │ │ └── NavLinkNative.tsx
│ │ ├── NavPanel
│ │ │ ├── NavPanel.md
│ │ │ ├── NavPanel.module.scss
│ │ │ ├── NavPanel.spec.ts
│ │ │ ├── NavPanel.tsx
│ │ │ └── NavPanelNative.tsx
│ │ ├── NestedApp
│ │ │ ├── AppWithCodeView.module.scss
│ │ │ ├── AppWithCodeView.tsx
│ │ │ ├── AppWithCodeViewNative.tsx
│ │ │ ├── defaultProps.tsx
│ │ │ ├── logo.svg
│ │ │ ├── NestedApp.module.scss
│ │ │ ├── NestedApp.tsx
│ │ │ ├── NestedAppNative.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── NoResult
│ │ │ ├── NoResult.md
│ │ │ ├── NoResult.module.scss
│ │ │ ├── NoResult.spec.ts
│ │ │ ├── NoResult.tsx
│ │ │ └── NoResultNative.tsx
│ │ ├── NumberBox
│ │ │ ├── numberbox-abstractions.ts
│ │ │ ├── NumberBox.md
│ │ │ ├── NumberBox.module.scss
│ │ │ ├── NumberBox.spec.ts
│ │ │ ├── NumberBox.tsx
│ │ │ └── NumberBoxNative.tsx
│ │ ├── Option
│ │ │ ├── Option.md
│ │ │ ├── Option.spec.ts
│ │ │ ├── Option.tsx
│ │ │ ├── OptionNative.tsx
│ │ │ └── OptionTypeProvider.tsx
│ │ ├── PageMetaTitle
│ │ │ ├── PageMetaTilteNative.tsx
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── PageMetaTitle.spec.ts
│ │ │ └── PageMetaTitle.tsx
│ │ ├── Pages
│ │ │ ├── Page.md
│ │ │ ├── Pages.md
│ │ │ ├── Pages.module.scss
│ │ │ ├── Pages.tsx
│ │ │ └── PagesNative.tsx
│ │ ├── Pagination
│ │ │ ├── Pagination.md
│ │ │ ├── Pagination.module.scss
│ │ │ ├── Pagination.spec.ts
│ │ │ ├── Pagination.tsx
│ │ │ └── PaginationNative.tsx
│ │ ├── PositionedContainer
│ │ │ ├── PositionedContainer.module.scss
│ │ │ ├── PositionedContainer.tsx
│ │ │ └── PositionedContainerNative.tsx
│ │ ├── ProfileMenu
│ │ │ ├── ProfileMenu.module.scss
│ │ │ └── ProfileMenu.tsx
│ │ ├── ProgressBar
│ │ │ ├── ProgressBar.md
│ │ │ ├── ProgressBar.module.scss
│ │ │ ├── ProgressBar.spec.ts
│ │ │ ├── ProgressBar.tsx
│ │ │ └── ProgressBarNative.tsx
│ │ ├── Queue
│ │ │ ├── Queue.md
│ │ │ ├── Queue.spec.ts
│ │ │ ├── Queue.tsx
│ │ │ ├── queueActions.ts
│ │ │ └── QueueNative.tsx
│ │ ├── RadioGroup
│ │ │ ├── RadioGroup.md
│ │ │ ├── RadioGroup.module.scss
│ │ │ ├── RadioGroup.spec.ts
│ │ │ ├── RadioGroup.tsx
│ │ │ ├── RadioGroupNative.tsx
│ │ │ ├── RadioItem.tsx
│ │ │ └── RadioItemNative.tsx
│ │ ├── RealTimeAdapter
│ │ │ ├── RealTimeAdapter.tsx
│ │ │ └── RealTimeAdapterNative.tsx
│ │ ├── Redirect
│ │ │ ├── Redirect.md
│ │ │ ├── Redirect.spec.ts
│ │ │ └── Redirect.tsx
│ │ ├── ResponsiveBar
│ │ │ ├── README.md
│ │ │ ├── ResponsiveBar.md
│ │ │ ├── ResponsiveBar.module.scss
│ │ │ ├── ResponsiveBar.spec.ts
│ │ │ ├── ResponsiveBar.tsx
│ │ │ └── ResponsiveBarNative.tsx
│ │ ├── Select
│ │ │ ├── HiddenOption.tsx
│ │ │ ├── MultiSelectOption.tsx
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ ├── SelectNative.tsx
│ │ │ ├── SelectOption.tsx
│ │ │ └── SimpleSelect.tsx
│ │ ├── SelectionStore
│ │ │ ├── SelectionStore.md
│ │ │ ├── SelectionStore.tsx
│ │ │ └── SelectionStoreNative.tsx
│ │ ├── Slider
│ │ │ ├── Slider.md
│ │ │ ├── Slider.module.scss
│ │ │ ├── Slider.spec.ts
│ │ │ ├── Slider.tsx
│ │ │ └── SliderNative.tsx
│ │ ├── Slot
│ │ │ ├── Slot.md
│ │ │ ├── Slot.spec.ts
│ │ │ └── Slot.ts
│ │ ├── SlotItem.tsx
│ │ ├── SpaceFiller
│ │ │ ├── SpaceFiller.md
│ │ │ ├── SpaceFiller.module.scss
│ │ │ ├── SpaceFiller.spec.ts
│ │ │ ├── SpaceFiller.tsx
│ │ │ └── SpaceFillerNative.tsx
│ │ ├── Spinner
│ │ │ ├── Spinner.md
│ │ │ ├── Spinner.module.scss
│ │ │ ├── Spinner.spec.ts
│ │ │ ├── Spinner.tsx
│ │ │ └── SpinnerNative.tsx
│ │ ├── Splitter
│ │ │ ├── HSplitter.md
│ │ │ ├── HSplitter.spec.ts
│ │ │ ├── Splitter.md
│ │ │ ├── Splitter.module.scss
│ │ │ ├── Splitter.spec.ts
│ │ │ ├── Splitter.tsx
│ │ │ ├── SplitterNative.tsx
│ │ │ ├── utils.ts
│ │ │ ├── VSplitter.md
│ │ │ └── VSplitter.spec.ts
│ │ ├── Stack
│ │ │ ├── CHStack.md
│ │ │ ├── CHStack.spec.ts
│ │ │ ├── CVStack.md
│ │ │ ├── CVStack.spec.ts
│ │ │ ├── HStack.md
│ │ │ ├── HStack.spec.ts
│ │ │ ├── Stack.md
│ │ │ ├── Stack.module.scss
│ │ │ ├── Stack.spec.ts
│ │ │ ├── Stack.tsx
│ │ │ ├── StackNative.tsx
│ │ │ ├── VStack.md
│ │ │ └── VStack.spec.ts
│ │ ├── StickyBox
│ │ │ ├── StickyBox.md
│ │ │ ├── StickyBox.module.scss
│ │ │ ├── StickyBox.tsx
│ │ │ └── StickyBoxNative.tsx
│ │ ├── Switch
│ │ │ ├── Switch.md
│ │ │ ├── Switch.spec.ts
│ │ │ └── Switch.tsx
│ │ ├── Table
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── react-table-config.d.ts
│ │ │ ├── Table.md
│ │ │ ├── Table.module.scss
│ │ │ ├── Table.spec.ts
│ │ │ ├── Table.tsx
│ │ │ ├── TableNative.tsx
│ │ │ └── useRowSelection.tsx
│ │ ├── TableOfContents
│ │ │ ├── TableOfContents.module.scss
│ │ │ ├── TableOfContents.spec.ts
│ │ │ ├── TableOfContents.tsx
│ │ │ └── TableOfContentsNative.tsx
│ │ ├── Tabs
│ │ │ ├── TabContext.tsx
│ │ │ ├── TabItem.md
│ │ │ ├── TabItem.tsx
│ │ │ ├── TabItemNative.tsx
│ │ │ ├── Tabs.md
│ │ │ ├── Tabs.module.scss
│ │ │ ├── Tabs.spec.ts
│ │ │ ├── Tabs.tsx
│ │ │ └── TabsNative.tsx
│ │ ├── Text
│ │ │ ├── Text.md
│ │ │ ├── Text.module.scss
│ │ │ ├── Text.spec.ts
│ │ │ ├── Text.tsx
│ │ │ └── TextNative.tsx
│ │ ├── TextArea
│ │ │ ├── TextArea.md
│ │ │ ├── TextArea.module.scss
│ │ │ ├── TextArea.spec.ts
│ │ │ ├── TextArea.tsx
│ │ │ ├── TextAreaNative.tsx
│ │ │ ├── TextAreaResizable.tsx
│ │ │ └── useComposedRef.ts
│ │ ├── TextBox
│ │ │ ├── TextBox.md
│ │ │ ├── TextBox.module.scss
│ │ │ ├── TextBox.spec.ts
│ │ │ ├── TextBox.tsx
│ │ │ └── TextBoxNative.tsx
│ │ ├── Theme
│ │ │ ├── NotificationToast.tsx
│ │ │ ├── Theme.md
│ │ │ ├── Theme.module.scss
│ │ │ ├── Theme.spec.ts
│ │ │ ├── Theme.tsx
│ │ │ └── ThemeNative.tsx
│ │ ├── TimeInput
│ │ │ ├── TimeInput.md
│ │ │ ├── TimeInput.module.scss
│ │ │ ├── TimeInput.spec.ts
│ │ │ ├── TimeInput.tsx
│ │ │ ├── TimeInputNative.tsx
│ │ │ └── utils.ts
│ │ ├── Timer
│ │ │ ├── Timer.md
│ │ │ ├── Timer.spec.ts
│ │ │ ├── Timer.tsx
│ │ │ └── TimerNative.tsx
│ │ ├── 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
│ │ │ ├── compound-utils.ts
│ │ │ ├── css-utils.ts
│ │ │ ├── DataLoaderQueryKeyGenerator.ts
│ │ │ ├── date-utils.ts
│ │ │ ├── extractParam.ts
│ │ │ ├── hooks.tsx
│ │ │ ├── LruCache.ts
│ │ │ ├── mergeProps.ts
│ │ │ ├── misc.ts
│ │ │ ├── request-params.ts
│ │ │ ├── statementUtils.ts
│ │ │ └── treeUtils.ts
│ │ └── xmlui-parser.ts
│ ├── index-standalone.ts
│ ├── index.scss
│ ├── index.ts
│ ├── language-server
│ │ ├── server-common.ts
│ │ ├── server-web-worker.ts
│ │ ├── server.ts
│ │ ├── services
│ │ │ ├── common
│ │ │ │ ├── docs-generation.ts
│ │ │ │ ├── lsp-utils.ts
│ │ │ │ ├── metadata-utils.ts
│ │ │ │ └── syntax-node-utilities.ts
│ │ │ ├── completion.ts
│ │ │ ├── diagnostic.ts
│ │ │ ├── format.ts
│ │ │ └── hover.ts
│ │ └── xmlui-metadata-generated.mjs
│ ├── logging
│ │ ├── LoggerContext.tsx
│ │ ├── LoggerInitializer.tsx
│ │ ├── LoggerService.ts
│ │ └── xmlui.ts
│ ├── logo.svg
│ ├── parsers
│ │ ├── common
│ │ │ ├── GenericToken.ts
│ │ │ ├── InputStream.ts
│ │ │ └── utils.ts
│ │ ├── scripting
│ │ │ ├── code-behind-collect.ts
│ │ │ ├── Lexer.ts
│ │ │ ├── modules.ts
│ │ │ ├── Parser.ts
│ │ │ ├── ParserError.ts
│ │ │ ├── ScriptingNodeTypes.ts
│ │ │ ├── TokenTrait.ts
│ │ │ ├── TokenType.ts
│ │ │ └── tree-visitor.ts
│ │ ├── style-parser
│ │ │ ├── errors.ts
│ │ │ ├── source-tree.ts
│ │ │ ├── StyleInputStream.ts
│ │ │ ├── StyleLexer.ts
│ │ │ ├── StyleParser.ts
│ │ │ └── tokens.ts
│ │ └── xmlui-parser
│ │ ├── CharacterCodes.ts
│ │ ├── diagnostics.ts
│ │ ├── fileExtensions.ts
│ │ ├── index.ts
│ │ ├── lint.ts
│ │ ├── parser.ts
│ │ ├── ParserError.ts
│ │ ├── scanner.ts
│ │ ├── syntax-kind.ts
│ │ ├── syntax-node.ts
│ │ ├── transform.ts
│ │ ├── utils.ts
│ │ ├── xmlui-serializer.ts
│ │ └── xmlui-tree.ts
│ ├── react-app-env.d.ts
│ ├── syntax
│ │ ├── monaco
│ │ │ ├── grammar.monacoLanguage.ts
│ │ │ ├── index.ts
│ │ │ ├── xmlui-dark.ts
│ │ │ ├── xmlui-light.ts
│ │ │ └── xmluiscript.monacoLanguage.ts
│ │ └── textMate
│ │ ├── index.ts
│ │ ├── xmlui-dark.json
│ │ ├── xmlui-light.json
│ │ ├── xmlui.json
│ │ └── xmlui.tmLanguage.json
│ ├── testing
│ │ ├── assertions.ts
│ │ ├── component-test-helpers.ts
│ │ ├── ComponentDrivers.ts
│ │ ├── drivers
│ │ │ ├── DateInputDriver.ts
│ │ │ ├── ModalDialogDriver.ts
│ │ │ ├── NumberBoxDriver.ts
│ │ │ ├── TextBoxDriver.ts
│ │ │ ├── TimeInputDriver.ts
│ │ │ ├── TimerDriver.ts
│ │ │ └── TreeDriver.ts
│ │ ├── fixtures.ts
│ │ ├── infrastructure
│ │ │ ├── index.html
│ │ │ ├── main.tsx
│ │ │ ├── public
│ │ │ │ ├── mockServiceWorker.js
│ │ │ │ ├── resources
│ │ │ │ │ ├── bell.svg
│ │ │ │ │ ├── box.svg
│ │ │ │ │ ├── doc.svg
│ │ │ │ │ ├── eye.svg
│ │ │ │ │ ├── flower-640x480.jpg
│ │ │ │ │ ├── sun.svg
│ │ │ │ │ ├── test-image-100x100.jpg
│ │ │ │ │ └── txt.svg
│ │ │ │ └── serve.json
│ │ │ └── TestBed.tsx
│ │ └── themed-app-test-helpers.ts
│ └── vite-env.d.ts
├── tests
│ ├── components
│ │ ├── CodeBlock
│ │ │ └── hightlight-code.test.ts
│ │ ├── playground-pattern.test.ts
│ │ └── Tree
│ │ └── Tree-states.test.ts
│ ├── components-core
│ │ ├── abstractions
│ │ │ └── treeAbstractions.test.ts
│ │ ├── container
│ │ │ └── buildProxy.test.ts
│ │ ├── interception
│ │ │ ├── orderBy.test.ts
│ │ │ ├── ReadOnlyCollection.test.ts
│ │ │ └── request-param-converter.test.ts
│ │ ├── scripts-runner
│ │ │ ├── AttributeValueParser.test.ts
│ │ │ ├── eval-tree-arrow-async.test.ts
│ │ │ ├── eval-tree-arrow.test.ts
│ │ │ ├── eval-tree-func-decl-async.test.ts
│ │ │ ├── eval-tree-func-decl.test.ts
│ │ │ ├── eval-tree-pre-post.test.ts
│ │ │ ├── eval-tree-regression.test.ts
│ │ │ ├── eval-tree.test.ts
│ │ │ ├── function-proxy.test.ts
│ │ │ ├── parser-regression.test.ts
│ │ │ ├── process-event.test.ts
│ │ │ ├── process-function.test.ts
│ │ │ ├── process-implicit-context.test.ts
│ │ │ ├── process-statement-asgn.test.ts
│ │ │ ├── process-statement-destruct.test.ts
│ │ │ ├── process-statement-regs.test.ts
│ │ │ ├── process-statement-sync.test.ts
│ │ │ ├── process-statement.test.ts
│ │ │ ├── process-switch-sync.test.ts
│ │ │ ├── process-switch.test.ts
│ │ │ ├── process-try-sync.test.ts
│ │ │ ├── process-try.test.ts
│ │ │ └── test-helpers.ts
│ │ ├── test-metadata-handler.ts
│ │ ├── theming
│ │ │ ├── border-segments.test.ts
│ │ │ ├── component-layout.resolver.test.ts
│ │ │ ├── layout-property-parser.test.ts
│ │ │ ├── layout-resolver.test.ts
│ │ │ ├── layout-resolver2.test.ts
│ │ │ ├── layout-vp-override.test.ts
│ │ │ └── padding-segments.test.ts
│ │ └── utils
│ │ ├── date-utils.test.ts
│ │ ├── format-human-elapsed-time.test.ts
│ │ └── LruCache.test.ts
│ ├── language-server
│ │ ├── completion.test.ts
│ │ ├── format.test.ts
│ │ ├── hover.test.ts
│ │ └── mockData.ts
│ └── parsers
│ ├── common
│ │ └── input-stream.test.ts
│ ├── markdown
│ │ └── parse-binding-expression.test.ts
│ ├── parameter-parser.test.ts
│ ├── paremeter-parser.test.ts
│ ├── scripting
│ │ ├── eval-tree-arrow.test.ts
│ │ ├── eval-tree-pre-post.test.ts
│ │ ├── eval-tree.test.ts
│ │ ├── function-proxy.test.ts
│ │ ├── lexer-literals.test.ts
│ │ ├── lexer-misc.test.ts
│ │ ├── module-parse.test.ts
│ │ ├── parser-arrow.test.ts
│ │ ├── parser-assignments.test.ts
│ │ ├── parser-binary.test.ts
│ │ ├── parser-destructuring.test.ts
│ │ ├── parser-errors.test.ts
│ │ ├── parser-expressions.test.ts
│ │ ├── parser-function.test.ts
│ │ ├── parser-literals.test.ts
│ │ ├── parser-primary.test.ts
│ │ ├── parser-regex.test.ts
│ │ ├── parser-statements.test.ts
│ │ ├── parser-unary.test.ts
│ │ ├── process-event.test.ts
│ │ ├── process-implicit-context.test.ts
│ │ ├── process-statement-asgn.test.ts
│ │ ├── process-statement-destruct.test.ts
│ │ ├── process-statement-regs.test.ts
│ │ ├── process-statement-sync.test.ts
│ │ ├── process-statement.test.ts
│ │ ├── process-switch-sync.test.ts
│ │ ├── process-switch.test.ts
│ │ ├── process-try-sync.test.ts
│ │ ├── process-try.test.ts
│ │ ├── simplify-expression.test.ts
│ │ ├── statement-hooks.test.ts
│ │ └── test-helpers.ts
│ ├── style-parser
│ │ ├── generateHvarChain.test.ts
│ │ ├── parseHVar.test.ts
│ │ ├── parser.test.ts
│ │ └── tokens.test.ts
│ └── xmlui
│ ├── lint.test.ts
│ ├── parser.test.ts
│ ├── scanner.test.ts
│ ├── transform.attr.test.ts
│ ├── transform.circular.test.ts
│ ├── transform.element.test.ts
│ ├── transform.errors.test.ts
│ ├── transform.escape.test.ts
│ ├── transform.regression.test.ts
│ ├── transform.script.test.ts
│ ├── transform.test.ts
│ └── xmlui.ts
├── tests-e2e
│ ├── api-bound-component-regression.spec.ts
│ ├── api-call-as-extracted-component.spec.ts
│ ├── assign-to-object-or-array-regression.spec.ts
│ ├── binding-regression.spec.ts
│ ├── children-as-template-context-vars.spec.ts
│ ├── compound-component.spec.ts
│ ├── context-vars-regression.spec.ts
│ ├── data-bindings.spec.ts
│ ├── datasource-and-api-usage-in-var.spec.ts
│ ├── datasource-direct-binding.spec.ts
│ ├── datasource-onLoaded-regression.spec.ts
│ ├── modify-array-item-regression.spec.ts
│ ├── namespaces.spec.ts
│ ├── push-to-array-regression.spec.ts
│ ├── screen-breakpoints.spec.ts
│ ├── scripting.spec.ts
│ ├── state-scope-in-pages.spec.ts
│ └── state-var-scopes.spec.ts
├── tsconfig.bin.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/docs/content/components/Avatar.md:
--------------------------------------------------------------------------------
```markdown
# Avatar [#avatar]
`Avatar` displays a user or entity's profile picture as a circular image, with automatic fallback to initials when no image is provided. It's commonly used in headers, user lists, comments, and anywhere you need to represent a person or organization.
**Key features:**
- **Automatic fallback**: Shows initials when no image URL is provided or image fails to load
- **Multiple sizes**: From `xs` (extra small) to `lg` (large) to fit different contexts
- **Clickable**: Supports click events for profile actions, modals, or navigation
- **Accessible**: Automatically generates appropriate alt text from the name
## Properties [#properties]
### `name` [#name]
This property sets the name value the Avatar uses to display initials. If neither this property nor `url` is defined, an empty avatar is displayed.
```xmlui-pg copy display name="Example: name"
<App>
<Avatar name="John, Doe" />
</App>
```
### `size` (default: "sm") [#size-default-sm]
This property defines the display size of the Avatar.
Available values:
| Value | Description |
| --- | --- |
| `xs` | Extra small |
| `sm` | Small **(default)** |
| `md` | Medium |
| `lg` | Large |
| `xl` | Extra large |
```xmlui-pg copy display name="Example: size"
<App>
<HStack>
<Avatar name="Dorothy Ellen Fuller" />
<Avatar name="Xavier Schiller" size="xs" />
<Avatar name="Sebastien Moore" size="sm" />
<Avatar name="Molly Dough" size="md" />
<Avatar name="Lynn Gilbert" size="lg" />
</HStack>
</App>
```
### `url` [#url]
This property specifies the URL of the image to display in the Avatar. If neither this property nor `name` is defined, an empty avatar is displayed.
```xmlui-pg copy display name="Example: url"
<App>
<Avatar url="https://i.pravatar.cc/100" size="md" />
</App>
```
## Events [#events]
### `click` [#click]
This event is triggered when the avatar is clicked.
```xmlui-pg copy display name="Example: click"
<App>
<HStack verticalAlignment="center">
<Avatar name="Molly Dough" size="md" onClick="toast('Avatar clicked')" />
Click the avatar!
</HStack>
</App>
```
## Exposed Methods [#exposed-methods]
This component does not expose any methods.
## Styling [#styling]
### Theme Variables [#theme-variables]
| Variable | Default Value (Light) | Default Value (Dark) |
| --- | --- | --- |
| [backgroundColor](../styles-and-themes/common-units/#color)-Avatar | $color-surface-100 | $color-surface-100 |
| [border](../styles-and-themes/common-units/#border)-Avatar | 0px solid $color-surface-400A80 | 0px solid $color-surface-400A80 |
| [borderBottom](../styles-and-themes/common-units/#border)-Avatar | *none* | *none* |
| [borderBottomColor](../styles-and-themes/common-units/#color)-Avatar | *none* | *none* |
| [borderBottomStyle](../styles-and-themes/common-units/#border-style)-Avatar | *none* | *none* |
| [borderBottomWidth](../styles-and-themes/common-units/#size)-Avatar | *none* | *none* |
| [borderColor](../styles-and-themes/common-units/#color)-Avatar | *none* | *none* |
| [borderEndEndRadius](../styles-and-themes/common-units/#border-rounding)-Avatar | *none* | *none* |
| [borderEndStartRadius](../styles-and-themes/common-units/#border-rounding)-Avatar | *none* | *none* |
| [borderHorizontal](../styles-and-themes/common-units/#border)-Avatar | *none* | *none* |
| [borderHorizontalColor](../styles-and-themes/common-units/#color)-Avatar | *none* | *none* |
| [borderHorizontalStyle](../styles-and-themes/common-units/#border-style)-Avatar | *none* | *none* |
| [borderHorizontalWidth](../styles-and-themes/common-units/#size)-Avatar | *none* | *none* |
| [borderLeft](../styles-and-themes/common-units/#border)-Avatar | *none* | *none* |
| [color](../styles-and-themes/common-units/#color)-Avatar | *none* | *none* |
| [borderLeftStyle](../styles-and-themes/common-units/#border-style)-Avatar | *none* | *none* |
| [borderLeftWidth](../styles-and-themes/common-units/#size)-Avatar | *none* | *none* |
| [borderRadius](../styles-and-themes/common-units/#border-rounding)-Avatar | 4px | 4px |
| [borderRight](../styles-and-themes/common-units/#border)-Avatar | *none* | *none* |
| [color](../styles-and-themes/common-units/#color)-Avatar | *none* | *none* |
| [borderRightStyle](../styles-and-themes/common-units/#border-style)-Avatar | *none* | *none* |
| [borderRightWidth](../styles-and-themes/common-units/#size)-Avatar | *none* | *none* |
| [borderStartEndRadius](../styles-and-themes/common-units/#border-rounding)-Avatar | *none* | *none* |
| [borderStartStartRadius](../styles-and-themes/common-units/#border-rounding)-Avatar | *none* | *none* |
| [borderStyle](../styles-and-themes/common-units/#border-style)-Avatar | *none* | *none* |
| [borderTop](../styles-and-themes/common-units/#border)-Avatar | *none* | *none* |
| [borderTopColor](../styles-and-themes/common-units/#color)-Avatar | *none* | *none* |
| [borderTopStyle](../styles-and-themes/common-units/#border-style)-Avatar | *none* | *none* |
| [borderTopWidth](../styles-and-themes/common-units/#size)-Avatar | *none* | *none* |
| [borderHorizontal](../styles-and-themes/common-units/#border)-Avatar | *none* | *none* |
| [borderVerticalColor](../styles-and-themes/common-units/#color)-Avatar | *none* | *none* |
| [borderVerticalStyle](../styles-and-themes/common-units/#border-style)-Avatar | *none* | *none* |
| [borderVerticalWidth](../styles-and-themes/common-units/#size)-Avatar | *none* | *none* |
| [borderWidth](../styles-and-themes/common-units/#size)-Avatar | *none* | *none* |
| [boxShadow](../styles-and-themes/common-units/#boxShadow)-Avatar | inset 0 0 0 1px rgba(4,32,69,0.1) | inset 0 0 0 1px rgba(4,32,69,0.1) |
| [fontWeight](../styles-and-themes/common-units/#fontWeight)-Avatar | $fontWeight-bold | $fontWeight-bold |
| [textColor](../styles-and-themes/common-units/#color)-Avatar | $textColor-secondary | $textColor-secondary |
```
--------------------------------------------------------------------------------
/xmlui/dev-docs/next/documentation-scripts-refactoring-plan.md:
--------------------------------------------------------------------------------
```markdown
# XMLUI Documentation Generation Scripts - Refactoring Plan
## Overview
This document outlines additional refactoring opportunities identified in the XMLUI documentation generation scripts beyond the basic constant extraction that has already been completed.
## High-Priority Refactoring Opportunities
### 1. Error Handling Standardization
**Current Issues:**
- Inconsistent error handling patterns across scripts
- Mix of `console.log()` + `process.exit()` vs proper logger usage
- Some scripts lack proper error handling entirely
**Files Affected:**
- `create-theme-files.mjs` - Uses console.log + process.exit
- Various forEach loops with potential for silent failures
**Recommended Solution:**
- Create standardized error handling utilities
- Replace all console.log error messages with logger
- Implement proper error recovery where possible
### 2. Logging Consistency
**Current Issues:**
- `create-theme-files.mjs` uses console.log instead of the logger
- Inconsistent log levels and formatting
**Files Affected:**
- `create-theme-files.mjs`
**Recommended Solution:**
- Update all scripts to use the centralized logger
- Standardize log messages and levels
### 3. Duplicate Pattern Extraction ✅ **COMPLETED**
**Status:** ✅ **COMPLETED** - See [duplicate-pattern-extraction-summary.md](./duplicate-pattern-extraction-summary.md)
**Original Issues:**
- Multiple forEach loops with similar Object.entries patterns
- Repeated theme variable processing logic
- Similar file writing patterns
**Files Affected:**
- `create-theme-files.mjs` - Repeated theme variable processing
- `MetadataProcessor.mjs` - Similar forEach patterns for props/apis/events
**Solution Implemented:**
- ✅ Created `pattern-utilities.mjs` with comprehensive reusable utilities
- ✅ Extracted common iteration utilities (`iterateObjectEntries`, `iterateArray`)
- ✅ Created specialized theme processing utilities (`processComponentThemeVars`, `extractThemeVars`)
- ✅ Standardized file writing operations (`writeFileWithLogging`, `generateExportStatements`)
- ✅ Created component processing utilities (`processComponentSection`, `processDuplicatesWithLogging`)
- ✅ Updated all affected scripts to use shared utilities
- ✅ Achieved 60% reduction in duplicate code patterns
- ✅ Validated all scripts work correctly with pattern utilities
### 4. Configuration Management ✅ **COMPLETED**
**Status:** ✅ **COMPLETED** - See [configuration-management-enhancement-summary.md](./configuration-management-enhancement-summary.md)
**Original Issues:**
- Hard-coded paths and magic values still exist in some places
- Configuration loading patterns could be standardized
**Files Affected:**
- `input-handler.mjs` - Basic config loader could be enhanced
- Various scripts with path construction
**Solution Implemented:**
- ✅ Created `configuration-management.mjs` with comprehensive configuration system
- ✅ Added `ConfigurationManager` class with schema validation and search paths
- ✅ Implemented `PathResolver` class for intelligent path resolution
- ✅ Created `ConfigValidator` class for schema-based validation
- ✅ Defined configuration schemas for components, extensions, and generator
- ✅ Updated all scripts to use enhanced configuration management
- ✅ Added environment variable override support
- ✅ Maintained full backward compatibility with existing configuration files
- ✅ Achieved comprehensive error handling and validation
### 5. Function Decomposition
**Current Issues:**
- Some functions are too long and do multiple things
- Complex nested logic in theme file generation
**Files Affected:**
- `create-theme-files.mjs` - Main logic could be broken down
- `MetadataProcessor.mjs` - Some methods are quite long
**Recommended Solution:**
- Break down large functions into smaller, focused functions
- Improve separation of concerns
## Medium-Priority Opportunities
### 6. Async/Await Consistency
- Some scripts mix Promise patterns
- Could standardize on async/await throughout
### 7. Input Validation
- Add parameter validation to utility functions
- Validate configuration file contents more thoroughly
### 8. Type Safety (if TypeScript adoption is considered)
- Consider migrating to TypeScript for better type safety
- Add JSDoc types as an interim solution
## Low-Priority Opportunities
### 9. Performance Optimizations
- Parallel processing where appropriate
- Caching for repeated operations
### 10. Testing Infrastructure
- Add unit tests for utility functions
- Integration tests for the full pipeline
## Implementation Priority
1. **Immediate (High Impact, Low Risk):**
- ✅ **COMPLETED:** Logging consistency fixes
- ✅ **COMPLETED:** Basic error handling improvements
2. **Short Term (High Impact, Medium Risk):**
- ✅ **COMPLETED:** Duplicate pattern extraction
- Function decomposition
3. **Medium Term (Medium Impact, Medium Risk):**
- ✅ **COMPLETED:** Configuration management enhancements
- Input validation improvements
4. **Long Term (High Impact, High Risk):**
- Type safety improvements
- Testing infrastructure
## Completed Refactoring Summary
### ✅ **Phase 1 Complete: Core Infrastructure**
- **Error Handling Standardization** - `error-handling.mjs` created and integrated
- **Logging Consistency** - `logging-standards.mjs` with scoped loggers implemented
- **Magic String Extraction** - `constants.mjs` centralized configuration
- **Duplicate Pattern Extraction** - `pattern-utilities.mjs` with reusable utilities
- **Configuration Management Enhancement** - `configuration-management.mjs` with schema validation and path resolution
### 🔄 **Phase 2 In Progress: Advanced Improvements**
- Function decomposition (next priority)
- Input validation improvements
## Success Metrics
- Reduced code duplication
- Consistent error handling across all scripts
- Improved maintainability and readability
- No regression in functionality
- Better logging and debugging capabilities
```
--------------------------------------------------------------------------------
/xmlui/src/components/Toggle/Toggle.tsx:
--------------------------------------------------------------------------------
```typescript
import { type ReactNode } from "react";
import { useMemo } from "react";
import React, {
type CSSProperties,
type ForwardedRef,
forwardRef,
useCallback,
useEffect,
} from "react";
import classnames from "classnames";
import styles from "./Toggle.module.scss";
import type { RegisterComponentApiFn, UpdateStateFn } from "../../abstractions/RendererDefs";
import { noop } from "../../components-core/constants";
import { useEvent } from "../../components-core/utils/misc";
import type { ValidationStatus } from "../abstractions";
import { PART_INPUT } from "../../components-core/parts";
import { composeRefs } from "@radix-ui/react-compose-refs";
type ToggleProps = {
id?: string;
initialValue?: boolean;
value?: boolean;
enabled?: boolean;
style?: CSSProperties;
readOnly?: boolean;
validationStatus?: ValidationStatus;
updateState?: UpdateStateFn;
onClick?: (event: React.MouseEvent) => void;
onDidChange?: (newValue: boolean) => void;
onFocus?: () => void;
onBlur?: () => void;
variant?: "checkbox" | "switch";
indeterminate?: boolean;
className?: string;
required?: boolean;
autoFocus?: boolean;
registerComponentApi?: RegisterComponentApiFn;
inputRenderer?: (contextVars: any, input?: ReactNode) => ReactNode;
forceHover?: boolean;
};
export const defaultProps: Pick<
ToggleProps,
"initialValue" | "value" | "enabled" | "validationStatus" | "indeterminate"
> = {
initialValue: false,
value: false,
enabled: true,
validationStatus: "none",
indeterminate: false,
};
export const Toggle = forwardRef(function Toggle(
{
id,
initialValue = defaultProps.initialValue,
value = defaultProps.value,
enabled = defaultProps.enabled,
style,
readOnly,
validationStatus = defaultProps.validationStatus,
updateState = noop,
onClick = noop,
onDidChange = noop,
onFocus = noop,
onBlur = noop,
variant = "checkbox",
indeterminate = defaultProps.indeterminate,
className,
required,
autoFocus,
registerComponentApi,
inputRenderer,
forceHover = false,
...rest
}: ToggleProps,
forwardedRef: ForwardedRef<HTMLInputElement>,
) {
const innerRef = React.useRef<HTMLInputElement | null>(null);
const ref = innerRef ? composeRefs(forwardedRef, innerRef) : forwardedRef;
const transformToLegitValue = (inp: any): boolean => {
if (typeof inp === "undefined" || inp === null) {
return false;
}
if (typeof inp === "boolean") {
return inp;
}
if (typeof inp === "number") {
return !isNaN(inp) && !!inp;
}
if (typeof inp === "string") {
return inp.trim() !== "" && inp.toLowerCase() !== "false";
}
if (Array.isArray(inp)) {
return inp.length > 0;
}
if (typeof inp === "object") {
return Object.keys(inp).length > 0;
}
return false;
};
useEffect(() => {
updateState({ value: transformToLegitValue(initialValue) }, { initial: true });
}, [initialValue, updateState]);
const updateValue = useCallback(
(value: boolean) => {
if (innerRef.current?.checked === value) return;
updateState({ value });
onDidChange(value);
},
[onDidChange, updateState],
);
const onInputChange = useCallback(
(event: React.ChangeEvent<HTMLInputElement>) => {
if (readOnly) {
return;
}
updateState({ value: event.target.checked });
onDidChange(event.target.checked);
},
[onDidChange, readOnly, updateState],
);
const handleOnFocus = useCallback(() => {
onFocus?.();
}, [onFocus]);
const handleOnBlur = useCallback(() => {
onBlur?.();
}, [onBlur]);
useEffect(() => {
if (typeof indeterminate === "boolean" && innerRef.current) {
innerRef.current.indeterminate = indeterminate;
}
}, [indeterminate]);
const focus = useCallback(() => {
innerRef.current?.focus();
}, []);
useEffect(() => {
if (innerRef.current && autoFocus) {
setTimeout(() => focus(), 0);
}
}, [focus, autoFocus]);
const setValue = useEvent((newValue) => {
updateValue(transformToLegitValue(newValue));
});
useEffect(() => {
registerComponentApi?.({
focus,
setValue,
});
}, [focus, registerComponentApi, setValue]);
const input = useMemo(() => {
const legitValue = transformToLegitValue(value);
return (
<input
{...rest}
id={id}
data-part-id={PART_INPUT}
ref={ref}
type="checkbox"
role={variant}
checked={legitValue}
disabled={!enabled}
required={required}
readOnly={readOnly}
aria-readonly={readOnly}
aria-checked={indeterminate ? "mixed" : legitValue}
aria-required={required}
aria-disabled={!enabled}
onClick={onClick}
onChange={onInputChange}
onFocus={handleOnFocus}
onBlur={handleOnBlur}
autoFocus={autoFocus}
style={style}
className={classnames(className, styles.resetAppearance, {
[styles.checkbox]: variant === "checkbox",
[styles.switch]: variant === "switch",
[styles.error]: validationStatus === "error",
[styles.warning]: validationStatus === "warning",
[styles.valid]: validationStatus === "valid",
[styles.forceHover]: forceHover,
})}
/>
);
}, [
rest,
className,
ref,
style,
id,
enabled,
handleOnBlur,
handleOnFocus,
onInputChange,
onClick,
readOnly,
required,
validationStatus,
value,
variant,
indeterminate,
autoFocus,
forceHover,
]);
return (
inputRenderer ? (
<label className={styles.label}>
<div className={styles.inputContainer}>{input}</div>
{inputRenderer({
$checked: transformToLegitValue(value),
$setChecked: setValue,
})}
</label>
) : (
input
)
);
});
```
--------------------------------------------------------------------------------
/xmlui/src/components/Queue/Queue.tsx:
--------------------------------------------------------------------------------
```typescript
import { createComponentRenderer } from "../../components-core/renderers";
import { MemoizedItem } from "../container-helpers";
import { createMetadata, d } from "../metadata-helpers";
import { Queue, defaultProps } from "./QueueNative";
const COMP = "Queue";
export const QueueMd = createMetadata({
status: "stable",
description:
"`Queue` manages sequential processing of items in FIFO (first-in, first-out) " +
"order. It is a non-visual component but provides UI progress reporting and result display.",
props: {
progressFeedback: d(
"This property defines the component template of the UI that displays " +
"progress information whenever, the queue's \`progressReport\` function " +
"in invoked. If not set, no progress feedback is displayed.",
),
resultFeedback: d(
"This property defines the component template of the UI that displays result " +
"information when the queue becomes empty after processing all queued items. If not set, " +
"no result feedback is displayed.",
),
clearAfterFinish: {
description:
`This property indicates the completed items (successful or error) should ` +
`be removed from the queue after completion.`,
defaultValue: defaultProps.clearAfterFinish,
},
},
nonVisual: true,
events: {
willProcess: d(`This event is triggered to process a particular item.`),
process: d(
`This event is fired to process the next item in the queue. If the processing cannot ` +
`proceed because of some error, raise an exception, and the queue will handle that.`,
),
didProcess: d(
`This event is fired when the processing of a queued item has been successfully processed.`,
),
processError: d(
`This event is fired when processing an item raises an error. The event handler method ` +
`receives two parameters. The first is the error raised during the processing of the ` +
`item; the second is an object with these properties:`,
),
complete: d(
`The queue fires this event when the queue gets empty after processing all items. ` +
`The event handler has no arguments.`,
),
},
apis: {
enqueueItem: {
description: `This method enqueues the item passed in the method parameter. The new item will be ` +
`processed after the current queue items have been handled. The method retrieves the ` +
`unique ID of the newly added item; this ID can be used later in other methods, ` +
`such as \`remove\`.`,
signature: "enqueueItem(item: any): string",
parameters: {
item: "The item to enqueue.",
},
},
enqueueItems: {
description: `This method enqueues the array of items passed in the method parameter. The new items ` +
`will be processed after the current queue items have been handled. The method ` +
`retrieves an array of unique IDs, one for each new item. An item ID can be used later ` +
`in other methods, such as \`remove\`.`,
signature: "enqueueItems(items: any[]): string[]",
parameters: {
items: "The array of items to enqueue.",
},
},
getQueuedItems: {
description: `You can use this method to return the items in the queue. These items contain all ` +
`entries not removed from the queue yet, including pending, in-progress, and ` +
`completed items.`,
signature: "getQueuedItems(): any[]",
},
getQueueLength: {
description: `This method retrieves the current queue length. The queue contains only those items ` +
`that are not fully processed yet.`,
signature: "getQueueLength(): number",
},
remove: {
description: `This method removes an item from the queue using its unique ID.`,
signature: "remove(itemId: string): void",
parameters: {
itemId: "The unique ID of the item to remove.",
},
},
},
contextVars: {
$completedItems: d(
`A list containing the queue items that have been completed (fully processed).`,
),
$queuedItems: d(
`A list containing the items waiting in the queue, icluding the completed items.`,
),
},
});
export const queueComponentRenderer = createComponentRenderer(
COMP,
QueueMd,
({ node, registerComponentApi, lookupEventHandler, renderChild, extractValue }) => {
return (
<Queue
registerComponentApi={registerComponentApi}
renderResultFeedback={
node.props.resultFeedback
? (completedItems, queuedItems) => {
return (
<MemoizedItem
node={node.props.resultFeedback! as any}
contextVars={{
$completedItems: completedItems,
$queuedItems: queuedItems,
}}
renderChild={renderChild}
/>
);
}
: undefined
}
renderProgressFeedback={
node.props.progressFeedback
? (completedItems, queuedItems) => {
return (
<MemoizedItem
node={node.props.progressFeedback! as any}
contextVars={{
$completedItems: completedItems,
$queuedItems: queuedItems,
}}
renderChild={renderChild}
/>
);
}
: undefined
}
willProcessItem={lookupEventHandler("willProcess")}
processItem={lookupEventHandler("process", { signError: false })}
didProcessItem={lookupEventHandler("didProcess")}
processItemError={lookupEventHandler("processError")}
onComplete={lookupEventHandler("complete")}
clearAfterFinish={extractValue.asOptionalBoolean(node.props.clearAfterFinish)}
/>
);
},
);
```
--------------------------------------------------------------------------------
/xmlui/src/components/DateInput/DateInput.md:
--------------------------------------------------------------------------------
```markdown
%-DESC-START
**Key features:**
- **Date format support**: Multiple date formats including MM/dd/yyyy, yyyy-MM-dd, and dd/MM/yyyy
- **Direct input**: Keyboard-only date entry with input fields for day, month, and year
- **Input validation**: Real-time validation with visual feedback for invalid dates
- **Range support**: Single date selection (default) or date range selection
- **Accessibility**: Full keyboard navigation and screen reader support
%-DESC-END
%-API-START setValue
```xmlui-pg copy {3, 9, 12} display name="Example: setValue"
<App>
<HStack>
<Button
label="Set Date to 05/25/2024"
onClick="picker.setValue('05/25/2024')" />
<Button
label="Clear Date"
onClick="picker.setValue('')" />
</HStack>
<DateInput id="picker" />
</App>
```
%-API-END
%-PROP-START initialValue
```xmlui-pg copy display name="Example: initialValue" height="120px"
<App>
<DateInput initialValue="05/25/2024" />
</App>
```
%-PROP-END
%-PROP-START enabled
```xmlui-pg copy display name="Example: enabled" height="120px"
<App>
<DateInput enabled="false" initialValue="05/25/2024" />
</App>
```
%-PROP-END
%-PROP-START validationStatus
| Value | Description |
| :-------- | :---------------------------------------------------- |
| `valid` | Visual indicator for an input that is accepted |
| `warning` | Visual indicator for an input that produced a warning |
| `error` | Visual indicator for an input that produced an error |
```xmlui-pg copy display name="Example: validationStatus"
<App>
<DateInput validationStatus="valid" initialValue="05/25/2024" />
<DateInput validationStatus="warning" initialValue="05/25/2024" />
<DateInput validationStatus="error" initialValue="05/25/2024" />
</App>
```
%-PROP-END
%-PROP-START dateFormat
The `dateFormat` prop controls how dates are displayed and entered. Different formats change the order and separators of day, month, and year fields.
> [!NOTE] Regardless of the dateFormat, the year input field always accepts and displays 4-digit years. When entering a 2-digit year, it will be automatically normalized to a 4-digit year.
| Format | Description | Example |
| :----- | :---------- | :------ |
| `MM/dd/yyyy` | US format with slashes | 05/25/2024 |
| `MM-dd-yyyy` | US format with dashes | 05-25-2024 |
| `yyyy/MM/dd` | ISO-like format with slashes | 2024/05/25 |
| `yyyy-MM-dd` | ISO format with dashes | 2024-05-25 |
| `dd/MM/yyyy` | European format with slashes | 25/05/2024 |
| `dd-MM-yyyy` | European format with dashes | 25-05-2024 |
| `yyyyMMdd` | Compact format without separators | 20240525 |
| `MMddyyyy` | US compact format | 05252024 |
```xmlui-pg copy display name="Example: dateFormat"
<App>
<DateInput dateFormat="MM/dd/yyyy" initialValue="05/25/2024" />
<DateInput dateFormat="yyyy-MM-dd" initialValue="2024-05-25" />
<DateInput dateFormat="dd/MM/yyyy" initialValue="25/05/2024" />
<DateInput dateFormat="yyyyMMdd" initialValue="20240525" />
</App>
```
%-PROP-END
%-PROP-START clearable
When enabled, it displays a clear button that allows users to reset the date input back to its initial value. Enter a date in this app and then click the clear button:
```xmlui-pg copy display name="Example: clearable" /clearable/
<App>
<DateInput initialValue="05/25/2024" />
<DateInput clearable="true" initialValue="05/25/2024" />
</App>
```
%-PROP-END
%-PROP-START clearIcon
```xmlui-pg copy display name="Example: clearIcon" /clearIcon/
<App>
<DateInput initialValue="05/25/2024" clearable="true" clearIcon="trash" />
</App>
```
%-PROP-END
%-PROP-START clearToInitialValue
When `true`, the clear button resets the input to its initial value. When `false`, it clears the input completely.
```xmlui-pg copy display name="Example: clearToInitialValue"
<App>
<DateInput clearable="true" clearToInitialValue="true" initialValue="05/25/2024" />
<DateInput clearable="true" clearToInitialValue="false" initialValue="05/25/2024" />
</App>
```
%-PROP-END
%-PROP-START mode
Available values:
| Value | Description |
| --- | --- |
| `single` | Single date selection **(default)** |
| `range` | Date range selection |
%-PROP-END
%-PROP-START required
Marks the date input as required for form validation.
```xmlui-pg copy display name="Example: required" height="120px"
<App>
<DateInput required="true" />
</App>
```
%-PROP-END
%-PROP-START readOnly
Makes the date input read-only. Users can see the value but cannot modify it.
```xmlui-pg copy display name="Example: readOnly" height="120px"
<App>
<DateInput readOnly="true" initialValue="05/25/2024" />
</App>
```
%-PROP-END
%-PROP-START emptyCharacter
Character to use as placeholder for empty date values. If longer than 1 character, uses the first character. Defaults to '-'.
```xmlui-pg copy display name="Example: emptyCharacter"
<App>
<DateInput emptyCharacter="." />
<DateInput emptyCharacter="*" />
<DateInput emptyCharacter="abc" />
</App>
```
%-PROP-END
%-EVENT-START didChange
Fired when the date value changes. Receives the new date value as a parameter.
> [!INFO] The date value changes when the edited input part (day, month, year) loses focus and contains a valid value.
```xmlui-pg copy {2} display name="Example: didChange" height="180px"
<App var.selectedDate="No date selected">
<Text value="{selectedDate}" />
<DateInput
dateFormat="yyyy-MM-dd"
initialValue="2024-05-25"
onDidChange="(date) => selectedDate = date" />
</App>
```
%-EVENT-END
%-EVENT-START gotFocus
Fired when the date input receives focus.
```xmlui-pg copy {4-5} display name="Example: gotFocus/lostFocus"
<App var.isFocused="{false}">
<Text value="{isFocused
? 'DateInput focused' : 'DateInput lost focus'}"
/>
<DateInput
dateFormat="MM/dd/yyyy"
onGotFocus="isFocused = true"
onLostFocus="isFocused = false"
initialValue="05/25/2024"
/>
</App>
```
%-EVENT-END
```
--------------------------------------------------------------------------------
/docs/public/pages/markup.md:
--------------------------------------------------------------------------------
```markdown
# XML Markup
When you write XML markup to create an XMLUI app, you use XML tags to name components. And you use XML attributes to set properties that govern their behavior.
## Properties
An attribute may be a literal string that sets the value of a property.
```xmlui-pg name="A literal property" copy display
<Text value="This is rendered as text." />
```
## Expressions
An attribute may also be a JavaScript expression — enclosed in curly braces `{ }` — that dynamically sets the value of a property.
```xmlui-pg copy name="A dynamic property" display
<Text value="Life, the universe, and everything: { 6 * 7 }" />
```
An expression can hold a JSON list.
```xmlui-pg copy name="A JSON list" display /['Bakerloo', 'Central', 'Circle']/
<Items data="{ ['Bakerloo', 'Central', 'Circle'] }" >
<Text>{ $item }</Text>
</Items>
```
Or a complex JSON object, in which case you'll write an outer set of curly braces to introduce the expression and an inner set to define an object like this form's `data` property.
```xmlui-pg copy name="A complex JSON object" display /{ station: "Brixton", wifi: true, toilets: false }/
<App>
<Form id="searchForm" padding="0.5rem"
data='{ { station: "Brixton", wifi: true, toilets: false } }'
onSubmit="() => { preview.setValue(JSON.stringify($data)) }"
>
<Text>Search for station amenities</Text>
<HStack verticalAlignment="center" >
<FormItem bindTo="station" />
<FormItem
type="checkbox"
label="wifi"
bindTo="wifi"
labelPosition="start"
/>
<FormItem
type="checkbox"
label="toilets"
bindTo="toilets"
labelPosition="start"
/>
</HStack>
<property name="buttonRowTemplate">
<Button type="submit" icon="search" label="Search"/>
</property>
</Form>
<TextArea id="preview" />
</App>
```
> [!INFO]
> In addition to a literal string or an expression, you will sometimes use the special tag `<property>` to set a value using markup, like the `ButtonRowTemplate` that defines this form's button.
## Variables
A component may declare a variable that's visible to itself and its children. Variable names start with a letter or an underscore (`_`) and continue with these characters or digits.
You can declare a variable using the `var` prefix.
```xmlui-pg copy name="Declaring a variable with var" display
<App var.stations="{ [ 'Bakerloo', 'Central', 'Circle'] }">
<Items data="{stations}">
<Text> {$item} </Text>
</Items>
</App>
```
Or using the `<variable>` helper tag.
```xmlui-pg copy name="Declaring a variable with <variable>" display
<App>
<variable
name="stations"
value="{ [ 'Bakerloo', 'Central', 'Circle'] }" />
<Items data="{stations}">
<Text>{$item}</Text>
</Items>
</App>
```
### Nested variables
The same variable name can be declared in nested scopes. The engine resolves the name to the variable in the closest (innermost) scope.
```xmlui-pg copy name="Defining and using nested variables" display
<App var.title="var.title is 'Hello, from App!'">
<H1>{title}</H1>
<VStack var.title="var.title is 'Hello, from VStack'!">
<Text>{title}</Text>
</VStack>
</App>
```
### Multiple instances
<Text>Each counter is a separate instance of `CounterTest` with its own local component variables.</Text>
```xmlui-pg name="Isolated component instances"
---app display
<App>
<HStack horizontalAlignment="center">
<VStack>
<Text variant="caption">Counter Instance 1</Text>
<CounterTest instance="1" />
</VStack>
<Stack width="10rem"/>
<VStack>
<Text variant="caption">Counter Instance 2</Text>
<CounterTest instance="2" />
</VStack>
</HStack>
</App>
---comp display
<Component name="CounterTest" var.count="{0}">
<Text>Counter ID: {$props.instance}</Text>
<Text>Count: {count}</Text>
<Button onClick="count = count + 1">
Increment {$props.id}
</Button>
</Component>
```
### Reactive variables
In [Reactive data binding](/reactive-intro) we saw how a `Select` can cause a `Table` to refresh by setting the `url` property of the `DataSource` on which the `Table` depends. Here's a more basic example of how components interact with reactive variables.
```xmlui-pg copy name="Defining and using reactive variables" display
<App var.count="{0}" var.countTimes3="{3 * count}" >
<Button
label="Click to increment the count"
onClick="count++" />
<Text>Click count = {count} (changes directly)</Text>
<Text>Click count * 3 = {countTimes3} (changes indirectly)</Text>
</App>
```
The `Button`'s click handler increments `count` directly. But because `countTimes3` is define using an expression that refers to `count`, the engine reevalautes that expression each time `count` changes and updates `countTimes3` indirectly.
We've seen two ways to declare variables: a `var` declaration in an XML attribute, or the `variable` tag. A similar pattern applies to event handlers. The `Button` to increment the count declares its handler in an attribute whose name combines the `on` prefix with the name [click](/components/Button#click). You may also use the `<event>` helper tag with no prefix for the event name.
```xmlui-pg copy name="Declare an event handler using the <event> tag" display
<App var.count="{0}" >
<Button label="Click me! Click count = {count}">
<event name="click">
{ count++ }
</event>
</Button>
</App>
```
> [!INFO]
> Why use the `<event>` tag? In this example there's no reason to prefer it. But as we saw above, you declare a `Form`'s `buttonRowTemplate` property in XMLUI markup using the `<property>` helper tag. The same pattern applies when a button's handler is an XMLUI component like `<APICall>`.
> ```xmlui copy
> <Button label="Click to increment the count on the server">
> <event name="click">
> <APICall url="/count/increment" />
> </event>
> <Text>Click count = {count}</Text>
> </Button>
> ```
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/theming/StyleContext.tsx:
--------------------------------------------------------------------------------
```typescript
import type { CSSProperties } from "react";
import type React from "react";
import { createContext, useContext, useEffect, useInsertionEffect, useMemo, useState } from "react";
import type { StyleObjectType } from "./StyleRegistry";
import { StyleRegistry } from "./StyleRegistry";
import { EMPTY_OBJECT } from "../constants";
import { useIndexerContext } from "../../components/App/IndexerContext";
// The context is typed to hold either a StyleRegistry instance or null.
const StyleContext = createContext<StyleRegistry | null>(null);
type StyleProviderProps = {
children: React.ReactNode;
styleRegistry?: StyleRegistry;
forceNew?: boolean; // Optional prop to force a new registry
};
/**
* A "smart" provider that creates a StyleRegistry only if one doesn't
* already exist in the context.
*/
export function StyleProvider({
children,
styleRegistry = new StyleRegistry(),
forceNew = false, // Optional prop to force a new registry
}: StyleProviderProps) {
// Check if a provider already exists above this one in the tree.
const parentRegistry = useContext(StyleContext);
// If we are the top-most provider, create a new registry for this tree.
// On the client, this runs once. On the server, it runs once per request
// IF this provider is at the root of the tree being rendered.
// Use useState to create the registry instance.
const [registry] = useState(() => {
const newRegistry = styleRegistry;
// This logic only runs on the CLIENT, once, when the registry is created.
if (typeof window !== "undefined") {
// 1. Find the style tag injected by the server.
const ssrTag = document.querySelector('style[data-style-registry="true"]');
// 2. Read the hashes from our custom data attribute.
const ssrHashes = ssrTag?.getAttribute("data-ssr-hashes");
if (ssrHashes) {
// 3. Pre-populate the 'injected' set with all the server-rendered hashes.
let hashes = ssrHashes.split(",");
newRegistry.ssrHashes = new Set(hashes);
newRegistry.injected = new Set(hashes);
}
}
return newRegistry;
});
// If we're already inside a provider, don't do anything. Just render the children.
// This makes nesting StyleProviders safe and harmless.
if (parentRegistry && !forceNew) {
return <>{children}</>;
}
return <StyleContext.Provider value={registry}>{children}</StyleContext.Provider>;
}
export function useStyleRegistry(): StyleRegistry {
const registry = useContext(StyleContext);
if (registry === null) {
throw new Error("Component must be used within a StyleProvider");
}
return registry;
}
export function useComponentStyle(styles?: Record<string, CSSProperties[keyof CSSProperties]>) {
const rootStyle = useMemo(() => {
return (!styles || Object.keys(styles).length === 0)
? EMPTY_OBJECT
: {
"&": styles,
// "@container style(--screenSize: 1) or @container style(--screenSize: 2) ... etc": responsiveSizes,
};
}, [styles]);
return useStyles(rootStyle);
}
export const StyleInjectionTargetContext = createContext<Document | ShadowRoot | null>(null);
export function useDomRoot(){
const domRoot = useContext(StyleInjectionTargetContext);
return domRoot;
}
type InjectOptions = {
prepend?: boolean;
}
export function useStyles(styles: StyleObjectType, {prepend}: InjectOptions = EMPTY_OBJECT ): string {
// we skip this whole thing if we're indexing
const {indexing} = useIndexerContext();
const domRoot = useDomRoot();
const injectionTarget = typeof document === "undefined" ? null : domRoot instanceof ShadowRoot ? domRoot : document.head
const registry = useStyleRegistry();
const { className, styleHash } = useMemo(() => {
if(indexing || !styles || styles === EMPTY_OBJECT || Object.keys(styles).length === 0) {
return { className: undefined, styleHash: undefined };
}
return registry.register(styles);
}, [indexing, registry, styles]);
useInsertionEffect(() => {
if (!styleHash || registry.injected.has(styleHash)) {
return;
}
const { css } = registry.cache.get(styleHash) || {};
if (css) {
const styleElement = document.createElement("style");
styleElement.setAttribute("data-style-hash", styleHash);
styleElement.innerHTML = `@layer dynamic {\n${css}\n}`;
if(prepend){
injectionTarget.insertBefore(styleElement, injectionTarget.firstChild.nextSibling);
} else {
injectionTarget.appendChild(styleElement);
}
registry.injected.add(styleHash);
}
}, [registry, styleHash, injectionTarget]);
// HOOK 2: For lifecycle management (reference counting and CLEANUP).
useEffect(() => {
if(!styleHash){
return;
}
// On MOUNT, tell the registry that this component is using this style.
registry.incrementRef(styleHash);
// Return a cleanup function to run on UNMOUNT.
return () => {
registry.decrementRef(styleHash);
// Schedule the cleanup check to run asynchronously.
// This allows React's Strict Mode double-render to complete before
// we check if the style tag should be removed.
setTimeout(() => {
// Only proceed with cleanup if...
// 1. No other component is using this style (ref count is 0).
// 2. This style was NOT part of the initial server render.
if (registry.getRefCount(styleHash) === 0 && !registry.ssrHashes.has(styleHash)) {
// If it's still zero, it means no component re-mounted to claim this style.
// Now it's safe to perform the cleanup.
registry.injected.delete(styleHash);
injectionTarget.querySelector(`style[data-style-hash="${styleHash}"]`)?.remove();
}
}, 0); // A timeout of 0ms is sufficient to push this to the end of the event loop.
};
}, [injectionTarget, registry, styleHash]); // Dependency array ensures this runs once per style change.
return className;
}
```
--------------------------------------------------------------------------------
/xmlui/src/parsers/xmlui-parser/lint.ts:
--------------------------------------------------------------------------------
```typescript
import type {
ComponentDef,
CompoundComponentDef,
ComponentMetadata,
} from "../../abstractions/ComponentDefs";
import type { StandaloneAppDescription } from "../../components-core/abstractions/standalone";
import { layoutOptionKeys } from "../../components-core/descriptorHelper";
import { viewportSizeMd } from "../../components/abstractions";
import type {
ComponentMetadataProvider,
MetadataProvider,
} from "../../language-server/services/common/metadata-utils";
import { CORE_NAMESPACE_VALUE } from "./transform";
export enum LintSeverity {
Skip,
Warning,
Error,
}
export enum LintDiagKind {
UnrecognisedProp,
}
type Options = {
severity: LintSeverity;
};
type LintDiagnostic = {
message: string;
kind: LintDiagKind;
};
export function getLintSeverity(lintSeverityOption: string | undefined): LintSeverity {
if (!lintSeverityOption) {
return LintSeverity.Warning;
}
let lintSeverity = LintSeverity.Warning;
switch (lintSeverityOption.toLowerCase()) {
case "warning":
return LintSeverity.Warning;
break;
case "error":
return LintSeverity.Error;
break;
case "skip":
return LintSeverity.Skip;
break;
default:
console.warn(
`Invalid lint severity option '${lintSeverityOption}'. Must be one of: 'warning', 'error', 'skip'. Defaulting to 'warning'.`,
);
return LintSeverity.Warning;
break;
}
}
export type ComponentLints = {
lints: {
message: string;
kind: LintDiagKind;
}[];
componentName: string;
};
export function lintApp({
appDef,
metadataProvider,
}: {
appDef: StandaloneAppDescription;
metadataProvider: MetadataProvider;
}): ComponentLints[] {
const entryPointLints: ComponentLints = {
componentName: "Main",
lints: lint({
component: appDef.entryPoint,
metadataProvider,
}),
};
const compoundCompLints: ComponentLints[] = (appDef.components ?? []).map((c) => {
const lints = lint({
component: c,
metadataProvider,
});
return { lints, componentName: c.name };
});
return [entryPointLints, ...compoundCompLints].filter((diags) => diags.lints.length > 0);
}
export function printComponentLints(lintDiags: ComponentLints) {
console.group(`Validation on '${lintDiags.componentName}':`);
lintDiags.lints.forEach(({ message }) => {
console.warn(message);
});
console.groupEnd();
}
export function lintErrorsComponent(lints: ComponentLints[]) {
function makeComponent() {
const errList = lints.map((lint, idx) => {
return {
type: "VStack",
props: { gap: "0px" },
children: [
{
type: "VStack",
props: { backgroundColor: "lightgrey", padding: "10px" },
children: [
{
type: "H2",
props: {
value: `#${idx + 1}: In component '${lint.componentName}':`,
color: "$color-info",
},
},
{
type: "VStack",
children: lint.lints.map(({ message }, msgIdx) => {
return {
type: "Text",
props: { value: `${idx + 1}.${msgIdx + 1}: ${message}`, fontWeight: "bold" },
};
}),
},
],
},
],
};
});
const comp: ComponentDef = {
type: "VStack",
props: { padding: "$padding-normal", gap: 0 },
children: [
{
type: "H1",
props: {
value: `Errors found while checking Xmlui markup`,
padding: "$padding-normal",
backgroundColor: "$color-error",
color: "white",
},
},
{
type: "VStack",
props: {
gap: "$gap-tight",
padding: "$padding-normal",
},
children: errList,
},
],
};
return comp;
}
return makeComponent() as ComponentDef;
}
export function lint({
component,
metadataProvider,
}: {
component: CompoundComponentDef | ComponentDef;
metadataProvider: MetadataProvider;
}): LintDiagnostic[] {
if ("component" in component) {
return lintHelp(component.component, metadataProvider, []);
}
return lintHelp(component, metadataProvider, []);
}
function lintHelp(
component: ComponentDef,
metadataProvider: MetadataProvider,
acc: LintDiagnostic[],
) {
const componentName = component.type.startsWith(CORE_NAMESPACE_VALUE)
? component.type.slice(CORE_NAMESPACE_VALUE.length + 1)
: component.type;
const componentMdProvider = metadataProvider.getComponent(componentName);
if (componentMdProvider !== null && !componentMdProvider.allowArbitraryProps) {
lintAttrs(component, componentMdProvider, acc);
}
if (!component.children) {
return acc;
}
for (const child of component.children) {
lintHelp(child, metadataProvider, acc);
}
return acc;
}
const implicitPropNames = layoutOptionKeys;
function lintAttrs(
component: ComponentDef,
metadataForCurrentComponent: ComponentMetadataProvider,
diags: LintDiagnostic[],
) {
const invalidAttrNames = Object.keys(component.props ?? {}).filter(
(name) => !metadataForCurrentComponent.getAttr(name),
);
const invalidEvents = Object.keys(component.events ?? {}).filter(
(event) => !metadataForCurrentComponent.getEvent(event),
);
const invalidApis = Object.keys(component.api ?? {}).filter(
(api) => !metadataForCurrentComponent.getApi(api),
);
invalidAttrNames.push(...invalidEvents);
invalidAttrNames.push(...invalidApis);
for (const invalidAttrName of invalidAttrNames) {
diags.push(toUnrecognisedAttrDiag(component, invalidAttrName));
}
}
function toUnrecognisedAttrDiag(component: ComponentDef, attr: string): LintDiagnostic {
return {
message: `Unrecognised property '${attr}' on component '${component.type}'.`,
kind: LintDiagKind.UnrecognisedProp,
};
}
```
--------------------------------------------------------------------------------
/docs/content/components/Pagination.md:
--------------------------------------------------------------------------------
```markdown
# Pagination [#pagination]
`Pagination` enables navigation through large datasets by dividing content into pages. It provides controls for page navigation and can display current page information.
## Standalone [#standalone]
If the `itemCount` property is provided, the component shows information about the number of entries shown per page, the total number of entries, as well as the current page index:
```xmlui-pg copy display
<App>
<Pagination itemCount="100" pageSize="10" />
</App>
```
If not, the [`hasPrevPage`](#hasprevpage) and [`hasNextPage`](#hasnextpage) properties can be used to control the enabled/disabled state of the previous and next buttons, while only the previous and next buttons are displayed:
```xmlui-pg copy display
<App>
<Pagination hasPrevPage="true" hasNextPage="true" />
</App>
```
## Integrations [#integrations]
### Table [#table]
`Pagination` has first-class support in the Table component. `Pagination` is controlled via the [`isPaginated`](./Table#ispaginated-default-false), [`pageSize`](./Table#pagesize), [`pageSizeOptions`](./Table#pagesizeoptions) and [`paginationControlsLocation`](./Table#paginationcontrolslocation-default-bottom) properties.
```xmlui
<Table data="/api" isPaginated pageSize="5" pageSizeOptions="{[5, 10, 20]}">
<Column header="ID" bindTo="elem" width="80px">
<!-- ... -->
</Column>
<!-- ... -->
</Table>
```
See the [Table reference](./Table#ispaginated-default-false) for a working example.
### List [#list]
The `List` is a perfect example of a component that does not implement its own pagination. Thus, use the Pagination with a Datasource component and connect them to the List:
```xmlui
<DataSource id="ds" url="/api" queryParams="{{ from: before, to: after }}" />
<Pagination
itemCount="20"
pageSize="{pageSize}"
pageIndex="{currentPage}"
onPageDidChange="(page, size, total) => {
currentPage = page;
before = page * size;
after = before + size - 1;
}"
/>
<List data="{ds}" />
```
For a comprehensive example, see [How to paginate a List](../howto/paginate-a-list).
## Properties [#properties]
### `buttonRowPosition` (default: "center") [#buttonrowposition-default-center]
Determines where to place the pagination button row in the layout.
Available values: `start`, `center` **(default)**, `end`
### `enabled` (default: true) [#enabled-default-true]
This boolean property value indicates whether the component responds to user events (`true`) or not (`false`).
### `hasNextPage` [#hasnextpage]
Whether to disable the next page button. Only takes effect if itemCount is not provided.
### `hasPrevPage` [#hasprevpage]
Whether to disable the previous page button. Only takes effect if itemCount is not provided.
### `itemCount` [#itemcount]
Total number of items to paginate. If not provided, the component renders simplified pagination controls that are enabled/disabled using the `hasPrevPage` and `hasNextPage` props.
### `maxVisiblePages` (default: 1) [#maxvisiblepages-default-1]
Maximum number of page buttons to display. If the value is not among the allowed values, it will fall back to the default.
Available values: `1` **(default)**, `3`, `5`
### `orientation` [#orientation]
Layout orientation of the pagination component
Available values:
| Value | Description |
| --- | --- |
| `horizontal` | The component will fill the available space horizontally |
| `vertical` | The component will fill the available space vertically |
### `pageIndex` (default: 0) [#pageindex-default-0]
Current page index (0-based)
### `pageInfoPosition` [#pageinfoposition]
Determines where to place the page information in the layout.
### `pageSize` (default: 10) [#pagesize-default-10]
Number of items per page
### `pageSizeOptions` [#pagesizeoptions]
Array of page sizes the user can select from. If provided, shows a page size selector dropdown
### `pageSizeSelectorPosition` [#pagesizeselectorposition]
Determines where to place the page size selector in the layout.
### `showCurrentPage` (default: true) [#showcurrentpage-default-true]
Whether to show the current page indicator
### `showPageInfo` (default: true) [#showpageinfo-default-true]
Whether to show page information
### `showPageSizeSelector` (default: true) [#showpagesizeselector-default-true]
Whether to show the page size selector
## Events [#events]
### `pageDidChange` [#pagedidchange]
Fired when the current page changes
### `pageSizeDidChange` [#pagesizedidchange]
Fired when the page size changes
## Exposed Methods [#exposed-methods]
### `currentPage` [#currentpage]
Gets the current page number (1-based)
### `currentPageSize` [#currentpagesize]
Gets the current page size
### `moveFirst` [#movefirst]
Moves to the first page
**Signature**: `moveFirst(): void`
### `moveLast` [#movelast]
Moves to the last page
**Signature**: `moveLast(): void`
### `moveNext` [#movenext]
Moves to the next page
**Signature**: `moveNext(): void`
### `movePrev` [#moveprev]
Moves to the previous page
**Signature**: `movePrev(): void`
## Styling [#styling]
### Theme Variables [#theme-variables]
| Variable | Default Value (Light) | Default Value (Dark) |
| --- | --- | --- |
| [backgroundColor](../styles-and-themes/common-units/#color)-Pagination | transparent | transparent |
| [backgroundColor](../styles-and-themes/common-units/#color)-selector-Pagination | transparent | transparent |
| [borderColor](../styles-and-themes/common-units/#color)-Pagination | $color-gray-300 | $color-gray-300 |
| [borderRadius](../styles-and-themes/common-units/#border-rounding)-selector-Pagination | $borderRadius | $borderRadius |
| [gap](../styles-and-themes/common-units/#size)-buttonRow-Pagination | $space-2 | $space-2 |
| [padding](../styles-and-themes/common-units/#size)-Pagination | $space-4 | $space-4 |
| [textColor](../styles-and-themes/common-units/#color)-Pagination | $color-gray-600 | $color-gray-600 |
| [textColor](../styles-and-themes/common-units/#color)-selector-Pagination | $color-gray-600 | $color-gray-600 |
```
--------------------------------------------------------------------------------
/xmlui/tests/parsers/scripting/function-proxy.test.ts:
--------------------------------------------------------------------------------
```typescript
import { describe, expect, it } from "vitest";
import { createEvalContext, parseStatements } from "./test-helpers";
import {
ArrowExpressionStatement,
ExpressionStatement,
T_ARROW_EXPRESSION_STATEMENT,
} from "../../../src/components-core/script-runner/ScriptingSourceTree";
import { processStatementQueueAsync } from "../../../src/components-core/script-runner/process-statement-async";
describe("Function proxies", () => {
it("Array.prototype.filter #1", async () => {
// --- Arrange
const source =
"(params)=> { return items.filter((item) => { return item.parentId === params.pathParams.nodeId});}";
const evalContext = createEvalContext({
localContext: {
items: [
{
name: "item1",
parentId: "",
},
{
name: "item2",
parentId: "my-parent-id",
},
],
},
eventArgs: [{ pathParams: { nodeId: "" } }],
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks!.length).equal(1);
expect(thread.blocks![0].returnValue).eql([{ name: "item1", parentId: "" }]);
});
it("Array.prototype.forEach #1", async () => {
// --- Arrange
const source = `()=> {
const result = [];
items.forEach((item) => {
result.push(item * 2)
});
return result;
}`;
const evalContext = createEvalContext({
localContext: {
items: [2, 3],
},
eventArgs: [],
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks![0].returnValue).eql([4, 6]);
});
it("Array.prototype.map #1", async () => {
// --- Arrange
const source = `()=> {
return items.map((item) => {
return item *= 2;
});
}`;
const evalContext = createEvalContext({
localContext: {
items: [2, 3],
},
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks![0].returnValue).eql([4, 6]);
});
it("Array.prototype.every #1", async () => {
// --- Arrange
const source = `(params)=> {
return items.every((item) => { return item.parentId === params.pathParams.nodeId}
);
}`;
const evalContext = createEvalContext({
localContext: {
items: [
{
name: "item1",
parentId: "",
},
{
name: "item2",
parentId: "my-parent-id",
},
],
},
eventArgs: [{ pathParams: { nodeId: "" } }],
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks!.length).equal(1);
expect(thread.blocks![0].returnValue).eql(false);
});
it("Array.prototype.findIndex #1", async () => {
// --- Arrange
const source = `(params)=> {
return items.findIndex((item) => item > 5)
}`;
const evalContext = createEvalContext({
localContext: {
items: [2, 6, 1],
},
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks!.length).equal(1);
expect(thread.blocks![0].returnValue).eql(1);
});
it("Array.prototype.find #1", async () => {
// --- Arrange
const source = `(params)=> {
return items.find((item) => item > 4);
}`;
const evalContext = createEvalContext({
localContext: {
items: [1, 2, 3, 4, 5, 6],
},
eventArgs: [{ pathParams: { nodeId: "" } }],
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks!.length).equal(1);
expect(thread.blocks![0].returnValue).eql(5);
});
it("Array.prototype.flatMap #1", async () => {
// --- Arrange
const source = `(params)=> {
return items.flatMap((item) => item > 4 ? [4, 4] : 1);
}`;
const evalContext = createEvalContext({
localContext: {
items: [5, 3, 2],
},
eventArgs: [{ pathParams: { nodeId: "" } }],
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks!.length).equal(1);
expect(thread.blocks![0].returnValue).eql([4, 4, 1, 1]);
});
});
```
--------------------------------------------------------------------------------
/xmlui/tests/components-core/scripts-runner/function-proxy.test.ts:
--------------------------------------------------------------------------------
```typescript
import { describe, expect, it } from "vitest";
import { processStatementQueueAsync } from "../../../src/components-core/script-runner/process-statement-async";
import { createEvalContext, parseStatements } from "./test-helpers";
import {
ArrowExpressionStatement,
ExpressionStatement,
T_ARROW_EXPRESSION_STATEMENT,
} from "../../../src/components-core/script-runner/ScriptingSourceTree";
describe("Function proxies (exp)", () => {
it("Array.prototype.filter #1", async () => {
// --- Arrange
const source =
"(params)=> { return items.filter((item) => { return item.parentId === params.pathParams.nodeId});}";
const evalContext = createEvalContext({
localContext: {
items: [
{
name: "item1",
parentId: "",
},
{
name: "item2",
parentId: "my-parent-id",
},
],
},
eventArgs: [{ pathParams: { nodeId: "" } }],
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks!.length).equal(1);
expect(thread.blocks![0].returnValue).eql([{ name: "item1", parentId: "" }]);
});
it("Array.prototype.forEach #1", async () => {
// --- Arrange
const source = `()=> {
const result = [];
items.forEach((item) => {
result.push(item * 2)
});
return result;
}`;
const evalContext = createEvalContext({
localContext: {
items: [2, 3],
},
eventArgs: [],
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks![0].returnValue).eql([4, 6]);
});
it("Array.prototype.map #1", async () => {
// --- Arrange
const source = `()=> {
return items.map((item) => {
return item *= 2;
});
}`;
const evalContext = createEvalContext({
localContext: {
items: [2, 3],
},
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks![0].returnValue).eql([4, 6]);
});
it("Array.prototype.every #1", async () => {
// --- Arrange
const source = `(params)=> {
return items.every((item) => { return item.parentId === params.pathParams.nodeId}
);
}`;
const evalContext = createEvalContext({
localContext: {
items: [
{
name: "item1",
parentId: "",
},
{
name: "item2",
parentId: "my-parent-id",
},
],
},
eventArgs: [{ pathParams: { nodeId: "" } }],
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks!.length).equal(1);
expect(thread.blocks![0].returnValue).eql(false);
});
it("Array.prototype.findIndex #1", async () => {
// --- Arrange
const source = `(params)=> {
return items.findIndex((item) => item > 5)
}`;
const evalContext = createEvalContext({
localContext: {
items: [2, 6, 1],
},
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks!.length).equal(1);
expect(thread.blocks![0].returnValue).eql(1);
});
it("Array.prototype.find #1", async () => {
// --- Arrange
const source = `(params)=> {
return items.find((item) => item > 4);
}`;
const evalContext = createEvalContext({
localContext: {
items: [1, 2, 3, 4, 5, 6],
},
eventArgs: [{ pathParams: { nodeId: "" } }],
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks!.length).equal(1);
expect(thread.blocks![0].returnValue).eql(5);
});
it("Array.prototype.flatMap #1", async () => {
// --- Arrange
const source = `(params)=> {
return items.flatMap((item) => item > 4 ? [4, 4] : 1);
}`;
const evalContext = createEvalContext({
localContext: {
items: [5, 3, 2],
},
eventArgs: [{ pathParams: { nodeId: "" } }],
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks!.length).equal(1);
expect(thread.blocks![0].returnValue).eql([4, 4, 1, 1]);
});
});
```
--------------------------------------------------------------------------------
/packages/xmlui-os-frames/src/WindowsAppFrame.tsx:
--------------------------------------------------------------------------------
```typescript
import styles from "./WindowsAppFrame.module.scss";
import type { ReactNode } from "react";
import { forwardRef } from "react";
export const ToolBar = (props) => {
return (
<div className={styles.toolbar}>
<div className={styles.topInfo}>
<div className={styles.uicon} style={{ margin: "0 10px 0 6px" }}>
<div style={{ width: 14 }}>
<svg viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M8.20647 19.6315C7.36494 19.6315 6.63359 19.4431 6.01263 19.0663C5.40551 18.6756 4.93628 18.1313 4.60513 17.4336C4.27397 16.7219 4.1084 15.8846 4.1084 14.9218V9.03995C4.1084 8.90041 4.15686 8.78179 4.2534 8.68412C4.34994 8.58643 4.46724 8.5376 4.60513 8.5376H6.42667C6.5784 8.5376 6.69571 8.58643 6.7784 8.68412C6.87494 8.78179 6.9234 8.90041 6.9234 9.03995V14.7962C6.9234 16.5266 7.67532 17.3917 9.17936 17.3917C9.89686 17.3917 10.4626 17.1615 10.8765 16.701C11.3044 16.2405 11.5182 15.6056 11.5182 14.7962V9.03995C11.5182 8.90041 11.5665 8.78179 11.663 8.68412C11.7596 8.58643 11.8769 8.5376 12.0149 8.5376H13.8363C13.9742 8.5376 14.0915 8.58643 14.188 8.68412C14.2847 8.78179 14.333 8.90041 14.333 9.03995V18.9198C14.333 19.0593 14.2847 19.1779 14.188 19.2756C14.0915 19.3733 13.9742 19.4221 13.8363 19.4221H12.1597C12.008 19.4221 11.8838 19.3733 11.7872 19.2756C11.7044 19.1779 11.663 19.0593 11.663 18.9198V18.0616C11.2905 18.55 10.8282 18.9337 10.2763 19.2128C9.72436 19.4919 9.03436 19.6315 8.20647 19.6315Z"
fill="#3367CC"
/>
<path
d="M17.564 19.4252C17.4259 19.4252 17.3086 19.3764 17.2121 19.2787C17.1155 19.181 17.0673 19.0624 17.0673 18.9229V9.04306C17.0673 8.90352 17.1155 8.7849 17.2121 8.68723C17.3086 8.58954 17.4259 8.54071 17.564 8.54071H19.2819C19.4336 8.54071 19.5509 8.58954 19.6336 8.68723C19.7303 8.7849 19.7786 8.90352 19.7786 9.04306V18.9229C19.7786 19.0624 19.7303 19.181 19.6336 19.2787C19.5509 19.3764 19.4336 19.4252 19.2819 19.4252H17.564ZM17.4811 6.74056C17.3294 6.74056 17.2051 6.69871 17.1086 6.61498C17.0257 6.51729 16.9844 6.39171 16.9844 6.23821V4.73112C16.9844 4.59157 17.0257 4.47296 17.1086 4.37529C17.2051 4.27759 17.3294 4.22876 17.4811 4.22876H19.3646C19.5163 4.22876 19.6405 4.27759 19.7371 4.37529C19.8338 4.47296 19.8821 4.59157 19.8821 4.73112V6.23821C19.8821 6.39171 19.8338 6.51729 19.7371 6.61498C19.6405 6.69871 19.5163 6.74056 19.3646 6.74056H17.4811Z"
fill="#3367CC"
/>
<path
fillRule="evenodd"
d="M23.4228 1.14092H1.11508V23.7013H23.4228V1.14092ZM0.730469 0.751953V24.0903H23.8074V0.751953H0.730469Z"
fill="#3367CC"
/>
</svg>
</div>
</div>
<div className={styles.appFullName}>XMLUI</div>
</div>
<div className={styles.actbtns}>
<div className={`${styles.uicon} ${styles.prtclk}`}>
<div style={{ width: 12, height: 12 }}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5120 5120">
<g id="l192sq9Ma1sM2oXLQ331nvD" fill="rgb(0,0,0)">
<g>
<path
id="pf2evWQPs"
d="M730 2643 c-108 -55 -108 -215 0 -270 l44 -23 1786 0 c1719 0 1787 1 1826 19 105 48 116 194 21 265 l-28 21 -1807 3 c-1705 2 -1809 1 -1842 -15z"
></path>
</g>
</g>
</svg>
</div>
</div>
<div className={`${styles.uicon} ${styles.prtclk}`}>
<div style={{ width: 12, height: 12 }}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5120 5120">
<g id="lld67zMMrGguqZbYTM5KDT" fill="rgb(0,0,0)">
<g>
<path
id="pJNFf1TAf"
d="M1162 4469 c-226 -29 -411 -177 -482 -385 -39 -113 -41 -192 -38 -1589 3 -1250 5 -1354 21 -1410 63 -217 212 -364 427 -422 61 -17 159 -18 1470 -18 1311 0 1409 1 1470 18 217 59 368 210 427 427 17 61 18 159 18 1470 0 1311 -1 1409 -18 1470 -58 215 -205 364 -422 427 -56 16 -158 18 -1435 19 -756 1 -1404 -2 -1438 -7z m2823 -320 c54 -15 149 -110 164 -164 15 -56 15 -2794 0 -2850 -15 -54 -110 -149 -164 -164 -56 -15 -2794 -15 -2850 0 -54 15 -149 110 -164 164 -15 56 -15 2794 0 2849 14 52 101 142 154 161 34 12 257 14 1430 15 982 0 1402 -3 1430 -11z"
></path>
</g>
</g>
</svg>
</div>
</div>
<div className={`${styles.uicon} ${styles.closeBtn} ${styles.prtclk}`}>
<div style={{ width: 14, height: 14 }}>
<svg
version="1.0"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
preserveAspectRatio="xMidYMid meet"
>
<g fill="#000000">
<path
d="M87.4 424.6 c-2.9 -2.9 -3.4 -4.1 -3.4 -8.2 l0 -4.9 77.7 -77.7 77.8 -77.8 -77.8 -77.8 -77.7 -77.7 0 -4.9 c0 -4.1 0.5 -5.3 3.4 -8.2 2.9 -2.9 4.1 -3.4 8.2 -3.4 l4.9 0 77.7 77.7 77.8 77.8 77.8 -77.8 77.7 -77.7 4.9 0 c4.1 0 5.3 0.5 8.2 3.4 2.9 2.9 3.4 4.1 3.4 8.2 l0 4.9 -77.7 77.7 -77.8 77.8 77.8 77.8 77.7 77.7 0 4.9 c0 4.1 -0.5 5.3 -3.4 8.2 -2.9 2.9 -4.1 3.4 -8.2 3.4 l-4.9 0 -77.7 -77.7 -77.8 -77.8 -77.8 77.8 -77.7 77.7 -4.9 0 c-4.1 0 -5.3 -0.5 -8.2 -3.4z" />
</g>
</svg>
</div>
</div>
</div>
</div>
);
};
export const WindowsAppFrame = forwardRef(({ children }: { children: ReactNode }, ref) => {
return (
<div className={styles.notepad} ref={ref as any}>
<ToolBar />
<div className={styles.windowScreen}>
<div className={styles.topBar}>
<div className={styles.topBarItem}>File</div>
<div className={styles.topBarItem}>Edit</div>
<div className={styles.topBarItem}>View</div>
</div>
<div className={styles.restWindow}>
<div className={styles.noteText}>{children}</div>
</div>
</div>
</div>
);
});
```
--------------------------------------------------------------------------------
/packages/xmlui-website-blocks/src/ScrollToTop/ScrollToTopNative.tsx:
--------------------------------------------------------------------------------
```typescript
import { forwardRef, useEffect, useState, useCallback } from "react";
import { Icon } from "xmlui";
import classnames from "classnames";
import styles from "./ScrollToTop.module.scss";
type Props = {
position?: "start" | "center" | "end";
visible?: boolean;
threshold?: number;
icon?: string;
behavior?: "smooth" | "instant" | "auto";
onClick?: () => void;
className?: string;
style?: React.CSSProperties;
};
export const defaultProps: Pick<Props, "position" | "visible" | "threshold" | "icon" | "behavior"> = {
position: "end",
visible: true,
threshold: 300,
icon: "chevronup",
behavior: "smooth",
};
export const ScrollToTop = forwardRef<HTMLButtonElement, Props>(
function ScrollToTop(
{
position = defaultProps.position,
visible = defaultProps.visible,
threshold = defaultProps.threshold,
icon = defaultProps.icon,
behavior = defaultProps.behavior,
onClick,
className,
style,
}: Props,
ref,
) {
const [isVisible, setIsVisible] = useState(false);
// Validate position and fall back to "end" if invalid
const validPosition = ["start", "center", "end"].includes(position || "") ? position : "end";
// Validate behavior and fall back to "smooth" if invalid
const validBehavior = ["smooth", "instant", "auto"].includes(behavior || "") ? behavior : "smooth";
// Check scroll position to determine visibility
useEffect(() => {
if (!visible) {
setIsVisible(false);
return;
}
const handleScroll = () => {
// Check multiple possible scroll containers using the same logic as scroll-to-top
const windowScrollTop = window.pageYOffset || document.documentElement.scrollTop;
const bodyScrollTop = document.body.scrollTop;
let maxScrollTop = Math.max(windowScrollTop, bodyScrollTop);
// Check all elements that might be scrolled (same as in handleClick)
const allElements = document.querySelectorAll('*');
allElements.forEach((element) => {
if (element instanceof HTMLElement && element.scrollTop > 0) {
maxScrollTop = Math.max(maxScrollTop, element.scrollTop);
}
});
// Also check common XMLUI containers
const xmluiContainers = document.querySelectorAll(
'.xmlui-app, .xmlui-page, .xmlui-container, [data-xmlui], main, .main, #root, .app'
);
xmluiContainers.forEach((element) => {
if (element instanceof HTMLElement) {
maxScrollTop = Math.max(maxScrollTop, element.scrollTop);
}
});
// If threshold is 0, show the button regardless of scroll position
if (threshold === 0) {
setIsVisible(true);
} else {
setIsVisible(maxScrollTop > (threshold || 0));
}
};
window.addEventListener("scroll", handleScroll);
document.addEventListener("scroll", handleScroll, true); // Capture phase for all scroll events
// Also listen to scroll events on common container elements
const xmluiContainers = document.querySelectorAll(
'.xmlui-app, .xmlui-page, .xmlui-container, [data-xmlui], main, .main, #root, .app'
);
xmluiContainers.forEach((element) => {
element.addEventListener("scroll", handleScroll);
});
handleScroll(); // Check initial position
return () => {
window.removeEventListener("scroll", handleScroll);
document.removeEventListener("scroll", handleScroll, true);
xmluiContainers.forEach((element) => {
element.removeEventListener("scroll", handleScroll);
});
};
}, [visible, threshold]);
// Scroll to top functionality
const handleClick = useCallback(() => {
// Force scroll to top using multiple methods
// This will work regardless of which container is scrolled
// Convert behavior prop to ScrollBehavior type
const scrollBehavior: ScrollBehavior = validBehavior === "instant" ? "instant" : validBehavior === "auto" ? "auto" : "smooth";
// Method 1: Standard window scroll
window.scrollTo({ top: 0, behavior: scrollBehavior });
// Method 2: Direct property setting (for instant behavior)
if (validBehavior === "instant") {
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
}
// Method 3: Find and scroll any scrolled containers
const allElements = document.querySelectorAll('*');
allElements.forEach((element) => {
if (element instanceof HTMLElement && element.scrollTop > 0) {
if (validBehavior === "instant") {
element.scrollTop = 0;
} else {
element.scrollTo({ top: 0, behavior: scrollBehavior });
}
}
});
// Method 4: Scroll specific XMLUI containers (common patterns)
const xmluiContainers = document.querySelectorAll(
'.xmlui-app, .xmlui-page, .xmlui-container, [data-xmlui], main, .main, #root, .app'
);
xmluiContainers.forEach((element) => {
if (element instanceof HTMLElement) {
if (validBehavior === "instant") {
element.scrollTop = 0;
} else {
element.scrollTo({ top: 0, behavior: scrollBehavior });
}
}
});
onClick?.();
}, [validBehavior, onClick]);
if (!isVisible) {
return null;
}
return (
<button
ref={ref}
className={classnames(
styles.scrollToTop,
{
[styles.positionStart]: validPosition === "start",
[styles.positionCenter]: validPosition === "center",
[styles.positionEnd]: validPosition === "end",
},
className,
)}
onClick={handleClick}
style={style}
aria-label="Scroll to top"
type="button"
>
<Icon name={icon} fallback="chevronup" aria-hidden />
</button>
);
},
);
```
--------------------------------------------------------------------------------
/xmlui/tests/components-core/scripts-runner/AttributeValueParser.test.ts:
--------------------------------------------------------------------------------
```typescript
import { assert, describe, expect, it } from "vitest";
import { parseAttributeValue } from "../../../src/components-core/script-runner/AttributeValueParser";
import { Identifier, ObjectLiteral, T_IDENTIFIER } from "../../../src/components-core/script-runner/ScriptingSourceTree";
import { T_OBJECT_LITERAL } from "../../../src/parsers/scripting/ScriptingNodeTypes";
describe("Attribute value parsing", () => {
it("Empty value", () => {
// --- Act
const source = "";
const val = parseAttributeValue(source)!;
// --- Assert
expect(val.__PARSED).toBe(true);
expect(val.parseId).toBeTypeOf("number");
expect(val.segments).toHaveLength(0);
});
it("single string literal", () => {
// --- Act
const source = "hello";
const val = parseAttributeValue(source)!;
// --- Assert
expect(val.__PARSED).toBe(true);
expect(val.parseId).toBeTypeOf("number");
expect(val.segments).toHaveLength(1);
expect(val.segments![0].expr).toBeUndefined();
expect(val.segments![0].literal).toBe("hello");
});
it("single expression value", () => {
// --- Act
const source = "{myId}";
const val = parseAttributeValue(source)!;
// --- Assert
expect(val.__PARSED).toBe(true);
expect(val.segments).toHaveLength(1);
expect(val.segments![0].expr).toBeDefined();
expect(val.segments![0].literal).toBeUndefined();
expect(val.segments![0].expr.type).toBe(T_IDENTIFIER);
expect((val.segments![0].expr as Identifier).name).toBe("myId");
});
it("compound value #1", () => {
// --- Act
const source = "{myId}hello";
const val = parseAttributeValue(source)!;
// --- Assert
expect(val.__PARSED).toBe(true);
expect(val.parseId).toBeTypeOf("number");
expect(val.segments).toHaveLength(2);
expect(val.segments![0].expr).toBeDefined();
expect(val.segments![0].literal).toBeUndefined();
expect(val.segments![0].expr.type).toBe(T_IDENTIFIER);
expect((val.segments![0].expr as Identifier).name).toBe("myId");
expect(val.segments![1].expr).toBeUndefined();
expect(val.segments![1].literal).toBe("hello");
});
it("compound value #2", () => {
// --- Act
const source = "hello{myId}";
const val = parseAttributeValue(source)!;
// --- Assert
expect(val.__PARSED).toBe(true);
expect(val.parseId).toBeTypeOf("number");
expect(val.segments).toHaveLength(2);
expect(val.segments![0].expr).toBeUndefined();
expect(val.segments![0].literal).toBe("hello");
expect(val.segments![1].expr).toBeDefined();
expect(val.segments![1].literal).toBeUndefined();
expect(val.segments![1].expr.type).toBe(T_IDENTIFIER);
expect((val.segments![1].expr as Identifier).name).toBe("myId");
});
it("compound value #3", () => {
// --- Act
const source = "hello{myId}world";
const val = parseAttributeValue(source)!;
// --- Assert
expect(val.__PARSED).toBe(true);
expect(val.parseId).toBeTypeOf("number");
expect(val.segments).toHaveLength(3);
expect(val.segments![0].expr).toBeUndefined();
expect(val.segments![0].literal).toBe("hello");
expect(val.segments![1].expr).toBeDefined();
expect(val.segments![1].literal).toBeUndefined();
expect(val.segments![1].expr.type).toBe(T_IDENTIFIER);
expect((val.segments![1].expr as Identifier).name).toBe("myId");
expect(val.segments![2].expr).toBeUndefined();
expect(val.segments![2].literal).toBe("world");
});
it("value with escaped brace #1", () => {
// --- Act
const source = "\\{myId";
const val = parseAttributeValue(source)!;
// --- Assert
expect(val.__PARSED).toBe(true);
expect(val.parseId).toBeTypeOf("number");
expect(val.segments).toHaveLength(1);
expect(val.segments![0].expr).toBeUndefined();
expect(val.segments![0].literal).toBe("{myId");
});
it("value with escaped brace #2", () => {
// --- Act
const source = "\\{myId}hello";
const val = parseAttributeValue(source)!;
// --- Assert
expect(val.__PARSED).toBe(true);
expect(val.parseId).toBeTypeOf("number");
expect(val.segments).toHaveLength(1);
expect(val.segments![0].expr).toBeUndefined();
expect(val.segments![0].literal).toBe("{myId}hello");
});
it("value with escaped brace #3", () => {
// --- Act
const source = "hello\\{myId}";
const val = parseAttributeValue(source)!;
// --- Assert
expect(val.__PARSED).toBe(true);
expect(val.parseId).toBeTypeOf("number");
expect(val.segments).toHaveLength(1);
expect(val.segments![0].expr).toBeUndefined();
expect(val.segments![0].literal).toBe("hello{myId}");
});
it("value with escaped brace #4", () => {
// --- Act
const source = "hello\\{myId}{world}";
const val = parseAttributeValue(source)!;
// --- Assert
expect(val.__PARSED).toBe(true);
expect(val.parseId).toBeTypeOf("number");
expect(val.segments).toHaveLength(2);
expect(val.segments![0].expr).toBeUndefined();
expect(val.segments![0].literal).toBe("hello{myId}");
expect(val.segments![1].expr).toBeDefined();
expect(val.segments![1].literal).toBeUndefined();
expect(val.segments![1].expr.type).toBe(T_IDENTIFIER);
expect((val.segments![1].expr as Identifier).name).toBe("world");
});
it("value with unclosed brace", () => {
// --- Act
const source = "{myId";
try {
const val = parseAttributeValue(source)!;
} catch (err) {
expect(err.toString()).toContain("Unclosed");
return;
}
assert.fail("Exception expected");
});
it("object value #1", () => {
// --- Act
const source = "{{ from: from, to: to }}";
const val = parseAttributeValue(source)!;
// --- Assert
expect(val.__PARSED).toBe(true);
expect(val.parseId).toBeTypeOf("number");
expect(val.segments).toHaveLength(1);
expect(val.segments![0].expr).toBeDefined();
expect(val.segments![0].literal).toBeUndefined();
expect(val.segments![0].expr.type).toBe(T_OBJECT_LITERAL);
expect((val.segments![0].expr as ObjectLiteral).props.length).toBe(2);
});
});
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/rendering/reducer.ts:
--------------------------------------------------------------------------------
```typescript
import produce from "immer";
import { cloneDeep, isPlainObject, keyBy, setWith, unset } from "lodash-es";
import type { ContainerState } from "../../abstractions/ContainerDefs";
import type { ContainerAction} from "./containers";
import { ContainerActionKind } from "./containers";
import type { IDebugViewContext } from "../DebugViewProvider";
const MAX_STATE_TRANSITION_LENGTH = 100;
/**
* This function creates a reducer for the container state. For diagnostics, it may
* log the state transitions.
* @param debugView This debug view determines if the state transitions should be logged.
*/
export function createContainerReducer(debugView: IDebugViewContext) {
const allowLogging = debugView.collectStateTransitions;
let prevState: any = undefined;
let nextState: any = undefined;
// --- The reducer function
return produce((state: ContainerState, action: ContainerAction) => {
// --- Check if the action has an appropriate uid
const { uid } = action.payload;
if (uid === undefined && action.type !== ContainerActionKind.STATE_PART_CHANGED) {
console.error("uid not provided for control component", {
state,
action,
});
return state;
}
// --- Store the previous state for logging
if (allowLogging) {
try {
prevState = cloneDeep(state[uid]);
} catch (e) {
console.error("Error while cloning previous value", e);
}
}
// --- Apply the action
switch (action.type) {
case ContainerActionKind.LOADER_IN_PROGRESS_CHANGED: {
state[uid] = { ...state[uid], inProgress: action.payload.inProgress };
storeNextValue(state[uid]);
break;
}
case ContainerActionKind.LOADER_IS_REFETCHING_CHANGED: {
state[uid] = { ...state[uid], isRefetching: action.payload.isRefetching };
storeNextValue(state[uid]);
break;
}
case ContainerActionKind.LOADER_LOADED: {
const { data, pageInfo } = action.payload;
state[uid] = {
value: data,
byId: Array.isArray(data) ? keyBy(data, (item) => item.$id) : undefined,
inProgress: false,
loaded: data !== undefined,
pageInfo,
};
storeNextValue(state[uid]);
break;
}
case ContainerActionKind.LOADER_ERROR: {
const { error } = action.payload;
state[uid] = { ...state[uid], error, inProgress: false, loaded: true };
storeNextValue(state[uid]);
break;
}
case ContainerActionKind.EVENT_HANDLER_STARTED: {
const { eventName } = action.payload;
const inProgressFlagName = `${eventName}InProgress`;
state[uid] = { ...state[uid], [inProgressFlagName]: true };
storeNextValue(state[uid]);
break;
}
case ContainerActionKind.EVENT_HANDLER_COMPLETED: {
const { eventName } = action.payload;
const inProgressFlagName = `${eventName}InProgress`;
state[uid] = { ...state[uid], [inProgressFlagName]: false };
storeNextValue(state[uid]);
break;
}
case ContainerActionKind.EVENT_HANDLER_ERROR: {
const { eventName } = action.payload;
const inProgressFlagName = `${eventName}InProgress`;
state[uid] = { ...state[uid], [inProgressFlagName]: false };
storeNextValue(state[uid]);
break;
}
case ContainerActionKind.COMPONENT_STATE_CHANGED: {
const { state: newState } = action.payload;
state[uid] = {
...state[uid],
...newState,
};
storeNextValue(state[uid]);
break;
}
case ContainerActionKind.STATE_PART_CHANGED: {
const { path, value, target, actionType, localVars } = action.payload;
if (actionType === "unset") {
unset(state, path);
} else {
let tempValueInLocalVars = localVars;
setWith(state, path, value, (nsValue, key, nsObject) => {
tempValueInLocalVars = tempValueInLocalVars?.[key];
if (
nsValue === undefined &&
isPlainObject(tempValueInLocalVars) &&
isPlainObject(target)
) {
// if we are setting a new object's key, lodash defaults it to an array, if the key is a number.
// This way we can force it to be an object.
// (example: we have an empty object in vars called usersTyped: {}, we set usersTyped[1] = Date.now().
// During the first state setting, we don't have a previous value for usersTyped, because it was defined
// in vars, and wasn't updated yet. In the first update, it's value is undefined, and because the key is
// a number (an id in our case), lodash thinks it has to create an array after this 'set'. This way we
// can force it, because in the target we have the target object value (given by the proxy change),so if
// it's an object, it should be an object. Otherwise, we let lodash decide)
const next = Object(nsValue);
return next;
}
});
storeNextValue(state);
}
break;
}
default:
throw new Error();
}
// --- Log the transition
if (allowLogging) {
const loggedTransition = {
action: action.type,
uid,
prevState,
nextState,
};
// TODO: Logging to the console is a temporary solution. We should use a proper
// logging mechanism. Nonetheless, this works only with state transition logging
// enabled (which is disabled by default).
if (debugView.stateTransitions) {
if (debugView.stateTransitions.length >= MAX_STATE_TRANSITION_LENGTH) {
debugView.stateTransitions.shift();
}
debugView.stateTransitions.push(loggedTransition);
}
}
function storeNextValue(nextValue: any) {
if (allowLogging) {
try {
nextState = cloneDeep(nextValue);
} catch (e) {
console.error("Error while cloning next value", e);
}
}
}
});
}
```