This is page 33 of 181. Use http://codebase.md/xmlui-org/xmlui/mockApiDef.js?lines=true&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ └── config.json
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-blog.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
│ ├── layout-changes.md
│ ├── 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
│ │ ├── resources
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ └── for-download
│ │ │ │ └── xmlui
│ │ │ │ └── xmlui-standalone.umd.js
│ │ │ ├── github.svg
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ ├── rss.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ └── PageNotFound.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── blog-theme.ts
│ └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── ComponentRefLinks.txt
│ ├── content
│ │ ├── _meta.json
│ │ ├── components
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── APICall.md
│ │ │ ├── App.md
│ │ │ ├── AppHeader.md
│ │ │ ├── AppState.md
│ │ │ ├── AutoComplete.md
│ │ │ ├── Avatar.md
│ │ │ ├── Backdrop.md
│ │ │ ├── Badge.md
│ │ │ ├── BarChart.md
│ │ │ ├── Bookmark.md
│ │ │ ├── Breakout.md
│ │ │ ├── Button.md
│ │ │ ├── Card.md
│ │ │ ├── Carousel.md
│ │ │ ├── ChangeListener.md
│ │ │ ├── Checkbox.md
│ │ │ ├── CHStack.md
│ │ │ ├── ColorPicker.md
│ │ │ ├── Column.md
│ │ │ ├── ContentSeparator.md
│ │ │ ├── CVStack.md
│ │ │ ├── DataSource.md
│ │ │ ├── DateInput.md
│ │ │ ├── DatePicker.md
│ │ │ ├── DonutChart.md
│ │ │ ├── DropdownMenu.md
│ │ │ ├── EmojiSelector.md
│ │ │ ├── ExpandableItem.md
│ │ │ ├── FileInput.md
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FlowLayout.md
│ │ │ ├── Footer.md
│ │ │ ├── Form.md
│ │ │ ├── FormItem.md
│ │ │ ├── FormSection.md
│ │ │ ├── Fragment.md
│ │ │ ├── H1.md
│ │ │ ├── H2.md
│ │ │ ├── H3.md
│ │ │ ├── H4.md
│ │ │ ├── H5.md
│ │ │ ├── H6.md
│ │ │ ├── Heading.md
│ │ │ ├── HSplitter.md
│ │ │ ├── HStack.md
│ │ │ ├── Icon.md
│ │ │ ├── IFrame.md
│ │ │ ├── Image.md
│ │ │ ├── Items.md
│ │ │ ├── LabelList.md
│ │ │ ├── Legend.md
│ │ │ ├── LineChart.md
│ │ │ ├── Link.md
│ │ │ ├── List.md
│ │ │ ├── Logo.md
│ │ │ ├── Markdown.md
│ │ │ ├── MenuItem.md
│ │ │ ├── MenuSeparator.md
│ │ │ ├── ModalDialog.md
│ │ │ ├── NavGroup.md
│ │ │ ├── NavLink.md
│ │ │ ├── NavPanel.md
│ │ │ ├── NoResult.md
│ │ │ ├── NumberBox.md
│ │ │ ├── Option.md
│ │ │ ├── Page.md
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── Pages.md
│ │ │ ├── Pagination.md
│ │ │ ├── PasswordInput.md
│ │ │ ├── PieChart.md
│ │ │ ├── ProgressBar.md
│ │ │ ├── Queue.md
│ │ │ ├── RadioGroup.md
│ │ │ ├── RealTimeAdapter.md
│ │ │ ├── Redirect.md
│ │ │ ├── Select.md
│ │ │ ├── Slider.md
│ │ │ ├── Slot.md
│ │ │ ├── SpaceFiller.md
│ │ │ ├── Spinner.md
│ │ │ ├── Splitter.md
│ │ │ ├── Stack.md
│ │ │ ├── StickyBox.md
│ │ │ ├── SubMenuItem.md
│ │ │ ├── Switch.md
│ │ │ ├── TabItem.md
│ │ │ ├── Table.md
│ │ │ ├── TableOfContents.md
│ │ │ ├── Tabs.md
│ │ │ ├── Text.md
│ │ │ ├── TextArea.md
│ │ │ ├── TextBox.md
│ │ │ ├── Theme.md
│ │ │ ├── TimeInput.md
│ │ │ ├── Timer.md
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneSwitch.md
│ │ │ ├── Tooltip.md
│ │ │ ├── Tree.md
│ │ │ ├── VSplitter.md
│ │ │ ├── VStack.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ ├── xmlui-spreadsheet
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Spreadsheet.md
│ │ │ └── xmlui-website-blocks
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Carousel.md
│ │ │ ├── HelloMd.md
│ │ │ ├── HeroSection.md
│ │ │ └── ScrollToTop.md
│ │ └── extensions
│ │ ├── _meta.json
│ │ ├── xmlui-animations
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Animation.md
│ │ │ ├── FadeAnimation.md
│ │ │ ├── FadeInAnimation.md
│ │ │ ├── FadeOutAnimation.md
│ │ │ ├── ScaleAnimation.md
│ │ │ └── SlideInAnimation.md
│ │ └── xmlui-website-blocks
│ │ ├── _meta.json
│ │ ├── _overview.md
│ │ ├── Carousel.md
│ │ ├── HelloMd.md
│ │ ├── HeroSection.md
│ │ └── ScrollToTop.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── pages
│ │ │ ├── _meta.json
│ │ │ ├── app-structure.md
│ │ │ ├── build-editor-component.md
│ │ │ ├── build-hello-world-component.md
│ │ │ ├── components-intro.md
│ │ │ ├── context-variables.md
│ │ │ ├── forms.md
│ │ │ ├── globals.md
│ │ │ ├── glossary.md
│ │ │ ├── helper-tags.md
│ │ │ ├── hosted-deployment.md
│ │ │ ├── howto
│ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md
│ │ │ │ ├── chain-a-refetch.md
│ │ │ │ ├── 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
│ ├── components-with-options.md
│ ├── containers.md
│ ├── data-operations.md
│ ├── glossary.md
│ ├── index.md
│ ├── next
│ │ ├── component-dev-guide.md
│ │ ├── configuration-management-enhancement-summary.md
│ │ ├── documentation-scripts-refactoring-complete-summary.md
│ │ ├── documentation-scripts-refactoring-plan.md
│ │ ├── duplicate-pattern-extraction-summary.md
│ │ ├── error-handling-standardization-summary.md
│ │ ├── generating-component-reference.md
│ │ ├── index.md
│ │ ├── logging-consistency-implementation-summary.md
│ │ ├── project-build.md
│ │ ├── project-structure.md
│ │ ├── theme-context.md
│ │ ├── tiptap-design-considerations.md
│ │ ├── working-with-code.md
│ │ ├── xmlui-runtime-architecture
│ │ └── xmlui-wcag-accessibility-report.md
│ ├── react-fundamentals.md
│ ├── release-method.md
│ ├── standalone-app.md
│ ├── 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
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ └── SelectNative.tsx
│ │ ├── SelectionStore
│ │ │ ├── SelectionStore.md
│ │ │ ├── SelectionStore.tsx
│ │ │ └── SelectionStoreNative.tsx
│ │ ├── Slider
│ │ │ ├── Slider.md
│ │ │ ├── Slider.module.scss
│ │ │ ├── Slider.spec.ts
│ │ │ ├── Slider.tsx
│ │ │ └── SliderNative.tsx
│ │ ├── Slot
│ │ │ ├── Slot.md
│ │ │ ├── Slot.spec.ts
│ │ │ └── Slot.ts
│ │ ├── SlotItem.tsx
│ │ ├── SpaceFiller
│ │ │ ├── SpaceFiller.md
│ │ │ ├── SpaceFiller.module.scss
│ │ │ ├── SpaceFiller.spec.ts
│ │ │ ├── SpaceFiller.tsx
│ │ │ └── SpaceFillerNative.tsx
│ │ ├── Spinner
│ │ │ ├── Spinner.md
│ │ │ ├── Spinner.module.scss
│ │ │ ├── Spinner.spec.ts
│ │ │ ├── Spinner.tsx
│ │ │ └── SpinnerNative.tsx
│ │ ├── Splitter
│ │ │ ├── HSplitter.md
│ │ │ ├── HSplitter.spec.ts
│ │ │ ├── Splitter.md
│ │ │ ├── Splitter.module.scss
│ │ │ ├── Splitter.spec.ts
│ │ │ ├── Splitter.tsx
│ │ │ ├── SplitterNative.tsx
│ │ │ ├── utils.ts
│ │ │ ├── VSplitter.md
│ │ │ └── VSplitter.spec.ts
│ │ ├── Stack
│ │ │ ├── CHStack.md
│ │ │ ├── CHStack.spec.ts
│ │ │ ├── CVStack.md
│ │ │ ├── CVStack.spec.ts
│ │ │ ├── HStack.md
│ │ │ ├── HStack.spec.ts
│ │ │ ├── Stack.md
│ │ │ ├── Stack.module.scss
│ │ │ ├── Stack.spec.ts
│ │ │ ├── Stack.tsx
│ │ │ ├── StackNative.tsx
│ │ │ ├── VStack.md
│ │ │ └── VStack.spec.ts
│ │ ├── StickyBox
│ │ │ ├── StickyBox.md
│ │ │ ├── StickyBox.module.scss
│ │ │ ├── StickyBox.tsx
│ │ │ └── StickyBoxNative.tsx
│ │ ├── Switch
│ │ │ ├── Switch.md
│ │ │ ├── Switch.spec.ts
│ │ │ └── Switch.tsx
│ │ ├── Table
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── react-table-config.d.ts
│ │ │ ├── Table.md
│ │ │ ├── Table.module.scss
│ │ │ ├── Table.spec.ts
│ │ │ ├── Table.tsx
│ │ │ ├── TableNative.tsx
│ │ │ └── useRowSelection.tsx
│ │ ├── TableOfContents
│ │ │ ├── TableOfContents.module.scss
│ │ │ ├── TableOfContents.spec.ts
│ │ │ ├── TableOfContents.tsx
│ │ │ └── TableOfContentsNative.tsx
│ │ ├── Tabs
│ │ │ ├── TabContext.tsx
│ │ │ ├── TabItem.md
│ │ │ ├── TabItem.tsx
│ │ │ ├── TabItemNative.tsx
│ │ │ ├── Tabs.md
│ │ │ ├── Tabs.module.scss
│ │ │ ├── Tabs.spec.ts
│ │ │ ├── Tabs.tsx
│ │ │ └── TabsNative.tsx
│ │ ├── Text
│ │ │ ├── Text.md
│ │ │ ├── Text.module.scss
│ │ │ ├── Text.spec.ts
│ │ │ ├── Text.tsx
│ │ │ └── TextNative.tsx
│ │ ├── TextArea
│ │ │ ├── TextArea.md
│ │ │ ├── TextArea.module.scss
│ │ │ ├── TextArea.spec.ts
│ │ │ ├── TextArea.tsx
│ │ │ ├── TextAreaNative.tsx
│ │ │ ├── TextAreaResizable.tsx
│ │ │ └── useComposedRef.ts
│ │ ├── TextBox
│ │ │ ├── TextBox.md
│ │ │ ├── TextBox.module.scss
│ │ │ ├── TextBox.spec.ts
│ │ │ ├── TextBox.tsx
│ │ │ └── TextBoxNative.tsx
│ │ ├── Theme
│ │ │ ├── NotificationToast.tsx
│ │ │ ├── Theme.md
│ │ │ ├── Theme.module.scss
│ │ │ ├── Theme.spec.ts
│ │ │ ├── Theme.tsx
│ │ │ └── ThemeNative.tsx
│ │ ├── TimeInput
│ │ │ ├── TimeInput.md
│ │ │ ├── TimeInput.module.scss
│ │ │ ├── TimeInput.spec.ts
│ │ │ ├── TimeInput.tsx
│ │ │ ├── TimeInputNative.tsx
│ │ │ └── utils.ts
│ │ ├── Timer
│ │ │ ├── Timer.md
│ │ │ ├── Timer.spec.ts
│ │ │ ├── Timer.tsx
│ │ │ └── TimerNative.tsx
│ │ ├── Toggle
│ │ │ ├── Toggle.module.scss
│ │ │ └── Toggle.tsx
│ │ ├── ToneChangerButton
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneChangerButton.spec.ts
│ │ │ └── ToneChangerButton.tsx
│ │ ├── ToneSwitch
│ │ │ ├── ToneSwitch.md
│ │ │ ├── ToneSwitch.module.scss
│ │ │ ├── ToneSwitch.spec.ts
│ │ │ ├── ToneSwitch.tsx
│ │ │ └── ToneSwitchNative.tsx
│ │ ├── Tooltip
│ │ │ ├── Tooltip.md
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.spec.ts
│ │ │ ├── Tooltip.tsx
│ │ │ └── TooltipNative.tsx
│ │ ├── Tree
│ │ │ ├── testData.ts
│ │ │ ├── Tree-dynamic.spec.ts
│ │ │ ├── Tree-icons.spec.ts
│ │ │ ├── Tree.md
│ │ │ ├── Tree.spec.ts
│ │ │ ├── TreeComponent.module.scss
│ │ │ ├── TreeComponent.tsx
│ │ │ └── TreeNative.tsx
│ │ ├── TreeDisplay
│ │ │ ├── TreeDisplay.md
│ │ │ ├── TreeDisplay.module.scss
│ │ │ ├── TreeDisplay.tsx
│ │ │ └── TreeDisplayNative.tsx
│ │ ├── ValidationSummary
│ │ │ ├── ValidationSummary.module.scss
│ │ │ └── ValidationSummary.tsx
│ │ └── VisuallyHidden.tsx
│ ├── components-core
│ │ ├── abstractions
│ │ │ ├── ComponentRenderer.ts
│ │ │ ├── LoaderRenderer.ts
│ │ │ ├── standalone.ts
│ │ │ └── treeAbstractions.ts
│ │ ├── action
│ │ │ ├── actions.ts
│ │ │ ├── APICall.tsx
│ │ │ ├── FileDownloadAction.tsx
│ │ │ ├── FileUploadAction.tsx
│ │ │ ├── NavigateAction.tsx
│ │ │ └── TimedAction.tsx
│ │ ├── ApiBoundComponent.tsx
│ │ ├── appContext
│ │ │ ├── date-functions.ts
│ │ │ ├── math-function.ts
│ │ │ └── misc-utils.ts
│ │ ├── AppContext.tsx
│ │ ├── behaviors
│ │ │ ├── Behavior.tsx
│ │ │ └── CoreBehaviors.tsx
│ │ ├── component-hooks.ts
│ │ ├── ComponentDecorator.tsx
│ │ ├── ComponentViewer.tsx
│ │ ├── CompoundComponent.tsx
│ │ ├── constants.ts
│ │ ├── DebugViewProvider.tsx
│ │ ├── descriptorHelper.ts
│ │ ├── devtools
│ │ │ ├── InspectorDialog.module.scss
│ │ │ ├── InspectorDialog.tsx
│ │ │ └── InspectorDialogVisibilityContext.tsx
│ │ ├── EngineError.ts
│ │ ├── event-handlers.ts
│ │ ├── InspectorButton.module.scss
│ │ ├── InspectorContext.tsx
│ │ ├── interception
│ │ │ ├── abstractions.ts
│ │ │ ├── ApiInterceptor.ts
│ │ │ ├── ApiInterceptorProvider.tsx
│ │ │ ├── apiInterceptorWorker.ts
│ │ │ ├── Backend.ts
│ │ │ ├── Errors.ts
│ │ │ ├── IndexedDb.ts
│ │ │ ├── initMock.ts
│ │ │ ├── InMemoryDb.ts
│ │ │ ├── ReadonlyCollection.ts
│ │ │ └── useApiInterceptorContext.tsx
│ │ ├── loader
│ │ │ ├── ApiLoader.tsx
│ │ │ ├── DataLoader.tsx
│ │ │ ├── ExternalDataLoader.tsx
│ │ │ ├── Loader.tsx
│ │ │ ├── MockLoaderRenderer.tsx
│ │ │ └── PageableLoader.tsx
│ │ ├── LoaderComponent.tsx
│ │ ├── markup-check.ts
│ │ ├── parts.ts
│ │ ├── renderers.ts
│ │ ├── rendering
│ │ │ ├── AppContent.tsx
│ │ │ ├── AppRoot.tsx
│ │ │ ├── AppWrapper.tsx
│ │ │ ├── buildProxy.ts
│ │ │ ├── collectFnVarDeps.ts
│ │ │ ├── ComponentAdapter.tsx
│ │ │ ├── ComponentWrapper.tsx
│ │ │ ├── Container.tsx
│ │ │ ├── containers.ts
│ │ │ ├── ContainerWrapper.tsx
│ │ │ ├── ErrorBoundary.module.scss
│ │ │ ├── ErrorBoundary.tsx
│ │ │ ├── InvalidComponent.module.scss
│ │ │ ├── InvalidComponent.tsx
│ │ │ ├── nodeUtils.ts
│ │ │ ├── reducer.ts
│ │ │ ├── renderChild.tsx
│ │ │ ├── StandaloneComponent.tsx
│ │ │ ├── StateContainer.tsx
│ │ │ ├── UnknownComponent.module.scss
│ │ │ ├── UnknownComponent.tsx
│ │ │ └── valueExtractor.ts
│ │ ├── reportEngineError.ts
│ │ ├── RestApiProxy.ts
│ │ ├── script-runner
│ │ │ ├── asyncProxy.ts
│ │ │ ├── AttributeValueParser.ts
│ │ │ ├── bannedFunctions.ts
│ │ │ ├── BindingTreeEvaluationContext.ts
│ │ │ ├── eval-tree-async.ts
│ │ │ ├── eval-tree-common.ts
│ │ │ ├── eval-tree-sync.ts
│ │ │ ├── ParameterParser.ts
│ │ │ ├── process-statement-async.ts
│ │ │ ├── process-statement-common.ts
│ │ │ ├── process-statement-sync.ts
│ │ │ ├── ScriptingSourceTree.ts
│ │ │ ├── simplify-expression.ts
│ │ │ ├── statement-queue.ts
│ │ │ └── visitors.ts
│ │ ├── StandaloneApp.tsx
│ │ ├── StandaloneExtensionManager.ts
│ │ ├── TableOfContentsContext.tsx
│ │ ├── theming
│ │ │ ├── _themes.scss
│ │ │ ├── component-layout-resolver.ts
│ │ │ ├── extendThemeUtils.ts
│ │ │ ├── hvar.ts
│ │ │ ├── layout-resolver.ts
│ │ │ ├── parse-layout-props.ts
│ │ │ ├── StyleContext.tsx
│ │ │ ├── StyleRegistry.ts
│ │ │ ├── ThemeContext.tsx
│ │ │ ├── ThemeProvider.tsx
│ │ │ ├── themes
│ │ │ │ ├── base-utils.ts
│ │ │ │ ├── palette.ts
│ │ │ │ ├── root.ts
│ │ │ │ ├── solid.ts
│ │ │ │ ├── theme-colors.ts
│ │ │ │ └── xmlui.ts
│ │ │ ├── themeVars.module.scss
│ │ │ ├── themeVars.ts
│ │ │ ├── transformThemeVars.ts
│ │ │ └── utils.ts
│ │ ├── utils
│ │ │ ├── actionUtils.ts
│ │ │ ├── audio-utils.ts
│ │ │ ├── base64-utils.ts
│ │ │ ├── compound-utils.ts
│ │ │ ├── css-utils.ts
│ │ │ ├── DataLoaderQueryKeyGenerator.ts
│ │ │ ├── date-utils.ts
│ │ │ ├── extractParam.ts
│ │ │ ├── hooks.tsx
│ │ │ ├── LruCache.ts
│ │ │ ├── mergeProps.ts
│ │ │ ├── misc.ts
│ │ │ ├── request-params.ts
│ │ │ ├── statementUtils.ts
│ │ │ └── treeUtils.ts
│ │ └── xmlui-parser.ts
│ ├── index-standalone.ts
│ ├── index.scss
│ ├── index.ts
│ ├── language-server
│ │ ├── server-common.ts
│ │ ├── server-web-worker.ts
│ │ ├── server.ts
│ │ ├── services
│ │ │ ├── common
│ │ │ │ ├── docs-generation.ts
│ │ │ │ ├── lsp-utils.ts
│ │ │ │ ├── metadata-utils.ts
│ │ │ │ └── syntax-node-utilities.ts
│ │ │ ├── completion.ts
│ │ │ ├── diagnostic.ts
│ │ │ ├── format.ts
│ │ │ └── hover.ts
│ │ └── xmlui-metadata-generated.mjs
│ ├── logging
│ │ ├── LoggerContext.tsx
│ │ ├── LoggerInitializer.tsx
│ │ ├── LoggerService.ts
│ │ └── xmlui.ts
│ ├── logo.svg
│ ├── parsers
│ │ ├── common
│ │ │ ├── GenericToken.ts
│ │ │ ├── InputStream.ts
│ │ │ └── utils.ts
│ │ ├── scripting
│ │ │ ├── code-behind-collect.ts
│ │ │ ├── Lexer.ts
│ │ │ ├── modules.ts
│ │ │ ├── Parser.ts
│ │ │ ├── ParserError.ts
│ │ │ ├── ScriptingNodeTypes.ts
│ │ │ ├── TokenTrait.ts
│ │ │ ├── TokenType.ts
│ │ │ └── tree-visitor.ts
│ │ ├── style-parser
│ │ │ ├── errors.ts
│ │ │ ├── source-tree.ts
│ │ │ ├── StyleInputStream.ts
│ │ │ ├── StyleLexer.ts
│ │ │ ├── StyleParser.ts
│ │ │ └── tokens.ts
│ │ └── xmlui-parser
│ │ ├── CharacterCodes.ts
│ │ ├── diagnostics.ts
│ │ ├── fileExtensions.ts
│ │ ├── index.ts
│ │ ├── lint.ts
│ │ ├── parser.ts
│ │ ├── ParserError.ts
│ │ ├── scanner.ts
│ │ ├── syntax-kind.ts
│ │ ├── syntax-node.ts
│ │ ├── transform.ts
│ │ ├── utils.ts
│ │ ├── xmlui-serializer.ts
│ │ └── xmlui-tree.ts
│ ├── react-app-env.d.ts
│ ├── syntax
│ │ ├── monaco
│ │ │ ├── grammar.monacoLanguage.ts
│ │ │ ├── index.ts
│ │ │ ├── xmlui-dark.ts
│ │ │ ├── xmlui-light.ts
│ │ │ └── xmluiscript.monacoLanguage.ts
│ │ └── textMate
│ │ ├── index.ts
│ │ ├── xmlui-dark.json
│ │ ├── xmlui-light.json
│ │ ├── xmlui.json
│ │ └── xmlui.tmLanguage.json
│ ├── testing
│ │ ├── assertions.ts
│ │ ├── component-test-helpers.ts
│ │ ├── ComponentDrivers.ts
│ │ ├── drivers
│ │ │ ├── DateInputDriver.ts
│ │ │ ├── ModalDialogDriver.ts
│ │ │ ├── NumberBoxDriver.ts
│ │ │ ├── TextBoxDriver.ts
│ │ │ ├── TimeInputDriver.ts
│ │ │ ├── TimerDriver.ts
│ │ │ └── TreeDriver.ts
│ │ ├── fixtures.ts
│ │ ├── infrastructure
│ │ │ ├── index.html
│ │ │ ├── main.tsx
│ │ │ ├── public
│ │ │ │ ├── mockServiceWorker.js
│ │ │ │ ├── resources
│ │ │ │ │ ├── bell.svg
│ │ │ │ │ ├── box.svg
│ │ │ │ │ ├── doc.svg
│ │ │ │ │ ├── eye.svg
│ │ │ │ │ ├── flower-640x480.jpg
│ │ │ │ │ ├── sun.svg
│ │ │ │ │ ├── test-image-100x100.jpg
│ │ │ │ │ └── txt.svg
│ │ │ │ └── serve.json
│ │ │ └── TestBed.tsx
│ │ └── themed-app-test-helpers.ts
│ └── vite-env.d.ts
├── tests
│ ├── components
│ │ ├── CodeBlock
│ │ │ └── hightlight-code.test.ts
│ │ ├── playground-pattern.test.ts
│ │ └── Tree
│ │ └── Tree-states.test.ts
│ ├── components-core
│ │ ├── abstractions
│ │ │ └── treeAbstractions.test.ts
│ │ ├── container
│ │ │ └── buildProxy.test.ts
│ │ ├── interception
│ │ │ ├── orderBy.test.ts
│ │ │ ├── ReadOnlyCollection.test.ts
│ │ │ └── request-param-converter.test.ts
│ │ ├── scripts-runner
│ │ │ ├── AttributeValueParser.test.ts
│ │ │ ├── eval-tree-arrow-async.test.ts
│ │ │ ├── eval-tree-arrow.test.ts
│ │ │ ├── eval-tree-func-decl-async.test.ts
│ │ │ ├── eval-tree-func-decl.test.ts
│ │ │ ├── eval-tree-pre-post.test.ts
│ │ │ ├── eval-tree-regression.test.ts
│ │ │ ├── eval-tree.test.ts
│ │ │ ├── function-proxy.test.ts
│ │ │ ├── parser-regression.test.ts
│ │ │ ├── process-event.test.ts
│ │ │ ├── process-function.test.ts
│ │ │ ├── process-implicit-context.test.ts
│ │ │ ├── process-statement-asgn.test.ts
│ │ │ ├── process-statement-destruct.test.ts
│ │ │ ├── process-statement-regs.test.ts
│ │ │ ├── process-statement-sync.test.ts
│ │ │ ├── process-statement.test.ts
│ │ │ ├── process-switch-sync.test.ts
│ │ │ ├── process-switch.test.ts
│ │ │ ├── process-try-sync.test.ts
│ │ │ ├── process-try.test.ts
│ │ │ └── test-helpers.ts
│ │ ├── test-metadata-handler.ts
│ │ ├── theming
│ │ │ ├── border-segments.test.ts
│ │ │ ├── component-layout.resolver.test.ts
│ │ │ ├── layout-property-parser.test.ts
│ │ │ ├── layout-resolver.test.ts
│ │ │ ├── layout-resolver2.test.ts
│ │ │ ├── layout-vp-override.test.ts
│ │ │ └── padding-segments.test.ts
│ │ └── utils
│ │ ├── date-utils.test.ts
│ │ ├── format-human-elapsed-time.test.ts
│ │ └── LruCache.test.ts
│ ├── language-server
│ │ ├── completion.test.ts
│ │ ├── format.test.ts
│ │ ├── hover.test.ts
│ │ └── mockData.ts
│ └── parsers
│ ├── common
│ │ └── input-stream.test.ts
│ ├── markdown
│ │ └── parse-binding-expression.test.ts
│ ├── parameter-parser.test.ts
│ ├── paremeter-parser.test.ts
│ ├── scripting
│ │ ├── eval-tree-arrow.test.ts
│ │ ├── eval-tree-pre-post.test.ts
│ │ ├── eval-tree.test.ts
│ │ ├── function-proxy.test.ts
│ │ ├── lexer-literals.test.ts
│ │ ├── lexer-misc.test.ts
│ │ ├── module-parse.test.ts
│ │ ├── parser-arrow.test.ts
│ │ ├── parser-assignments.test.ts
│ │ ├── parser-binary.test.ts
│ │ ├── parser-destructuring.test.ts
│ │ ├── parser-errors.test.ts
│ │ ├── parser-expressions.test.ts
│ │ ├── parser-function.test.ts
│ │ ├── parser-literals.test.ts
│ │ ├── parser-primary.test.ts
│ │ ├── parser-regex.test.ts
│ │ ├── parser-statements.test.ts
│ │ ├── parser-unary.test.ts
│ │ ├── process-event.test.ts
│ │ ├── process-implicit-context.test.ts
│ │ ├── process-statement-asgn.test.ts
│ │ ├── process-statement-destruct.test.ts
│ │ ├── process-statement-regs.test.ts
│ │ ├── process-statement-sync.test.ts
│ │ ├── process-statement.test.ts
│ │ ├── process-switch-sync.test.ts
│ │ ├── process-switch.test.ts
│ │ ├── process-try-sync.test.ts
│ │ ├── process-try.test.ts
│ │ ├── simplify-expression.test.ts
│ │ ├── statement-hooks.test.ts
│ │ └── test-helpers.ts
│ ├── style-parser
│ │ ├── generateHvarChain.test.ts
│ │ ├── parseHVar.test.ts
│ │ ├── parser.test.ts
│ │ └── tokens.test.ts
│ └── xmlui
│ ├── lint.test.ts
│ ├── parser.test.ts
│ ├── scanner.test.ts
│ ├── transform.attr.test.ts
│ ├── transform.circular.test.ts
│ ├── transform.element.test.ts
│ ├── transform.errors.test.ts
│ ├── transform.escape.test.ts
│ ├── transform.regression.test.ts
│ ├── transform.script.test.ts
│ ├── transform.test.ts
│ └── xmlui.ts
├── tests-e2e
│ ├── api-bound-component-regression.spec.ts
│ ├── api-call-as-extracted-component.spec.ts
│ ├── assign-to-object-or-array-regression.spec.ts
│ ├── binding-regression.spec.ts
│ ├── children-as-template-context-vars.spec.ts
│ ├── compound-component.spec.ts
│ ├── context-vars-regression.spec.ts
│ ├── data-bindings.spec.ts
│ ├── datasource-and-api-usage-in-var.spec.ts
│ ├── datasource-direct-binding.spec.ts
│ ├── datasource-onLoaded-regression.spec.ts
│ ├── modify-array-item-regression.spec.ts
│ ├── namespaces.spec.ts
│ ├── push-to-array-regression.spec.ts
│ ├── screen-breakpoints.spec.ts
│ ├── scripting.spec.ts
│ ├── state-scope-in-pages.spec.ts
│ └── state-var-scopes.spec.ts
├── tsconfig.bin.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/docs/public/pages/template-properties.md:
--------------------------------------------------------------------------------
```markdown
1 | # Template Properties
2 |
3 | Template properties enable you to define custom markup for specific parts of components using the `<property name="templateName">` syntax.
4 |
5 |
6 | ## App Components
7 |
8 | | Component | Template | Description |
9 | |-----------|----------|-------------|
10 | | [App](/components/App) | [`logoTemplate`](/components/App#logotemplate) | Optional template for the app logo |
11 | | [AppHeader](/components/AppHeader) | [`logoTemplate`](/components/AppHeader#logotemplate) | Template for the header logo |
12 | | [AppHeader](/components/AppHeader) | [`profileMenuTemplate`](/components/AppHeader#profilemenutemplate) | Template for the profile menu area |
13 | | [AppHeader](/components/AppHeader) | [`titleTemplate`](/components/AppHeader#titletemplate) | Template for the header title |
14 | | [NavPanel](/components/NavPanel) | [`logoTemplate`](/components/NavPanel#logotemplate) | Template for the navigation panel logo (in vertical layouts) |
15 |
16 | ## Form Components
17 |
18 | | Component | Template | Description |
19 | |-----------|----------|-------------|
20 | | [Form](/components/Form) | [`buttonRowTemplate`](/components/Form#buttonrowtemplate) | Template for the form's button row/actions area |
21 | | [FormItem](/components/FormItem) | [`inputTemplate`](/components/FormItem#inputtemplate) | Template for custom form input components |
22 | | [Checkbox](/components/Checkbox) | [`inputTemplate`](/components/Checkbox#inputtemplate) | Template for custom checkbox input display |
23 |
24 | ## Data Display Components
25 |
26 | | Component | Template | Description |
27 | |-----------|----------|-------------|
28 | | [List](/components/List) | [`itemTemplate`](/components/List#itemtemplate) | Template for individual list items |
29 | | [List](/components/List) | [`groupHeaderTemplate`](/components/List#groupheadertemplate) | Template for group headers in grouped lists |
30 | | [List](/components/List) | [`groupFooterTemplate`](/components/List#groupfootertemplate) | Template for group footers in grouped lists |
31 | | [List](/components/List) | [`emptyListTemplate`](/components/List#emptylisttemplate) | Template displayed when list is empty |
32 | | [Items](/components/Items) | [`itemTemplate`](/components/Items#itemtemplate) | Template for displaying each data item |
33 | | [Table](/components/Table) | [`noDataTemplate`](/components/Table#nodatatemplate) | Template displayed when table has no data |
34 | | [BarChart](/components/Charts/BarChart) | [`tooltipTemplate`](/components/Charts/BarChart#tooltiptemplate) | Template for custom tooltip content |
35 | | [LineChart](/components/Charts/LineChart) | [`tooltipTemplate`](/components/Charts/LineChart#tooltiptemplate) | Template for custom tooltip content |
36 |
37 | ## Selection Components
38 |
39 | | Component | Template | Description |
40 | |-----------|----------|-------------|
41 | | [Select](/components/Select) | [`optionTemplate`](/components/Select#optiontemplate) | Template for dropdown option display |
42 | | [Select](/components/Select) | [`optionLabelTemplate`](/components/Select#optionlabeltemplate) | Template for option labels |
43 | | [Select](/components/Select) | [`valueTemplate`](/components/Select#valuetemplate) | Template for selected value display |
44 | | [Select](/components/Select) | [`emptyListTemplate`](/components/Select#emptylisttemplate) | Template displayed when no options available |
45 | | [AutoComplete](/components/AutoComplete) | [`optionTemplate`](/components/AutoComplete#optiontemplate) | Template for autocomplete option display |
46 | | [AutoComplete](/components/AutoComplete) | [`emptyListTemplate`](/components/AutoComplete#emptylisttemplate) | Template displayed when no suggestions available |
47 | | [Option](/components/Option) | [`optionTemplate`](/components/Option#optiontemplate) | Template for custom option content |
48 |
49 | ## Interactive Components
50 |
51 | | Component | Template | Description |
52 | |-----------|----------|-------------|
53 | | [DropdownMenu](/components/DropdownMenu) | [`triggerTemplate`](/components/DropdownMenu#triggertemplate) | Template for the dropdown trigger element |
54 | | [SubMenuItem](/components/SubMenuItem) | [`triggerTemplate`](/components/SubMenuItem#triggertemplate) | Template for submenu trigger appearance |
55 | | [Tabs](/components/Tabs) | [`tabTemplate`](/components/Tabs#tabtemplate) | Template for the clickable tab area |
56 |
57 | ## Layout Components
58 |
59 | | Component | Template | Description |
60 | |-----------|----------|-------------|
61 | | [Splitter](/components/Splitter) | [`splitterTemplate`](/components/Splitter#splittertemplate) | Template for the splitter handle/divider |
62 | | [Backdrop](/components/Backdrop) | [`overlayTemplate`](/components/Backdrop#overlaytemplate) | Template for optional overlay content |
63 |
64 | ## Utility Components
65 |
66 | | Component | Template | Description |
67 | |-----------|----------|-------------|
68 | | [Queue](/components/Queue) | [`progressFeedback`](/components/Queue#progressfeedback) | Template for progress reporting UI |
69 | | [Queue](/components/Queue) | [`resultFeedback`](/components/Queue#resultfeedback) | Template for result summary when queue completes |
70 |
71 | ## Usage Patterns
72 |
73 | ### Basic
74 | ```xmlui
75 | <List data="{items}">
76 | <property name="itemTemplate">
77 | <Text>{$item.name}</Text>
78 | </property>
79 | </List>
80 | ```
81 |
82 | ### Multiple
83 | ```xmlui
84 | <List data="{groupedItems}">
85 | <property name="groupHeaderTemplate">
86 | <H3>{$item.group}</H3>
87 | </property>
88 | <property name="itemTemplate">
89 | <Text>{$item.name}</Text>
90 | </property>
91 | <property name="emptyListTemplate">
92 | <Text color="muted">No items found</Text>
93 | </property>
94 | </List>
95 | ```
96 |
97 | ### Alternative children syntax
98 | Some components allow using children as templates instead of explicit template properties:
99 | ```xmlui
100 | <!-- Using template property -->
101 | <List data="{items}">
102 | <property name="itemTemplate">
103 | <Text>{$item}</Text>
104 | </property>
105 | </List>
106 |
107 | <!-- Using children as template -->
108 | <List data="{items}">
109 | <Text>{$item}</Text>
110 | </List>
111 | ```
112 |
113 |
```
--------------------------------------------------------------------------------
/blog/public/resources/logo.svg:
--------------------------------------------------------------------------------
```
1 | <svg width="312" height="122" viewBox="0 0 312 122" fill="none"
2 | xmlns="http://www.w3.org/2000/svg">
3 | <path d="M229.875 98.0763C225.499 98.0763 221.696 97.1076 218.467 95.1703C215.31 93.1613 212.87 90.363 211.148 86.7755C209.426 83.1162 208.565 78.8111 208.565 73.8603V43.6173C208.565 42.8998 208.817 42.2899 209.319 41.7877C209.821 41.2854 210.431 41.0343 211.148 41.0343H220.62C221.409 41.0343 222.019 41.2854 222.449 41.7877C222.951 42.2899 223.203 42.8998 223.203 43.6173V73.2146C223.203 82.1117 227.113 86.5602 234.934 86.5602C238.665 86.5602 241.607 85.3763 243.759 83.0086C245.984 80.6408 247.096 77.3761 247.096 73.2146V43.6173C247.096 42.8998 247.347 42.2899 247.849 41.7877C248.351 41.2854 248.961 41.0343 249.679 41.0343H259.15C259.867 41.0343 260.477 41.2854 260.979 41.7877C261.482 42.2899 261.733 42.8998 261.733 43.6173V94.417C261.733 95.1345 261.482 95.7443 260.979 96.2466C260.477 96.7489 259.867 97 259.15 97H250.432C249.643 97 248.997 96.7489 248.495 96.2466C248.064 95.7443 247.849 95.1345 247.849 94.417V90.0043C245.912 92.5156 243.508 94.4887 240.638 95.9237C237.768 97.3587 234.18 98.0763 229.875 98.0763Z" fill="#3367CC"/>
4 | <path d="M278.533 97C277.815 97 277.205 96.7489 276.703 96.2466C276.201 95.7443 275.95 95.1345 275.95 94.417V43.6173C275.95 42.8998 276.201 42.2899 276.703 41.7877C277.205 41.2854 277.815 41.0343 278.533 41.0343H287.466C288.255 41.0343 288.865 41.2854 289.295 41.7877C289.798 42.2899 290.049 42.8998 290.049 43.6173V94.417C290.049 95.1345 289.798 95.7443 289.295 96.2466C288.865 96.7489 288.255 97 287.466 97H278.533ZM278.102 31.7784C277.313 31.7784 276.667 31.5632 276.165 31.1327C275.734 30.6304 275.519 29.9847 275.519 29.1954V21.4463C275.519 20.7288 275.734 20.1189 276.165 19.6167C276.667 19.1144 277.313 18.8633 278.102 18.8633H287.896C288.685 18.8633 289.331 19.1144 289.833 19.6167C290.336 20.1189 290.587 20.7288 290.587 21.4463V29.1954C290.587 29.9847 290.336 30.6304 289.833 31.1327C289.331 31.5632 288.685 31.7784 287.896 31.7784H278.102Z" fill="#3367CC"/>
5 | <path d="M3.73546 97.0006C3.0897 97.0006 2.51569 96.7854 2.01343 96.3549C1.58293 95.8526 1.36768 95.2786 1.36768 94.6329C1.36768 94.4176 1.40355 94.1665 1.4753 93.8795C1.6188 93.5925 1.83406 93.2337 2.12106 92.8032L20.4175 68.2644L3.41258 45.2324C3.19732 44.8736 3.01795 44.5507 2.87444 44.2637C2.80269 43.9767 2.76682 43.6897 2.76682 43.4027C2.76682 42.757 2.98207 42.2188 3.41258 41.7883C3.91483 41.2861 4.48884 41.0349 5.1346 41.0349H14.4981C15.3591 41.0349 16.0049 41.2502 16.4354 41.6807C16.8659 42.1112 17.1887 42.5058 17.404 42.8646L29.5658 59.0085L41.7275 42.8646C42.0146 42.5058 42.3374 42.1112 42.6962 41.6807C43.1267 41.2502 43.7724 41.0349 44.6335 41.0349H53.5664C54.2122 41.0349 54.7503 41.2861 55.1808 41.7883C55.6831 42.2188 55.9342 42.7211 55.9342 43.2951C55.9342 43.6538 55.8625 43.9767 55.719 44.2637C55.6472 44.5507 55.5037 44.8736 55.2885 45.2324L38.0683 68.4797L56.4724 92.8032C56.7594 93.2337 56.9387 93.5925 57.0105 93.8795C57.154 94.1665 57.2257 94.4176 57.2257 94.6329C57.2257 95.2786 56.9746 95.8526 56.4724 96.3549C56.0418 96.7854 55.5037 97.0006 54.858 97.0006H45.064C44.2747 97.0006 43.6648 96.8212 43.2343 96.4625C42.8038 96.032 42.4451 95.6374 42.1581 95.2786L29.2429 78.166L16.1125 95.2786C15.8255 95.6374 15.4667 96.032 15.0362 96.4625C14.6775 96.8212 14.0676 97.0006 13.2066 97.0006H3.73546Z" fill="#333366"/>
6 | <path d="M69.4363 97.0006C68.7188 97.0006 68.1089 96.7495 67.6066 96.2472C67.1044 95.745 66.8532 95.1351 66.8532 94.4176V43.618C66.8532 42.9005 67.1044 42.2906 67.6066 41.7883C68.1089 41.2861 68.7188 41.0349 69.4363 41.0349H77.8311C78.5486 41.0349 79.1585 41.2861 79.6608 41.7883C80.163 42.2906 80.4142 42.9005 80.4142 43.618V47.2773C81.9209 45.2682 83.93 43.5821 86.4412 42.2188C89.0243 40.7838 92.0737 40.0304 95.5895 39.9587C103.769 39.8152 109.473 43.0081 112.702 49.5374C114.352 46.6674 116.72 44.3714 119.805 42.6493C122.962 40.8556 126.442 39.9587 130.245 39.9587C133.976 39.9587 137.348 40.8197 140.362 42.5417C143.447 44.2637 145.851 46.8826 147.573 50.3984C149.367 53.8425 150.264 58.2193 150.264 63.5288V94.4176C150.264 95.1351 150.013 95.745 149.51 96.2472C149.008 96.7495 148.398 97.0006 147.681 97.0006H138.855C138.138 97.0006 137.528 96.7495 137.026 96.2472C136.523 95.745 136.272 95.1351 136.272 94.4176V64.3899C136.272 61.1611 135.806 58.6139 134.873 56.7484C133.94 54.8111 132.685 53.4478 131.106 52.6586C129.528 51.8693 127.77 51.4747 125.832 51.4747C124.254 51.4747 122.675 51.8693 121.097 52.6586C119.518 53.4478 118.227 54.8111 117.222 56.7484C116.218 58.6139 115.716 61.1611 115.716 64.3899V94.4176C115.716 95.1351 115.464 95.745 114.962 96.2472C114.46 96.7495 113.85 97.0006 113.133 97.0006H104.307C103.518 97.0006 102.872 96.7495 102.37 96.2472C101.939 95.745 101.724 95.1351 101.724 94.4176V64.3899C101.724 61.1611 101.222 58.6139 100.217 56.7484C99.2129 54.8111 97.9214 53.4478 96.3429 52.6586C94.7643 51.8693 93.0782 51.4747 91.2844 51.4747C89.6342 51.4747 88.0198 51.9052 86.4412 52.7662C84.8627 53.5555 83.5712 54.8829 82.5667 56.7484C81.5622 58.6139 81.0599 61.1611 81.0599 64.3899V94.4176C81.0599 95.1351 80.8088 95.745 80.3065 96.2472C79.8043 96.7495 79.1944 97.0006 78.4769 97.0006H69.4363Z" fill="#333366"/>
7 | <path d="M166.66 97.0006C165.942 97.0006 165.332 96.7495 164.83 96.2472C164.328 95.745 164.077 95.1351 164.077 94.4176V23.169C164.077 22.4515 164.328 21.8416 164.83 21.3393C165.332 20.8371 165.942 20.5859 166.66 20.5859H175.593C176.31 20.5859 176.92 20.8371 177.422 21.3393C177.925 21.8416 178.176 22.4515 178.176 23.169V94.4176C178.176 95.1351 177.925 95.745 177.422 96.2472C176.92 96.7495 176.31 97.0006 175.593 97.0006H166.66Z" fill="#333366"/>
8 | <path fill-rule="evenodd" clip-rule="evenodd" d="M309 3H193V119H309V3ZM191 1V121H311V1H191Z" fill="#3367CC"/>
9 | </svg>
10 |
```
--------------------------------------------------------------------------------
/docs/public/resources/logo.svg:
--------------------------------------------------------------------------------
```
1 | <svg width="312" height="122" viewBox="0 0 312 122" fill="none"
2 | xmlns="http://www.w3.org/2000/svg">
3 | <path d="M229.875 98.0763C225.499 98.0763 221.696 97.1076 218.467 95.1703C215.31 93.1613 212.87 90.363 211.148 86.7755C209.426 83.1162 208.565 78.8111 208.565 73.8603V43.6173C208.565 42.8998 208.817 42.2899 209.319 41.7877C209.821 41.2854 210.431 41.0343 211.148 41.0343H220.62C221.409 41.0343 222.019 41.2854 222.449 41.7877C222.951 42.2899 223.203 42.8998 223.203 43.6173V73.2146C223.203 82.1117 227.113 86.5602 234.934 86.5602C238.665 86.5602 241.607 85.3763 243.759 83.0086C245.984 80.6408 247.096 77.3761 247.096 73.2146V43.6173C247.096 42.8998 247.347 42.2899 247.849 41.7877C248.351 41.2854 248.961 41.0343 249.679 41.0343H259.15C259.867 41.0343 260.477 41.2854 260.979 41.7877C261.482 42.2899 261.733 42.8998 261.733 43.6173V94.417C261.733 95.1345 261.482 95.7443 260.979 96.2466C260.477 96.7489 259.867 97 259.15 97H250.432C249.643 97 248.997 96.7489 248.495 96.2466C248.064 95.7443 247.849 95.1345 247.849 94.417V90.0043C245.912 92.5156 243.508 94.4887 240.638 95.9237C237.768 97.3587 234.18 98.0763 229.875 98.0763Z" fill="#3367CC"/>
4 | <path d="M278.533 97C277.815 97 277.205 96.7489 276.703 96.2466C276.201 95.7443 275.95 95.1345 275.95 94.417V43.6173C275.95 42.8998 276.201 42.2899 276.703 41.7877C277.205 41.2854 277.815 41.0343 278.533 41.0343H287.466C288.255 41.0343 288.865 41.2854 289.295 41.7877C289.798 42.2899 290.049 42.8998 290.049 43.6173V94.417C290.049 95.1345 289.798 95.7443 289.295 96.2466C288.865 96.7489 288.255 97 287.466 97H278.533ZM278.102 31.7784C277.313 31.7784 276.667 31.5632 276.165 31.1327C275.734 30.6304 275.519 29.9847 275.519 29.1954V21.4463C275.519 20.7288 275.734 20.1189 276.165 19.6167C276.667 19.1144 277.313 18.8633 278.102 18.8633H287.896C288.685 18.8633 289.331 19.1144 289.833 19.6167C290.336 20.1189 290.587 20.7288 290.587 21.4463V29.1954C290.587 29.9847 290.336 30.6304 289.833 31.1327C289.331 31.5632 288.685 31.7784 287.896 31.7784H278.102Z" fill="#3367CC"/>
5 | <path d="M3.73546 97.0006C3.0897 97.0006 2.51569 96.7854 2.01343 96.3549C1.58293 95.8526 1.36768 95.2786 1.36768 94.6329C1.36768 94.4176 1.40355 94.1665 1.4753 93.8795C1.6188 93.5925 1.83406 93.2337 2.12106 92.8032L20.4175 68.2644L3.41258 45.2324C3.19732 44.8736 3.01795 44.5507 2.87444 44.2637C2.80269 43.9767 2.76682 43.6897 2.76682 43.4027C2.76682 42.757 2.98207 42.2188 3.41258 41.7883C3.91483 41.2861 4.48884 41.0349 5.1346 41.0349H14.4981C15.3591 41.0349 16.0049 41.2502 16.4354 41.6807C16.8659 42.1112 17.1887 42.5058 17.404 42.8646L29.5658 59.0085L41.7275 42.8646C42.0146 42.5058 42.3374 42.1112 42.6962 41.6807C43.1267 41.2502 43.7724 41.0349 44.6335 41.0349H53.5664C54.2122 41.0349 54.7503 41.2861 55.1808 41.7883C55.6831 42.2188 55.9342 42.7211 55.9342 43.2951C55.9342 43.6538 55.8625 43.9767 55.719 44.2637C55.6472 44.5507 55.5037 44.8736 55.2885 45.2324L38.0683 68.4797L56.4724 92.8032C56.7594 93.2337 56.9387 93.5925 57.0105 93.8795C57.154 94.1665 57.2257 94.4176 57.2257 94.6329C57.2257 95.2786 56.9746 95.8526 56.4724 96.3549C56.0418 96.7854 55.5037 97.0006 54.858 97.0006H45.064C44.2747 97.0006 43.6648 96.8212 43.2343 96.4625C42.8038 96.032 42.4451 95.6374 42.1581 95.2786L29.2429 78.166L16.1125 95.2786C15.8255 95.6374 15.4667 96.032 15.0362 96.4625C14.6775 96.8212 14.0676 97.0006 13.2066 97.0006H3.73546Z" fill="#333366"/>
6 | <path d="M69.4363 97.0006C68.7188 97.0006 68.1089 96.7495 67.6066 96.2472C67.1044 95.745 66.8532 95.1351 66.8532 94.4176V43.618C66.8532 42.9005 67.1044 42.2906 67.6066 41.7883C68.1089 41.2861 68.7188 41.0349 69.4363 41.0349H77.8311C78.5486 41.0349 79.1585 41.2861 79.6608 41.7883C80.163 42.2906 80.4142 42.9005 80.4142 43.618V47.2773C81.9209 45.2682 83.93 43.5821 86.4412 42.2188C89.0243 40.7838 92.0737 40.0304 95.5895 39.9587C103.769 39.8152 109.473 43.0081 112.702 49.5374C114.352 46.6674 116.72 44.3714 119.805 42.6493C122.962 40.8556 126.442 39.9587 130.245 39.9587C133.976 39.9587 137.348 40.8197 140.362 42.5417C143.447 44.2637 145.851 46.8826 147.573 50.3984C149.367 53.8425 150.264 58.2193 150.264 63.5288V94.4176C150.264 95.1351 150.013 95.745 149.51 96.2472C149.008 96.7495 148.398 97.0006 147.681 97.0006H138.855C138.138 97.0006 137.528 96.7495 137.026 96.2472C136.523 95.745 136.272 95.1351 136.272 94.4176V64.3899C136.272 61.1611 135.806 58.6139 134.873 56.7484C133.94 54.8111 132.685 53.4478 131.106 52.6586C129.528 51.8693 127.77 51.4747 125.832 51.4747C124.254 51.4747 122.675 51.8693 121.097 52.6586C119.518 53.4478 118.227 54.8111 117.222 56.7484C116.218 58.6139 115.716 61.1611 115.716 64.3899V94.4176C115.716 95.1351 115.464 95.745 114.962 96.2472C114.46 96.7495 113.85 97.0006 113.133 97.0006H104.307C103.518 97.0006 102.872 96.7495 102.37 96.2472C101.939 95.745 101.724 95.1351 101.724 94.4176V64.3899C101.724 61.1611 101.222 58.6139 100.217 56.7484C99.2129 54.8111 97.9214 53.4478 96.3429 52.6586C94.7643 51.8693 93.0782 51.4747 91.2844 51.4747C89.6342 51.4747 88.0198 51.9052 86.4412 52.7662C84.8627 53.5555 83.5712 54.8829 82.5667 56.7484C81.5622 58.6139 81.0599 61.1611 81.0599 64.3899V94.4176C81.0599 95.1351 80.8088 95.745 80.3065 96.2472C79.8043 96.7495 79.1944 97.0006 78.4769 97.0006H69.4363Z" fill="#333366"/>
7 | <path d="M166.66 97.0006C165.942 97.0006 165.332 96.7495 164.83 96.2472C164.328 95.745 164.077 95.1351 164.077 94.4176V23.169C164.077 22.4515 164.328 21.8416 164.83 21.3393C165.332 20.8371 165.942 20.5859 166.66 20.5859H175.593C176.31 20.5859 176.92 20.8371 177.422 21.3393C177.925 21.8416 178.176 22.4515 178.176 23.169V94.4176C178.176 95.1351 177.925 95.745 177.422 96.2472C176.92 96.7495 176.31 97.0006 175.593 97.0006H166.66Z" fill="#333366"/>
8 | <path fill-rule="evenodd" clip-rule="evenodd" d="M309 3H193V119H309V3ZM191 1V121H311V1H191Z" fill="#3367CC"/>
9 | </svg>
10 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/Icon/IconNative.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import { type CSSProperties, forwardRef, type ForwardedRef } from "react";
2 | import type React from "react";
3 | import styles from "./Icon.module.scss";
4 | import { useCustomSvgIconRenderer, useIconRegistry } from "../IconRegistryContext";
5 | import classnames from "classnames";
6 | import { useResourceUrl, useTheme } from "../../components-core/theming/ThemeContext";
7 | import { toCssVar } from "../../parsers/style-parser/StyleParser";
8 | import type { IconRegistryEntry } from "../IconProvider";
9 |
10 | export interface IconBaseProps extends React.SVGAttributes<SVGElement> {
11 | children?: React.ReactNode;
12 | color?: string;
13 | title?: string;
14 | size?: string;
15 | isInline?: boolean;
16 | fallback?: string;
17 | style?: CSSProperties;
18 | className?: string;
19 | tabIndex?: number;
20 | onKeyDown?: React.KeyboardEventHandler<any>;
21 | }
22 |
23 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
24 | export const Icon = forwardRef(function Icon(
25 | {
26 | name,
27 | fallback,
28 | style,
29 | className,
30 | size,
31 | onClick,
32 | tabIndex,
33 | onKeyDown,
34 | ...restProps
35 | }: IconBaseProps,
36 | ref: ForwardedRef<HTMLElement>,
37 | ) {
38 | const { iconRenderer, iconName } = useFindIconRenderer(name, fallback);
39 |
40 | // Handle keyboard events for clickable icons
41 | const handleKeyDown = (event: React.KeyboardEvent<any>) => {
42 | if (onClick && (event.key === "Enter" || event.key === " ")) {
43 | event.preventDefault();
44 | onClick(event as any);
45 | }
46 | onKeyDown?.(event);
47 | };
48 |
49 | const computedSize = typeof size === "string" ? mapSizeToIconPack(size) : size;
50 | const width = computedSize || restProps.width;
51 | const height = computedSize || restProps.height;
52 | const computedProps = {
53 | // className is needed to apply a default color to the icon, thus other component classes can override this one
54 | className: classnames(styles.base, className, { [styles.clickable]: !!onClick }),
55 | ...restProps,
56 | size: computedSize,
57 | width: width,
58 | height: height,
59 | style: {
60 | ...style,
61 | "--icon-width": width,
62 | "--icon-height": height,
63 | },
64 | "data-icon-name": iconName,
65 | onClick,
66 | onKeyDown: handleKeyDown,
67 | tabIndex: onClick ? (tabIndex ?? 0) : tabIndex,
68 | };
69 |
70 | // ---
71 | const customIconUrl = useCustomIconUrl(name);
72 | if (customIconUrl) {
73 | return <CustomIcon {...computedProps} url={customIconUrl} name={name} ref={ref} />;
74 | }
75 |
76 | const renderedIcon = iconRenderer?.renderer?.(computedProps, ref);
77 | if (!renderedIcon) {
78 | return null;
79 | }
80 |
81 | return (
82 | <span ref={ref} style={{ display: "inline-block" }}>
83 | {renderedIcon}
84 | </span>
85 | );
86 | });
87 |
88 | const CustomIcon = forwardRef(function CustomIcon(
89 | props: IconBaseProps & { size?: string; url: string },
90 | ref: ForwardedRef<HTMLElement>,
91 | ) {
92 | const { url, width, height, name, style, className, onClick, onKeyDown, tabIndex, ...rest } =
93 | props;
94 |
95 | // Handle keyboard events for clickable icons
96 | const handleKeyDown = (event: React.KeyboardEvent<any>) => {
97 | if (onClick && (event.key === "Enter" || event.key === " ")) {
98 | event.preventDefault();
99 | onClick(event as any);
100 | }
101 | onKeyDown?.(event);
102 | };
103 |
104 | const resourceUrl = useResourceUrl(url);
105 | const isSvgIcon = resourceUrl?.toLowerCase()?.endsWith(".svg");
106 | const customSvgIconRenderer = useCustomSvgIconRenderer(resourceUrl);
107 |
108 | if (resourceUrl && isSvgIcon) {
109 | const renderedIcon = customSvgIconRenderer?.({
110 | style,
111 | className,
112 | onClick,
113 | onKeyDown: handleKeyDown,
114 | tabIndex: onClick ? (tabIndex ?? 0) : tabIndex,
115 | "data-icon-name": name,
116 | ...rest,
117 | });
118 | if (!renderedIcon) {
119 | //to prevent layout shift
120 | return (
121 | <span
122 | {...(rest as any)}
123 | data-icon-name={name}
124 | ref={ref as ForwardedRef<HTMLSpanElement>}
125 | style={style}
126 | className={className}
127 | onClick={onClick}
128 | onKeyDown={handleKeyDown}
129 | tabIndex={onClick ? (tabIndex ?? 0) : tabIndex}
130 | />
131 | );
132 | }
133 | return renderedIcon;
134 | }
135 |
136 | return (
137 | <img
138 | ref={ref as ForwardedRef<HTMLImageElement>}
139 | src={resourceUrl}
140 | data-icon-name={name}
141 | style={{ width, height, ...style }}
142 | alt={name}
143 | onClick={onClick}
144 | onKeyDown={handleKeyDown}
145 | tabIndex={onClick ? (tabIndex ?? 0) : tabIndex}
146 | {...(rest as any)}
147 | />
148 | );
149 | });
150 |
151 | function useCustomIconUrl(iconName?: string) {
152 | const { getResourceUrl } = useTheme();
153 | if (!iconName) {
154 | return iconName;
155 | }
156 | return getResourceUrl(`resource:icon.${iconName}`);
157 | }
158 |
159 | function mapSizeToIconPack(size: string) {
160 | if (/^\$[a-zA-Z0-9_$-]+$/g.test(size)) {
161 | return toCssVar(size);
162 | }
163 | return (
164 | {
165 | xs: "0.75em",
166 | sm: "1em",
167 | md: "1.5rem",
168 | lg: "2em",
169 | }[size] || size
170 | );
171 | }
172 |
173 | function useFindIconRenderer(
174 | name?: string,
175 | fallback?: string,
176 | ): { iconRenderer: IconRegistryEntry | null; iconName: string | null } {
177 | const iconRegistry = useIconRegistry();
178 |
179 | if (name && typeof name === "string") {
180 | const separator = ":";
181 | const parts: string[] = name.split(separator);
182 | // Component specific icon
183 | if (parts.length > 1) {
184 | const iconRenderer = iconRegistry.lookupIconRenderer(
185 | `${parts[0].toLowerCase()}${separator}${parts[1]}`,
186 | );
187 | if (iconRenderer) {
188 | return { iconRenderer, iconName: name };
189 | }
190 | }
191 | // General icon
192 | if (parts.length === 1) {
193 | const iconRenderer = iconRegistry.lookupIconRenderer(parts[0]);
194 | if (iconRenderer) {
195 | return { iconRenderer, iconName: name };
196 | }
197 | }
198 | }
199 |
200 | if (fallback && typeof fallback === "string") {
201 | const iconRenderer = iconRegistry.lookupIconRenderer(fallback.toLowerCase());
202 | if (iconRenderer) {
203 | return { iconRenderer, iconName: fallback };
204 | }
205 | }
206 | return { iconRenderer: null, iconName: null };
207 | }
208 |
209 | export default Icon;
210 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/FileInput/FileInput.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import styles from "./FileInput.module.scss";
2 |
3 | import { createComponentRenderer } from "../../components-core/renderers";
4 | import { parseScssVar } from "../../components-core/theming/themeVars";
5 | import {
6 | createMetadata,
7 | d,
8 | dAutoFocus,
9 | dDidChange,
10 | dEnabled,
11 | dGotFocus,
12 | dInitialValue,
13 | dLostFocus,
14 | dPlaceholder,
15 | dReadonly,
16 | dRequired,
17 | dValidationStatus,
18 | } from "../../components/metadata-helpers";
19 | import { buttonThemeNames, buttonVariantNames, iconPositionNames, sizeMd } from "../abstractions";
20 | import { Icon } from "../Icon/IconNative";
21 | import { FileInput, isFileArray, defaultProps } from "./FileInputNative";
22 |
23 | const COMP = "FileInput";
24 | const DEFAULT_ICON = "browse:FileInput";
25 |
26 | export const FileInputMd = createMetadata({
27 | status: "stable",
28 | description:
29 | "`FileInput` enables users to select files from their device's file system for " +
30 | "upload or processing. It combines a text field displaying selected files with " +
31 | "a customizable button that opens the system file browser. Use it for forms, " +
32 | "media uploads, and document processing workflows.",
33 | props: {
34 | placeholder: dPlaceholder(),
35 | initialValue: dInitialValue(),
36 | autoFocus: dAutoFocus(),
37 | required: dRequired(),
38 | readOnly: dReadonly(),
39 | enabled: dEnabled(),
40 | validationStatus: dValidationStatus(),
41 | buttonVariant: d("The button variant to use", buttonVariantNames),
42 | buttonLabel: d(`This property is an optional string to set a label for the button part.`),
43 | buttonIcon: d(
44 | `The ID of the icon to display in the button. You can change the default icon for all ${COMP} ` +
45 | `instances with the "icon.browse:FileInput" declaration in the app configuration file.`,
46 | ),
47 | buttonIconPosition: d(
48 | `This optional string determines the location of the button icon.`,
49 | iconPositionNames,
50 | "string",
51 | "start",
52 | ),
53 | acceptsFileType: d(
54 | `An optional list of file types the input controls accepts provided as a string array.`,
55 | ),
56 | multiple: {
57 | ...d(
58 | `This boolean property enables to add not just one (\`false\`), but multiple files to the field ` +
59 | `(\`true\`). This is done either by dragging onto the field or by selecting multiple files ` +
60 | `in the browser menu after clicking the input field button.`,
61 | null,
62 | "boolean",
63 | ),
64 | defaultValue: defaultProps.multiple,
65 | },
66 | directory: {
67 | ...d(
68 | `This boolean property indicates whether the component allows selecting directories (\`true\`) ` +
69 | `or files only (\`false\`).`,
70 | null,
71 | "boolean",
72 | ),
73 | defaultValue: defaultProps.directory,
74 | },
75 | buttonPosition: {
76 | ...d(`This property determines the position of the button relative to the input field.`, [
77 | "start",
78 | "end",
79 | ]),
80 | defaultValue: defaultProps.buttonPosition,
81 | },
82 | buttonSize: d("The size of the button (small, medium, large)", sizeMd),
83 | buttonThemeColor: d(
84 | "The button color scheme (primary, secondary, attention)",
85 | buttonThemeNames,
86 | "string",
87 | defaultProps.buttonThemeColor,
88 | ),
89 | },
90 | events: {
91 | didChange: dDidChange(COMP),
92 | gotFocus: dGotFocus(COMP),
93 | lostFocus: dLostFocus(COMP),
94 | },
95 | apis: {
96 | value: {
97 | description: "This property holds the current value of the component, which is an array of files.",
98 | signature: "get value(): File[]",
99 | },
100 | setValue: {
101 | description: "This method sets the current value of the component.",
102 | signature: "setValue(files: File[]): void",
103 | parameters: {
104 | files: "An array of File objects to set as the current value of the component.",
105 | },
106 | },
107 | focus: {
108 | description: "This API command focuses the input field of the component.",
109 | signature: "focus(): void",
110 | },
111 | open: {
112 | description: "This API command triggers the file browsing dialog to open.",
113 | signature: "open(): void",
114 | },
115 | },
116 | themeVars: parseScssVar(styles.themeVars),
117 | });
118 |
119 | export const fileInputRenderer = createComponentRenderer(
120 | COMP,
121 | FileInputMd,
122 | ({ node, state, updateState, extractValue, lookupEventHandler, registerComponentApi, className }) => {
123 | const iconName = extractValue.asOptionalString(node.props.buttonIcon) || DEFAULT_ICON;
124 | return (
125 | <FileInput
126 | enabled={extractValue.asOptionalBoolean(node.props.enabled)}
127 | variant={extractValue(node.props.buttonVariant)}
128 | buttonThemeColor={extractValue(node.props.buttonThemeColor)}
129 | buttonSize={extractValue(node.props.buttonSize)}
130 | buttonIcon={<Icon name={iconName} fallback="folder-open" />}
131 | buttonIconPosition={extractValue(node.props.buttonIconPosition)}
132 | buttonLabel={extractValue.asOptionalString(node.props.buttonLabel)}
133 | updateState={updateState}
134 | value={isFileArray(state?.value) ? state?.value : undefined}
135 | autoFocus={extractValue.asOptionalBoolean(node.props.autoFocus)}
136 | onDidChange={lookupEventHandler("didChange")}
137 | onFocus={lookupEventHandler("gotFocus")}
138 | onBlur={lookupEventHandler("lostFocus")}
139 | validationStatus={extractValue(node.props.validationStatus)}
140 | registerComponentApi={registerComponentApi}
141 | multiple={extractValue.asOptionalBoolean(node.props.multiple)}
142 | directory={extractValue.asOptionalBoolean(node.props.directory)}
143 | placeholder={extractValue.asOptionalString(node.props.placeholder)}
144 | buttonPosition={extractValue.asOptionalString(node.props.buttonPosition)}
145 | initialValue={extractValue(node.props.initialValue)}
146 | acceptsFileType={extractValue(node.props.acceptsFileType)}
147 | required={extractValue.asOptionalBoolean(node.props.required)}
148 | className={className}
149 | />
150 | );
151 | },
152 | );
153 |
```
--------------------------------------------------------------------------------
/blog/scripts/generate-rss.js:
--------------------------------------------------------------------------------
```javascript
1 | const fs = require('fs');
2 | const path = require('path');
3 |
4 | // Extract blog posts data from Main.xmlui's var.posts definition
5 | function extractBlogPosts() {
6 | const mainXmluiPath = path.join(__dirname, '../src/Main.xmlui');
7 | const content = fs.readFileSync(mainXmluiPath, 'utf8');
8 |
9 | try {
10 | // Find the var.posts definition - extract content between backticks
11 | const postsMatch = content.match(/var\.posts\s*=\s*`\{([^`]*)\}`/s);
12 | if (!postsMatch) {
13 | console.warn('No var.posts found in Main.xmlui');
14 | return [];
15 | }
16 |
17 | const postsContent = postsMatch[1].trim();
18 | const blogPosts = [];
19 |
20 | // Parse array format: [{...}, {...}]
21 | // Remove outer brackets and split by object boundaries
22 | const cleanContent = postsContent.replace(/^\[|\]$/g, '').trim();
23 |
24 | // Split by object boundaries (looking for }, { pattern)
25 | const objectStrings = cleanContent.split(/\},\s*\{/);
26 |
27 | objectStrings.forEach((objStr, index) => {
28 | // Add back the braces that were split off
29 | if (index === 0) objStr = objStr + '}';
30 | else if (index === objectStrings.length - 1) objStr = '{' + objStr;
31 | else objStr = '{' + objStr + '}';
32 |
33 | // Extract properties from the post object
34 | const titleMatch = objStr.match(/title:\s*"([^"]*)"/);
35 | const slugMatch = objStr.match(/slug:\s*"([^"]*)"/);
36 | const authorMatch = objStr.match(/author:\s*"([^"]*)"/);
37 | const dateMatch = objStr.match(/date:\s*"([^"]*)"/);
38 |
39 | if (titleMatch && slugMatch && authorMatch && dateMatch) {
40 | blogPosts.push({
41 | key: `post${index + 1}`, // Generate a key for compatibility
42 | title: titleMatch[1],
43 | slug: slugMatch[1],
44 | author: authorMatch[1],
45 | date: dateMatch[1]
46 | });
47 | }
48 | });
49 |
50 | return blogPosts;
51 | } catch (error) {
52 | console.error('Error extracting blog posts:', error.message);
53 | return [];
54 | }
55 | }
56 |
57 | // Read blog post content and extract description
58 | function getPostDescription(slug) {
59 | try {
60 | const postPath = path.join(__dirname, '../public/blog', `${slug}.md`);
61 | const content = fs.readFileSync(postPath, 'utf8');
62 |
63 | // Strip markdown formatting for description
64 | let plainText = content
65 | .replace(/^#+\s+/gm, '') // Remove headers
66 | .replace(/\*\*(.*?)\*\*/g, '$1') // Remove bold
67 | .replace(/\*(.*?)\*/g, '$1') // Remove italic
68 | .replace(/\[([^\]]*)\]\([^)]*\)/g, '$1') // Remove links, keep text
69 | .replace(/!\[([^\]]*)\]\([^)]*\)/g, '') // Remove images
70 | .replace(/`([^`]*)`/g, '$1') // Remove inline code
71 | .replace(/```[\s\S]*?```/g, '') // Remove code blocks
72 | .replace(/\n+/g, ' ') // Replace newlines with spaces
73 | .replace(/\s+/g, ' ') // Normalize whitespace
74 | .trim();
75 |
76 | // Take first 250 characters for description
77 | if (plainText.length > 250) {
78 | return plainText.substring(0, 250).trim() + '...';
79 | }
80 |
81 | return plainText;
82 | } catch (error) {
83 | console.warn(`Warning: Could not read post content for ${slug}:`, error.message);
84 | return 'Blog post content not available.';
85 | }
86 | }
87 |
88 | // Convert date string to RFC 822 format for RSS
89 | function formatDate(dateStr) {
90 | const date = new Date(dateStr);
91 | return date.toUTCString();
92 | }
93 |
94 | // Generate RSS XML
95 | function generateRSS(blogPosts) {
96 | const now = new Date().toUTCString();
97 |
98 | let rss = `<?xml version="1.0" encoding="UTF-8"?>
99 | <rss version="2.0">
100 | <channel>
101 | <title>XMLUI Blog</title>
102 | <link>https://blog.xmlui.org</link>
103 | <description>Latest updates, tutorials, and insights for XMLUI - the declarative UI framework. Stay informed about new features, best practices, and community highlights.</description>
104 | <language>en</language>
105 | <lastBuildDate>${now}</lastBuildDate>
106 | `;
107 |
108 | // Sort posts by date (newest first)
109 | blogPosts.sort((a, b) => new Date(b.date) - new Date(a.date));
110 |
111 | blogPosts.forEach(post => {
112 | const pubDate = formatDate(post.date);
113 | const postUrl = `https://blog.xmlui.org/${post.slug}`;
114 | const description = getPostDescription(post.slug);
115 |
116 | rss += `
117 | <item>
118 | <title>${escapeXml(post.title)}</title>
119 | <link>${postUrl}</link>
120 | <description>${escapeXml(description)}</description>
121 | <pubDate>${pubDate}</pubDate>
122 | <author>[email protected] (${escapeXml(post.author)})</author>
123 | <guid>${postUrl}</guid>
124 | </item>`;
125 | });
126 |
127 | rss += `
128 | </channel>
129 | </rss>`;
130 |
131 | return rss;
132 | }
133 |
134 | // Escape XML special characters
135 | function escapeXml(text) {
136 | if (typeof text !== 'string') {
137 | text = String(text);
138 | }
139 | return text
140 | .replace(/&/g, '&')
141 | .replace(/</g, '<')
142 | .replace(/>/g, '>')
143 | .replace(/"/g, '"')
144 | .replace(/'/g, ''');
145 | }
146 |
147 | // Main execution
148 | function main() {
149 | try {
150 | console.log('Generating RSS feed...');
151 |
152 | const blogPosts = extractBlogPosts();
153 | console.log(`Found ${blogPosts.length} blog post(s)`);
154 |
155 | if (blogPosts.length === 0) {
156 | console.warn('No blog posts found, creating empty RSS feed');
157 | } else {
158 | blogPosts.forEach(post => {
159 | console.log(` - "${post.title}" by ${post.author} (${post.date})`);
160 | });
161 | }
162 |
163 | const rssContent = generateRSS(blogPosts);
164 | const outputPath = path.join(__dirname, '../public/feed.rss');
165 |
166 | // Ensure the public directory exists
167 | const publicDir = path.dirname(outputPath);
168 | if (!fs.existsSync(publicDir)) {
169 | fs.mkdirSync(publicDir, { recursive: true });
170 | }
171 |
172 | fs.writeFileSync(outputPath, rssContent);
173 | console.log(`RSS feed generated successfully: ${outputPath}`);
174 | console.log(`Feed will be available at: https://blog.xmlui.org/feed.rss`);
175 |
176 | } catch (error) {
177 | console.error('Error generating RSS feed:', error);
178 | process.exit(1);
179 | }
180 | }
181 |
182 | // Run if called directly
183 | if (require.main === module) {
184 | main();
185 | }
186 |
187 | module.exports = { extractBlogPosts, generateRSS, getPostDescription };
188 |
```
--------------------------------------------------------------------------------
/packages/xmlui-playground/src/playground/Header.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import { useCallback, useEffect, useState } from "react";
2 | import styles from "./Header.module.scss";
3 | import classnames from "classnames";
4 | import { RxOpenInNewWindow, RxDownload, RxShare2 } from "react-icons/rx";
5 | import { LiaUndoAltSolid } from "react-icons/lia";
6 | import { usePlayground } from "../hooks/usePlayground";
7 | import { resetApp } from "../state/store";
8 | import { handleDownloadZip } from "../utils/helpers";
9 | import { createQueryString } from "./utils";
10 | import { Box } from "./Box";
11 | import { Tooltip } from "./Tooltip";
12 | import ConfirmationDialog from "./ConfirmationDialog";
13 | import { ThemeSwitcher } from "./ThemeSwitcher";
14 | import { CodeSelector } from "./CodeSelector";
15 | import { Button, Text, Logo } from "xmlui";
16 | import { ToneSwitcher } from "./ToneSwitcher";
17 | import { useToast } from "../hooks/useToast";
18 |
19 | export const Header = ({ standalone = false }: { standalone?: boolean }) => {
20 | const { appDescription, options, dispatch } = usePlayground();
21 | const [dialogOpen, setDialogOpen] = useState(false);
22 | const { showToast } = useToast();
23 |
24 | const [show, setShow] = useState(false);
25 | useEffect(() => {
26 | setShow(true);
27 | }, []);
28 |
29 | const createAppUrl = useCallback(
30 | async (previewMode: boolean) => {
31 | const data = {
32 | standalone: appDescription,
33 | options: {
34 | fixedTheme: options.fixedTheme,
35 | swapped: options.swapped,
36 | previewMode,
37 | orientation: options.orientation,
38 | activeTheme: options.activeTheme,
39 | activeTone: options.activeTone,
40 | content: options.content,
41 | },
42 | };
43 | const appQueryString = await createQueryString(JSON.stringify(data));
44 | return `${window.location.origin}/#/playground#${appQueryString}`;
45 | },
46 | [
47 | appDescription,
48 | options.fixedTheme,
49 | options.swapped,
50 | options.activeTone,
51 | options.orientation,
52 | options.activeTheme,
53 | options.content,
54 | ],
55 | );
56 |
57 | const openStandaloneApp = useCallback(
58 | async (previewMode = true) => {
59 | const url = await createAppUrl(previewMode);
60 | window.open(url, "_blank");
61 | },
62 | [createAppUrl],
63 | );
64 |
65 | const share = useCallback(async () => {
66 | const url = await createAppUrl(false);
67 | navigator.clipboard.writeText(url);
68 | showToast({
69 | title: "URL copied to clipboard",
70 | description: "",
71 | type: "info",
72 | });
73 | }, [createAppUrl, showToast]);
74 |
75 | const download = useCallback(() => {
76 | handleDownloadZip(appDescription);
77 | }, [appDescription]);
78 |
79 | return (
80 | <div className={classnames(styles.header)}>
81 | <Box styles={{ padding: 0, justifyContent: "space-between", flexWrap: "wrap" }}>
82 | <div style={{ display: "flex", alignItems: "center", maxWidth: "280px", width: "100%" }}>
83 | <Logo style={{ width: "93.8281px", padding: 12, paddingLeft: 0 }} />
84 | {!options.previewMode && standalone && <CodeSelector />}
85 | </div>
86 | <Text>{appDescription.config?.name}</Text>
87 | <div style={{ display: "flex", alignItems: "center" }}>
88 | {standalone && (
89 | <>
90 | {!options.fixedTheme && (
91 | <Tooltip label="Change tone">
92 | <ToneSwitcher />
93 | </Tooltip>
94 | )}
95 | {!options.fixedTheme &&
96 | appDescription.availableThemes &&
97 | appDescription.availableThemes.length > 1 && (
98 | <Tooltip label="Change theme">
99 | <ThemeSwitcher />
100 | </Tooltip>
101 | )}
102 | </>
103 | )}
104 | {!options.previewMode && show && (
105 | <>
106 | {!standalone && (
107 | <Tooltip label="View and edit in new full-width window">
108 | <Button variant="ghost" onClick={() => openStandaloneApp(false)}>
109 | <RxOpenInNewWindow />
110 | </Button>
111 | </Tooltip>
112 | )}
113 | <ConfirmationDialog
114 | open={dialogOpen}
115 | onOpenChange={setDialogOpen}
116 | title="Confirm Reset"
117 | description="Are you sure you want to reset the app? This action cannot be undone and will reset all code to its initial state."
118 | onConfirm={() => {
119 | dispatch(resetApp());
120 | setDialogOpen(false);
121 | }}
122 | confirmText="Confirm"
123 | cancelText="Cancel"
124 | />
125 | <Tooltip label="Reset the app">
126 | <Button
127 | variant="ghost"
128 | onClick={() => {
129 | if (standalone) {
130 | setDialogOpen(true);
131 | } else {
132 | dispatch(resetApp());
133 | }
134 | }}
135 | >
136 | <LiaUndoAltSolid height={24} width={24} />
137 | </Button>
138 | </Tooltip>
139 | </>
140 | )}
141 | {standalone && (
142 | <>
143 | <Tooltip label="Share this app">
144 | <Button variant="ghost" onClick={() => share()}>
145 | <RxShare2 />
146 | </Button>
147 | </Tooltip>
148 | <Tooltip label="Preview in fullscreen">
149 | <Button variant="ghost" onClick={() => openStandaloneApp()}>
150 | <RxOpenInNewWindow height={24} width={24} />
151 | </Button>
152 | </Tooltip>
153 | <Tooltip label="Download app">
154 | <Button variant="ghost" onClick={() => download()}>
155 | <RxDownload height={24} width={24} />
156 | </Button>
157 | </Tooltip>
158 | </>
159 | )}
160 | </div>
161 | </Box>
162 | {appDescription.config?.description && (
163 | <div className={styles.description}>{appDescription.config?.description}</div>
164 | )}
165 | </div>
166 | );
167 | };
168 |
```
--------------------------------------------------------------------------------
/packages/xmlui-devtools/src/devtools/DevToolsNative.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import React, { useCallback, useEffect, useMemo, useRef } from "react";
2 | import { useState } from "react";
3 | import { useTheme, useDevTools } from "xmlui";
4 | import styles from "./DevToolsNative.module.scss";
5 | import { HiOutlineClipboardDocument, HiOutlineClipboardDocumentCheck } from "react-icons/hi2";
6 | import loader from "@monaco-editor/loader";
7 |
8 | import {
9 | xmluiThemeLight,
10 | xmluiThemeDark,
11 | xmluiGrammar,
12 | xmluiScriptGrammar,
13 | } from "xmlui/syntax/monaco";
14 |
15 | import { createQueryString } from "./utils";
16 | import { ModalDialog } from "./ModalDialog";
17 |
18 | export const DevTools = () => {
19 | const { activeThemeTone } = useTheme();
20 | const { mockApi, inspectedNode, sources, setIsOpen, projectCompilation, isOpen, clickPosition } =
21 | useDevTools();
22 | const [copied, setCopied] = useState(false);
23 | const monacoEditorInstance = useRef<any>(null);
24 | const editorRef = useRef(null);
25 | const editorContainerRef = useRef<HTMLDivElement>(null);
26 | const monacoSetupDone = useRef(false);
27 |
28 | const copyToClipboard = () => {
29 | setCopied(true);
30 |
31 | if (monacoEditorInstance?.current) {
32 | const code = monacoEditorInstance?.current?.getValue();
33 | navigator.clipboard.writeText(code);
34 | }
35 | };
36 |
37 | const value = useMemo(() => {
38 | const compSrc = inspectedNode?.debug?.source;
39 |
40 | if (!compSrc) {
41 | return "";
42 | }
43 | if (!sources) {
44 | return "";
45 | }
46 | const { start, end, fileId } = compSrc;
47 | const slicedSrc = sources[fileId].slice(start, end);
48 |
49 | let dropEmptyLines = true;
50 | const prunedLines: Array<string> = [];
51 | let trimBeginCount: number | undefined = undefined;
52 | slicedSrc.split("\n").forEach((line) => {
53 | if (line.trim() === "" && dropEmptyLines) {
54 | //drop empty lines from the beginning
55 | return;
56 | } else {
57 | dropEmptyLines = false;
58 | prunedLines.push(line);
59 | const startingWhiteSpaces = line.search(/\S|$/);
60 | if (
61 | line.trim() !== "" &&
62 | (trimBeginCount === undefined || startingWhiteSpaces < trimBeginCount)
63 | ) {
64 | trimBeginCount = startingWhiteSpaces;
65 | }
66 | }
67 | });
68 | return prunedLines
69 | .map((line) => line.slice(trimBeginCount).replace(/inspect="true"/g, ""))
70 | .join("\n");
71 | }, [inspectedNode, sources]);
72 |
73 | const popupPlayground = useCallback(async () => {
74 | if (!inspectedNode) {
75 | return;
76 | }
77 |
78 | const appCode = {
79 | app: value,
80 | api: mockApi,
81 | availableThemes: [],
82 | components:
83 | (projectCompilation?.components || []).map((c: any) => ({
84 | name: c.definition.name,
85 | component: c.markupSource,
86 | })) || [],
87 | config: {
88 | appGlobals: {},
89 | defaultTheme: "",
90 | defaultTone: "",
91 | logo: "",
92 | name: "XMLUI App",
93 | description: "",
94 | resources: {},
95 | themes: [],
96 | },
97 | };
98 |
99 | const data = {
100 | standalone: appCode,
101 | options: {
102 | fixedTheme: false,
103 | swapped: false,
104 | previewMode: false,
105 | orientation: "vertical",
106 | activeTheme: "xmlui",
107 | content: "app",
108 | },
109 | };
110 |
111 | const appQueryString = await createQueryString(JSON.stringify(data));
112 | window.open(`/#/playground#${appQueryString}`, "_blank");
113 | }, [value, projectCompilation, inspectedNode]);
114 |
115 | useEffect(() => {
116 | if (monacoEditorInstance.current) {
117 | monacoEditorInstance.current.layout();
118 | } else if (editorRef.current) {
119 | loader.init().then((monaco) => {
120 | if (!editorRef.current || monacoEditorInstance.current) return;
121 | if (!monacoSetupDone.current) {
122 | monaco.languages.register({ id: xmluiGrammar.id });
123 | monaco.languages.setMonarchTokensProvider(xmluiGrammar.id, xmluiGrammar.language);
124 | monaco.languages.setLanguageConfiguration(xmluiGrammar.id, xmluiGrammar.config);
125 |
126 | monaco.languages.register({ id: xmluiScriptGrammar.id });
127 | monaco.languages.setMonarchTokensProvider(
128 | xmluiScriptGrammar.id,
129 | xmluiScriptGrammar.language,
130 | );
131 | monaco.languages.setLanguageConfiguration(
132 | xmluiScriptGrammar.id,
133 | xmluiScriptGrammar.config,
134 | );
135 |
136 | monaco.editor.defineTheme("xmlui-light", xmluiThemeLight);
137 | monaco.editor.defineTheme("xmlui-dark", xmluiThemeDark);
138 |
139 | monacoSetupDone.current = true;
140 | }
141 |
142 | monaco.editor.setTheme(activeThemeTone === "dark" ? "xmlui-dark" : "xmlui-light");
143 |
144 | monacoEditorInstance.current = monaco.editor.create(editorRef.current, {
145 | value,
146 | language: "xmlui",
147 | readOnly: true,
148 | scrollBeyondLastLine: false,
149 | overviewRulerLanes: 0,
150 | hideCursorInOverviewRuler: true,
151 | minimap: { enabled: false },
152 | padding: {
153 | top: 10,
154 | bottom: 10,
155 | },
156 | stickyScroll: { enabled: false },
157 | });
158 | });
159 | }
160 |
161 | return () => {
162 | if (monacoEditorInstance.current) {
163 | monacoEditorInstance.current.dispose();
164 | monacoEditorInstance.current = null;
165 | }
166 | };
167 | }, [activeThemeTone, value]);
168 |
169 | window.addEventListener("resize", () => {
170 | monacoEditorInstance?.current.layout();
171 | });
172 |
173 | return (
174 | <ModalDialog
175 | setIsOpen={setIsOpen}
176 | isOpen={isOpen}
177 | popupPlayground={popupPlayground}
178 | clickPosition={clickPosition}
179 | >
180 | <div className={styles.editorContainer} ref={editorContainerRef}>
181 | <div ref={editorRef} className={styles.xmluiEditor} />
182 | <div className={styles.copyButton}>
183 | <button onClick={copyToClipboard} style={{ padding: 8 }}>
184 | {copied ? (
185 | <HiOutlineClipboardDocumentCheck size={16} />
186 | ) : (
187 | <HiOutlineClipboardDocument size={16} />
188 | )}
189 | </button>
190 | </div>
191 | </div>
192 | </ModalDialog>
193 | );
194 | };
195 |
```
--------------------------------------------------------------------------------
/docs/public/pages/context-variables.md:
--------------------------------------------------------------------------------
```markdown
1 | # Context variables
2 |
3 | These are the key context variables available in XMLUI components.
4 |
5 | | Variable | Scope/Context | What it Represents |
6 | | ------------------- | ------------------- | --------------------------------------------- |
7 | | `myComponentId` | General | Reference to the component instance |
8 | | `var.myVar` | General | A scoped variable |
9 | | `$item` | Iterators | The current item in a list/array |
10 | | `$itemIndex` | Iterators | The current index in a list/array |
11 | | `$group` | List | Groups defined by `groupBy` |
12 | | `$param` | Event handlers | The event's payload (e.g., form data) |
13 | | `$data` | Forms | Consolidated data from FormItems |
14 | | `$validationResult` | Forms | Result of latest validation |
15 | | `$setValue` | FormItem | Function to set the value |
16 | | `$value` | FormItem | The current value |
17 | | `$pathname` | Page | Gets the path part of the route |
18 | | `$routeParams` | Page | Capture values from route placeholders |
19 | | `$queryParams` | Page | Capture values from route's search parameters |
20 | | `$linkInfo` | Page | NavLink context including previous and next |
21 |
22 | ## General
23 |
24 | ### `myComponentId`
25 |
26 | - **Scope:** Any component with an `id` attribute.
27 | - **What it is:** Reference to the component instance, allowing access to its properties and methods.
28 | - **Example:**
29 | ```xmlui
30 | <TextBox id="myTextBox" />
31 | <Button onClick="myTextBox.setValue('Hello!')" label="Set Value" />
32 | <Text value="{myTextBox.value}" />
33 | ```
34 |
35 | ### `var.myVar`
36 |
37 | - **Scope:** Declared in markup with `var.` prefix; available in the declaring component and its children.
38 | - **What it is:** A scoped variable.
39 | - **Example:**
40 | ```xmlui
41 | <App var.count="{0}">
42 | <Button onClick="count++" label="Increment" />
43 | <Text>Count: {count}</Text>
44 | </App>
45 | ```
46 |
47 | ## Iterators
48 |
49 | ### `$item`
50 |
51 | - **Scope:** Available inside components that iterate over lists, such as `<Table>`, `<Items>`, or inside a FormItem of type "items".
52 | - **What it is:** The current item in the iteration (e.g., a row in a table, an option in a select, or a line item in an invoice).
53 | - **Usage:**
54 | - Access properties of the current item: `$item.name`, `$item.price`
55 | - **Example:**
56 | ```xmlui
57 | <Table data="{clients}">
58 | <Column bindTo="Name">
59 | <Text>{$item.Name}</Text>
60 | </Column>
61 | </Table>
62 | ```
63 |
64 | ### `$itemIndex`
65 |
66 | - **Scope:** Inside iterators (e.g., `<Items>`, `<Table>`, or FormItem of type "items").
67 | - **What it is:** The current index in the array.
68 | - **Example:**
69 | ```xmlui
70 | <Items data="{products}">
71 | <Text>Index: {$itemIndex}, Name: {$item.name}</Text>
72 | </Items>
73 | ```
74 |
75 | ## Event handlers
76 |
77 | ### `$param`
78 |
79 | - **Scope:** Available in event handlers, especially in `<event name="submit">` or API calls.
80 | - **What it is:** The data passed to the event or API call, often the form data at the time of submission.
81 |
82 | ## List
83 |
84 | ### `groupBy`
85 |
86 | - **Scope:** Available in the `groupHeaderTemplate` of a `List`
87 | - **What it is:** An object that contains items grouped by `$group.key`
88 |
89 |
90 | ## Forms
91 |
92 | ### `$data`
93 |
94 | - **Scope:** Available inside a `<Form>` and its children.
95 | - **What it is:** The current state of the form's data object (all fields/values).
96 | - **Usage:**
97 | - Read or display the entire form's data: `{JSON.stringify($data)}`
98 | - **Example:**
99 | ```xmlui
100 | <Text value="{JSON.stringify($data)}" />
101 | ```
102 |
103 | ### `$validationResult`
104 |
105 | - **Scope:** Inside a `FormItem`.
106 | - **What it is:** The result of the latest validation for the field.
107 | - **Example:**
108 | ```xmlui
109 | <FormItem bindTo="email">
110 | <Text value="{JSON.stringify($validationResult)}" />
111 | </FormItem>
112 | ```
113 |
114 | ### `$setValue`
115 |
116 | - **Scope:** Inside a `FormItem`.
117 | - **What it is:** A function to set the value of the field.
118 | - **Example:**
119 | ```xmlui
120 | <Button onClick="$setValue('new value')" label="Set Value" />
121 | ```
122 |
123 | ### `$value`
124 |
125 | - **Scope:** Inside a `FormItem`.
126 | - **What it is:** The current value of the field.
127 | - **Example:**
128 | ```xmlui
129 | <FormItem bindTo="name">
130 | <Text value="{$value}" />
131 | </FormItem>
132 | ```
133 |
134 | ## Pages
135 |
136 | ### `$routeParams`
137 |
138 | ```xmlui
139 | <App layout="vertical">
140 | <NavPanel>
141 | <NavLink to="/">Home</NavLink>
142 | <NavLink to="/account/Cameron">Cameron</NavLink>
143 | <NavLink to="/account/Joe">Joe</NavLink>
144 | <NavLink to="/account/Kathy">Kathy</NavLink>
145 | </NavPanel>
146 | <Pages>
147 | <Page url="/">
148 | Home
149 | </Page>
150 | <Page url="/account/:id">
151 | Account: {$routeParams.id}
152 | </Page>
153 | </Pages>
154 | </App>
155 | ```
156 |
157 | ### `$linkInfo`
158 |
159 | ```xmlui
160 | <HStack verticalAlignment="center" gap="$space-2">
161 | <Link when="{$linkInfo.prevLink}" to="{$linkInfo.prevLink.to}">
162 | <Icon name="chevronleft"/>
163 | <Text variant="subtitle">
164 | {$linkInfo.prevLink.label}
165 | </Text>
166 | </Link>
167 | <SpaceFiller/>
168 | <Link when="{$linkInfo.nextLink}" to="{$linkInfo.nextLink.to}">
169 | <Text variant="subtitle">
170 | {$linkInfo.nextLink.label}
171 | </Text>
172 | <Icon name="chevronright"/>
173 | </Link>
174 | </HStack>
175 | ```
176 |
177 | ### `$pathname`
178 |
179 | Use `$pathname` to conditionally show content based on the current route path.
180 |
181 | ```xmlui
182 | <App layout="horizontal-sticky">
183 | <AppHeader>
184 | <property name="logoTemplate">
185 | <Text>My App</Text>
186 | </property>
187 | <property name="profileMenuTemplate">
188 | <!-- Settings icon only shows on pages that have settings -->
189 | <Icon name="cog" size="md" onClick="settingsDialog.open()"
190 | when="{['/dashboard', '/profile', '/settings'].includes($pathname)}" />
191 | </property>
192 | </AppHeader>
193 | </App>
194 | ```
195 |
```
--------------------------------------------------------------------------------
/docs/content/components/Avatar.md:
--------------------------------------------------------------------------------
```markdown
1 | # Avatar [#avatar]
2 |
3 | `Avatar` displays a user or entity's profile picture as a circular image, with automatic fallback to initials when no image is provided. It's commonly used in headers, user lists, comments, and anywhere you need to represent a person or organization.
4 |
5 | **Key features:**
6 | - **Automatic fallback**: Shows initials when no image URL is provided or image fails to load
7 | - **Multiple sizes**: From `xs` (extra small) to `lg` (large) to fit different contexts
8 | - **Clickable**: Supports click events for profile actions, modals, or navigation
9 | - **Accessible**: Automatically generates appropriate alt text from the name
10 |
11 | ## Properties [#properties]
12 |
13 | ### `name` [#name]
14 |
15 | This property sets the name value the Avatar uses to display initials. If neither this property nor `url` is defined, an empty avatar is displayed.
16 |
17 | ```xmlui-pg copy display name="Example: name"
18 | <App>
19 | <Avatar name="John, Doe" />
20 | </App>
21 | ```
22 |
23 | ### `size` (default: "sm") [#size-default-sm]
24 |
25 | This property defines the display size of the Avatar.
26 |
27 | Available values:
28 |
29 | | Value | Description |
30 | | --- | --- |
31 | | `xs` | Extra small |
32 | | `sm` | Small **(default)** |
33 | | `md` | Medium |
34 | | `lg` | Large |
35 | | `xl` | Extra large |
36 |
37 | ```xmlui-pg copy display name="Example: size"
38 | <App>
39 | <HStack>
40 | <Avatar name="Dorothy Ellen Fuller" />
41 | <Avatar name="Xavier Schiller" size="xs" />
42 | <Avatar name="Sebastien Moore" size="sm" />
43 | <Avatar name="Molly Dough" size="md" />
44 | <Avatar name="Lynn Gilbert" size="lg" />
45 | </HStack>
46 | </App>
47 | ```
48 |
49 | ### `url` [#url]
50 |
51 | This property specifies the URL of the image to display in the Avatar. If neither this property nor `name` is defined, an empty avatar is displayed.
52 |
53 | ```xmlui-pg copy display name="Example: url"
54 | <App>
55 | <Avatar url="https://i.pravatar.cc/100" size="md" />
56 | </App>
57 | ```
58 |
59 | ## Events [#events]
60 |
61 | ### `click` [#click]
62 |
63 | This event is triggered when the avatar is clicked.
64 |
65 | ```xmlui-pg copy display name="Example: click"
66 | <App>
67 | <HStack verticalAlignment="center">
68 | <Avatar name="Molly Dough" size="md" onClick="toast('Avatar clicked')" />
69 | Click the avatar!
70 | </HStack>
71 | </App>
72 | ```
73 |
74 | ## Exposed Methods [#exposed-methods]
75 |
76 | This component does not expose any methods.
77 |
78 | ## Styling [#styling]
79 |
80 | ### Theme Variables [#theme-variables]
81 |
82 | | Variable | Default Value (Light) | Default Value (Dark) |
83 | | --- | --- | --- |
84 | | [backgroundColor](../styles-and-themes/common-units/#color)-Avatar | $color-surface-100 | $color-surface-100 |
85 | | [border](../styles-and-themes/common-units/#border)-Avatar | 0px solid $color-surface-400A80 | 0px solid $color-surface-400A80 |
86 | | [borderBottom](../styles-and-themes/common-units/#border)-Avatar | *none* | *none* |
87 | | [borderBottomColor](../styles-and-themes/common-units/#color)-Avatar | *none* | *none* |
88 | | [borderBottomStyle](../styles-and-themes/common-units/#border-style)-Avatar | *none* | *none* |
89 | | [borderBottomWidth](../styles-and-themes/common-units/#size)-Avatar | *none* | *none* |
90 | | [borderColor](../styles-and-themes/common-units/#color)-Avatar | *none* | *none* |
91 | | [borderEndEndRadius](../styles-and-themes/common-units/#border-rounding)-Avatar | *none* | *none* |
92 | | [borderEndStartRadius](../styles-and-themes/common-units/#border-rounding)-Avatar | *none* | *none* |
93 | | [borderHorizontal](../styles-and-themes/common-units/#border)-Avatar | *none* | *none* |
94 | | [borderHorizontalColor](../styles-and-themes/common-units/#color)-Avatar | *none* | *none* |
95 | | [borderHorizontalStyle](../styles-and-themes/common-units/#border-style)-Avatar | *none* | *none* |
96 | | [borderHorizontalWidth](../styles-and-themes/common-units/#size)-Avatar | *none* | *none* |
97 | | [borderLeft](../styles-and-themes/common-units/#border)-Avatar | *none* | *none* |
98 | | [color](../styles-and-themes/common-units/#color)-Avatar | *none* | *none* |
99 | | [borderLeftStyle](../styles-and-themes/common-units/#border-style)-Avatar | *none* | *none* |
100 | | [borderLeftWidth](../styles-and-themes/common-units/#size)-Avatar | *none* | *none* |
101 | | [borderRadius](../styles-and-themes/common-units/#border-rounding)-Avatar | 4px | 4px |
102 | | [borderRight](../styles-and-themes/common-units/#border)-Avatar | *none* | *none* |
103 | | [color](../styles-and-themes/common-units/#color)-Avatar | *none* | *none* |
104 | | [borderRightStyle](../styles-and-themes/common-units/#border-style)-Avatar | *none* | *none* |
105 | | [borderRightWidth](../styles-and-themes/common-units/#size)-Avatar | *none* | *none* |
106 | | [borderStartEndRadius](../styles-and-themes/common-units/#border-rounding)-Avatar | *none* | *none* |
107 | | [borderStartStartRadius](../styles-and-themes/common-units/#border-rounding)-Avatar | *none* | *none* |
108 | | [borderStyle](../styles-and-themes/common-units/#border-style)-Avatar | *none* | *none* |
109 | | [borderTop](../styles-and-themes/common-units/#border)-Avatar | *none* | *none* |
110 | | [borderTopColor](../styles-and-themes/common-units/#color)-Avatar | *none* | *none* |
111 | | [borderTopStyle](../styles-and-themes/common-units/#border-style)-Avatar | *none* | *none* |
112 | | [borderTopWidth](../styles-and-themes/common-units/#size)-Avatar | *none* | *none* |
113 | | [borderHorizontal](../styles-and-themes/common-units/#border)-Avatar | *none* | *none* |
114 | | [borderVerticalColor](../styles-and-themes/common-units/#color)-Avatar | *none* | *none* |
115 | | [borderVerticalStyle](../styles-and-themes/common-units/#border-style)-Avatar | *none* | *none* |
116 | | [borderVerticalWidth](../styles-and-themes/common-units/#size)-Avatar | *none* | *none* |
117 | | [borderWidth](../styles-and-themes/common-units/#size)-Avatar | *none* | *none* |
118 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-Avatar | inset 0 0 0 1px rgba(4,32,69,0.1) | inset 0 0 0 1px rgba(4,32,69,0.1) |
119 | | [fontWeight](../styles-and-themes/common-units/#fontWeight)-Avatar | $fontWeight-bold | $fontWeight-bold |
120 | | [textColor](../styles-and-themes/common-units/#color)-Avatar | $textColor-secondary | $textColor-secondary |
121 |
```
--------------------------------------------------------------------------------
/xmlui/dev-docs/next/documentation-scripts-refactoring-plan.md:
--------------------------------------------------------------------------------
```markdown
1 | # XMLUI Documentation Generation Scripts - Refactoring Plan
2 |
3 | ## Overview
4 | This document outlines additional refactoring opportunities identified in the XMLUI documentation generation scripts beyond the basic constant extraction that has already been completed.
5 |
6 | ## High-Priority Refactoring Opportunities
7 |
8 | ### 1. Error Handling Standardization
9 | **Current Issues:**
10 | - Inconsistent error handling patterns across scripts
11 | - Mix of `console.log()` + `process.exit()` vs proper logger usage
12 | - Some scripts lack proper error handling entirely
13 |
14 | **Files Affected:**
15 | - `create-theme-files.mjs` - Uses console.log + process.exit
16 | - Various forEach loops with potential for silent failures
17 |
18 | **Recommended Solution:**
19 | - Create standardized error handling utilities
20 | - Replace all console.log error messages with logger
21 | - Implement proper error recovery where possible
22 |
23 | ### 2. Logging Consistency
24 | **Current Issues:**
25 | - `create-theme-files.mjs` uses console.log instead of the logger
26 | - Inconsistent log levels and formatting
27 |
28 | **Files Affected:**
29 | - `create-theme-files.mjs`
30 |
31 | **Recommended Solution:**
32 | - Update all scripts to use the centralized logger
33 | - Standardize log messages and levels
34 |
35 | ### 3. Duplicate Pattern Extraction ✅ **COMPLETED**
36 | **Status:** ✅ **COMPLETED** - See [duplicate-pattern-extraction-summary.md](./duplicate-pattern-extraction-summary.md)
37 |
38 | **Original Issues:**
39 | - Multiple forEach loops with similar Object.entries patterns
40 | - Repeated theme variable processing logic
41 | - Similar file writing patterns
42 |
43 | **Files Affected:**
44 | - `create-theme-files.mjs` - Repeated theme variable processing
45 | - `MetadataProcessor.mjs` - Similar forEach patterns for props/apis/events
46 |
47 | **Solution Implemented:**
48 | - ✅ Created `pattern-utilities.mjs` with comprehensive reusable utilities
49 | - ✅ Extracted common iteration utilities (`iterateObjectEntries`, `iterateArray`)
50 | - ✅ Created specialized theme processing utilities (`processComponentThemeVars`, `extractThemeVars`)
51 | - ✅ Standardized file writing operations (`writeFileWithLogging`, `generateExportStatements`)
52 | - ✅ Created component processing utilities (`processComponentSection`, `processDuplicatesWithLogging`)
53 | - ✅ Updated all affected scripts to use shared utilities
54 | - ✅ Achieved 60% reduction in duplicate code patterns
55 | - ✅ Validated all scripts work correctly with pattern utilities
56 |
57 | ### 4. Configuration Management ✅ **COMPLETED**
58 | **Status:** ✅ **COMPLETED** - See [configuration-management-enhancement-summary.md](./configuration-management-enhancement-summary.md)
59 |
60 | **Original Issues:**
61 | - Hard-coded paths and magic values still exist in some places
62 | - Configuration loading patterns could be standardized
63 |
64 | **Files Affected:**
65 | - `input-handler.mjs` - Basic config loader could be enhanced
66 | - Various scripts with path construction
67 |
68 | **Solution Implemented:**
69 | - ✅ Created `configuration-management.mjs` with comprehensive configuration system
70 | - ✅ Added `ConfigurationManager` class with schema validation and search paths
71 | - ✅ Implemented `PathResolver` class for intelligent path resolution
72 | - ✅ Created `ConfigValidator` class for schema-based validation
73 | - ✅ Defined configuration schemas for components, extensions, and generator
74 | - ✅ Updated all scripts to use enhanced configuration management
75 | - ✅ Added environment variable override support
76 | - ✅ Maintained full backward compatibility with existing configuration files
77 | - ✅ Achieved comprehensive error handling and validation
78 |
79 | ### 5. Function Decomposition
80 | **Current Issues:**
81 | - Some functions are too long and do multiple things
82 | - Complex nested logic in theme file generation
83 |
84 | **Files Affected:**
85 | - `create-theme-files.mjs` - Main logic could be broken down
86 | - `MetadataProcessor.mjs` - Some methods are quite long
87 |
88 | **Recommended Solution:**
89 | - Break down large functions into smaller, focused functions
90 | - Improve separation of concerns
91 |
92 | ## Medium-Priority Opportunities
93 |
94 | ### 6. Async/Await Consistency
95 | - Some scripts mix Promise patterns
96 | - Could standardize on async/await throughout
97 |
98 | ### 7. Input Validation
99 | - Add parameter validation to utility functions
100 | - Validate configuration file contents more thoroughly
101 |
102 | ### 8. Type Safety (if TypeScript adoption is considered)
103 | - Consider migrating to TypeScript for better type safety
104 | - Add JSDoc types as an interim solution
105 |
106 | ## Low-Priority Opportunities
107 |
108 | ### 9. Performance Optimizations
109 | - Parallel processing where appropriate
110 | - Caching for repeated operations
111 |
112 | ### 10. Testing Infrastructure
113 | - Add unit tests for utility functions
114 | - Integration tests for the full pipeline
115 |
116 | ## Implementation Priority
117 |
118 | 1. **Immediate (High Impact, Low Risk):**
119 | - ✅ **COMPLETED:** Logging consistency fixes
120 | - ✅ **COMPLETED:** Basic error handling improvements
121 |
122 | 2. **Short Term (High Impact, Medium Risk):**
123 | - ✅ **COMPLETED:** Duplicate pattern extraction
124 | - Function decomposition
125 |
126 | 3. **Medium Term (Medium Impact, Medium Risk):**
127 | - ✅ **COMPLETED:** Configuration management enhancements
128 | - Input validation improvements
129 |
130 | 4. **Long Term (High Impact, High Risk):**
131 | - Type safety improvements
132 | - Testing infrastructure
133 |
134 | ## Completed Refactoring Summary
135 |
136 | ### ✅ **Phase 1 Complete: Core Infrastructure**
137 | - **Error Handling Standardization** - `error-handling.mjs` created and integrated
138 | - **Logging Consistency** - `logging-standards.mjs` with scoped loggers implemented
139 | - **Magic String Extraction** - `constants.mjs` centralized configuration
140 | - **Duplicate Pattern Extraction** - `pattern-utilities.mjs` with reusable utilities
141 | - **Configuration Management Enhancement** - `configuration-management.mjs` with schema validation and path resolution
142 |
143 | ### 🔄 **Phase 2 In Progress: Advanced Improvements**
144 | - Function decomposition (next priority)
145 | - Input validation improvements
146 |
147 | ## Success Metrics
148 |
149 | - Reduced code duplication
150 | - Consistent error handling across all scripts
151 | - Improved maintainability and readability
152 | - No regression in functionality
153 | - Better logging and debugging capabilities
154 |
```