This is page 26 of 141. Use http://codebase.md/xmlui-org/xmlui/xmlui-latest.js?lines=false&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ ├── config.json
│ └── lemon-zoos-prove.md
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-blog-optimized.yml
│ ├── deploy-blog.yml
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│ ├── launch.json
│ └── settings.json
├── blog
│ ├── .gitignore
│ ├── .gitkeep
│ ├── CHANGELOG.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── 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
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ └── PageNotFound.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── blog-theme.ts
│ └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── ComponentRefLinks.txt
│ ├── content
│ │ ├── _meta.json
│ │ ├── components
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── APICall.md
│ │ │ ├── App.md
│ │ │ ├── AppHeader.md
│ │ │ ├── AppState.md
│ │ │ ├── AutoComplete.md
│ │ │ ├── Avatar.md
│ │ │ ├── Backdrop.md
│ │ │ ├── Badge.md
│ │ │ ├── BarChart.md
│ │ │ ├── Bookmark.md
│ │ │ ├── Breakout.md
│ │ │ ├── Button.md
│ │ │ ├── Card.md
│ │ │ ├── Carousel.md
│ │ │ ├── ChangeListener.md
│ │ │ ├── Checkbox.md
│ │ │ ├── CHStack.md
│ │ │ ├── ColorPicker.md
│ │ │ ├── Column.md
│ │ │ ├── ContentSeparator.md
│ │ │ ├── CVStack.md
│ │ │ ├── DataSource.md
│ │ │ ├── DateInput.md
│ │ │ ├── DatePicker.md
│ │ │ ├── DonutChart.md
│ │ │ ├── DropdownMenu.md
│ │ │ ├── EmojiSelector.md
│ │ │ ├── ExpandableItem.md
│ │ │ ├── FileInput.md
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FlowLayout.md
│ │ │ ├── Footer.md
│ │ │ ├── Form.md
│ │ │ ├── FormItem.md
│ │ │ ├── FormSection.md
│ │ │ ├── Fragment.md
│ │ │ ├── H1.md
│ │ │ ├── H2.md
│ │ │ ├── H3.md
│ │ │ ├── H4.md
│ │ │ ├── H5.md
│ │ │ ├── H6.md
│ │ │ ├── Heading.md
│ │ │ ├── HSplitter.md
│ │ │ ├── HStack.md
│ │ │ ├── Icon.md
│ │ │ ├── IFrame.md
│ │ │ ├── Image.md
│ │ │ ├── Items.md
│ │ │ ├── LabelList.md
│ │ │ ├── Legend.md
│ │ │ ├── LineChart.md
│ │ │ ├── Link.md
│ │ │ ├── List.md
│ │ │ ├── Logo.md
│ │ │ ├── Markdown.md
│ │ │ ├── MenuItem.md
│ │ │ ├── MenuSeparator.md
│ │ │ ├── ModalDialog.md
│ │ │ ├── NavGroup.md
│ │ │ ├── NavLink.md
│ │ │ ├── NavPanel.md
│ │ │ ├── NoResult.md
│ │ │ ├── NumberBox.md
│ │ │ ├── Option.md
│ │ │ ├── Page.md
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── Pages.md
│ │ │ ├── Pagination.md
│ │ │ ├── PasswordInput.md
│ │ │ ├── PieChart.md
│ │ │ ├── ProgressBar.md
│ │ │ ├── Queue.md
│ │ │ ├── RadioGroup.md
│ │ │ ├── RealTimeAdapter.md
│ │ │ ├── Redirect.md
│ │ │ ├── Select.md
│ │ │ ├── Slider.md
│ │ │ ├── Slot.md
│ │ │ ├── SpaceFiller.md
│ │ │ ├── Spinner.md
│ │ │ ├── Splitter.md
│ │ │ ├── Stack.md
│ │ │ ├── StickyBox.md
│ │ │ ├── SubMenuItem.md
│ │ │ ├── Switch.md
│ │ │ ├── TabItem.md
│ │ │ ├── Table.md
│ │ │ ├── TableOfContents.md
│ │ │ ├── Tabs.md
│ │ │ ├── Text.md
│ │ │ ├── TextArea.md
│ │ │ ├── TextBox.md
│ │ │ ├── Theme.md
│ │ │ ├── TimeInput.md
│ │ │ ├── Timer.md
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneSwitch.md
│ │ │ ├── Tooltip.md
│ │ │ ├── Tree.md
│ │ │ ├── VSplitter.md
│ │ │ ├── VStack.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ ├── xmlui-spreadsheet
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Spreadsheet.md
│ │ │ └── xmlui-website-blocks
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Carousel.md
│ │ │ ├── HelloMd.md
│ │ │ ├── HeroSection.md
│ │ │ └── ScrollToTop.md
│ │ └── extensions
│ │ ├── _meta.json
│ │ ├── xmlui-animations
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Animation.md
│ │ │ ├── FadeAnimation.md
│ │ │ ├── FadeInAnimation.md
│ │ │ ├── FadeOutAnimation.md
│ │ │ ├── ScaleAnimation.md
│ │ │ └── SlideInAnimation.md
│ │ └── xmlui-website-blocks
│ │ ├── _meta.json
│ │ ├── _overview.md
│ │ ├── Carousel.md
│ │ ├── HelloMd.md
│ │ ├── HeroSection.md
│ │ └── ScrollToTop.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── pages
│ │ │ ├── _meta.json
│ │ │ ├── app-structure.md
│ │ │ ├── build-editor-component.md
│ │ │ ├── build-hello-world-component.md
│ │ │ ├── components-intro.md
│ │ │ ├── context-variables.md
│ │ │ ├── forms.md
│ │ │ ├── globals.md
│ │ │ ├── glossary.md
│ │ │ ├── helper-tags.md
│ │ │ ├── hosted-deployment.md
│ │ │ ├── howto
│ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md
│ │ │ │ ├── chain-a-refetch.md
│ │ │ │ ├── control-cache-invalidation.md
│ │ │ │ ├── debounce-user-input-for-api-calls.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.tsx
│ │ │ ├── ConfirmationDialog.module.scss
│ │ │ ├── ConfirmationDialog.tsx
│ │ │ ├── Editor.tsx
│ │ │ ├── Header.module.scss
│ │ │ ├── Header.tsx
│ │ │ ├── Playground.tsx
│ │ │ ├── PlaygroundContent.module.scss
│ │ │ ├── PlaygroundContent.tsx
│ │ │ ├── PlaygroundNative.module.scss
│ │ │ ├── PlaygroundNative.tsx
│ │ │ ├── Preview.module.scss
│ │ │ ├── Preview.tsx
│ │ │ ├── Select.module.scss
│ │ │ ├── StandalonePlayground.tsx
│ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ ├── ThemeSwitcher.module.scss
│ │ │ ├── ThemeSwitcher.tsx
│ │ │ ├── ToneSwitcher.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── providers
│ │ │ ├── Toast.module.scss
│ │ │ └── ToastProvider.tsx
│ │ ├── state
│ │ │ └── store.ts
│ │ ├── themes
│ │ │ └── theme.ts
│ │ └── utils
│ │ └── helpers.ts
│ ├── 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
│ ├── components-with-options.md
│ ├── containers.md
│ ├── data-operations.md
│ ├── glossary.md
│ ├── index.md
│ ├── next
│ │ ├── component-dev-guide.md
│ │ ├── configuration-management-enhancement-summary.md
│ │ ├── documentation-scripts-refactoring-complete-summary.md
│ │ ├── documentation-scripts-refactoring-plan.md
│ │ ├── duplicate-pattern-extraction-summary.md
│ │ ├── error-handling-standardization-summary.md
│ │ ├── generating-component-reference.md
│ │ ├── index.md
│ │ ├── logging-consistency-implementation-summary.md
│ │ ├── project-build.md
│ │ ├── project-structure.md
│ │ ├── theme-context.md
│ │ ├── tiptap-design-considerations.md
│ │ ├── working-with-code.md
│ │ ├── xmlui-runtime-architecture
│ │ └── xmlui-wcag-accessibility-report.md
│ ├── react-fundamentals.md
│ ├── release-method.md
│ ├── standalone-app.md
│ ├── ud-components.md
│ └── xmlui-repo.md
├── package.json
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── generate-docs
│ │ ├── build-downloads-map.mjs
│ │ ├── build-pages-map.mjs
│ │ ├── components-config.json
│ │ ├── configuration-management.mjs
│ │ ├── constants.mjs
│ │ ├── create-theme-files.mjs
│ │ ├── DocsGenerator.mjs
│ │ ├── error-handling.mjs
│ │ ├── extensions-config.json
│ │ ├── folders.mjs
│ │ ├── generate-summary-files.mjs
│ │ ├── get-docs.mjs
│ │ ├── input-handler.mjs
│ │ ├── logger.mjs
│ │ ├── logging-standards.mjs
│ │ ├── MetadataProcessor.mjs
│ │ ├── pattern-utilities.mjs
│ │ └── utils.mjs
│ ├── get-langserver-metadata.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.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ ├── LabelListNative.module.scss
│ │ │ │ └── LabelListNative.tsx
│ │ │ ├── Legend
│ │ │ │ ├── Legend.spec.ts
│ │ │ │ ├── Legend.tsx
│ │ │ │ └── LegendNative.tsx
│ │ │ ├── LineChart
│ │ │ │ ├── LineChart.md
│ │ │ │ ├── LineChart.module.scss
│ │ │ │ ├── LineChart.spec.ts
│ │ │ │ ├── LineChart.tsx
│ │ │ │ └── LineChartNative.tsx
│ │ │ ├── PieChart
│ │ │ │ ├── PieChart.md
│ │ │ │ ├── PieChart.spec.ts
│ │ │ │ ├── PieChart.tsx
│ │ │ │ ├── PieChartNative.module.scss
│ │ │ │ └── PieChartNative.tsx
│ │ │ ├── RadarChart
│ │ │ │ ├── RadarChart.md
│ │ │ │ ├── RadarChart.spec.ts
│ │ │ │ ├── RadarChart.tsx
│ │ │ │ └── RadarChartNative.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── TooltipContent.module.scss
│ │ │ │ ├── TooltipContent.spec.ts
│ │ │ │ └── TooltipContent.tsx
│ │ │ └── utils
│ │ │ ├── abstractions.ts
│ │ │ └── ChartProvider.tsx
│ │ ├── Checkbox
│ │ │ ├── Checkbox.md
│ │ │ ├── Checkbox.spec.ts
│ │ │ └── Checkbox.tsx
│ │ ├── CodeBlock
│ │ │ ├── CodeBlock.module.scss
│ │ │ ├── CodeBlock.spec.ts
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CodeBlockNative.tsx
│ │ │ └── highlight-code.ts
│ │ ├── collectedComponentMetadata.ts
│ │ ├── ColorPicker
│ │ │ ├── ColorPicker.md
│ │ │ ├── ColorPicker.module.scss
│ │ │ ├── ColorPicker.spec.ts
│ │ │ ├── ColorPicker.tsx
│ │ │ └── ColorPickerNative.tsx
│ │ ├── Column
│ │ │ ├── Column.md
│ │ │ ├── Column.tsx
│ │ │ ├── ColumnNative.tsx
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ └── TableContext.tsx
│ │ ├── component-utils.ts
│ │ ├── ComponentProvider.tsx
│ │ ├── ComponentRegistryContext.tsx
│ │ ├── container-helpers.tsx
│ │ ├── ContentSeparator
│ │ │ ├── ContentSeparator.md
│ │ │ ├── ContentSeparator.module.scss
│ │ │ ├── ContentSeparator.spec.ts
│ │ │ ├── ContentSeparator.tsx
│ │ │ └── ContentSeparatorNative.tsx
│ │ ├── DataSource
│ │ │ ├── DataSource.md
│ │ │ └── DataSource.tsx
│ │ ├── DateInput
│ │ │ ├── DateInput.md
│ │ │ ├── DateInput.module.scss
│ │ │ ├── DateInput.spec.ts
│ │ │ ├── DateInput.tsx
│ │ │ └── DateInputNative.tsx
│ │ ├── DatePicker
│ │ │ ├── DatePicker.md
│ │ │ ├── DatePicker.module.scss
│ │ │ ├── DatePicker.spec.ts
│ │ │ ├── DatePicker.tsx
│ │ │ └── DatePickerNative.tsx
│ │ ├── DropdownMenu
│ │ │ ├── DropdownMenu.md
│ │ │ ├── DropdownMenu.module.scss
│ │ │ ├── DropdownMenu.spec.ts
│ │ │ ├── DropdownMenu.tsx
│ │ │ ├── DropdownMenuNative.tsx
│ │ │ ├── MenuItem.md
│ │ │ └── SubMenuItem.md
│ │ ├── EmojiSelector
│ │ │ ├── EmojiSelector.md
│ │ │ ├── EmojiSelector.spec.ts
│ │ │ ├── EmojiSelector.tsx
│ │ │ └── EmojiSelectorNative.tsx
│ │ ├── ExpandableItem
│ │ │ ├── ExpandableItem.module.scss
│ │ │ ├── ExpandableItem.spec.ts
│ │ │ ├── ExpandableItem.tsx
│ │ │ └── ExpandableItemNative.tsx
│ │ ├── FileInput
│ │ │ ├── FileInput.md
│ │ │ ├── FileInput.module.scss
│ │ │ ├── FileInput.spec.ts
│ │ │ ├── FileInput.tsx
│ │ │ └── FileInputNative.tsx
│ │ ├── FileUploadDropZone
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FileUploadDropZone.module.scss
│ │ │ ├── FileUploadDropZone.spec.ts
│ │ │ ├── FileUploadDropZone.tsx
│ │ │ └── FileUploadDropZoneNative.tsx
│ │ ├── FlowLayout
│ │ │ ├── FlowLayout.md
│ │ │ ├── FlowLayout.module.scss
│ │ │ ├── FlowLayout.spec.ts
│ │ │ ├── FlowLayout.spec.ts-snapshots
│ │ │ │ └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
│ │ │ ├── FlowLayout.tsx
│ │ │ └── FlowLayoutNative.tsx
│ │ ├── Footer
│ │ │ ├── Footer.md
│ │ │ ├── Footer.module.scss
│ │ │ ├── Footer.spec.ts
│ │ │ ├── Footer.tsx
│ │ │ └── FooterNative.tsx
│ │ ├── Form
│ │ │ ├── Form.md
│ │ │ ├── Form.module.scss
│ │ │ ├── Form.spec.ts
│ │ │ ├── Form.tsx
│ │ │ ├── formActions.ts
│ │ │ ├── FormContext.ts
│ │ │ └── FormNative.tsx
│ │ ├── FormItem
│ │ │ ├── FormItem.md
│ │ │ ├── FormItem.module.scss
│ │ │ ├── FormItem.spec.ts
│ │ │ ├── FormItem.tsx
│ │ │ ├── FormItemNative.tsx
│ │ │ ├── HelperText.module.scss
│ │ │ ├── HelperText.tsx
│ │ │ ├── ItemWithLabel.tsx
│ │ │ └── Validations.ts
│ │ ├── FormSection
│ │ │ ├── FormSection.md
│ │ │ ├── FormSection.ts
│ │ │ └── FormSection.xmlui
│ │ ├── Fragment
│ │ │ ├── Fragment.spec.ts
│ │ │ └── Fragment.tsx
│ │ ├── Heading
│ │ │ ├── abstractions.ts
│ │ │ ├── H1.md
│ │ │ ├── H1.spec.ts
│ │ │ ├── H2.md
│ │ │ ├── H2.spec.ts
│ │ │ ├── H3.md
│ │ │ ├── H3.spec.ts
│ │ │ ├── H4.md
│ │ │ ├── H4.spec.ts
│ │ │ ├── H5.md
│ │ │ ├── H5.spec.ts
│ │ │ ├── H6.md
│ │ │ ├── H6.spec.ts
│ │ │ ├── Heading.md
│ │ │ ├── Heading.module.scss
│ │ │ ├── Heading.spec.ts
│ │ │ ├── Heading.tsx
│ │ │ └── HeadingNative.tsx
│ │ ├── HoverCard
│ │ │ ├── HoverCard.tsx
│ │ │ └── HovercardNative.tsx
│ │ ├── HtmlTags
│ │ │ ├── HtmlTags.module.scss
│ │ │ ├── HtmlTags.spec.ts
│ │ │ └── HtmlTags.tsx
│ │ ├── Icon
│ │ │ ├── AdmonitionDanger.tsx
│ │ │ ├── AdmonitionInfo.tsx
│ │ │ ├── AdmonitionNote.tsx
│ │ │ ├── AdmonitionTip.tsx
│ │ │ ├── AdmonitionWarning.tsx
│ │ │ ├── ApiIcon.tsx
│ │ │ ├── ArrowDropDown.module.scss
│ │ │ ├── ArrowDropDown.tsx
│ │ │ ├── ArrowDropUp.module.scss
│ │ │ ├── ArrowDropUp.tsx
│ │ │ ├── ArrowLeft.module.scss
│ │ │ ├── ArrowLeft.tsx
│ │ │ ├── ArrowRight.module.scss
│ │ │ ├── ArrowRight.tsx
│ │ │ ├── Attach.tsx
│ │ │ ├── Binding.module.scss
│ │ │ ├── Binding.tsx
│ │ │ ├── BoardIcon.tsx
│ │ │ ├── BoxIcon.tsx
│ │ │ ├── CheckIcon.tsx
│ │ │ ├── ChevronDownIcon.tsx
│ │ │ ├── ChevronLeft.tsx
│ │ │ ├── ChevronRight.tsx
│ │ │ ├── ChevronUpIcon.tsx
│ │ │ ├── CodeFileIcon.tsx
│ │ │ ├── CodeSandbox.tsx
│ │ │ ├── CompactListIcon.tsx
│ │ │ ├── ContentCopyIcon.tsx
│ │ │ ├── DarkToLightIcon.tsx
│ │ │ ├── DatabaseIcon.module.scss
│ │ │ ├── DatabaseIcon.tsx
│ │ │ ├── DocFileIcon.tsx
│ │ │ ├── DocIcon.tsx
│ │ │ ├── DotMenuHorizontalIcon.tsx
│ │ │ ├── DotMenuIcon.tsx
│ │ │ ├── EmailIcon.tsx
│ │ │ ├── EmptyFolderIcon.tsx
│ │ │ ├── ErrorIcon.tsx
│ │ │ ├── ExpressionIcon.tsx
│ │ │ ├── FillPlusCricleIcon.tsx
│ │ │ ├── FilterIcon.tsx
│ │ │ ├── FolderIcon.tsx
│ │ │ ├── GlobeIcon.tsx
│ │ │ ├── HomeIcon.tsx
│ │ │ ├── HyperLinkIcon.tsx
│ │ │ ├── Icon.md
│ │ │ ├── Icon.module.scss
│ │ │ ├── Icon.spec.ts
│ │ │ ├── Icon.tsx
│ │ │ ├── IconNative.tsx
│ │ │ ├── ImageFileIcon.tsx
│ │ │ ├── Inspect.tsx
│ │ │ ├── LightToDark.tsx
│ │ │ ├── LinkIcon.tsx
│ │ │ ├── ListIcon.tsx
│ │ │ ├── LooseListIcon.tsx
│ │ │ ├── MoonIcon.tsx
│ │ │ ├── MoreOptionsIcon.tsx
│ │ │ ├── NoSortIcon.tsx
│ │ │ ├── PDFIcon.tsx
│ │ │ ├── PenIcon.tsx
│ │ │ ├── PhoneIcon.tsx
│ │ │ ├── PhotoIcon.tsx
│ │ │ ├── PlusIcon.tsx
│ │ │ ├── SearchIcon.tsx
│ │ │ ├── ShareIcon.tsx
│ │ │ ├── SortAscendingIcon.tsx
│ │ │ ├── SortDescendingIcon.tsx
│ │ │ ├── StarsIcon.tsx
│ │ │ ├── SunIcon.tsx
│ │ │ ├── svg
│ │ │ │ ├── admonition_danger.svg
│ │ │ │ ├── admonition_info.svg
│ │ │ │ ├── admonition_note.svg
│ │ │ │ ├── admonition_tip.svg
│ │ │ │ ├── admonition_warning.svg
│ │ │ │ ├── api.svg
│ │ │ │ ├── arrow-dropdown.svg
│ │ │ │ ├── arrow-left.svg
│ │ │ │ ├── arrow-right.svg
│ │ │ │ ├── arrow-up.svg
│ │ │ │ ├── attach.svg
│ │ │ │ ├── binding.svg
│ │ │ │ ├── box.svg
│ │ │ │ ├── bulb.svg
│ │ │ │ ├── code-file.svg
│ │ │ │ ├── code-sandbox.svg
│ │ │ │ ├── dark_to_light.svg
│ │ │ │ ├── database.svg
│ │ │ │ ├── doc.svg
│ │ │ │ ├── empty-folder.svg
│ │ │ │ ├── expression.svg
│ │ │ │ ├── eye-closed.svg
│ │ │ │ ├── eye-dark.svg
│ │ │ │ ├── eye.svg
│ │ │ │ ├── file-text.svg
│ │ │ │ ├── filter.svg
│ │ │ │ ├── folder.svg
│ │ │ │ ├── img.svg
│ │ │ │ ├── inspect.svg
│ │ │ │ ├── light_to_dark.svg
│ │ │ │ ├── moon.svg
│ │ │ │ ├── pdf.svg
│ │ │ │ ├── photo.svg
│ │ │ │ ├── share.svg
│ │ │ │ ├── stars.svg
│ │ │ │ ├── sun.svg
│ │ │ │ ├── trending-down.svg
│ │ │ │ ├── trending-level.svg
│ │ │ │ ├── trending-up.svg
│ │ │ │ ├── txt.svg
│ │ │ │ ├── unknown-file.svg
│ │ │ │ ├── unlink.svg
│ │ │ │ └── xls.svg
│ │ │ ├── TableDeleteColumnIcon.tsx
│ │ │ ├── TableDeleteRowIcon.tsx
│ │ │ ├── TableInsertColumnIcon.tsx
│ │ │ ├── TableInsertRowIcon.tsx
│ │ │ ├── TrashIcon.tsx
│ │ │ ├── TrendingDownIcon.tsx
│ │ │ ├── TrendingLevelIcon.tsx
│ │ │ ├── TrendingUpIcon.tsx
│ │ │ ├── TxtIcon.tsx
│ │ │ ├── UnknownFileIcon.tsx
│ │ │ ├── UnlinkIcon.tsx
│ │ │ ├── UserIcon.tsx
│ │ │ ├── WarningIcon.tsx
│ │ │ └── XlsIcon.tsx
│ │ ├── IconProvider.tsx
│ │ ├── IconRegistryContext.tsx
│ │ ├── IFrame
│ │ │ ├── IFrame.md
│ │ │ ├── IFrame.module.scss
│ │ │ ├── IFrame.spec.ts
│ │ │ ├── IFrame.tsx
│ │ │ └── IFrameNative.tsx
│ │ ├── Image
│ │ │ ├── Image.md
│ │ │ ├── Image.module.scss
│ │ │ ├── Image.spec.ts
│ │ │ ├── Image.tsx
│ │ │ └── ImageNative.tsx
│ │ ├── Input
│ │ │ ├── index.ts
│ │ │ ├── InputAdornment.module.scss
│ │ │ ├── InputAdornment.tsx
│ │ │ ├── InputDivider.module.scss
│ │ │ ├── InputDivider.tsx
│ │ │ ├── InputLabel.module.scss
│ │ │ ├── InputLabel.tsx
│ │ │ ├── PartialInput.module.scss
│ │ │ └── PartialInput.tsx
│ │ ├── InspectButton
│ │ │ ├── InspectButton.module.scss
│ │ │ └── InspectButton.tsx
│ │ ├── Items
│ │ │ ├── Items.md
│ │ │ ├── Items.spec.ts
│ │ │ ├── Items.tsx
│ │ │ └── ItemsNative.tsx
│ │ ├── Link
│ │ │ ├── Link.md
│ │ │ ├── Link.module.scss
│ │ │ ├── Link.spec.ts
│ │ │ ├── Link.tsx
│ │ │ └── LinkNative.tsx
│ │ ├── List
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── List.md
│ │ │ ├── List.module.scss
│ │ │ ├── List.spec.ts
│ │ │ ├── List.tsx
│ │ │ └── ListNative.tsx
│ │ ├── Logo
│ │ │ ├── doc-resources
│ │ │ │ └── xmlui-logo.svg
│ │ │ ├── Logo.md
│ │ │ ├── Logo.tsx
│ │ │ └── LogoNative.tsx
│ │ ├── Markdown
│ │ │ ├── CodeText.module.scss
│ │ │ ├── CodeText.tsx
│ │ │ ├── Markdown.md
│ │ │ ├── Markdown.module.scss
│ │ │ ├── Markdown.spec.ts
│ │ │ ├── Markdown.tsx
│ │ │ ├── MarkdownNative.tsx
│ │ │ ├── parse-binding-expr.ts
│ │ │ └── utils.ts
│ │ ├── metadata-helpers.ts
│ │ ├── ModalDialog
│ │ │ ├── ConfirmationModalContextProvider.tsx
│ │ │ ├── Dialog.module.scss
│ │ │ ├── Dialog.tsx
│ │ │ ├── ModalDialog.md
│ │ │ ├── ModalDialog.module.scss
│ │ │ ├── ModalDialog.spec.ts
│ │ │ ├── ModalDialog.tsx
│ │ │ ├── ModalDialogNative.tsx
│ │ │ └── ModalVisibilityContext.tsx
│ │ ├── NavGroup
│ │ │ ├── NavGroup.md
│ │ │ ├── NavGroup.module.scss
│ │ │ ├── NavGroup.spec.ts
│ │ │ ├── NavGroup.tsx
│ │ │ ├── NavGroupContext.ts
│ │ │ └── NavGroupNative.tsx
│ │ ├── NavLink
│ │ │ ├── NavLink.md
│ │ │ ├── NavLink.module.scss
│ │ │ ├── NavLink.spec.ts
│ │ │ ├── NavLink.tsx
│ │ │ └── NavLinkNative.tsx
│ │ ├── NavPanel
│ │ │ ├── NavPanel.md
│ │ │ ├── NavPanel.module.scss
│ │ │ ├── NavPanel.spec.ts
│ │ │ ├── NavPanel.tsx
│ │ │ └── NavPanelNative.tsx
│ │ ├── NestedApp
│ │ │ ├── AppWithCodeView.module.scss
│ │ │ ├── AppWithCodeView.tsx
│ │ │ ├── AppWithCodeViewNative.tsx
│ │ │ ├── defaultProps.tsx
│ │ │ ├── logo.svg
│ │ │ ├── NestedApp.module.scss
│ │ │ ├── NestedApp.tsx
│ │ │ ├── NestedAppNative.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── NoResult
│ │ │ ├── NoResult.md
│ │ │ ├── NoResult.module.scss
│ │ │ ├── NoResult.spec.ts
│ │ │ ├── NoResult.tsx
│ │ │ └── NoResultNative.tsx
│ │ ├── NumberBox
│ │ │ ├── numberbox-abstractions.ts
│ │ │ ├── NumberBox.md
│ │ │ ├── NumberBox.module.scss
│ │ │ ├── NumberBox.spec.ts
│ │ │ ├── NumberBox.tsx
│ │ │ └── NumberBoxNative.tsx
│ │ ├── Option
│ │ │ ├── Option.md
│ │ │ ├── Option.spec.ts
│ │ │ ├── Option.tsx
│ │ │ ├── OptionNative.tsx
│ │ │ └── OptionTypeProvider.tsx
│ │ ├── PageMetaTitle
│ │ │ ├── PageMetaTilteNative.tsx
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── PageMetaTitle.spec.ts
│ │ │ └── PageMetaTitle.tsx
│ │ ├── Pages
│ │ │ ├── Page.md
│ │ │ ├── Pages.md
│ │ │ ├── Pages.module.scss
│ │ │ ├── Pages.tsx
│ │ │ └── PagesNative.tsx
│ │ ├── Pagination
│ │ │ ├── Pagination.md
│ │ │ ├── Pagination.module.scss
│ │ │ ├── Pagination.spec.ts
│ │ │ ├── Pagination.tsx
│ │ │ └── PaginationNative.tsx
│ │ ├── PositionedContainer
│ │ │ ├── PositionedContainer.module.scss
│ │ │ ├── PositionedContainer.tsx
│ │ │ └── PositionedContainerNative.tsx
│ │ ├── ProfileMenu
│ │ │ ├── ProfileMenu.module.scss
│ │ │ └── ProfileMenu.tsx
│ │ ├── ProgressBar
│ │ │ ├── ProgressBar.md
│ │ │ ├── ProgressBar.module.scss
│ │ │ ├── ProgressBar.spec.ts
│ │ │ ├── ProgressBar.tsx
│ │ │ └── ProgressBarNative.tsx
│ │ ├── Queue
│ │ │ ├── Queue.md
│ │ │ ├── Queue.spec.ts
│ │ │ ├── Queue.tsx
│ │ │ ├── queueActions.ts
│ │ │ └── QueueNative.tsx
│ │ ├── RadioGroup
│ │ │ ├── RadioGroup.md
│ │ │ ├── RadioGroup.module.scss
│ │ │ ├── RadioGroup.spec.ts
│ │ │ ├── RadioGroup.tsx
│ │ │ ├── RadioGroupNative.tsx
│ │ │ ├── RadioItem.tsx
│ │ │ └── RadioItemNative.tsx
│ │ ├── RealTimeAdapter
│ │ │ ├── RealTimeAdapter.tsx
│ │ │ └── RealTimeAdapterNative.tsx
│ │ ├── Redirect
│ │ │ ├── Redirect.md
│ │ │ ├── Redirect.spec.ts
│ │ │ └── Redirect.tsx
│ │ ├── ResponsiveBar
│ │ │ ├── README.md
│ │ │ ├── ResponsiveBar.md
│ │ │ ├── ResponsiveBar.module.scss
│ │ │ ├── ResponsiveBar.spec.ts
│ │ │ ├── ResponsiveBar.tsx
│ │ │ └── ResponsiveBarNative.tsx
│ │ ├── Select
│ │ │ ├── HiddenOption.tsx
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ └── SelectNative.tsx
│ │ ├── SelectionStore
│ │ │ ├── SelectionStore.md
│ │ │ ├── SelectionStore.tsx
│ │ │ └── SelectionStoreNative.tsx
│ │ ├── Slider
│ │ │ ├── Slider.md
│ │ │ ├── Slider.module.scss
│ │ │ ├── Slider.spec.ts
│ │ │ ├── Slider.tsx
│ │ │ └── SliderNative.tsx
│ │ ├── Slot
│ │ │ ├── Slot.md
│ │ │ ├── Slot.spec.ts
│ │ │ └── Slot.ts
│ │ ├── SlotItem.tsx
│ │ ├── SpaceFiller
│ │ │ ├── SpaceFiller.md
│ │ │ ├── SpaceFiller.module.scss
│ │ │ ├── SpaceFiller.spec.ts
│ │ │ ├── SpaceFiller.tsx
│ │ │ └── SpaceFillerNative.tsx
│ │ ├── Spinner
│ │ │ ├── Spinner.md
│ │ │ ├── Spinner.module.scss
│ │ │ ├── Spinner.spec.ts
│ │ │ ├── Spinner.tsx
│ │ │ └── SpinnerNative.tsx
│ │ ├── Splitter
│ │ │ ├── HSplitter.md
│ │ │ ├── HSplitter.spec.ts
│ │ │ ├── Splitter.md
│ │ │ ├── Splitter.module.scss
│ │ │ ├── Splitter.spec.ts
│ │ │ ├── Splitter.tsx
│ │ │ ├── SplitterNative.tsx
│ │ │ ├── utils.ts
│ │ │ ├── VSplitter.md
│ │ │ └── VSplitter.spec.ts
│ │ ├── Stack
│ │ │ ├── CHStack.md
│ │ │ ├── CHStack.spec.ts
│ │ │ ├── CVStack.md
│ │ │ ├── CVStack.spec.ts
│ │ │ ├── HStack.md
│ │ │ ├── HStack.spec.ts
│ │ │ ├── Stack.md
│ │ │ ├── Stack.module.scss
│ │ │ ├── Stack.spec.ts
│ │ │ ├── Stack.tsx
│ │ │ ├── StackNative.tsx
│ │ │ ├── VStack.md
│ │ │ └── VStack.spec.ts
│ │ ├── StickyBox
│ │ │ ├── StickyBox.md
│ │ │ ├── StickyBox.module.scss
│ │ │ ├── StickyBox.tsx
│ │ │ └── StickyBoxNative.tsx
│ │ ├── Switch
│ │ │ ├── Switch.md
│ │ │ ├── Switch.spec.ts
│ │ │ └── Switch.tsx
│ │ ├── Table
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── react-table-config.d.ts
│ │ │ ├── Table.md
│ │ │ ├── Table.module.scss
│ │ │ ├── Table.spec.ts
│ │ │ ├── Table.tsx
│ │ │ ├── TableNative.tsx
│ │ │ └── useRowSelection.tsx
│ │ ├── TableOfContents
│ │ │ ├── TableOfContents.module.scss
│ │ │ ├── TableOfContents.spec.ts
│ │ │ ├── TableOfContents.tsx
│ │ │ └── TableOfContentsNative.tsx
│ │ ├── Tabs
│ │ │ ├── TabContext.tsx
│ │ │ ├── TabItem.md
│ │ │ ├── TabItem.tsx
│ │ │ ├── TabItemNative.tsx
│ │ │ ├── Tabs.md
│ │ │ ├── Tabs.module.scss
│ │ │ ├── Tabs.spec.ts
│ │ │ ├── Tabs.tsx
│ │ │ └── TabsNative.tsx
│ │ ├── Text
│ │ │ ├── Text.md
│ │ │ ├── Text.module.scss
│ │ │ ├── Text.spec.ts
│ │ │ ├── Text.tsx
│ │ │ └── TextNative.tsx
│ │ ├── TextArea
│ │ │ ├── TextArea.md
│ │ │ ├── TextArea.module.scss
│ │ │ ├── TextArea.spec.ts
│ │ │ ├── TextArea.tsx
│ │ │ ├── TextAreaNative.tsx
│ │ │ ├── TextAreaResizable.tsx
│ │ │ └── useComposedRef.ts
│ │ ├── TextBox
│ │ │ ├── TextBox.md
│ │ │ ├── TextBox.module.scss
│ │ │ ├── TextBox.spec.ts
│ │ │ ├── TextBox.tsx
│ │ │ └── TextBoxNative.tsx
│ │ ├── Theme
│ │ │ ├── NotificationToast.tsx
│ │ │ ├── Theme.md
│ │ │ ├── Theme.module.scss
│ │ │ ├── Theme.spec.ts
│ │ │ ├── Theme.tsx
│ │ │ └── ThemeNative.tsx
│ │ ├── TimeInput
│ │ │ ├── TimeInput.md
│ │ │ ├── TimeInput.module.scss
│ │ │ ├── TimeInput.spec.ts
│ │ │ ├── TimeInput.tsx
│ │ │ ├── TimeInputNative.tsx
│ │ │ └── utils.ts
│ │ ├── Timer
│ │ │ ├── Timer.md
│ │ │ ├── Timer.spec.ts
│ │ │ ├── Timer.tsx
│ │ │ └── TimerNative.tsx
│ │ ├── Toggle
│ │ │ ├── Toggle.module.scss
│ │ │ └── Toggle.tsx
│ │ ├── ToneChangerButton
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneChangerButton.spec.ts
│ │ │ └── ToneChangerButton.tsx
│ │ ├── ToneSwitch
│ │ │ ├── ToneSwitch.md
│ │ │ ├── ToneSwitch.module.scss
│ │ │ ├── ToneSwitch.spec.ts
│ │ │ ├── ToneSwitch.tsx
│ │ │ └── ToneSwitchNative.tsx
│ │ ├── Tooltip
│ │ │ ├── Tooltip.md
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.spec.ts
│ │ │ ├── Tooltip.tsx
│ │ │ └── TooltipNative.tsx
│ │ ├── Tree
│ │ │ ├── testData.ts
│ │ │ ├── Tree-dynamic.spec.ts
│ │ │ ├── Tree-icons.spec.ts
│ │ │ ├── Tree.md
│ │ │ ├── Tree.spec.ts
│ │ │ ├── TreeComponent.module.scss
│ │ │ ├── TreeComponent.tsx
│ │ │ └── TreeNative.tsx
│ │ ├── TreeDisplay
│ │ │ ├── TreeDisplay.md
│ │ │ ├── TreeDisplay.module.scss
│ │ │ ├── TreeDisplay.tsx
│ │ │ └── TreeDisplayNative.tsx
│ │ ├── ValidationSummary
│ │ │ ├── ValidationSummary.module.scss
│ │ │ └── ValidationSummary.tsx
│ │ └── VisuallyHidden.tsx
│ ├── components-core
│ │ ├── abstractions
│ │ │ ├── ComponentRenderer.ts
│ │ │ ├── LoaderRenderer.ts
│ │ │ ├── standalone.ts
│ │ │ └── treeAbstractions.ts
│ │ ├── action
│ │ │ ├── actions.ts
│ │ │ ├── APICall.tsx
│ │ │ ├── FileDownloadAction.tsx
│ │ │ ├── FileUploadAction.tsx
│ │ │ ├── NavigateAction.tsx
│ │ │ └── TimedAction.tsx
│ │ ├── ApiBoundComponent.tsx
│ │ ├── appContext
│ │ │ ├── date-functions.ts
│ │ │ ├── math-function.ts
│ │ │ └── misc-utils.ts
│ │ ├── AppContext.tsx
│ │ ├── behaviors
│ │ │ ├── Behavior.tsx
│ │ │ └── CoreBehaviors.tsx
│ │ ├── component-hooks.ts
│ │ ├── ComponentDecorator.tsx
│ │ ├── ComponentViewer.tsx
│ │ ├── CompoundComponent.tsx
│ │ ├── constants.ts
│ │ ├── DebugViewProvider.tsx
│ │ ├── descriptorHelper.ts
│ │ ├── devtools
│ │ │ ├── InspectorDialog.module.scss
│ │ │ ├── InspectorDialog.tsx
│ │ │ └── InspectorDialogVisibilityContext.tsx
│ │ ├── EngineError.ts
│ │ ├── event-handlers.ts
│ │ ├── InspectorButton.module.scss
│ │ ├── InspectorContext.tsx
│ │ ├── interception
│ │ │ ├── abstractions.ts
│ │ │ ├── ApiInterceptor.ts
│ │ │ ├── ApiInterceptorProvider.tsx
│ │ │ ├── apiInterceptorWorker.ts
│ │ │ ├── Backend.ts
│ │ │ ├── Errors.ts
│ │ │ ├── IndexedDb.ts
│ │ │ ├── initMock.ts
│ │ │ ├── InMemoryDb.ts
│ │ │ ├── ReadonlyCollection.ts
│ │ │ └── useApiInterceptorContext.tsx
│ │ ├── loader
│ │ │ ├── ApiLoader.tsx
│ │ │ ├── DataLoader.tsx
│ │ │ ├── ExternalDataLoader.tsx
│ │ │ ├── Loader.tsx
│ │ │ ├── MockLoaderRenderer.tsx
│ │ │ └── PageableLoader.tsx
│ │ ├── LoaderComponent.tsx
│ │ ├── markup-check.ts
│ │ ├── parts.ts
│ │ ├── renderers.ts
│ │ ├── rendering
│ │ │ ├── AppContent.tsx
│ │ │ ├── AppRoot.tsx
│ │ │ ├── AppWrapper.tsx
│ │ │ ├── buildProxy.ts
│ │ │ ├── collectFnVarDeps.ts
│ │ │ ├── ComponentAdapter.tsx
│ │ │ ├── ComponentWrapper.tsx
│ │ │ ├── Container.tsx
│ │ │ ├── containers.ts
│ │ │ ├── ContainerWrapper.tsx
│ │ │ ├── ErrorBoundary.module.scss
│ │ │ ├── ErrorBoundary.tsx
│ │ │ ├── InvalidComponent.module.scss
│ │ │ ├── InvalidComponent.tsx
│ │ │ ├── nodeUtils.ts
│ │ │ ├── reducer.ts
│ │ │ ├── renderChild.tsx
│ │ │ ├── StandaloneComponent.tsx
│ │ │ ├── StateContainer.tsx
│ │ │ ├── UnknownComponent.module.scss
│ │ │ ├── UnknownComponent.tsx
│ │ │ └── valueExtractor.ts
│ │ ├── reportEngineError.ts
│ │ ├── RestApiProxy.ts
│ │ ├── script-runner
│ │ │ ├── asyncProxy.ts
│ │ │ ├── AttributeValueParser.ts
│ │ │ ├── bannedFunctions.ts
│ │ │ ├── BindingTreeEvaluationContext.ts
│ │ │ ├── eval-tree-async.ts
│ │ │ ├── eval-tree-common.ts
│ │ │ ├── eval-tree-sync.ts
│ │ │ ├── ParameterParser.ts
│ │ │ ├── process-statement-async.ts
│ │ │ ├── process-statement-common.ts
│ │ │ ├── process-statement-sync.ts
│ │ │ ├── ScriptingSourceTree.ts
│ │ │ ├── simplify-expression.ts
│ │ │ ├── statement-queue.ts
│ │ │ └── visitors.ts
│ │ ├── StandaloneApp.tsx
│ │ ├── StandaloneExtensionManager.ts
│ │ ├── TableOfContentsContext.tsx
│ │ ├── theming
│ │ │ ├── _themes.scss
│ │ │ ├── component-layout-resolver.ts
│ │ │ ├── extendThemeUtils.ts
│ │ │ ├── hvar.ts
│ │ │ ├── layout-resolver.ts
│ │ │ ├── parse-layout-props.ts
│ │ │ ├── StyleContext.tsx
│ │ │ ├── StyleRegistry.ts
│ │ │ ├── ThemeContext.tsx
│ │ │ ├── ThemeProvider.tsx
│ │ │ ├── themes
│ │ │ │ ├── base-utils.ts
│ │ │ │ ├── palette.ts
│ │ │ │ ├── root.ts
│ │ │ │ ├── solid.ts
│ │ │ │ ├── theme-colors.ts
│ │ │ │ └── xmlui.ts
│ │ │ ├── themeVars.module.scss
│ │ │ ├── themeVars.ts
│ │ │ ├── transformThemeVars.ts
│ │ │ └── utils.ts
│ │ ├── utils
│ │ │ ├── actionUtils.ts
│ │ │ ├── audio-utils.ts
│ │ │ ├── base64-utils.ts
│ │ │ ├── compound-utils.ts
│ │ │ ├── css-utils.ts
│ │ │ ├── DataLoaderQueryKeyGenerator.ts
│ │ │ ├── date-utils.ts
│ │ │ ├── extractParam.ts
│ │ │ ├── hooks.tsx
│ │ │ ├── LruCache.ts
│ │ │ ├── mergeProps.ts
│ │ │ ├── misc.ts
│ │ │ ├── request-params.ts
│ │ │ ├── statementUtils.ts
│ │ │ └── treeUtils.ts
│ │ └── xmlui-parser.ts
│ ├── index-standalone.ts
│ ├── index.scss
│ ├── index.ts
│ ├── language-server
│ │ ├── server-common.ts
│ │ ├── server-web-worker.ts
│ │ ├── server.ts
│ │ ├── services
│ │ │ ├── common
│ │ │ │ ├── docs-generation.ts
│ │ │ │ ├── lsp-utils.ts
│ │ │ │ ├── metadata-utils.ts
│ │ │ │ └── syntax-node-utilities.ts
│ │ │ ├── completion.ts
│ │ │ ├── diagnostic.ts
│ │ │ ├── format.ts
│ │ │ └── hover.ts
│ │ └── xmlui-metadata-generated.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.bin.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/docs/public/pages/context-variables.md:
--------------------------------------------------------------------------------
```markdown
# Context variables
These are the key context variables available in XMLUI components.
| Variable | Scope/Context | What it Represents |
| ------------------- | ------------------- | --------------------------------------------- |
| `myComponentId` | General | Reference to the component instance |
| `var.myVar` | General | A scoped variable |
| `$item` | Iterators | The current item in a list/array |
| `$itemIndex` | Iterators | The current index in a list/array |
| `$group` | List | Groups defined by `groupBy` |
| `$param` | Event handlers | The event's payload (e.g., form data) |
| `$data` | Forms | Consolidated data from FormItems |
| `$validationResult` | Forms | Result of latest validation |
| `$setValue` | FormItem | Function to set the value |
| `$value` | FormItem | The current value |
| `$pathname` | Page | Gets the path part of the route |
| `$routeParams` | Page | Capture values from route placeholders |
| `$queryParams` | Page | Capture values from route's search parameters |
| `$linkInfo` | Page | NavLink context including previous and next |
## General
### `myComponentId`
- **Scope:** Any component with an `id` attribute.
- **What it is:** Reference to the component instance, allowing access to its properties and methods.
- **Example:**
```xmlui
<TextBox id="myTextBox" />
<Button onClick="myTextBox.setValue('Hello!')" label="Set Value" />
<Text value="{myTextBox.value}" />
```
### `var.myVar`
- **Scope:** Declared in markup with `var.` prefix; available in the declaring component and its children.
- **What it is:** A scoped variable.
- **Example:**
```xmlui
<App var.count="{0}">
<Button onClick="count++" label="Increment" />
<Text>Count: {count}</Text>
</App>
```
## Iterators
### `$item`
- **Scope:** Available inside components that iterate over lists, such as `<Table>`, `<Items>`, or inside a FormItem of type "items".
- **What it is:** The current item in the iteration (e.g., a row in a table, an option in a select, or a line item in an invoice).
- **Usage:**
- Access properties of the current item: `$item.name`, `$item.price`
- **Example:**
```xmlui
<Table data="{clients}">
<Column bindTo="Name">
<Text>{$item.Name}</Text>
</Column>
</Table>
```
### `$itemIndex`
- **Scope:** Inside iterators (e.g., `<Items>`, `<Table>`, or FormItem of type "items").
- **What it is:** The current index in the array.
- **Example:**
```xmlui
<Items data="{products}">
<Text>Index: {$itemIndex}, Name: {$item.name}</Text>
</Items>
```
## Event handlers
### `$param`
- **Scope:** Available in event handlers, especially in `<event name="submit">` or API calls.
- **What it is:** The data passed to the event or API call, often the form data at the time of submission.
## List
### `groupBy`
- **Scope:** Available in the `groupHeaderTemplate` of a `List`
- **What it is:** An object that contains items grouped by `$group.key`
## Forms
### `$data`
- **Scope:** Available inside a `<Form>` and its children.
- **What it is:** The current state of the form's data object (all fields/values).
- **Usage:**
- Read or display the entire form's data: `{JSON.stringify($data)}`
- **Example:**
```xmlui
<Text value="{JSON.stringify($data)}" />
```
### `$validationResult`
- **Scope:** Inside a `FormItem`.
- **What it is:** The result of the latest validation for the field.
- **Example:**
```xmlui
<FormItem bindTo="email">
<Text value="{JSON.stringify($validationResult)}" />
</FormItem>
```
### `$setValue`
- **Scope:** Inside a `FormItem`.
- **What it is:** A function to set the value of the field.
- **Example:**
```xmlui
<Button onClick="$setValue('new value')" label="Set Value" />
```
### `$value`
- **Scope:** Inside a `FormItem`.
- **What it is:** The current value of the field.
- **Example:**
```xmlui
<FormItem bindTo="name">
<Text value="{$value}" />
</FormItem>
```
## Pages
### `$routeParams`
```xmlui
<App layout="vertical">
<NavPanel>
<NavLink to="/">Home</NavLink>
<NavLink to="/account/Cameron">Cameron</NavLink>
<NavLink to="/account/Joe">Joe</NavLink>
<NavLink to="/account/Kathy">Kathy</NavLink>
</NavPanel>
<Pages>
<Page url="/">
Home
</Page>
<Page url="/account/:id">
Account: {$routeParams.id}
</Page>
</Pages>
</App>
```
### `$linkInfo`
```xmlui
<HStack verticalAlignment="center" gap="$space-2">
<Link when="{$linkInfo.prevLink}" to="{$linkInfo.prevLink.to}">
<Icon name="chevronleft"/>
<Text variant="subtitle">
{$linkInfo.prevLink.label}
</Text>
</Link>
<SpaceFiller/>
<Link when="{$linkInfo.nextLink}" to="{$linkInfo.nextLink.to}">
<Text variant="subtitle">
{$linkInfo.nextLink.label}
</Text>
<Icon name="chevronright"/>
</Link>
</HStack>
```
### `$pathname`
Use `$pathname` to conditionally show content based on the current route path.
```xmlui
<App layout="horizontal-sticky">
<AppHeader>
<property name="logoTemplate">
<Text>My App</Text>
</property>
<property name="profileMenuTemplate">
<!-- Settings icon only shows on pages that have settings -->
<Icon name="cog" size="md" onClick="settingsDialog.open()"
when="{['/dashboard', '/profile', '/settings'].includes($pathname)}" />
</property>
</AppHeader>
</App>
```
```
--------------------------------------------------------------------------------
/docs/content/components/Avatar.md:
--------------------------------------------------------------------------------
```markdown
# Avatar [#avatar]
`Avatar` displays a user or entity's profile picture as a circular image, with automatic fallback to initials when no image is provided. It's commonly used in headers, user lists, comments, and anywhere you need to represent a person or organization.
**Key features:**
- **Automatic fallback**: Shows initials when no image URL is provided or image fails to load
- **Multiple sizes**: From `xs` (extra small) to `lg` (large) to fit different contexts
- **Clickable**: Supports click events for profile actions, modals, or navigation
- **Accessible**: Automatically generates appropriate alt text from the name
## Properties [#properties]
### `name` [#name]
This property sets the name value the Avatar uses to display initials. If neither this property nor `url` is defined, an empty avatar is displayed.
```xmlui-pg copy display name="Example: name"
<App>
<Avatar name="John, Doe" />
</App>
```
### `size` (default: "sm") [#size-default-sm]
This property defines the display size of the Avatar.
Available values:
| Value | Description |
| --- | --- |
| `xs` | Extra small |
| `sm` | Small **(default)** |
| `md` | Medium |
| `lg` | Large |
| `xl` | Extra large |
```xmlui-pg copy display name="Example: size"
<App>
<HStack>
<Avatar name="Dorothy Ellen Fuller" />
<Avatar name="Xavier Schiller" size="xs" />
<Avatar name="Sebastien Moore" size="sm" />
<Avatar name="Molly Dough" size="md" />
<Avatar name="Lynn Gilbert" size="lg" />
</HStack>
</App>
```
### `url` [#url]
This property specifies the URL of the image to display in the Avatar. If neither this property nor `name` is defined, an empty avatar is displayed.
```xmlui-pg copy display name="Example: url"
<App>
<Avatar url="https://i.pravatar.cc/100" size="md" />
</App>
```
## Events [#events]
### `click` [#click]
This event is triggered when the avatar is clicked.
```xmlui-pg copy display name="Example: click"
<App>
<HStack verticalAlignment="center">
<Avatar name="Molly Dough" size="md" onClick="toast('Avatar clicked')" />
Click the avatar!
</HStack>
</App>
```
## Exposed Methods [#exposed-methods]
This component does not expose any methods.
## Styling [#styling]
### Theme Variables [#theme-variables]
| Variable | Default Value (Light) | Default Value (Dark) |
| --- | --- | --- |
| [backgroundColor](../styles-and-themes/common-units/#color)-Avatar | $color-surface-100 | $color-surface-100 |
| [border](../styles-and-themes/common-units/#border)-Avatar | 0px solid $color-surface-400A80 | 0px solid $color-surface-400A80 |
| [borderBottom](../styles-and-themes/common-units/#border)-Avatar | *none* | *none* |
| [borderBottomColor](../styles-and-themes/common-units/#color)-Avatar | *none* | *none* |
| [borderBottomStyle](../styles-and-themes/common-units/#border-style)-Avatar | *none* | *none* |
| [borderBottomWidth](../styles-and-themes/common-units/#size)-Avatar | *none* | *none* |
| [borderColor](../styles-and-themes/common-units/#color)-Avatar | *none* | *none* |
| [borderEndEndRadius](../styles-and-themes/common-units/#border-rounding)-Avatar | *none* | *none* |
| [borderEndStartRadius](../styles-and-themes/common-units/#border-rounding)-Avatar | *none* | *none* |
| [borderHorizontal](../styles-and-themes/common-units/#border)-Avatar | *none* | *none* |
| [borderHorizontalColor](../styles-and-themes/common-units/#color)-Avatar | *none* | *none* |
| [borderHorizontalStyle](../styles-and-themes/common-units/#border-style)-Avatar | *none* | *none* |
| [borderHorizontalWidth](../styles-and-themes/common-units/#size)-Avatar | *none* | *none* |
| [borderLeft](../styles-and-themes/common-units/#border)-Avatar | *none* | *none* |
| [color](../styles-and-themes/common-units/#color)-Avatar | *none* | *none* |
| [borderLeftStyle](../styles-and-themes/common-units/#border-style)-Avatar | *none* | *none* |
| [borderLeftWidth](../styles-and-themes/common-units/#size)-Avatar | *none* | *none* |
| [borderRadius](../styles-and-themes/common-units/#border-rounding)-Avatar | 4px | 4px |
| [borderRight](../styles-and-themes/common-units/#border)-Avatar | *none* | *none* |
| [color](../styles-and-themes/common-units/#color)-Avatar | *none* | *none* |
| [borderRightStyle](../styles-and-themes/common-units/#border-style)-Avatar | *none* | *none* |
| [borderRightWidth](../styles-and-themes/common-units/#size)-Avatar | *none* | *none* |
| [borderStartEndRadius](../styles-and-themes/common-units/#border-rounding)-Avatar | *none* | *none* |
| [borderStartStartRadius](../styles-and-themes/common-units/#border-rounding)-Avatar | *none* | *none* |
| [borderStyle](../styles-and-themes/common-units/#border-style)-Avatar | *none* | *none* |
| [borderTop](../styles-and-themes/common-units/#border)-Avatar | *none* | *none* |
| [borderTopColor](../styles-and-themes/common-units/#color)-Avatar | *none* | *none* |
| [borderTopStyle](../styles-and-themes/common-units/#border-style)-Avatar | *none* | *none* |
| [borderTopWidth](../styles-and-themes/common-units/#size)-Avatar | *none* | *none* |
| [borderHorizontal](../styles-and-themes/common-units/#border)-Avatar | *none* | *none* |
| [borderVerticalColor](../styles-and-themes/common-units/#color)-Avatar | *none* | *none* |
| [borderVerticalStyle](../styles-and-themes/common-units/#border-style)-Avatar | *none* | *none* |
| [borderVerticalWidth](../styles-and-themes/common-units/#size)-Avatar | *none* | *none* |
| [borderWidth](../styles-and-themes/common-units/#size)-Avatar | *none* | *none* |
| [boxShadow](../styles-and-themes/common-units/#boxShadow)-Avatar | inset 0 0 0 1px rgba(4,32,69,0.1) | inset 0 0 0 1px rgba(4,32,69,0.1) |
| [fontWeight](../styles-and-themes/common-units/#fontWeight)-Avatar | $fontWeight-bold | $fontWeight-bold |
| [textColor](../styles-and-themes/common-units/#color)-Avatar | $textColor-secondary | $textColor-secondary |
```
--------------------------------------------------------------------------------
/docs/content/components/Splitter.md:
--------------------------------------------------------------------------------
```markdown
# Splitter [#splitter]
`Splitter` component divides a container into two resizable sections. These are are identified by their names: primary and secondary. They have a draggable bar between them.
Most properties of the component focus on the primary section (e.g. sizing).
See also: [HSplitter](/components/HSplitter), [VSplitter](/components/VSplitter).
## Properties [#properties]
### `floating` (default: false) [#floating-default-false]
Toggles whether the resizer is visible (`false`) or not (`true`) when not hovered or dragged. The default value is `false`, meaning the resizer is visible all the time.
```xmlui-pg copy display name="Example: floating"
<App>
<Splitter height="200px" floating="true">
<Stack backgroundColor="lightblue" height="100%" />
<Stack backgroundColor="darksalmon" height="100%" />
</Splitter>
</App>
```
### `initialPrimarySize` (default: "50%") [#initialprimarysize-default-50-]
This optional number property sets the initial size of the primary section. The unit of the size value is in pixels or percentages.
```xmlui-pg copy display name="Example: initialPrimarySize"
<App>
<Splitter height="200px" initialPrimarySize="40%">
<Stack backgroundColor="lightblue" height="100%" />
<Stack backgroundColor="darksalmon" height="100%" />
</Splitter>
</App>
```
### `maxPrimarySize` (default: "100%") [#maxprimarysize-default-100-]
This property sets the maximum size the primary section can have. The unit of the size value is in pixels or percentages. Negative values are supported and calculate from the end of the container (e.g., "-20%" means "80% of container", "-100px" means "container size - 100px").
```xmlui-pg copy display name="Example: maxPrimarySize"
<App>
<Splitter height="200px" maxPrimarySize="80%">
<Stack backgroundColor="lightblue" height="100%" />
<Stack backgroundColor="darksalmon" height="100%" />
</Splitter>
</App>
```
```xmlui-pg copy display name="Example: maxPrimarySize with negative value (from end)"
<App>
<Splitter height="200px" maxPrimarySize="-50px">
<Stack backgroundColor="lightblue" height="100%" />
<Stack backgroundColor="darksalmon" height="100%" />
</Splitter>
</App>
```
### `minPrimarySize` (default: "0%") [#minprimarysize-default-0-]
This property sets the minimum size the primary section can have. The unit of the size value is in pixels or percentages.
```xmlui-pg copy display name="Example: minPrimarySize"
<App>
<Splitter height="200px" minPrimarySize="40px">
<Stack backgroundColor="lightblue" height="100%" />
<Stack backgroundColor="darksalmon" height="100%" />
</Splitter>
</App>
```
### `orientation` (default: "vertical") [#orientation-default-vertical]
Sets whether the `Splitter` divides the container horizontally and lays out the section on top of each other (`vertical`), or vertically by placing the sections next to each other (`horizontal`).
Available values: `horizontal`, `vertical` **(default)**
```xmlui-pg copy display name="Example: orientation"
<App>
<Splitter height="200px" orientation="horizontal">
<Stack backgroundColor="lightblue" height="100%" />
<Stack backgroundColor="darksalmon" height="100%" />
</Splitter>
</App>
```
### `splitterTemplate` [#splittertemplate]
The divider can be customized using XMLUI components via this property.
```xmlui-pg copy {2-4} display name="Example: splitterTemplate"
<App>
<Splitter height="200px">
<property name="splitterTemplate">
<ContentSeparator backgroundColor="green" height="4px" />
</property>
<Stack backgroundColor="lightblue" height="100%" />
<Stack backgroundColor="darksalmon" height="100%" />
</Splitter>
</App>
```
### `swapped` (default: false) [#swapped-default-false]
This optional booelan property indicates whether the `Splitter` sections are layed out as primary and secondary (`false`) or secondary and primary (`true`) from left to right.
```xmlui-pg copy display name="Example: swapped"
<App>
<Splitter height="200px" swapped="true">
<Stack backgroundColor="lightblue" height="100%" />
<Stack backgroundColor="darksalmon" height="100%" />
</Splitter>
</App>
```
## Events [#events]
### `resize` [#resize]
This event fires when the component is resized.
```xmlui-pg copy {2} display name="Example: resize"
<App height="200px" var.counter="{0}">
<Splitter onResize="counter++">
<Stack backgroundColor="lightblue" height="100%">
<Text value="Resize event called {counter} number of times" />
</Stack>
<Stack backgroundColor="darksalmon" height="100%" />
</Splitter>
</App>
```
## Exposed Methods [#exposed-methods]
This component does not expose any methods.
## Styling [#styling]
### Theme Variables [#theme-variables]
| Variable | Default Value (Light) | Default Value (Dark) |
| --- | --- | --- |
| [backgroundColor](../styles-and-themes/common-units/#color)-resizer-Splitter | $color-surface-100 | $color-surface-100 |
| [backgroundColor](../styles-and-themes/common-units/#color)-Splitter | *none* | *none* |
| [border](../styles-and-themes/common-units/#border)-Splitter | *none* | *none* |
| [borderColor](../styles-and-themes/common-units/#color)-Splitter | *none* | *none* |
| [borderRadius](../styles-and-themes/common-units/#border-rounding)-Splitter | *none* | *none* |
| [borderStyle](../styles-and-themes/common-units/#border-style)-Splitter | *none* | *none* |
| [borderWidth](../styles-and-themes/common-units/#size)-Splitter | *none* | *none* |
| [boxShadow](../styles-and-themes/common-units/#boxShadow)-Splitter | *none* | *none* |
| [cursor](../styles-and-themes/common-units/#cursor)-resizer-horizontal-Splitter | ew-resize | ew-resize |
| [cursor](../styles-and-themes/common-units/#cursor)-resizer-vertical-Splitter | ns-resize | ns-resize |
| [thickness](../styles-and-themes/common-units/#size)-resizer-Splitter | 5px | 5px |
```
--------------------------------------------------------------------------------
/xmlui/dev-docs/next/documentation-scripts-refactoring-plan.md:
--------------------------------------------------------------------------------
```markdown
# XMLUI Documentation Generation Scripts - Refactoring Plan
## Overview
This document outlines additional refactoring opportunities identified in the XMLUI documentation generation scripts beyond the basic constant extraction that has already been completed.
## High-Priority Refactoring Opportunities
### 1. Error Handling Standardization
**Current Issues:**
- Inconsistent error handling patterns across scripts
- Mix of `console.log()` + `process.exit()` vs proper logger usage
- Some scripts lack proper error handling entirely
**Files Affected:**
- `create-theme-files.mjs` - Uses console.log + process.exit
- Various forEach loops with potential for silent failures
**Recommended Solution:**
- Create standardized error handling utilities
- Replace all console.log error messages with logger
- Implement proper error recovery where possible
### 2. Logging Consistency
**Current Issues:**
- `create-theme-files.mjs` uses console.log instead of the logger
- Inconsistent log levels and formatting
**Files Affected:**
- `create-theme-files.mjs`
**Recommended Solution:**
- Update all scripts to use the centralized logger
- Standardize log messages and levels
### 3. Duplicate Pattern Extraction ✅ **COMPLETED**
**Status:** ✅ **COMPLETED** - See [duplicate-pattern-extraction-summary.md](./duplicate-pattern-extraction-summary.md)
**Original Issues:**
- Multiple forEach loops with similar Object.entries patterns
- Repeated theme variable processing logic
- Similar file writing patterns
**Files Affected:**
- `create-theme-files.mjs` - Repeated theme variable processing
- `MetadataProcessor.mjs` - Similar forEach patterns for props/apis/events
**Solution Implemented:**
- ✅ Created `pattern-utilities.mjs` with comprehensive reusable utilities
- ✅ Extracted common iteration utilities (`iterateObjectEntries`, `iterateArray`)
- ✅ Created specialized theme processing utilities (`processComponentThemeVars`, `extractThemeVars`)
- ✅ Standardized file writing operations (`writeFileWithLogging`, `generateExportStatements`)
- ✅ Created component processing utilities (`processComponentSection`, `processDuplicatesWithLogging`)
- ✅ Updated all affected scripts to use shared utilities
- ✅ Achieved 60% reduction in duplicate code patterns
- ✅ Validated all scripts work correctly with pattern utilities
### 4. Configuration Management ✅ **COMPLETED**
**Status:** ✅ **COMPLETED** - See [configuration-management-enhancement-summary.md](./configuration-management-enhancement-summary.md)
**Original Issues:**
- Hard-coded paths and magic values still exist in some places
- Configuration loading patterns could be standardized
**Files Affected:**
- `input-handler.mjs` - Basic config loader could be enhanced
- Various scripts with path construction
**Solution Implemented:**
- ✅ Created `configuration-management.mjs` with comprehensive configuration system
- ✅ Added `ConfigurationManager` class with schema validation and search paths
- ✅ Implemented `PathResolver` class for intelligent path resolution
- ✅ Created `ConfigValidator` class for schema-based validation
- ✅ Defined configuration schemas for components, extensions, and generator
- ✅ Updated all scripts to use enhanced configuration management
- ✅ Added environment variable override support
- ✅ Maintained full backward compatibility with existing configuration files
- ✅ Achieved comprehensive error handling and validation
### 5. Function Decomposition
**Current Issues:**
- Some functions are too long and do multiple things
- Complex nested logic in theme file generation
**Files Affected:**
- `create-theme-files.mjs` - Main logic could be broken down
- `MetadataProcessor.mjs` - Some methods are quite long
**Recommended Solution:**
- Break down large functions into smaller, focused functions
- Improve separation of concerns
## Medium-Priority Opportunities
### 6. Async/Await Consistency
- Some scripts mix Promise patterns
- Could standardize on async/await throughout
### 7. Input Validation
- Add parameter validation to utility functions
- Validate configuration file contents more thoroughly
### 8. Type Safety (if TypeScript adoption is considered)
- Consider migrating to TypeScript for better type safety
- Add JSDoc types as an interim solution
## Low-Priority Opportunities
### 9. Performance Optimizations
- Parallel processing where appropriate
- Caching for repeated operations
### 10. Testing Infrastructure
- Add unit tests for utility functions
- Integration tests for the full pipeline
## Implementation Priority
1. **Immediate (High Impact, Low Risk):**
- ✅ **COMPLETED:** Logging consistency fixes
- ✅ **COMPLETED:** Basic error handling improvements
2. **Short Term (High Impact, Medium Risk):**
- ✅ **COMPLETED:** Duplicate pattern extraction
- Function decomposition
3. **Medium Term (Medium Impact, Medium Risk):**
- ✅ **COMPLETED:** Configuration management enhancements
- Input validation improvements
4. **Long Term (High Impact, High Risk):**
- Type safety improvements
- Testing infrastructure
## Completed Refactoring Summary
### ✅ **Phase 1 Complete: Core Infrastructure**
- **Error Handling Standardization** - `error-handling.mjs` created and integrated
- **Logging Consistency** - `logging-standards.mjs` with scoped loggers implemented
- **Magic String Extraction** - `constants.mjs` centralized configuration
- **Duplicate Pattern Extraction** - `pattern-utilities.mjs` with reusable utilities
- **Configuration Management Enhancement** - `configuration-management.mjs` with schema validation and path resolution
### 🔄 **Phase 2 In Progress: Advanced Improvements**
- Function decomposition (next priority)
- Input validation improvements
## Success Metrics
- Reduced code duplication
- Consistent error handling across all scripts
- Improved maintainability and readability
- No regression in functionality
- Better logging and debugging capabilities
```
--------------------------------------------------------------------------------
/xmlui/src/components/Toggle/Toggle.tsx:
--------------------------------------------------------------------------------
```typescript
import { type ReactNode } from "react";
import { useMemo } from "react";
import React, {
type CSSProperties,
type ForwardedRef,
forwardRef,
useCallback,
useEffect,
} from "react";
import classnames from "classnames";
import styles from "./Toggle.module.scss";
import type { RegisterComponentApiFn, UpdateStateFn } from "../../abstractions/RendererDefs";
import { noop } from "../../components-core/constants";
import { useEvent } from "../../components-core/utils/misc";
import type { ValidationStatus } from "../abstractions";
import { PART_INPUT } from "../../components-core/parts";
import { composeRefs } from "@radix-ui/react-compose-refs";
type ToggleProps = {
id?: string;
initialValue?: boolean;
value?: boolean;
enabled?: boolean;
style?: CSSProperties;
readOnly?: boolean;
validationStatus?: ValidationStatus;
updateState?: UpdateStateFn;
onClick?: (event: React.MouseEvent) => void;
onDidChange?: (newValue: boolean) => void;
onFocus?: () => void;
onBlur?: () => void;
variant?: "checkbox" | "switch";
indeterminate?: boolean;
className?: string;
required?: boolean;
autoFocus?: boolean;
registerComponentApi?: RegisterComponentApiFn;
inputRenderer?: (contextVars: any, input?: ReactNode) => ReactNode;
forceHover?: boolean;
};
export const defaultProps: Pick<
ToggleProps,
"initialValue" | "value" | "enabled" | "validationStatus" | "indeterminate"
> = {
initialValue: false,
value: false,
enabled: true,
validationStatus: "none",
indeterminate: false,
};
export const Toggle = forwardRef(function Toggle(
{
id,
initialValue = defaultProps.initialValue,
value = defaultProps.value,
enabled = defaultProps.enabled,
style,
readOnly,
validationStatus = defaultProps.validationStatus,
updateState = noop,
onClick = noop,
onDidChange = noop,
onFocus = noop,
onBlur = noop,
variant = "checkbox",
indeterminate = defaultProps.indeterminate,
className,
required,
autoFocus,
registerComponentApi,
inputRenderer,
forceHover = false,
...rest
}: ToggleProps,
forwardedRef: ForwardedRef<HTMLInputElement>,
) {
const innerRef = React.useRef<HTMLInputElement | null>(null);
const ref = innerRef ? composeRefs(forwardedRef, innerRef) : forwardedRef;
const transformToLegitValue = (inp: any): boolean => {
if (typeof inp === "undefined" || inp === null) {
return false;
}
if (typeof inp === "boolean") {
return inp;
}
if (typeof inp === "number") {
return !isNaN(inp) && !!inp;
}
if (typeof inp === "string") {
return inp.trim() !== "" && inp.toLowerCase() !== "false";
}
if (Array.isArray(inp)) {
return inp.length > 0;
}
if (typeof inp === "object") {
return Object.keys(inp).length > 0;
}
return false;
};
useEffect(() => {
updateState({ value: transformToLegitValue(initialValue) }, { initial: true });
}, [initialValue, updateState]);
const updateValue = useCallback(
(value: boolean) => {
if (innerRef.current?.checked === value) return;
updateState({ value });
onDidChange(value);
},
[onDidChange, updateState],
);
const onInputChange = useCallback(
(event: React.ChangeEvent<HTMLInputElement>) => {
if (readOnly) {
return;
}
updateState({ value: event.target.checked });
onDidChange(event.target.checked);
},
[onDidChange, readOnly, updateState],
);
const handleOnFocus = useCallback(() => {
onFocus?.();
}, [onFocus]);
const handleOnBlur = useCallback(() => {
onBlur?.();
}, [onBlur]);
useEffect(() => {
if (typeof indeterminate === "boolean" && innerRef.current) {
innerRef.current.indeterminate = indeterminate;
}
}, [indeterminate]);
const focus = useCallback(() => {
innerRef.current?.focus();
}, []);
useEffect(() => {
if (innerRef.current && autoFocus) {
setTimeout(() => focus(), 0);
}
}, [focus, autoFocus]);
const setValue = useEvent((newValue) => {
updateValue(transformToLegitValue(newValue));
});
useEffect(() => {
registerComponentApi?.({
focus,
setValue,
});
}, [focus, registerComponentApi, setValue]);
const input = useMemo(() => {
const legitValue = transformToLegitValue(value);
return (
<input
{...rest}
id={id}
data-part-id={PART_INPUT}
ref={ref}
type="checkbox"
role={variant}
checked={legitValue}
disabled={!enabled}
required={required}
readOnly={readOnly}
aria-readonly={readOnly}
aria-checked={indeterminate ? "mixed" : legitValue}
aria-required={required}
aria-disabled={!enabled}
onClick={onClick}
onChange={onInputChange}
onFocus={handleOnFocus}
onBlur={handleOnBlur}
autoFocus={autoFocus}
style={style}
className={classnames(className, styles.resetAppearance, {
[styles.checkbox]: variant === "checkbox",
[styles.switch]: variant === "switch",
[styles.error]: validationStatus === "error",
[styles.warning]: validationStatus === "warning",
[styles.valid]: validationStatus === "valid",
[styles.forceHover]: forceHover,
})}
/>
);
}, [
rest,
className,
ref,
style,
id,
enabled,
handleOnBlur,
handleOnFocus,
onInputChange,
onClick,
readOnly,
required,
validationStatus,
value,
variant,
indeterminate,
autoFocus,
forceHover,
]);
return (
inputRenderer ? (
<label className={styles.label}>
<div className={styles.inputContainer}>{input}</div>
{inputRenderer({
$checked: transformToLegitValue(value),
$setChecked: setValue,
})}
</label>
) : (
input
)
);
});
```
--------------------------------------------------------------------------------
/xmlui/src/components/DateInput/DateInput.md:
--------------------------------------------------------------------------------
```markdown
%-DESC-START
**Key features:**
- **Date format support**: Multiple date formats including MM/dd/yyyy, yyyy-MM-dd, and dd/MM/yyyy
- **Direct input**: Keyboard-only date entry with input fields for day, month, and year
- **Input validation**: Real-time validation with visual feedback for invalid dates
- **Range support**: Single date selection (default) or date range selection
- **Accessibility**: Full keyboard navigation and screen reader support
%-DESC-END
%-API-START setValue
```xmlui-pg copy {3, 9, 12} display name="Example: setValue"
<App>
<HStack>
<Button
label="Set Date to 05/25/2024"
onClick="picker.setValue('05/25/2024')" />
<Button
label="Clear Date"
onClick="picker.setValue('')" />
</HStack>
<DateInput id="picker" />
</App>
```
%-API-END
%-PROP-START initialValue
```xmlui-pg copy display name="Example: initialValue" height="120px"
<App>
<DateInput initialValue="05/25/2024" />
</App>
```
%-PROP-END
%-PROP-START enabled
```xmlui-pg copy display name="Example: enabled" height="120px"
<App>
<DateInput enabled="false" initialValue="05/25/2024" />
</App>
```
%-PROP-END
%-PROP-START validationStatus
| Value | Description |
| :-------- | :---------------------------------------------------- |
| `valid` | Visual indicator for an input that is accepted |
| `warning` | Visual indicator for an input that produced a warning |
| `error` | Visual indicator for an input that produced an error |
```xmlui-pg copy display name="Example: validationStatus"
<App>
<DateInput validationStatus="valid" initialValue="05/25/2024" />
<DateInput validationStatus="warning" initialValue="05/25/2024" />
<DateInput validationStatus="error" initialValue="05/25/2024" />
</App>
```
%-PROP-END
%-PROP-START dateFormat
The `dateFormat` prop controls how dates are displayed and entered. Different formats change the order and separators of day, month, and year fields.
> [!NOTE] Regardless of the dateFormat, the year input field always accepts and displays 4-digit years. When entering a 2-digit year, it will be automatically normalized to a 4-digit year.
| Format | Description | Example |
| :----- | :---------- | :------ |
| `MM/dd/yyyy` | US format with slashes | 05/25/2024 |
| `MM-dd-yyyy` | US format with dashes | 05-25-2024 |
| `yyyy/MM/dd` | ISO-like format with slashes | 2024/05/25 |
| `yyyy-MM-dd` | ISO format with dashes | 2024-05-25 |
| `dd/MM/yyyy` | European format with slashes | 25/05/2024 |
| `dd-MM-yyyy` | European format with dashes | 25-05-2024 |
| `yyyyMMdd` | Compact format without separators | 20240525 |
| `MMddyyyy` | US compact format | 05252024 |
```xmlui-pg copy display name="Example: dateFormat"
<App>
<DateInput dateFormat="MM/dd/yyyy" initialValue="05/25/2024" />
<DateInput dateFormat="yyyy-MM-dd" initialValue="2024-05-25" />
<DateInput dateFormat="dd/MM/yyyy" initialValue="25/05/2024" />
<DateInput dateFormat="yyyyMMdd" initialValue="20240525" />
</App>
```
%-PROP-END
%-PROP-START clearable
When enabled, it displays a clear button that allows users to reset the date input back to its initial value. Enter a date in this app and then click the clear button:
```xmlui-pg copy display name="Example: clearable" /clearable/
<App>
<DateInput initialValue="05/25/2024" />
<DateInput clearable="true" initialValue="05/25/2024" />
</App>
```
%-PROP-END
%-PROP-START clearIcon
```xmlui-pg copy display name="Example: clearIcon" /clearIcon/
<App>
<DateInput initialValue="05/25/2024" clearable="true" clearIcon="trash" />
</App>
```
%-PROP-END
%-PROP-START clearToInitialValue
When `true`, the clear button resets the input to its initial value. When `false`, it clears the input completely.
```xmlui-pg copy display name="Example: clearToInitialValue"
<App>
<DateInput clearable="true" clearToInitialValue="true" initialValue="05/25/2024" />
<DateInput clearable="true" clearToInitialValue="false" initialValue="05/25/2024" />
</App>
```
%-PROP-END
%-PROP-START mode
Available values:
| Value | Description |
| --- | --- |
| `single` | Single date selection **(default)** |
| `range` | Date range selection |
%-PROP-END
%-PROP-START required
Marks the date input as required for form validation.
```xmlui-pg copy display name="Example: required" height="120px"
<App>
<DateInput required="true" />
</App>
```
%-PROP-END
%-PROP-START readOnly
Makes the date input read-only. Users can see the value but cannot modify it.
```xmlui-pg copy display name="Example: readOnly" height="120px"
<App>
<DateInput readOnly="true" initialValue="05/25/2024" />
</App>
```
%-PROP-END
%-PROP-START emptyCharacter
Character to use as placeholder for empty date values. If longer than 1 character, uses the first character. Defaults to '-'.
```xmlui-pg copy display name="Example: emptyCharacter"
<App>
<DateInput emptyCharacter="." />
<DateInput emptyCharacter="*" />
<DateInput emptyCharacter="abc" />
</App>
```
%-PROP-END
%-EVENT-START didChange
Fired when the date value changes. Receives the new date value as a parameter.
> [!INFO] The date value changes when the edited input part (day, month, year) loses focus and contains a valid value.
```xmlui-pg copy {2} display name="Example: didChange" height="180px"
<App var.selectedDate="No date selected">
<Text value="{selectedDate}" />
<DateInput
dateFormat="yyyy-MM-dd"
initialValue="2024-05-25"
onDidChange="(date) => selectedDate = date" />
</App>
```
%-EVENT-END
%-EVENT-START gotFocus
Fired when the date input receives focus.
```xmlui-pg copy {4-5} display name="Example: gotFocus/lostFocus"
<App var.isFocused="{false}">
<Text value="{isFocused
? 'DateInput focused' : 'DateInput lost focus'}"
/>
<DateInput
dateFormat="MM/dd/yyyy"
onGotFocus="isFocused = true"
onLostFocus="isFocused = false"
initialValue="05/25/2024"
/>
</App>
```
%-EVENT-END
```
--------------------------------------------------------------------------------
/blog/public/blog/xmlui-playground.md:
--------------------------------------------------------------------------------
```markdown
The XMLUI [docs](https://docs.xmlui.org) are full of live working examples that use [Playground](https://github.com/xmlui-org/xmlui/tree/main/packages/xmlui-playground), an extension package that runs XMLUI code inside an XMLUI app. We use playgrounds to bring component documentation to life. Why just tell you about the `enabled` property of a [Checkbox](https://docs.xmlui.org/components/Checkbox) when we can also show you, as in this live example.
<blockquote>
enabled (default: true)
This boolean property value indicates whether the component responds to user events (true) or not (false).
```xmlui-pg {4-6} {9-10} name="Click the checkboxes"
<App>
Enabled checkboxes:
<HStack>
<Checkbox initialValue="true" enabled="true" />
<Checkbox initialValue="false" enabled="true" />
</HStack>
Disabled checkboxes:
<HStack>
<Checkbox initialValue="true" enabled="false" />
<Checkbox initilaValue="false" enabled="false" />
</HStack>
</App>
```
</blockquote>
This widget doesn't just display the live app, it also enables you to modify it by clicking the  icon. Try it now! You'll land in [a hosted playground](https://playground.xmlui.org/#/playground/#H4sIAAAAAAAAE61W204bMRD9ldWUx2zJhRBYpZXCTVQCVBUKlQoPk%2FUkseK1LduBBZR%2Fr%2BzdJtmw4SLxlsycmTmeOfbsM1iHkqFQkiB5BtQaEugPtP5%2BK6PoWOJQEIvSCaXTocrJJt7cP710mE4DJIr6h6U34pI7juIaxYy%2B3YIzM7qFiIokS8P2W4EjFPaVyP72Sv0jbj%2BV4%2F%2FaG0gK3EyyGrrCsr9dNBQakKpMK0nSWUj%2B3vn%2FcsTHvvVuQhl56zNIzAgS%2BHN%2B9vtHdCDUOLryTmgAZ5DAUKhx7EoL5Y4k83GQZ2LG4a5RpLpGY33eIabTsVEzyQ6VUAYS2Er9j9jOzAhTipuBlrdowzM0j5DAl05nt3d4uPCUWO9pUbvX2YHGeuI4VdKRdPEgaKimSIb5DWduUiJanXZT56v2aoa9ncI9VPnlBJl6iCXe%2F0RJogRIL9qXPC5K1EsS3WYNfC1pXYhGxrgcX5NxPEVRqWB1gAWehpH5xccTVxxnBdaqHvTI4AP5UXSaxRkd5W7B%2FozL6QoTSpVkaB7j3eZyVFwynqJbBsQxpo7f%2BxE5g9JqNCTda%2FiJug8c3gnXhqwl9iKgpv3V%2FGsdbTXrplBTpjZupKS7Id%2FjmoMPlWB1zdzIZT%2FkrMEvUm5Vbkbc3RQQCrwV58lf8ieKT1teE193u4ay6qGCp1e0qNATMj6z8anLxJV%2FaIJogmaEDwgvx4LOkUpnGUnnOVl%2FWbsHuzu9boVyBbPszJfWQbvTHtSMxpJGE7TwIj21qUsI8wYwNNOa1%2Bb1R6FWCh9QzCdf86Lh8QVZR6x8o3QeWSU4i9YC2rWcwpQmhDXy7TY3T8G3cu94vzfYe9ekTvZPBicHH5tUZ2%2Bn1z2G%2BbwBhqyamdTvmuf5%2FM6blHZcybAuRjwnVqybJCy0BtgH1NpfyfK%2FNnTP6eFcsSVGGU7SoU8DCUyU4U9KOhTQgOJOlCmry6t0hY%2BPUs9hJXrJQBK%2BRubzfwm13uekCAAA) where you can edit the XMLUI code and see changes instantly.
Playgrounds work with the [Markdown](https://docs.xmlui.org/components/Markdown) component which is the renderer for this page. Here's the XMLUI source for the checkboxes example.
We show it here as an image because if we were to include the text it would just render as above!
It starts as conventional Markdown codefence bounded by triple backtics. You can use the language identifier `xmlui` for XMLUI syntax highlighting, or (as here) use `xmlui-pg` to introduce a live playground. The bracketed numbers specify line ranges to highlight.
## Playgrounds on steroids
Many of these small playgrounds are woven into the component docs. You'll also find more ambitious playgrounds in the How To section of the docs where we illustrate important app patterns, like <a target="_blank" href="https://docs.xmlui.org/howto/use-the-same-modaldialog-to-add-or-edit">How to use the same ModalDialog to add or edit</a>.
If you [view the XMLUI source](https://github.com/xmlui-org/xmlui/blob/main/docs/public/pages/howto/use-the-same-modaldialog-to-add-or-edit.md) for that example, you'll see that the codefence defines an `App` and two user-defined components, `Test` and `ProductModal`. It also defines an API with operations `get-products`, `get-product`, `insert-product`, `update-product`, and `delete-product`.
This is a concise way to express the rich set of behaviors seen in this video.
## Share a working reproduction of a bug
Open source developers who respond to bug reports always hope for, but rarely get, reliable ways to reproduce the bad behavior they are seeing. Now those reports can contain XMLUI codefences that exhibit the behavior.
If you want to make such a report, you can visit [xmlui-codefence-runner.netlify.app](https://xmlui-codefence-runner.netlify.app/), paste in your codefence, open it into a playground, and share its URL. That's the gold standard for this kind of thing, and it's implemented for that site with a dozen lines of XMLUI dropped onto Netlify.
If you find yourself [filing an issue](https://github.com/xmlui-org/xmlui/issues) that needs a solid reproduction, please give it a try.
## Help your AI assistants stay grounded
When you use the [XMLUI MCP server](https://github.com/xmlui-org/xmlui-mcp) with coding assistants like Claude or Copilot, they will prefer How To examples when available.
That's the gold standard response: a link to a known working pattern that proves its existence by running live. And because XMLUI is concise, the pattern doesn't occupy too much space in an AI's context window.
When you ask a question for which an assistant cannot provide such a link, we tell it to admit that and refuse to invent undocumented syntax. They won't always comply but with a running playground that embodies ground truth you can often steer them away from rabbit holes. The more working patterns contributed to the project, the stronger that effect will be.
## Reproducible XMLUI
The common theme here is reproducibility. Whether it lives in a component doc, a How To, or a GitHub issue, an XMLUI codefence captures a piece of XMLUI behavior that you can replay consistently. That's useful for the XMLUI project itself but also for apps you build with XMLUI. Playgrounds that we can reliably reproduce and exchange make everything easier to build, document, debug, and maintain.
```
--------------------------------------------------------------------------------
/docs/public/pages/markup.md:
--------------------------------------------------------------------------------
```markdown
# XML Markup
When you write XML markup to create an XMLUI app, you use XML tags to name components. And you use XML attributes to set properties that govern their behavior.
## Properties
An attribute may be a literal string that sets the value of a property.
```xmlui-pg name="A literal property" copy display
<Text value="This is rendered as text." />
```
## Expressions
An attribute may also be a JavaScript expression — enclosed in curly braces `{ }` — that dynamically sets the value of a property.
```xmlui-pg copy name="A dynamic property" display
<Text value="Life, the universe, and everything: { 6 * 7 }" />
```
An expression can hold a JSON list.
```xmlui-pg copy name="A JSON list" display /['Bakerloo', 'Central', 'Circle']/
<Items data="{ ['Bakerloo', 'Central', 'Circle'] }" >
<Text>{ $item }</Text>
</Items>
```
Or a complex JSON object, in which case you'll write an outer set of curly braces to introduce the expression and an inner set to define an object like this form's `data` property.
```xmlui-pg copy name="A complex JSON object" display /{ station: "Brixton", wifi: true, toilets: false }/
<App>
<Form id="searchForm" padding="0.5rem"
data='{ { station: "Brixton", wifi: true, toilets: false } }'
onSubmit="() => { preview.setValue(JSON.stringify($data)) }"
>
<Text>Search for station amenities</Text>
<HStack verticalAlignment="center" >
<FormItem bindTo="station" />
<FormItem
type="checkbox"
label="wifi"
bindTo="wifi"
labelPosition="start"
/>
<FormItem
type="checkbox"
label="toilets"
bindTo="toilets"
labelPosition="start"
/>
</HStack>
<property name="buttonRowTemplate">
<Button type="submit" icon="search" label="Search"/>
</property>
</Form>
<TextArea id="preview" />
</App>
```
> [!INFO]
> In addition to a literal string or an expression, you will sometimes use the special tag `<property>` to set a value using markup, like the `ButtonRowTemplate` that defines this form's button.
## Variables
A component may declare a variable that's visible to itself and its children. Variable names start with a letter or an underscore (`_`) and continue with these characters or digits.
You can declare a variable using the `var` prefix.
```xmlui-pg copy name="Declaring a variable with var" display
<App var.stations="{ [ 'Bakerloo', 'Central', 'Circle'] }">
<Items data="{stations}">
<Text> {$item} </Text>
</Items>
</App>
```
Or using the `<variable>` helper tag.
```xmlui-pg copy name="Declaring a variable with <variable>" display
<App>
<variable
name="stations"
value="{ [ 'Bakerloo', 'Central', 'Circle'] }" />
<Items data="{stations}">
<Text>{$item}</Text>
</Items>
</App>
```
### Nested variables
The same variable name can be declared in nested scopes. The engine resolves the name to the variable in the closest (innermost) scope.
```xmlui-pg copy name="Defining and using nested variables" display
<App var.title="var.title is 'Hello, from App!'">
<H1>{title}</H1>
<VStack var.title="var.title is 'Hello, from VStack'!">
<Text>{title}</Text>
</VStack>
</App>
```
### Multiple instances
<Text>Each counter is a separate instance of `CounterTest` with its own local component variables.</Text>
```xmlui-pg name="Isolated component instances"
---app display
<App>
<HStack horizontalAlignment="center">
<VStack>
<Text variant="caption">Counter Instance 1</Text>
<CounterTest instance="1" />
</VStack>
<Stack width="10rem"/>
<VStack>
<Text variant="caption">Counter Instance 2</Text>
<CounterTest instance="2" />
</VStack>
</HStack>
</App>
---comp display
<Component name="CounterTest" var.count="{0}">
<Text>Counter ID: {$props.instance}</Text>
<Text>Count: {count}</Text>
<Button onClick="count = count + 1">
Increment {$props.id}
</Button>
</Component>
```
### Reactive variables
In [Reactive data binding](/reactive-intro) we saw how a `Select` can cause a `Table` to refresh by setting the `url` property of the `DataSource` on which the `Table` depends. Here's a more basic example of how components interact with reactive variables.
```xmlui-pg copy name="Defining and using reactive variables" display
<App var.count="{0}" var.countTimes3="{3 * count}" >
<Button
label="Click to increment the count"
onClick="count++" />
<Text>Click count = {count} (changes directly)</Text>
<Text>Click count * 3 = {countTimes3} (changes indirectly)</Text>
</App>
```
The `Button`'s click handler increments `count` directly. But because `countTimes3` is define using an expression that refers to `count`, the engine reevalautes that expression each time `count` changes and updates `countTimes3` indirectly.
We've seen two ways to declare variables: a `var` declaration in an XML attribute, or the `variable` tag. A similar pattern applies to event handlers. The `Button` to increment the count declares its handler in an attribute whose name combines the `on` prefix with the name [click](/components/Button#click). You may also use the `<event>` helper tag with no prefix for the event name.
```xmlui-pg copy name="Declare an event handler using the <event> tag" display
<App var.count="{0}" >
<Button label="Click me! Click count = {count}">
<event name="click">
{ count++ }
</event>
</Button>
</App>
```
> [!INFO]
> Why use the `<event>` tag? In this example there's no reason to prefer it. But as we saw above, you declare a `Form`'s `buttonRowTemplate` property in XMLUI markup using the `<property>` helper tag. The same pattern applies when a button's handler is an XMLUI component like `<APICall>`.
> ```xmlui copy
> <Button label="Click to increment the count on the server">
> <event name="click">
> <APICall url="/count/increment" />
> </event>
> <Text>Click count = {count}</Text>
> </Button>
> ```
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/theming/StyleContext.tsx:
--------------------------------------------------------------------------------
```typescript
import type { CSSProperties } from "react";
import type React from "react";
import { createContext, useContext, useEffect, useInsertionEffect, useMemo, useState } from "react";
import type { StyleObjectType } from "./StyleRegistry";
import { StyleRegistry } from "./StyleRegistry";
import { EMPTY_OBJECT } from "../constants";
import { useIndexerContext } from "../../components/App/IndexerContext";
// The context is typed to hold either a StyleRegistry instance or null.
const StyleContext = createContext<StyleRegistry | null>(null);
type StyleProviderProps = {
children: React.ReactNode;
styleRegistry?: StyleRegistry;
forceNew?: boolean; // Optional prop to force a new registry
};
/**
* A "smart" provider that creates a StyleRegistry only if one doesn't
* already exist in the context.
*/
export function StyleProvider({
children,
styleRegistry = new StyleRegistry(),
forceNew = false, // Optional prop to force a new registry
}: StyleProviderProps) {
// Check if a provider already exists above this one in the tree.
const parentRegistry = useContext(StyleContext);
// If we are the top-most provider, create a new registry for this tree.
// On the client, this runs once. On the server, it runs once per request
// IF this provider is at the root of the tree being rendered.
// Use useState to create the registry instance.
const [registry] = useState(() => {
const newRegistry = styleRegistry;
// This logic only runs on the CLIENT, once, when the registry is created.
if (typeof window !== "undefined") {
// 1. Find the style tag injected by the server.
const ssrTag = document.querySelector('style[data-style-registry="true"]');
// 2. Read the hashes from our custom data attribute.
const ssrHashes = ssrTag?.getAttribute("data-ssr-hashes");
if (ssrHashes) {
// 3. Pre-populate the 'injected' set with all the server-rendered hashes.
let hashes = ssrHashes.split(",");
newRegistry.ssrHashes = new Set(hashes);
newRegistry.injected = new Set(hashes);
}
}
return newRegistry;
});
// If we're already inside a provider, don't do anything. Just render the children.
// This makes nesting StyleProviders safe and harmless.
if (parentRegistry && !forceNew) {
return <>{children}</>;
}
return <StyleContext.Provider value={registry}>{children}</StyleContext.Provider>;
}
export function useStyleRegistry(): StyleRegistry {
const registry = useContext(StyleContext);
if (registry === null) {
throw new Error("Component must be used within a StyleProvider");
}
return registry;
}
export function useComponentStyle(styles?: Record<string, CSSProperties[keyof CSSProperties]>) {
const rootStyle = useMemo(() => {
return (!styles || Object.keys(styles).length === 0)
? EMPTY_OBJECT
: {
"&": styles,
// "@container style(--screenSize: 1) or @container style(--screenSize: 2) ... etc": responsiveSizes,
};
}, [styles]);
return useStyles(rootStyle);
}
export const StyleInjectionTargetContext = createContext<Document | ShadowRoot | null>(null);
export function useDomRoot(){
const domRoot = useContext(StyleInjectionTargetContext);
return domRoot;
}
type InjectOptions = {
prepend?: boolean;
}
export function useStyles(styles: StyleObjectType, {prepend}: InjectOptions = EMPTY_OBJECT ): string {
// we skip this whole thing if we're indexing
const {indexing} = useIndexerContext();
const domRoot = useDomRoot();
const injectionTarget = typeof document === "undefined" ? null : domRoot instanceof ShadowRoot ? domRoot : document.head
const registry = useStyleRegistry();
const { className, styleHash } = useMemo(() => {
if(indexing || !styles || styles === EMPTY_OBJECT || Object.keys(styles).length === 0) {
return { className: undefined, styleHash: undefined };
}
return registry.register(styles);
}, [indexing, registry, styles]);
useInsertionEffect(() => {
if (!styleHash || registry.injected.has(styleHash)) {
return;
}
const { css } = registry.cache.get(styleHash) || {};
if (css) {
const styleElement = document.createElement("style");
styleElement.setAttribute("data-style-hash", styleHash);
styleElement.innerHTML = `@layer dynamic {\n${css}\n}`;
if(prepend){
injectionTarget.insertBefore(styleElement, injectionTarget.firstChild.nextSibling);
} else {
injectionTarget.appendChild(styleElement);
}
registry.injected.add(styleHash);
}
}, [registry, styleHash, injectionTarget]);
// HOOK 2: For lifecycle management (reference counting and CLEANUP).
useEffect(() => {
if(!styleHash){
return;
}
// On MOUNT, tell the registry that this component is using this style.
registry.incrementRef(styleHash);
// Return a cleanup function to run on UNMOUNT.
return () => {
registry.decrementRef(styleHash);
// Schedule the cleanup check to run asynchronously.
// This allows React's Strict Mode double-render to complete before
// we check if the style tag should be removed.
setTimeout(() => {
// Only proceed with cleanup if...
// 1. No other component is using this style (ref count is 0).
// 2. This style was NOT part of the initial server render.
if (registry.getRefCount(styleHash) === 0 && !registry.ssrHashes.has(styleHash)) {
// If it's still zero, it means no component re-mounted to claim this style.
// Now it's safe to perform the cleanup.
registry.injected.delete(styleHash);
injectionTarget.querySelector(`style[data-style-hash="${styleHash}"]`)?.remove();
}
}, 0); // A timeout of 0ms is sufficient to push this to the end of the event loop.
};
}, [injectionTarget, registry, styleHash]); // Dependency array ensures this runs once per style change.
return className;
}
```
--------------------------------------------------------------------------------
/xmlui/src/parsers/xmlui-parser/lint.ts:
--------------------------------------------------------------------------------
```typescript
import type {
ComponentDef,
CompoundComponentDef,
ComponentMetadata,
} from "../../abstractions/ComponentDefs";
import type { StandaloneAppDescription } from "../../components-core/abstractions/standalone";
import { layoutOptionKeys } from "../../components-core/descriptorHelper";
import { viewportSizeMd } from "../../components/abstractions";
import type {
ComponentMetadataProvider,
MetadataProvider,
} from "../../language-server/services/common/metadata-utils";
import { CORE_NAMESPACE_VALUE } from "./transform";
export enum LintSeverity {
Skip,
Warning,
Error,
}
export enum LintDiagKind {
UnrecognisedProp,
}
type Options = {
severity: LintSeverity;
};
type LintDiagnostic = {
message: string;
kind: LintDiagKind;
};
export function getLintSeverity(lintSeverityOption: string | undefined): LintSeverity {
if (!lintSeverityOption) {
return LintSeverity.Warning;
}
let lintSeverity = LintSeverity.Warning;
switch (lintSeverityOption.toLowerCase()) {
case "warning":
return LintSeverity.Warning;
break;
case "error":
return LintSeverity.Error;
break;
case "skip":
return LintSeverity.Skip;
break;
default:
console.warn(
`Invalid lint severity option '${lintSeverityOption}'. Must be one of: 'warning', 'error', 'skip'. Defaulting to 'warning'.`,
);
return LintSeverity.Warning;
break;
}
}
export type ComponentLints = {
lints: {
message: string;
kind: LintDiagKind;
}[];
componentName: string;
};
export function lintApp({
appDef,
metadataProvider,
}: {
appDef: StandaloneAppDescription;
metadataProvider: MetadataProvider;
}): ComponentLints[] {
const entryPointLints: ComponentLints = {
componentName: "Main",
lints: lint({
component: appDef.entryPoint,
metadataProvider,
}),
};
const compoundCompLints: ComponentLints[] = (appDef.components ?? []).map((c) => {
const lints = lint({
component: c,
metadataProvider,
});
return { lints, componentName: c.name };
});
return [entryPointLints, ...compoundCompLints].filter((diags) => diags.lints.length > 0);
}
export function printComponentLints(lintDiags: ComponentLints) {
console.group(`Validation on '${lintDiags.componentName}':`);
lintDiags.lints.forEach(({ message }) => {
console.warn(message);
});
console.groupEnd();
}
export function lintErrorsComponent(lints: ComponentLints[]) {
function makeComponent() {
const errList = lints.map((lint, idx) => {
return {
type: "VStack",
props: { gap: "0px" },
children: [
{
type: "VStack",
props: { backgroundColor: "lightgrey", padding: "10px" },
children: [
{
type: "H2",
props: {
value: `#${idx + 1}: In component '${lint.componentName}':`,
color: "$color-info",
},
},
{
type: "VStack",
children: lint.lints.map(({ message }, msgIdx) => {
return {
type: "Text",
props: { value: `${idx + 1}.${msgIdx + 1}: ${message}`, fontWeight: "bold" },
};
}),
},
],
},
],
};
});
const comp: ComponentDef = {
type: "VStack",
props: { padding: "$padding-normal", gap: 0 },
children: [
{
type: "H1",
props: {
value: `Errors found while checking Xmlui markup`,
padding: "$padding-normal",
backgroundColor: "$color-error",
color: "white",
},
},
{
type: "VStack",
props: {
gap: "$gap-tight",
padding: "$padding-normal",
},
children: errList,
},
],
};
return comp;
}
return makeComponent() as ComponentDef;
}
export function lint({
component,
metadataProvider,
}: {
component: CompoundComponentDef | ComponentDef;
metadataProvider: MetadataProvider;
}): LintDiagnostic[] {
if ("component" in component) {
return lintHelp(component.component, metadataProvider, []);
}
return lintHelp(component, metadataProvider, []);
}
function lintHelp(
component: ComponentDef,
metadataProvider: MetadataProvider,
acc: LintDiagnostic[],
) {
const componentName = component.type.startsWith(CORE_NAMESPACE_VALUE)
? component.type.slice(CORE_NAMESPACE_VALUE.length + 1)
: component.type;
const componentMdProvider = metadataProvider.getComponent(componentName);
if (componentMdProvider !== null && !componentMdProvider.allowArbitraryProps) {
lintAttrs(component, componentMdProvider, acc);
}
if (!component.children) {
return acc;
}
for (const child of component.children) {
lintHelp(child, metadataProvider, acc);
}
return acc;
}
const implicitPropNames = layoutOptionKeys;
function lintAttrs(
component: ComponentDef,
metadataForCurrentComponent: ComponentMetadataProvider,
diags: LintDiagnostic[],
) {
const invalidAttrNames = Object.keys(component.props ?? {}).filter(
(name) => !metadataForCurrentComponent.getAttr(name),
);
const invalidEvents = Object.keys(component.events ?? {}).filter(
(event) => !metadataForCurrentComponent.getEvent(event),
);
const invalidApis = Object.keys(component.api ?? {}).filter(
(api) => !metadataForCurrentComponent.getApi(api),
);
invalidAttrNames.push(...invalidEvents);
invalidAttrNames.push(...invalidApis);
for (const invalidAttrName of invalidAttrNames) {
diags.push(toUnrecognisedAttrDiag(component, invalidAttrName));
}
}
function toUnrecognisedAttrDiag(component: ComponentDef, attr: string): LintDiagnostic {
return {
message: `Unrecognised property '${attr}' on component '${component.type}'.`,
kind: LintDiagKind.UnrecognisedProp,
};
}
```
--------------------------------------------------------------------------------
/docs/content/components/Pagination.md:
--------------------------------------------------------------------------------
```markdown
# Pagination [#pagination]
`Pagination` enables navigation through large datasets by dividing content into pages. It provides controls for page navigation and can display current page information.
## Standalone [#standalone]
If the `itemCount` property is provided, the component shows information about the number of entries shown per page, the total number of entries, as well as the current page index:
```xmlui-pg copy display
<App>
<Pagination itemCount="100" pageSize="10" />
</App>
```
If not, the [`hasPrevPage`](#hasprevpage) and [`hasNextPage`](#hasnextpage) properties can be used to control the enabled/disabled state of the previous and next buttons, while only the previous and next buttons are displayed:
```xmlui-pg copy display
<App>
<Pagination hasPrevPage="true" hasNextPage="true" />
</App>
```
## Integrations [#integrations]
### Table [#table]
`Pagination` has first-class support in the Table component. `Pagination` is controlled via the [`isPaginated`](./Table#ispaginated-default-false), [`pageSize`](./Table#pagesize), [`pageSizeOptions`](./Table#pagesizeoptions) and [`paginationControlsLocation`](./Table#paginationcontrolslocation-default-bottom) properties.
```xmlui
<Table data="/api" isPaginated pageSize="5" pageSizeOptions="{[5, 10, 20]}">
<Column header="ID" bindTo="elem" width="80px">
<!-- ... -->
</Column>
<!-- ... -->
</Table>
```
See the [Table reference](./Table#ispaginated-default-false) for a working example.
### List [#list]
The `List` is a perfect example of a component that does not implement its own pagination. Thus, use the Pagination with a Datasource component and connect them to the List:
```xmlui
<DataSource id="ds" url="/api" queryParams="{{ from: before, to: after }}" />
<Pagination
itemCount="20"
pageSize="{pageSize}"
pageIndex="{currentPage}"
onPageDidChange="(page, size, total) => {
currentPage = page;
before = page * size;
after = before + size - 1;
}"
/>
<List data="{ds}" />
```
For a comprehensive example, see [How to paginate a List](../howto/paginate-a-list).
## Properties [#properties]
### `buttonRowPosition` (default: "center") [#buttonrowposition-default-center]
Determines where to place the pagination button row in the layout.
Available values: `start`, `center` **(default)**, `end`
### `enabled` (default: true) [#enabled-default-true]
This boolean property value indicates whether the component responds to user events (`true`) or not (`false`).
### `hasNextPage` [#hasnextpage]
Whether to disable the next page button. Only takes effect if itemCount is not provided.
### `hasPrevPage` [#hasprevpage]
Whether to disable the previous page button. Only takes effect if itemCount is not provided.
### `itemCount` [#itemcount]
Total number of items to paginate. If not provided, the component renders simplified pagination controls that are enabled/disabled using the `hasPrevPage` and `hasNextPage` props.
### `maxVisiblePages` (default: 1) [#maxvisiblepages-default-1]
Maximum number of page buttons to display. If the value is not among the allowed values, it will fall back to the default.
Available values: `1` **(default)**, `3`, `5`
### `orientation` [#orientation]
Layout orientation of the pagination component
Available values:
| Value | Description |
| --- | --- |
| `horizontal` | The component will fill the available space horizontally |
| `vertical` | The component will fill the available space vertically |
### `pageIndex` (default: 0) [#pageindex-default-0]
Current page index (0-based)
### `pageInfoPosition` [#pageinfoposition]
Determines where to place the page information in the layout.
### `pageSize` (default: 10) [#pagesize-default-10]
Number of items per page
### `pageSizeOptions` [#pagesizeoptions]
Array of page sizes the user can select from. If provided, shows a page size selector dropdown
### `pageSizeSelectorPosition` [#pagesizeselectorposition]
Determines where to place the page size selector in the layout.
### `showCurrentPage` (default: true) [#showcurrentpage-default-true]
Whether to show the current page indicator
### `showPageInfo` (default: true) [#showpageinfo-default-true]
Whether to show page information
### `showPageSizeSelector` (default: true) [#showpagesizeselector-default-true]
Whether to show the page size selector
## Events [#events]
### `pageDidChange` [#pagedidchange]
Fired when the current page changes
### `pageSizeDidChange` [#pagesizedidchange]
Fired when the page size changes
## Exposed Methods [#exposed-methods]
### `currentPage` [#currentpage]
Gets the current page number (1-based)
### `currentPageSize` [#currentpagesize]
Gets the current page size
### `moveFirst` [#movefirst]
Moves to the first page
**Signature**: `moveFirst(): void`
### `moveLast` [#movelast]
Moves to the last page
**Signature**: `moveLast(): void`
### `moveNext` [#movenext]
Moves to the next page
**Signature**: `moveNext(): void`
### `movePrev` [#moveprev]
Moves to the previous page
**Signature**: `movePrev(): void`
## Styling [#styling]
### Theme Variables [#theme-variables]
| Variable | Default Value (Light) | Default Value (Dark) |
| --- | --- | --- |
| [backgroundColor](../styles-and-themes/common-units/#color)-Pagination | transparent | transparent |
| [backgroundColor](../styles-and-themes/common-units/#color)-selector-Pagination | transparent | transparent |
| [borderColor](../styles-and-themes/common-units/#color)-Pagination | $color-gray-300 | $color-gray-300 |
| [borderRadius](../styles-and-themes/common-units/#border-rounding)-selector-Pagination | $borderRadius | $borderRadius |
| [gap](../styles-and-themes/common-units/#size)-buttonRow-Pagination | $space-2 | $space-2 |
| [padding](../styles-and-themes/common-units/#size)-Pagination | $space-4 | $space-4 |
| [textColor](../styles-and-themes/common-units/#color)-Pagination | $color-gray-600 | $color-gray-600 |
| [textColor](../styles-and-themes/common-units/#color)-selector-Pagination | $color-gray-600 | $color-gray-600 |
```
--------------------------------------------------------------------------------
/xmlui/tests/parsers/scripting/function-proxy.test.ts:
--------------------------------------------------------------------------------
```typescript
import { describe, expect, it } from "vitest";
import { createEvalContext, parseStatements } from "./test-helpers";
import {
ArrowExpressionStatement,
ExpressionStatement,
T_ARROW_EXPRESSION_STATEMENT,
} from "../../../src/components-core/script-runner/ScriptingSourceTree";
import { processStatementQueueAsync } from "../../../src/components-core/script-runner/process-statement-async";
describe("Function proxies", () => {
it("Array.prototype.filter #1", async () => {
// --- Arrange
const source =
"(params)=> { return items.filter((item) => { return item.parentId === params.pathParams.nodeId});}";
const evalContext = createEvalContext({
localContext: {
items: [
{
name: "item1",
parentId: "",
},
{
name: "item2",
parentId: "my-parent-id",
},
],
},
eventArgs: [{ pathParams: { nodeId: "" } }],
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks!.length).equal(1);
expect(thread.blocks![0].returnValue).eql([{ name: "item1", parentId: "" }]);
});
it("Array.prototype.forEach #1", async () => {
// --- Arrange
const source = `()=> {
const result = [];
items.forEach((item) => {
result.push(item * 2)
});
return result;
}`;
const evalContext = createEvalContext({
localContext: {
items: [2, 3],
},
eventArgs: [],
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks![0].returnValue).eql([4, 6]);
});
it("Array.prototype.map #1", async () => {
// --- Arrange
const source = `()=> {
return items.map((item) => {
return item *= 2;
});
}`;
const evalContext = createEvalContext({
localContext: {
items: [2, 3],
},
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks![0].returnValue).eql([4, 6]);
});
it("Array.prototype.every #1", async () => {
// --- Arrange
const source = `(params)=> {
return items.every((item) => { return item.parentId === params.pathParams.nodeId}
);
}`;
const evalContext = createEvalContext({
localContext: {
items: [
{
name: "item1",
parentId: "",
},
{
name: "item2",
parentId: "my-parent-id",
},
],
},
eventArgs: [{ pathParams: { nodeId: "" } }],
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks!.length).equal(1);
expect(thread.blocks![0].returnValue).eql(false);
});
it("Array.prototype.findIndex #1", async () => {
// --- Arrange
const source = `(params)=> {
return items.findIndex((item) => item > 5)
}`;
const evalContext = createEvalContext({
localContext: {
items: [2, 6, 1],
},
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks!.length).equal(1);
expect(thread.blocks![0].returnValue).eql(1);
});
it("Array.prototype.find #1", async () => {
// --- Arrange
const source = `(params)=> {
return items.find((item) => item > 4);
}`;
const evalContext = createEvalContext({
localContext: {
items: [1, 2, 3, 4, 5, 6],
},
eventArgs: [{ pathParams: { nodeId: "" } }],
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks!.length).equal(1);
expect(thread.blocks![0].returnValue).eql(5);
});
it("Array.prototype.flatMap #1", async () => {
// --- Arrange
const source = `(params)=> {
return items.flatMap((item) => item > 4 ? [4, 4] : 1);
}`;
const evalContext = createEvalContext({
localContext: {
items: [5, 3, 2],
},
eventArgs: [{ pathParams: { nodeId: "" } }],
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks!.length).equal(1);
expect(thread.blocks![0].returnValue).eql([4, 4, 1, 1]);
});
});
```
--------------------------------------------------------------------------------
/xmlui/tests/components-core/scripts-runner/function-proxy.test.ts:
--------------------------------------------------------------------------------
```typescript
import { describe, expect, it } from "vitest";
import { processStatementQueueAsync } from "../../../src/components-core/script-runner/process-statement-async";
import { createEvalContext, parseStatements } from "./test-helpers";
import {
ArrowExpressionStatement,
ExpressionStatement,
T_ARROW_EXPRESSION_STATEMENT,
} from "../../../src/components-core/script-runner/ScriptingSourceTree";
describe("Function proxies (exp)", () => {
it("Array.prototype.filter #1", async () => {
// --- Arrange
const source =
"(params)=> { return items.filter((item) => { return item.parentId === params.pathParams.nodeId});}";
const evalContext = createEvalContext({
localContext: {
items: [
{
name: "item1",
parentId: "",
},
{
name: "item2",
parentId: "my-parent-id",
},
],
},
eventArgs: [{ pathParams: { nodeId: "" } }],
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks!.length).equal(1);
expect(thread.blocks![0].returnValue).eql([{ name: "item1", parentId: "" }]);
});
it("Array.prototype.forEach #1", async () => {
// --- Arrange
const source = `()=> {
const result = [];
items.forEach((item) => {
result.push(item * 2)
});
return result;
}`;
const evalContext = createEvalContext({
localContext: {
items: [2, 3],
},
eventArgs: [],
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks![0].returnValue).eql([4, 6]);
});
it("Array.prototype.map #1", async () => {
// --- Arrange
const source = `()=> {
return items.map((item) => {
return item *= 2;
});
}`;
const evalContext = createEvalContext({
localContext: {
items: [2, 3],
},
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks![0].returnValue).eql([4, 6]);
});
it("Array.prototype.every #1", async () => {
// --- Arrange
const source = `(params)=> {
return items.every((item) => { return item.parentId === params.pathParams.nodeId}
);
}`;
const evalContext = createEvalContext({
localContext: {
items: [
{
name: "item1",
parentId: "",
},
{
name: "item2",
parentId: "my-parent-id",
},
],
},
eventArgs: [{ pathParams: { nodeId: "" } }],
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks!.length).equal(1);
expect(thread.blocks![0].returnValue).eql(false);
});
it("Array.prototype.findIndex #1", async () => {
// --- Arrange
const source = `(params)=> {
return items.findIndex((item) => item > 5)
}`;
const evalContext = createEvalContext({
localContext: {
items: [2, 6, 1],
},
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks!.length).equal(1);
expect(thread.blocks![0].returnValue).eql(1);
});
it("Array.prototype.find #1", async () => {
// --- Arrange
const source = `(params)=> {
return items.find((item) => item > 4);
}`;
const evalContext = createEvalContext({
localContext: {
items: [1, 2, 3, 4, 5, 6],
},
eventArgs: [{ pathParams: { nodeId: "" } }],
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks!.length).equal(1);
expect(thread.blocks![0].returnValue).eql(5);
});
it("Array.prototype.flatMap #1", async () => {
// --- Arrange
const source = `(params)=> {
return items.flatMap((item) => item > 4 ? [4, 4] : 1);
}`;
const evalContext = createEvalContext({
localContext: {
items: [5, 3, 2],
},
eventArgs: [{ pathParams: { nodeId: "" } }],
});
const statements = parseStatements(source);
const arrowStmt = {
type: T_ARROW_EXPRESSION_STATEMENT,
expr: (statements[0] as ExpressionStatement).expr,
} as ArrowExpressionStatement;
await processStatementQueueAsync([arrowStmt], evalContext);
// --- Assert
const thread = evalContext.mainThread!;
expect(thread.blocks!.length).equal(1);
expect(thread.blocks![0].returnValue).eql([4, 4, 1, 1]);
});
});
```
--------------------------------------------------------------------------------
/packages/xmlui-os-frames/src/WindowsAppFrame.tsx:
--------------------------------------------------------------------------------
```typescript
import styles from "./WindowsAppFrame.module.scss";
import type { ReactNode } from "react";
import { forwardRef } from "react";
export const ToolBar = (props) => {
return (
<div className={styles.toolbar}>
<div className={styles.topInfo}>
<div className={styles.uicon} style={{ margin: "0 10px 0 6px" }}>
<div style={{ width: 14 }}>
<svg viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M8.20647 19.6315C7.36494 19.6315 6.63359 19.4431 6.01263 19.0663C5.40551 18.6756 4.93628 18.1313 4.60513 17.4336C4.27397 16.7219 4.1084 15.8846 4.1084 14.9218V9.03995C4.1084 8.90041 4.15686 8.78179 4.2534 8.68412C4.34994 8.58643 4.46724 8.5376 4.60513 8.5376H6.42667C6.5784 8.5376 6.69571 8.58643 6.7784 8.68412C6.87494 8.78179 6.9234 8.90041 6.9234 9.03995V14.7962C6.9234 16.5266 7.67532 17.3917 9.17936 17.3917C9.89686 17.3917 10.4626 17.1615 10.8765 16.701C11.3044 16.2405 11.5182 15.6056 11.5182 14.7962V9.03995C11.5182 8.90041 11.5665 8.78179 11.663 8.68412C11.7596 8.58643 11.8769 8.5376 12.0149 8.5376H13.8363C13.9742 8.5376 14.0915 8.58643 14.188 8.68412C14.2847 8.78179 14.333 8.90041 14.333 9.03995V18.9198C14.333 19.0593 14.2847 19.1779 14.188 19.2756C14.0915 19.3733 13.9742 19.4221 13.8363 19.4221H12.1597C12.008 19.4221 11.8838 19.3733 11.7872 19.2756C11.7044 19.1779 11.663 19.0593 11.663 18.9198V18.0616C11.2905 18.55 10.8282 18.9337 10.2763 19.2128C9.72436 19.4919 9.03436 19.6315 8.20647 19.6315Z"
fill="#3367CC"
/>
<path
d="M17.564 19.4252C17.4259 19.4252 17.3086 19.3764 17.2121 19.2787C17.1155 19.181 17.0673 19.0624 17.0673 18.9229V9.04306C17.0673 8.90352 17.1155 8.7849 17.2121 8.68723C17.3086 8.58954 17.4259 8.54071 17.564 8.54071H19.2819C19.4336 8.54071 19.5509 8.58954 19.6336 8.68723C19.7303 8.7849 19.7786 8.90352 19.7786 9.04306V18.9229C19.7786 19.0624 19.7303 19.181 19.6336 19.2787C19.5509 19.3764 19.4336 19.4252 19.2819 19.4252H17.564ZM17.4811 6.74056C17.3294 6.74056 17.2051 6.69871 17.1086 6.61498C17.0257 6.51729 16.9844 6.39171 16.9844 6.23821V4.73112C16.9844 4.59157 17.0257 4.47296 17.1086 4.37529C17.2051 4.27759 17.3294 4.22876 17.4811 4.22876H19.3646C19.5163 4.22876 19.6405 4.27759 19.7371 4.37529C19.8338 4.47296 19.8821 4.59157 19.8821 4.73112V6.23821C19.8821 6.39171 19.8338 6.51729 19.7371 6.61498C19.6405 6.69871 19.5163 6.74056 19.3646 6.74056H17.4811Z"
fill="#3367CC"
/>
<path
fillRule="evenodd"
d="M23.4228 1.14092H1.11508V23.7013H23.4228V1.14092ZM0.730469 0.751953V24.0903H23.8074V0.751953H0.730469Z"
fill="#3367CC"
/>
</svg>
</div>
</div>
<div className={styles.appFullName}>XMLUI</div>
</div>
<div className={styles.actbtns}>
<div className={`${styles.uicon} ${styles.prtclk}`}>
<div style={{ width: 12, height: 12 }}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5120 5120">
<g id="l192sq9Ma1sM2oXLQ331nvD" fill="rgb(0,0,0)">
<g>
<path
id="pf2evWQPs"
d="M730 2643 c-108 -55 -108 -215 0 -270 l44 -23 1786 0 c1719 0 1787 1 1826 19 105 48 116 194 21 265 l-28 21 -1807 3 c-1705 2 -1809 1 -1842 -15z"
></path>
</g>
</g>
</svg>
</div>
</div>
<div className={`${styles.uicon} ${styles.prtclk}`}>
<div style={{ width: 12, height: 12 }}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5120 5120">
<g id="lld67zMMrGguqZbYTM5KDT" fill="rgb(0,0,0)">
<g>
<path
id="pJNFf1TAf"
d="M1162 4469 c-226 -29 -411 -177 -482 -385 -39 -113 -41 -192 -38 -1589 3 -1250 5 -1354 21 -1410 63 -217 212 -364 427 -422 61 -17 159 -18 1470 -18 1311 0 1409 1 1470 18 217 59 368 210 427 427 17 61 18 159 18 1470 0 1311 -1 1409 -18 1470 -58 215 -205 364 -422 427 -56 16 -158 18 -1435 19 -756 1 -1404 -2 -1438 -7z m2823 -320 c54 -15 149 -110 164 -164 15 -56 15 -2794 0 -2850 -15 -54 -110 -149 -164 -164 -56 -15 -2794 -15 -2850 0 -54 15 -149 110 -164 164 -15 56 -15 2794 0 2849 14 52 101 142 154 161 34 12 257 14 1430 15 982 0 1402 -3 1430 -11z"
></path>
</g>
</g>
</svg>
</div>
</div>
<div className={`${styles.uicon} ${styles.closeBtn} ${styles.prtclk}`}>
<div style={{ width: 14, height: 14 }}>
<svg
version="1.0"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
preserveAspectRatio="xMidYMid meet"
>
<g fill="#000000">
<path
d="M87.4 424.6 c-2.9 -2.9 -3.4 -4.1 -3.4 -8.2 l0 -4.9 77.7 -77.7 77.8 -77.8 -77.8 -77.8 -77.7 -77.7 0 -4.9 c0 -4.1 0.5 -5.3 3.4 -8.2 2.9 -2.9 4.1 -3.4 8.2 -3.4 l4.9 0 77.7 77.7 77.8 77.8 77.8 -77.8 77.7 -77.7 4.9 0 c4.1 0 5.3 0.5 8.2 3.4 2.9 2.9 3.4 4.1 3.4 8.2 l0 4.9 -77.7 77.7 -77.8 77.8 77.8 77.8 77.7 77.7 0 4.9 c0 4.1 -0.5 5.3 -3.4 8.2 -2.9 2.9 -4.1 3.4 -8.2 3.4 l-4.9 0 -77.7 -77.7 -77.8 -77.8 -77.8 77.8 -77.7 77.7 -4.9 0 c-4.1 0 -5.3 -0.5 -8.2 -3.4z" />
</g>
</svg>
</div>
</div>
</div>
</div>
);
};
export const WindowsAppFrame = forwardRef(({ children }: { children: ReactNode }, ref) => {
return (
<div className={styles.notepad} ref={ref as any}>
<ToolBar />
<div className={styles.windowScreen}>
<div className={styles.topBar}>
<div className={styles.topBarItem}>File</div>
<div className={styles.topBarItem}>Edit</div>
<div className={styles.topBarItem}>View</div>
</div>
<div className={styles.restWindow}>
<div className={styles.noteText}>{children}</div>
</div>
</div>
</div>
);
});
```