This is page 23 of 141. Use http://codebase.md/xmlui-org/xmlui/mockApiDef.js?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
--------------------------------------------------------------------------------
/xmlui/src/components-core/utils/date-utils.ts:
--------------------------------------------------------------------------------
```typescript
import { format, formatRelative, isThisWeek, isToday, isTomorrow, isYesterday } from "date-fns";
import { humanReadableDateTimeTillNow } from "../utils/misc";
export function isoDateString (date?: string) {
return (!date ? new Date() : new Date(date)).toJSON();
}
export function formatDate (date: string | Date) {
return new Date(date).toLocaleDateString();
}
export function formatDateTime (date: string | Date) {
return new Date(date).toLocaleString();
}
export function formatTime (date: string | Date) {
return new Date(date).toLocaleTimeString();
}
export function formatTimeWithoutSeconds (date: string | Date) {
return format(new Date(date), "H:m");
}
export function formatDateWithoutYear (date: string | Date) {
return new Date(date).toLocaleDateString([], {
month: "numeric",
day: "2-digit"
});
}
export function getDate (date?: string | number | Date) {
return date ? new Date(date) : new Date();
}
export function getDateUntilNow (date?: string | number | Date, nowLabel?: string, time?: string) {
return date ? humanReadableDateTimeTillNow(date, nowLabel, time) : "-";
}
export function smartFormatDateTime (date?: string | number | Date) {
if (!date) {
return "-";
}
if (isToday(new Date(date))) {
return new Date(date).toLocaleTimeString();
}
if (isThisWeek(new Date(date))) {
return `${formatRelative(new Date(date), new Date())}`;
}
return new Date(date).toLocaleString();
}
export function smartFormatDate (date?: string | number | Date) {
if (!date) {
return "-";
}
//TODO we could use formatRelative when they implement this: https://github.com/date-fns/date-fns/issues/1218
if (isToday(new Date(date))) {
return "Today";
}
if (isYesterday(new Date(date))) {
return "Yesterday";
}
return new Date(date).toLocaleDateString();
}
export function isDateToday (date: string | Date) {
return isToday(new Date(date));
}
export function isDateYesterday (date: string | Date) {
return isYesterday(new Date(date));
}
export function isDateTomorrow (date: string | Date) {
return isTomorrow(new Date(date));
}
/**
* Formats a date into a human-readable elapsed time string.
* Returns strings like "now", "12 seconds ago", "3 hours ago", "today", "yesterday", "3 weeks ago", etc.
*
* @param date The date to format
* @param shortFormat When true, uses abbreviated time units (e.g. "s" instead of "seconds")
* @returns A human-readable elapsed time string
*/
export function formatHumanElapsedTime(date: string | Date, shortFormat = false): string {
const now = new Date();
const inputDate = new Date(date);
// Calculate time difference in milliseconds
const diffMs = now.getTime() - inputDate.getTime();
// Handle future dates
if (diffMs < 0) {
return formatDate(date);
}
// Convert to seconds, minutes, hours, days, weeks
const diffSeconds = Math.floor(diffMs / 1000);
const diffMinutes = Math.floor(diffSeconds / 60);
const diffHours = Math.floor(diffMinutes / 60);
const diffDays = Math.floor(diffHours / 24);
const diffWeeks = Math.floor(diffDays / 7);
const diffMonths = Math.floor(diffDays / 30);
const diffYears = Math.floor(diffDays / 365);
// Define unit formats based on shortFormat parameter
const units = {
second: {
singular: shortFormat ? 's' : 'second',
plural: shortFormat ? 's' : 'seconds'
},
minute: {
singular: shortFormat ? 'min' : 'minute',
plural: shortFormat ? 'min' : 'minutes'
},
hour: {
singular: shortFormat ? 'hr' : 'hour',
plural: shortFormat ? 'hrs' : 'hours'
},
day: {
singular: shortFormat ? 'd' : 'day',
plural: shortFormat ? 'd' : 'days'
},
week: {
singular: shortFormat ? 'wk' : 'week',
plural: shortFormat ? 'wks' : 'weeks'
},
month: {
singular: shortFormat ? 'mo' : 'month',
plural: shortFormat ? 'mos' : 'months'
},
year: {
singular: shortFormat ? 'y' : 'year',
plural: shortFormat ? 'yrs' : 'years'
}
};
// Just now (within 10 seconds)
if (diffSeconds < 10) {
return "now";
}
// Seconds ago (up to 1 minute)
if (diffSeconds < 60) {
const unit = diffSeconds === 1 ? units.second.singular : units.second.plural;
return `${diffSeconds} ${unit} ago`;
}
// Minutes ago (up to 1 hour)
if (diffMinutes < 60) {
const unit = diffMinutes === 1 ? units.minute.singular : units.minute.plural;
return `${diffMinutes} ${unit} ago`;
}
// Hours ago (up to today)
if (isToday(inputDate)) {
const unit = diffHours === 1 ? units.hour.singular : units.hour.plural;
return `${diffHours} ${unit} ago`;
}
// Yesterday
if (isYesterday(inputDate)) {
return "yesterday";
}
// Days ago (up to 1 week)
if (diffDays < 7) {
const unit = diffDays === 1 ? units.day.singular : units.day.plural;
return `${diffDays} ${unit} ago`;
}
// Weeks ago (up to 4 weeks / 1 month)
if (diffWeeks < 4) {
const unit = diffWeeks === 1 ? units.week.singular : units.week.plural;
return `${diffWeeks} ${unit} ago`;
}
// Months ago (up to 12 months / 1 year)
if (diffMonths < 12) {
const unit = diffMonths === 1 ? units.month.singular : units.month.plural;
return `${diffMonths} ${unit} ago`;
}
// Years ago
const unit = diffYears === 1 ? units.year.singular : units.year.plural;
return `${diffYears} ${unit} ago`;
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Charts/RadarChart/RadarChartNative.tsx:
--------------------------------------------------------------------------------
```typescript
import {
RadarChart as RRadarChart,
Radar,
PolarGrid,
PolarAngleAxis,
PolarRadiusAxis,
ResponsiveContainer,
Tooltip,
Legend as RLegend,
} from "recharts";
import type { ReactNode} from "react";
import { useEffect, useRef, useState, useCallback } from "react";
import { useMemo } from "react";
import ChartProvider, { useChartContextValue } from "../utils/ChartProvider";
import { TooltipContent } from "../Tooltip/TooltipContent";
import { useTheme } from "../../../components-core/theming/ThemeContext";
export type RadarChartProps = {
data: any[];
nameKey: string;
dataKeys?: string[];
className?: string;
hideGrid?: boolean;
hideAngleAxis?: boolean;
hideRadiusAxis?: boolean;
hideTooltip?: boolean;
children?: ReactNode;
showLegend?: boolean;
filled?: boolean;
strokeWidth?: number;
fillOpacity?: number;
tooltipRenderer?: (tooltipData: any) => ReactNode;
};
export const defaultProps: Pick<
RadarChartProps,
| "hideGrid"
| "hideAngleAxis"
| "hideRadiusAxis"
| "hideTooltip"
| "showLegend"
| "filled"
| "strokeWidth"
| "fillOpacity"
> = {
hideGrid: false,
hideAngleAxis: false,
hideRadiusAxis: false,
hideTooltip: false,
showLegend: false,
filled: true,
strokeWidth: 2,
fillOpacity: 0.3,
};
export function RadarChart({
data = [],
nameKey,
dataKeys = [],
hideGrid = defaultProps.hideGrid,
hideAngleAxis = defaultProps.hideAngleAxis,
hideRadiusAxis = defaultProps.hideRadiusAxis,
hideTooltip = defaultProps.hideTooltip,
className,
children,
showLegend = defaultProps.showLegend,
filled = defaultProps.filled,
strokeWidth = defaultProps.strokeWidth,
fillOpacity = defaultProps.fillOpacity,
tooltipRenderer,
}: RadarChartProps) {
// Validate and normalize data
const validData = Array.isArray(data) ? data : [];
const { getThemeVar } = useTheme();
const colorValues = useMemo(() => {
return [
getThemeVar("color-primary-500"),
getThemeVar("color-primary-300"),
getThemeVar("color-success-500"),
getThemeVar("color-success-300"),
getThemeVar("color-warn-500"),
getThemeVar("color-warn-300"),
getThemeVar("color-danger-500"),
getThemeVar("color-danger-300"),
getThemeVar("color-info-500"),
getThemeVar("color-info-300"),
getThemeVar("color-secondary-500"),
getThemeVar("color-secondary-300"),
];
}, [getThemeVar]);
const config = useMemo(() => {
return Object.assign(
{},
...dataKeys.map((key, index) => {
return {
[key]: {
label: key,
color: colorValues[index % colorValues.length],
},
};
}),
);
}, [colorValues, dataKeys]);
const chartContextValue = useChartContextValue({ dataKeys, nameKey });
// Process data and create radar elements based on dataKeys
const radarElements = useMemo(() => {
return dataKeys.map((key, index) => {
const color = colorValues[index % colorValues.length];
return (
<Radar
key={key}
name={key}
dataKey={key}
stroke={color}
fill={filled ? color : "none"}
fillOpacity={filled ? fillOpacity : 0}
strokeWidth={strokeWidth}
/>
);
});
}, [dataKeys, colorValues, filled, fillOpacity, strokeWidth]);
// Handle responsive behavior
const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const updateSize = () => {
if (containerRef.current) {
const { width, height } = containerRef.current.getBoundingClientRect();
setContainerSize({ width, height });
}
};
updateSize();
window.addEventListener('resize', updateSize);
return () => window.removeEventListener('resize', updateSize);
}, []);
// Determine if we're in mini mode (very small container)
const isMiniMode = containerSize.height < 150;
const safeTooltipRenderer = useCallback(
(props: any) => {
if (!tooltipRenderer) return <TooltipContent {...props} />;
const payloadObject: Record<string, any> = {};
if (props.payload && props.payload.length > 0 && props.payload[0].payload) {
Object.assign(payloadObject, props.payload[0].payload);
}
// Extract tooltip data from Recharts props
const tooltipData = {
label: props.label,
payload: payloadObject,
active: props.active,
};
return tooltipRenderer(tooltipData);
},
[tooltipRenderer],
);
return (
<ChartProvider value={chartContextValue}>
<div ref={containerRef} className={className}>
<ResponsiveContainer width="100%" height="100%">
<RRadarChart data={validData}>
{!hideGrid && <PolarGrid />}
{!hideAngleAxis && (
<PolarAngleAxis
dataKey={nameKey}
hide={isMiniMode}
/>
)}
{!hideRadiusAxis && (
<PolarRadiusAxis
hide={isMiniMode}
/>
)}
{!isMiniMode && !hideTooltip && (
<Tooltip content={safeTooltipRenderer} />
)}
{showLegend && !isMiniMode && <RLegend />}
{radarElements}
{children}
</RRadarChart>
</ResponsiveContainer>
</div>
</ChartProvider>
);
}
```
--------------------------------------------------------------------------------
/xmlui/tests/components-core/interception/request-param-converter.test.ts:
--------------------------------------------------------------------------------
```typescript
import { describe, expect, it } from "vitest";
import { convertRequestParamPart } from "../../../src/components-core/utils/request-params"
describe("Request parameter converter", () => {
it("string to integer #1", () => {
// --- Arrange
const data = {
a: "123",
b: true,
c: 345
}
// --- Act
const types = {
a: "integer"
}
const res = convertRequestParamPart(data, types)
// --- Assert
expect(res).deep.equal({
a: 123,
b: true,
c: 345
})
});
it("string to integer #2", () => {
// --- Arrange
const data = {
a: "123",
b: "-444",
c: 345
}
// --- Act
const types = {
a: "integer",
b: "integer"
}
const res = convertRequestParamPart(data, types)
// --- Assert
expect(res).deep.equal({
a: 123,
b: -444,
c: 345
})
});
it("string to float #1", () => {
// --- Arrange
const data = {
a: "123.25",
b: true,
c: 345
}
// --- Act
const types = {
a: "float"
}
const res = convertRequestParamPart(data, types)
// --- Assert
expect(res).deep.equal({
a: 123.25,
b: true,
c: 345
})
});
it("string to float #2", () => {
// --- Arrange
const data = {
a: "123.25",
b: "234.5",
c: 345
}
// --- Act
const types = {
a: "float",
b: "real"
}
const res = convertRequestParamPart(data, types)
// --- Assert
expect(res).deep.equal({
a: 123.25,
b: 234.5,
c: 345
})
});
it("string to float #3", () => {
// --- Arrange
const data = {
a: "123.25",
b: "234.5",
c: 345
}
// --- Act
const types = {
a: "double",
b: "real"
}
const res = convertRequestParamPart(data, types)
// --- Assert
expect(res).deep.equal({
a: 123.25,
b: 234.5,
c: 345
})
});
const stringToBoolCases = [
{ s: "true", exp: true},
{ s: "yes", exp: true},
{ s: "on", exp: true},
{ s: "false", exp: false},
{ s: "no", exp: false},
{ s: "off", exp: false},
]
stringToBoolCases.forEach((tc, idx) => it(`string to bool #${idx + 1}`, () => {
// --- Arrange
const data = {
a: tc.s,
b: "234.5",
c: 345
}
// --- Act
const types = {
a: "boolean",
b: "real"
}
const res = convertRequestParamPart(data, types)
// --- Assert
expect(res).deep.equal({
a: tc.exp,
b: 234.5,
c: 345
})
}))
it("number to integer #1", () => {
// --- Arrange
const data = {
a: 123.25,
b: true,
c: 345
}
// --- Act
const types = {
a: "integer"
}
const res = convertRequestParamPart(data, types)
// --- Assert
expect(res).deep.equal({
a: 123,
b: true,
c: 345
})
});
it("number to integer #2", () => {
// --- Arrange
const data = {
a: 123.25,
b: 234,
c: 345.5
}
// --- Act
const types = {
a: "integer",
b: "integer",
c: "integer"
}
const res = convertRequestParamPart(data, types)
// --- Assert
expect(res).deep.equal({
a: 123,
b: 234,
c: 346
})
});
it("number to bool", () => {
// --- Arrange
const data = {
a: 123.25,
b: true,
c: 0
}
// --- Act
const types = {
a: "boolean",
c: "boolean"
}
const res = convertRequestParamPart(data, types)
// --- Assert
expect(res).deep.equal({
a: true,
b: true,
c: false
})
});
it("boolean to integer", () => {
// --- Arrange
const data = {
a: true,
b: "123",
c: false
}
// --- Act
const types = {
a: "integer",
c: "integer"
}
const res = convertRequestParamPart(data, types)
// --- Assert
expect(res).deep.equal({
a: 1,
b: "123",
c: 0
})
});
it("boolean to real", () => {
// --- Arrange
const data = {
a: true,
b: true,
c: false
}
// --- Act
const types = {
a: "real",
b: "double",
c: "float"
}
const res = convertRequestParamPart(data, types)
// --- Assert
expect(res).deep.equal({
a: 1,
b: 1,
c: 0
})
});
});
```
--------------------------------------------------------------------------------
/docs/public/pages/scoping.md:
--------------------------------------------------------------------------------
```markdown
# Scoping
## Variables
A variable declared in a Main.xmlui component is visible to built-in child components (e.g. `Text`) at any level.
```xmlui-pg
---app display filename="Main.xmlui" /grandparent/ /parent/ /child/
<App var.message="Hello from App">
<Card id="grandparent">
<Text>Message: {message}</Text>
<Card id="parent" var.message2="Hello from Card">
<Text>Message: {message}</Text>
<Text>Message2: {message2}</Text>
<Card id="child">
<Text>Message: {message}</Text>
<Text>Message2: {message2}</Text>
</Card>
</Card>
</Card>
</App>
```
A variable declared in a Main.xmlui component is not automatically visible to a user-defined child component.
```xmlui-pg
---app display filename="Main.xmlui"
<App var.message="Hello from App">
<Card>
<Text>Message: {message}</Text>
</Card>
<MyCard />
</App>
---comp display filename="MyCard"
<Component name="MyCard">
<Card>
<Text>Message: {message}</Text>
</Card>
</Component>
```
The variable can be passed into a user-defined component.
```xmlui-pg
---app display filename="Main.xmlui"
<App var.message="Hello from App">
<Card>
<Text>Message: {message}</Text>
</Card>
<MyCard message="{message}" />
</App>
---comp display filename="MyCard"
<Component name="MyCard">
<Card>
<Text>Message: {$props.message}</Text>
</Card>
</Component>
```
Or the variable can be transposed into the user-defined component by means of the [Slot](/components/Slot) mechanism. The `Slot` content evaluates in the parent's scope, so it can see parent vars and IDs, but renders inside the child’s layout.
```xmlui-pg
---app display filename="Main.xmlui"
<App var.message="Hello from App">
<Card>
<Text>Message: {message}</Text>
</Card>
<MyCard>
<Text>Message: {message}</Text>
</MyCard>
</App>
---comp display filename="MyCard.xmlui"
<Component name="MyCard">
<Card>
<Slot/>
</Card>
</Component>
```
A child component can redeclare a variable.
```xmlui-pg
---app display filename="Main.xmlui" /grandparent/ /parent/ /child/
<App var.message="Hello from App">
<Card id="grandparent">
<Text>Message: {message}</Text>
<Card id="parent" var.message="Hello from parent Card">
<Text>Message: {message}</Text>
<Card id="child" var.message="Hello from child Card">
<Text>Message: {message}</Text>
</Card>
</Card>
</Card>
</App>
```
All these rules apply within a user-defined component defined in a file like `MyComponent.xmlui`.
```xmlui-pg
---app display filename="Main.xmlui"
<App>
<MyComponent />
</App>
---comp display filename="MyComponent.xmlui"
<Component name="MyComponent" var.message="Hello from MyComponent">
<Card id="grandparent">
<Text>Message: {message}</Text>
<Card id="parent" var.message2="Hello from Card">
<Text>Message: {message}</Text>
<Text>Message2: {message2}</Text>
<Card id="child">
<Text>Message: {message}</Text>
<Text>Message2: {message2}</Text>
</Card>
</Card>
</Card>
</Component>
```
A variable declared in a user-defined component can be passed into another user-defined component.
```xmlui-pg
---app display filename="Main.xmlui"
<App>
<MyComponent />
</App>
---comp display filename="MyComponent.xmlui"
<Component name="MyComponent" var.message="Hello from MyComponent">
<Card>
<Text>Message: {message}</Text>
</Card>
<MyOtherComponent message="{message}" />
</Component>
---comp display filename="MyOtherComponent.xmlui"
<Component name="MyOtherComponent">
<Card>
<Text>Passed message: {$props.message}</Text>
</Card>
</Component>
```
## Component IDs
A component ID declared on a Main.xmlui component is visible to built-in child components (e.g. `Text`) at any level.
```xmlui-pg
---app display filename="Main.xmlui" /parent/ /child/ /textBox/
<App var.message="Hello from App">
<TextBox id="textBox" initialValue="{message}" />
<Card id="parent">
<Text>
{ textBox.value }
</Text>
<Card id="child">
<Text>
{ textBox.value }
</Text>
</Card>
</Card>
</App>
```
A component ID declared on a Main.xmlui component is not automatically visible to a user-defined child component.
```xmlui-pg
---app display filename="Main.xmlui"
<App var.message="Hello from App">
<TextBox id="textBox" initialValue="{message}" />
<MyCard />
</App>
---comp display filename="MyCard.xmlui"
<Component name="MyCard">
<Card>
<Text>Message: {textBox.value}</Text>
</Card>
</Component>
```
The id can be passed into a user-defined component.
```xmlui-pg
---app display filename="Main.xmlui"
<App var.message="Hello from App">
<TextBox id="textBox" initialValue="{message}" />
<MyCard textBox="{textBox}" />
</App>
---comp display filename="MyCard.xmlui"
<Component name="MyCard">
<Card>
<Text>Message: {$props.textBox.value}</Text>
</Card>
</Component>
```
Or the component ID can be transposed into the user-defined component by means of the [Slot](/components/Slot) mechanism.
```xmlui-pg
---app display filename="Main.xmlui"
<App var.message="Hello from App">
<TextBox id="textBox" initialValue="{message}" />
<MyCard>
<Text>Message: {textBox.value}</Text>
</MyCard>
</App>
---comp display filename="MyCard.xmlui"
<Component name="MyCard">
<Card>
<Slot/>
</Card>
</Component>
```
All these rules apply within a user-defined component defined in a file like `MyComponent.xmlui`.
```
--------------------------------------------------------------------------------
/docs/public/pages/tutorial-06.md:
--------------------------------------------------------------------------------
```markdown
# Slider
The `Dashboard` page continues with a chart of daily revenue that uses a [Slider](/components/Slider) to control both ends of a date range.
Here is a simplified version of that mechanism. Try using both slider handles to adjust the date range and corresponding total revenue.
```xmlui-pg noHeader
---app display
<App>
<SliderDemo />
</App>
---comp
<Component name="SliderDemo">
<variable name="startDate" value="2022-06-01" />
<variable name="endDate" value="2022-06-30" />
<variable name="dailyData" value="{[
{date: '2022-06-01', total: 1200},
{date: '2022-06-02', total: 1850},
{date: '2022-06-03', total: 0},
{date: '2022-06-04', total: 950},
{date: '2022-06-05', total: 1650},
{date: '2022-06-06', total: 2200},
{date: '2022-06-07', total: 1400},
{date: '2022-06-08', total: 0},
{date: '2022-06-09', total: 1750},
{date: '2022-06-10', total: 1300},
{date: '2022-06-11', total: 1900},
{date: '2022-06-12', total: 2350},
{date: '2022-06-13', total: 0},
{date: '2022-06-14', total: 1800},
{date: '2022-06-15', total: 2150},
{date: '2022-06-16', total: 1450},
{date: '2022-06-17', total: 0},
{date: '2022-06-18', total: 2000},
{date: '2022-06-19', total: 1250},
{date: '2022-06-20', total: 1950},
{date: '2022-06-21', total: 0},
{date: '2022-06-22', total: 1600},
{date: '2022-06-23', total: 1850},
{date: '2022-06-24', total: 2250},
{date: '2022-06-25', total: 0},
{date: '2022-06-26', total: 1750},
{date: '2022-06-27', total: 2050},
{date: '2022-06-28', total: 1500},
{date: '2022-06-29', total: 0},
{date: '2022-06-30', total: 2200}
]}" />
<variable name="filteredData" value="{
dailyData.filter(item => item.date >= startDate && item.date <= endDate)
}" />
<VStack>
<H1>Slider Demo</H1>
<Text>Selected records: {filteredData.length}</Text>
<Slider
id="dateSlider"
label="Date range"
minValue="{1}"
maxValue="{30}"
initialValue="{[1, 30]}"
step="{1}"
onDidChange="{
startDate = window.sliderValueToDate(dateSlider.value[0]);
endDate = window.sliderValueToDate(dateSlider.value[1]);
}"
valueFormat="{ (value) => {
const result = window.sliderValueToDate(value);
return result;
}
}"
/>
<Text>Total Revenue: ${filteredData.reduce((sum, item) => sum + item.total, 0)}</Text>
</VStack>
</Component>
```
Here's `SliderDemo`.
```xmlui /filteredData/ /startDate/ /endDate/ /sliderValueToDate/
<Component name="SliderDemo">
<variable name="startDate" value="2022-06-01" />
<variable name="endDate" value="2022-06-30" />
<variable name="dailyData" value="{[
{date: '2022-06-01', total: 1200},
{date: '2022-06-02', total: 1850},
...
{date: '2022-06-29', total: 0},
{date: '2022-06-30', total: 2200}
]}" />
<variable name="filteredData" value="{
dailyData.filter(item => item.date >= startDate && item.date <= endDate)
}" />
<VStack>
<H1>Slider Demo</H1>
<Text>Selected records: {filteredData.length}</Text>
<Slider
id="dateSlider"
label="Date range"
minValue="{1}"
maxValue="{30}"
initialValue="{[1, 30]}"
step="{1}"
onDidChange="{
startDate = window.sliderValueToDate(dateSlider.value[0]);
endDate = window.sliderValueToDate(dateSlider.value[1]);
}"
valueFormat="{ (value) => {
const result = window.sliderValueToDate(value);
return result;
}
}"
/>
<Text>
Total Revenue: ${filteredData.reduce((sum, item) => sum + item.total, 0)}
</Text>
</VStack>
</Component>
```
When the handles move, the slider's `onDidChange` event updates `startDate` and `endDate` using a function, `sliderValueToDate`, that translates the slider position to a date in the range of dates. In the Invoices app those variables form part of a `DataSource` URL that fires when there's a change; here they update the `filteredData` variable to simulate the real `DataSource`.
The slider's `valueFormat` property uses the same function to report the new `startDate` and `endDate`.
## A custom Slider
The Invoices app encapsulates this behavior in a custom component called `DateRangeSlider`.
```xmlui /updateState/
<Component name="DateRangeSlider">
<variable name="originalStartDate" value="{ $props.minDate }"/>
<variable name="maxEndDate" value="{ $props.maxDate }"/>
<variable name="startDate" value="{ originalStartDate }"/>
<variable name="endDate" value="{ maxEndDate }"/>
<variable
name="totalDays"
value="{ window.daysBetween(originalStartDate, maxEndDate)}"/>
<ChangeListener
listenTo="{slider.value}"
onDidChange="{() => {
// Update the start and end dates based on slider values
updateState({
value: {
startDate: window.sliderValueToDate(slider.value[0], originalStartDate),
endDate: window.sliderValueToDate(slider.value[1], originalStartDate)
}
});
}}"
/>
<Slider
id="slider"
label="dateRange"
minValue="{0}"
maxValue="{ totalDays }"
initialValue="{ [0, totalDays] }"
step="10"
valueFormat="{ (value) => {
const date = window.sliderValueToDate(value, originalStartDate);
return date;
}}"
/>
</Component>
```
The `updateState` method, available in all components, is a merge operation that can set multiple variables.
```
--------------------------------------------------------------------------------
/xmlui/src/components/Tabs/Tabs.module.scss:
--------------------------------------------------------------------------------
```scss
@use "../../components-core/theming/themes" as t;
// --- This code snippet is required to collect the theme variables used in this module
$component: "Tabs";
$themeVars: ();
@function createThemeVar($componentVariable) {
$themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
@return t.getThemeVar($themeVars, $componentVariable);
}
$themeVars: t.composePaddingVars($themeVars, "trigger-Tabs");
$backgroundColor-Tabs: createThemeVar("backgroundColor-Tabs");
$borderColor-Tabs: createThemeVar("borderColor-Tabs");
$borderWidth-Tabs: createThemeVar("borderWidth-Tabs");
$borderColor-active-Tabs: createThemeVar("borderColor-active-Tabs");
$backgroundColor-trigger-Tabs: createThemeVar("backgroundColor-trigger-Tabs");
$borderRadius-trigger-Tabs: createThemeVar("borderRadius-trigger-Tabs");
$border-trigger-Tabs: createThemeVar("border-trigger-Tabs");
$textColor-trigger-Tabs: createThemeVar("textColor-trigger-Tabs");
$backgroundColor-trigger-Tabs--hover: createThemeVar("backgroundColor-trigger-Tabs--hover");
$backgroundColor-trigger-Tabs--active: createThemeVar("backgroundColor-trigger-Tabs--active");
$backgroundColor-list-Tabs: createThemeVar("backgroundColor-list-Tabs");
$borderRadius-list-Tabs: createThemeVar("borderRadius-list-Tabs");
$border-list-Tabs: createThemeVar("border-list-Tabs");
@layer components {
.tabs {
display: flex;
width: 100%;
background-color: $backgroundColor-Tabs;
overflow: hidden;
&[data-orientation="vertical"] {
flex-direction: row;
}
&[data-orientation="horizontal"] {
flex-direction: column;
}
}
.filler {
flex: 1 1 auto;
&[data-orientation="vertical"] {
border-right-width: $borderWidth-Tabs;
border-right-style: solid;
border-right-color: $borderColor-Tabs;
}
&[data-orientation="horizontal"] {
border-bottom-width: $borderWidth-Tabs;
border-bottom-style: solid;
border-bottom-color: $borderColor-Tabs;
}
}
.tabTrigger {
@include t.paddingVars($themeVars, "trigger-Tabs");
&.distributeEvenly {
flex: 1 1 auto;
}
color: $textColor-trigger-Tabs;
background-color: $backgroundColor-trigger-Tabs;
border-radius: $borderRadius-trigger-Tabs;
display: flex;
align-items: center;
justify-content: center;
font-size: t.$fontSize-base;
line-height: 1;
user-select: none;
//border-color: transparent;
border: $border-trigger-Tabs;
&:hover {
background-color: $backgroundColor-trigger-Tabs--hover;
}
&[data-orientation="vertical"] {
border-right-width: $borderWidth-Tabs;
border-right-style: solid;
border-right-color: $borderColor-Tabs;
&[data-state="active"] {
border-right-width: $borderWidth-Tabs;
border-right-style: solid;
border-right-color: $borderColor-active-Tabs;
background-color: $backgroundColor-trigger-Tabs--active;
}
}
&[data-orientation="horizontal"] {
border-bottom-width: $borderWidth-Tabs;
border-bottom-style: solid;
border-bottom-color: $borderColor-Tabs;
&[data-state="active"] {
border-bottom-width: $borderWidth-Tabs;
border-bottom-style: solid;
border-bottom-color: $borderColor-active-Tabs;
background-color: $backgroundColor-trigger-Tabs--active;
}
}
&:hover {
cursor: pointer;
}
}
.tabsList {
background-color: $backgroundColor-list-Tabs;
border-radius: $borderRadius-list-Tabs;
border: $border-list-Tabs;
position: relative;
z-index: 99;
overflow: hidden;
display: flex;
flex-shrink: 0;
scrollbar-width: thin;
&[data-orientation="vertical"] {
flex-direction: column;
}
&[data-orientation="horizontal"] {
flex-direction: row;
}
&.alignStart {
justify-content: flex-start;
}
&.alignEnd {
justify-content: flex-end;
}
&.alignCenter {
justify-content: center;
}
&.alignStretch {
justify-content: stretch;
}
}
.tabsList:hover {
overflow: auto;
}
.tabsContent {
flex-grow: 1;
outline: none;
}
// Accordion view styles
.accordionView {
width: 100%;
}
.accordionRoot {
display: flex;
flex-direction: column !important;
width: 100%;
}
.accordionInterleaved {
display: flex;
flex-direction: column;
width: 100%;
}
.accordionList {
display: contents; // Makes children act as direct children of parent
background-color: transparent;
border: none;
border-radius: 0;
overflow: visible;
}
.accordionItem {
display: flex;
flex-direction: column;
width: 100%;
}
.accordionTrigger {
width: 100%;
justify-content: flex-start;
border-bottom-width: $borderWidth-Tabs;
border-bottom-style: solid;
border-bottom-color: $borderColor-Tabs;
border-right: none !important;
&[data-state="active"] {
border-bottom-width: $borderWidth-Tabs;
border-bottom-style: solid;
border-bottom-color: $borderColor-active-Tabs;
background-color: $backgroundColor-trigger-Tabs--active;
border-right: none !important;
}
}
// Style for accordion content to appear inline with headers
.accordionInterleaved .tabsContent {
width: 100%;
order: inherit;
}
}
// --- We export the theme variables to add them to the component renderer
:export {
themeVars: t.json-stringify($themeVars);
}
```
--------------------------------------------------------------------------------
/docs/content/components/FlowLayout.md:
--------------------------------------------------------------------------------
```markdown
# FlowLayout [#flowlayout]
`FlowLayout` positions content in rows with automatic wrapping. When items exceed the available horizontal space, they automatically wrap to a new line.
For details on how to work with \`FlowLayout\` (like sizing children), see [this guide](/layout#flowlayout).
## Using `SpaceFiller` with `FlowLayout` [#using-spacefiller-with-flowlayout]
The `SpaceFiller` component can be used as a line break.
See the [reference docs](/components/SpaceFiller) for details.
## Properties [#properties]
### `columnGap` (default: "$gap-normal") [#columngap-default-gap-normal]
The `columnGap` property specifies the space between items in a single row; it overrides the `gap` value.
The `columnGap` property specifies the space between items in a single row; it overrides the `gap` value.
```xmlui-pg copy display name="Example: columnGap"
---app copy display
<App>
<FlowLayout columnGap="$space-8">
<Stack width="25%" height="32px" backgroundColor="red" />
<Stack width="25%" height="32px" backgroundColor="blue" />
<Stack width="25%" height="32px" backgroundColor="green" />
<Stack width="25%" height="32px" backgroundColor="yellow" />
<Stack width="25%" height="32px" backgroundColor="maroon" />
<Stack width="25%" height="32px" backgroundColor="teal" />
<Stack width="25%" height="32px" backgroundColor="seagreen" />
<Stack width="25%" height="32px" backgroundColor="olive" />
</FlowLayout>
</App>
---desc
You can observe no gap between the rows of the `FlowLayout`, as `columnGap` keeps the space between rows intact:
```
### `gap` (default: "$gap-normal") [#gap-default-gap-normal]
This property defines the gap between items in the same row and between rows. The FlowLayout component creates a new row when an item is about to overflow the current row.
The `gap` property defines the gap between items in the same row and between rows. The `FlowLayout` component creates a new row when an item is about to overflow the current row.
```xmlui-pg copy display name="Example: gap"
---app copy display
<App>
<FlowLayout gap="$space-12">
<Stack width="25%" height="32px" backgroundColor="red" />
<Stack width="25%" height="32px" backgroundColor="blue" />
<Stack width="25%" height="32px" backgroundColor="green" />
<Stack width="25%" height="32px" backgroundColor="yellow" />
<Stack width="25%" height="32px" backgroundColor="maroon" />
<Stack width="25%" height="32px" backgroundColor="teal" />
<Stack width="25%" height="32px" backgroundColor="seagreen" />
<Stack width="25%" height="32px" backgroundColor="olive" />
</FlowLayout>
</App>
---desc
In this markup, only four items fit in a single row.
The `gap` property sets the same gaps within and between rows.
```
This markup demonstrates different `gap` values:
```xmlui-pg copy display name="Example: different size units"
---app copy display
<App>
<FlowLayout>
<Stack width="25%" height="32px" backgroundColor="red" />
<Stack width="25%" height="32px" backgroundColor="blue" />
<Stack width="25%" height="32px" backgroundColor="green" />
<Stack width="25%" height="32px" backgroundColor="yellow" />
</FlowLayout>
<FlowLayout gap="10px">
<Stack width="25%" height="32px" backgroundColor="red" />
<Stack width="25%" height="32px" backgroundColor="blue" />
<Stack width="25%" height="32px" backgroundColor="green" />
<Stack width="25%" height="32px" backgroundColor="yellow" />
</FlowLayout>
<FlowLayout gap="1rem">
<Stack width="25%" height="32px" backgroundColor="red" />
<Stack width="25%" height="32px" backgroundColor="blue" />
<Stack width="25%" height="32px" backgroundColor="green" />
<Stack width="25%" height="32px" backgroundColor="yellow" />
</FlowLayout>
<FlowLayout gap="4ch">
<Stack width="25%" height="32px" backgroundColor="red" />
<Stack width="25%" height="32px" backgroundColor="blue" />
<Stack width="25%" height="32px" backgroundColor="green" />
<Stack width="25%" height="32px" backgroundColor="yellow" />
</FlowLayout>
</App>
---desc
All items within a `FlowLayout` instance fit in a single row, so `gap` affects only the space between items. The space between rows comes from the outermost `Stack`.
```
### `rowGap` (default: "$gap-normal") [#rowgap-default-gap-normal]
The `rowGap` property specifies the space between the FlowLayout rows; it overrides the `gap` value.
The `rowGap` property specifies the space between the `FlowLayout` rows; it overrides the `gap` value.
```xmlui-pg copy display name="Example: rowGap"
---app copy display
<App>
<FlowLayout rowGap="2px">
<Stack width="25%" height="32px" backgroundColor="red" />
<Stack width="25%" height="32px" backgroundColor="blue" />
<Stack width="25%" height="32px" backgroundColor="green" />
<Stack width="25%" height="32px" backgroundColor="yellow" />
<Stack width="25%" height="32px" backgroundColor="maroon" />
<Stack width="25%" height="32px" backgroundColor="teal" />
<Stack width="25%" height="32px" backgroundColor="seagreen" />
<Stack width="25%" height="32px" backgroundColor="olive" />
</FlowLayout>
</App>
---desc
You can observe no gap between the items in a single row of the `FlowLayout`, as `rowGap` keeps the gap within a row intact:
```
## Events [#events]
This component does not have any events.
## Exposed Methods [#exposed-methods]
This component does not expose any methods.
## Styling [#styling]
This component does not have any styles.
```
--------------------------------------------------------------------------------
/docs/content/components/MenuItem.md:
--------------------------------------------------------------------------------
```markdown
# MenuItem [#menuitem]
`MenuItem` represents individual clickable items within dropdown menus and other menu components. Each menu item can display text, icons, and respond to clicks with either navigation or custom actions, making it the building block for interactive menu systems.
**Key features:**
- **Action handling**: Support both navigation (`to` property) and custom click handlers
- **Visual feedback**: Built-in active, hover, and disabled states for clear user interaction
- **Icon support**: Optional icons with flexible positioning (start or end)
- **Menu integration**: Designed to work seamlessly within `DropdownMenu` and `SubMenuItem` hierarchies
**Usage pattern:**
Always used within menu containers like `DropdownMenu`. Use `to` for navigation or `onClick` for custom actions. For complex menu structures, combine with `MenuSeparator` and `SubMenuItem` components.
## Properties [#properties]
### `active` (default: false) [#active-default-false]
This property indicates if the specified menu item is active.
```xmlui-pg copy display name="Example: active" height="200px"
<App>
<DropdownMenu label="DropdownMenu">
<MenuItem icon="drive" active="true">Item 1</MenuItem>
<MenuItem icon="trash">Item 2</MenuItem>
<MenuItem icon="email">Item 3</MenuItem>
</DropdownMenu>
</App>
```
### `enabled` (default: true) [#enabled-default-true]
This boolean property value indicates whether the component responds to user events (`true`) or not (`false`).
### `icon` [#icon]
This property names an optional icon to display with the menu item. You can use component-specific icons in the format "iconName:MenuItem".
```xmlui-pg copy display name="Example: icon" height="200px"
<App>
<DropdownMenu label="DropdownMenu">
<MenuItem icon="drive">Item 1</MenuItem>
<MenuItem icon="trash">Item 2</MenuItem>
<MenuItem icon="email">Item 3</MenuItem>
</DropdownMenu>
</App>
```
### `iconPosition` (default: "start") [#iconposition-default-start]
This property allows you to determine the position of the icon displayed in the menu item.
Available values:
| Value | Description |
| --- | --- |
| `start` | The icon will appear at the start (left side when the left-to-right direction is set) **(default)** |
| `end` | The icon will appear at the end (right side when the left-to-right direction is set) |
```xmlui-pg copy display name="Example: iconPosition" height="200px"
<App>
<DropdownMenu label="DropdownMenu">
<MenuItem icon="drive" iconPosition="start">Item 1</MenuItem>
<MenuItem icon="trash" iconPosition="end">Item 2</MenuItem>
<MenuItem icon="email">Item 3</MenuItem>
</DropdownMenu>
</App>
```
### `label` [#label]
This property sets the label of the component. If not set, the component will not display a label.
### `to` [#to]
This property defines the URL of the menu item. If this property is defined (and the `click` event does not have an event handler), clicking the menu item navigates to this link.
## Events [#events]
### `click` [#click]
This event is triggered when the MenuItem is clicked.
This event is fired when the user clicks the menu item. With an event handler, you can define how to respond to the user's click. If this event does not have an associated event handler but the `to` property has a value, clicking the component navigates the URL set in `to`.
If both properties are defined, `click` takes precedence.
```xmlui-pg copy display name="Example: click" height="200px"
<DropdownMenu label="DropdownMenu">
<MenuItem onClick="toast('Item 1 clicked')">Item 1</MenuItem>
<MenuItem onClick="toast('Item 2 clicked')">Item 2</MenuItem>
<MenuItem onClick="toast('Item 3 clicked')">Item 3</MenuItem>
</DropdownMenu>
```
## 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)-MenuItem | $backgroundColor-dropdown-item | $backgroundColor-dropdown-item |
| [backgroundColor](../styles-and-themes/common-units/#color)-MenuItem--active | $backgroundColor-dropdown-item--active | $backgroundColor-dropdown-item--active |
| [backgroundColor](../styles-and-themes/common-units/#color)-MenuItem--active--hover | *none* | *none* |
| [backgroundColor](../styles-and-themes/common-units/#color)-MenuItem--hover | $backgroundColor-dropdown-item--hover | $backgroundColor-dropdown-item--hover |
| [color](../styles-and-themes/common-units/#color)-MenuItem | $textColor-primary | $textColor-primary |
| [color](../styles-and-themes/common-units/#color)-MenuItem--active | $color-primary | $color-primary |
| [color](../styles-and-themes/common-units/#color)-MenuItem--active--hover | *none* | *none* |
| [color](../styles-and-themes/common-units/#color)-MenuItem--disabled | $textColor--disabled | $textColor--disabled |
| [color](../styles-and-themes/common-units/#color)-MenuItem--hover | inherit | inherit |
| [fontFamily](../styles-and-themes/common-units/#fontFamily)-MenuItem | $fontFamily | $fontFamily |
| [fontSize](../styles-and-themes/common-units/#size)-MenuItem | $fontSize-sm | $fontSize-sm |
| [gap](../styles-and-themes/common-units/#size)-MenuItem | $space-2 | $space-2 |
| [paddingHorizontal](../styles-and-themes/common-units/#size)-MenuItem | $space-3 | $space-3 |
| [paddingVertical](../styles-and-themes/common-units/#size)-MenuItem | $space-2 | $space-2 |
```
--------------------------------------------------------------------------------
/xmlui/dev-docs/next/logging-consistency-implementation-summary.md:
--------------------------------------------------------------------------------
```markdown
# Logging Consistency Implementation Summary
## Overview
Successfully implemented logging consistency across the XMLUI documentation generation scripts to provide standardized logging patterns, better debugging capabilities, and consistent message formatting.
## Changes Made
### 1. Created Standardized Logging Infrastructure
#### `logging-standards.mjs` - New Centralized Logging Module
- **Logging Patterns**: Predefined message templates for common operations
- **Standard Logger**: Wrapper functions for consistent logging calls
- **Scoped Logger**: Context-aware logging with module/operation prefixes
- **Log Levels**: Standardized severity levels (INFO, WARN, ERROR)
#### Enhanced `logger.mjs`
- Added `warn()` method as alias for `warning()` to support both naming conventions
- Maintains backward compatibility while providing flexibility
### 2. Key Features of the New Logging System
#### Predefined Message Patterns
```javascript
LOGGING_PATTERNS = {
OPERATION_START: (operation) => `Starting ${operation}...`,
OPERATION_COMPLETE: (operation) => `Completed ${operation}`,
FILE_PROCESSING: (filePath) => `Processing file: ${filePath}`,
COMPONENT_PROCESSING: (componentName) => `Processing component: ${componentName}`,
// ... and many more standardized patterns
}
```
#### Scoped Logging
```javascript
const logger = createScopedLogger("ThemeGenerator");
logger.operationStart("theme file generation");
// Output: [ThemeGenerator] Starting theme file generation...
```
#### Consistent Method Names
- `logger.info()` - Informational messages
- `logger.warn()` - Warning messages (standardized from `warning()`)
- `logger.error()` - Error messages
### 3. Updated Scripts with Consistent Logging
#### `create-theme-files.mjs`
- **Before**: Mixed console.log and basic logger calls
- **After**:
- Uses scoped logger: `createScopedLogger("ThemeGenerator")`
- Standardized operation tracking: `operationStart()`, `operationComplete()`
- Consistent component processing: `componentProcessing()`
- Standardized file operations: `fileWritten()`
#### `get-docs.mjs`
- **Before**: Mixed logger.info/warning calls
- **After**:
- Multiple scoped loggers for different operations
- `createScopedLogger("DocsGenerator")` for main operations
- `createScopedLogger("FolderCleaner")` for cleanup operations
- `createScopedLogger("PackageLoader")` for package operations
- Standardized package operations: `packageLoaded()`, `packageSkipped()`
#### `build-pages-map.mjs`
- **Before**: Used `logger.warning()` directly
- **After**:
- Uses scoped logger: `createScopedLogger("PagesMapBuilder")`
- Standardized operation tracking
- Consistent warning messages with `warn()`
#### `build-downloads-map.mjs`
- **Before**: Used `logger.warning()` directly
- **After**:
- Uses scoped logger: `createScopedLogger("DownloadsMapBuilder")`
- Standardized operation tracking
- Consistent warning messages with `warn()`
### 4. Logging Consistency Benefits
#### Standardized Message Formats
- All operation messages follow consistent patterns
- Scoped messages provide clear context about which module is logging
- Predictable message structure for easier parsing and monitoring
#### Better Debugging
- Clear operation boundaries with start/complete logging
- Context-aware messages help identify the source of issues
- Consistent formatting makes logs easier to read and filter
#### Maintainability
- Centralized logging patterns reduce code duplication
- Easy to modify message formats across all scripts
- Standard operations (file processing, component handling) use shared patterns
#### Flexibility
- Supports both `warn()` and `warning()` methods for backward compatibility
- Scoped loggers can be easily created for new modules
- Extensible pattern system for new operation types
## Before/After Examples
### Before (Inconsistent)
```javascript
console.log(`Processing component: ${key}`);
logger.info(LOG_MESSAGES.GENERATING_EXTENSION_DOCS);
logger.warning(`Duplicate entries found...`);
```
### After (Consistent)
```javascript
const logger = createScopedLogger("ThemeGenerator");
logger.componentProcessing(key);
logger.operationStart("extension documentation generation");
logger.warn(`Duplicate entries found...`);
```
## Files Modified
- ✅ `scripts/generate-docs/logging-standards.mjs` (new)
- ✅ `scripts/generate-docs/logger.mjs` (enhanced with warn() alias)
- ✅ `scripts/generate-docs/create-theme-files.mjs` (standardized)
- ✅ `scripts/generate-docs/get-docs.mjs` (standardized)
- ✅ `scripts/generate-docs/build-pages-map.mjs` (standardized)
- ✅ `scripts/generate-docs/build-downloads-map.mjs` (standardized)
## Standards Established
### 1. **Scoped Logging**: All modules use scoped loggers for context
### 2. **Operation Tracking**: Start/complete logging for major operations
### 3. **Consistent Method Names**: Standardized on `info()`, `warn()`, `error()`
### 4. **Message Patterns**: Predefined templates for common operations
### 5. **Context Awareness**: Module names in log messages for easy identification
## Next Steps
This logging standardization provides:
- A solid foundation for adding structured logging and monitoring
- Consistent patterns that can be extended to other scripts
- Better debugging capabilities for development and production
- Framework for adding log levels, filtering, and external logging systems
The logging system is now professional-grade, consistent, and maintainable across the entire documentation generation pipeline.
```
--------------------------------------------------------------------------------
/docs/scripts/generate-rss.js:
--------------------------------------------------------------------------------
```javascript
const fs = require('fs');
const path = require('path');
// Extract blog posts data from Main.xmlui's var.posts definition
function extractBlogPosts() {
const mainXmluiPath = path.join(__dirname, '../src/Main.xmlui');
const content = fs.readFileSync(mainXmluiPath, 'utf8');
try {
// Find the var.posts definition - extract content between backticks
const postsMatch = content.match(/var\.posts\s*=\s*`\{\{([^`]*)\}\}`/s);
if (!postsMatch) {
console.warn('No var.posts found in Main.xmlui');
return [];
}
const postsContent = postsMatch[1].trim();
const blogPosts = [];
// Parse each post entry (p1: {...}, p2: {...}, etc.)
const postMatches = postsContent.match(/(\w+):\s*\{([^}]*)\}/g);
if (postMatches) {
postMatches.forEach(postMatch => {
const [, postKey] = postMatch.match(/(\w+):/);
// Extract properties from the post object
const titleMatch = postMatch.match(/title:\s*"([^"]*)"/);
const slugMatch = postMatch.match(/slug:\s*"([^"]*)"/);
const authorMatch = postMatch.match(/author:\s*"([^"]*)"/);
const dateMatch = postMatch.match(/date:\s*"([^"]*)"/);
if (titleMatch && slugMatch && authorMatch && dateMatch) {
blogPosts.push({
key: postKey,
title: titleMatch[1],
slug: slugMatch[1],
author: authorMatch[1],
date: dateMatch[1]
});
}
});
}
return blogPosts;
} catch (error) {
console.error('Error extracting blog posts:', error.message);
return [];
}
}
// Read blog post content and extract description
function getPostDescription(slug) {
try {
const postPath = path.join(__dirname, '../public/blog', `${slug}.md`);
const content = fs.readFileSync(postPath, 'utf8');
// Strip markdown formatting for description
let plainText = content
.replace(/^#+\s+/gm, '') // Remove headers
.replace(/\*\*(.*?)\*\*/g, '$1') // Remove bold
.replace(/\*(.*?)\*/g, '$1') // Remove italic
.replace(/\[([^\]]*)\]\([^)]*\)/g, '$1') // Remove links, keep text
.replace(/!\[([^\]]*)\]\([^)]*\)/g, '') // Remove images
.replace(/`([^`]*)`/g, '$1') // Remove inline code
.replace(/```[\s\S]*?```/g, '') // Remove code blocks
.replace(/\n+/g, ' ') // Replace newlines with spaces
.replace(/\s+/g, ' ') // Normalize whitespace
.trim();
// Take first 250 characters for description
if (plainText.length > 250) {
return plainText.substring(0, 250).trim() + '...';
}
return plainText;
} catch (error) {
console.warn(`Warning: Could not read post content for ${slug}:`, error.message);
return 'Blog post content not available.';
}
}
// Convert date string to RFC 822 format for RSS
function formatDate(dateStr) {
const date = new Date(dateStr);
return date.toUTCString();
}
// Generate RSS XML
function generateRSS(blogPosts) {
const now = new Date().toUTCString();
let rss = `<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
<channel>
<title>XMLUI Blog</title>
<link>https://docs.xmlui.org</link>
<description>Latest updates, tutorials, and insights for XMLUI - the declarative UI framework. Stay informed about new features, best practices, and community highlights.</description>
<language>en</language>
<lastBuildDate>${now}</lastBuildDate>
`;
// Sort posts by date (newest first)
blogPosts.sort((a, b) => new Date(b.date) - new Date(a.date));
blogPosts.forEach(post => {
const pubDate = formatDate(post.date);
const postUrl = `https://docs.xmlui.org/${post.slug}`;
const description = getPostDescription(post.slug);
rss += `
<item>
<title>${escapeXml(post.title)}</title>
<link>${postUrl}</link>
<description>${escapeXml(description)}</description>
<pubDate>${pubDate}</pubDate>
<author>[email protected] (${escapeXml(post.author)})</author>
<guid>${postUrl}</guid>
</item>`;
});
rss += `
</channel>
</rss>`;
return rss;
}
// Escape XML special characters
function escapeXml(text) {
if (typeof text !== 'string') {
text = String(text);
}
return text
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
}
// Main execution
function main() {
try {
console.log('Generating RSS feed...');
const blogPosts = extractBlogPosts();
console.log(`Found ${blogPosts.length} blog post(s)`);
if (blogPosts.length === 0) {
console.warn('No blog posts found, creating empty RSS feed');
} else {
blogPosts.forEach(post => {
console.log(` - "${post.title}" by ${post.author} (${post.date})`);
});
}
const rssContent = generateRSS(blogPosts);
const outputPath = path.join(__dirname, '../public/feed.rss');
// Ensure the public directory exists
const publicDir = path.dirname(outputPath);
if (!fs.existsSync(publicDir)) {
fs.mkdirSync(publicDir, { recursive: true });
}
fs.writeFileSync(outputPath, rssContent);
console.log(`RSS feed generated successfully: ${outputPath}`);
console.log(`Feed will be available at: https://docs.xmlui.org/feed.rss`);
} catch (error) {
console.error('Error generating RSS feed:', error);
process.exit(1);
}
}
// Run if called directly
if (require.main === module) {
main();
}
module.exports = { extractBlogPosts, generateRSS, getPostDescription };
```
--------------------------------------------------------------------------------
/xmlui/src/components/Form/FormContext.ts:
--------------------------------------------------------------------------------
```typescript
import type { Dispatch } from "react";
import { createContext, useContext, useContextSelector } from "use-context-selector";
import type { ContainerAction } from "../../components-core/rendering/containers";
import type { FormAction } from "../Form/formActions";
import type { LabelPosition } from "../abstractions";
import type { PropertyValueDescription } from "../../abstractions/ComponentDefs";
export type InteractionFlags = {
isDirty: boolean;
invalidToValid: boolean;
isValidOnFocus: boolean;
isValidLostFocus: boolean;
focused: boolean;
afterFirstDirtyBlur: boolean;
forceShowValidationResult: boolean;
};
interface IFormContext {
subject: Record<string, any>;
originalSubject: Record<string, any>;
validationResults: Record<string, ValidationResult>;
interactionFlags: Record<string, InteractionFlags>;
dispatch: Dispatch<ContainerAction | FormAction>;
enabled?: boolean;
itemLabelWidth?: string;
itemLabelBreak?: boolean;
itemLabelPosition?: string | LabelPosition;
}
export type ValidationResult = {
isValid: boolean;
validations: Array<SingleValidationResult>;
validatedValue: any;
partial: boolean;
};
export type SingleValidationResult = {
isValid: boolean;
severity: ValidationSeverity;
invalidMessage?: string;
validMessage?: string;
async?: boolean;
stale?: boolean;
fromBackend?: boolean;
};
export interface FormItemValidations {
required: boolean | undefined;
requiredInvalidMessage: string | undefined;
minLength: number | undefined;
maxLength: number | undefined;
lengthInvalidMessage: string | undefined;
lengthInvalidSeverity: ValidationSeverity | undefined;
minValue: number | undefined;
maxValue: number | undefined;
rangeInvalidMessage: string | undefined;
rangeInvalidSeverity: ValidationSeverity | undefined;
pattern: string | undefined;
patternInvalidMessage: string | undefined;
patternInvalidSeverity: ValidationSeverity | undefined;
regex: string | undefined;
regexInvalidMessage: string | undefined;
regexInvalidSeverity: ValidationSeverity | undefined;
}
export const validationSeverityValues = ["error", "warning", "valid", "none"] as const;
export type ValidationSeverity = (typeof validationSeverityValues)[number];
export const validationSeverityMd: PropertyValueDescription[] = [
{ value: "valid", description: "Visual indicator for an input that is accepted" },
{ value: "warning", description: "Visual indicator for an input that produced a warning" },
{ value: "error", description: "Visual indicator for an input that produced an error" },
];
export type ValidateEventHandler = ((value: any) => Promise<ValidateFunctionResult>) | undefined;
type ValidateFunctionResult = boolean | SingleValidationResult | Array<SingleValidationResult>;
export const validationModeValues = ["errorLate", "onChanged", "onLostFocus"] as const;
export type ValidationMode = (typeof validationModeValues)[number];
export const defaultValidationMode = "errorLate";
export const validationModeMd: PropertyValueDescription[] = [
{
value: "errorLate",
description:
"Display the error when the field loses focus." +
"If an error is already displayed, continue for every keystroke until input is accepted.",
},
{
value: "onChanged",
description: "Display error (if present) for every keystroke.",
},
{
value: "onLostFocus",
description: "Show/hide error (if present) only if the field loses focus.",
},
];
export const FormContext = createContext<IFormContext>(undefined as unknown as IFormContext);
export function useFormContextPart<T = unknown>(selector: (value?: IFormContext) => T) {
return useContextSelector(FormContext, selector);
}
export function useIsInsideForm(){
const contextPart = useFormContextPart((value) => value?.dispatch);
return contextPart !== undefined;
}
export const formControlTypes = [
"text",
"password",
"textarea",
"checkbox",
"number",
"integer",
"number2",
"integer2",
"file",
"select",
"autocomplete",
"datePicker",
"radioGroup",
"custom",
"switch",
"slider",
"colorpicker",
"items",
] as const;
export const formControlTypesMd: PropertyValueDescription[] = [
{
value: "text",
description: "Renders TextBox",
},
{
value: "password",
description: "Renders TextBox with `password` type",
},
{
value: "textarea",
description: "Renders Textarea",
},
{
value: "checkbox",
description: "Renders Checkbox",
},
{
value: "number",
description: "Renders NumberBox",
},
{
value: "integer",
description: "Renders NumberBox with `integersOnly` set to true",
},
{
value: "file",
description: "Renders FileInput",
},
{
value: "datePicker",
description: "Renders DatePicker",
},
{
value: "radioGroup",
description: "Renders RadioGroup",
},
{
value: "switch",
description: "Renders Switch",
},
{
value: "select",
description: "Renders Select",
},
{
value: "autocomplete",
description: "Renders AutoComplete",
},
{
value: "slider",
description: "Renders Slider",
},
{
value: "colorpicker",
description: "Renders ColorPicker",
},
{
value: "items",
description: "Renders Items",
},
{
value: "custom",
description:
"A custom control specified in children. If `type` is not specified " +
"but the `FormItem` has children, it considers the control a custom one.",
},
];
export type FormControlType = (typeof formControlTypes)[number];
```
--------------------------------------------------------------------------------
/docs/public/pages/components-intro.md:
--------------------------------------------------------------------------------
```markdown
# Components
We've already seen a number of XMLUI components in action: [DataSource](/components/DataSource),
[Items](/components/Items),
[List](/components/List),
[Markdown](/components/Markdown),
[Select](/components/Select),
[Option](/components/Option),
[Table](/components/Table).
## Built-in components
As an XMLUI developer you'll create user interfaces by combining these with others in the [core library](/components/_overview), drawing from these categories:
**Data**: [AppState](/components/AppState),
[DataSource](/components/DataSource),
[APICall](/components/APICall) ...
**Display**: [Avatar](/components/Avatar),
[Card](/components/Card), [Heading](/components/Heading), [Image](/components/Image),
[Icon](/components/Icon),
[Markdown](/components/Markdown),
[Text](/components/Text),
[Table](/components/Table) ...
**Input**: [Checkbox](/components/Checkbox),
[DatePicker](/components/DatePicker), [Form](/components/Form),
[FormItem](/components/FormItem),
[FileInput](/components/FileInput),
[NumberBox](/components/NumberBox),
[Select](/components/Select),
[TextArea](/components/TextArea),
[TextBox](/components/TextBox) ...
**Layout**: [FlowLayout](/components/FlowLayout), [HStack](/components/HStack), [VStack](/components/VStack) ...
**Navigation**: [DropdownMenu](/components/DropdownMenu),
[MenuItem](/components/MenuItem),
[NavLink](/components/NavLink),
[NavPanel](/components/NavPanel),
[Tabs](/components/Tabs),
[TabItem](/components/TabItem) ...
## Custom components
You'll also create your own components to combine and extend the built-ins. For example, here's a component that represents the stops on a London tube line.
```xmlui-pg
---app display /line/
<App>
<TubeStops line="Bakerloo"/>
</App>
---comp display /line/
<Component name="TubeStops">
<DataSource
id="stops"
when="{$props.line}"
url="https://api.tfl.gov.uk/Line/{$props.line}/StopPoints"
transformResult="{window.transformStops}"
/>
<Text variant="strong">{$props.line}</Text>
<Table data="{stops}">
<Column width="3*" bindTo="name" />
<Column bindTo="zone" />
<Column bindTo="wifi" >
<Fragment when="{$item.wifi === 'yes'}">
<Icon name="checkmark"/>
</Fragment>
</Column>
<Column bindTo="toilets" >
<Fragment when="{$item.toilets === 'yes'}">
<Icon name="checkmark"/>
</Fragment>
</Column>
</Table>
</Component>
```
```javascript
window.transformStops = function(stops) {
return stops.map(function(stop) {
// Helper to extract a value from additionalProperties by key
function getProp(key) {
if (!stop.additionalProperties) return '';
var propObj = stop.additionalProperties.find(function(p) {
return p.key === key;
});
return propObj ? propObj.value : '';
}
return {
name: stop.commonName,
zone: getProp('Zone'),
wifi: getProp('WiFi'),
toilets: getProp('Toilets'),
// A comma-separated list of line names that serve this stop
lines: stop.lines
? stop.lines.map(function(line) { return line.name; }).join(', ')
: ''
};
});
}
```
An instance of `TubeStops` extracts details for a given tube line. Multiple instances can be arranged on the display using layout components. For example, here's a two-column layout.
```xmlui-pg display
---app display
<App>
<FlowLayout>
<Stack width="*">
<TubeStops line="victoria"/>
</Stack>
<Stack width="*">
<TubeStops line="waterloo-city"/>
</Stack>
</FlowLayout>
</App>
---comp
<Component name="TubeStops">
<DataSource
id="stops"
when="{$props.line}"
url="https://api.tfl.gov.uk/Line/{$props.line}/StopPoints"
transformResult="{window.transformStops}"
/>
<Text variant="strong">{$props.line}</Text>
<Table data="{stops}">
<Column width="3*" bindTo="name" />
<Column bindTo="zone" />
<Column bindTo="wifi" >
<Fragment when="{$item.wifi === 'yes'}">
<Icon name="checkmark"/>
</Fragment>
</Column>
<Column bindTo="toilets" >
<Fragment when="{$item.toilets === 'yes'}">
<Icon name="checkmark"/>
</Fragment>
</Column>
</Table>
</Component>
```
The `TubeStops` component:
- **Lives in the `components` folder**. The full path is `components/TubeStops.xmlui`.
- **Can handle any properties passed in the `$props` [context variable](/context-variables)**. A calling component can send one or more `name="value"` pairs like `line="Bakerloo"`.
- **Defines a dynamic data source**. When this page embeds `<TubeStops line="Bakerloo"/>`, the `TubeStops` component receives a `line` property used to form the URL that fetches data.
- **Transforms data**. When API responses are complex, the expressions needed to unpack them can clutter your XMLUI markup. In this case the component offloads that work to the `transformStops` function so it can work with a simplified structure.
- **Enriches data**. The transformed data has `yes`/`no` values for `wifi` and `toilets`. `TubeStops` uses [Fragment](/components/Fragment) to display an [Icon](/components/Icon) only for `yes` values.
When you use custom components to access, transform, and present data, your XMLUI markup stays clean, readable, and easy to read and maintain.
Another way to keep your markup clean: rely on XMLUI's layout and style engine to make your app look good and behave gracefully by default. You can adjust the (many!) settings that define an XMLUI [Theme](/components/Theme), but you'll rarely need to. The next chapter explains why.
```
--------------------------------------------------------------------------------
/xmlui/src/components/AppHeader/AppHeaderNative.tsx:
--------------------------------------------------------------------------------
```typescript
import type { ReactNode} from "react";
import { useLayoutEffect, useRef } from "react";
import classnames from "classnames";
import styles from "./AppHeader.module.scss";
import type { RenderChildFn } from "../../abstractions/RendererDefs";
import { useResourceUrl, useTheme } from "../../components-core/theming/ThemeContext";
import { EMPTY_OBJECT } from "../../components-core/constants";
import { useAppContext } from "../../components-core/AppContext";
import { Icon } from "../../components/Icon/IconNative";
import { Logo } from "../../components/Logo/LogoNative";
import { useAppLayoutContext } from "../../components/App/AppLayoutContext";
import { Button } from "../../components/Button/ButtonNative";
import { NavLink } from "../../components/NavLink/NavLinkNative";
import { useIsomorphicLayoutEffect } from "../../components-core/utils/hooks";
type Props = {
children?: ReactNode;
profileMenu?: ReactNode;
style?: React.CSSProperties;
logoContent?: ReactNode;
canRestrictContentWidth?: boolean;
className?: string;
title?: string;
navPanelVisible?: boolean;
showLogo?: boolean;
toggleDrawer?: () => void;
hasRegisteredNavPanel?: boolean;
titleContent?: ReactNode;
registerSubNavPanelSlot?: (node: HTMLElement) => void;
renderChild?: RenderChildFn;
};
export const defaultProps: Pick<Props, "showLogo"> = {
showLogo: true,
};
export function useLogoUrl() {
const { logo, logoLight, logoDark } = useAppLayoutContext() || {};
const logoUrlByTone = {
light: logoLight,
dark: logoDark,
};
const { activeThemeTone } = useTheme();
const baseLogoUrl = useResourceUrl("resource:logo") || logo;
const toneLogoUrl =
useResourceUrl(`resource:logo-${activeThemeTone}`) || logoUrlByTone[activeThemeTone];
return toneLogoUrl || baseLogoUrl;
}
export const AppHeader = ({
children,
profileMenu,
style = EMPTY_OBJECT,
logoContent,
className,
canRestrictContentWidth,
navPanelVisible = true,
toggleDrawer,
showLogo = defaultProps.showLogo,
hasRegisteredNavPanel,
title,
titleContent,
registerSubNavPanelSlot,
...rest
}: Props) => {
const { mediaSize } = useAppContext();
const logoUrl = useLogoUrl();
const subNavPanelSlot = useRef(null);
const safeLogoTitle =
mediaSize.sizeIndex < 2 ? null : !titleContent && title ? (
<NavLink to={"/"} displayActive={false} style={{ paddingLeft: 0 }}>
{title}
</NavLink>
) : (
titleContent
);
useIsomorphicLayoutEffect(() => {
registerSubNavPanelSlot?.(subNavPanelSlot.current);
}, []);
return (
<div {...rest} className={classnames(styles.header, className)} style={style} role="banner">
<div
className={classnames(styles.headerInner, {
[styles.full]: !canRestrictContentWidth,
})}
>
{hasRegisteredNavPanel && (
<Button
onClick={toggleDrawer}
icon={<Icon name={"hamburger"} />}
variant={"ghost"}
className={styles.drawerToggle}
style={{ color: "inherit", flexShrink: 0 }}
/>
)}
<div className={styles.logoAndTitle}>
{(showLogo || !navPanelVisible) &&
(logoContent ? (
<>
<div className={styles.customLogoContainer}>{logoContent}</div>
{safeLogoTitle}
</>
) : (
<>
{!!logoUrl && (
<div className={styles.logoContainer}>
<NavLink to={"/"} displayActive={false} className={styles.logoLink}>
<Logo />
</NavLink>
</div>
)}
{safeLogoTitle}
</>
))}
</div>
<div ref={subNavPanelSlot} className={styles.subNavPanelSlot} />
<div className={styles.childrenWrapper}>{children}</div>
{profileMenu && <div className={styles.rightItems}>{profileMenu}</div>}
</div>
</div>
);
};
type AppContextAwareAppHeaderProps = {
children?: ReactNode;
profileMenu?: ReactNode;
style?: React.CSSProperties;
logoContent?: ReactNode;
className?: string;
title?: string;
titleContent?: ReactNode;
showLogo?: boolean;
renderChild: RenderChildFn;
};
export function AppContextAwareAppHeader({
children,
logoContent,
profileMenu,
style,
className,
title,
titleContent,
showLogo = true,
renderChild,
}: AppContextAwareAppHeaderProps) {
const appLayoutContext = useAppLayoutContext();
const {
navPanelVisible,
toggleDrawer,
layout,
hasRegisteredNavPanel,
navPanelDef,
logoContentDef,
registerSubNavPanelSlot,
} = appLayoutContext || {};
// console.log("APP LAYOUT CONTEXT", appLayoutContext);
const displayLogo = layout !== "vertical" && layout !== "vertical-sticky" && showLogo;
const canRestrictContentWidth = layout !== "vertical-full-header";
return (
<AppHeader
hasRegisteredNavPanel={hasRegisteredNavPanel}
navPanelVisible={navPanelVisible}
toggleDrawer={toggleDrawer}
canRestrictContentWidth={canRestrictContentWidth}
showLogo={displayLogo}
logoContent={logoContent || renderChild(logoContentDef)}
profileMenu={profileMenu}
style={style}
className={className}
title={title}
titleContent={titleContent}
registerSubNavPanelSlot={registerSubNavPanelSlot}
>
{layout?.startsWith("condensed") && navPanelVisible && (
<div style={{ minWidth: 0 }}>{renderChild(navPanelDef)}</div>
)}
{children}
</AppHeader>
);
}
```
--------------------------------------------------------------------------------
/xmlui/src/components/Charts/AreaChart/AreaChartNative.tsx:
--------------------------------------------------------------------------------
```typescript
import {
AreaChart as RAreaChart,
Area,
CartesianGrid,
XAxis,
YAxis,
ResponsiveContainer,
Tooltip,
Legend as RLegend,
} from "recharts";
import type { ReactNode} from "react";
import { useEffect, useRef, useState, useCallback } from "react";
import { useMemo } from "react";
import ChartProvider, { useChartContextValue } from "../utils/ChartProvider";
import { TooltipContent } from "../Tooltip/TooltipContent";
import { useTheme } from "../../../components-core/theming/ThemeContext";
export type AreaChartProps = {
data: any[];
nameKey: string;
dataKeys?: string[];
className?: string;
hideTickX?: boolean;
hideTickY?: boolean;
hideX?: boolean;
hideY?: boolean;
hideTooltip?: boolean;
tickFormatterX?: (value: any) => any;
tickFormatterY?: (value: any) => any;
children?: ReactNode;
showLegend?: boolean;
stacked?: boolean;
curved?: boolean;
tooltipRenderer?: (tooltipData: any) => ReactNode;
};
export const defaultProps: Pick<
AreaChartProps,
| "hideTickX"
| "hideTickY"
| "hideX"
| "hideY"
| "hideTooltip"
| "tickFormatterX"
| "tickFormatterY"
| "showLegend"
| "stacked"
| "curved"
> = {
hideTickX: false,
hideTickY: false,
hideX: false,
hideY: false,
hideTooltip: false,
tickFormatterX: (value) => value,
tickFormatterY: (value) => value,
showLegend: false,
stacked: false,
curved: false,
};
export function AreaChart({
data = [],
nameKey,
dataKeys = [],
hideTickX = defaultProps.hideTickX,
hideTickY = defaultProps.hideTickY,
hideY = defaultProps.hideY,
hideX = defaultProps.hideX,
hideTooltip = defaultProps.hideTooltip,
tickFormatterX = defaultProps.tickFormatterX,
tickFormatterY = defaultProps.tickFormatterY,
className,
children,
showLegend = defaultProps.showLegend,
stacked = defaultProps.stacked,
curved = defaultProps.curved,
tooltipRenderer,
}: AreaChartProps) {
// Validate and normalize data
const validData = Array.isArray(data) ? data : [];
const { getThemeVar } = useTheme();
const colorValues = useMemo(() => {
return [
getThemeVar("color-primary-500"),
getThemeVar("color-primary-300"),
getThemeVar("color-success-500"),
getThemeVar("color-success-300"),
getThemeVar("color-warn-500"),
getThemeVar("color-warn-300"),
getThemeVar("color-danger-500"),
getThemeVar("color-danger-300"),
getThemeVar("color-info-500"),
getThemeVar("color-info-300"),
getThemeVar("color-secondary-500"),
getThemeVar("color-secondary-300"),
];
}, [getThemeVar]);
const config = useMemo(() => {
return Object.assign(
{},
...dataKeys.map((key, index) => {
return {
[key]: {
label: key,
color: colorValues[index % colorValues.length],
},
};
}),
);
}, [colorValues, dataKeys]);
const chartContextValue = useChartContextValue({ dataKeys, nameKey });
// Process data and create chart elements based on dataKeys
const chartElements = useMemo(() => {
return dataKeys.map((key, index) => {
const color = colorValues[index % colorValues.length];
return (
<Area
key={key}
dataKey={key}
fill={color}
stroke={color}
fillOpacity={0.6}
strokeWidth={2}
type={curved ? "monotone" : "linear"}
stackId={stacked ? "1" : undefined}
/>
);
});
}, [dataKeys, colorValues, curved, stacked]);
// Handle responsive behavior
const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const updateSize = () => {
if (containerRef.current) {
const { width, height } = containerRef.current.getBoundingClientRect();
setContainerSize({ width, height });
}
};
updateSize();
window.addEventListener("resize", updateSize);
return () => window.removeEventListener("resize", updateSize);
}, []);
// Determine if we're in mini mode (very small container)
const isMiniMode = containerSize.height < 150;
const safeTooltipRenderer = useCallback(
(props: any) => {
if (!tooltipRenderer) return <TooltipContent {...props} />;
const payloadObject: Record<string, any> = {};
if (props.payload && props.payload.length > 0 && props.payload[0].payload) {
Object.assign(payloadObject, props.payload[0].payload);
}
// Extract tooltip data from Recharts props
const tooltipData = {
label: props.label,
payload: payloadObject,
active: props.active,
};
return tooltipRenderer(tooltipData);
},
[tooltipRenderer],
);
return (
<ChartProvider value={chartContextValue}>
<div ref={containerRef} className={className}>
<ResponsiveContainer width="100%" height="100%">
<RAreaChart data={validData}>
{!hideX && (
<XAxis
dataKey={nameKey}
tick={!hideTickX}
tickFormatter={tickFormatterX}
hide={isMiniMode}
/>
)}
{!hideY && <YAxis tick={!hideTickY} tickFormatter={tickFormatterY} hide={isMiniMode} />}
<CartesianGrid strokeDasharray="3 3" />
{!isMiniMode && !hideTooltip && <Tooltip content={safeTooltipRenderer} />}
{showLegend && !isMiniMode && <RLegend />}
{chartElements}
{children}
</RAreaChart>
</ResponsiveContainer>
</div>
</ChartProvider>
);
}
```
--------------------------------------------------------------------------------
/docs/content/components/Stack.md:
--------------------------------------------------------------------------------
```markdown
# Stack [#stack]
`Stack` is the fundamental layout container that organizes child elements in configurable horizontal or vertical arrangements. As the most versatile building block in XMLUI's layout system, it provides comprehensive alignment, spacing, and flow control options that serve as the foundation for all specialized stack variants.
**Key features:**
- **Dynamic orientation**: Switch between horizontal and vertical layouts programmatically
- **Comprehensive alignment**: Precise control over both horizontal and vertical child positioning
- **Flexible spacing**: Configurable gaps between elements with theme-aware sizing
- **Content wrapping**: Automatic wrapping when space constraints require it
- **Order control**: Reverse child element order with the reverse property
- **Foundation for variants**: Powers HStack, VStack, CHStack, and CVStack specialized components
For common scenarios, consider the specialized variants: [HStack](/components/HStack) (horizontal), [VStack](/components/VStack) (vertical), [CHStack](/components/CHStack) (centered horizontal), and [CVStack](/components/CVStack) (centered vertical).
## Properties [#properties]
### `gap` (default: "$gap-normal") [#gap-default-gap-normal]
Optional size value indicating the gap between child elements.
In the following example we use pixels, characters (shorthand `ch`), and the `em` CSS unit size which is a relative size to the font size of the element (See size values).
```xmlui-pg copy {3, 10} display name="Example: gap"
<App>
<Stack orientation="horizontal" backgroundColor="cyan"
gap="80px">
<Stack height="40px" width="40px" backgroundColor="red" />
<Stack height="40px" width="40px" backgroundColor="green" />
<Stack height="40px" width="40px" backgroundColor="blue" />
<Stack height="40px" width="40px" backgroundColor="yellow" />
</Stack>
<Stack orientation="horizontal" backgroundColor="cyan"
gap="12ch">
<Stack height="40px" width="40px" backgroundColor="red" />
<Stack height="40px" width="40px" backgroundColor="green" />
<Stack height="40px" width="40px" backgroundColor="blue" />
<Stack height="40px" width="40px" backgroundColor="yellow" />
</Stack>
</App>
```
### `horizontalAlignment` (default: "start") [#horizontalalignment-default-start]
Manages the horizontal content alignment for each child element in the Stack.
Available values: `start` **(default)**, `center`, `end`
>[!INFO]
> The `start` and `end` values can be affected by i18n if the layout is in a right-to-left writing style.
```xmlui-pg copy {3} display name="Example: horizontalAlignment"
<App>
<Stack width="100%" horizontalAlignment="center" backgroundColor="cyan">
<Stack width="36px" height="36px" backgroundColor="red" />
</Stack>
</App>
```
### `orientation` (default: "vertical") [#orientation-default-vertical]
An optional property that governs the Stack's orientation (whether the Stack lays out its children in a row or a column).
Available values: `horizontal`, `vertical` **(default)**
### `reverse` (default: false) [#reverse-default-false]
Optional boolean property to reverse the order of child elements.
Default is **false**, which indicates a left-to-right layout.
```xmlui-pg copy display name="Example: reverse"
<App>
<Stack backgroundColor="cyan">
<Stack gap="10px" orientation="horizontal">
<Stack height="40px" width="40px" backgroundColor="red" />
<Stack height="40px" width="40px" backgroundColor="green" />
<Stack height="40px" width="40px" backgroundColor="blue" />
</Stack>
<Stack reverse="true" orientation="horizontal">
<Stack height="40px" width="40px" backgroundColor="red" />
<Stack height="40px" width="40px" backgroundColor="green" />
<Stack height="40px" width="40px" backgroundColor="blue" />
</Stack>
</Stack>
</App>
```
### `verticalAlignment` (default: "start") [#verticalalignment-default-start]
Manages the vertical content alignment for each child element in the Stack.
Available values: `start` **(default)**, `center`, `end`
```xmlui-pg copy {2} display name="Example: verticalAlignment"
<App>
<Stack height="100px" verticalAlignment="end" backgroundColor="cyan">
<Stack width="36px" height="36px" backgroundColor="red" />
</Stack>
</App>
```
### `wrapContent` (default: false) [#wrapcontent-default-false]
Optional boolean which wraps the content if set to true and the available space is not big enough. Works only with horizontal orientations.
Optional boolean which wraps the content if set to true and the available space is not big enough. Works in all orientations.
```xmlui-pg copy display name="Example: wrapContent"
<App>
<Stack wrapContent="true" width="140px" orientation="horizontal" backgroundColor="cyan">
<Stack height="40px" width="40px" backgroundColor="blue" />
<Stack height="40px" width="40px" backgroundColor="blue" />
<Stack height="40px" width="40px" backgroundColor="blue" />
<Stack height="40px" width="40px" backgroundColor="blue" />
</Stack>
</App>
```
## Events [#events]
### `click` [#click]
This event is triggered when the Stack is clicked.
Describes the logic that fires when the component is clicked.
```xmlui-pg copy display name="Example: click"
<App>
<HStack var.shown="{false}">
<Stack height="40px" width="40px" backgroundColor="red" onClick="shown = !shown" />
<Stack when="{shown}" height="40px" width="40px" backgroundColor="blue" />
</HStack>
</App>
```
## Exposed Methods [#exposed-methods]
This component does not expose any methods.
## Styling [#styling]
This component does not have any styles.
```
--------------------------------------------------------------------------------
/tools/codefence/xmlui-code-fence-docs.md:
--------------------------------------------------------------------------------
```markdown
# XMLUI Code Fence Syntax Documentation
This document describes the various syntax options supported in XMLUI markdown code fences.
## Basic Fence Types
### Standard Code Display: `xmlui`
```xmlui
<Button label="Hello World" />
```
Basic code fence for showing XMLUI code without any special features.
### Playground: `xmlui-pg`
```xmlui-pg
<Button label="Interactive Button" />
```
Creates an interactive playground where the XMLUI code can be executed and displayed inline.
### Application Context: `---app`
```
---app
<App>
<Button label="Full App Example" />
</App>
```
Used for showing complete application examples with full App context.
### Component Context: `---comp`
```
---comp
<Button label="Component Example" />
```
Used for showing component-level examples.
## Supported Modifiers
### `copy`
Adds a copy button to the code block, allowing users to copy the code to clipboard.
```xmlui copy
<Button label="Copyable Code" />
```
```xmlui-pg copy
<Button label="Copyable Playground" />
```
### `display`
Shows the rendered output alongside or instead of just the code.
```xmlui-pg copy display
<Button label="Both Code and Output" />
```
### `name="Example Name"`
Provides a descriptive name for the example.
```xmlui-pg copy display name="Example: Basic Button"
<Button label="Named Example" />
```
### `height="XXXpx"`
Sets a specific height for the playground container.
```xmlui-pg copy display height="200px"
<VStack>
<Button label="Button 1" />
<Button label="Button 2" />
</VStack>
```
### `filename="filename.xmlui"`
Specifies a filename for the code block, useful for multi-file examples.
```xmlui copy filename="Main.xmlui"
<App>
<Button label="Main App" />
</App>
```
## Line Highlighting: `{line-numbers}`
Highlights specific lines in the code block. Supports various formats:
### Single Line
```xmlui copy {3}
<App>
<VStack>
<Button label="This line is highlighted" />
</VStack>
</App>
```
### Multiple Lines (comma-separated)
```xmlui copy {2, 4, 6}
<App>
<VStack>
<Button label="Button 1" />
<Button label="Button 2" />
<Button label="Button 3" />
</VStack>
</App>
```
### Line Ranges
```xmlui copy {2-4}
<App>
<VStack>
<Button label="Button 1" />
<Button label="Button 2" />
</VStack>
</App>
```
### Mixed Ranges and Individual Lines
```xmlui copy {2-4, 7, 10-12}
<!-- Complex highlighting example -->
```
## Attribute Highlighting: `/attribute/`
Highlights specific attributes, values, or patterns within the code using forward slash delimiters.
### Highlight Specific Attributes
```xmlui copy /variant="outlined"/ /themeColor="primary"/
<Button label="Highlighted Attributes" variant="outlined" themeColor="primary" />
```
### Highlight Attribute Names Only
```xmlui copy /name/ /size/
<Icon name="star" size="large" />
```
### Highlight Specific Values
```xmlui copy /direction="rtl"/
<Button label="Right-to-Left" direction="rtl" />
```
### Highlight IDs or References
```xmlui copy /#red/ /#green/ /#blue/ /id="red"/ /id="green"/ /id="blue"/
<VStack>
<Bookmark id="red" />
<Bookmark id="green" />
<Bookmark id="blue" />
</VStack>
```
### Highlight Method Names or Complex Values
```xmlui copy /onSelect="(emoji) => { selected = emoji }"/
<EmojiSelector onSelect="(emoji) => { selected = emoji }" />
```
```xmlui copy /loggedInUser="{{ name: 'Joe', token: '1234' }}"/
<App loggedInUser="{{ name: 'Joe', token: '1234' }}" />
```
### Multiple Attribute Highlights
You can highlight multiple different attributes in the same code block:
```xmlui copy /orientation="horizontal"/ /showAvatar="true"/ /subtitle="Example"/
<Card orientation="horizontal" showAvatar="true" subtitle="Example" />
```
### Red Border Highlighting: `!/pattern/`
Using `!` before the forward slash delimiters produces a red border instead of the standard highlight:
```xmlui !/{ 6 * 7 }/
<Text value="Life, the universe, and everything: { 6 * 7 }" />
```
## Complete Examples
### Full-Featured Playground
```xmlui-pg copy display name="Example: Button Variants" height="300px" {3-5}
<App>
<VStack gap="8px">
<Button label="Solid" variant="solid" />
<Button label="Outlined" variant="outlined" />
<Button label="Ghost" variant="ghost" />
</VStack>
</App>
```
### Multi-File Example with App Context
```
---app copy display filename="Main.xmlui" height="200px"
<App>
<Component1 />
</App>
---comp copy display filename="Component1.xmlui"
<VStack>
<Button label="Component Button" />
</VStack>
```
## Modifier Combinations
All modifiers can be combined in various ways:
- `copy + display` = Shows both code and rendered output with copy functionality
- `copy + display + name` = Named example with copy and display
- `copy + display + height` = Sized playground with copy and display
- `copy + {lines}` = Copyable code with line highlighting
- `filename + any combination` = File-specific examples
## Context-Specific Usage
### In Component Documentation
- Use `xmlui-pg` for interactive examples that users can modify
- Use `xmlui copy` for code snippets users will copy into their projects
- Use line highlighting to draw attention to specific properties or patterns
### In Multi-File Examples
- Use `---app` for the main application file
- Use `---comp` for individual component files
- Always include `filename` for clarity in multi-file scenarios
### For Complex Layouts
- Use `height` to ensure adequate space for the rendered output
- Use `name` to provide clear context for what the example demonstrates
- Combine `display` with appropriate sizing for optimal presentation
### Descriptions
Use `---desc` to inject narrative markdown.
```