This is page 18 of 186. Use http://codebase.md/xmlui-org/xmlui/tools/vscode/resources/assets/img/%7BimageSrc%7D?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-optimized.yml
│ ├── deploy-blog-swa.yml
│ ├── deploy-blog.yml
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs-swa.yml
│ ├── deploy-docs.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│ ├── launch.json
│ └── settings.json
├── blog
│ ├── .gitignore
│ ├── .gitkeep
│ ├── CHANGELOG.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── an-advanced-codefence.gif
│ │ │ │ ├── an-advanced-codefence.mp4
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.png
│ │ │ │ ├── codefence-runner.png
│ │ │ │ ├── integrated-blog-search.png
│ │ │ │ ├── lorem-ipsum.png
│ │ │ │ ├── playground-checkbox-source.png
│ │ │ │ ├── playground.png
│ │ │ │ ├── use-xmlui-mcp-to-find-a-howto.png
│ │ │ │ └── xmlui-demo-gallery.png
│ │ │ ├── introducing-xmlui.md
│ │ │ ├── lorem-ipsum.md
│ │ │ ├── newest-post.md
│ │ │ ├── older-post.md
│ │ │ ├── xmlui-playground.md
│ │ │ └── xmlui-powered-blog.md
│ │ ├── mockServiceWorker.js
│ │ ├── resources
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ └── for-download
│ │ │ │ └── xmlui
│ │ │ │ └── xmlui-standalone.umd.js
│ │ │ ├── github.svg
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ ├── rss.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ ├── staticwebapp.config.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ └── 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
│ │ ├── FancyButton.md
│ │ ├── HeroSection.md
│ │ └── ScrollToTop.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── pages
│ │ │ ├── _meta.json
│ │ │ ├── app-structure.md
│ │ │ ├── build-editor-component.md
│ │ │ ├── build-hello-world-component.md
│ │ │ ├── components-intro.md
│ │ │ ├── context-variables.md
│ │ │ ├── forms.md
│ │ │ ├── globals.md
│ │ │ ├── glossary.md
│ │ │ ├── helper-tags.md
│ │ │ ├── hosted-deployment.md
│ │ │ ├── howto
│ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md
│ │ │ │ ├── chain-a-refetch.md
│ │ │ │ ├── control-cache-invalidation.md
│ │ │ │ ├── debounce-user-input-for-api-calls.md
│ │ │ │ ├── debounce-with-changelistener.md
│ │ │ │ ├── debug-a-component.md
│ │ │ │ ├── delay-a-datasource-until-another-datasource-is-ready.md
│ │ │ │ ├── delegate-a-method.md
│ │ │ │ ├── do-custom-form-validation.md
│ │ │ │ ├── expose-a-method-from-a-component.md
│ │ │ │ ├── filter-and-transform-data-from-an-api.md
│ │ │ │ ├── group-items-in-list-by-a-property.md
│ │ │ │ ├── handle-background-operations.md
│ │ │ │ ├── hide-an-element-until-its-datasource-is-ready.md
│ │ │ │ ├── make-a-set-of-equal-width-cards.md
│ │ │ │ ├── make-a-table-responsive.md
│ │ │ │ ├── make-navpanel-width-responsive.md
│ │ │ │ ├── modify-a-value-reported-in-a-column.md
│ │ │ │ ├── paginate-a-list.md
│ │ │ │ ├── pass-data-to-a-modal-dialog.md
│ │ │ │ ├── react-to-button-click-not-keystrokes.md
│ │ │ │ ├── set-the-initial-value-of-a-select-from-fetched-data.md
│ │ │ │ ├── share-a-modaldialog-across-components.md
│ │ │ │ ├── sync-selections-between-table-and-list-views.md
│ │ │ │ ├── update-ui-optimistically.md
│ │ │ │ ├── use-built-in-form-validation.md
│ │ │ │ └── use-the-same-modaldialog-to-add-or-edit.md
│ │ │ ├── howto.md
│ │ │ ├── intro.md
│ │ │ ├── layout.md
│ │ │ ├── markup.md
│ │ │ ├── mcp.md
│ │ │ ├── modal-dialogs.md
│ │ │ ├── news-and-reviews.md
│ │ │ ├── reactive-intro.md
│ │ │ ├── refactoring.md
│ │ │ ├── routing-and-links.md
│ │ │ ├── samples
│ │ │ │ ├── color-palette.xmlui
│ │ │ │ ├── color-values.xmlui
│ │ │ │ ├── shadow-sizes.xmlui
│ │ │ │ ├── spacing-sizes.xmlui
│ │ │ │ ├── swatch.xmlui
│ │ │ │ ├── theme-gallery-brief.xmlui
│ │ │ │ └── theme-gallery.xmlui
│ │ │ ├── scoping.md
│ │ │ ├── scripting.md
│ │ │ ├── styles-and-themes
│ │ │ │ ├── common-units.md
│ │ │ │ ├── layout-props.md
│ │ │ │ ├── theme-variable-defaults.md
│ │ │ │ ├── theme-variables.md
│ │ │ │ └── themes.md
│ │ │ ├── template-properties.md
│ │ │ ├── test.md
│ │ │ ├── tutorial-01.md
│ │ │ ├── tutorial-02.md
│ │ │ ├── tutorial-03.md
│ │ │ ├── tutorial-04.md
│ │ │ ├── tutorial-05.md
│ │ │ ├── tutorial-06.md
│ │ │ ├── tutorial-07.md
│ │ │ ├── tutorial-08.md
│ │ │ ├── tutorial-09.md
│ │ │ ├── tutorial-10.md
│ │ │ ├── tutorial-11.md
│ │ │ ├── tutorial-12.md
│ │ │ ├── universal-properties.md
│ │ │ ├── user-defined-components.md
│ │ │ ├── vscode.md
│ │ │ ├── working-with-markdown.md
│ │ │ ├── working-with-text.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-charts
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── DonutChart.md
│ │ │ │ ├── LabelList.md
│ │ │ │ ├── Legend.md
│ │ │ │ ├── LineChart.md
│ │ │ │ └── PieChart.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ └── xmlui-spreadsheet
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ └── Spreadsheet.md
│ │ ├── resources
│ │ │ ├── devdocs
│ │ │ │ ├── debug-proxy-object-2.png
│ │ │ │ ├── debug-proxy-object.png
│ │ │ │ ├── table_editor_01.png
│ │ │ │ ├── table_editor_02.png
│ │ │ │ ├── table_editor_03.png
│ │ │ │ ├── table_editor_04.png
│ │ │ │ ├── table_editor_05.png
│ │ │ │ ├── table_editor_06.png
│ │ │ │ ├── table_editor_07.png
│ │ │ │ ├── table_editor_08.png
│ │ │ │ ├── table_editor_09.png
│ │ │ │ ├── table_editor_10.png
│ │ │ │ ├── table_editor_11.png
│ │ │ │ ├── table-editor-01.png
│ │ │ │ ├── table-editor-02.png
│ │ │ │ ├── table-editor-03.png
│ │ │ │ ├── table-editor-04.png
│ │ │ │ ├── table-editor-06.png
│ │ │ │ ├── table-editor-07.png
│ │ │ │ ├── table-editor-08.png
│ │ │ │ ├── table-editor-09.png
│ │ │ │ └── xmlui-rendering-of-tiptap-markdown.png
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ ├── clients.json
│ │ │ │ ├── daily-revenue.json
│ │ │ │ ├── dashboard-stats.json
│ │ │ │ ├── demo.xmlui
│ │ │ │ ├── demo.xmlui.xs
│ │ │ │ ├── downloads
│ │ │ │ │ └── downloads.json
│ │ │ │ ├── for-download
│ │ │ │ │ ├── index-with-api.html
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── mockApi.js
│ │ │ │ │ ├── start-darwin.sh
│ │ │ │ │ ├── start-linux.sh
│ │ │ │ │ ├── start.bat
│ │ │ │ │ └── xmlui
│ │ │ │ │ └── xmlui-standalone.umd.js
│ │ │ │ ├── getting-started
│ │ │ │ │ ├── cl-tutorial-final.zip
│ │ │ │ │ ├── cl-tutorial.zip
│ │ │ │ │ ├── cl-tutorial2.zip
│ │ │ │ │ ├── cl-tutorial3.zip
│ │ │ │ │ ├── cl-tutorial4.zip
│ │ │ │ │ ├── cl-tutorial5.zip
│ │ │ │ │ ├── cl-tutorial6.zip
│ │ │ │ │ ├── getting-started.zip
│ │ │ │ │ ├── hello-xmlui.zip
│ │ │ │ │ ├── xmlui-empty.zip
│ │ │ │ │ └── xmlui-starter.zip
│ │ │ │ ├── howto
│ │ │ │ │ └── component-icons
│ │ │ │ │ └── up-arrow.svg
│ │ │ │ ├── invoices.json
│ │ │ │ ├── monthly-status.json
│ │ │ │ ├── news-and-reviews.json
│ │ │ │ ├── products.json
│ │ │ │ ├── releases.json
│ │ │ │ ├── tutorials
│ │ │ │ │ ├── datasource
│ │ │ │ │ │ └── api.ts
│ │ │ │ │ └── p2do
│ │ │ │ │ ├── api.ts
│ │ │ │ │ └── todo-logo.svg
│ │ │ │ └── xmlui.json
│ │ │ ├── github.svg
│ │ │ ├── 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
│ ├── tsconfig.json
│ ├── xmlui-animations
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── Animation.tsx
│ │ ├── AnimationNative.tsx
│ │ ├── FadeAnimation.tsx
│ │ ├── FadeInAnimation.tsx
│ │ ├── FadeOutAnimation.tsx
│ │ ├── index.tsx
│ │ ├── ScaleAnimation.tsx
│ │ └── SlideInAnimation.tsx
│ ├── xmlui-devtools
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── devtools
│ │ │ │ ├── DevTools.tsx
│ │ │ │ ├── DevToolsNative.module.scss
│ │ │ │ ├── DevToolsNative.tsx
│ │ │ │ ├── ModalDialog.module.scss
│ │ │ │ ├── ModalDialog.tsx
│ │ │ │ ├── ModalVisibilityContext.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── editor
│ │ │ │ └── Editor.tsx
│ │ │ └── index.tsx
│ │ └── vite.config-overrides.ts
│ ├── xmlui-hello-world
│ │ ├── .gitignore
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── HelloWorld.module.scss
│ │ ├── HelloWorld.tsx
│ │ ├── HelloWorldNative.tsx
│ │ └── index.tsx
│ ├── xmlui-os-frames
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── IPhoneFrame.module.scss
│ │ ├── IPhoneFrame.tsx
│ │ ├── MacOSAppFrame.module.scss
│ │ ├── MacOSAppFrame.tsx
│ │ ├── WindowsAppFrame.module.scss
│ │ └── WindowsAppFrame.tsx
│ ├── xmlui-pdf
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ ├── components
│ │ │ │ └── Pdf.xmlui
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── LazyPdfNative.tsx
│ │ ├── Pdf.module.scss
│ │ └── Pdf.tsx
│ ├── xmlui-playground
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── hooks
│ │ │ ├── usePlayground.ts
│ │ │ └── useToast.ts
│ │ ├── index.tsx
│ │ ├── playground
│ │ │ ├── Box.module.scss
│ │ │ ├── Box.tsx
│ │ │ ├── CodeSelector.module.scss
│ │ │ ├── CodeSelector.tsx
│ │ │ ├── ConfirmationDialog.module.scss
│ │ │ ├── ConfirmationDialog.tsx
│ │ │ ├── Editor.tsx
│ │ │ ├── Header.module.scss
│ │ │ ├── Header.tsx
│ │ │ ├── Playground.tsx
│ │ │ ├── PlaygroundContent.module.scss
│ │ │ ├── PlaygroundContent.tsx
│ │ │ ├── PlaygroundNative.module.scss
│ │ │ ├── PlaygroundNative.tsx
│ │ │ ├── Preview.tsx
│ │ │ ├── StandalonePlayground.tsx
│ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ ├── ThemeSwitcher.module.scss
│ │ │ ├── ThemeSwitcher.tsx
│ │ │ └── utils.ts
│ │ ├── providers
│ │ │ ├── Toast.module.scss
│ │ │ └── ToastProvider.tsx
│ │ ├── state
│ │ │ └── store.ts
│ │ ├── themes
│ │ │ └── theme.ts
│ │ └── utils
│ │ └── helpers.ts
│ ├── xmlui-search
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Search.module.scss
│ │ └── Search.tsx
│ ├── xmlui-spreadsheet
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Spreadsheet.tsx
│ │ └── SpreadsheetNative.tsx
│ └── xmlui-website-blocks
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── demo
│ │ ├── components
│ │ │ ├── HeroBackgroundBreakoutPage.xmlui
│ │ │ ├── HeroBackgroundsPage.xmlui
│ │ │ ├── HeroContentsPage.xmlui
│ │ │ ├── HeroTextAlignPage.xmlui
│ │ │ ├── HeroTextPage.xmlui
│ │ │ └── HeroTonesPage.xmlui
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── default.ts
│ ├── index.html
│ ├── index.ts
│ ├── meta
│ │ └── componentsMetadata.ts
│ ├── package.json
│ ├── public
│ │ └── resources
│ │ ├── building.jpg
│ │ └── xmlui-logo.svg
│ └── src
│ ├── Carousel
│ │ ├── Carousel.module.scss
│ │ ├── Carousel.tsx
│ │ ├── CarouselContext.tsx
│ │ └── CarouselNative.tsx
│ ├── FancyButton
│ │ ├── FancyButton.module.scss
│ │ ├── FancyButton.tsx
│ │ └── FancyButton.xmlui
│ ├── Hello
│ │ ├── Hello.tsx
│ │ ├── Hello.xmlui
│ │ └── Hello.xmlui.xs
│ ├── HeroSection
│ │ ├── HeroSection.module.scss
│ │ ├── HeroSection.spec.ts
│ │ ├── HeroSection.tsx
│ │ └── HeroSectionNative.tsx
│ ├── index.tsx
│ ├── ScrollToTop
│ │ ├── ScrollToTop.module.scss
│ │ ├── ScrollToTop.tsx
│ │ └── ScrollToTopNative.tsx
│ └── vite-env.d.ts
├── playwright.config.ts
├── README.md
├── tools
│ ├── codefence
│ │ └── xmlui-code-fence-docs.md
│ ├── create-app
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── create-app.ts
│ │ ├── helpers
│ │ │ ├── copy.ts
│ │ │ ├── get-pkg-manager.ts
│ │ │ ├── git.ts
│ │ │ ├── install.ts
│ │ │ ├── is-folder-empty.ts
│ │ │ ├── is-writeable.ts
│ │ │ ├── make-dir.ts
│ │ │ └── validate-pkg.ts
│ │ ├── index.ts
│ │ ├── package.json
│ │ ├── templates
│ │ │ ├── default
│ │ │ │ └── ts
│ │ │ │ ├── gitignore
│ │ │ │ ├── index.html
│ │ │ │ ├── index.ts
│ │ │ │ ├── public
│ │ │ │ │ ├── mockServiceWorker.js
│ │ │ │ │ ├── resources
│ │ │ │ │ │ ├── favicon.ico
│ │ │ │ │ │ └── xmlui-logo.svg
│ │ │ │ │ └── serve.json
│ │ │ │ └── src
│ │ │ │ ├── components
│ │ │ │ │ ├── ApiAware.xmlui
│ │ │ │ │ ├── Home.xmlui
│ │ │ │ │ ├── IncButton.xmlui
│ │ │ │ │ └── PagePanel.xmlui
│ │ │ │ ├── config.ts
│ │ │ │ └── Main.xmlui
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ └── tsconfig.json
│ ├── create-xmlui-hello-world
│ │ ├── index.js
│ │ └── package.json
│ └── vscode
│ ├── .gitignore
│ ├── .vscode
│ │ ├── launch.json
│ │ └── tasks.json
│ ├── .vscodeignore
│ ├── build.sh
│ ├── CHANGELOG.md
│ ├── esbuild.js
│ ├── eslint.config.mjs
│ ├── formatter-docs.md
│ ├── generate-test-sample.sh
│ ├── LICENSE.md
│ ├── package-lock.json
│ ├── package.json
│ ├── README.md
│ ├── resources
│ │ ├── xmlui-logo.png
│ │ └── xmlui-markup-syntax-highlighting.png
│ ├── src
│ │ ├── extension.ts
│ │ └── server.ts
│ ├── syntaxes
│ │ └── xmlui.tmLanguage.json
│ ├── test-samples
│ │ └── sample.xmlui
│ ├── tsconfig.json
│ └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
├── .gitignore
├── bin
│ ├── bootstrap.cjs
│ ├── bootstrap.js
│ ├── build-lib.ts
│ ├── build.ts
│ ├── index.ts
│ ├── preview.ts
│ ├── start.ts
│ ├── vite-xmlui-plugin.ts
│ └── viteConfig.ts
├── CHANGELOG.md
├── conventions
│ ├── component-qa-checklist.md
│ ├── copilot-conventions.md
│ ├── create-xmlui-components.md
│ ├── mermaid.md
│ ├── testing-conventions.md
│ └── xmlui-in-a-nutshell.md
├── dev-docs
│ ├── accessibility.md
│ ├── build-system.md
│ ├── build-xmlui.md
│ ├── component-behaviors.md
│ ├── component-metadata.md
│ ├── components-with-options.md
│ ├── containers.md
│ ├── data-operations.md
│ ├── glossary.md
│ ├── index.md
│ ├── next
│ │ ├── component-dev-guide.md
│ │ ├── configuration-management-enhancement-summary.md
│ │ ├── documentation-scripts-refactoring-complete-summary.md
│ │ ├── documentation-scripts-refactoring-plan.md
│ │ ├── duplicate-pattern-extraction-summary.md
│ │ ├── error-handling-standardization-summary.md
│ │ ├── generating-component-reference.md
│ │ ├── index.md
│ │ ├── logging-consistency-implementation-summary.md
│ │ ├── project-build.md
│ │ ├── project-structure.md
│ │ ├── theme-context.md
│ │ ├── tiptap-design-considerations.md
│ │ ├── working-with-code.md
│ │ ├── xmlui-runtime-architecture
│ │ └── xmlui-wcag-accessibility-report.md
│ ├── react-fundamentals.md
│ ├── release-method.md
│ ├── standalone-app.md
│ ├── theme-variables-refactoring.md
│ ├── ud-components.md
│ └── xmlui-repo.md
├── package.json
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── extract-component-metadata.js
│ ├── generate-docs
│ │ ├── build-downloads-map.mjs
│ │ ├── build-pages-map.mjs
│ │ ├── components-config.json
│ │ ├── configuration-management.mjs
│ │ ├── constants.mjs
│ │ ├── create-theme-files.mjs
│ │ ├── DocsGenerator.mjs
│ │ ├── error-handling.mjs
│ │ ├── extensions-config.json
│ │ ├── folders.mjs
│ │ ├── generate-summary-files.mjs
│ │ ├── get-docs.mjs
│ │ ├── input-handler.mjs
│ │ ├── logger.mjs
│ │ ├── logging-standards.mjs
│ │ ├── MetadataProcessor.mjs
│ │ ├── pattern-utilities.mjs
│ │ └── utils.mjs
│ ├── generate-metadata-markdown.js
│ ├── get-langserver-metadata.js
│ ├── inline-links.mjs
│ └── README-e2e-summary.md
├── src
│ ├── abstractions
│ │ ├── _conventions.md
│ │ ├── ActionDefs.ts
│ │ ├── AppContextDefs.ts
│ │ ├── ComponentDefs.ts
│ │ ├── ContainerDefs.ts
│ │ ├── ExtensionDefs.ts
│ │ ├── FunctionDefs.ts
│ │ ├── RendererDefs.ts
│ │ ├── scripting
│ │ │ ├── BlockScope.ts
│ │ │ ├── Compilation.ts
│ │ │ ├── LogicalThread.ts
│ │ │ ├── LoopScope.ts
│ │ │ ├── modules.ts
│ │ │ ├── ScriptParserError.ts
│ │ │ ├── Token.ts
│ │ │ ├── TryScope.ts
│ │ │ └── TryScopeExp.ts
│ │ └── ThemingDefs.ts
│ ├── components
│ │ ├── _conventions.md
│ │ ├── abstractions.ts
│ │ ├── Accordion
│ │ │ ├── Accordion.md
│ │ │ ├── Accordion.module.scss
│ │ │ ├── Accordion.spec.ts
│ │ │ ├── Accordion.tsx
│ │ │ ├── AccordionContext.tsx
│ │ │ ├── AccordionItem.tsx
│ │ │ ├── AccordionItemNative.tsx
│ │ │ └── AccordionNative.tsx
│ │ ├── Animation
│ │ │ └── AnimationNative.tsx
│ │ ├── APICall
│ │ │ ├── APICall.md
│ │ │ ├── APICall.spec.ts
│ │ │ ├── APICall.tsx
│ │ │ └── APICallNative.tsx
│ │ ├── App
│ │ │ ├── App.md
│ │ │ ├── App.module.scss
│ │ │ ├── App.spec.ts
│ │ │ ├── App.tsx
│ │ │ ├── AppLayoutContext.ts
│ │ │ ├── AppNative.tsx
│ │ │ ├── AppStateContext.ts
│ │ │ ├── doc-resources
│ │ │ │ ├── condensed-sticky.xmlui
│ │ │ │ ├── condensed.xmlui
│ │ │ │ ├── horizontal-sticky.xmlui
│ │ │ │ ├── horizontal.xmlui
│ │ │ │ ├── vertical-full-header.xmlui
│ │ │ │ ├── vertical-sticky.xmlui
│ │ │ │ └── vertical.xmlui
│ │ │ ├── IndexerContext.ts
│ │ │ ├── LinkInfoContext.ts
│ │ │ ├── SearchContext.tsx
│ │ │ ├── Sheet.module.scss
│ │ │ └── Sheet.tsx
│ │ ├── AppHeader
│ │ │ ├── AppHeader.md
│ │ │ ├── AppHeader.module.scss
│ │ │ ├── AppHeader.spec.ts
│ │ │ ├── AppHeader.tsx
│ │ │ └── AppHeaderNative.tsx
│ │ ├── AppState
│ │ │ ├── AppState.md
│ │ │ ├── AppState.spec.ts
│ │ │ ├── AppState.tsx
│ │ │ └── AppStateNative.tsx
│ │ ├── AutoComplete
│ │ │ ├── AutoComplete.md
│ │ │ ├── AutoComplete.module.scss
│ │ │ ├── AutoComplete.spec.ts
│ │ │ ├── AutoComplete.tsx
│ │ │ ├── AutoCompleteContext.tsx
│ │ │ └── AutoCompleteNative.tsx
│ │ ├── Avatar
│ │ │ ├── Avatar.md
│ │ │ ├── Avatar.module.scss
│ │ │ ├── Avatar.spec.ts
│ │ │ ├── Avatar.tsx
│ │ │ └── AvatarNative.tsx
│ │ ├── Backdrop
│ │ │ ├── Backdrop.md
│ │ │ ├── Backdrop.module.scss
│ │ │ ├── Backdrop.spec.ts
│ │ │ ├── Backdrop.tsx
│ │ │ └── BackdropNative.tsx
│ │ ├── Badge
│ │ │ ├── Badge.md
│ │ │ ├── Badge.module.scss
│ │ │ ├── Badge.spec.ts
│ │ │ ├── Badge.tsx
│ │ │ └── BadgeNative.tsx
│ │ ├── Bookmark
│ │ │ ├── Bookmark.md
│ │ │ ├── Bookmark.module.scss
│ │ │ ├── Bookmark.spec.ts
│ │ │ ├── Bookmark.tsx
│ │ │ └── BookmarkNative.tsx
│ │ ├── Breakout
│ │ │ ├── Breakout.module.scss
│ │ │ ├── Breakout.spec.ts
│ │ │ ├── Breakout.tsx
│ │ │ └── BreakoutNative.tsx
│ │ ├── Button
│ │ │ ├── Button-style.spec.ts
│ │ │ ├── Button.md
│ │ │ ├── Button.module.scss
│ │ │ ├── Button.spec.ts
│ │ │ ├── Button.tsx
│ │ │ └── ButtonNative.tsx
│ │ ├── Card
│ │ │ ├── Card.md
│ │ │ ├── Card.module.scss
│ │ │ ├── Card.spec.ts
│ │ │ ├── Card.tsx
│ │ │ └── CardNative.tsx
│ │ ├── Carousel
│ │ │ ├── Carousel.md
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.spec.ts
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ ├── CarouselItem.tsx
│ │ │ ├── CarouselItemNative.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── ChangeListener
│ │ │ ├── ChangeListener.md
│ │ │ ├── ChangeListener.spec.ts
│ │ │ ├── ChangeListener.tsx
│ │ │ └── ChangeListenerNative.tsx
│ │ ├── chart-color-schemes.ts
│ │ ├── Charts
│ │ │ ├── AreaChart
│ │ │ │ ├── AreaChart.md
│ │ │ │ ├── AreaChart.spec.ts
│ │ │ │ ├── AreaChart.tsx
│ │ │ │ └── AreaChartNative.tsx
│ │ │ ├── BarChart
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── BarChart.module.scss
│ │ │ │ ├── BarChart.spec.ts
│ │ │ │ ├── BarChart.tsx
│ │ │ │ └── BarChartNative.tsx
│ │ │ ├── DonutChart
│ │ │ │ ├── DonutChart.spec.ts
│ │ │ │ └── DonutChart.tsx
│ │ │ ├── LabelList
│ │ │ │ ├── LabelList.module.scss
│ │ │ │ ├── LabelList.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ └── LabelListNative.tsx
│ │ │ ├── Legend
│ │ │ │ ├── Legend.spec.ts
│ │ │ │ ├── Legend.tsx
│ │ │ │ └── LegendNative.tsx
│ │ │ ├── LineChart
│ │ │ │ ├── LineChart.md
│ │ │ │ ├── LineChart.module.scss
│ │ │ │ ├── LineChart.spec.ts
│ │ │ │ ├── LineChart.tsx
│ │ │ │ └── LineChartNative.tsx
│ │ │ ├── PieChart
│ │ │ │ ├── PieChart.md
│ │ │ │ ├── PieChart.spec.ts
│ │ │ │ ├── PieChart.tsx
│ │ │ │ ├── PieChartNative.module.scss
│ │ │ │ └── PieChartNative.tsx
│ │ │ ├── RadarChart
│ │ │ │ ├── RadarChart.md
│ │ │ │ ├── RadarChart.spec.ts
│ │ │ │ ├── RadarChart.tsx
│ │ │ │ └── RadarChartNative.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── TooltipContent.module.scss
│ │ │ │ ├── TooltipContent.spec.ts
│ │ │ │ └── TooltipContent.tsx
│ │ │ └── utils
│ │ │ ├── abstractions.ts
│ │ │ └── ChartProvider.tsx
│ │ ├── Checkbox
│ │ │ ├── Checkbox.md
│ │ │ ├── Checkbox.spec.ts
│ │ │ └── Checkbox.tsx
│ │ ├── CodeBlock
│ │ │ ├── CodeBlock.module.scss
│ │ │ ├── CodeBlock.spec.ts
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CodeBlockNative.tsx
│ │ │ └── highlight-code.ts
│ │ ├── collectedComponentMetadata.ts
│ │ ├── ColorPicker
│ │ │ ├── ColorPicker.md
│ │ │ ├── ColorPicker.module.scss
│ │ │ ├── ColorPicker.spec.ts
│ │ │ ├── ColorPicker.tsx
│ │ │ └── ColorPickerNative.tsx
│ │ ├── Column
│ │ │ ├── Column.md
│ │ │ ├── Column.tsx
│ │ │ ├── ColumnNative.tsx
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ └── TableContext.tsx
│ │ ├── component-utils.ts
│ │ ├── ComponentProvider.tsx
│ │ ├── ComponentRegistryContext.tsx
│ │ ├── container-helpers.tsx
│ │ ├── ContentSeparator
│ │ │ ├── ContentSeparator.md
│ │ │ ├── ContentSeparator.module.scss
│ │ │ ├── ContentSeparator.spec.ts
│ │ │ ├── ContentSeparator.tsx
│ │ │ └── ContentSeparatorNative.tsx
│ │ ├── DataSource
│ │ │ ├── DataSource.md
│ │ │ └── DataSource.tsx
│ │ ├── DateInput
│ │ │ ├── DateInput.md
│ │ │ ├── DateInput.module.scss
│ │ │ ├── DateInput.spec.ts
│ │ │ ├── DateInput.tsx
│ │ │ └── DateInputNative.tsx
│ │ ├── DatePicker
│ │ │ ├── DatePicker.md
│ │ │ ├── DatePicker.module.scss
│ │ │ ├── DatePicker.spec.ts
│ │ │ ├── DatePicker.tsx
│ │ │ └── DatePickerNative.tsx
│ │ ├── DropdownMenu
│ │ │ ├── DropdownMenu.md
│ │ │ ├── DropdownMenu.module.scss
│ │ │ ├── DropdownMenu.spec.ts
│ │ │ ├── DropdownMenu.tsx
│ │ │ ├── DropdownMenuNative.tsx
│ │ │ ├── MenuItem.md
│ │ │ └── SubMenuItem.md
│ │ ├── EmojiSelector
│ │ │ ├── EmojiSelector.md
│ │ │ ├── EmojiSelector.spec.ts
│ │ │ ├── EmojiSelector.tsx
│ │ │ └── EmojiSelectorNative.tsx
│ │ ├── ExpandableItem
│ │ │ ├── ExpandableItem.module.scss
│ │ │ ├── ExpandableItem.spec.ts
│ │ │ ├── ExpandableItem.tsx
│ │ │ └── ExpandableItemNative.tsx
│ │ ├── FileInput
│ │ │ ├── FileInput.md
│ │ │ ├── FileInput.module.scss
│ │ │ ├── FileInput.spec.ts
│ │ │ ├── FileInput.tsx
│ │ │ └── FileInputNative.tsx
│ │ ├── FileUploadDropZone
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FileUploadDropZone.module.scss
│ │ │ ├── FileUploadDropZone.spec.ts
│ │ │ ├── FileUploadDropZone.tsx
│ │ │ └── FileUploadDropZoneNative.tsx
│ │ ├── FlowLayout
│ │ │ ├── FlowLayout.md
│ │ │ ├── FlowLayout.module.scss
│ │ │ ├── FlowLayout.spec.ts
│ │ │ ├── FlowLayout.spec.ts-snapshots
│ │ │ │ └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
│ │ │ ├── FlowLayout.tsx
│ │ │ └── FlowLayoutNative.tsx
│ │ ├── Footer
│ │ │ ├── Footer.md
│ │ │ ├── Footer.module.scss
│ │ │ ├── Footer.spec.ts
│ │ │ ├── Footer.tsx
│ │ │ └── FooterNative.tsx
│ │ ├── Form
│ │ │ ├── Form.md
│ │ │ ├── Form.module.scss
│ │ │ ├── Form.spec.ts
│ │ │ ├── Form.tsx
│ │ │ ├── formActions.ts
│ │ │ ├── FormContext.ts
│ │ │ └── FormNative.tsx
│ │ ├── FormItem
│ │ │ ├── FormItem.md
│ │ │ ├── FormItem.module.scss
│ │ │ ├── FormItem.spec.ts
│ │ │ ├── FormItem.tsx
│ │ │ ├── FormItemNative.tsx
│ │ │ ├── HelperText.module.scss
│ │ │ ├── HelperText.tsx
│ │ │ ├── ItemWithLabel.tsx
│ │ │ └── Validations.ts
│ │ ├── FormSection
│ │ │ ├── FormSection.md
│ │ │ ├── FormSection.ts
│ │ │ └── FormSection.xmlui
│ │ ├── Fragment
│ │ │ ├── Fragment.spec.ts
│ │ │ └── Fragment.tsx
│ │ ├── Heading
│ │ │ ├── abstractions.ts
│ │ │ ├── H1.md
│ │ │ ├── H1.spec.ts
│ │ │ ├── H2.md
│ │ │ ├── H2.spec.ts
│ │ │ ├── H3.md
│ │ │ ├── H3.spec.ts
│ │ │ ├── H4.md
│ │ │ ├── H4.spec.ts
│ │ │ ├── H5.md
│ │ │ ├── H5.spec.ts
│ │ │ ├── H6.md
│ │ │ ├── H6.spec.ts
│ │ │ ├── Heading.md
│ │ │ ├── Heading.module.scss
│ │ │ ├── Heading.spec.ts
│ │ │ ├── Heading.tsx
│ │ │ └── HeadingNative.tsx
│ │ ├── HoverCard
│ │ │ ├── HoverCard.tsx
│ │ │ └── HovercardNative.tsx
│ │ ├── HtmlTags
│ │ │ ├── HtmlTags.module.scss
│ │ │ ├── HtmlTags.spec.ts
│ │ │ └── HtmlTags.tsx
│ │ ├── Icon
│ │ │ ├── AdmonitionDanger.tsx
│ │ │ ├── AdmonitionInfo.tsx
│ │ │ ├── AdmonitionNote.tsx
│ │ │ ├── AdmonitionTip.tsx
│ │ │ ├── AdmonitionWarning.tsx
│ │ │ ├── ApiIcon.tsx
│ │ │ ├── ArrowDropDown.module.scss
│ │ │ ├── ArrowDropDown.tsx
│ │ │ ├── ArrowDropUp.module.scss
│ │ │ ├── ArrowDropUp.tsx
│ │ │ ├── ArrowLeft.module.scss
│ │ │ ├── ArrowLeft.tsx
│ │ │ ├── ArrowRight.module.scss
│ │ │ ├── ArrowRight.tsx
│ │ │ ├── Attach.tsx
│ │ │ ├── Binding.module.scss
│ │ │ ├── Binding.tsx
│ │ │ ├── BoardIcon.tsx
│ │ │ ├── BoxIcon.tsx
│ │ │ ├── CheckIcon.tsx
│ │ │ ├── ChevronDownIcon.tsx
│ │ │ ├── ChevronLeft.tsx
│ │ │ ├── ChevronRight.tsx
│ │ │ ├── ChevronUpIcon.tsx
│ │ │ ├── CodeFileIcon.tsx
│ │ │ ├── CodeSandbox.tsx
│ │ │ ├── CompactListIcon.tsx
│ │ │ ├── ContentCopyIcon.tsx
│ │ │ ├── DarkToLightIcon.tsx
│ │ │ ├── DatabaseIcon.module.scss
│ │ │ ├── DatabaseIcon.tsx
│ │ │ ├── DocFileIcon.tsx
│ │ │ ├── DocIcon.tsx
│ │ │ ├── DotMenuHorizontalIcon.tsx
│ │ │ ├── DotMenuIcon.tsx
│ │ │ ├── EmailIcon.tsx
│ │ │ ├── EmptyFolderIcon.tsx
│ │ │ ├── ErrorIcon.tsx
│ │ │ ├── ExpressionIcon.tsx
│ │ │ ├── FillPlusCricleIcon.tsx
│ │ │ ├── FilterIcon.tsx
│ │ │ ├── FolderIcon.tsx
│ │ │ ├── GlobeIcon.tsx
│ │ │ ├── HomeIcon.tsx
│ │ │ ├── HyperLinkIcon.tsx
│ │ │ ├── Icon.md
│ │ │ ├── Icon.module.scss
│ │ │ ├── Icon.spec.ts
│ │ │ ├── Icon.tsx
│ │ │ ├── IconNative.tsx
│ │ │ ├── ImageFileIcon.tsx
│ │ │ ├── Inspect.tsx
│ │ │ ├── LightToDark.tsx
│ │ │ ├── LinkIcon.tsx
│ │ │ ├── ListIcon.tsx
│ │ │ ├── LooseListIcon.tsx
│ │ │ ├── MoonIcon.tsx
│ │ │ ├── MoreOptionsIcon.tsx
│ │ │ ├── NoSortIcon.tsx
│ │ │ ├── PDFIcon.tsx
│ │ │ ├── PenIcon.tsx
│ │ │ ├── PhoneIcon.tsx
│ │ │ ├── PhotoIcon.tsx
│ │ │ ├── PlusIcon.tsx
│ │ │ ├── SearchIcon.tsx
│ │ │ ├── ShareIcon.tsx
│ │ │ ├── SortAscendingIcon.tsx
│ │ │ ├── SortDescendingIcon.tsx
│ │ │ ├── StarsIcon.tsx
│ │ │ ├── SunIcon.tsx
│ │ │ ├── svg
│ │ │ │ ├── admonition_danger.svg
│ │ │ │ ├── admonition_info.svg
│ │ │ │ ├── admonition_note.svg
│ │ │ │ ├── admonition_tip.svg
│ │ │ │ ├── admonition_warning.svg
│ │ │ │ ├── api.svg
│ │ │ │ ├── arrow-dropdown.svg
│ │ │ │ ├── arrow-left.svg
│ │ │ │ ├── arrow-right.svg
│ │ │ │ ├── arrow-up.svg
│ │ │ │ ├── attach.svg
│ │ │ │ ├── binding.svg
│ │ │ │ ├── box.svg
│ │ │ │ ├── bulb.svg
│ │ │ │ ├── code-file.svg
│ │ │ │ ├── code-sandbox.svg
│ │ │ │ ├── dark_to_light.svg
│ │ │ │ ├── database.svg
│ │ │ │ ├── doc.svg
│ │ │ │ ├── empty-folder.svg
│ │ │ │ ├── expression.svg
│ │ │ │ ├── eye-closed.svg
│ │ │ │ ├── eye-dark.svg
│ │ │ │ ├── eye.svg
│ │ │ │ ├── file-text.svg
│ │ │ │ ├── filter.svg
│ │ │ │ ├── folder.svg
│ │ │ │ ├── img.svg
│ │ │ │ ├── inspect.svg
│ │ │ │ ├── light_to_dark.svg
│ │ │ │ ├── moon.svg
│ │ │ │ ├── pdf.svg
│ │ │ │ ├── photo.svg
│ │ │ │ ├── share.svg
│ │ │ │ ├── stars.svg
│ │ │ │ ├── sun.svg
│ │ │ │ ├── trending-down.svg
│ │ │ │ ├── trending-level.svg
│ │ │ │ ├── trending-up.svg
│ │ │ │ ├── txt.svg
│ │ │ │ ├── unknown-file.svg
│ │ │ │ ├── unlink.svg
│ │ │ │ └── xls.svg
│ │ │ ├── TableDeleteColumnIcon.tsx
│ │ │ ├── TableDeleteRowIcon.tsx
│ │ │ ├── TableInsertColumnIcon.tsx
│ │ │ ├── TableInsertRowIcon.tsx
│ │ │ ├── TrashIcon.tsx
│ │ │ ├── TrendingDownIcon.tsx
│ │ │ ├── TrendingLevelIcon.tsx
│ │ │ ├── TrendingUpIcon.tsx
│ │ │ ├── TxtIcon.tsx
│ │ │ ├── UnknownFileIcon.tsx
│ │ │ ├── UnlinkIcon.tsx
│ │ │ ├── UserIcon.tsx
│ │ │ ├── WarningIcon.tsx
│ │ │ └── XlsIcon.tsx
│ │ ├── IconProvider.tsx
│ │ ├── IconRegistryContext.tsx
│ │ ├── IFrame
│ │ │ ├── IFrame.md
│ │ │ ├── IFrame.module.scss
│ │ │ ├── IFrame.spec.ts
│ │ │ ├── IFrame.tsx
│ │ │ └── IFrameNative.tsx
│ │ ├── Image
│ │ │ ├── Image.md
│ │ │ ├── Image.module.scss
│ │ │ ├── Image.spec.ts
│ │ │ ├── Image.tsx
│ │ │ └── ImageNative.tsx
│ │ ├── Input
│ │ │ ├── index.ts
│ │ │ ├── InputAdornment.module.scss
│ │ │ ├── InputAdornment.tsx
│ │ │ ├── InputDivider.module.scss
│ │ │ ├── InputDivider.tsx
│ │ │ ├── InputLabel.module.scss
│ │ │ ├── InputLabel.tsx
│ │ │ ├── PartialInput.module.scss
│ │ │ └── PartialInput.tsx
│ │ ├── InspectButton
│ │ │ ├── InspectButton.module.scss
│ │ │ └── InspectButton.tsx
│ │ ├── Items
│ │ │ ├── Items.md
│ │ │ ├── Items.spec.ts
│ │ │ ├── Items.tsx
│ │ │ └── ItemsNative.tsx
│ │ ├── Link
│ │ │ ├── Link.md
│ │ │ ├── Link.module.scss
│ │ │ ├── Link.spec.ts
│ │ │ ├── Link.tsx
│ │ │ └── LinkNative.tsx
│ │ ├── List
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── List.md
│ │ │ ├── List.module.scss
│ │ │ ├── List.spec.ts
│ │ │ ├── List.tsx
│ │ │ └── ListNative.tsx
│ │ ├── Logo
│ │ │ ├── doc-resources
│ │ │ │ └── xmlui-logo.svg
│ │ │ ├── Logo.md
│ │ │ ├── Logo.tsx
│ │ │ └── LogoNative.tsx
│ │ ├── Markdown
│ │ │ ├── CodeText.module.scss
│ │ │ ├── CodeText.tsx
│ │ │ ├── Markdown.md
│ │ │ ├── Markdown.module.scss
│ │ │ ├── Markdown.spec.ts
│ │ │ ├── Markdown.tsx
│ │ │ ├── MarkdownNative.tsx
│ │ │ ├── parse-binding-expr.ts
│ │ │ └── utils.ts
│ │ ├── metadata-helpers.ts
│ │ ├── ModalDialog
│ │ │ ├── ConfirmationModalContextProvider.tsx
│ │ │ ├── Dialog.module.scss
│ │ │ ├── Dialog.tsx
│ │ │ ├── ModalDialog.md
│ │ │ ├── ModalDialog.module.scss
│ │ │ ├── ModalDialog.spec.ts
│ │ │ ├── ModalDialog.tsx
│ │ │ ├── ModalDialogNative.tsx
│ │ │ └── ModalVisibilityContext.tsx
│ │ ├── NavGroup
│ │ │ ├── NavGroup.md
│ │ │ ├── NavGroup.module.scss
│ │ │ ├── NavGroup.spec.ts
│ │ │ ├── NavGroup.tsx
│ │ │ ├── NavGroupContext.ts
│ │ │ └── NavGroupNative.tsx
│ │ ├── NavLink
│ │ │ ├── NavLink.md
│ │ │ ├── NavLink.module.scss
│ │ │ ├── NavLink.spec.ts
│ │ │ ├── NavLink.tsx
│ │ │ └── NavLinkNative.tsx
│ │ ├── NavPanel
│ │ │ ├── NavPanel.md
│ │ │ ├── NavPanel.module.scss
│ │ │ ├── NavPanel.spec.ts
│ │ │ ├── NavPanel.tsx
│ │ │ └── NavPanelNative.tsx
│ │ ├── NestedApp
│ │ │ ├── AppWithCodeView.module.scss
│ │ │ ├── AppWithCodeView.tsx
│ │ │ ├── AppWithCodeViewNative.tsx
│ │ │ ├── defaultProps.tsx
│ │ │ ├── logo.svg
│ │ │ ├── NestedApp.module.scss
│ │ │ ├── NestedApp.tsx
│ │ │ ├── NestedAppNative.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── NoResult
│ │ │ ├── NoResult.md
│ │ │ ├── NoResult.module.scss
│ │ │ ├── NoResult.spec.ts
│ │ │ ├── NoResult.tsx
│ │ │ └── NoResultNative.tsx
│ │ ├── NumberBox
│ │ │ ├── numberbox-abstractions.ts
│ │ │ ├── NumberBox.md
│ │ │ ├── NumberBox.module.scss
│ │ │ ├── NumberBox.spec.ts
│ │ │ ├── NumberBox.tsx
│ │ │ └── NumberBoxNative.tsx
│ │ ├── Option
│ │ │ ├── Option.md
│ │ │ ├── Option.spec.ts
│ │ │ ├── Option.tsx
│ │ │ ├── OptionNative.tsx
│ │ │ └── OptionTypeProvider.tsx
│ │ ├── PageMetaTitle
│ │ │ ├── PageMetaTilteNative.tsx
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── PageMetaTitle.spec.ts
│ │ │ └── PageMetaTitle.tsx
│ │ ├── Pages
│ │ │ ├── Page.md
│ │ │ ├── Pages.md
│ │ │ ├── Pages.module.scss
│ │ │ ├── Pages.tsx
│ │ │ └── PagesNative.tsx
│ │ ├── Pagination
│ │ │ ├── Pagination.md
│ │ │ ├── Pagination.module.scss
│ │ │ ├── Pagination.spec.ts
│ │ │ ├── Pagination.tsx
│ │ │ └── PaginationNative.tsx
│ │ ├── PositionedContainer
│ │ │ ├── PositionedContainer.module.scss
│ │ │ ├── PositionedContainer.tsx
│ │ │ └── PositionedContainerNative.tsx
│ │ ├── ProfileMenu
│ │ │ ├── ProfileMenu.module.scss
│ │ │ └── ProfileMenu.tsx
│ │ ├── ProgressBar
│ │ │ ├── ProgressBar.md
│ │ │ ├── ProgressBar.module.scss
│ │ │ ├── ProgressBar.spec.ts
│ │ │ ├── ProgressBar.tsx
│ │ │ └── ProgressBarNative.tsx
│ │ ├── Queue
│ │ │ ├── Queue.md
│ │ │ ├── Queue.spec.ts
│ │ │ ├── Queue.tsx
│ │ │ ├── queueActions.ts
│ │ │ └── QueueNative.tsx
│ │ ├── RadioGroup
│ │ │ ├── RadioGroup.md
│ │ │ ├── RadioGroup.module.scss
│ │ │ ├── RadioGroup.spec.ts
│ │ │ ├── RadioGroup.tsx
│ │ │ ├── RadioGroupNative.tsx
│ │ │ ├── RadioItem.tsx
│ │ │ └── RadioItemNative.tsx
│ │ ├── RealTimeAdapter
│ │ │ ├── RealTimeAdapter.tsx
│ │ │ └── RealTimeAdapterNative.tsx
│ │ ├── Redirect
│ │ │ ├── Redirect.md
│ │ │ ├── Redirect.spec.ts
│ │ │ └── Redirect.tsx
│ │ ├── ResponsiveBar
│ │ │ ├── README.md
│ │ │ ├── ResponsiveBar.md
│ │ │ ├── ResponsiveBar.module.scss
│ │ │ ├── ResponsiveBar.spec.ts
│ │ │ ├── ResponsiveBar.tsx
│ │ │ └── ResponsiveBarNative.tsx
│ │ ├── Select
│ │ │ ├── HiddenOption.tsx
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ └── SelectNative.tsx
│ │ ├── SelectionStore
│ │ │ ├── SelectionStore.md
│ │ │ ├── SelectionStore.tsx
│ │ │ └── SelectionStoreNative.tsx
│ │ ├── Slider
│ │ │ ├── Slider.md
│ │ │ ├── Slider.module.scss
│ │ │ ├── Slider.spec.ts
│ │ │ ├── Slider.tsx
│ │ │ └── SliderNative.tsx
│ │ ├── Slot
│ │ │ ├── Slot.md
│ │ │ ├── Slot.spec.ts
│ │ │ └── Slot.ts
│ │ ├── SlotItem.tsx
│ │ ├── SpaceFiller
│ │ │ ├── SpaceFiller.md
│ │ │ ├── SpaceFiller.module.scss
│ │ │ ├── SpaceFiller.spec.ts
│ │ │ ├── SpaceFiller.tsx
│ │ │ └── SpaceFillerNative.tsx
│ │ ├── Spinner
│ │ │ ├── Spinner.md
│ │ │ ├── Spinner.module.scss
│ │ │ ├── Spinner.spec.ts
│ │ │ ├── Spinner.tsx
│ │ │ └── SpinnerNative.tsx
│ │ ├── Splitter
│ │ │ ├── HSplitter.md
│ │ │ ├── HSplitter.spec.ts
│ │ │ ├── Splitter.md
│ │ │ ├── Splitter.module.scss
│ │ │ ├── Splitter.spec.ts
│ │ │ ├── Splitter.tsx
│ │ │ ├── SplitterNative.tsx
│ │ │ ├── utils.ts
│ │ │ ├── VSplitter.md
│ │ │ └── VSplitter.spec.ts
│ │ ├── Stack
│ │ │ ├── CHStack.md
│ │ │ ├── CHStack.spec.ts
│ │ │ ├── CVStack.md
│ │ │ ├── CVStack.spec.ts
│ │ │ ├── HStack.md
│ │ │ ├── HStack.spec.ts
│ │ │ ├── Stack.md
│ │ │ ├── Stack.module.scss
│ │ │ ├── Stack.spec.ts
│ │ │ ├── Stack.tsx
│ │ │ ├── StackNative.tsx
│ │ │ ├── VStack.md
│ │ │ └── VStack.spec.ts
│ │ ├── StickyBox
│ │ │ ├── StickyBox.md
│ │ │ ├── StickyBox.module.scss
│ │ │ ├── StickyBox.tsx
│ │ │ └── StickyBoxNative.tsx
│ │ ├── Switch
│ │ │ ├── Switch.md
│ │ │ ├── Switch.spec.ts
│ │ │ └── Switch.tsx
│ │ ├── Table
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── react-table-config.d.ts
│ │ │ ├── Table.md
│ │ │ ├── Table.module.scss
│ │ │ ├── Table.spec.ts
│ │ │ ├── Table.tsx
│ │ │ ├── TableNative.tsx
│ │ │ └── useRowSelection.tsx
│ │ ├── TableOfContents
│ │ │ ├── TableOfContents.module.scss
│ │ │ ├── TableOfContents.spec.ts
│ │ │ ├── TableOfContents.tsx
│ │ │ └── TableOfContentsNative.tsx
│ │ ├── Tabs
│ │ │ ├── TabContext.tsx
│ │ │ ├── TabItem.md
│ │ │ ├── TabItem.tsx
│ │ │ ├── TabItemNative.tsx
│ │ │ ├── Tabs.md
│ │ │ ├── Tabs.module.scss
│ │ │ ├── Tabs.spec.ts
│ │ │ ├── Tabs.tsx
│ │ │ └── TabsNative.tsx
│ │ ├── Text
│ │ │ ├── Text.md
│ │ │ ├── Text.module.scss
│ │ │ ├── Text.spec.ts
│ │ │ ├── Text.tsx
│ │ │ └── TextNative.tsx
│ │ ├── TextArea
│ │ │ ├── TextArea.md
│ │ │ ├── TextArea.module.scss
│ │ │ ├── TextArea.spec.ts
│ │ │ ├── TextArea.tsx
│ │ │ ├── TextAreaNative.tsx
│ │ │ ├── TextAreaResizable.tsx
│ │ │ └── useComposedRef.ts
│ │ ├── TextBox
│ │ │ ├── TextBox.md
│ │ │ ├── TextBox.module.scss
│ │ │ ├── TextBox.spec.ts
│ │ │ ├── TextBox.tsx
│ │ │ └── TextBoxNative.tsx
│ │ ├── Theme
│ │ │ ├── NotificationToast.tsx
│ │ │ ├── Theme.md
│ │ │ ├── Theme.module.scss
│ │ │ ├── Theme.spec.ts
│ │ │ ├── Theme.tsx
│ │ │ └── ThemeNative.tsx
│ │ ├── TimeInput
│ │ │ ├── TimeInput.md
│ │ │ ├── TimeInput.module.scss
│ │ │ ├── TimeInput.spec.ts
│ │ │ ├── TimeInput.tsx
│ │ │ ├── TimeInputNative.tsx
│ │ │ └── utils.ts
│ │ ├── Timer
│ │ │ ├── Timer.md
│ │ │ ├── Timer.spec.ts
│ │ │ ├── Timer.tsx
│ │ │ └── TimerNative.tsx
│ │ ├── Toggle
│ │ │ ├── Toggle.module.scss
│ │ │ └── Toggle.tsx
│ │ ├── ToneChangerButton
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneChangerButton.spec.ts
│ │ │ └── ToneChangerButton.tsx
│ │ ├── ToneSwitch
│ │ │ ├── ToneSwitch.md
│ │ │ ├── ToneSwitch.module.scss
│ │ │ ├── ToneSwitch.spec.ts
│ │ │ ├── ToneSwitch.tsx
│ │ │ └── ToneSwitchNative.tsx
│ │ ├── Tooltip
│ │ │ ├── Tooltip.md
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.spec.ts
│ │ │ ├── Tooltip.tsx
│ │ │ └── TooltipNative.tsx
│ │ ├── Tree
│ │ │ ├── testData.ts
│ │ │ ├── Tree-dynamic.spec.ts
│ │ │ ├── Tree-icons.spec.ts
│ │ │ ├── Tree.md
│ │ │ ├── Tree.spec.ts
│ │ │ ├── TreeComponent.module.scss
│ │ │ ├── TreeComponent.tsx
│ │ │ └── TreeNative.tsx
│ │ ├── TreeDisplay
│ │ │ ├── TreeDisplay.md
│ │ │ ├── TreeDisplay.module.scss
│ │ │ ├── TreeDisplay.tsx
│ │ │ └── TreeDisplayNative.tsx
│ │ ├── ValidationSummary
│ │ │ ├── ValidationSummary.module.scss
│ │ │ └── ValidationSummary.tsx
│ │ └── VisuallyHidden.tsx
│ ├── components-core
│ │ ├── abstractions
│ │ │ ├── ComponentRenderer.ts
│ │ │ ├── LoaderRenderer.ts
│ │ │ ├── standalone.ts
│ │ │ └── treeAbstractions.ts
│ │ ├── action
│ │ │ ├── actions.ts
│ │ │ ├── APICall.tsx
│ │ │ ├── FileDownloadAction.tsx
│ │ │ ├── FileUploadAction.tsx
│ │ │ ├── NavigateAction.tsx
│ │ │ └── TimedAction.tsx
│ │ ├── ApiBoundComponent.tsx
│ │ ├── appContext
│ │ │ ├── date-functions.ts
│ │ │ ├── math-function.ts
│ │ │ └── misc-utils.ts
│ │ ├── AppContext.tsx
│ │ ├── behaviors
│ │ │ ├── Behavior.tsx
│ │ │ └── CoreBehaviors.tsx
│ │ ├── component-hooks.ts
│ │ ├── ComponentDecorator.tsx
│ │ ├── ComponentViewer.tsx
│ │ ├── CompoundComponent.tsx
│ │ ├── constants.ts
│ │ ├── DebugViewProvider.tsx
│ │ ├── descriptorHelper.ts
│ │ ├── devtools
│ │ │ ├── InspectorDialog.module.scss
│ │ │ ├── InspectorDialog.tsx
│ │ │ └── InspectorDialogVisibilityContext.tsx
│ │ ├── EngineError.ts
│ │ ├── event-handlers.ts
│ │ ├── InspectorButton.module.scss
│ │ ├── InspectorContext.tsx
│ │ ├── interception
│ │ │ ├── abstractions.ts
│ │ │ ├── ApiInterceptor.ts
│ │ │ ├── ApiInterceptorProvider.tsx
│ │ │ ├── apiInterceptorWorker.ts
│ │ │ ├── Backend.ts
│ │ │ ├── Errors.ts
│ │ │ ├── IndexedDb.ts
│ │ │ ├── initMock.ts
│ │ │ ├── InMemoryDb.ts
│ │ │ ├── ReadonlyCollection.ts
│ │ │ └── useApiInterceptorContext.tsx
│ │ ├── loader
│ │ │ ├── ApiLoader.tsx
│ │ │ ├── DataLoader.tsx
│ │ │ ├── ExternalDataLoader.tsx
│ │ │ ├── Loader.tsx
│ │ │ ├── MockLoaderRenderer.tsx
│ │ │ └── PageableLoader.tsx
│ │ ├── LoaderComponent.tsx
│ │ ├── markup-check.ts
│ │ ├── parts.ts
│ │ ├── renderers.ts
│ │ ├── rendering
│ │ │ ├── AppContent.tsx
│ │ │ ├── AppRoot.tsx
│ │ │ ├── AppWrapper.tsx
│ │ │ ├── buildProxy.ts
│ │ │ ├── collectFnVarDeps.ts
│ │ │ ├── ComponentAdapter.tsx
│ │ │ ├── ComponentWrapper.tsx
│ │ │ ├── Container.tsx
│ │ │ ├── containers.ts
│ │ │ ├── ContainerWrapper.tsx
│ │ │ ├── ErrorBoundary.module.scss
│ │ │ ├── ErrorBoundary.tsx
│ │ │ ├── InvalidComponent.module.scss
│ │ │ ├── InvalidComponent.tsx
│ │ │ ├── nodeUtils.ts
│ │ │ ├── reducer.ts
│ │ │ ├── renderChild.tsx
│ │ │ ├── StandaloneComponent.tsx
│ │ │ ├── StateContainer.tsx
│ │ │ ├── UnknownComponent.module.scss
│ │ │ ├── UnknownComponent.tsx
│ │ │ └── valueExtractor.ts
│ │ ├── reportEngineError.ts
│ │ ├── RestApiProxy.ts
│ │ ├── script-runner
│ │ │ ├── asyncProxy.ts
│ │ │ ├── AttributeValueParser.ts
│ │ │ ├── bannedFunctions.ts
│ │ │ ├── BindingTreeEvaluationContext.ts
│ │ │ ├── eval-tree-async.ts
│ │ │ ├── eval-tree-common.ts
│ │ │ ├── eval-tree-sync.ts
│ │ │ ├── ParameterParser.ts
│ │ │ ├── process-statement-async.ts
│ │ │ ├── process-statement-common.ts
│ │ │ ├── process-statement-sync.ts
│ │ │ ├── ScriptingSourceTree.ts
│ │ │ ├── simplify-expression.ts
│ │ │ ├── statement-queue.ts
│ │ │ └── visitors.ts
│ │ ├── StandaloneApp.tsx
│ │ ├── StandaloneExtensionManager.ts
│ │ ├── TableOfContentsContext.tsx
│ │ ├── theming
│ │ │ ├── _themes.scss
│ │ │ ├── component-layout-resolver.ts
│ │ │ ├── extendThemeUtils.ts
│ │ │ ├── hvar.ts
│ │ │ ├── layout-resolver.ts
│ │ │ ├── parse-layout-props.ts
│ │ │ ├── StyleContext.tsx
│ │ │ ├── StyleRegistry.ts
│ │ │ ├── ThemeContext.tsx
│ │ │ ├── ThemeProvider.tsx
│ │ │ ├── themes
│ │ │ │ ├── base-utils.ts
│ │ │ │ ├── palette.ts
│ │ │ │ ├── root.ts
│ │ │ │ ├── solid.ts
│ │ │ │ ├── theme-colors.ts
│ │ │ │ └── xmlui.ts
│ │ │ ├── themeVars.module.scss
│ │ │ ├── themeVars.ts
│ │ │ ├── transformThemeVars.ts
│ │ │ └── utils.ts
│ │ ├── utils
│ │ │ ├── actionUtils.ts
│ │ │ ├── audio-utils.ts
│ │ │ ├── base64-utils.ts
│ │ │ ├── compound-utils.ts
│ │ │ ├── css-utils.ts
│ │ │ ├── DataLoaderQueryKeyGenerator.ts
│ │ │ ├── date-utils.ts
│ │ │ ├── extractParam.ts
│ │ │ ├── hooks.tsx
│ │ │ ├── LruCache.ts
│ │ │ ├── mergeProps.ts
│ │ │ ├── misc.ts
│ │ │ ├── request-params.ts
│ │ │ ├── statementUtils.ts
│ │ │ └── treeUtils.ts
│ │ └── xmlui-parser.ts
│ ├── index-standalone.ts
│ ├── index.scss
│ ├── index.ts
│ ├── language-server
│ │ ├── server-common.ts
│ │ ├── server-web-worker.ts
│ │ ├── server.ts
│ │ ├── services
│ │ │ ├── common
│ │ │ │ ├── docs-generation.ts
│ │ │ │ ├── lsp-utils.ts
│ │ │ │ ├── metadata-utils.ts
│ │ │ │ └── syntax-node-utilities.ts
│ │ │ ├── completion.ts
│ │ │ ├── diagnostic.ts
│ │ │ ├── format.ts
│ │ │ └── hover.ts
│ │ └── xmlui-metadata-generated.js
│ ├── logging
│ │ ├── LoggerContext.tsx
│ │ ├── LoggerInitializer.tsx
│ │ ├── LoggerService.ts
│ │ └── xmlui.ts
│ ├── logo.svg
│ ├── parsers
│ │ ├── common
│ │ │ ├── GenericToken.ts
│ │ │ ├── InputStream.ts
│ │ │ └── utils.ts
│ │ ├── scripting
│ │ │ ├── code-behind-collect.ts
│ │ │ ├── Lexer.ts
│ │ │ ├── modules.ts
│ │ │ ├── Parser.ts
│ │ │ ├── ParserError.ts
│ │ │ ├── ScriptingNodeTypes.ts
│ │ │ ├── TokenTrait.ts
│ │ │ ├── TokenType.ts
│ │ │ └── tree-visitor.ts
│ │ ├── style-parser
│ │ │ ├── errors.ts
│ │ │ ├── source-tree.ts
│ │ │ ├── StyleInputStream.ts
│ │ │ ├── StyleLexer.ts
│ │ │ ├── StyleParser.ts
│ │ │ └── tokens.ts
│ │ └── xmlui-parser
│ │ ├── CharacterCodes.ts
│ │ ├── diagnostics.ts
│ │ ├── fileExtensions.ts
│ │ ├── index.ts
│ │ ├── lint.ts
│ │ ├── parser.ts
│ │ ├── ParserError.ts
│ │ ├── scanner.ts
│ │ ├── syntax-kind.ts
│ │ ├── syntax-node.ts
│ │ ├── transform.ts
│ │ ├── utils.ts
│ │ ├── xmlui-serializer.ts
│ │ └── xmlui-tree.ts
│ ├── react-app-env.d.ts
│ ├── syntax
│ │ ├── monaco
│ │ │ ├── grammar.monacoLanguage.ts
│ │ │ ├── index.ts
│ │ │ ├── xmlui-dark.ts
│ │ │ ├── xmlui-light.ts
│ │ │ └── xmluiscript.monacoLanguage.ts
│ │ └── textMate
│ │ ├── index.ts
│ │ ├── xmlui-dark.json
│ │ ├── xmlui-light.json
│ │ ├── xmlui.json
│ │ └── xmlui.tmLanguage.json
│ ├── testing
│ │ ├── assertions.ts
│ │ ├── component-test-helpers.ts
│ │ ├── ComponentDrivers.ts
│ │ ├── drivers
│ │ │ ├── DateInputDriver.ts
│ │ │ ├── index.ts
│ │ │ ├── ModalDialogDriver.ts
│ │ │ ├── NumberBoxDriver.ts
│ │ │ ├── TextBoxDriver.ts
│ │ │ ├── TimeInputDriver.ts
│ │ │ ├── TimerDriver.ts
│ │ │ └── TreeDriver.ts
│ │ ├── fixtures.ts
│ │ ├── index.ts
│ │ ├── infrastructure
│ │ │ ├── index.html
│ │ │ ├── main.tsx
│ │ │ ├── public
│ │ │ │ ├── mockServiceWorker.js
│ │ │ │ ├── resources
│ │ │ │ │ ├── bell.svg
│ │ │ │ │ ├── box.svg
│ │ │ │ │ ├── doc.svg
│ │ │ │ │ ├── eye.svg
│ │ │ │ │ ├── flower-640x480.jpg
│ │ │ │ │ ├── sun.svg
│ │ │ │ │ ├── test-image-100x100.jpg
│ │ │ │ │ └── txt.svg
│ │ │ │ └── serve.json
│ │ │ └── TestBed.tsx
│ │ └── themed-app-test-helpers.ts
│ └── vite-env.d.ts
├── tests
│ ├── components
│ │ ├── CodeBlock
│ │ │ └── hightlight-code.test.ts
│ │ ├── playground-pattern.test.ts
│ │ └── Tree
│ │ └── Tree-states.test.ts
│ ├── components-core
│ │ ├── abstractions
│ │ │ └── treeAbstractions.test.ts
│ │ ├── container
│ │ │ └── buildProxy.test.ts
│ │ ├── interception
│ │ │ ├── orderBy.test.ts
│ │ │ ├── ReadOnlyCollection.test.ts
│ │ │ └── request-param-converter.test.ts
│ │ ├── scripts-runner
│ │ │ ├── AttributeValueParser.test.ts
│ │ │ ├── eval-tree-arrow-async.test.ts
│ │ │ ├── eval-tree-arrow.test.ts
│ │ │ ├── eval-tree-func-decl-async.test.ts
│ │ │ ├── eval-tree-func-decl.test.ts
│ │ │ ├── eval-tree-pre-post.test.ts
│ │ │ ├── eval-tree-regression.test.ts
│ │ │ ├── eval-tree.test.ts
│ │ │ ├── function-proxy.test.ts
│ │ │ ├── parser-regression.test.ts
│ │ │ ├── process-event.test.ts
│ │ │ ├── process-function.test.ts
│ │ │ ├── process-implicit-context.test.ts
│ │ │ ├── process-statement-asgn.test.ts
│ │ │ ├── process-statement-destruct.test.ts
│ │ │ ├── process-statement-regs.test.ts
│ │ │ ├── process-statement-sync.test.ts
│ │ │ ├── process-statement.test.ts
│ │ │ ├── process-switch-sync.test.ts
│ │ │ ├── process-switch.test.ts
│ │ │ ├── process-try-sync.test.ts
│ │ │ ├── process-try.test.ts
│ │ │ └── test-helpers.ts
│ │ ├── test-metadata-handler.ts
│ │ ├── theming
│ │ │ ├── border-segments.test.ts
│ │ │ ├── component-layout.resolver.test.ts
│ │ │ ├── layout-property-parser.test.ts
│ │ │ ├── layout-resolver.test.ts
│ │ │ ├── layout-resolver2.test.ts
│ │ │ ├── layout-vp-override.test.ts
│ │ │ └── padding-segments.test.ts
│ │ └── utils
│ │ ├── date-utils.test.ts
│ │ ├── format-human-elapsed-time.test.ts
│ │ └── LruCache.test.ts
│ ├── language-server
│ │ ├── completion.test.ts
│ │ ├── format.test.ts
│ │ ├── hover.test.ts
│ │ └── mockData.ts
│ └── parsers
│ ├── common
│ │ └── input-stream.test.ts
│ ├── markdown
│ │ └── parse-binding-expression.test.ts
│ ├── parameter-parser.test.ts
│ ├── paremeter-parser.test.ts
│ ├── scripting
│ │ ├── eval-tree-arrow.test.ts
│ │ ├── eval-tree-pre-post.test.ts
│ │ ├── eval-tree.test.ts
│ │ ├── function-proxy.test.ts
│ │ ├── lexer-literals.test.ts
│ │ ├── lexer-misc.test.ts
│ │ ├── module-parse.test.ts
│ │ ├── parser-arrow.test.ts
│ │ ├── parser-assignments.test.ts
│ │ ├── parser-binary.test.ts
│ │ ├── parser-destructuring.test.ts
│ │ ├── parser-errors.test.ts
│ │ ├── parser-expressions.test.ts
│ │ ├── parser-function.test.ts
│ │ ├── parser-literals.test.ts
│ │ ├── parser-primary.test.ts
│ │ ├── parser-regex.test.ts
│ │ ├── parser-statements.test.ts
│ │ ├── parser-unary.test.ts
│ │ ├── process-event.test.ts
│ │ ├── process-implicit-context.test.ts
│ │ ├── process-statement-asgn.test.ts
│ │ ├── process-statement-destruct.test.ts
│ │ ├── process-statement-regs.test.ts
│ │ ├── process-statement-sync.test.ts
│ │ ├── process-statement.test.ts
│ │ ├── process-switch-sync.test.ts
│ │ ├── process-switch.test.ts
│ │ ├── process-try-sync.test.ts
│ │ ├── process-try.test.ts
│ │ ├── simplify-expression.test.ts
│ │ ├── statement-hooks.test.ts
│ │ └── test-helpers.ts
│ ├── style-parser
│ │ ├── generateHvarChain.test.ts
│ │ ├── parseHVar.test.ts
│ │ ├── parser.test.ts
│ │ └── tokens.test.ts
│ └── xmlui
│ ├── lint.test.ts
│ ├── parser.test.ts
│ ├── scanner.test.ts
│ ├── transform.attr.test.ts
│ ├── transform.circular.test.ts
│ ├── transform.element.test.ts
│ ├── transform.errors.test.ts
│ ├── transform.escape.test.ts
│ ├── transform.regression.test.ts
│ ├── transform.script.test.ts
│ ├── transform.test.ts
│ └── xmlui.ts
├── tests-e2e
│ ├── api-bound-component-regression.spec.ts
│ ├── api-call-as-extracted-component.spec.ts
│ ├── assign-to-object-or-array-regression.spec.ts
│ ├── binding-regression.spec.ts
│ ├── children-as-template-context-vars.spec.ts
│ ├── compound-component.spec.ts
│ ├── context-vars-regression.spec.ts
│ ├── data-bindings.spec.ts
│ ├── datasource-and-api-usage-in-var.spec.ts
│ ├── datasource-direct-binding.spec.ts
│ ├── datasource-onLoaded-regression.spec.ts
│ ├── modify-array-item-regression.spec.ts
│ ├── namespaces.spec.ts
│ ├── push-to-array-regression.spec.ts
│ ├── screen-breakpoints.spec.ts
│ ├── scripting.spec.ts
│ ├── state-scope-in-pages.spec.ts
│ └── state-var-scopes.spec.ts
├── tsconfig.json
├── tsdown.config.ts
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/xmlui/dev-docs/next/index.md:
--------------------------------------------------------------------------------
```markdown
1 | # XMLUI Developer's Guide
2 |
3 | Welcome to the XMLUI developer's guide. This documentation covers the technical architecture, build processes, and development workflows for the entire XMLUI monorepo ecosystem.
4 |
5 | This guide is specifically for developers working on the XMLUI framework, its extensions, and related tools. For user-facing documentation and component guides, visit the main XMLUI documentation website.
6 |
7 | ## Getting Started
8 |
9 | **Prerequisites:**
10 | - **Node.js**: Version 18.12.0 or higher
11 | - **npm**: Version 10.9.2 or higher (comes with Node.js)
12 | - **Git**: For version control
13 |
14 | 1. **Fork and Clone the Repository**
15 | ```bash
16 | # Fork the repository on GitHub first, then clone your fork
17 | git clone https://github.com/YOUR_USERNAME/xmlui.git
18 | cd xmlui
19 | ```
20 |
21 | 2. **Install Dependencies**
22 | ```bash
23 | # Install all workspace dependencies
24 | npm install
25 | ```
26 |
27 | 3. **Build Documentation**
28 | ```bash
29 | # Build documentation site
30 | npm run build-docs
31 | ```
32 |
33 | 4. **Build the Framework**
34 | ```bash
35 | # Build core framework and all extension packages
36 | npm run build-xmlui
37 | ```
38 |
39 | 5. **Run Tests** (Optional)
40 | ```bash
41 | # Run the complete test suite
42 | npm run test-xmlui
43 |
44 | # Or run just smoke tests for faster feedback
45 | npm run test-xmlui-smoke
46 | ```
47 |
48 | 6. **Start Development**
49 | ```bash
50 | # Start the documentation site with live reload
51 | cd docs
52 | npm start
53 | ```
54 |
55 | ## Project Artifacts
56 |
57 | XMLUI is organized as a monorepo containing **12+ buildable artifacts** across multiple workspaces. Each workspace has its own `package.json` and produces specific build outputs:
58 |
59 | ### Core Framework
60 | - **`xmlui`** (`xmlui/`) - Main framework library with components, parsers, and CLI tools
61 |
62 | ### Extension Packages (7 packages)
63 | - **`xmlui-animations`** (`packages/xmlui-animations/`) - Animation components with React Spring integration
64 | - **`xmlui-devtools`** (`packages/xmlui-devtools/`) - Developer tools and debugging utilities
65 | - **`xmlui-os-frames`** (`packages/xmlui-os-frames/`) - OS-specific window frames and chrome
66 | - **`xmlui-pdf`** (`packages/xmlui-pdf/`) - PDF generation and display components
67 | - **`xmlui-playground`** (`packages/xmlui-playground/`) - Interactive code playground and editor
68 | - **`xmlui-search`** (`packages/xmlui-search/`) - Search and filtering components
69 | - **`xmlui-spreadsheet`** (`packages/xmlui-spreadsheet/`) - Spreadsheet and data grid components
70 |
71 | ### Applications & Tools
72 | - **`xmlui-e2e`** (`tests/`) - End-to-end test suite and test bed application
73 | - **`create-xmlui-app`** (`tools/create-app/`) - CLI tool for scaffolding new projects
74 | - **`xmlui-vscode`** (`tools/vscode/`) - VS Code extension for language support
75 |
76 | ### Documentation
77 | - **`xmlui-docs`** (`docs/`) - User documentation website with interactive playground
78 |
79 | ## Documentation Structure
80 |
81 | - [**Project Structure**](./project-structure.md) - Developer documentation for monorepo structure and build artifacts
82 | - [**Working with Code**](./working-with-code.md) - Development workflow and common tasks for contributing to XMLUI
83 | - [**Project Build**](./project-build.md) - Build system documentation using Turborepo for monorepo orchestration
84 | - [**Generate Component Reference Documentation**](./generating-component-reference.md) - How to generate and maintain component reference documentation
85 |
```
--------------------------------------------------------------------------------
/xmlui/dev-docs/next/theme-context.md:
--------------------------------------------------------------------------------
```markdown
1 | # ThemeContext - XMLUI's Theme Management System
2 |
3 | ## What is ThemeContext?
4 |
5 | ThemeContext is XMLUI's **React Context-based theming system** that provides centralized theme management throughout your application. It's like a global state manager specifically for themes and visual appearance.
6 |
7 | ## Two Main Hooks
8 |
9 | ### `useTheme()` - Current Theme Information
10 |
11 | ```typescript
12 | import { useTheme } from "../../components-core/theming/ThemeContext";
13 |
14 | function MyComponent() {
15 | const theme = useTheme();
16 |
17 | // Access current theme properties:
18 | console.log(theme.activeThemeTone); // "light" or "dark"
19 | console.log(theme.activeTheme); // Current theme object
20 | console.log(theme.getResourceUrl); // Function to get theme-specific resources
21 | }
22 | ```
23 |
24 | ### `useThemes()` - Theme Control & Management
25 |
26 | ```typescript
27 | import { useThemes } from "../../components-core/theming/ThemeContext";
28 |
29 | function ThemeController() {
30 | const { activeThemeTone, setActiveThemeTone, themes } = useThemes();
31 |
32 | // Read current state:
33 | console.log('Current tone:', activeThemeTone); // "light" or "dark"
34 |
35 | // Change themes:
36 | setActiveThemeTone("dark"); // Switch to dark mode
37 | setActiveThemeTone("light"); // Switch to light mode
38 |
39 | // Access available themes:
40 | console.log('Available themes:', themes);
41 | }
42 | ```
43 |
44 | ## Key Properties & Methods
45 |
46 | | Property | Type | Description |
47 | |----------|------|-------------|
48 | | `activeThemeTone` | `light` or `dark` | Current theme tone |
49 | | `setActiveThemeTone` | `function` | Function to change theme tone |
50 | | `activeTheme` | `object` | Current theme configuration |
51 | | `setActiveThemeId` | `function` | Function to change theme |
52 | | `themes` | `array` | Available theme definitions |
53 | | `getResourceUrl` | `function` | Get theme-specific resource URLs |
54 |
55 | ## How Components Use It
56 |
57 | ### Reading Theme State
58 |
59 | ```typescript
60 | // ToneSwitch uses it to sync with theme state
61 | const { activeThemeTone } = useThemes();
62 | const isDarkMode = activeThemeTone === "dark";
63 | ```
64 |
65 | ### Controlling Themes
66 |
67 | ```typescript
68 | // ToneChangerButton uses it to toggle themes
69 | const { activeThemeTone, setActiveThemeTone } = useThemes();
70 | const toggleTheme = () => {
71 | setActiveThemeTone(activeThemeTone === "light" ? "dark" : "light");
72 | };
73 | ```
74 |
75 | ### Theme-Aware Styling
76 |
77 | ```typescript
78 | // AppHeader uses it for theme-specific logos
79 | const { activeThemeTone } = useTheme();
80 | const logoUrl = useResourceUrl(`resource:logo-${activeThemeTone}`);
81 | ```
82 |
83 | ## Provider Setup
84 |
85 | The ThemeContext is typically provided at the app level through the `<App>` component or `<Theme>` components, making theme state available to all child components.
86 |
87 | ## Benefits
88 |
89 | - **Centralized theme management** - Single source of truth
90 | - **Reactive updates** - Components auto-update when theme changes
91 | - **Type-safe** - TypeScript support for theme properties
92 | - **Resource management** - Theme-specific assets and URLs
93 | - **Cross-component sync** - All components stay in sync automatically
94 |
95 | A themed component doesn't need to manage its own state. It simply:
96 |
97 | 1. **Reads** the current theme from context
98 | 2. **Displays** the appropriate visual state
99 | 3. **Updates** the global theme when clicked
100 | 4. **Automatically re-renders** when theme changes elsewhere
101 |
102 | The ThemeContext is the "invisible glue" that makes XMLUI's theming system work seamlessly across all components.
103 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/SelectionStore/SelectionStoreNative.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import React, {
2 | type ReactNode,
3 | useLayoutEffect,
4 | useMemo,
5 | useState,
6 | useContext,
7 | useRef,
8 | } from "react";
9 | import { isEqual, noop } from "lodash-es";
10 |
11 | import type { RegisterComponentApiFn, UpdateStateFn } from "../../abstractions/RendererDefs";
12 | import { useEvent } from "../../components-core/utils/misc";
13 | import { EMPTY_ARRAY } from "../../components-core/constants";
14 |
15 | export const defaultProps = {
16 | idKey: "id",
17 | selectedItems: EMPTY_ARRAY,
18 | };
19 |
20 | type SelectionStoreProps = {
21 | idKey?: string;
22 | updateState: UpdateStateFn;
23 | children: ReactNode;
24 | selectedItems: any[];
25 | registerComponentApi?: RegisterComponentApiFn;
26 | };
27 |
28 | const EMPTY_SELECTION_STATE = {
29 | value: EMPTY_ARRAY,
30 | };
31 | export const StandaloneSelectionStore = ({ children }) => {
32 | const [selection, setSelection] = useState(EMPTY_SELECTION_STATE);
33 | return (
34 | <SelectionStore updateState={setSelection} selectedItems={selection.value}>
35 | {children}
36 | </SelectionStore>
37 | );
38 | };
39 |
40 | export const SelectionStore = ({
41 | updateState = noop,
42 | idKey = defaultProps.idKey,
43 | children,
44 | selectedItems = defaultProps.selectedItems,
45 | registerComponentApi = noop,
46 | }: SelectionStoreProps) => {
47 | const [items, setItems] = useState<any[]>(selectedItems);
48 | const valueInitializedRef = useRef(false);
49 | const currentItemsRef = useRef<any[]>(selectedItems);
50 |
51 | const refreshSelection = useEvent((allItems: any[] = EMPTY_ARRAY) => {
52 | const safeAllItems = allItems || EMPTY_ARRAY;
53 | const safeSelectedItems = selectedItems || EMPTY_ARRAY;
54 | setItems(safeAllItems);
55 | currentItemsRef.current = safeAllItems; // Update the ref synchronously
56 | let value = safeAllItems.filter(
57 | (item) => !!safeSelectedItems.find((si) => si && item && si[idKey] === item[idKey]),
58 | );
59 | if (!isEqual(safeSelectedItems, value) || !valueInitializedRef.current) {
60 | valueInitializedRef.current = true;
61 | updateState({
62 | value,
63 | });
64 | }
65 | });
66 |
67 | const setSelectedRowIds = useEvent((rowIds: any) => {
68 | const safeItems = currentItemsRef.current || EMPTY_ARRAY; // Use ref instead of state
69 | updateState({ value: safeItems.filter((item) => rowIds.includes(item[idKey])) });
70 | });
71 |
72 | const clearSelection = useEvent(() => {
73 | setSelectedRowIds(EMPTY_ARRAY);
74 | });
75 |
76 | useLayoutEffect(() => {
77 | registerComponentApi({
78 | clearSelection,
79 | setSelectedRowIds,
80 | refreshSelection,
81 | });
82 | }, [clearSelection, setSelectedRowIds, registerComponentApi, refreshSelection]);
83 |
84 | // --- Pass this selection context to the provider
85 | const contextValue = useMemo(() => {
86 | return {
87 | selectedItems,
88 | setSelectedRowIds,
89 | refreshSelection,
90 | idKey,
91 | };
92 | }, [refreshSelection, selectedItems, setSelectedRowIds, idKey]);
93 |
94 | return <SelectionContext.Provider value={contextValue}>{children}</SelectionContext.Provider>;
95 | };
96 |
97 | // Defines the elements of the current selection tracking
98 | interface SelectionState {
99 | selectedItems: any[];
100 | setSelectedRowIds: React.Dispatch<React.SetStateAction<string[]>>;
101 | refreshSelection: (allItems: any[]) => void;
102 | idKey: string;
103 | }
104 |
105 | // Represents the default selection context
106 | const SelectionContext = React.createContext<SelectionState>(null);
107 |
108 | // This React hook takes care of retrieving the current selection context
109 | export function useSelectionContext() {
110 | return useContext(SelectionContext);
111 | }
112 |
```
--------------------------------------------------------------------------------
/packages/xmlui-animations/src/AnimationNative.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import { animated, useSpring, useInView } from "@react-spring/web";
2 | import React, { Children, forwardRef, useEffect, useMemo, useState } from "react";
3 | import { useCallback } from "react";
4 | import type { RegisterComponentApiFn } from "xmlui";
5 |
6 | export type AnimationProps = {
7 | children?: React.ReactNode;
8 | animation: any;
9 | registerComponentApi?: RegisterComponentApiFn;
10 | onStop?: () => void;
11 | onStart?: () => void;
12 | animateWhenInView?: boolean;
13 | duration?: number;
14 | reverse?: boolean;
15 | loop?: boolean;
16 | once?: boolean;
17 | delay?: number;
18 | };
19 |
20 | const AnimatedComponent = animated(
21 | forwardRef(function InlineComponentDef(props: any, ref) {
22 | const { children, ...rest } = props;
23 | return React.cloneElement(children, { ...rest, ref });
24 | }),
25 | );
26 |
27 | export const defaultProps: Pick<AnimationProps, "delay" | "animateWhenInView" |"reverse" | "loop" | "once"> = {
28 | delay: 0,
29 | animateWhenInView: false,
30 | reverse: false,
31 | loop: false,
32 | once: false
33 | };
34 |
35 | export const Animation = ({
36 | children,
37 | registerComponentApi,
38 | animation,
39 | duration,
40 | onStop,
41 | onStart,
42 | delay = defaultProps.delay,
43 | animateWhenInView = defaultProps.animateWhenInView,
44 | reverse = defaultProps.reverse,
45 | loop = defaultProps.loop,
46 | once = defaultProps.once,
47 | }: AnimationProps) => {
48 | const [_animation] = useState(animation);
49 | const [toggle, setToggle] = useState(false);
50 | const [reset, setReset] = useState(false);
51 | const [count, setCount] = useState(0);
52 | const times = 1;
53 | const animationSettings = useMemo<any>(
54 | () => ({
55 | from: _animation.from,
56 | to: _animation.to,
57 | config: {
58 | ..._animation.config,
59 | duration,
60 | },
61 | delay,
62 | loop,
63 | reset,
64 | reverse: toggle,
65 | onRest: () => {
66 | onStop?.();
67 | if (loop) {
68 | if (reverse) {
69 | setCount(count + 1);
70 | setToggle(!toggle);
71 | }
72 | setReset(true);
73 | } else {
74 | if (reverse && count < times) {
75 | setCount(count + 1);
76 | setToggle(!toggle);
77 | }
78 | }
79 | },
80 | onStart: () => onStart?.(),
81 | }),
82 | [
83 | _animation.config,
84 | _animation.from,
85 | _animation.to,
86 | count,
87 | delay,
88 | duration,
89 | loop,
90 | onStart,
91 | onStop,
92 | reset,
93 | reverse,
94 | toggle,
95 | ],
96 | );
97 |
98 | const [springs, api] = useSpring(
99 | () => ({
100 | ...animationSettings,
101 | }),
102 | [animationSettings],
103 | );
104 |
105 | const [ref, animationStyles] = useInView(() => animationSettings, {
106 | once,
107 | });
108 |
109 | const startAnimation = useCallback(() => {
110 | api.start(_animation);
111 | return () => {
112 | api.stop();
113 | };
114 | }, [_animation, api]);
115 |
116 | const stopAnimation = useCallback(() => {
117 | api.stop();
118 | }, [api]);
119 |
120 | useEffect(() => {
121 | registerComponentApi?.({
122 | start: startAnimation,
123 | stop: stopAnimation,
124 | });
125 | }, [registerComponentApi, startAnimation, stopAnimation]);
126 |
127 | const content = useMemo(() => {
128 | return Children.map(children, (child, index) =>
129 | animateWhenInView ? (
130 | <AnimatedComponent style={animationStyles} key={index} ref={ref}>
131 | {child}
132 | </AnimatedComponent>
133 | ) : (
134 | <AnimatedComponent style={springs} key={index}>
135 | {child}
136 | </AnimatedComponent>
137 | ),
138 | );
139 | }, [animateWhenInView, animationStyles, children, ref, springs]);
140 |
141 | return content;
142 | };
143 |
```
--------------------------------------------------------------------------------
/docs/public/pages/tutorial-07.md:
--------------------------------------------------------------------------------
```markdown
1 | # Invoices
2 |
3 | Here is the app's `Invoices` page, with a cached subset of data. To view the table full-width, and optionally make changes, use the  icon to pop out to the full XMLUI playground.
4 |
5 |
6 | ```xmlui-pg
7 | ---app display
8 | <App>
9 | <Invoices />
10 | </App>
11 | ---comp
12 | <Component
13 | name="Invoices"
14 | >
15 | <DataSource
16 | id="invoices"
17 | url="/resources/files/invoices.json"
18 | transformResult="{(data) => data.slice(0, 10)}"
19 | method="GET"
20 | />
21 |
22 | <Theme maxWidth-ModalDialog="50%">
23 | <ModalDialog id="detailsDialog">
24 | <InvoiceDetails details="{$params[0]}" />
25 | </ModalDialog>
26 | </Theme>
27 |
28 | <HStack>
29 | <H1>Invoices</H1>
30 | <SpaceFiller />
31 | <Button enabled="{false}" label="Create Invoice" onClick="navigate('/invoices/new')" />
32 | </HStack>
33 |
34 | <Table data="{invoices}">
35 | <Column canSort="true" bindTo="invoice_number" />
36 | <Column canSort="true" bindTo="client" />
37 | <Column canSort="true" bindTo="issue_date" />
38 | <Column canSort="true" bindTo="due_date" />
39 | <Column canSort="true" bindTo="paid_date" />
40 | <Column canSort="true" header="total">
41 | ${$item.total}
42 | </Column>
43 | <Column canSort="true" header="Status">
44 | <StatusBadge status="{$item.status}" />
45 | </Column>
46 | <Column header="Details">
47 | <Icon name="doc-outline" />
48 | </Column>
49 | </Table>
50 |
51 | </Component>
52 | ---comp
53 | <Component
54 | name="StatusBadge"
55 | var.statusColors="{{
56 | draft: { background: '#f59e0b', label: 'white' },
57 | sent: { background: '#3b82f6', label: 'white' },
58 | paid: { background: '#10b981', label: 'white' }
59 | }}"
60 | >
61 | <Badge
62 | enabled="{$props.enabled}"
63 | value="{$props.status}"
64 | colorMap="{statusColors}"
65 | variant="pill"
66 | />
67 | </Component>
68 | ```
69 |
70 | The `Create Invoice` button is disabled for this part of the demo.
71 |
72 | Here is the `Invoices` component.
73 |
74 | ```xmlui /detailsDialog/
75 | <Component name="Invoices">
76 |
77 | <HStack>
78 | <H1>Invoices</H1>
79 | <SpaceFiller/>
80 | <Button label="Create Invoice" onClick="navigate('/invoices/new')"/>
81 | </HStack>
82 |
83 | <Table data="/api/invoices">
84 | <Column bindTo="invoice_number"/>
85 | <Column bindTo="client"/>
86 | <Column bindTo="issue_date"/>
87 | <Column bindTo="due_date"/>
88 | <Column bindTo="paid_date"/>
89 | <Column bindTo="total">
90 | ${$item.total}
91 | </Column>
92 | <Column bindTo="status">
93 | <StatusBadge status="{$item.status}"/>
94 | </Column>
95 | <Column canSort="{false}" header="Details">
96 | <Icon name="doc-outline" onClick="detailsDialog.open($item)"/>
97 | </Column>
98 | </Table>
99 |
100 | <ModalDialog id="detailsDialog" maxWidth="50%">
101 | <InvoiceDetails details="{$param}"/>
102 | </ModalDialog>
103 |
104 | </Component>
105 | ```
106 |
107 | ## A ModalDialog
108 |
109 | The id attribute of the [ModalDialog](/components/ModalDialog) maps to the `onClick` handler of the `Details` column. We'll see later how, when clicked, it loads the `InvoiceDetails` component into a `ModalDialog`.
110 |
111 | When enabled, the `CreateInvoice` button uses the global function `navigate` to go to the page defined by the `CreateInvoice` component.
112 |
113 | Two of the columns in the table, `Status` and `Details`, show how a [Column](/components/Column) can contain XMLUI markup that may include user-defined (`StatusBadge`) and/or built-in (`Icon`) components.
114 |
115 |
116 |
```
--------------------------------------------------------------------------------
/xmlui/tests/parsers/parameter-parser.test.ts:
--------------------------------------------------------------------------------
```typescript
1 | import { describe, expect, it } from "vitest";
2 | import { parseParameterString } from "../../src/components-core/script-runner/ParameterParser";
3 | import { Expression } from "../../src/components-core/script-runner/ScriptingSourceTree";
4 | import { T_BINARY_EXPRESSION, T_LITERAL } from "../../src/parsers/scripting/ScriptingNodeTypes";
5 |
6 | describe("parseParameterString", () => {
7 | it("Empty string works", () => {
8 | // --- Act
9 | const result = parseParameterString("");
10 |
11 | // --- Assert
12 | expect(result.length).toBe(0);
13 | });
14 |
15 | it("String literal works", () => {
16 | // --- Act
17 | const result = parseParameterString("abc");
18 |
19 | // --- Assert
20 | expect(result.length).toBe(1);
21 | expect(result[0].type).toBe("literal");
22 | expect(result[0].value).toBe("abc");
23 | });
24 |
25 | it("Single expression works", () => {
26 | // --- Act
27 | const result = parseParameterString("{a+b}");
28 |
29 | // --- Assert
30 | expect(result.length).toBe(1);
31 | expect(result[0].type).toBe("expression");
32 | expect((result[0].value as Expression).type).toBe(T_BINARY_EXPRESSION);
33 | });
34 |
35 | it("Combination works #1", () => {
36 | // --- Act
37 | const result = parseParameterString("hello{a+b}");
38 |
39 | // --- Assert
40 | expect(result.length).toBe(2);
41 | expect(result[0].type).toBe("literal");
42 | expect(result[0].value).toBe("hello");
43 | expect(result[1].type).toBe("expression");
44 | expect((result[1].value as Expression).type).toBe(T_BINARY_EXPRESSION);
45 | });
46 |
47 | it("Combination works #2", () => {
48 | // --- Act
49 | const result = parseParameterString("{a+b}world");
50 |
51 | // --- Assert
52 | expect(result.length).toBe(2);
53 | expect(result[0].type).toBe("expression");
54 | expect((result[0].value as Expression).type).toBe(T_BINARY_EXPRESSION);
55 | expect(result[1].type).toBe("literal");
56 | expect(result[1].value).toBe("world");
57 | });
58 |
59 | it("Combination works #3", () => {
60 | // --- Act
61 | const result = parseParameterString("hello{a+b}world");
62 |
63 | // --- Assert
64 | expect(result.length).toBe(3);
65 | expect(result[0].type).toBe("literal");
66 | expect(result[0].value).toBe("hello");
67 | expect(result[1].type).toBe("expression");
68 | expect((result[1].value as Expression).type).toBe(T_BINARY_EXPRESSION);
69 | expect(result[2].type).toBe("literal");
70 | expect(result[2].value).toBe("world");
71 | });
72 |
73 | it("Single escape works #1", () => {
74 | // --- Act
75 | const result = parseParameterString("\\{a+b}");
76 |
77 | // --- Assert
78 | expect(result.length).toBe(1);
79 | expect(result[0].type).toBe("literal");
80 | expect(result[0].value).toBe("{a+b}");
81 | });
82 |
83 | it("Single escape works #2", () => {
84 | // --- Act
85 | const result = parseParameterString("\\{{a+b}");
86 |
87 | // --- Assert
88 | expect(result.length).toBe(2);
89 | expect(result[0].type).toBe("literal");
90 | expect(result[0].value).toBe("{");
91 | expect(result[1].type).toBe("expression");
92 | expect((result[1].value as Expression).type).toBe(T_BINARY_EXPRESSION);
93 | });
94 |
95 | it("Single escape works #3", () => {
96 | // --- Act
97 | const result = parseParameterString("/\\{{3}$/");
98 |
99 | // --- Assert
100 | expect(result.length).toBe(3);
101 | expect(result[0].type).toBe("literal");
102 | expect(result[0].value).toBe("/{");
103 | expect(result[1].type).toBe("expression");
104 | expect((result[1].value as Expression).type).toBe(T_LITERAL);
105 | expect(result[2].type).toBe("literal");
106 | expect(result[2].value).toBe("$/");
107 | });
108 | });
109 |
```
--------------------------------------------------------------------------------
/xmlui/tests/parsers/paremeter-parser.test.ts:
--------------------------------------------------------------------------------
```typescript
1 | import { describe, expect, it } from "vitest";
2 | import { parseParameterString } from "../../src/components-core/script-runner/ParameterParser";
3 | import { Expression } from "../../src/components-core/script-runner/ScriptingSourceTree";
4 | import { T_BINARY_EXPRESSION, T_LITERAL } from "../../src/parsers/scripting/ScriptingNodeTypes";
5 |
6 | describe("parseParameterString", () => {
7 | it("Empty string works", () => {
8 | // --- Act
9 | const result = parseParameterString("");
10 |
11 | // --- Assert
12 | expect(result.length).toBe(0);
13 | });
14 |
15 | it("String literal works", () => {
16 | // --- Act
17 | const result = parseParameterString("abc");
18 |
19 | // --- Assert
20 | expect(result.length).toBe(1);
21 | expect(result[0].type).toBe("literal");
22 | expect(result[0].value).toBe("abc");
23 | });
24 |
25 | it("Single expression works", () => {
26 | // --- Act
27 | const result = parseParameterString("{a+b}");
28 |
29 | // --- Assert
30 | expect(result.length).toBe(1);
31 | expect(result[0].type).toBe("expression");
32 | expect((result[0].value as Expression).type).toBe(T_BINARY_EXPRESSION);
33 | });
34 |
35 | it("Combination works #1", () => {
36 | // --- Act
37 | const result = parseParameterString("hello{a+b}");
38 |
39 | // --- Assert
40 | expect(result.length).toBe(2);
41 | expect(result[0].type).toBe("literal");
42 | expect(result[0].value).toBe("hello");
43 | expect(result[1].type).toBe("expression");
44 | expect((result[1].value as Expression).type).toBe(T_BINARY_EXPRESSION);
45 | });
46 |
47 | it("Combination works #2", () => {
48 | // --- Act
49 | const result = parseParameterString("{a+b}world");
50 |
51 | // --- Assert
52 | expect(result.length).toBe(2);
53 | expect(result[0].type).toBe("expression");
54 | expect((result[0].value as Expression).type).toBe(T_BINARY_EXPRESSION);
55 | expect(result[1].type).toBe("literal");
56 | expect(result[1].value).toBe("world");
57 | });
58 |
59 | it("Combination works #3", () => {
60 | // --- Act
61 | const result = parseParameterString("hello{a+b}world");
62 |
63 | // --- Assert
64 | expect(result.length).toBe(3);
65 | expect(result[0].type).toBe("literal");
66 | expect(result[0].value).toBe("hello");
67 | expect(result[1].type).toBe("expression");
68 | expect((result[1].value as Expression).type).toBe(T_BINARY_EXPRESSION);
69 | expect(result[2].type).toBe("literal");
70 | expect(result[2].value).toBe("world");
71 | });
72 |
73 | it("Single escape works #1", () => {
74 | // --- Act
75 | const result = parseParameterString("\\{a+b}");
76 |
77 | // --- Assert
78 | expect(result.length).toBe(1);
79 | expect(result[0].type).toBe("literal");
80 | expect(result[0].value).toBe("{a+b}");
81 | });
82 |
83 | it("Single escape works #2", () => {
84 | // --- Act
85 | const result = parseParameterString("\\{{a+b}");
86 |
87 | // --- Assert
88 | expect(result.length).toBe(2);
89 | expect(result[0].type).toBe("literal");
90 | expect(result[0].value).toBe("{");
91 | expect(result[1].type).toBe("expression");
92 | expect((result[1].value as Expression).type).toBe(T_BINARY_EXPRESSION);
93 | });
94 |
95 | it("Single escape works #3", () => {
96 | // --- Act
97 | const result = parseParameterString("/\\{{3}$/");
98 |
99 | // --- Assert
100 | expect(result.length).toBe(3);
101 | expect(result[0].type).toBe("literal");
102 | expect(result[0].value).toBe("/{");
103 | expect(result[1].type).toBe("expression");
104 | expect((result[1].value as Expression).type).toBe(T_LITERAL);
105 | expect(result[2].type).toBe("literal");
106 | expect(result[2].value).toBe("$/");
107 | });
108 | });
109 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/App/Sheet.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import * as React from "react";
2 | import * as SheetPrimitive from "@radix-ui/react-dialog";
3 | import classnames from "classnames";
4 | import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
5 |
6 | import styles from "./Sheet.module.scss";
7 |
8 | import { useTheme } from "../../components-core/theming/ThemeContext";
9 | import { Icon } from "../../components/Icon/IconNative";
10 |
11 | //based on this: https://ui.shadcn.com/docs/components/sheet
12 |
13 | const Sheet = SheetPrimitive.Root;
14 |
15 | const SheetPortal = SheetPrimitive.Portal;
16 |
17 | const SheetOverlay = React.forwardRef<
18 | React.ElementRef<typeof SheetPrimitive.Overlay>,
19 | React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
20 | >(({ className, ...props }, ref) => (
21 | <SheetPrimitive.Overlay className={classnames(styles.overlay, className)} {...props} ref={ref} />
22 | ));
23 | SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
24 |
25 | interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content> {
26 | side: "top" | "bottom" | "left" | "right";
27 | }
28 |
29 | const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Content>, SheetContentProps>(
30 | ({ side = "left", className, children, ...props }, ref) => {
31 | const { root } = useTheme();
32 | return (
33 | <SheetPortal container={root}>
34 | <SheetOverlay />
35 | <SheetPrimitive.Content
36 | forceMount={true}
37 | ref={ref}
38 | className={classnames(
39 | styles.sheetContent,
40 | {
41 | [styles.top]: side === "top",
42 | [styles.bottom]: side === "bottom",
43 | [styles.left]: side === "left",
44 | [styles.right]: side === "right",
45 | },
46 | className
47 | )}
48 | {...props}
49 | >
50 | {children}
51 | <SheetPrimitive.Close className={styles.close}>
52 | <Icon name={"close"} />
53 | <VisuallyHidden>Close</VisuallyHidden>
54 | </SheetPrimitive.Close>
55 | </SheetPrimitive.Content>
56 | </SheetPortal>
57 | );
58 | }
59 | );
60 | SheetContent.displayName = SheetPrimitive.Content.displayName;
61 |
62 | const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
63 | <div className={classnames("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
64 | );
65 | SheetHeader.displayName = "SheetHeader";
66 |
67 | const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
68 | <div className={classnames("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
69 | );
70 | SheetFooter.displayName = "SheetFooter";
71 |
72 | const SheetTitle = React.forwardRef<
73 | React.ElementRef<typeof SheetPrimitive.Title>,
74 | React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
75 | >(({ className, ...props }, ref) => (
76 | <SheetPrimitive.Title
77 | ref={ref}
78 | className={classnames("text-lg font-semibold text-foreground", className)}
79 | {...props}
80 | />
81 | ));
82 | SheetTitle.displayName = SheetPrimitive.Title.displayName;
83 |
84 | const SheetDescription = React.forwardRef<
85 | React.ElementRef<typeof SheetPrimitive.Description>,
86 | React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
87 | >(({ className, ...props }, ref) => (
88 | <SheetPrimitive.Description ref={ref} className={classnames("text-sm text-muted-foreground", className)} {...props} />
89 | ));
90 | SheetDescription.displayName = SheetPrimitive.Description.displayName;
91 |
92 | export {
93 | Sheet,
94 | SheetContent,
95 | };
96 |
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/script-runner/AttributeValueParser.ts:
--------------------------------------------------------------------------------
```typescript
1 | import type { ParsedPropertyValue } from "../../abstractions/scripting/Compilation";
2 | import type { Expression } from "./ScriptingSourceTree";
3 | import { Parser } from "../../parsers/scripting/Parser";
4 |
5 | let lastParseId = 0;
6 |
7 | /**
8 | * This function parses a parameter string and splits them into string literal and binding expression sections
9 | * @param source String to parse
10 | * @returns Parameter string sections
11 | */
12 | export function parseAttributeValue(source: string): ParsedPropertyValue {
13 | const result: ParsedPropertyValue = {
14 | __PARSED: true,
15 | parseId: ++lastParseId,
16 | segments: [],
17 | };
18 | if (source === undefined || source === null) return result;
19 |
20 | let phase = ParsePhase.StringLiteral;
21 | let section = "";
22 | let escape = "";
23 | for (let i = 0; i < source.length; i++) {
24 | const ch = source[i];
25 | switch (phase) {
26 | case ParsePhase.StringLiteral:
27 | if (ch === "\\") {
28 | phase = ParsePhase.Escape;
29 | escape = "\\";
30 | } else if (ch === "{") {
31 | // --- A new expression starts, close the previous string literal
32 | if (section !== "") {
33 | result.segments.push({
34 | literal: section,
35 | });
36 | }
37 | // --- Start a new section
38 | section = "";
39 | phase = ParsePhase.ExprStart;
40 | } else {
41 | section += ch;
42 | }
43 | break;
44 |
45 | case ParsePhase.Escape:
46 | if (ch === "\\") {
47 | // --- Go on with escape
48 | escape += ch;
49 | break;
50 | }
51 |
52 | if (ch === "{") {
53 | // --- End escape as a literal section without the first "\" escape character
54 | section += escape.substring(1) + ch;
55 | } else {
56 | // --- End escape as a literal section with the full sequence
57 | section += escape + ch;
58 | }
59 | phase = ParsePhase.StringLiteral;
60 | break;
61 |
62 | case ParsePhase.ExprStart:
63 | const exprSource = source.substring(i);
64 | const parser = new Parser(source.substring(i));
65 | let expr: Expression | null = null;
66 | try {
67 | expr = parser.parseExpr();
68 | } catch (err) {
69 | throw new Error(`Cannot parse expression: '${exprSource}': ${err}`);
70 | }
71 | const tail = parser.getTail();
72 | if (!tail || tail.trim().length < 1 || tail.trim()[0] !== "}") {
73 | // --- Unclosed expression, back to its beginning
74 | throw new Error(`Unclosed expression: '${source}'\n'${exprSource}'`);
75 | } else {
76 | // --- Successfully parsed expression, get dependencies
77 | result.segments.push({
78 | expr,
79 | });
80 |
81 | // --- Skip the parsed part of the expression, and start a new literal section
82 | i = source.length - tail.length;
83 | section = "";
84 | }
85 | phase = ParsePhase.StringLiteral;
86 | break;
87 | }
88 | }
89 |
90 | // --- Process the last segment
91 | switch (phase) {
92 | case ParsePhase.StringLiteral:
93 | if (section !== "") {
94 | result.segments.push({
95 | literal: section,
96 | });
97 | }
98 | break;
99 | case ParsePhase.Escape:
100 | result.segments.push({
101 | literal: section + escape,
102 | });
103 | break;
104 | case ParsePhase.ExprStart:
105 | result.segments.push({
106 | literal: section + "{",
107 | });
108 | break;
109 | }
110 |
111 | // --- Done.
112 | return result;
113 | }
114 |
115 | enum ParsePhase {
116 | StringLiteral,
117 | Escape,
118 | ExprStart,
119 | }
120 |
```
--------------------------------------------------------------------------------
/xmlui/src/parsers/xmlui-parser/syntax-kind.ts:
--------------------------------------------------------------------------------
```typescript
1 | /** tokens and nodes combined. Order is significant since the functions below use the numeric values of this enum to check for a range of possible values*/
2 | export const enum SyntaxKind {
3 | Unknown = 0,
4 | EndOfFileToken = 1,
5 |
6 | // Trivia (skipped tokens)
7 | CommentTrivia = 2,
8 | NewLineTrivia = 3,
9 | WhitespaceTrivia = 4,
10 |
11 | // Effective tokens
12 | Identifier = 5,
13 | /** < */
14 | OpenNodeStart = 6,
15 | /** </ */
16 | CloseNodeStart = 7,
17 | /** > */
18 | NodeEnd = 8,
19 | /** /> */
20 | NodeClose = 9,
21 | /** : */
22 | Colon = 10,
23 | /** = */
24 | Equal = 11,
25 | /** string literal */
26 | StringLiteral = 12,
27 | /** <![CDATA[ ... ]]> */
28 | CData = 13,
29 | /** <script>...</script> */
30 | Script = 14,
31 |
32 | // A token created by the parser which contains arbitrary text, but not the '<' character
33 | TextNode = 15,
34 |
35 | // XMLUI entities
36 | AmpersandEntity = 16,
37 | LessThanEntity = 17,
38 | GreaterThanEntity = 18,
39 | SingleQuoteEntity = 19,
40 | DoubleQuoteEntity = 20,
41 |
42 | // Syntax node types
43 | ElementNode = 21,
44 | AttributeNode = 22,
45 | AttributeKeyNode = 23,
46 | ContentListNode = 24,
47 | AttributeListNode = 25,
48 | TagNameNode = 26,
49 | // should be the last syntax node type
50 | ErrorNode = 27,
51 | }
52 |
53 | export function isTrivia(token: SyntaxKind): boolean {
54 | return token >= SyntaxKind.CommentTrivia && token <= SyntaxKind.WhitespaceTrivia;
55 | }
56 |
57 | export function isInnerNode(token: SyntaxKind): boolean {
58 | return token >= SyntaxKind.ElementNode && token <= SyntaxKind.ErrorNode;
59 | }
60 |
61 | export function getSyntaxKindStrRepr(kind: SyntaxKind): string {
62 | switch (kind) {
63 | case SyntaxKind.Unknown:
64 | return "Unknown";
65 | case SyntaxKind.EndOfFileToken:
66 | return "EndOfFileToken";
67 | case SyntaxKind.CommentTrivia:
68 | return "CommentTrivia";
69 | case SyntaxKind.NewLineTrivia:
70 | return "NewLineTrivia";
71 | case SyntaxKind.WhitespaceTrivia:
72 | return "WhitespaceTrivia";
73 | case SyntaxKind.Identifier:
74 | return "Identifier";
75 | case SyntaxKind.OpenNodeStart:
76 | return "OpenNodeStart";
77 | case SyntaxKind.CloseNodeStart:
78 | return "CloseNodeStart";
79 | case SyntaxKind.NodeEnd:
80 | return "NodeEnd";
81 | case SyntaxKind.NodeClose:
82 | return "NodeClose";
83 | case SyntaxKind.Colon:
84 | return "Colon";
85 | case SyntaxKind.Equal:
86 | return "Equal";
87 | case SyntaxKind.StringLiteral:
88 | return "StringLiteral";
89 | case SyntaxKind.CData:
90 | return "CData";
91 | case SyntaxKind.Script:
92 | return "Script";
93 | case SyntaxKind.AmpersandEntity:
94 | return "AmpersandEntity";
95 | case SyntaxKind.LessThanEntity:
96 | return "LessThanEntity";
97 | case SyntaxKind.GreaterThanEntity:
98 | return "GreaterThanEntity";
99 | case SyntaxKind.SingleQuoteEntity:
100 | return "SingleQuoteEntity";
101 | case SyntaxKind.DoubleQuoteEntity:
102 | return "DoubleQuoteEntity";
103 | case SyntaxKind.ElementNode:
104 | return "ElementNode";
105 | case SyntaxKind.AttributeNode:
106 | return "AttributeNode";
107 | case SyntaxKind.TextNode:
108 | return "TextNode";
109 | case SyntaxKind.ContentListNode:
110 | return "ContentListNode";
111 | case SyntaxKind.AttributeListNode:
112 | return "AttributeListNode";
113 | case SyntaxKind.TagNameNode:
114 | return "TagNameNode";
115 | case SyntaxKind.ErrorNode:
116 | return "ErrorNode";
117 | case SyntaxKind.AttributeKeyNode:
118 | return "AttributeKeyNode";
119 | }
120 | return assertUnreachable(kind);
121 | }
122 |
123 | function assertUnreachable(x: never): never {
124 | throw new Error("Didn't expect to get here");
125 | }
126 |
```
--------------------------------------------------------------------------------
/docs/content/components/Option.md:
--------------------------------------------------------------------------------
```markdown
1 | # Option [#option]
2 |
3 | `Option` defines selectable items for choice-based components, providing both the underlying value and display text for selection interfaces. It serves as a non-visual data structure that describes individual choices within [Select](/components/Select), [AutoComplete](/components/AutoComplete), and other selection components.
4 |
5 | **Key features:**
6 | - **Value and label separation**: Define what gets stored (value) separately from what users see (label)
7 | - **Automatic fallbacks**: Uses label as value or value as label when only one is provided
8 | - **Custom templates**: Support for rich content via optionTemplate property or child components
9 | - **State management**: Built-in enabled/disabled states for individual options
10 | - **Data integration**: Works seamlessly with Items components for dynamic option lists
11 |
12 | ## Using `Option` [#using-option]
13 |
14 | ### With `AutoComplete` [#with-autocomplete]
15 |
16 | ```xmlui-pg copy {4-6} display name="Example: Option in a AutoComplete" height="275px"
17 | <App>
18 | <Text value="Selected ID: {myComp.value}"/>
19 | <AutoComplete id="myComp">
20 | <Option label="John, Smith" value="john" />
21 | <Option label="Jane, Clint" value="jane" disabled="true" />
22 | <Option label="Herbert, Frank" value="herbert" />
23 | </AutoComplete>
24 | </App>
25 | ```
26 |
27 | ### With `Select` [#with-select]
28 |
29 | ```xmlui-pg copy {4-6} display name="Example: Option in a Select" height="275px"
30 | <App>
31 | <Text value="Selected ID: {mySelect.value}"/>
32 | <Select id="mySelect">
33 | <Option label="John, Smith" value="john" />
34 | <Option label="Jane, Clint" value="jane" />
35 | <Option label="Herbert, Frank" value="herbert" />
36 | </Select>
37 | </App>
38 | ```
39 |
40 | ## Properties [#properties]
41 |
42 | ### `enabled` (default: true) [#enabled-default-true]
43 |
44 | This boolean property indicates whether the option is enabled or disabled.
45 |
46 | ### `keywords` [#keywords]
47 |
48 | An array of keywords that can be used for searching and filtering the option. These keywords are not displayed but help users find the option through search.
49 |
50 | ### `label` [#label]
51 |
52 | This property defines the text to display for the option. If `label` is not defined, `Option` will use the `value` as the label.
53 |
54 | >[!INFO]
55 | > If `Option` does not define any of the `label` or `value` properties, the option will not be rendered.
56 |
57 | ```xmlui-pg copy display name="Example: Using label" height="275px"
58 | <App>
59 | <Text value="Selected ID: {mySelect.value}"/>
60 | <Select id="mySelect">
61 | <Option />
62 | <Option label="Vanilla" value="van"/>
63 | <Option label="Chocolate" value="choc" />
64 | <Option value="pist" />
65 | </Select>
66 | </App>
67 | ```
68 |
69 | ### `value` [#value]
70 |
71 | This property defines the value of the option. If `value` is not defined, `Option` will use the `label` as the value. If neither is defined, the option is not displayed.
72 |
73 | >[!INFO]
74 | > If `Option` does not define any of the `label` or `value` properties, the option will not be rendered.
75 |
76 | ```xmlui-pg copy display name="Example: Using value" height="275px"
77 | <App>
78 | <Text value="Selected ID: {mySelect.value}"/>
79 | <Select id="mySelect">
80 | <Option />
81 | <Option label="Vanilla" />
82 | <Option label="Chocolate" value="chocolate" />
83 | <Option label="Pistachio" value="pistachio" />
84 | </Select>
85 | </App>
86 | ```
87 |
88 | ## Events [#events]
89 |
90 | This component does not have any events.
91 |
92 | ## Exposed Methods [#exposed-methods]
93 |
94 | This component does not expose any methods.
95 |
96 | ## Styling [#styling]
97 |
98 | This component does not have any styles.
99 |
```
--------------------------------------------------------------------------------
/docs/public/pages/howto/handle-background-operations.md:
--------------------------------------------------------------------------------
```markdown
1 | # Handle background operations
2 |
3 | Use the Queue component for async processing that doesn't block user interaction.
4 |
5 | ```xmlui-pg copy display name="Background file processing with progress feedback"
6 | ---comp display {21-30} /uploadQueue/
7 | <Component name="BackgroundProcessor" var.items="{[]}" var.processedCount="{0}" var.errorCount="{0}" var.completed="{false}">
8 | <VStack gap="$space-4">
9 | <!-- Single action button -->
10 | <Button
11 | label="Upload 5 Files"
12 | onClick="items = [
13 | { id: 1, filename: 'document.pdf', size: 2048576, type: 'application/pdf' },
14 | { id: 2, filename: 'image.jpg', size: 1024000, type: 'image/jpeg' },
15 | { id: 3, filename: 'corrupted-file.txt', size: 512, type: 'text/plain' },
16 | { id: 4, filename: 'data.csv', size: 4096000, type: 'text/csv' },
17 | { id: 5, filename: 'presentation.pptx', size: 8192000, type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' }
18 | ]; uploadQueue.enqueueItems(items)"
19 | enabled="{!completed}"
20 | themeColor="primary"
21 | />
22 |
23 | <!-- Background upload queue -->
24 | <Queue
25 | id="uploadQueue"
26 | clearAfterFinish="true"
27 | onProcess="processing => {
28 | // Update progress
29 | processing.reportProgress(processedCount + 1);
30 | // Make API call to upload objects (delay happens server-side)
31 | const result = Actions.callApi({
32 | url: '/api/objects',
33 | method: 'POST',
34 | body: processing.item
35 | });
36 | processedCount++;
37 |
38 | return result;
39 | }"
40 | onProcessError="(error, processing) => {
41 | errorCount++;
42 | console.error('Processing failed:', error.message, processing.item);
43 | // Return true to show default error display
44 | return true;
45 | }"
46 | onComplete="() => {
47 | console.log('All files processed');
48 | completed = true;
49 | }">
50 |
51 | <property name="progressFeedback">
52 | <HStack>
53 | <Spinner size="sm" />
54 | <Text>Processing item {processedCount + 1}...</Text>
55 | </HStack>
56 | </property>
57 |
58 | <property name="resultFeedback">
59 | <HStack>
60 | <Icon name="checkmark"/>
61 | <Text>
62 | All {processedCount} items processed successfully!
63 | </Text>
64 | </HStack>
65 | </property>
66 | </Queue>
67 |
68 | <!-- Status display -->
69 | <Card when="{uploadQueue.getQueueLength() > 0 || processedCount > 0}">
70 | <VStack>
71 | <HStack>
72 | <Text>Queue length: {uploadQueue.getQueueLength()}</Text>
73 | <Text>Processed: {processedCount}</Text>
74 | </HStack>
75 | </VStack>
76 | </Card>
77 |
78 | <!-- Interactive element while processing -->
79 | <Card when="{uploadQueue.getQueueLength() > 0}">
80 | <VStack>
81 | <Slider
82 | label="Adjust slider while uploads are running"
83 | minValue="1"
84 | maxValue="10"
85 | initialValue="5"
86 | step="1"
87 | />
88 | </VStack>
89 | </Card>
90 | </VStack>
91 | </Component>
92 | ---app display
93 | <App>
94 | <BackgroundProcessor />
95 | </App>
96 | ---api
97 | {
98 | "apiUrl": "/api",
99 | "initialize": "$state.files = []",
100 | "operations": {
101 | "process-file": {
102 | "url": "/objects",
103 | "method": "post",
104 | "bodyParamTypes": {
105 | "filename": "string",
106 | "size": "number",
107 | "type": "string"
108 | },
109 | "handler": "delay(3000); return { success: true, message: 'File processed successfully' };"
110 | }
111 | }
112 | }
113 | ```
114 |
115 |
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/interception/Errors.ts:
--------------------------------------------------------------------------------
```typescript
1 | //stolen from axios
2 | export enum HttpStatusCode {
3 | Continue = 100,
4 | SwitchingProtocols = 101,
5 | Processing = 102,
6 | EarlyHints = 103,
7 | Ok = 200,
8 | Created = 201,
9 | Accepted = 202,
10 | NonAuthoritativeInformation = 203,
11 | NoContent = 204,
12 | ResetContent = 205,
13 | PartialContent = 206,
14 | MultiStatus = 207,
15 | AlreadyReported = 208,
16 | ImUsed = 226,
17 | MultipleChoices = 300,
18 | MovedPermanently = 301,
19 | Found = 302,
20 | SeeOther = 303,
21 | NotModified = 304,
22 | UseProxy = 305,
23 | Unused = 306,
24 | TemporaryRedirect = 307,
25 | PermanentRedirect = 308,
26 | BadRequest = 400,
27 | Unauthorized = 401,
28 | PaymentRequired = 402,
29 | Forbidden = 403,
30 | NotFound = 404,
31 | MethodNotAllowed = 405,
32 | NotAcceptable = 406,
33 | ProxyAuthenticationRequired = 407,
34 | RequestTimeout = 408,
35 | Conflict = 409,
36 | Gone = 410,
37 | LengthRequired = 411,
38 | PreconditionFailed = 412,
39 | PayloadTooLarge = 413,
40 | UriTooLong = 414,
41 | UnsupportedMediaType = 415,
42 | RangeNotSatisfiable = 416,
43 | ExpectationFailed = 417,
44 | ImATeapot = 418,
45 | MisdirectedRequest = 421,
46 | UnprocessableEntity = 422,
47 | Locked = 423,
48 | FailedDependency = 424,
49 | TooEarly = 425,
50 | UpgradeRequired = 426,
51 | PreconditionRequired = 428,
52 | TooManyRequests = 429,
53 | RequestHeaderFieldsTooLarge = 431,
54 | UnavailableForLegalReasons = 451,
55 | InternalServerError = 500,
56 | NotImplemented = 501,
57 | BadGateway = 502,
58 | ServiceUnavailable = 503,
59 | GatewayTimeout = 504,
60 | HttpVersionNotSupported = 505,
61 | VariantAlsoNegotiates = 506,
62 | InsufficientStorage = 507,
63 | LoopDetected = 508,
64 | NotExtended = 510,
65 | NetworkAuthenticationRequired = 511,
66 | }
67 |
68 | export class HttpError extends Error {
69 | status;
70 | details;
71 |
72 | constructor(status: number, details?: Record<string, any>) {
73 | super(details?.message || "Not found");
74 | this.details = details;
75 | this.status = status;
76 |
77 | Object.setPrototypeOf(this, HttpError.prototype);
78 | }
79 | }
80 |
81 | export class NotFoundError extends HttpError {
82 | constructor(details?: Record<string, any>) {
83 | super(HttpStatusCode.NotFound, details);
84 | Object.setPrototypeOf(this, NotFoundError.prototype);
85 | }
86 | }
87 |
88 | export class UnauthorizedError extends HttpError {
89 | constructor(details?: Record<string, any>) {
90 | super(HttpStatusCode.Unauthorized, details);
91 | Object.setPrototypeOf(this, UnauthorizedError.prototype);
92 | }
93 | }
94 |
95 | export class ConflictError extends HttpError {
96 | constructor(details?: Record<string, any>) {
97 | super(HttpStatusCode.Conflict, details);
98 | Object.setPrototypeOf(this, ConflictError.prototype);
99 | }
100 | }
101 |
102 | function convertErrorDetails(messageOrDetails: string | Record<string, any>) {
103 | let details;
104 | if (messageOrDetails) {
105 | if (typeof messageOrDetails === "string") {
106 | details = {
107 | message: messageOrDetails,
108 | };
109 | } else {
110 | details = messageOrDetails;
111 | }
112 | }
113 | return details;
114 | }
115 |
116 | const Errors = {
117 | NotFound404: (messageOrDetails: string | Record<string, any>) => {
118 | return new NotFoundError(convertErrorDetails(messageOrDetails));
119 | },
120 | Unauthorized401: (messageOrDetails: string | Record<string, any>) => {
121 | return new UnauthorizedError(convertErrorDetails(messageOrDetails));
122 | },
123 | HttpError: (errorCode: number, messageOrDetails: string | Record<string, any>) => {
124 | return new HttpError(errorCode, convertErrorDetails(messageOrDetails));
125 | },
126 | Conflict409: (messageOrDetails: string | Record<string, any>) => {
127 | return new ConflictError(convertErrorDetails(messageOrDetails));
128 | }
129 | };
130 |
131 | export default Errors;
132 |
```
--------------------------------------------------------------------------------
/docs/public/pages/modal-dialogs.md:
--------------------------------------------------------------------------------
```markdown
1 | # Modal Dialogs
2 |
3 | A `ModalDialog` can be invoked **declaratively** in markup or **imperatively** from code.
4 |
5 | This is the declarative method. You don't need to invoke the `ModalDialog`'s `open()` and `close()` functions directly. The `when` attribute controls opening and closing.
6 |
7 | ```xmlui-pg display {2, 3, 19}
8 | <App>
9 | <variable name="isDialogShown" value="{false}"/>
10 | <ModalDialog
11 | when="{isDialogShown}"
12 | onClose="{ isDialogShown = false }">
13 | Leslie is always number one to the coffee machine.
14 | He has a competitive personality but gets along with a lot people.
15 | </ModalDialog>
16 | <NavPanel>
17 | <NavLink label="Users" to="/" icon="user" />
18 | </NavPanel>
19 | <Pages>
20 | <Page url="/">
21 | <Card
22 | avatarUrl="https://i.pravatar.cc/100"
23 | title="Leslie Peters"
24 | subtitle="Executive Manager">
25 | Leslie is pretty smart when it comes to business.
26 | <Button label="Details" onClick="isDialogShown = true" />
27 | </Card>
28 | </Page>
29 | </Pages>
30 | </App>
31 | ```
32 |
33 | This is the imperative method. You invoke `ModalDialog`'s `open()` and `close()` functions explicitly via its ID.
34 |
35 | ```xmlui-pg display {3, 7, 19}
36 | <App>
37 | <ModalDialog
38 | id="dialog"
39 | title="Leslie Peters">
40 | Leslie is always number one to the coffee machine.
41 | He has a competitive personality but gets along with a lot people.
42 | <Button label="Close" onClick="dialog.close()" />
43 | </ModalDialog>
44 | <NavPanel>
45 | <NavLink label="Users" to="/" icon="user" />
46 | </NavPanel>
47 | <Pages>
48 | <Page url="/">
49 | <Card
50 | avatarUrl="https://i.pravatar.cc/100"
51 | title="Leslie Peters"
52 | subtitle="Executive Manager">
53 | Leslie is pretty smart when it comes to business.
54 | <Button label="Details" onClick="dialog.open()" />
55 | </Card>
56 | </Page>
57 | </Pages>
58 | </App>
59 | ```
60 |
61 | When embedding a form in a dialog, the form's cancel and successful submit actions automatically close the dialog hosting the form (unless you change this logic). Note that you can pass data via `dialog.open()`, `ModalDialog` receives it as `$param`.
62 |
63 |
64 | ```xmlui-pg display {3, 23} height="400px"
65 | <App>
66 | <ModalDialog id="dialog">
67 | <Text> ID: { $param } </Text>
68 | <Form
69 | data="{{ name: 'Leslie', age: 32 }}"
70 | onSubmit="(formData) => console.log(formData)"
71 | >
72 | <FormItem bindTo="name" label="User Name" />
73 | <FormItem bindTo="age" label="Age" type="integer" zeroOrPositive="true" />
74 | </Form>
75 | </ModalDialog>
76 | <NavPanel>
77 | <NavLink label="Users" to="/" icon="user" />
78 | </NavPanel>
79 | <Pages>
80 | <Page url="/">
81 | <variable name="employeeId" value="{ 123 }" />
82 | <Card
83 | avatarUrl="https://i.pravatar.cc/100"
84 | title="Leslie Peters"
85 | subtitle="Executive Manager">
86 | Leslie is pretty smart when it comes to business.
87 | <Button label="Details" onClick="dialog.open(employeeId)" />
88 | </Card>
89 | </Page>
90 | </Pages>
91 | </App>
92 | ```
93 |
94 |
95 | `ModalDialog` supports a few kinds of customization. For example, you can hide the close button displayed in the top-right dialog corner and add a restyled title to dialogs.
96 |
97 | ```xmlui-pg display height="220px"
98 | <App>
99 | <Button label="Open Dialog" onClick="dialog.open()" />
100 | <ModalDialog id="dialog" title="Example Dialog" closeButtonVisible="false">
101 | <Button label="Close Dialog" onClick="dialog.close()" />
102 | </ModalDialog>
103 | </App>
104 | ```
105 |
106 |
107 | See the [ModalDialog](/components/ModalDialog) reference for all properties and events.
108 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/Accordion/AccordionItemNative.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import {
2 | type ForwardedRef,
3 | forwardRef,
4 | type ReactNode,
5 | useEffect,
6 | useId,
7 | useMemo,
8 | useState,
9 | } from "react";
10 | import * as RAccordion from "@radix-ui/react-accordion";
11 | import classnames from "classnames";
12 |
13 | import styles from "../../components/Accordion/Accordion.module.scss";
14 |
15 | import { useAccordionContext } from "../../components/Accordion/AccordionContext";
16 | import Icon from "../../components/Icon/IconNative";
17 |
18 | function defaultRenderer(header: string) {
19 | return <div>{header}</div>;
20 | }
21 |
22 | type Props = {
23 | id: string;
24 | /**
25 | * The header of the accordion.
26 | */
27 | header: string;
28 |
29 | headerRenderer?: (header: string) => ReactNode;
30 |
31 | /**
32 | * The content of the accordion.
33 | */
34 | content: ReactNode;
35 |
36 | initiallyExpanded?: boolean;
37 |
38 | style?: React.CSSProperties;
39 | className?: string;
40 | };
41 |
42 | export const defaultProps: Pick<Props, "initiallyExpanded" | "headerRenderer"> = {
43 | initiallyExpanded: false,
44 | headerRenderer: defaultRenderer,
45 | };
46 |
47 | export const AccordionItemComponent = forwardRef(function AccordionItemComponent(
48 | {
49 | id,
50 | header,
51 | headerRenderer = defaultProps.headerRenderer,
52 | content,
53 | initiallyExpanded = defaultProps.initiallyExpanded,
54 | style,
55 | className,
56 | ...rest
57 | }: Props,
58 | forwardedRef: ForwardedRef<HTMLDivElement>,
59 | ) {
60 | const generatedId = useId();
61 | const itemId = useMemo(() => (id ? `${id}` : generatedId), [id, generatedId]);
62 | const triggerId = useMemo(() => `trigger_${itemId}`, [itemId]);
63 | const {
64 | rotateExpanded,
65 | expandedItems,
66 | hideIcon,
67 | expandedIcon,
68 | collapsedIcon,
69 | triggerPosition,
70 | expandItem,
71 | register,
72 | unRegister,
73 | } = useAccordionContext();
74 | const expanded = useMemo(() => (expandedItems ?? []).includes(itemId), [itemId, expandedItems]);
75 | const [initialised, setInitialised] = useState(false);
76 |
77 | useEffect(() => {
78 | if (!initialised) {
79 | setInitialised(true);
80 | if (initiallyExpanded) {
81 | expandItem(itemId);
82 | }
83 | }
84 | }, [expandItem, itemId, initiallyExpanded, initialised]);
85 |
86 | useEffect(() => {
87 | register(triggerId);
88 | }, [register, triggerId]);
89 |
90 | useEffect(() => {
91 | return () => {
92 | unRegister(triggerId);
93 | };
94 | }, [triggerId, unRegister]);
95 |
96 | return (
97 | <RAccordion.Item
98 | id={itemId}
99 | key={itemId}
100 | value={itemId}
101 | className={classnames(styles.item, className)}
102 | ref={forwardedRef}
103 | style={style}
104 | >
105 | <RAccordion.Header className={styles.header}>
106 | <RAccordion.Trigger
107 | {...rest}
108 | id={triggerId}
109 | className={classnames(styles.trigger, {
110 | [styles.triggerStart]: triggerPosition === "start",
111 | })}
112 | >
113 | {headerRenderer(header)}
114 | {!hideIcon && (
115 | <span
116 | style={{
117 | transform: expanded && !expandedIcon ? `rotate(${rotateExpanded})` : "rotate(0deg)",
118 | transition: "transform 300ms cubic-bezier(0.87, 0, 0.13, 1)",
119 | }}
120 | >
121 | <Icon
122 | name={!expanded ? collapsedIcon : expandedIcon || collapsedIcon}
123 | className={styles.chevron}
124 | aria-hidden="true"
125 | />
126 | </span>
127 | )}
128 | </RAccordion.Trigger>
129 | </RAccordion.Header>
130 | <RAccordion.Content className={styles.contentWrapper}>
131 | <div className={styles.content}>{content}</div>
132 | </RAccordion.Content>
133 | </RAccordion.Item>
134 | );
135 | });
136 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/CodeBlock/CodeBlock.module.scss:
--------------------------------------------------------------------------------
```scss
1 | @use "../../components-core/theming/themes" as t;
2 |
3 | $themeVars: ();
4 | @function createThemeVar($componentVariable) {
5 | $themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
6 | @return t.getThemeVar($themeVars, $componentVariable);
7 | }
8 |
9 | $themeVars: t.composePaddingVars($themeVars, "CodeBlock");
10 | $themeVars: t.composeBorderVars($themeVars, "CodeBlock");
11 | $backgroundColor-CodeBlock: createThemeVar("backgroundColor-CodeBlock");
12 | $backgroundColor-CodeBlock-header: createThemeVar("backgroundColor-CodeBlock-header");
13 | $color-CodeBlock-headerSeparator: createThemeVar("color-CodeBlock-headerSeparator");
14 | $marginTop-CodeBlock: createThemeVar("marginTop-CodeBlock");
15 | $marginBottom-CodeBlock: createThemeVar("marginBottom-CodeBlock");
16 | $backgroundColor-CodeBlock-highlightRow: createThemeVar("backgroundColor-CodeBlock-highlightRow");
17 | $backgroundColor-CodeBlock-highlightString: createThemeVar("backgroundColor-CodeBlock-highlightString");
18 | $borderColor-CodeBlock-highlightString-emphasis: createThemeVar("borderColor-CodeBlock-highlightString-emphasis");
19 | $borderRadius-CodeBlock: createThemeVar("borderRadius-CodeBlock");
20 | $border-CodeBlock: createThemeVar("border-CodeBlock");
21 | $boxShadow-CodeBlock: createThemeVar("boxShadow-CodeBlock");
22 | $height-CodeBlock: createThemeVar("height-CodeBlock");
23 | $paddingHorizontal-content-CodeBlock: createThemeVar("paddingHorizontal-content-CodeBlock");
24 | $paddingVertical-content-CodeBlock: createThemeVar("paddingVertical-content-CodeBlock");
25 |
26 | @layer components {
27 | .codeBlock {
28 | @include t.borderVars($themeVars, "CodeBlock");
29 | @include t.paddingVars($themeVars, "CodeBlock");
30 | margin-top: $marginTop-CodeBlock;
31 | margin-bottom: $marginBottom-CodeBlock;
32 | background-color: $backgroundColor-CodeBlock;
33 | height: $height-CodeBlock;
34 | border-radius: $borderRadius-CodeBlock;
35 | //overflow: hidden;
36 | border: $border-CodeBlock;
37 | box-shadow: $boxShadow-CodeBlock;
38 | }
39 |
40 | .copyButton {
41 | opacity: 0.7;
42 |
43 | &:hover {
44 | opacity: 1;
45 | }
46 | }
47 |
48 | .codeBlockHeader {
49 | padding: t.$space-1;
50 | padding-left: t.$space-3;
51 | background-color: $backgroundColor-CodeBlock-header;
52 | border-bottom: $color-CodeBlock-headerSeparator solid 2px;
53 | font-size: t.$fontSize-sm;
54 | border-start-start-radius: t.getThemeVar($themeVars, "borderStartStartRadius-CodeBlock");
55 | border-start-end-radius: t.getThemeVar($themeVars, "borderStartEndRadius-CodeBlock");
56 | }
57 |
58 | .codeBlockContent {
59 | padding: $paddingVertical-content-CodeBlock $paddingHorizontal-content-CodeBlock;
60 | position: relative;
61 | display: flex;
62 | //align-items: center;
63 | min-height: 48px;
64 | height: 100%;
65 | overflow: auto;
66 |
67 | .codeBlockCopyButton {
68 | position: absolute;
69 | top: t.$space-1_5;
70 | right: t.$space-1_5;
71 | z-index: 1;
72 | display: none;
73 | background-color: $backgroundColor-CodeBlock;
74 | }
75 |
76 | &:hover {
77 | .codeBlockCopyButton {
78 | display: block;
79 | }
80 | }
81 |
82 | pre {
83 | flex-grow: 1;
84 | }
85 | }
86 |
87 | :global {
88 | .codeBlockHighlightRow {
89 | background-color: $backgroundColor-CodeBlock-highlightRow;
90 | }
91 |
92 | .codeBlockHighlightString {
93 | background-color: $backgroundColor-CodeBlock-highlightString;
94 | padding: 1px;
95 | }
96 |
97 | .codeBlockHighlightStringEmphasis {
98 | border: 2px solid $borderColor-CodeBlock-highlightString-emphasis;
99 | border-radius: 2px;
100 | padding: 1px;
101 | }
102 | }
103 | }
104 |
105 |
106 | :export {
107 | themeVars: t.json-stringify($themeVars);
108 | }
109 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/FormItem/FormItem.module.scss:
--------------------------------------------------------------------------------
```scss
1 | @use "../../components-core/theming/themes" as t;
2 |
3 | // --- This code snippet is required to collect the theme variables used in this module
4 | $themeVars: (
5 | );
6 |
7 | @function createThemeVar($componentVariable) {
8 | $themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
9 | @return t.getThemeVar($themeVars, $componentVariable);
10 | }
11 |
12 | // Variables for @layer section
13 | $textColor-FormItemLabel: createThemeVar("textColor-FormItemLabel");
14 | $fontFamily-FormItemLabel: createThemeVar("fontFamily-FormItemLabel");
15 | $fontSize-FormItemLabel: createThemeVar("fontSize-FormItemLabel");
16 | $fontWeight-FormItemLabel: createThemeVar("fontWeight-FormItemLabel");
17 | $fontStyle-FormItemLabel: createThemeVar("fontStyle-FormItemLabel");
18 | $textTransform-FormItemLabel: createThemeVar("textTransform-FormItemLabel");
19 | $textColor-FormItemLabel-required: createThemeVar("textColor-FormItemLabel-required");
20 | $fontSize-FormItemLabel-required: createThemeVar("fontSize-FormItemLabel-required");
21 | $fontWeight-FormItemLabel-required: createThemeVar("fontWeight-FormItemLabel-required");
22 | $fontStyle-FormItemLabel-required: createThemeVar("fontStyle-FormItemLabel-required");
23 | $textTransform-FormItemLabel-required: createThemeVar("textTransform-FormItemLabel-required");
24 | $textColor-FormItemLabel-requiredMark: createThemeVar("textColor-FormItemLabel-requiredMark");
25 |
26 | // TODO: Add HelperText styles here, as HelperText React component is used only in FormItem
27 |
28 | @layer components {
29 | .container {
30 | display: flex;
31 | width: 100%;
32 | flex-direction: column;
33 | align-items: start;
34 | gap: 0.5em;
35 |
36 | &.top {
37 | flex-direction: column;
38 | align-items: start;
39 | justify-content: center;
40 | }
41 |
42 | &.end {
43 | flex-direction: row-reverse;
44 | align-items: center;
45 | justify-content: start;
46 | gap: 0.5em;
47 | }
48 |
49 | &.bottom {
50 | flex-direction: column-reverse;
51 | align-items: start;
52 | justify-content: center;
53 | }
54 |
55 | &.start {
56 | flex-direction: row;
57 | align-items: center;
58 | justify-content: start;
59 | gap: 0.5em;
60 | }
61 |
62 | &.shrinkToLabel {
63 | width: fit-content;
64 | }
65 |
66 | .inputLabel {
67 | display: flex;
68 | color: $textColor-FormItemLabel;
69 | font-family: $fontFamily-FormItemLabel;
70 | font-size: $fontSize-FormItemLabel;
71 | font-weight: $fontWeight-FormItemLabel;
72 | font-style: $fontStyle-FormItemLabel;
73 | text-transform: $textTransform-FormItemLabel;
74 | user-select: none;
75 | cursor: pointer;
76 | word-break: normal;
77 | white-space: nowrap;
78 |
79 | &.disabled {
80 | cursor: not-allowed;
81 | color: t.$textColor--disabled;
82 | }
83 |
84 | &.labelBreak {
85 | white-space: normal;
86 | word-break: normal;
87 | overflow-wrap: break-word;
88 | }
89 |
90 | &.required {
91 | color: $textColor-FormItemLabel-required;
92 | font-size: $fontSize-FormItemLabel-required;
93 | font-weight: $fontWeight-FormItemLabel-required;
94 | font-style: $fontStyle-FormItemLabel-required;
95 | text-transform: $textTransform-FormItemLabel-required;
96 | }
97 |
98 | .requiredMark {
99 | margin-left: 0.2em;
100 | color: $textColor-FormItemLabel-requiredMark;
101 | }
102 | }
103 | }
104 |
105 | .itemWithLabel {
106 | display: flex;
107 | justify-content: center;
108 | align-items: center;
109 | flex-direction: column;
110 | }
111 |
112 | .helperTextContainer {
113 | width: 100%;
114 | }
115 | }
116 |
117 | // --- We export the theme variables to add them to the component renderer
118 | :export {
119 | themeVars: t.json-stringify($themeVars);
120 | }
```
--------------------------------------------------------------------------------
/docs/content/components/Bookmark.md:
--------------------------------------------------------------------------------
```markdown
1 | # Bookmark [#bookmark]
2 |
3 | As its name suggests, this component places a bookmark into its parent component's view. The component has an `id` that you can use in links to navigate (scroll to) the bookmark's location.
4 |
5 | > [!INFO]
6 | > Pop out the examples in this article to view them on full screen.
7 |
8 | ## Using Bookmark [#using-bookmark]
9 |
10 | Use `Bookmark` as a standalone tag or wrap children with it.
11 |
12 | > [!INFO]
13 | > We suggest using a standalone bookmark, which does not increase the nesting depth of the source code, whenever possible. Note that a standalone bookmark will act as an additional child for its parent component, which can affect the layout (a `Stack` puts `gap`s between `Bookmark`s too).
14 |
15 | ### Standalone [#standalone]
16 |
17 | Add an `id` property to `Bookmark` instances and use the same identifiers in links with hash tags, as the following example shows:
18 |
19 | ```xmlui-pg copy display height="320px" name="Example: standalone Bookmark"
20 | ---app display copy
21 | <App layout="vertical-full-header" scrollWholePage="false">
22 | <NavPanel>
23 | <Link to="/#red">Jump to red</Link>
24 | <Link to="/#green">Jump to green</Link>
25 | <Link to="/#blue">Jump to blue</Link>
26 | </NavPanel>
27 | <Pages>
28 | <Page url="/">
29 | <Bookmark id="red">
30 | <VStack height="200px" backgroundColor="red" />
31 | </Bookmark>
32 | <Bookmark id="green">
33 | <VStack height="200px" backgroundColor="green" />
34 | </Bookmark>
35 | <Bookmark id="blue">
36 | <VStack height="200px" backgroundColor="blue" />
37 | </Bookmark>
38 | </Page>
39 | </Pages>
40 | </App>
41 | ---desc
42 | Clicking a link scrolls the bookmarked component adjacent to the corresponding `Bookmark` tag into the view:
43 | ```
44 |
45 | ### With nested children [#with-nested-children]
46 |
47 | Alternatively, you can nest components into `Bookmark`:
48 |
49 | ```xmlui-pg copy display height="320px" name="Example: Bookmark with nested children"
50 | ---app display copy
51 | <App layout="vertical-full-header" scrollWholePage="false">
52 | <NavPanel>
53 | <Link to="/#red">Jump to red</Link>
54 | <Link to="/#green">Jump to green</Link>
55 | <Link to="/#blue">Jump to blue</Link>
56 | </NavPanel>
57 | <Pages>
58 | <Page url="/">
59 | <Bookmark id="red">
60 | <VStack height="200px" backgroundColor="red" />
61 | </Bookmark>
62 | <Bookmark id="green">
63 | <VStack height="200px" backgroundColor="green" />
64 | </Bookmark>
65 | <Bookmark id="blue">
66 | <VStack height="200px" backgroundColor="blue" />
67 | </Bookmark>
68 | </Page>
69 | </Pages>
70 | </App>
71 | ---desc
72 | You can try; this example works like the previous one:
73 | ```
74 |
75 | ## Properties [#properties]
76 |
77 | ### `id` [#id]
78 |
79 | The unique identifier of the bookmark. You can use this identifier in links to navigate to this component's location. If this identifier is not set, you cannot programmatically visit this bookmark.
80 |
81 | ### `level` (default: 1) [#level-default-1]
82 |
83 | The level of the bookmark. The level is used to determine the bookmark's position in the table of contents.
84 |
85 | ### `omitFromToc` (default: false) [#omitfromtoc-default-false]
86 |
87 | If true, this bookmark will be excluded from the table of contents.
88 |
89 | ### `title` [#title]
90 |
91 | Defines the text to display the bookmark in the table of contents. If this property is empty, the text falls back to the value of `id`.
92 |
93 | ## Events [#events]
94 |
95 | This component does not have any events.
96 |
97 | ## Exposed Methods [#exposed-methods]
98 |
99 | ### `scrollIntoView` [#scrollintoview]
100 |
101 | Scrolls the bookmark into view.
102 |
103 | **Signature**: `scrollIntoView()`
104 |
105 | ## Styling [#styling]
106 |
107 | This component does not have any styles.
108 |
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/loader/ExternalDataLoader.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import { useCallback } from "react";
2 |
3 | import type {
4 | LoaderErrorFn,
5 | LoaderInProgressChangedFn,
6 | LoaderLoadedFn,
7 | } from "../abstractions/LoaderRenderer";
8 | import type { ComponentDef} from "../../abstractions/ComponentDefs";
9 | import type { ContainerState } from "../rendering/ContainerWrapper";
10 | import { removeNullProperties } from "../utils/misc";
11 | import { extractParam } from "../utils/extractParam";
12 | import { createLoaderRenderer } from "../renderers";
13 | import { useAppContext } from "../AppContext";
14 | import { Loader } from "./Loader";
15 | import { createMetadata, d } from "../../components/metadata-helpers";
16 |
17 | /**
18 | * Properties of the Data loader component
19 | */
20 | type ExternalDataLoaderProps = {
21 | loader: ExternalDataLoaderDef;
22 | state: ContainerState;
23 | doNotRemoveNulls?: boolean;
24 | loaderInProgressChanged: LoaderInProgressChangedFn;
25 | loaderIsRefetchingChanged: LoaderInProgressChangedFn;
26 | loaderLoaded: LoaderLoadedFn;
27 | loaderError: LoaderErrorFn;
28 | structuralSharing?: boolean;
29 | };
30 |
31 | /**
32 | * Represents a non-displayed React component, which handles the specified API loader
33 | */
34 | function ExternalDataLoader({
35 | loader,
36 | loaderInProgressChanged,
37 | loaderIsRefetchingChanged,
38 | loaderError,
39 | loaderLoaded,
40 | state,
41 | doNotRemoveNulls,
42 | structuralSharing = true,
43 | }: ExternalDataLoaderProps) {
44 | const appContext = useAppContext();
45 | const method = extractParam(state, loader.props.method, appContext);
46 | const headers: Record<string, string> = extractParam(state, loader.props.headers, appContext);
47 | const data = extractParam(state, loader.props.data, appContext);
48 |
49 | const url = extractParam(state, loader.props.url, appContext);
50 | const urlLoadable = !!url;
51 |
52 | const doLoad = useCallback(async () => {
53 | if (!urlLoadable) {
54 | return;
55 | }
56 | const response = await fetch(url, {
57 | method: method || "POST",
58 | headers: {
59 | "Content-Type": "application/json",
60 | ...headers,
61 | },
62 | body: JSON.stringify(data),
63 | });
64 | const responseObj = await response.json();
65 | if (!doNotRemoveNulls) {
66 | removeNullProperties(responseObj);
67 | }
68 | return responseObj;
69 | }, [urlLoadable, headers, data, url, method, doNotRemoveNulls]);
70 |
71 | return (
72 | <Loader
73 | state={state}
74 | loader={loader}
75 | loaderInProgressChanged={loaderInProgressChanged}
76 | loaderIsRefetchingChanged={loaderIsRefetchingChanged}
77 | loaderLoaded={loaderLoaded}
78 | loaderError={loaderError}
79 | loaderFn={doLoad}
80 | structuralSharing={structuralSharing}
81 | />
82 | );
83 | }
84 |
85 | export const ExternalDataLoaderMd = createMetadata({
86 | status: "stable",
87 | description: `Represents a loader that calls an API through an HTTP/HTTPS GET request`,
88 | props: {
89 | url: d("URL segment to use in the GET request"),
90 | method: d("The HTTP method to use"),
91 | headers: d("Headers to send with the request"),
92 | data: d("The body of the request to be sent as JSON"),
93 | },
94 | });
95 |
96 | type ExternalDataLoaderDef = ComponentDef<typeof ExternalDataLoaderMd>;
97 |
98 | export const externalDataLoaderRenderer = createLoaderRenderer(
99 | "ExternalDataLoader",
100 | ({ loader, state, loaderInProgressChanged, loaderIsRefetchingChanged, loaderError, loaderLoaded }) => {
101 | return (
102 | <ExternalDataLoader
103 | loader={loader}
104 | state={state}
105 | loaderInProgressChanged={loaderInProgressChanged}
106 | loaderIsRefetchingChanged={loaderIsRefetchingChanged}
107 | loaderLoaded={loaderLoaded}
108 | loaderError={loaderError}
109 | />
110 | );
111 | },
112 | ExternalDataLoaderMd,
113 | );
114 |
```