This is page 47 of 186. Use http://codebase.md/xmlui-org/xmlui/xmlui/mockApiDef.js?lines=true&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ ├── config.json
│ └── cyan-tools-design.md
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-blog-optimized.yml
│ ├── deploy-blog-swa.yml
│ ├── deploy-blog.yml
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs-swa.yml
│ ├── deploy-docs.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│ ├── launch.json
│ └── settings.json
├── blog
│ ├── .gitignore
│ ├── .gitkeep
│ ├── CHANGELOG.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── an-advanced-codefence.gif
│ │ │ │ ├── an-advanced-codefence.mp4
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.png
│ │ │ │ ├── codefence-runner.png
│ │ │ │ ├── integrated-blog-search.png
│ │ │ │ ├── lorem-ipsum.png
│ │ │ │ ├── playground-checkbox-source.png
│ │ │ │ ├── playground.png
│ │ │ │ ├── use-xmlui-mcp-to-find-a-howto.png
│ │ │ │ └── xmlui-demo-gallery.png
│ │ │ ├── introducing-xmlui.md
│ │ │ ├── lorem-ipsum.md
│ │ │ ├── newest-post.md
│ │ │ ├── older-post.md
│ │ │ ├── xmlui-playground.md
│ │ │ └── xmlui-powered-blog.md
│ │ ├── mockServiceWorker.js
│ │ ├── resources
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ └── for-download
│ │ │ │ └── xmlui
│ │ │ │ └── xmlui-standalone.umd.js
│ │ │ ├── github.svg
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ ├── rss.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ ├── staticwebapp.config.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ └── PageNotFound.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── blog-theme.ts
│ └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── ComponentRefLinks.txt
│ ├── content
│ │ ├── _meta.json
│ │ ├── components
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── APICall.md
│ │ │ ├── App.md
│ │ │ ├── AppHeader.md
│ │ │ ├── AppState.md
│ │ │ ├── AutoComplete.md
│ │ │ ├── Avatar.md
│ │ │ ├── Backdrop.md
│ │ │ ├── Badge.md
│ │ │ ├── BarChart.md
│ │ │ ├── Bookmark.md
│ │ │ ├── Breakout.md
│ │ │ ├── Button.md
│ │ │ ├── Card.md
│ │ │ ├── Carousel.md
│ │ │ ├── ChangeListener.md
│ │ │ ├── Checkbox.md
│ │ │ ├── CHStack.md
│ │ │ ├── ColorPicker.md
│ │ │ ├── Column.md
│ │ │ ├── ContentSeparator.md
│ │ │ ├── CVStack.md
│ │ │ ├── DataSource.md
│ │ │ ├── DateInput.md
│ │ │ ├── DatePicker.md
│ │ │ ├── DonutChart.md
│ │ │ ├── DropdownMenu.md
│ │ │ ├── EmojiSelector.md
│ │ │ ├── ExpandableItem.md
│ │ │ ├── FileInput.md
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FlowLayout.md
│ │ │ ├── Footer.md
│ │ │ ├── Form.md
│ │ │ ├── FormItem.md
│ │ │ ├── FormSection.md
│ │ │ ├── Fragment.md
│ │ │ ├── H1.md
│ │ │ ├── H2.md
│ │ │ ├── H3.md
│ │ │ ├── H4.md
│ │ │ ├── H5.md
│ │ │ ├── H6.md
│ │ │ ├── Heading.md
│ │ │ ├── HSplitter.md
│ │ │ ├── HStack.md
│ │ │ ├── Icon.md
│ │ │ ├── IFrame.md
│ │ │ ├── Image.md
│ │ │ ├── Items.md
│ │ │ ├── LabelList.md
│ │ │ ├── Legend.md
│ │ │ ├── LineChart.md
│ │ │ ├── Link.md
│ │ │ ├── List.md
│ │ │ ├── Logo.md
│ │ │ ├── Markdown.md
│ │ │ ├── MenuItem.md
│ │ │ ├── MenuSeparator.md
│ │ │ ├── ModalDialog.md
│ │ │ ├── NavGroup.md
│ │ │ ├── NavLink.md
│ │ │ ├── NavPanel.md
│ │ │ ├── NoResult.md
│ │ │ ├── NumberBox.md
│ │ │ ├── Option.md
│ │ │ ├── Page.md
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── Pages.md
│ │ │ ├── Pagination.md
│ │ │ ├── PasswordInput.md
│ │ │ ├── PieChart.md
│ │ │ ├── ProgressBar.md
│ │ │ ├── Queue.md
│ │ │ ├── RadioGroup.md
│ │ │ ├── RealTimeAdapter.md
│ │ │ ├── Redirect.md
│ │ │ ├── Select.md
│ │ │ ├── Slider.md
│ │ │ ├── Slot.md
│ │ │ ├── SpaceFiller.md
│ │ │ ├── Spinner.md
│ │ │ ├── Splitter.md
│ │ │ ├── Stack.md
│ │ │ ├── StickyBox.md
│ │ │ ├── SubMenuItem.md
│ │ │ ├── Switch.md
│ │ │ ├── TabItem.md
│ │ │ ├── Table.md
│ │ │ ├── TableOfContents.md
│ │ │ ├── Tabs.md
│ │ │ ├── Text.md
│ │ │ ├── TextArea.md
│ │ │ ├── TextBox.md
│ │ │ ├── Theme.md
│ │ │ ├── TimeInput.md
│ │ │ ├── Timer.md
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneSwitch.md
│ │ │ ├── Tooltip.md
│ │ │ ├── Tree.md
│ │ │ ├── VSplitter.md
│ │ │ ├── VStack.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ ├── xmlui-spreadsheet
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Spreadsheet.md
│ │ │ └── xmlui-website-blocks
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Carousel.md
│ │ │ ├── HelloMd.md
│ │ │ ├── HeroSection.md
│ │ │ └── ScrollToTop.md
│ │ └── extensions
│ │ ├── _meta.json
│ │ ├── xmlui-animations
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Animation.md
│ │ │ ├── FadeAnimation.md
│ │ │ ├── FadeInAnimation.md
│ │ │ ├── FadeOutAnimation.md
│ │ │ ├── ScaleAnimation.md
│ │ │ └── SlideInAnimation.md
│ │ └── xmlui-website-blocks
│ │ ├── _meta.json
│ │ ├── _overview.md
│ │ ├── Carousel.md
│ │ ├── FancyButton.md
│ │ ├── HeroSection.md
│ │ └── ScrollToTop.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── pages
│ │ │ ├── _meta.json
│ │ │ ├── app-structure.md
│ │ │ ├── build-editor-component.md
│ │ │ ├── build-hello-world-component.md
│ │ │ ├── components-intro.md
│ │ │ ├── context-variables.md
│ │ │ ├── forms.md
│ │ │ ├── globals.md
│ │ │ ├── glossary.md
│ │ │ ├── helper-tags.md
│ │ │ ├── hosted-deployment.md
│ │ │ ├── howto
│ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md
│ │ │ │ ├── chain-a-refetch.md
│ │ │ │ ├── control-cache-invalidation.md
│ │ │ │ ├── debounce-user-input-for-api-calls.md
│ │ │ │ ├── debounce-with-changelistener.md
│ │ │ │ ├── debug-a-component.md
│ │ │ │ ├── delay-a-datasource-until-another-datasource-is-ready.md
│ │ │ │ ├── delegate-a-method.md
│ │ │ │ ├── do-custom-form-validation.md
│ │ │ │ ├── expose-a-method-from-a-component.md
│ │ │ │ ├── filter-and-transform-data-from-an-api.md
│ │ │ │ ├── group-items-in-list-by-a-property.md
│ │ │ │ ├── handle-background-operations.md
│ │ │ │ ├── hide-an-element-until-its-datasource-is-ready.md
│ │ │ │ ├── make-a-set-of-equal-width-cards.md
│ │ │ │ ├── make-a-table-responsive.md
│ │ │ │ ├── make-navpanel-width-responsive.md
│ │ │ │ ├── modify-a-value-reported-in-a-column.md
│ │ │ │ ├── paginate-a-list.md
│ │ │ │ ├── pass-data-to-a-modal-dialog.md
│ │ │ │ ├── react-to-button-click-not-keystrokes.md
│ │ │ │ ├── set-the-initial-value-of-a-select-from-fetched-data.md
│ │ │ │ ├── share-a-modaldialog-across-components.md
│ │ │ │ ├── sync-selections-between-table-and-list-views.md
│ │ │ │ ├── update-ui-optimistically.md
│ │ │ │ ├── use-built-in-form-validation.md
│ │ │ │ └── use-the-same-modaldialog-to-add-or-edit.md
│ │ │ ├── howto.md
│ │ │ ├── intro.md
│ │ │ ├── layout.md
│ │ │ ├── markup.md
│ │ │ ├── mcp.md
│ │ │ ├── modal-dialogs.md
│ │ │ ├── news-and-reviews.md
│ │ │ ├── reactive-intro.md
│ │ │ ├── refactoring.md
│ │ │ ├── routing-and-links.md
│ │ │ ├── samples
│ │ │ │ ├── color-palette.xmlui
│ │ │ │ ├── color-values.xmlui
│ │ │ │ ├── shadow-sizes.xmlui
│ │ │ │ ├── spacing-sizes.xmlui
│ │ │ │ ├── swatch.xmlui
│ │ │ │ ├── theme-gallery-brief.xmlui
│ │ │ │ └── theme-gallery.xmlui
│ │ │ ├── scoping.md
│ │ │ ├── scripting.md
│ │ │ ├── styles-and-themes
│ │ │ │ ├── common-units.md
│ │ │ │ ├── layout-props.md
│ │ │ │ ├── theme-variable-defaults.md
│ │ │ │ ├── theme-variables.md
│ │ │ │ └── themes.md
│ │ │ ├── template-properties.md
│ │ │ ├── test.md
│ │ │ ├── tutorial-01.md
│ │ │ ├── tutorial-02.md
│ │ │ ├── tutorial-03.md
│ │ │ ├── tutorial-04.md
│ │ │ ├── tutorial-05.md
│ │ │ ├── tutorial-06.md
│ │ │ ├── tutorial-07.md
│ │ │ ├── tutorial-08.md
│ │ │ ├── tutorial-09.md
│ │ │ ├── tutorial-10.md
│ │ │ ├── tutorial-11.md
│ │ │ ├── tutorial-12.md
│ │ │ ├── universal-properties.md
│ │ │ ├── user-defined-components.md
│ │ │ ├── vscode.md
│ │ │ ├── working-with-markdown.md
│ │ │ ├── working-with-text.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-charts
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── DonutChart.md
│ │ │ │ ├── LabelList.md
│ │ │ │ ├── Legend.md
│ │ │ │ ├── LineChart.md
│ │ │ │ └── PieChart.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ └── xmlui-spreadsheet
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ └── Spreadsheet.md
│ │ ├── resources
│ │ │ ├── devdocs
│ │ │ │ ├── debug-proxy-object-2.png
│ │ │ │ ├── debug-proxy-object.png
│ │ │ │ ├── table_editor_01.png
│ │ │ │ ├── table_editor_02.png
│ │ │ │ ├── table_editor_03.png
│ │ │ │ ├── table_editor_04.png
│ │ │ │ ├── table_editor_05.png
│ │ │ │ ├── table_editor_06.png
│ │ │ │ ├── table_editor_07.png
│ │ │ │ ├── table_editor_08.png
│ │ │ │ ├── table_editor_09.png
│ │ │ │ ├── table_editor_10.png
│ │ │ │ ├── table_editor_11.png
│ │ │ │ ├── table-editor-01.png
│ │ │ │ ├── table-editor-02.png
│ │ │ │ ├── table-editor-03.png
│ │ │ │ ├── table-editor-04.png
│ │ │ │ ├── table-editor-06.png
│ │ │ │ ├── table-editor-07.png
│ │ │ │ ├── table-editor-08.png
│ │ │ │ ├── table-editor-09.png
│ │ │ │ └── xmlui-rendering-of-tiptap-markdown.png
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ ├── clients.json
│ │ │ │ ├── daily-revenue.json
│ │ │ │ ├── dashboard-stats.json
│ │ │ │ ├── demo.xmlui
│ │ │ │ ├── demo.xmlui.xs
│ │ │ │ ├── downloads
│ │ │ │ │ └── downloads.json
│ │ │ │ ├── for-download
│ │ │ │ │ ├── index-with-api.html
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── mockApi.js
│ │ │ │ │ ├── start-darwin.sh
│ │ │ │ │ ├── start-linux.sh
│ │ │ │ │ ├── start.bat
│ │ │ │ │ └── xmlui
│ │ │ │ │ └── xmlui-standalone.umd.js
│ │ │ │ ├── getting-started
│ │ │ │ │ ├── cl-tutorial-final.zip
│ │ │ │ │ ├── cl-tutorial.zip
│ │ │ │ │ ├── cl-tutorial2.zip
│ │ │ │ │ ├── cl-tutorial3.zip
│ │ │ │ │ ├── cl-tutorial4.zip
│ │ │ │ │ ├── cl-tutorial5.zip
│ │ │ │ │ ├── cl-tutorial6.zip
│ │ │ │ │ ├── getting-started.zip
│ │ │ │ │ ├── hello-xmlui.zip
│ │ │ │ │ ├── xmlui-empty.zip
│ │ │ │ │ └── xmlui-starter.zip
│ │ │ │ ├── howto
│ │ │ │ │ └── component-icons
│ │ │ │ │ └── up-arrow.svg
│ │ │ │ ├── invoices.json
│ │ │ │ ├── monthly-status.json
│ │ │ │ ├── news-and-reviews.json
│ │ │ │ ├── products.json
│ │ │ │ ├── releases.json
│ │ │ │ ├── tutorials
│ │ │ │ │ ├── datasource
│ │ │ │ │ │ └── api.ts
│ │ │ │ │ └── p2do
│ │ │ │ │ ├── api.ts
│ │ │ │ │ └── todo-logo.svg
│ │ │ │ └── xmlui.json
│ │ │ ├── github.svg
│ │ │ ├── images
│ │ │ │ ├── apiaction-tutorial
│ │ │ │ │ ├── add-success.png
│ │ │ │ │ ├── apiaction-param.png
│ │ │ │ │ ├── change-completed.png
│ │ │ │ │ ├── change-in-progress.png
│ │ │ │ │ ├── confirm-delete.png
│ │ │ │ │ ├── data-error.png
│ │ │ │ │ ├── data-progress.png
│ │ │ │ │ ├── data-success.png
│ │ │ │ │ ├── display-1.png
│ │ │ │ │ ├── item-deleted.png
│ │ │ │ │ ├── item-updated.png
│ │ │ │ │ ├── missing-api-key.png
│ │ │ │ │ ├── new-item-added.png
│ │ │ │ │ └── test-message.png
│ │ │ │ ├── chat-api
│ │ │ │ │ └── domain-model.svg
│ │ │ │ ├── components
│ │ │ │ │ ├── image
│ │ │ │ │ │ └── breakfast.jpg
│ │ │ │ │ ├── markdown
│ │ │ │ │ │ └── colors.png
│ │ │ │ │ └── modal
│ │ │ │ │ ├── deep_link_dialog_1.jpg
│ │ │ │ │ └── deep_link_dialog_2.jpg
│ │ │ │ ├── create-apps
│ │ │ │ │ ├── collapsed-vertical.png
│ │ │ │ │ ├── using-forms-warning-dialog.png
│ │ │ │ │ └── using-forms.png
│ │ │ │ ├── datasource-tutorial
│ │ │ │ │ ├── data-with-header.png
│ │ │ │ │ ├── filtered-data.png
│ │ │ │ │ ├── filtered-items.png
│ │ │ │ │ ├── initial-page-items.png
│ │ │ │ │ ├── list-items.png
│ │ │ │ │ ├── next-page-items.png
│ │ │ │ │ ├── no-data.png
│ │ │ │ │ ├── pagination-1.jpg
│ │ │ │ │ ├── pagination-1.png
│ │ │ │ │ ├── polling-1.png
│ │ │ │ │ ├── refetch-data.png
│ │ │ │ │ ├── slow-loading.png
│ │ │ │ │ ├── test-message.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── unconventional-data.png
│ │ │ │ │ └── unfiltered-items.png
│ │ │ │ ├── flower.jpg
│ │ │ │ ├── get-started
│ │ │ │ │ ├── add-new-contact.png
│ │ │ │ │ ├── app-modified.png
│ │ │ │ │ ├── app-start.png
│ │ │ │ │ ├── app-with-boxes.png
│ │ │ │ │ ├── app-with-toast.png
│ │ │ │ │ ├── boilerplate-structure.png
│ │ │ │ │ ├── cl-initial.png
│ │ │ │ │ ├── cl-start.png
│ │ │ │ │ ├── contact-counts.png
│ │ │ │ │ ├── contact-dialog-title.png
│ │ │ │ │ ├── contact-dialog.png
│ │ │ │ │ ├── contact-menus.png
│ │ │ │ │ ├── contact-predicates.png
│ │ │ │ │ ├── context-menu.png
│ │ │ │ │ ├── dashboard-numbers.png
│ │ │ │ │ ├── default-contact-list.png
│ │ │ │ │ ├── delete-contact.png
│ │ │ │ │ ├── delete-task.png
│ │ │ │ │ ├── detailed-template.png
│ │ │ │ │ ├── edit-contact-details.png
│ │ │ │ │ ├── edited-contact-saved.png
│ │ │ │ │ ├── empty-sections.png
│ │ │ │ │ ├── filter-completed.png
│ │ │ │ │ ├── fullwidth-desktop.png
│ │ │ │ │ ├── fullwidth-mobile.png
│ │ │ │ │ ├── initial-table.png
│ │ │ │ │ ├── items-and-badges.png
│ │ │ │ │ ├── loading-message.png
│ │ │ │ │ ├── new-contact-button.png
│ │ │ │ │ ├── new-contact-saved.png
│ │ │ │ │ ├── no-empty-sections.png
│ │ │ │ │ ├── personal-todo-initial.png
│ │ │ │ │ ├── piechart.png
│ │ │ │ │ ├── review-today.png
│ │ │ │ │ ├── rudimentary-dashboard.png
│ │ │ │ │ ├── section-collapsed.png
│ │ │ │ │ ├── sectioned-items.png
│ │ │ │ │ ├── sections-ordered.png
│ │ │ │ │ ├── spacex-list-with-links.png
│ │ │ │ │ ├── spacex-list.png
│ │ │ │ │ ├── start-personal-todo-1.png
│ │ │ │ │ ├── submit-new-contact.png
│ │ │ │ │ ├── submit-new-task.png
│ │ │ │ │ ├── syntax-highlighting.png
│ │ │ │ │ ├── table-with-badge.png
│ │ │ │ │ ├── template-with-card.png
│ │ │ │ │ ├── test-emulated-api.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── todo-logo.png
│ │ │ │ │ └── xmlui-tools.png
│ │ │ │ ├── HelloApp.png
│ │ │ │ ├── HelloApp2.png
│ │ │ │ ├── logos
│ │ │ │ │ ├── xmlui1.svg
│ │ │ │ │ ├── xmlui2.svg
│ │ │ │ │ ├── xmlui3.svg
│ │ │ │ │ ├── xmlui4.svg
│ │ │ │ │ ├── xmlui5.svg
│ │ │ │ │ ├── xmlui6.svg
│ │ │ │ │ └── xmlui7.svg
│ │ │ │ ├── pdf
│ │ │ │ │ └── dummy-pdf.jpg
│ │ │ │ ├── rendering-engine
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ ├── Component.svg
│ │ │ │ │ ├── CompoundComponent.svg
│ │ │ │ │ ├── RootComponent.svg
│ │ │ │ │ └── tree-with-containers.svg
│ │ │ │ ├── reviewers-guide
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ └── incbutton-in-action.png
│ │ │ │ ├── tools
│ │ │ │ │ └── boilerplate-structure.png
│ │ │ │ ├── try.svg
│ │ │ │ ├── tutorial
│ │ │ │ │ ├── app-chat-history.png
│ │ │ │ │ ├── app-content-placeholder.png
│ │ │ │ │ ├── app-header-and-content.png
│ │ │ │ │ ├── app-links-channel-selected.png
│ │ │ │ │ ├── app-links-click.png
│ │ │ │ │ ├── app-navigation.png
│ │ │ │ │ ├── finished-ex01.png
│ │ │ │ │ ├── finished-ex02.png
│ │ │ │ │ ├── hello.png
│ │ │ │ │ ├── splash-screen-advanced.png
│ │ │ │ │ ├── splash-screen-after-click.png
│ │ │ │ │ ├── splash-screen-centered.png
│ │ │ │ │ ├── splash-screen-events.png
│ │ │ │ │ ├── splash-screen-expression.png
│ │ │ │ │ ├── splash-screen-reuse-after.png
│ │ │ │ │ ├── splash-screen-reuse-before.png
│ │ │ │ │ └── splash-screen.png
│ │ │ │ └── tutorial-01.png
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ ├── Boxes.xmlui
│ │ │ ├── Breadcrumb.xmlui
│ │ │ ├── ChangeLog.xmlui
│ │ │ ├── ColorPalette.xmlui
│ │ │ ├── DocumentLinks.xmlui
│ │ │ ├── DocumentPage.xmlui
│ │ │ ├── DocumentPageNoTOC.xmlui
│ │ │ ├── Icons.xmlui
│ │ │ ├── IncButton.xmlui
│ │ │ ├── IncButton2.xmlui
│ │ │ ├── NameValue.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ ├── PaletteItem.xmlui
│ │ │ ├── Palettes.xmlui
│ │ │ ├── SectionHeader.xmlui
│ │ │ ├── TBD.xmlui
│ │ │ ├── Test.xmlui
│ │ │ ├── ThemesIntro.xmlui
│ │ │ ├── ThousandThemes.xmlui
│ │ │ ├── TubeStops.xmlui
│ │ │ ├── TubeStops.xmlui.xs
│ │ │ └── TwoColumnCode.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│ ├── tsconfig.json
│ ├── xmlui-animations
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── Animation.tsx
│ │ ├── AnimationNative.tsx
│ │ ├── FadeAnimation.tsx
│ │ ├── FadeInAnimation.tsx
│ │ ├── FadeOutAnimation.tsx
│ │ ├── index.tsx
│ │ ├── ScaleAnimation.tsx
│ │ └── SlideInAnimation.tsx
│ ├── xmlui-devtools
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── devtools
│ │ │ │ ├── DevTools.tsx
│ │ │ │ ├── DevToolsNative.module.scss
│ │ │ │ ├── DevToolsNative.tsx
│ │ │ │ ├── ModalDialog.module.scss
│ │ │ │ ├── ModalDialog.tsx
│ │ │ │ ├── ModalVisibilityContext.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── editor
│ │ │ │ └── Editor.tsx
│ │ │ └── index.tsx
│ │ └── vite.config-overrides.ts
│ ├── xmlui-hello-world
│ │ ├── .gitignore
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── HelloWorld.module.scss
│ │ ├── HelloWorld.tsx
│ │ ├── HelloWorldNative.tsx
│ │ └── index.tsx
│ ├── xmlui-os-frames
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── IPhoneFrame.module.scss
│ │ ├── IPhoneFrame.tsx
│ │ ├── MacOSAppFrame.module.scss
│ │ ├── MacOSAppFrame.tsx
│ │ ├── WindowsAppFrame.module.scss
│ │ └── WindowsAppFrame.tsx
│ ├── xmlui-pdf
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ ├── components
│ │ │ │ └── Pdf.xmlui
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── LazyPdfNative.tsx
│ │ ├── Pdf.module.scss
│ │ └── Pdf.tsx
│ ├── xmlui-playground
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── hooks
│ │ │ ├── usePlayground.ts
│ │ │ └── useToast.ts
│ │ ├── index.tsx
│ │ ├── playground
│ │ │ ├── Box.module.scss
│ │ │ ├── Box.tsx
│ │ │ ├── CodeSelector.module.scss
│ │ │ ├── CodeSelector.tsx
│ │ │ ├── ConfirmationDialog.module.scss
│ │ │ ├── ConfirmationDialog.tsx
│ │ │ ├── Editor.tsx
│ │ │ ├── Header.module.scss
│ │ │ ├── Header.tsx
│ │ │ ├── Playground.tsx
│ │ │ ├── PlaygroundContent.module.scss
│ │ │ ├── PlaygroundContent.tsx
│ │ │ ├── PlaygroundNative.module.scss
│ │ │ ├── PlaygroundNative.tsx
│ │ │ ├── Preview.tsx
│ │ │ ├── StandalonePlayground.tsx
│ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ ├── ThemeSwitcher.module.scss
│ │ │ ├── ThemeSwitcher.tsx
│ │ │ └── utils.ts
│ │ ├── providers
│ │ │ ├── Toast.module.scss
│ │ │ └── ToastProvider.tsx
│ │ ├── state
│ │ │ └── store.ts
│ │ ├── themes
│ │ │ └── theme.ts
│ │ └── utils
│ │ └── helpers.ts
│ ├── xmlui-search
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Search.module.scss
│ │ └── Search.tsx
│ ├── xmlui-spreadsheet
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Spreadsheet.tsx
│ │ └── SpreadsheetNative.tsx
│ └── xmlui-website-blocks
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── demo
│ │ ├── components
│ │ │ ├── HeroBackgroundBreakoutPage.xmlui
│ │ │ ├── HeroBackgroundsPage.xmlui
│ │ │ ├── HeroContentsPage.xmlui
│ │ │ ├── HeroTextAlignPage.xmlui
│ │ │ ├── HeroTextPage.xmlui
│ │ │ └── HeroTonesPage.xmlui
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── default.ts
│ ├── index.html
│ ├── index.ts
│ ├── meta
│ │ └── componentsMetadata.ts
│ ├── package.json
│ ├── public
│ │ └── resources
│ │ ├── building.jpg
│ │ └── xmlui-logo.svg
│ └── src
│ ├── Carousel
│ │ ├── Carousel.module.scss
│ │ ├── Carousel.tsx
│ │ ├── CarouselContext.tsx
│ │ └── CarouselNative.tsx
│ ├── FancyButton
│ │ ├── FancyButton.module.scss
│ │ ├── FancyButton.tsx
│ │ └── FancyButton.xmlui
│ ├── Hello
│ │ ├── Hello.tsx
│ │ ├── Hello.xmlui
│ │ └── Hello.xmlui.xs
│ ├── HeroSection
│ │ ├── HeroSection.module.scss
│ │ ├── HeroSection.spec.ts
│ │ ├── HeroSection.tsx
│ │ └── HeroSectionNative.tsx
│ ├── index.tsx
│ ├── ScrollToTop
│ │ ├── ScrollToTop.module.scss
│ │ ├── ScrollToTop.tsx
│ │ └── ScrollToTopNative.tsx
│ └── vite-env.d.ts
├── playwright.config.ts
├── README.md
├── tools
│ ├── codefence
│ │ └── xmlui-code-fence-docs.md
│ ├── create-app
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── create-app.ts
│ │ ├── helpers
│ │ │ ├── copy.ts
│ │ │ ├── get-pkg-manager.ts
│ │ │ ├── git.ts
│ │ │ ├── install.ts
│ │ │ ├── is-folder-empty.ts
│ │ │ ├── is-writeable.ts
│ │ │ ├── make-dir.ts
│ │ │ └── validate-pkg.ts
│ │ ├── index.ts
│ │ ├── package.json
│ │ ├── templates
│ │ │ ├── default
│ │ │ │ └── ts
│ │ │ │ ├── gitignore
│ │ │ │ ├── index.html
│ │ │ │ ├── index.ts
│ │ │ │ ├── public
│ │ │ │ │ ├── mockServiceWorker.js
│ │ │ │ │ ├── resources
│ │ │ │ │ │ ├── favicon.ico
│ │ │ │ │ │ └── xmlui-logo.svg
│ │ │ │ │ └── serve.json
│ │ │ │ └── src
│ │ │ │ ├── components
│ │ │ │ │ ├── ApiAware.xmlui
│ │ │ │ │ ├── Home.xmlui
│ │ │ │ │ ├── IncButton.xmlui
│ │ │ │ │ └── PagePanel.xmlui
│ │ │ │ ├── config.ts
│ │ │ │ └── Main.xmlui
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ └── tsconfig.json
│ ├── create-xmlui-hello-world
│ │ ├── index.js
│ │ └── package.json
│ └── vscode
│ ├── .gitignore
│ ├── .vscode
│ │ ├── launch.json
│ │ └── tasks.json
│ ├── .vscodeignore
│ ├── build.sh
│ ├── CHANGELOG.md
│ ├── esbuild.js
│ ├── eslint.config.mjs
│ ├── formatter-docs.md
│ ├── generate-test-sample.sh
│ ├── LICENSE.md
│ ├── package-lock.json
│ ├── package.json
│ ├── README.md
│ ├── resources
│ │ ├── xmlui-logo.png
│ │ └── xmlui-markup-syntax-highlighting.png
│ ├── src
│ │ ├── extension.ts
│ │ └── server.ts
│ ├── syntaxes
│ │ └── xmlui.tmLanguage.json
│ ├── test-samples
│ │ └── sample.xmlui
│ ├── tsconfig.json
│ └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
├── .gitignore
├── bin
│ ├── bootstrap.cjs
│ ├── bootstrap.js
│ ├── build-lib.ts
│ ├── build.ts
│ ├── index.ts
│ ├── preview.ts
│ ├── start.ts
│ ├── vite-xmlui-plugin.ts
│ └── viteConfig.ts
├── CHANGELOG.md
├── conventions
│ ├── component-qa-checklist.md
│ ├── copilot-conventions.md
│ ├── create-xmlui-components.md
│ ├── mermaid.md
│ ├── testing-conventions.md
│ └── xmlui-in-a-nutshell.md
├── dev-docs
│ ├── accessibility.md
│ ├── build-system.md
│ ├── build-xmlui.md
│ ├── component-behaviors.md
│ ├── component-metadata.md
│ ├── components-with-options.md
│ ├── containers.md
│ ├── data-operations.md
│ ├── glossary.md
│ ├── index.md
│ ├── next
│ │ ├── component-dev-guide.md
│ │ ├── configuration-management-enhancement-summary.md
│ │ ├── documentation-scripts-refactoring-complete-summary.md
│ │ ├── documentation-scripts-refactoring-plan.md
│ │ ├── duplicate-pattern-extraction-summary.md
│ │ ├── error-handling-standardization-summary.md
│ │ ├── generating-component-reference.md
│ │ ├── index.md
│ │ ├── logging-consistency-implementation-summary.md
│ │ ├── project-build.md
│ │ ├── project-structure.md
│ │ ├── theme-context.md
│ │ ├── tiptap-design-considerations.md
│ │ ├── working-with-code.md
│ │ ├── xmlui-runtime-architecture
│ │ └── xmlui-wcag-accessibility-report.md
│ ├── react-fundamentals.md
│ ├── release-method.md
│ ├── standalone-app.md
│ ├── theme-variables-refactoring.md
│ ├── ud-components.md
│ └── xmlui-repo.md
├── package.json
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── extract-component-metadata.js
│ ├── generate-docs
│ │ ├── build-downloads-map.mjs
│ │ ├── build-pages-map.mjs
│ │ ├── components-config.json
│ │ ├── configuration-management.mjs
│ │ ├── constants.mjs
│ │ ├── create-theme-files.mjs
│ │ ├── DocsGenerator.mjs
│ │ ├── error-handling.mjs
│ │ ├── extensions-config.json
│ │ ├── folders.mjs
│ │ ├── generate-summary-files.mjs
│ │ ├── get-docs.mjs
│ │ ├── input-handler.mjs
│ │ ├── logger.mjs
│ │ ├── logging-standards.mjs
│ │ ├── MetadataProcessor.mjs
│ │ ├── pattern-utilities.mjs
│ │ └── utils.mjs
│ ├── generate-metadata-markdown.js
│ ├── get-langserver-metadata.js
│ ├── inline-links.mjs
│ └── README-e2e-summary.md
├── src
│ ├── abstractions
│ │ ├── _conventions.md
│ │ ├── ActionDefs.ts
│ │ ├── AppContextDefs.ts
│ │ ├── ComponentDefs.ts
│ │ ├── ContainerDefs.ts
│ │ ├── ExtensionDefs.ts
│ │ ├── FunctionDefs.ts
│ │ ├── RendererDefs.ts
│ │ ├── scripting
│ │ │ ├── BlockScope.ts
│ │ │ ├── Compilation.ts
│ │ │ ├── LogicalThread.ts
│ │ │ ├── LoopScope.ts
│ │ │ ├── modules.ts
│ │ │ ├── ScriptParserError.ts
│ │ │ ├── Token.ts
│ │ │ ├── TryScope.ts
│ │ │ └── TryScopeExp.ts
│ │ └── ThemingDefs.ts
│ ├── components
│ │ ├── _conventions.md
│ │ ├── abstractions.ts
│ │ ├── Accordion
│ │ │ ├── Accordion.md
│ │ │ ├── Accordion.module.scss
│ │ │ ├── Accordion.spec.ts
│ │ │ ├── Accordion.tsx
│ │ │ ├── AccordionContext.tsx
│ │ │ ├── AccordionItem.tsx
│ │ │ ├── AccordionItemNative.tsx
│ │ │ └── AccordionNative.tsx
│ │ ├── Animation
│ │ │ └── AnimationNative.tsx
│ │ ├── APICall
│ │ │ ├── APICall.md
│ │ │ ├── APICall.spec.ts
│ │ │ ├── APICall.tsx
│ │ │ └── APICallNative.tsx
│ │ ├── App
│ │ │ ├── App.md
│ │ │ ├── App.module.scss
│ │ │ ├── App.spec.ts
│ │ │ ├── App.tsx
│ │ │ ├── AppLayoutContext.ts
│ │ │ ├── AppNative.tsx
│ │ │ ├── AppStateContext.ts
│ │ │ ├── doc-resources
│ │ │ │ ├── condensed-sticky.xmlui
│ │ │ │ ├── condensed.xmlui
│ │ │ │ ├── horizontal-sticky.xmlui
│ │ │ │ ├── horizontal.xmlui
│ │ │ │ ├── vertical-full-header.xmlui
│ │ │ │ ├── vertical-sticky.xmlui
│ │ │ │ └── vertical.xmlui
│ │ │ ├── IndexerContext.ts
│ │ │ ├── LinkInfoContext.ts
│ │ │ ├── SearchContext.tsx
│ │ │ ├── Sheet.module.scss
│ │ │ └── Sheet.tsx
│ │ ├── AppHeader
│ │ │ ├── AppHeader.md
│ │ │ ├── AppHeader.module.scss
│ │ │ ├── AppHeader.spec.ts
│ │ │ ├── AppHeader.tsx
│ │ │ └── AppHeaderNative.tsx
│ │ ├── AppState
│ │ │ ├── AppState.md
│ │ │ ├── AppState.spec.ts
│ │ │ ├── AppState.tsx
│ │ │ └── AppStateNative.tsx
│ │ ├── AutoComplete
│ │ │ ├── AutoComplete.md
│ │ │ ├── AutoComplete.module.scss
│ │ │ ├── AutoComplete.spec.ts
│ │ │ ├── AutoComplete.tsx
│ │ │ ├── AutoCompleteContext.tsx
│ │ │ └── AutoCompleteNative.tsx
│ │ ├── Avatar
│ │ │ ├── Avatar.md
│ │ │ ├── Avatar.module.scss
│ │ │ ├── Avatar.spec.ts
│ │ │ ├── Avatar.tsx
│ │ │ └── AvatarNative.tsx
│ │ ├── Backdrop
│ │ │ ├── Backdrop.md
│ │ │ ├── Backdrop.module.scss
│ │ │ ├── Backdrop.spec.ts
│ │ │ ├── Backdrop.tsx
│ │ │ └── BackdropNative.tsx
│ │ ├── Badge
│ │ │ ├── Badge.md
│ │ │ ├── Badge.module.scss
│ │ │ ├── Badge.spec.ts
│ │ │ ├── Badge.tsx
│ │ │ └── BadgeNative.tsx
│ │ ├── Bookmark
│ │ │ ├── Bookmark.md
│ │ │ ├── Bookmark.module.scss
│ │ │ ├── Bookmark.spec.ts
│ │ │ ├── Bookmark.tsx
│ │ │ └── BookmarkNative.tsx
│ │ ├── Breakout
│ │ │ ├── Breakout.module.scss
│ │ │ ├── Breakout.spec.ts
│ │ │ ├── Breakout.tsx
│ │ │ └── BreakoutNative.tsx
│ │ ├── Button
│ │ │ ├── Button-style.spec.ts
│ │ │ ├── Button.md
│ │ │ ├── Button.module.scss
│ │ │ ├── Button.spec.ts
│ │ │ ├── Button.tsx
│ │ │ └── ButtonNative.tsx
│ │ ├── Card
│ │ │ ├── Card.md
│ │ │ ├── Card.module.scss
│ │ │ ├── Card.spec.ts
│ │ │ ├── Card.tsx
│ │ │ └── CardNative.tsx
│ │ ├── Carousel
│ │ │ ├── Carousel.md
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.spec.ts
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ ├── CarouselItem.tsx
│ │ │ ├── CarouselItemNative.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── ChangeListener
│ │ │ ├── ChangeListener.md
│ │ │ ├── ChangeListener.spec.ts
│ │ │ ├── ChangeListener.tsx
│ │ │ └── ChangeListenerNative.tsx
│ │ ├── chart-color-schemes.ts
│ │ ├── Charts
│ │ │ ├── AreaChart
│ │ │ │ ├── AreaChart.md
│ │ │ │ ├── AreaChart.spec.ts
│ │ │ │ ├── AreaChart.tsx
│ │ │ │ └── AreaChartNative.tsx
│ │ │ ├── BarChart
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── BarChart.module.scss
│ │ │ │ ├── BarChart.spec.ts
│ │ │ │ ├── BarChart.tsx
│ │ │ │ └── BarChartNative.tsx
│ │ │ ├── DonutChart
│ │ │ │ ├── DonutChart.spec.ts
│ │ │ │ └── DonutChart.tsx
│ │ │ ├── LabelList
│ │ │ │ ├── LabelList.module.scss
│ │ │ │ ├── LabelList.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ └── LabelListNative.tsx
│ │ │ ├── Legend
│ │ │ │ ├── Legend.spec.ts
│ │ │ │ ├── Legend.tsx
│ │ │ │ └── LegendNative.tsx
│ │ │ ├── LineChart
│ │ │ │ ├── LineChart.md
│ │ │ │ ├── LineChart.module.scss
│ │ │ │ ├── LineChart.spec.ts
│ │ │ │ ├── LineChart.tsx
│ │ │ │ └── LineChartNative.tsx
│ │ │ ├── PieChart
│ │ │ │ ├── PieChart.md
│ │ │ │ ├── PieChart.spec.ts
│ │ │ │ ├── PieChart.tsx
│ │ │ │ ├── PieChartNative.module.scss
│ │ │ │ └── PieChartNative.tsx
│ │ │ ├── RadarChart
│ │ │ │ ├── RadarChart.md
│ │ │ │ ├── RadarChart.spec.ts
│ │ │ │ ├── RadarChart.tsx
│ │ │ │ └── RadarChartNative.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── TooltipContent.module.scss
│ │ │ │ ├── TooltipContent.spec.ts
│ │ │ │ └── TooltipContent.tsx
│ │ │ └── utils
│ │ │ ├── abstractions.ts
│ │ │ └── ChartProvider.tsx
│ │ ├── Checkbox
│ │ │ ├── Checkbox.md
│ │ │ ├── Checkbox.spec.ts
│ │ │ └── Checkbox.tsx
│ │ ├── CodeBlock
│ │ │ ├── CodeBlock.module.scss
│ │ │ ├── CodeBlock.spec.ts
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CodeBlockNative.tsx
│ │ │ └── highlight-code.ts
│ │ ├── collectedComponentMetadata.ts
│ │ ├── ColorPicker
│ │ │ ├── ColorPicker.md
│ │ │ ├── ColorPicker.module.scss
│ │ │ ├── ColorPicker.spec.ts
│ │ │ ├── ColorPicker.tsx
│ │ │ └── ColorPickerNative.tsx
│ │ ├── Column
│ │ │ ├── Column.md
│ │ │ ├── Column.tsx
│ │ │ ├── ColumnNative.tsx
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ └── TableContext.tsx
│ │ ├── component-utils.ts
│ │ ├── ComponentProvider.tsx
│ │ ├── ComponentRegistryContext.tsx
│ │ ├── container-helpers.tsx
│ │ ├── ContentSeparator
│ │ │ ├── ContentSeparator.md
│ │ │ ├── ContentSeparator.module.scss
│ │ │ ├── ContentSeparator.spec.ts
│ │ │ ├── ContentSeparator.tsx
│ │ │ └── ContentSeparatorNative.tsx
│ │ ├── DataSource
│ │ │ ├── DataSource.md
│ │ │ └── DataSource.tsx
│ │ ├── DateInput
│ │ │ ├── DateInput.md
│ │ │ ├── DateInput.module.scss
│ │ │ ├── DateInput.spec.ts
│ │ │ ├── DateInput.tsx
│ │ │ └── DateInputNative.tsx
│ │ ├── DatePicker
│ │ │ ├── DatePicker.md
│ │ │ ├── DatePicker.module.scss
│ │ │ ├── DatePicker.spec.ts
│ │ │ ├── DatePicker.tsx
│ │ │ └── DatePickerNative.tsx
│ │ ├── DropdownMenu
│ │ │ ├── DropdownMenu.md
│ │ │ ├── DropdownMenu.module.scss
│ │ │ ├── DropdownMenu.spec.ts
│ │ │ ├── DropdownMenu.tsx
│ │ │ ├── DropdownMenuNative.tsx
│ │ │ ├── MenuItem.md
│ │ │ └── SubMenuItem.md
│ │ ├── EmojiSelector
│ │ │ ├── EmojiSelector.md
│ │ │ ├── EmojiSelector.spec.ts
│ │ │ ├── EmojiSelector.tsx
│ │ │ └── EmojiSelectorNative.tsx
│ │ ├── ExpandableItem
│ │ │ ├── ExpandableItem.module.scss
│ │ │ ├── ExpandableItem.spec.ts
│ │ │ ├── ExpandableItem.tsx
│ │ │ └── ExpandableItemNative.tsx
│ │ ├── FileInput
│ │ │ ├── FileInput.md
│ │ │ ├── FileInput.module.scss
│ │ │ ├── FileInput.spec.ts
│ │ │ ├── FileInput.tsx
│ │ │ └── FileInputNative.tsx
│ │ ├── FileUploadDropZone
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FileUploadDropZone.module.scss
│ │ │ ├── FileUploadDropZone.spec.ts
│ │ │ ├── FileUploadDropZone.tsx
│ │ │ └── FileUploadDropZoneNative.tsx
│ │ ├── FlowLayout
│ │ │ ├── FlowLayout.md
│ │ │ ├── FlowLayout.module.scss
│ │ │ ├── FlowLayout.spec.ts
│ │ │ ├── FlowLayout.spec.ts-snapshots
│ │ │ │ └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
│ │ │ ├── FlowLayout.tsx
│ │ │ └── FlowLayoutNative.tsx
│ │ ├── Footer
│ │ │ ├── Footer.md
│ │ │ ├── Footer.module.scss
│ │ │ ├── Footer.spec.ts
│ │ │ ├── Footer.tsx
│ │ │ └── FooterNative.tsx
│ │ ├── Form
│ │ │ ├── Form.md
│ │ │ ├── Form.module.scss
│ │ │ ├── Form.spec.ts
│ │ │ ├── Form.tsx
│ │ │ ├── formActions.ts
│ │ │ ├── FormContext.ts
│ │ │ └── FormNative.tsx
│ │ ├── FormItem
│ │ │ ├── FormItem.md
│ │ │ ├── FormItem.module.scss
│ │ │ ├── FormItem.spec.ts
│ │ │ ├── FormItem.tsx
│ │ │ ├── FormItemNative.tsx
│ │ │ ├── HelperText.module.scss
│ │ │ ├── HelperText.tsx
│ │ │ ├── ItemWithLabel.tsx
│ │ │ └── Validations.ts
│ │ ├── FormSection
│ │ │ ├── FormSection.md
│ │ │ ├── FormSection.ts
│ │ │ └── FormSection.xmlui
│ │ ├── Fragment
│ │ │ ├── Fragment.spec.ts
│ │ │ └── Fragment.tsx
│ │ ├── Heading
│ │ │ ├── abstractions.ts
│ │ │ ├── H1.md
│ │ │ ├── H1.spec.ts
│ │ │ ├── H2.md
│ │ │ ├── H2.spec.ts
│ │ │ ├── H3.md
│ │ │ ├── H3.spec.ts
│ │ │ ├── H4.md
│ │ │ ├── H4.spec.ts
│ │ │ ├── H5.md
│ │ │ ├── H5.spec.ts
│ │ │ ├── H6.md
│ │ │ ├── H6.spec.ts
│ │ │ ├── Heading.md
│ │ │ ├── Heading.module.scss
│ │ │ ├── Heading.spec.ts
│ │ │ ├── Heading.tsx
│ │ │ └── HeadingNative.tsx
│ │ ├── HoverCard
│ │ │ ├── HoverCard.tsx
│ │ │ └── HovercardNative.tsx
│ │ ├── HtmlTags
│ │ │ ├── HtmlTags.module.scss
│ │ │ ├── HtmlTags.spec.ts
│ │ │ └── HtmlTags.tsx
│ │ ├── Icon
│ │ │ ├── AdmonitionDanger.tsx
│ │ │ ├── AdmonitionInfo.tsx
│ │ │ ├── AdmonitionNote.tsx
│ │ │ ├── AdmonitionTip.tsx
│ │ │ ├── AdmonitionWarning.tsx
│ │ │ ├── ApiIcon.tsx
│ │ │ ├── ArrowDropDown.module.scss
│ │ │ ├── ArrowDropDown.tsx
│ │ │ ├── ArrowDropUp.module.scss
│ │ │ ├── ArrowDropUp.tsx
│ │ │ ├── ArrowLeft.module.scss
│ │ │ ├── ArrowLeft.tsx
│ │ │ ├── ArrowRight.module.scss
│ │ │ ├── ArrowRight.tsx
│ │ │ ├── Attach.tsx
│ │ │ ├── Binding.module.scss
│ │ │ ├── Binding.tsx
│ │ │ ├── BoardIcon.tsx
│ │ │ ├── BoxIcon.tsx
│ │ │ ├── CheckIcon.tsx
│ │ │ ├── ChevronDownIcon.tsx
│ │ │ ├── ChevronLeft.tsx
│ │ │ ├── ChevronRight.tsx
│ │ │ ├── ChevronUpIcon.tsx
│ │ │ ├── CodeFileIcon.tsx
│ │ │ ├── CodeSandbox.tsx
│ │ │ ├── CompactListIcon.tsx
│ │ │ ├── ContentCopyIcon.tsx
│ │ │ ├── DarkToLightIcon.tsx
│ │ │ ├── DatabaseIcon.module.scss
│ │ │ ├── DatabaseIcon.tsx
│ │ │ ├── DocFileIcon.tsx
│ │ │ ├── DocIcon.tsx
│ │ │ ├── DotMenuHorizontalIcon.tsx
│ │ │ ├── DotMenuIcon.tsx
│ │ │ ├── EmailIcon.tsx
│ │ │ ├── EmptyFolderIcon.tsx
│ │ │ ├── ErrorIcon.tsx
│ │ │ ├── ExpressionIcon.tsx
│ │ │ ├── FillPlusCricleIcon.tsx
│ │ │ ├── FilterIcon.tsx
│ │ │ ├── FolderIcon.tsx
│ │ │ ├── GlobeIcon.tsx
│ │ │ ├── HomeIcon.tsx
│ │ │ ├── HyperLinkIcon.tsx
│ │ │ ├── Icon.md
│ │ │ ├── Icon.module.scss
│ │ │ ├── Icon.spec.ts
│ │ │ ├── Icon.tsx
│ │ │ ├── IconNative.tsx
│ │ │ ├── ImageFileIcon.tsx
│ │ │ ├── Inspect.tsx
│ │ │ ├── LightToDark.tsx
│ │ │ ├── LinkIcon.tsx
│ │ │ ├── ListIcon.tsx
│ │ │ ├── LooseListIcon.tsx
│ │ │ ├── MoonIcon.tsx
│ │ │ ├── MoreOptionsIcon.tsx
│ │ │ ├── NoSortIcon.tsx
│ │ │ ├── PDFIcon.tsx
│ │ │ ├── PenIcon.tsx
│ │ │ ├── PhoneIcon.tsx
│ │ │ ├── PhotoIcon.tsx
│ │ │ ├── PlusIcon.tsx
│ │ │ ├── SearchIcon.tsx
│ │ │ ├── ShareIcon.tsx
│ │ │ ├── SortAscendingIcon.tsx
│ │ │ ├── SortDescendingIcon.tsx
│ │ │ ├── StarsIcon.tsx
│ │ │ ├── SunIcon.tsx
│ │ │ ├── svg
│ │ │ │ ├── admonition_danger.svg
│ │ │ │ ├── admonition_info.svg
│ │ │ │ ├── admonition_note.svg
│ │ │ │ ├── admonition_tip.svg
│ │ │ │ ├── admonition_warning.svg
│ │ │ │ ├── api.svg
│ │ │ │ ├── arrow-dropdown.svg
│ │ │ │ ├── arrow-left.svg
│ │ │ │ ├── arrow-right.svg
│ │ │ │ ├── arrow-up.svg
│ │ │ │ ├── attach.svg
│ │ │ │ ├── binding.svg
│ │ │ │ ├── box.svg
│ │ │ │ ├── bulb.svg
│ │ │ │ ├── code-file.svg
│ │ │ │ ├── code-sandbox.svg
│ │ │ │ ├── dark_to_light.svg
│ │ │ │ ├── database.svg
│ │ │ │ ├── doc.svg
│ │ │ │ ├── empty-folder.svg
│ │ │ │ ├── expression.svg
│ │ │ │ ├── eye-closed.svg
│ │ │ │ ├── eye-dark.svg
│ │ │ │ ├── eye.svg
│ │ │ │ ├── file-text.svg
│ │ │ │ ├── filter.svg
│ │ │ │ ├── folder.svg
│ │ │ │ ├── img.svg
│ │ │ │ ├── inspect.svg
│ │ │ │ ├── light_to_dark.svg
│ │ │ │ ├── moon.svg
│ │ │ │ ├── pdf.svg
│ │ │ │ ├── photo.svg
│ │ │ │ ├── share.svg
│ │ │ │ ├── stars.svg
│ │ │ │ ├── sun.svg
│ │ │ │ ├── trending-down.svg
│ │ │ │ ├── trending-level.svg
│ │ │ │ ├── trending-up.svg
│ │ │ │ ├── txt.svg
│ │ │ │ ├── unknown-file.svg
│ │ │ │ ├── unlink.svg
│ │ │ │ └── xls.svg
│ │ │ ├── TableDeleteColumnIcon.tsx
│ │ │ ├── TableDeleteRowIcon.tsx
│ │ │ ├── TableInsertColumnIcon.tsx
│ │ │ ├── TableInsertRowIcon.tsx
│ │ │ ├── TrashIcon.tsx
│ │ │ ├── TrendingDownIcon.tsx
│ │ │ ├── TrendingLevelIcon.tsx
│ │ │ ├── TrendingUpIcon.tsx
│ │ │ ├── TxtIcon.tsx
│ │ │ ├── UnknownFileIcon.tsx
│ │ │ ├── UnlinkIcon.tsx
│ │ │ ├── UserIcon.tsx
│ │ │ ├── WarningIcon.tsx
│ │ │ └── XlsIcon.tsx
│ │ ├── IconProvider.tsx
│ │ ├── IconRegistryContext.tsx
│ │ ├── IFrame
│ │ │ ├── IFrame.md
│ │ │ ├── IFrame.module.scss
│ │ │ ├── IFrame.spec.ts
│ │ │ ├── IFrame.tsx
│ │ │ └── IFrameNative.tsx
│ │ ├── Image
│ │ │ ├── Image.md
│ │ │ ├── Image.module.scss
│ │ │ ├── Image.spec.ts
│ │ │ ├── Image.tsx
│ │ │ └── ImageNative.tsx
│ │ ├── Input
│ │ │ ├── index.ts
│ │ │ ├── InputAdornment.module.scss
│ │ │ ├── InputAdornment.tsx
│ │ │ ├── InputDivider.module.scss
│ │ │ ├── InputDivider.tsx
│ │ │ ├── InputLabel.module.scss
│ │ │ ├── InputLabel.tsx
│ │ │ ├── PartialInput.module.scss
│ │ │ └── PartialInput.tsx
│ │ ├── InspectButton
│ │ │ ├── InspectButton.module.scss
│ │ │ └── InspectButton.tsx
│ │ ├── Items
│ │ │ ├── Items.md
│ │ │ ├── Items.spec.ts
│ │ │ ├── Items.tsx
│ │ │ └── ItemsNative.tsx
│ │ ├── Link
│ │ │ ├── Link.md
│ │ │ ├── Link.module.scss
│ │ │ ├── Link.spec.ts
│ │ │ ├── Link.tsx
│ │ │ └── LinkNative.tsx
│ │ ├── List
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── List.md
│ │ │ ├── List.module.scss
│ │ │ ├── List.spec.ts
│ │ │ ├── List.tsx
│ │ │ └── ListNative.tsx
│ │ ├── Logo
│ │ │ ├── doc-resources
│ │ │ │ └── xmlui-logo.svg
│ │ │ ├── Logo.md
│ │ │ ├── Logo.tsx
│ │ │ └── LogoNative.tsx
│ │ ├── Markdown
│ │ │ ├── CodeText.module.scss
│ │ │ ├── CodeText.tsx
│ │ │ ├── Markdown.md
│ │ │ ├── Markdown.module.scss
│ │ │ ├── Markdown.spec.ts
│ │ │ ├── Markdown.tsx
│ │ │ ├── MarkdownNative.tsx
│ │ │ ├── parse-binding-expr.ts
│ │ │ └── utils.ts
│ │ ├── metadata-helpers.ts
│ │ ├── ModalDialog
│ │ │ ├── ConfirmationModalContextProvider.tsx
│ │ │ ├── Dialog.module.scss
│ │ │ ├── Dialog.tsx
│ │ │ ├── ModalDialog.md
│ │ │ ├── ModalDialog.module.scss
│ │ │ ├── ModalDialog.spec.ts
│ │ │ ├── ModalDialog.tsx
│ │ │ ├── ModalDialogNative.tsx
│ │ │ └── ModalVisibilityContext.tsx
│ │ ├── NavGroup
│ │ │ ├── NavGroup.md
│ │ │ ├── NavGroup.module.scss
│ │ │ ├── NavGroup.spec.ts
│ │ │ ├── NavGroup.tsx
│ │ │ ├── NavGroupContext.ts
│ │ │ └── NavGroupNative.tsx
│ │ ├── NavLink
│ │ │ ├── NavLink.md
│ │ │ ├── NavLink.module.scss
│ │ │ ├── NavLink.spec.ts
│ │ │ ├── NavLink.tsx
│ │ │ └── NavLinkNative.tsx
│ │ ├── NavPanel
│ │ │ ├── NavPanel.md
│ │ │ ├── NavPanel.module.scss
│ │ │ ├── NavPanel.spec.ts
│ │ │ ├── NavPanel.tsx
│ │ │ └── NavPanelNative.tsx
│ │ ├── NestedApp
│ │ │ ├── AppWithCodeView.module.scss
│ │ │ ├── AppWithCodeView.tsx
│ │ │ ├── AppWithCodeViewNative.tsx
│ │ │ ├── defaultProps.tsx
│ │ │ ├── logo.svg
│ │ │ ├── NestedApp.module.scss
│ │ │ ├── NestedApp.tsx
│ │ │ ├── NestedAppNative.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── NoResult
│ │ │ ├── NoResult.md
│ │ │ ├── NoResult.module.scss
│ │ │ ├── NoResult.spec.ts
│ │ │ ├── NoResult.tsx
│ │ │ └── NoResultNative.tsx
│ │ ├── NumberBox
│ │ │ ├── numberbox-abstractions.ts
│ │ │ ├── NumberBox.md
│ │ │ ├── NumberBox.module.scss
│ │ │ ├── NumberBox.spec.ts
│ │ │ ├── NumberBox.tsx
│ │ │ └── NumberBoxNative.tsx
│ │ ├── Option
│ │ │ ├── Option.md
│ │ │ ├── Option.spec.ts
│ │ │ ├── Option.tsx
│ │ │ ├── OptionNative.tsx
│ │ │ └── OptionTypeProvider.tsx
│ │ ├── PageMetaTitle
│ │ │ ├── PageMetaTilteNative.tsx
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── PageMetaTitle.spec.ts
│ │ │ └── PageMetaTitle.tsx
│ │ ├── Pages
│ │ │ ├── Page.md
│ │ │ ├── Pages.md
│ │ │ ├── Pages.module.scss
│ │ │ ├── Pages.tsx
│ │ │ └── PagesNative.tsx
│ │ ├── Pagination
│ │ │ ├── Pagination.md
│ │ │ ├── Pagination.module.scss
│ │ │ ├── Pagination.spec.ts
│ │ │ ├── Pagination.tsx
│ │ │ └── PaginationNative.tsx
│ │ ├── PositionedContainer
│ │ │ ├── PositionedContainer.module.scss
│ │ │ ├── PositionedContainer.tsx
│ │ │ └── PositionedContainerNative.tsx
│ │ ├── ProfileMenu
│ │ │ ├── ProfileMenu.module.scss
│ │ │ └── ProfileMenu.tsx
│ │ ├── ProgressBar
│ │ │ ├── ProgressBar.md
│ │ │ ├── ProgressBar.module.scss
│ │ │ ├── ProgressBar.spec.ts
│ │ │ ├── ProgressBar.tsx
│ │ │ └── ProgressBarNative.tsx
│ │ ├── Queue
│ │ │ ├── Queue.md
│ │ │ ├── Queue.spec.ts
│ │ │ ├── Queue.tsx
│ │ │ ├── queueActions.ts
│ │ │ └── QueueNative.tsx
│ │ ├── RadioGroup
│ │ │ ├── RadioGroup.md
│ │ │ ├── RadioGroup.module.scss
│ │ │ ├── RadioGroup.spec.ts
│ │ │ ├── RadioGroup.tsx
│ │ │ ├── RadioGroupNative.tsx
│ │ │ ├── RadioItem.tsx
│ │ │ └── RadioItemNative.tsx
│ │ ├── RealTimeAdapter
│ │ │ ├── RealTimeAdapter.tsx
│ │ │ └── RealTimeAdapterNative.tsx
│ │ ├── Redirect
│ │ │ ├── Redirect.md
│ │ │ ├── Redirect.spec.ts
│ │ │ └── Redirect.tsx
│ │ ├── ResponsiveBar
│ │ │ ├── README.md
│ │ │ ├── ResponsiveBar.md
│ │ │ ├── ResponsiveBar.module.scss
│ │ │ ├── ResponsiveBar.spec.ts
│ │ │ ├── ResponsiveBar.tsx
│ │ │ └── ResponsiveBarNative.tsx
│ │ ├── Select
│ │ │ ├── HiddenOption.tsx
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ └── SelectNative.tsx
│ │ ├── SelectionStore
│ │ │ ├── SelectionStore.md
│ │ │ ├── SelectionStore.tsx
│ │ │ └── SelectionStoreNative.tsx
│ │ ├── Slider
│ │ │ ├── Slider.md
│ │ │ ├── Slider.module.scss
│ │ │ ├── Slider.spec.ts
│ │ │ ├── Slider.tsx
│ │ │ └── SliderNative.tsx
│ │ ├── Slot
│ │ │ ├── Slot.md
│ │ │ ├── Slot.spec.ts
│ │ │ └── Slot.ts
│ │ ├── SlotItem.tsx
│ │ ├── SpaceFiller
│ │ │ ├── SpaceFiller.md
│ │ │ ├── SpaceFiller.module.scss
│ │ │ ├── SpaceFiller.spec.ts
│ │ │ ├── SpaceFiller.tsx
│ │ │ └── SpaceFillerNative.tsx
│ │ ├── Spinner
│ │ │ ├── Spinner.md
│ │ │ ├── Spinner.module.scss
│ │ │ ├── Spinner.spec.ts
│ │ │ ├── Spinner.tsx
│ │ │ └── SpinnerNative.tsx
│ │ ├── Splitter
│ │ │ ├── HSplitter.md
│ │ │ ├── HSplitter.spec.ts
│ │ │ ├── Splitter.md
│ │ │ ├── Splitter.module.scss
│ │ │ ├── Splitter.spec.ts
│ │ │ ├── Splitter.tsx
│ │ │ ├── SplitterNative.tsx
│ │ │ ├── utils.ts
│ │ │ ├── VSplitter.md
│ │ │ └── VSplitter.spec.ts
│ │ ├── Stack
│ │ │ ├── CHStack.md
│ │ │ ├── CHStack.spec.ts
│ │ │ ├── CVStack.md
│ │ │ ├── CVStack.spec.ts
│ │ │ ├── HStack.md
│ │ │ ├── HStack.spec.ts
│ │ │ ├── Stack.md
│ │ │ ├── Stack.module.scss
│ │ │ ├── Stack.spec.ts
│ │ │ ├── Stack.tsx
│ │ │ ├── StackNative.tsx
│ │ │ ├── VStack.md
│ │ │ └── VStack.spec.ts
│ │ ├── StickyBox
│ │ │ ├── StickyBox.md
│ │ │ ├── StickyBox.module.scss
│ │ │ ├── StickyBox.tsx
│ │ │ └── StickyBoxNative.tsx
│ │ ├── Switch
│ │ │ ├── Switch.md
│ │ │ ├── Switch.spec.ts
│ │ │ └── Switch.tsx
│ │ ├── Table
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── react-table-config.d.ts
│ │ │ ├── Table.md
│ │ │ ├── Table.module.scss
│ │ │ ├── Table.spec.ts
│ │ │ ├── Table.tsx
│ │ │ ├── TableNative.tsx
│ │ │ └── useRowSelection.tsx
│ │ ├── TableOfContents
│ │ │ ├── TableOfContents.module.scss
│ │ │ ├── TableOfContents.spec.ts
│ │ │ ├── TableOfContents.tsx
│ │ │ └── TableOfContentsNative.tsx
│ │ ├── Tabs
│ │ │ ├── TabContext.tsx
│ │ │ ├── TabItem.md
│ │ │ ├── TabItem.tsx
│ │ │ ├── TabItemNative.tsx
│ │ │ ├── Tabs.md
│ │ │ ├── Tabs.module.scss
│ │ │ ├── Tabs.spec.ts
│ │ │ ├── Tabs.tsx
│ │ │ └── TabsNative.tsx
│ │ ├── Text
│ │ │ ├── Text.md
│ │ │ ├── Text.module.scss
│ │ │ ├── Text.spec.ts
│ │ │ ├── Text.tsx
│ │ │ └── TextNative.tsx
│ │ ├── TextArea
│ │ │ ├── TextArea.md
│ │ │ ├── TextArea.module.scss
│ │ │ ├── TextArea.spec.ts
│ │ │ ├── TextArea.tsx
│ │ │ ├── TextAreaNative.tsx
│ │ │ ├── TextAreaResizable.tsx
│ │ │ └── useComposedRef.ts
│ │ ├── TextBox
│ │ │ ├── TextBox.md
│ │ │ ├── TextBox.module.scss
│ │ │ ├── TextBox.spec.ts
│ │ │ ├── TextBox.tsx
│ │ │ └── TextBoxNative.tsx
│ │ ├── Theme
│ │ │ ├── NotificationToast.tsx
│ │ │ ├── Theme.md
│ │ │ ├── Theme.module.scss
│ │ │ ├── Theme.spec.ts
│ │ │ ├── Theme.tsx
│ │ │ └── ThemeNative.tsx
│ │ ├── TimeInput
│ │ │ ├── TimeInput.md
│ │ │ ├── TimeInput.module.scss
│ │ │ ├── TimeInput.spec.ts
│ │ │ ├── TimeInput.tsx
│ │ │ ├── TimeInputNative.tsx
│ │ │ └── utils.ts
│ │ ├── Timer
│ │ │ ├── Timer.md
│ │ │ ├── Timer.spec.ts
│ │ │ ├── Timer.tsx
│ │ │ └── TimerNative.tsx
│ │ ├── Toggle
│ │ │ ├── Toggle.module.scss
│ │ │ └── Toggle.tsx
│ │ ├── ToneChangerButton
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneChangerButton.spec.ts
│ │ │ └── ToneChangerButton.tsx
│ │ ├── ToneSwitch
│ │ │ ├── ToneSwitch.md
│ │ │ ├── ToneSwitch.module.scss
│ │ │ ├── ToneSwitch.spec.ts
│ │ │ ├── ToneSwitch.tsx
│ │ │ └── ToneSwitchNative.tsx
│ │ ├── Tooltip
│ │ │ ├── Tooltip.md
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.spec.ts
│ │ │ ├── Tooltip.tsx
│ │ │ └── TooltipNative.tsx
│ │ ├── Tree
│ │ │ ├── testData.ts
│ │ │ ├── Tree-dynamic.spec.ts
│ │ │ ├── Tree-icons.spec.ts
│ │ │ ├── Tree.md
│ │ │ ├── Tree.spec.ts
│ │ │ ├── TreeComponent.module.scss
│ │ │ ├── TreeComponent.tsx
│ │ │ └── TreeNative.tsx
│ │ ├── TreeDisplay
│ │ │ ├── TreeDisplay.md
│ │ │ ├── TreeDisplay.module.scss
│ │ │ ├── TreeDisplay.tsx
│ │ │ └── TreeDisplayNative.tsx
│ │ ├── ValidationSummary
│ │ │ ├── ValidationSummary.module.scss
│ │ │ └── ValidationSummary.tsx
│ │ └── VisuallyHidden.tsx
│ ├── components-core
│ │ ├── abstractions
│ │ │ ├── ComponentRenderer.ts
│ │ │ ├── LoaderRenderer.ts
│ │ │ ├── standalone.ts
│ │ │ └── treeAbstractions.ts
│ │ ├── action
│ │ │ ├── actions.ts
│ │ │ ├── APICall.tsx
│ │ │ ├── FileDownloadAction.tsx
│ │ │ ├── FileUploadAction.tsx
│ │ │ ├── NavigateAction.tsx
│ │ │ └── TimedAction.tsx
│ │ ├── ApiBoundComponent.tsx
│ │ ├── appContext
│ │ │ ├── date-functions.ts
│ │ │ ├── math-function.ts
│ │ │ └── misc-utils.ts
│ │ ├── AppContext.tsx
│ │ ├── behaviors
│ │ │ ├── Behavior.tsx
│ │ │ └── CoreBehaviors.tsx
│ │ ├── component-hooks.ts
│ │ ├── ComponentDecorator.tsx
│ │ ├── ComponentViewer.tsx
│ │ ├── CompoundComponent.tsx
│ │ ├── constants.ts
│ │ ├── DebugViewProvider.tsx
│ │ ├── descriptorHelper.ts
│ │ ├── devtools
│ │ │ ├── InspectorDialog.module.scss
│ │ │ ├── InspectorDialog.tsx
│ │ │ └── InspectorDialogVisibilityContext.tsx
│ │ ├── EngineError.ts
│ │ ├── event-handlers.ts
│ │ ├── InspectorButton.module.scss
│ │ ├── InspectorContext.tsx
│ │ ├── interception
│ │ │ ├── abstractions.ts
│ │ │ ├── ApiInterceptor.ts
│ │ │ ├── ApiInterceptorProvider.tsx
│ │ │ ├── apiInterceptorWorker.ts
│ │ │ ├── Backend.ts
│ │ │ ├── Errors.ts
│ │ │ ├── IndexedDb.ts
│ │ │ ├── initMock.ts
│ │ │ ├── InMemoryDb.ts
│ │ │ ├── ReadonlyCollection.ts
│ │ │ └── useApiInterceptorContext.tsx
│ │ ├── loader
│ │ │ ├── ApiLoader.tsx
│ │ │ ├── DataLoader.tsx
│ │ │ ├── ExternalDataLoader.tsx
│ │ │ ├── Loader.tsx
│ │ │ ├── MockLoaderRenderer.tsx
│ │ │ └── PageableLoader.tsx
│ │ ├── LoaderComponent.tsx
│ │ ├── markup-check.ts
│ │ ├── parts.ts
│ │ ├── renderers.ts
│ │ ├── rendering
│ │ │ ├── AppContent.tsx
│ │ │ ├── AppRoot.tsx
│ │ │ ├── AppWrapper.tsx
│ │ │ ├── buildProxy.ts
│ │ │ ├── collectFnVarDeps.ts
│ │ │ ├── ComponentAdapter.tsx
│ │ │ ├── ComponentWrapper.tsx
│ │ │ ├── Container.tsx
│ │ │ ├── containers.ts
│ │ │ ├── ContainerWrapper.tsx
│ │ │ ├── ErrorBoundary.module.scss
│ │ │ ├── ErrorBoundary.tsx
│ │ │ ├── InvalidComponent.module.scss
│ │ │ ├── InvalidComponent.tsx
│ │ │ ├── nodeUtils.ts
│ │ │ ├── reducer.ts
│ │ │ ├── renderChild.tsx
│ │ │ ├── StandaloneComponent.tsx
│ │ │ ├── StateContainer.tsx
│ │ │ ├── UnknownComponent.module.scss
│ │ │ ├── UnknownComponent.tsx
│ │ │ └── valueExtractor.ts
│ │ ├── reportEngineError.ts
│ │ ├── RestApiProxy.ts
│ │ ├── script-runner
│ │ │ ├── asyncProxy.ts
│ │ │ ├── AttributeValueParser.ts
│ │ │ ├── bannedFunctions.ts
│ │ │ ├── BindingTreeEvaluationContext.ts
│ │ │ ├── eval-tree-async.ts
│ │ │ ├── eval-tree-common.ts
│ │ │ ├── eval-tree-sync.ts
│ │ │ ├── ParameterParser.ts
│ │ │ ├── process-statement-async.ts
│ │ │ ├── process-statement-common.ts
│ │ │ ├── process-statement-sync.ts
│ │ │ ├── ScriptingSourceTree.ts
│ │ │ ├── simplify-expression.ts
│ │ │ ├── statement-queue.ts
│ │ │ └── visitors.ts
│ │ ├── StandaloneApp.tsx
│ │ ├── StandaloneExtensionManager.ts
│ │ ├── TableOfContentsContext.tsx
│ │ ├── theming
│ │ │ ├── _themes.scss
│ │ │ ├── component-layout-resolver.ts
│ │ │ ├── extendThemeUtils.ts
│ │ │ ├── hvar.ts
│ │ │ ├── layout-resolver.ts
│ │ │ ├── parse-layout-props.ts
│ │ │ ├── StyleContext.tsx
│ │ │ ├── StyleRegistry.ts
│ │ │ ├── ThemeContext.tsx
│ │ │ ├── ThemeProvider.tsx
│ │ │ ├── themes
│ │ │ │ ├── base-utils.ts
│ │ │ │ ├── palette.ts
│ │ │ │ ├── root.ts
│ │ │ │ ├── solid.ts
│ │ │ │ ├── theme-colors.ts
│ │ │ │ └── xmlui.ts
│ │ │ ├── themeVars.module.scss
│ │ │ ├── themeVars.ts
│ │ │ ├── transformThemeVars.ts
│ │ │ └── utils.ts
│ │ ├── utils
│ │ │ ├── actionUtils.ts
│ │ │ ├── audio-utils.ts
│ │ │ ├── base64-utils.ts
│ │ │ ├── compound-utils.ts
│ │ │ ├── css-utils.ts
│ │ │ ├── DataLoaderQueryKeyGenerator.ts
│ │ │ ├── date-utils.ts
│ │ │ ├── extractParam.ts
│ │ │ ├── hooks.tsx
│ │ │ ├── LruCache.ts
│ │ │ ├── mergeProps.ts
│ │ │ ├── misc.ts
│ │ │ ├── request-params.ts
│ │ │ ├── statementUtils.ts
│ │ │ └── treeUtils.ts
│ │ └── xmlui-parser.ts
│ ├── index-standalone.ts
│ ├── index.scss
│ ├── index.ts
│ ├── language-server
│ │ ├── server-common.ts
│ │ ├── server-web-worker.ts
│ │ ├── server.ts
│ │ ├── services
│ │ │ ├── common
│ │ │ │ ├── docs-generation.ts
│ │ │ │ ├── lsp-utils.ts
│ │ │ │ ├── metadata-utils.ts
│ │ │ │ └── syntax-node-utilities.ts
│ │ │ ├── completion.ts
│ │ │ ├── diagnostic.ts
│ │ │ ├── format.ts
│ │ │ └── hover.ts
│ │ └── xmlui-metadata-generated.js
│ ├── logging
│ │ ├── LoggerContext.tsx
│ │ ├── LoggerInitializer.tsx
│ │ ├── LoggerService.ts
│ │ └── xmlui.ts
│ ├── logo.svg
│ ├── parsers
│ │ ├── common
│ │ │ ├── GenericToken.ts
│ │ │ ├── InputStream.ts
│ │ │ └── utils.ts
│ │ ├── scripting
│ │ │ ├── code-behind-collect.ts
│ │ │ ├── Lexer.ts
│ │ │ ├── modules.ts
│ │ │ ├── Parser.ts
│ │ │ ├── ParserError.ts
│ │ │ ├── ScriptingNodeTypes.ts
│ │ │ ├── TokenTrait.ts
│ │ │ ├── TokenType.ts
│ │ │ └── tree-visitor.ts
│ │ ├── style-parser
│ │ │ ├── errors.ts
│ │ │ ├── source-tree.ts
│ │ │ ├── StyleInputStream.ts
│ │ │ ├── StyleLexer.ts
│ │ │ ├── StyleParser.ts
│ │ │ └── tokens.ts
│ │ └── xmlui-parser
│ │ ├── CharacterCodes.ts
│ │ ├── diagnostics.ts
│ │ ├── fileExtensions.ts
│ │ ├── index.ts
│ │ ├── lint.ts
│ │ ├── parser.ts
│ │ ├── ParserError.ts
│ │ ├── scanner.ts
│ │ ├── syntax-kind.ts
│ │ ├── syntax-node.ts
│ │ ├── transform.ts
│ │ ├── utils.ts
│ │ ├── xmlui-serializer.ts
│ │ └── xmlui-tree.ts
│ ├── react-app-env.d.ts
│ ├── syntax
│ │ ├── monaco
│ │ │ ├── grammar.monacoLanguage.ts
│ │ │ ├── index.ts
│ │ │ ├── xmlui-dark.ts
│ │ │ ├── xmlui-light.ts
│ │ │ └── xmluiscript.monacoLanguage.ts
│ │ └── textMate
│ │ ├── index.ts
│ │ ├── xmlui-dark.json
│ │ ├── xmlui-light.json
│ │ ├── xmlui.json
│ │ └── xmlui.tmLanguage.json
│ ├── testing
│ │ ├── assertions.ts
│ │ ├── component-test-helpers.ts
│ │ ├── ComponentDrivers.ts
│ │ ├── drivers
│ │ │ ├── DateInputDriver.ts
│ │ │ ├── index.ts
│ │ │ ├── ModalDialogDriver.ts
│ │ │ ├── NumberBoxDriver.ts
│ │ │ ├── TextBoxDriver.ts
│ │ │ ├── TimeInputDriver.ts
│ │ │ ├── TimerDriver.ts
│ │ │ └── TreeDriver.ts
│ │ ├── fixtures.ts
│ │ ├── index.ts
│ │ ├── infrastructure
│ │ │ ├── index.html
│ │ │ ├── main.tsx
│ │ │ ├── public
│ │ │ │ ├── mockServiceWorker.js
│ │ │ │ ├── resources
│ │ │ │ │ ├── bell.svg
│ │ │ │ │ ├── box.svg
│ │ │ │ │ ├── doc.svg
│ │ │ │ │ ├── eye.svg
│ │ │ │ │ ├── flower-640x480.jpg
│ │ │ │ │ ├── sun.svg
│ │ │ │ │ ├── test-image-100x100.jpg
│ │ │ │ │ └── txt.svg
│ │ │ │ └── serve.json
│ │ │ └── TestBed.tsx
│ │ └── themed-app-test-helpers.ts
│ └── vite-env.d.ts
├── tests
│ ├── components
│ │ ├── CodeBlock
│ │ │ └── hightlight-code.test.ts
│ │ ├── playground-pattern.test.ts
│ │ └── Tree
│ │ └── Tree-states.test.ts
│ ├── components-core
│ │ ├── abstractions
│ │ │ └── treeAbstractions.test.ts
│ │ ├── container
│ │ │ └── buildProxy.test.ts
│ │ ├── interception
│ │ │ ├── orderBy.test.ts
│ │ │ ├── ReadOnlyCollection.test.ts
│ │ │ └── request-param-converter.test.ts
│ │ ├── scripts-runner
│ │ │ ├── AttributeValueParser.test.ts
│ │ │ ├── eval-tree-arrow-async.test.ts
│ │ │ ├── eval-tree-arrow.test.ts
│ │ │ ├── eval-tree-func-decl-async.test.ts
│ │ │ ├── eval-tree-func-decl.test.ts
│ │ │ ├── eval-tree-pre-post.test.ts
│ │ │ ├── eval-tree-regression.test.ts
│ │ │ ├── eval-tree.test.ts
│ │ │ ├── function-proxy.test.ts
│ │ │ ├── parser-regression.test.ts
│ │ │ ├── process-event.test.ts
│ │ │ ├── process-function.test.ts
│ │ │ ├── process-implicit-context.test.ts
│ │ │ ├── process-statement-asgn.test.ts
│ │ │ ├── process-statement-destruct.test.ts
│ │ │ ├── process-statement-regs.test.ts
│ │ │ ├── process-statement-sync.test.ts
│ │ │ ├── process-statement.test.ts
│ │ │ ├── process-switch-sync.test.ts
│ │ │ ├── process-switch.test.ts
│ │ │ ├── process-try-sync.test.ts
│ │ │ ├── process-try.test.ts
│ │ │ └── test-helpers.ts
│ │ ├── test-metadata-handler.ts
│ │ ├── theming
│ │ │ ├── border-segments.test.ts
│ │ │ ├── component-layout.resolver.test.ts
│ │ │ ├── layout-property-parser.test.ts
│ │ │ ├── layout-resolver.test.ts
│ │ │ ├── layout-resolver2.test.ts
│ │ │ ├── layout-vp-override.test.ts
│ │ │ └── padding-segments.test.ts
│ │ └── utils
│ │ ├── date-utils.test.ts
│ │ ├── format-human-elapsed-time.test.ts
│ │ └── LruCache.test.ts
│ ├── language-server
│ │ ├── completion.test.ts
│ │ ├── format.test.ts
│ │ ├── hover.test.ts
│ │ └── mockData.ts
│ └── parsers
│ ├── common
│ │ └── input-stream.test.ts
│ ├── markdown
│ │ └── parse-binding-expression.test.ts
│ ├── parameter-parser.test.ts
│ ├── paremeter-parser.test.ts
│ ├── scripting
│ │ ├── eval-tree-arrow.test.ts
│ │ ├── eval-tree-pre-post.test.ts
│ │ ├── eval-tree.test.ts
│ │ ├── function-proxy.test.ts
│ │ ├── lexer-literals.test.ts
│ │ ├── lexer-misc.test.ts
│ │ ├── module-parse.test.ts
│ │ ├── parser-arrow.test.ts
│ │ ├── parser-assignments.test.ts
│ │ ├── parser-binary.test.ts
│ │ ├── parser-destructuring.test.ts
│ │ ├── parser-errors.test.ts
│ │ ├── parser-expressions.test.ts
│ │ ├── parser-function.test.ts
│ │ ├── parser-literals.test.ts
│ │ ├── parser-primary.test.ts
│ │ ├── parser-regex.test.ts
│ │ ├── parser-statements.test.ts
│ │ ├── parser-unary.test.ts
│ │ ├── process-event.test.ts
│ │ ├── process-implicit-context.test.ts
│ │ ├── process-statement-asgn.test.ts
│ │ ├── process-statement-destruct.test.ts
│ │ ├── process-statement-regs.test.ts
│ │ ├── process-statement-sync.test.ts
│ │ ├── process-statement.test.ts
│ │ ├── process-switch-sync.test.ts
│ │ ├── process-switch.test.ts
│ │ ├── process-try-sync.test.ts
│ │ ├── process-try.test.ts
│ │ ├── simplify-expression.test.ts
│ │ ├── statement-hooks.test.ts
│ │ └── test-helpers.ts
│ ├── style-parser
│ │ ├── generateHvarChain.test.ts
│ │ ├── parseHVar.test.ts
│ │ ├── parser.test.ts
│ │ └── tokens.test.ts
│ └── xmlui
│ ├── lint.test.ts
│ ├── parser.test.ts
│ ├── scanner.test.ts
│ ├── transform.attr.test.ts
│ ├── transform.circular.test.ts
│ ├── transform.element.test.ts
│ ├── transform.errors.test.ts
│ ├── transform.escape.test.ts
│ ├── transform.regression.test.ts
│ ├── transform.script.test.ts
│ ├── transform.test.ts
│ └── xmlui.ts
├── tests-e2e
│ ├── api-bound-component-regression.spec.ts
│ ├── api-call-as-extracted-component.spec.ts
│ ├── assign-to-object-or-array-regression.spec.ts
│ ├── binding-regression.spec.ts
│ ├── children-as-template-context-vars.spec.ts
│ ├── compound-component.spec.ts
│ ├── context-vars-regression.spec.ts
│ ├── data-bindings.spec.ts
│ ├── datasource-and-api-usage-in-var.spec.ts
│ ├── datasource-direct-binding.spec.ts
│ ├── datasource-onLoaded-regression.spec.ts
│ ├── modify-array-item-regression.spec.ts
│ ├── namespaces.spec.ts
│ ├── push-to-array-regression.spec.ts
│ ├── screen-breakpoints.spec.ts
│ ├── scripting.spec.ts
│ ├── state-scope-in-pages.spec.ts
│ └── state-var-scopes.spec.ts
├── tsconfig.json
├── tsdown.config.ts
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/xmlui/src/components/TableOfContents/TableOfContents.module.scss:
--------------------------------------------------------------------------------
```scss
1 | @use "../../components-core/theming/themes" as t;
2 |
3 | $themeVars: ();
4 | @function createThemeVar($componentVariable) {
5 | $themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
6 | @return t.getThemeVar($themeVars, $componentVariable);
7 | }
8 |
9 | $component: "TableOfContents";
10 | $backgroundColor-TableOfContents: createThemeVar("backgroundColor-#{$component}");
11 | $width-TableOfContents: createThemeVar("width-#{$component}");
12 | $height-TableOfContents: createThemeVar("height-#{$component}");
13 | $themeVars: t.composeBorderVars($themeVars, $component);
14 | $themeVars: t.composePaddingVars($themeVars, $component);
15 |
16 | $componentItem: "TableOfContentsItem";
17 | $themeVars: t.composeTextVars($themeVars, $componentItem);
18 | $themeVars: t.composeBorderVars($themeVars, $componentItem);
19 | $themeVars: t.composeBorderVars($themeVars, "#{$componentItem}--hover");
20 | $themeVars: t.composeBorderVars($themeVars, "#{$componentItem}--active");
21 | $themeVars: t.composePaddingVars($themeVars, $componentItem);
22 | $themeVars: t.composePaddingVars($themeVars, "#{$componentItem}-level-1");
23 | $themeVars: t.composeTextVars($themeVars, "#{$componentItem}-level-1");
24 | $themeVars: t.composePaddingVars($themeVars, "#{$componentItem}-level-2");
25 | $themeVars: t.composeTextVars($themeVars, "#{$componentItem}-level-2");
26 | $themeVars: t.composePaddingVars($themeVars, "#{$componentItem}-level-3");
27 | $themeVars: t.composeTextVars($themeVars, "#{$componentItem}-level-3");
28 | $themeVars: t.composePaddingVars($themeVars, "#{$componentItem}-level-4");
29 | $themeVars: t.composeTextVars($themeVars, "#{$componentItem}-level-4");
30 | $themeVars: t.composePaddingVars($themeVars, "#{$componentItem}-level-5");
31 | $themeVars: t.composeTextVars($themeVars, "#{$componentItem}-level-5");
32 | $themeVars: t.composePaddingVars($themeVars, "#{$componentItem}-level-6");
33 | $themeVars: t.composeTextVars($themeVars, "#{$componentItem}-level-6");
34 |
35 | // Variables for @layer section
36 | $marginTop-TableOfContents: createThemeVar("marginTop-#{$component}");
37 | $marginBottom-TableOfContents: createThemeVar("marginBottom-#{$component}");
38 | $textColor-TableOfContentsItem: createThemeVar("textColor-#{$componentItem}");
39 | $backgroundColor-TableOfContentsItem--hover: createThemeVar("backgroundColor-#{$componentItem}--hover");
40 | $fontWeight-TableOfContentsItem--hover: createThemeVar("fontWeight-#{$componentItem}--hover");
41 | $textColor-TableOfContentsItem--hover: createThemeVar("textColor-#{$componentItem}--hover");
42 | $fontWeight-TableOfContentsItem-level-1--hover: createThemeVar("fontWeight-#{$componentItem}-level-1--hover");
43 | $fontWeight-TableOfContentsItem-level-2--hover: createThemeVar("fontWeight-#{$componentItem}-level-2--hover");
44 | $fontWeight-TableOfContentsItem-level-3--hover: createThemeVar("fontWeight-#{$componentItem}-level-3--hover");
45 | $fontWeight-TableOfContentsItem-level-4--hover: createThemeVar("fontWeight-#{$componentItem}-level-4--hover");
46 | $fontWeight-TableOfContentsItem-level-5--hover: createThemeVar("fontWeight-#{$componentItem}-level-5--hover");
47 | $fontWeight-TableOfContentsItem-level-6--hover: createThemeVar("fontWeight-#{$componentItem}-level-6--hover");
48 | $backgroundColor-TableOfContentsItem--active: createThemeVar("backgroundColor-#{$componentItem}--active");
49 | $textColor-TableOfContentsItem--active: createThemeVar("textColor-#{$componentItem}--active");
50 | $fontWeight-TableOfContentsItem--active: createThemeVar("fontWeight-#{$componentItem}--active");
51 | $fontWeight-TableOfContentsItem-level-1--active: createThemeVar("fontWeight-#{$componentItem}-level-1--active");
52 | $fontWeight-TableOfContentsItem-level-2--active: createThemeVar("fontWeight-#{$componentItem}-level-2--active");
53 | $fontWeight-TableOfContentsItem-level-3--active: createThemeVar("fontWeight-#{$componentItem}-level-3--active");
54 | $fontWeight-TableOfContentsItem-level-4--active: createThemeVar("fontWeight-#{$componentItem}-level-4--active");
55 | $fontWeight-TableOfContentsItem-level-5--active: createThemeVar("fontWeight-#{$componentItem}-level-5--active");
56 | $fontWeight-TableOfContentsItem-level-6--active: createThemeVar("fontWeight-#{$componentItem}-level-6--active");
57 |
58 | @layer components {
59 | .nav {
60 | border-width: createThemeVar("borderWidth-#{$component}");
61 | border-color: createThemeVar("borderColor-#{$component}");
62 | border-style: createThemeVar("borderStyle-#{$component}");
63 | @include t.borderVars($themeVars, $component);
64 | @include t.paddingVars($themeVars, $component);
65 | background-color: $backgroundColor-TableOfContents;
66 | min-width: 250px;
67 | align-self: flex-start;
68 | width: $width-TableOfContents;
69 | height: $height-TableOfContents;
70 | max-height: calc(100vh - var(--header-abs-height) - var(--footer-abs-height));
71 | overflow-y: auto;
72 | overflow-x: hidden;
73 | z-index: 99;
74 | top: var(--header-height);
75 | position: sticky;
76 | scrollbar-width: thin;
77 | // --- Do not collapse these padding properties; they are intentionally expanded
78 | margin-top: $marginTop-TableOfContents;
79 | margin-bottom: $marginBottom-TableOfContents;
80 |
81 | .list {
82 | margin: 0;
83 | padding: 0;
84 | list-style: none;
85 |
86 | .listItem {
87 | list-style-type: none;
88 | @include t.borderVars($themeVars, $componentItem);
89 |
90 | .link {
91 | display: block;
92 | overflow-wrap: break-word;
93 | color: $textColor-TableOfContentsItem;
94 | @include t.paddingVars($themeVars, $componentItem);
95 | @include t.textVars($themeVars, $componentItem);
96 |
97 | &.head_1 {
98 | @include t.paddingVars($themeVars, "#{$componentItem}-level-1");
99 | @include t.textVars($themeVars, "#{$componentItem}-level-1");
100 | }
101 |
102 | &.head_2 {
103 | @include t.paddingVars($themeVars, "#{$componentItem}-level-2");
104 | @include t.textVars($themeVars, "#{$componentItem}-level-2");
105 | }
106 |
107 | &.head_3 {
108 | @include t.paddingVars($themeVars, "#{$componentItem}-level-3");
109 | @include t.textVars($themeVars, "#{$componentItem}-level-3");
110 | }
111 |
112 | &.head_4 {
113 | @include t.paddingVars($themeVars, "#{$componentItem}-level-4");
114 | @include t.textVars($themeVars, "#{$componentItem}-level-4");
115 | }
116 |
117 | &.head_5 {
118 | @include t.paddingVars($themeVars, "#{$componentItem}-level-5");
119 | @include t.textVars($themeVars, "#{$componentItem}-level-5");
120 | }
121 |
122 | &.head_6 {
123 | @include t.paddingVars($themeVars, "#{$componentItem}-level-6");
124 | @include t.textVars($themeVars, "#{$componentItem}-level-6");
125 | }
126 | }
127 |
128 | &:hover {
129 | @include t.borderVars($themeVars, "#{$componentItem}--hover");
130 | background-color: $backgroundColor-TableOfContentsItem--hover;
131 |
132 | .link {
133 | font-weight: $fontWeight-TableOfContentsItem--hover;
134 | color: $textColor-TableOfContentsItem--hover;
135 |
136 | &.head_1 {
137 | font-weight: $fontWeight-TableOfContentsItem-level-1--hover;
138 | }
139 | &.head_2 {
140 | font-weight: $fontWeight-TableOfContentsItem-level-2--hover;
141 | }
142 | &.head_3 {
143 | font-weight: $fontWeight-TableOfContentsItem-level-3--hover;
144 | }
145 | &.head_4 {
146 | font-weight: $fontWeight-TableOfContentsItem-level-4--hover;
147 | }
148 | &.head_5 {
149 | font-weight: $fontWeight-TableOfContentsItem-level-5--hover;
150 | }
151 | &.head_6 {
152 | font-weight: $fontWeight-TableOfContentsItem-level-6--hover;
153 | }
154 | }
155 | }
156 |
157 | &.active {
158 | @include t.borderVars($themeVars, "#{$componentItem}--active");
159 | background-color: $backgroundColor-TableOfContentsItem--active;
160 |
161 | .link {
162 | color: $textColor-TableOfContentsItem--active;
163 | font-weight: $fontWeight-TableOfContentsItem--active;
164 |
165 | &.head_1 {
166 | font-weight: $fontWeight-TableOfContentsItem-level-1--active;
167 | }
168 | &.head_2 {
169 | font-weight: $fontWeight-TableOfContentsItem-level-2--active;
170 | }
171 | &.head_3 {
172 | font-weight: $fontWeight-TableOfContentsItem-level-3--active;
173 | }
174 | &.head_4 {
175 | font-weight: $fontWeight-TableOfContentsItem-level-4--active;
176 | }
177 | &.head_5 {
178 | font-weight: $fontWeight-TableOfContentsItem-level-5--active;
179 | }
180 | &.head_6 {
181 | font-weight: $fontWeight-TableOfContentsItem-level-6--active;
182 | }
183 | }
184 | }
185 | }
186 | }
187 | }
188 | }
189 |
190 | :export {
191 | themeVars: t.json-stringify($themeVars);
192 | }
193 |
```
--------------------------------------------------------------------------------
/docs/src/config.ts:
--------------------------------------------------------------------------------
```typescript
1 | import type { StandaloneAppDescription } from "xmlui";
2 | import { createHighlighterCoreSync, type DecorationItem } from "shiki";
3 | import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
4 | // @ts-ignore
5 | import js from "@shikijs/langs/javascript";
6 | // @ts-ignore
7 | import scss from "@shikijs/langs/scss";
8 | // @ts-ignore
9 | import css from "@shikijs/langs/css";
10 | // @ts-ignore
11 | import json from "@shikijs/langs/json";
12 |
13 | // @ts-ignore
14 | import html from "@shikijs/langs/html";
15 |
16 | import { xmluiGrammar, xmluiThemeLight, xmluiThemeDark } from "xmlui/syntax/textmate";
17 |
18 | import { unified } from "unified";
19 | import remarkParse from "remark-parse";
20 | import remarkStringify from "remark-stringify";
21 | import stripMarkdown from "strip-markdown";
22 |
23 | export function markdownToPlainText(markdown: string): string {
24 | const processor = unified()
25 | .use(remarkParse)
26 | .use(stripMarkdown, { keep: ["code"] })
27 | .use(remarkStringify);
28 |
29 | const file = processor.processSync(markdown);
30 |
31 | let cleanedText = String(file);
32 |
33 | // NEW: Remove admonition tags like [!WARNING] or \[!NOTE]
34 | // This looks for an optional backslash, then "[!", any word, and "]"
35 | cleanedText = cleanedText.replace(/\\?\[!\w+\]\s*/g, "");
36 | // 1. Remove the anchor-like tags, e.g., "\[#button]"
37 | cleanedText = cleanedText.replace(/\s*\\\[#.*?\]/g, "");
38 |
39 | // 2. Process each line individually to reformat tables
40 | const lines = cleanedText.split("\n");
41 | const reformattedLines = lines.map((line) => {
42 | const trimmedLine = line.trim();
43 |
44 | // Check if the line is a table separator like "| --- | --- |"
45 | if (trimmedLine.match(/^\|(?:\s*---\s*\|)+$/)) {
46 | return null; // Mark this line for removal
47 | }
48 | // Check if the line is a table row (starts and ends with '|')
49 | if (trimmedLine.startsWith("|") && trimmedLine.endsWith("|")) {
50 | // Remove leading/trailing pipes, then split into cells
51 | return trimmedLine
52 | .slice(1, -1)
53 | .split("|")
54 | .map((cell) => cell.trim()) // Trim whitespace from each cell
55 | .join(" - "); // Join cells with a more readable separator
56 | }
57 |
58 | // filter code block header/footers
59 | if (trimmedLine.startsWith("```") || trimmedLine.startsWith("---")) {
60 | return null;
61 | }
62 | // If it's not a table line, return it as is
63 | return line;
64 | });
65 |
66 | // 3. Filter out the removed separator lines and join back into a string
67 | cleanedText = reformattedLines.filter((line) => line !== null).join("\n");
68 |
69 | // 4. Consolidate multiple consecutive newlines into a maximum of two
70 | cleanedText = cleanedText.replace(/(\r\n|\n){3,}/g, "\n\n");
71 |
72 | // 5. Trim any leading or trailing whitespace from the final result
73 | return cleanedText.trim();
74 | }
75 |
76 | // @ts-ignore
77 | const contentRuntime: Record<string, any> = import.meta.glob(`/content/**/*.{md,mdx}`, {
78 | eager: true,
79 | query: "?raw",
80 | });
81 |
82 | // @ts-ignore
83 | const metaJsons: Record<string, MetaJson> = import.meta.glob(`/content/**/_meta.json`, {
84 | eager: true,
85 | });
86 |
87 | const content: Record<string, any> = {};
88 | const plainTextContent: Record<string, string> = {};
89 | const navPanelContent: any[] = [];
90 | Object.keys(contentRuntime).map((filePath) => {
91 | const urlFragment = filePath.substring("/content/".length).replace(".mdx", "").replace(".md", "");
92 | content[omitIndexFromPath(urlFragment)] = contentRuntime[filePath].default;
93 | plainTextContent[omitIndexFromPath(urlFragment)] = markdownToPlainText(
94 | contentRuntime[filePath].default,
95 | );
96 | navPanelContent.push(urlFragment);
97 | });
98 |
99 | const pagesRuntime: Record<string, any> = import.meta.glob(`/public/pages/**/*.md`, {
100 | eager: true,
101 | query: "?raw",
102 | });
103 |
104 | const prefetchedContent: Record<string, any> = {};
105 | Object.keys(pagesRuntime).map((filePath) => {
106 | const urlFragment = filePath.substring("/public".length);
107 | prefetchedContent[urlFragment] = pagesRuntime[filePath].default;
108 | });
109 |
110 | const shikiHighlighter = createHighlighterCoreSync({
111 | // @ts-ignore
112 | langs: [js, json, html, xmluiGrammar, css, scss],
113 | // @ts-ignore
114 | themes: [xmluiThemeLight, xmluiThemeDark],
115 | engine: createJavaScriptRegexEngine(),
116 | });
117 |
118 | function highlight(
119 | code: string,
120 | lang: string,
121 | meta?: Record<string, any>,
122 | themeTone: "dark" | "light" = "light",
123 | ) {
124 | if (!code) return "";
125 | if (!themeTone) themeTone = "light";
126 | if (!["dark", "light"].includes(themeTone)) {
127 | themeTone = "light";
128 | }
129 |
130 | const highlightedRows: DecorationItem[] =
131 | meta?.highlightRows?.map((row: DecorationItem) => {
132 | return {
133 | start: row.start,
134 | end: row.end,
135 | properties: row.properties,
136 | };
137 | }) ?? [];
138 |
139 | const highlightedSubstrings: DecorationItem[] =
140 | [...(meta?.highlightSubstringsEmphasized ?? []), ...(meta?.highlightSubstrings ?? [])]?.map(
141 | (str: DecorationItem) => {
142 | return {
143 | start: str.start,
144 | end: str.end,
145 | properties: str.properties,
146 | };
147 | },
148 | ) ?? [];
149 |
150 | const opts = {
151 | lang,
152 | theme: `xmlui-${themeTone}`,
153 | decorations: [...highlightedRows, ...highlightedSubstrings],
154 | };
155 | return shikiHighlighter.codeToHtml(code, opts);
156 | }
157 |
158 | type TreeNode = {
159 | name: string;
160 | path: string;
161 | title?: string;
162 | type?: string;
163 | children?: TreeNode[];
164 | };
165 |
166 | type MetaJson = Record<string, any>;
167 |
168 | function omitIndexFromPath(path: string) {
169 | return path.endsWith("index") ? path.substring(0, path.length - "index".length) : path;
170 | }
171 |
172 | // generated with chatgpt
173 | function buildTreeFromPathsAndMeta(
174 | paths: string[],
175 | metaByFolder: Record<string, MetaJson>,
176 | ): TreeNode[] {
177 | const root: TreeNode[] = [];
178 |
179 | paths.forEach((path) => {
180 | const parts = path.split("/");
181 | let currentPath = "/content";
182 | let currentLevel: TreeNode[] | undefined = root;
183 |
184 | parts.forEach((part, index) => {
185 | let existingNode = currentLevel?.find((node) => node.name === part);
186 |
187 | if (!existingNode) {
188 | // --- Look up title/type in meta
189 | const meta = metaByFolder[currentPath + "/_meta.json"];
190 | let title, type;
191 |
192 | if (meta?.default?.[part]) {
193 | const metaEntry = meta.default[part];
194 | if (typeof metaEntry === "string") {
195 | title = metaEntry;
196 | } else if (typeof metaEntry === "object") {
197 | title = metaEntry.title;
198 | type = metaEntry.type;
199 | }
200 | }
201 |
202 | existingNode = {
203 | name: part,
204 | title: title || part,
205 | path: omitIndexFromPath(path),
206 | ...(type && { type }),
207 | };
208 | if (existingNode) {
209 | currentLevel?.push(existingNode);
210 | }
211 | }
212 |
213 | if (index < parts.length - 1) {
214 | if (existingNode && !existingNode?.children) {
215 | existingNode.children = [];
216 | }
217 | currentLevel = existingNode?.children;
218 | }
219 | currentPath += `/${part}`;
220 | });
221 | });
222 |
223 | // Function to sort children based on _meta.json order
224 | function sortChildren(level: TreeNode[], path: string) {
225 | const meta = metaByFolder[path + "/_meta.json"];
226 | if (!meta?.default) return;
227 |
228 | const order = Object.keys(meta.default);
229 | order.forEach((orderKey) => {
230 | if (!level.find((item) => item.name === orderKey)) {
231 | level.push({
232 | name: orderKey,
233 | ...meta.default[orderKey],
234 | });
235 | }
236 | });
237 | level.sort((a, b) => {
238 | const aIndex = order.indexOf(a.name);
239 | const bIndex = order.indexOf(b.name);
240 |
241 | if (aIndex === -1 && bIndex === -1) return 0;
242 | if (aIndex === -1) return 1;
243 | if (bIndex === -1) return -1;
244 | return aIndex - bIndex;
245 | });
246 |
247 | level.forEach((node) => {
248 | if (node.children) {
249 | sortChildren(node.children, `${path}/${node.name}`);
250 | }
251 | });
252 | }
253 |
254 | sortChildren(root, "/content");
255 |
256 | return root;
257 | }
258 |
259 | const groupedNavPanelContent = buildTreeFromPathsAndMeta(navPanelContent, metaJsons);
260 | const App: StandaloneAppDescription = {
261 | name: "XMLUI Docs",
262 | defaultTheme: "docs-theme",
263 | resources: {
264 | logo: "/resources/logo.svg",
265 | "logo-dark": "/resources/logo-dark.svg",
266 | favicon: "/resources/favicon.ico",
267 | "icon.github": "/resources/github.svg",
268 | "font.Inter":
269 | "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
270 | },
271 | appGlobals: {
272 | useHashBasedRouting: false,
273 | showHeadingAnchors: true,
274 | searchIndexEnabled: true,
275 | navPanelContent: groupedNavPanelContent,
276 | content,
277 | plainTextContent,
278 | codeHighlighter: {
279 | availableLangs: shikiHighlighter.getLoadedLanguages(),
280 | highlight,
281 | },
282 | prefetchedContent,
283 | lintSeverity: "skip", // Turn off xmlui linting
284 | popOutUrl: "https://playground.xmlui.org/#/playground",
285 | },
286 | };
287 |
288 | export default App;
289 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/Form/Form.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import styles from "./Form.module.scss";
2 |
3 | import { createComponentRenderer } from "../../components-core/renderers";
4 | import { parseScssVar } from "../../components-core/theming/themeVars";
5 | import { createMetadata, d, dComponent, dEnabled, dInternal } from "../metadata-helpers";
6 | import { labelPositionMd } from "../abstractions";
7 | import { FormWithContextVar, defaultProps } from "./FormNative";
8 |
9 | const COMP = "Form";
10 |
11 | export const FormMd = createMetadata({
12 | status: "stable",
13 | description:
14 | "`Form` provides a structured container for collecting and validating user " +
15 | "input, with built-in data binding, validation, and submission handling. It " +
16 | "automatically manages form state and provides context for nested form controls " +
17 | "to work together.",
18 | props: {
19 | buttonRowTemplate: dComponent(
20 | `This property allows defining a custom component to display the buttons at the bottom of the form.`,
21 | ),
22 | itemLabelPosition: {
23 | description:
24 | `This property sets the position of the item labels within the form.` +
25 | `Individual \`FormItem\` instances can override this property.`,
26 | availableValues: labelPositionMd,
27 | type: "string",
28 | defaultValue: defaultProps.itemLabelPosition,
29 | },
30 | itemLabelWidth: {
31 | description:
32 | "This property sets the width of the item labels within the form. Individual " +
33 | "\`FormItem\` instances can override this property. If this property is not set, " +
34 | "each form item nested in the form uses its calculated label width. These widths " +
35 | "may be different for each item.",
36 | type: "string",
37 | },
38 | itemLabelBreak: {
39 | description:
40 | `This boolean value indicates if form item labels can be split into multiple ` +
41 | `lines if it would overflow the available label width. Individual \`FormItem\` ` +
42 | `instances can override this property.`,
43 | type: "boolean",
44 | defaultValue: defaultProps.itemLabelBreak,
45 | },
46 | keepModalOpenOnSubmit: {
47 | description: "This property prevents the modal from closing when the form is submitted.",
48 | type: "boolean",
49 | defaultValue: defaultProps.keepModalOpenOnSubmit,
50 | },
51 | data: {
52 | description:
53 | "This property sets the initial value of the form's data structure. The form infrastructure " +
54 | "uses this value to set the initial state of form items within the form. If this property is" +
55 | "not set, the form does not have an initial value.",
56 | },
57 | cancelLabel: {
58 | description: "This property defines the label of the Cancel button.",
59 | type: "string",
60 | defaultValue: defaultProps.cancelLabel,
61 | },
62 | saveLabel: {
63 | description: `This property defines the label of the Save button.`,
64 | type: "string",
65 | defaultValue: defaultProps.saveLabel,
66 | },
67 | saveInProgressLabel: {
68 | description:
69 | "This property defines the label of the Save button to display during the " +
70 | "form data submit (save) operation.",
71 | type: "string",
72 | defaultValue: defaultProps.saveInProgressLabel,
73 | },
74 | swapCancelAndSave: {
75 | description:
76 | `By default, the Cancel button is to the left of the Save button. Set this property to ` +
77 | `\`true\` to swap them or \`false\` to keep their original location.`,
78 | type: "boolean",
79 | defaultValue: defaultProps.swapCancelAndSave,
80 | },
81 | hideButtonRowUntilDirty: {
82 | description:
83 | `This property hides the button row until the form data is modified (dirty).`,
84 | type: "boolean",
85 | defaultValue: defaultProps.hideButtonRowUntilDirty,
86 | },
87 | hideButtonRow: {
88 | description:
89 | `This property hides the button row entirely when set to true.`,
90 | type: "boolean",
91 | defaultValue: defaultProps.hideButtonRow,
92 | },
93 | enableSubmit: {
94 | description:
95 | `This property controls whether the submit button is enabled. When set to false, ` +
96 | `the submit button is disabled and the form cannot be submitted.`,
97 | type: "boolean",
98 | defaultValue: defaultProps.enableSubmit,
99 | },
100 | submitUrl: d(`URL to submit the form data.`),
101 | submitMethod: {
102 | description:
103 | "This property sets the HTTP method to use when submitting the form data. If not " +
104 | "defined, `put` is used when the form has initial data; otherwise, `post`.",
105 | },
106 | inProgressNotificationMessage: d("This property sets the message to display when the form is being submitted."),
107 | completedNotificationMessage: d("This property sets the message to display when the form is submitted successfully."),
108 | errorNotificationMessage: d("This property sets the message to display when the form submission fails."),
109 | enabled: dEnabled(),
110 | _data_url: dInternal("when we have an api bound data prop, we inject the url here"),
111 | },
112 | events: {
113 | willSubmit: d(
114 | `The form infrastructure fires this event just before the form is submitted. The event argument ` +
115 | `is the current \`data\` value to be submitted. You can cancel the submission by returning ` +
116 | `\`false\` from the event handler.`,
117 | ),
118 | submit: d(
119 | `The form infrastructure fires this event when the form is submitted. The event argument ` +
120 | `is the current \`data\` value to save.`,
121 | ),
122 | success: d("The form infrastructure fires this event when the form is submitted successfully."),
123 | cancel: d(`The form infrastructure fires this event when the form is canceled.`),
124 | reset: d(`The form infrastructure fires this event when the form is reset.`),
125 | },
126 | contextVars: {
127 | $data: d(
128 | `This property represents the value of the form data. You can access the fields of the form ` +
129 | `using the IDs in the \`bindTo\` property of nested \`FormItem\` instances. \`$data\` also ` +
130 | `provides an \`update\` method as a shortcut to the Form's exposed \`update\` method.`,
131 | ),
132 | },
133 | apis: {
134 | reset: {
135 | description: "This method resets the form to its initial state, clearing all user input.",
136 | signature: "reset(): void",
137 | },
138 | update: {
139 | description: "You can pass a data object to update the form data. The properties in the passed data " +
140 | "object are updated to their values accordingly. Other form properties remain intact.",
141 | signature: "update(data: Record<string, any>): void",
142 | parameters: {
143 | data: "An object containing the form data to update.",
144 | },
145 | },
146 | validate: {
147 | description: "This method triggers validation on all form fields without submitting the form. " +
148 | "It displays validation errors and returns the validation result along with the cleaned form data. " +
149 | "This is useful for implementing custom submit buttons or performing operations that require " +
150 | "validated data without actually submitting the form.",
151 | signature: "validate(): Promise<{ isValid: boolean, data: Record<string, any>, errors: ValidationResult[], warnings: ValidationResult[], validationResults: Record<string, ValidationResult> }>",
152 | returns: "A promise that resolves to an object containing validation status, cleaned data, and detailed validation results.",
153 | },
154 | },
155 | themeVars: parseScssVar(styles.themeVars),
156 | defaultThemeVars: {
157 | "gap-Form": "$space-4",
158 | "gap-buttonRow-Form": "$space-4",
159 | "backgroundColor-ValidationDisplay-error": "$color-danger-100",
160 | "backgroundColor-ValidationDisplay-warning": "$color-warn-100",
161 | "backgroundColor-ValidationDisplay-info": "$color-primary-100",
162 | "backgroundColor-ValidationDisplay-valid": "$color-success-100",
163 | "color-accent-ValidationDisplay-error": "$color-error",
164 | "color-accent-ValidationDisplay-warning": "$color-warning",
165 | "color-accent-ValidationDisplay-info": "$color-info",
166 | "color-accent-ValidationDisplay-valid": "$color-valid",
167 | "textColor-ValidationDisplay-error": "$color-error",
168 | "textColor-ValidationDisplay-warning": "$color-warning",
169 | "textColor-ValidationDisplay-info": "$color-info",
170 | "textColor-ValidationDisplay-valid": "$color-valid",
171 | "marginTop-buttonRow-Form": "$space-4"
172 | },
173 | });
174 |
175 | export const formComponentRenderer = createComponentRenderer(
176 | COMP,
177 | FormMd,
178 | ({ node, renderChild, extractValue, className, lookupEventHandler, registerComponentApi }) => {
179 | return (
180 | <FormWithContextVar
181 | node={node as any}
182 | renderChild={renderChild}
183 | extractValue={extractValue}
184 | lookupEventHandler={lookupEventHandler as any}
185 | className={className}
186 | registerComponentApi={registerComponentApi}
187 | />
188 | );
189 | },
190 | );
191 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/Charts/PieChart/PieChartNative.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import {
2 | Pie,
3 | PieChart as RPieChart,
4 | Sector,
5 | ResponsiveContainer,
6 | LabelList,
7 | Tooltip,
8 | Legend as RLegend,
9 | } from "recharts";
10 | import type { PieSectorDataItem } from "recharts/types/polar/Pie";
11 | import styles from "./PieChartNative.module.scss";
12 | import type { CSSProperties, ReactNode } from "react";
13 | import { useMemo, useRef, useEffect, useState } from "react";
14 | import type { LabelPosition } from "recharts/types/component/Label";
15 | import ChartProvider, { useChartContextValue } from "../utils/ChartProvider";
16 |
17 | import { TooltipContent } from "../Tooltip/TooltipContent";
18 | import { useTheme } from "../../../components-core/theming/ThemeContext";
19 | import classnames from "classnames";
20 |
21 | export type PieChartProps = {
22 | data: any[];
23 | dataKey: string;
24 | nameKey: string;
25 | style?: CSSProperties;
26 | className?: string;
27 | showLabel?: boolean;
28 | showLabelList?: boolean;
29 | labelListPosition?: LabelPosition;
30 | innerRadius?: number;
31 | children?: ReactNode;
32 | showLegend?: boolean;
33 | outerRadius?: string | number;
34 | };
35 |
36 | export const defaultProps: Pick<
37 | PieChartProps,
38 | "showLabel" | "showLabelList" | "showLegend" | "labelListPosition" | "innerRadius"
39 | > = {
40 | showLabel: true,
41 | showLabelList: false,
42 | showLegend: false,
43 | labelListPosition: "inside",
44 | innerRadius: 0,
45 | };
46 |
47 | // Custom label renderer that draws connectors and places text outside the pie
48 | const renderCustomizedLabel = (props: any) => {
49 | const RADIAN = Math.PI / 180;
50 | const { cx, cy, midAngle, outerRadius, fill, payload, percent, value, name, index } = props;
51 |
52 | // Calculate positions for the label connector lines
53 | const sin = Math.sin(-RADIAN * midAngle);
54 | const cos = Math.cos(-RADIAN * midAngle);
55 | const sx = cx + (outerRadius + 10) * cos;
56 | const sy = cy + (outerRadius + 10) * sin;
57 | const mx = cx + (outerRadius + 30) * cos;
58 | const my = cy + (outerRadius + 30) * sin;
59 | const ex = mx + (cos >= 0 ? 1 : -1) * 22;
60 | const ey = my;
61 | const textAnchor = cos >= 0 ? "start" : "end";
62 |
63 | return (
64 | <g>
65 | {/* Connector line from pie to label */}
66 | <path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill="none" />
67 | {/* Circle at the bend point */}
68 | <circle cx={ex} cy={ey} r={2} fill={fill} stroke="none" />
69 | {/* Name label */}
70 | <text
71 | x={ex + (cos >= 0 ? 1 : -1) * 12}
72 | y={ey}
73 | textAnchor={textAnchor}
74 | className={styles.pieLabel}
75 | fill="currentColor"
76 | fontSize={12}
77 | >
78 | {props.name}
79 | </text>
80 | </g>
81 | );
82 | };
83 |
84 | // Enhanced active shape renderer
85 | const renderActiveShape = (props: PieSectorDataItem) => {
86 | const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill } = props;
87 |
88 | return (
89 | <g>
90 | <Sector
91 | cx={cx}
92 | cy={cy}
93 | innerRadius={innerRadius}
94 | outerRadius={(outerRadius as number) + 10}
95 | startAngle={startAngle}
96 | endAngle={endAngle}
97 | fill={fill}
98 | />
99 | <Sector
100 | cx={cx}
101 | cy={cy}
102 | startAngle={startAngle}
103 | endAngle={endAngle}
104 | innerRadius={(outerRadius as number) + 6}
105 | outerRadius={(outerRadius as number) + 10}
106 | fill={fill}
107 | />
108 | </g>
109 | );
110 | };
111 |
112 | export function PieChart({
113 | data,
114 | dataKey,
115 | nameKey,
116 | style,
117 | className,
118 | showLabel = defaultProps.showLabel,
119 | showLabelList = defaultProps.showLabelList,
120 | labelListPosition = defaultProps.labelListPosition,
121 | innerRadius = defaultProps.innerRadius,
122 | children,
123 | outerRadius, // no default; we'll compute when undefined or "auto"
124 | showLegend = defaultProps.showLegend,
125 | }: PieChartProps) {
126 | const { getThemeVar } = useTheme();
127 |
128 | const colorValues = useMemo(() => {
129 | return [
130 | getThemeVar("color-primary-500"),
131 | getThemeVar("color-primary-300"),
132 | getThemeVar("color-success-500"),
133 | getThemeVar("color-success-300"),
134 | getThemeVar("color-warn-500"),
135 | getThemeVar("color-warn-300"),
136 | getThemeVar("color-danger-500"),
137 | getThemeVar("color-danger-300"),
138 | getThemeVar("color-info-500"),
139 | getThemeVar("color-info-300"),
140 | getThemeVar("color-secondary-500"),
141 | getThemeVar("color-secondary-300"),
142 | getThemeVar("color-primary-600"),
143 | getThemeVar("color-primary-400"),
144 | getThemeVar("color-success-600"),
145 | getThemeVar("color-success-400"),
146 | getThemeVar("color-warn-600"),
147 | getThemeVar("color-warn-400"),
148 | getThemeVar("color-danger-600"),
149 | getThemeVar("color-danger-400"),
150 | getThemeVar("color-info-600"),
151 | getThemeVar("color-info-400"),
152 | getThemeVar("color-secondary-600"),
153 | getThemeVar("color-secondary-400"),
154 | getThemeVar("color-primary-900"),
155 | getThemeVar("color-primary-700"),
156 | getThemeVar("color-success-900"),
157 | getThemeVar("color-success-700"),
158 | getThemeVar("color-warn-900"),
159 | getThemeVar("color-warn-700"),
160 | getThemeVar("color-danger-900"),
161 | getThemeVar("color-danger-700"),
162 | getThemeVar("color-info-900"),
163 | getThemeVar("color-info-700"),
164 | getThemeVar("color-secondary-900"),
165 | getThemeVar("color-secondary-700"),
166 | ];
167 | }, [getThemeVar]);
168 |
169 | const chartData = useMemo(() => {
170 | if (!data) return [];
171 | return data.map((item, index) => ({
172 | ...item,
173 | fill: item.fill || colorValues[index % colorValues.length],
174 | }));
175 | }, [colorValues, data]);
176 |
177 | const chartContextValue = useChartContextValue({ dataKey, nameKey });
178 |
179 | // --- measurement for auto radius ---
180 | const wrapperRef = useRef<HTMLDivElement | null>(null);
181 | const [box, setBox] = useState<{ width: number; height: number }>({ width: 0, height: 0 });
182 |
183 | useEffect(() => {
184 | if (!wrapperRef.current || typeof window === "undefined" || !(window as any).ResizeObserver)
185 | return;
186 | const ro = new (window as any).ResizeObserver((entries: any[]) => {
187 | const cr = entries[0]?.contentRect;
188 | if (cr) setBox({ width: cr.width, height: cr.height });
189 | });
190 | ro.observe(wrapperRef.current);
191 | return () => ro.disconnect();
192 | }, []);
193 |
194 | // Sizing heuristics
195 | const RING_PADDING = 8; // keep ring off the SVG edge
196 | const LABEL_GUTTER_OUTSIDE = 16; // space for connectors/labels
197 | const LABEL_GUTTER_INSIDE = 6; // small breathing room if labels inside/off
198 | const MIN_RING_THICKNESS = 12; // maintain legibility on small canvases
199 |
200 | // Are labels drawn outside the ring?
201 | const labelsOutside = !!showLabel || (showLabelList && labelListPosition === "outside");
202 |
203 | // Resolve outerRadius: explicit value wins; otherwise compute from measured box
204 | const resolvedOuterRadius = useMemo((): number | string => {
205 | const wantsAuto =
206 | outerRadius === undefined ||
207 | (typeof outerRadius === "string" && outerRadius.toLowerCase() === "auto");
208 |
209 | if (!wantsAuto) return outerRadius as number | string;
210 |
211 | const base = Math.min(box.width, box.height) / 2;
212 | const gutter = labelsOutside ? LABEL_GUTTER_OUTSIDE : LABEL_GUTTER_INSIDE;
213 | const inner = Number(innerRadius) || 0;
214 | const derived = Math.max(inner + MIN_RING_THICKNESS, base - gutter - RING_PADDING);
215 |
216 | // Fallback before first measurement
217 | if (!Number.isFinite(derived) || derived <= 0) {
218 | return labelsOutside ? "72%" : "88%";
219 | }
220 | return derived;
221 | }, [outerRadius, box.width, box.height, labelsOutside, innerRadius]);
222 |
223 | return (
224 | <ChartProvider value={chartContextValue}>
225 | {children}
226 | <div ref={wrapperRef} className={classnames(styles.wrapper, className)} style={style}>
227 | <ResponsiveContainer width="100%" height="100%" minWidth={0}>
228 | <RPieChart
229 | margin={{ top: 8, right: 8, bottom: labelsOutside ? 16 : 8, left: 8 }}
230 | >
231 | <Tooltip content={<TooltipContent />} />
232 | <Pie
233 | data={chartData}
234 | dataKey={dataKey}
235 | nameKey={nameKey}
236 | innerRadius={innerRadius}
237 | outerRadius={resolvedOuterRadius}
238 | paddingAngle={1}
239 | activeShape={renderActiveShape}
240 | label={showLabel ? renderCustomizedLabel : false}
241 | labelLine={showLabel}
242 | >
243 | {chartContextValue.labelList
244 | ? chartContextValue.labelList
245 | : showLabelList && (
246 | <LabelList
247 | position={labelListPosition}
248 | dataKey={nameKey}
249 | className={styles.labelList}
250 | stroke="none"
251 | fill="currentColor"
252 | fontSize={12}
253 | />
254 | )}
255 | </Pie>
256 | {chartContextValue.legend ? chartContextValue.legend : showLegend && <RLegend />}
257 | </RPieChart>
258 | </ResponsiveContainer>
259 | </div>
260 | </ChartProvider>
261 | );
262 | }
263 |
```
--------------------------------------------------------------------------------
/xmlui/scripts/generate-docs/constants.mjs:
--------------------------------------------------------------------------------
```
1 | /**
2 | * Constants and configuration values for the documentation generation scripts
3 | *
4 | * This file contains all the magic strings, configuration objects, and constants
5 | * that were extracted from multiple files in the documentation generation system:
6 | * - get-docs.mjs
7 | * - DocsGenerator.mjs
8 | * - MetadataProcessor.mjs
9 | * - utils.mjs
10 | * - generate-summary-files.mjs
11 | * - build-pages-map.mjs
12 | * - build-downloads-map.mjs
13 | * - logger.mjs
14 | *
15 | * These constants can be imported and used by other documentation generation scripts
16 | * to ensure consistency and improve maintainability.
17 | */
18 | import { fromKebabtoReadable } from "./utils.mjs";
19 |
20 | export const COMPONENT_STATES = {
21 | INTERNAL: "internal",
22 | EXPERIMENTAL: "experimental",
23 | STABLE: "stable",
24 | DEPRECATED: "deprecated",
25 | };
26 |
27 | export const FILE_EXTENSIONS = {
28 | MARKDOWN: [".md", ".mdx"],
29 | METADATA: "_meta.json",
30 | };
31 |
32 | export const FOLDER_NAMES = {
33 | COMPONENTS: "components",
34 | EXTENSIONS: "extensions",
35 | COMPONENT_SAMPLES: "component-samples",
36 | CONTENT: "content",
37 | PAGES: "pages",
38 | SRC: "src",
39 | DIST: "dist",
40 | META: "meta",
41 | };
42 |
43 | export const CONFIG_FILES = {
44 | COMPONENTS: "components-config.json",
45 | EXTENSIONS: "extensions-config.json",
46 | };
47 |
48 | export const SUMMARY_CONFIG = {
49 | COMPONENTS: {
50 | title: "Components Overview",
51 | fileName: "_overview",
52 | },
53 | EXTENSIONS: {
54 | title: "Extension Overview",
55 | fileName: "_overview",
56 | },
57 | };
58 |
59 | export const PACKAGE_PATTERNS = {
60 | XMLUI_PREFIX: "xmlui-",
61 | METADATA_SUFFIX: "-metadata.js",
62 | };
63 |
64 | export const FILE_NAMES = {
65 | COMPONENTS_METADATA: "componentsMetadata.ts",
66 | };
67 |
68 | export const LOG_MESSAGES = {
69 | GENERATING_EXTENSION_DOCS: "Generating extension package docs",
70 | LOADING_CONFIG: "Loading config",
71 | LOADING_EXTENSION_PACKAGES: "Loading extension packages",
72 | CLEANING_FOLDER: (folderName) => `Cleaning ${folderName} by removing previous doc files`,
73 | FILES_DELETED_SUCCESS: "All files have been successfully deleted",
74 | SKIPPING_INTERNAL_PACKAGE: "Skipping internal extension package:",
75 | LOADED_EXTENSION_PACKAGE: "Loaded extension package:",
76 | NO_DIST_FOLDER: (dir) => `No dist folder found for ${dir}`,
77 | NO_METADATA_OBJECT: (packageName) =>
78 | `No meta object found for package: ${packageName}.\n Have you built the package?`,
79 | NO_COMPONENT_METADATA: (packageName) =>
80 | `No component metadata found in meta object for package: ${packageName}. Check the "${FOLDER_NAMES.META}/${FILE_NAMES.COMPONENTS_METADATA}" file.`,
81 | };
82 |
83 | export const ERROR_MESSAGES = {
84 | NO_CONFIG_PATH: "No config path provided",
85 | WRITE_META_FILE_ERROR: "Could not write _meta file: ",
86 | UNKNOWN_ERROR: "unknown error",
87 | NO_THEME_INFO: "No theme information found. Please run the metadata build first.",
88 | NO_COMPONENT_METADATA: "No component metadata found. Please run the metadata build first.",
89 | FILE_WRITE_ERROR: "Failed to write file",
90 | DIRECTORY_CREATE_ERROR: "Failed to create directory",
91 | METADATA_LOAD_ERROR: "Failed to load metadata",
92 | CONFIG_VALIDATION_ERROR: "Configuration validation failed",
93 | };
94 |
95 | export const METADATA_PROPERTIES = {
96 | IS_HTML_TAG: "isHtmlTag",
97 | };
98 |
99 | export const TEMPLATE_STRINGS = {
100 | PACKAGE_HEADER: (packageName) => `# ${fromKebabtoReadable(packageName)} Package`,
101 | };
102 |
103 | // From DocsGenerator.mjs
104 | export const OUTPUT_FILES = {
105 | METADATA_JSON: "metadata.json",
106 | LANDING_METADATA_JSON: "landing-metadata.json",
107 | PAGES_MAP: "pages.js",
108 | DOWNLOADS_MAP: "downloads.js",
109 | };
110 |
111 | export const URL_REFERENCES = {
112 | DOCS: "https://docs.xmlui.org/",
113 | };
114 |
115 | // From MetadataProcessor.mjs
116 | export const METADATA_SECTIONS = {
117 | IMPORTS: "imports",
118 | DESCRIPTION: "description",
119 | CONTEXT_VARS: "contextVars",
120 | PROPS: "props",
121 | API: "apis",
122 | EVENTS: "events",
123 | PARTS: "parts",
124 | STYLES: "styles",
125 | };
126 |
127 | export const DIRECTIVE_CONFIG = {
128 | INDICATOR: "%-",
129 | SECTION_MAP: {
130 | imports: "IMPORT",
131 | description: "DESC",
132 | props: "PROP",
133 | events: "EVENT",
134 | parts: "PART",
135 | styles: "STYLE",
136 | apis: "API",
137 | contextVars: "CONTEXT_VAR",
138 | },
139 | };
140 |
141 | export const SECTION_DISPLAY_NAMES = {
142 | props: "Properties",
143 | events: "Events",
144 | styles: "Styling",
145 | apis: "Exposed Methods",
146 | contextVars: "Context Values",
147 | parts: "Parts",
148 | };
149 |
150 | export const SECTION_REFERENCE_KEYS = {
151 | DESCRIPTION: "description",
152 | DESCRIPTION_REF: "descriptionRef",
153 | };
154 |
155 | // From utils.mjs
156 | export const TABLE_CONFIG = {
157 | STYLES: {
158 | LEFT: "left",
159 | CENTER: "center",
160 | RIGHT: "right",
161 | },
162 | MARKDOWN_ALIGNMENTS: {
163 | LEFT: ":---",
164 | CENTER: ":---:",
165 | RIGHT: "---:",
166 | DEFAULT: "---",
167 | },
168 | DEFAULT_ROW_NUM_HEADER: { value: "Num", style: "center" },
169 | };
170 |
171 | export const COMMON_TABLE_HEADERS = {
172 | VALUE_DESCRIPTION: ["Value", "Description"],
173 | PARAMETER_DESCRIPTION: ["Name", "Description"],
174 | THEME_VARIABLE_DESCRIPTION: ["Theme Variable", "Description"],
175 | };
176 |
177 | // From logger.mjs
178 | export const LOGGER_SEVERITY = {
179 | INFO: "info",
180 | WARNING: "warning",
181 | ERROR: "error",
182 | };
183 |
184 | export const LOGGER_LEVEL_VALUES = {
185 | ALL: "all",
186 | NONE: "none",
187 | };
188 |
189 | // From generate-summary-files.mjs
190 | export const COMPONENT_STATUS_CONFIG = {
191 | ACCEPTED_STATUSES: ["stable", "experimental", "deprecated", "in progress"],
192 | DEFAULT_STATUS: "stable",
193 | };
194 |
195 | export const SUMMARY_FILE_CONFIG = {
196 | COMPONENTS_OVERVIEW_HEADER: "# Components Overview [#components-overview]",
197 | PACKAGE_COMPONENTS_HEADER: "## Package Components",
198 | };
199 |
200 | // From build-pages-map.mjs
201 | export const PAGES_MAP_CONFIG = {
202 | PATH_CUTOFF: "pages",
203 | INCLUDED_FILE_EXTENSIONS: [".mdx", ".md"],
204 | };
205 |
206 | // From build-downloads-map.mjs
207 | export const DOWNLOADS_MAP_CONFIG = {
208 | BASE_URL_CUTOFF: "files",
209 | INCLUDED_FILE_EXTENSIONS: [".zip"],
210 | };
211 |
212 | // Error handling utilities
213 | export const ERROR_HANDLING = {
214 | EXIT_CODES: {
215 | SUCCESS: 0,
216 | GENERAL_ERROR: 1,
217 | INVALID_CONFIG: 2,
218 | FILE_NOT_FOUND: 3,
219 | METADATA_ERROR: 4,
220 | },
221 | DEFAULT_EXIT_CODE: 1,
222 | };
223 |
224 | // Component navigation generation constants
225 | export const COMPONENT_NAVIGATION = {
226 | DELIMITERS: {
227 | START: "<!-- GENERATED CONTENT/Component references links -->",
228 | END: "<!-- END GENERATED CONTENT/Component references links -->",
229 | START_REGEX: /<!--\s*GENERATED CONTENT\/Component references links.*?-->/,
230 | END_REGEX: /<!--\s*END GENERATED CONTENT\/Component references links.*?-->/,
231 | },
232 | OVERVIEW_LINK: {
233 | LABEL: "Components Overview",
234 | TO: "/components/_overview",
235 | },
236 | TEMPLATES: {
237 | NAVLINK: (componentName) =>
238 | `<NavLink label="${componentName}" to="/components/${componentName}" />`,
239 | OVERVIEW_NAVLINK: (label, to) => `<NavLink label="${label}" to="${to}" />`,
240 | },
241 | };
242 |
243 | export const EXTENSIONS_NAVIGATION = {
244 | DELIMITERS: {
245 | START: "<!-- GENERATED CONTENT/Extension references links -->",
246 | END: "<!-- END GENERATED CONTENT/Extension references links -->",
247 | START_REGEX: /<!--\s*GENERATED CONTENT\/Extension references links.*?-->/,
248 | END_REGEX: /<!--\s*END GENERATED CONTENT\/Extension references links.*?-->/,
249 | },
250 | OVERVIEW_LINK: {
251 | LABEL: "Extension Overview",
252 | TO: (packageName) => `/extensions/${packageName}/_overview`
253 | },
254 | TEMPLATES: {
255 | NAVGROUP: (label, children) => `<NavGroup label="${label}">\n${children}\n</NavGroup>`,
256 | NAVLINK: (packageName, componentName) =>
257 | `<NavLink label="${componentName}" to="/extensions/${packageName}/${componentName}" />`,
258 | OVERVIEW_NAVLINK: (label, to) => `<NavLink label="${label}" to="${to}" />`,
259 | },
260 | };
261 |
262 | // File paths used in the documentation generation
263 | export const FILE_PATHS = {
264 | MAIN_XMLUI: "src/Main.xmlui",
265 | };
266 |
267 | // Path constants for resolving workspace locations
268 | export const PATH_CONSTANTS = {
269 | XMLUI_SRC_COMPONENTS: "xmlui/src/components",
270 | DOCS_COMPONENT_SAMPLES: "docs/component-samples",
271 | WORKSPACE: "workspace",
272 | PACKAGES: "packages",
273 | };
274 |
275 | // Text constants and encoding
276 | export const TEXT_CONSTANTS = {
277 | NO_DESCRIPTION_AVAILABLE: "No description available",
278 | UTF8_ENCODING: "utf8",
279 | NEWLINE_SEPARATOR: "\n",
280 | };
281 |
282 | // Error contexts for operation handling
283 | export const ERROR_CONTEXTS = {
284 | EXTENSION_PACKAGES_METADATA: "extension packages metadata generation",
285 | FOLDER_CLEANUP: "folder cleanup",
286 | LOADING_EXTENSION_PACKAGE: "loading extension package",
287 | };
288 |
289 | // Error messages for component navigation
290 | export const COMPONENT_NAV_ERRORS = {
291 | COMPONENT_NAV_FAILED: "Failed to generate component navigation links",
292 | MAIN_XMLUI_NOT_FOUND: (path) => `Main.xmlui file not found at expected path: ${path}`,
293 | START_DELIMITER_NOT_FOUND: "Start delimiter not found in Main.xmlui",
294 | END_DELIMITER_NOT_FOUND: "End delimiter not found in Main.xmlui",
295 | INVALID_DELIMITER_ORDER: "Invalid delimiter order in Main.xmlui",
296 | DELIMITERS_NOT_FOUND: "Delimiters not found in Main.xmlui",
297 | OVERVIEW_GENERATION_FAILED: "Failed to generate components overview",
298 | CONTENT_REPLACEMENT_FAILED: "Failed to replace generated content",
299 | };
300 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/Select/Select.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import styles from "./Select.module.scss";
2 |
3 | import { createComponentRenderer } from "../../components-core/renderers";
4 | import { parseScssVar } from "../../components-core/theming/themeVars";
5 | import {
6 | dPlaceholder,
7 | dInitialValue,
8 | dAutoFocus,
9 | dRequired,
10 | dReadonly,
11 | dEnabled,
12 | dValidationStatus,
13 | dDidChange,
14 | dGotFocus,
15 | dLostFocus,
16 | dMulti,
17 | dComponent,
18 | createMetadata,
19 | d,
20 | } from "../metadata-helpers";
21 | import { MemoizedItem } from "../container-helpers";
22 | import { Select, defaultProps } from "./SelectNative";
23 |
24 | const COMP = "Select";
25 |
26 | export const SelectMd = createMetadata({
27 | status: "stable",
28 | description:
29 | "`Select` provides a dropdown interface for choosing from a list of options, " +
30 | "supporting both single and multiple selection modes. It offers extensive " +
31 | "customization capabilities including search functionality, custom templates, " +
32 | "and comprehensive form integration.",
33 | props: {
34 | placeholder: {
35 | ...dPlaceholder(),
36 | defaultValue: defaultProps.placeholder,
37 | },
38 | initialValue: dInitialValue(),
39 | value: {
40 | description: "This property sets the current value of the component.",
41 | isInternal: true, //TODO illesg temp
42 | },
43 | autoFocus: {
44 | ...dAutoFocus(),
45 | defaultValue: defaultProps.autoFocus,
46 | },
47 | required: {
48 | ...dRequired(),
49 | defaultValue: defaultProps.required,
50 | },
51 | readOnly: {
52 | ...dReadonly(),
53 | defaultValue: defaultProps.readOnly,
54 | },
55 | enabled: {
56 | ...dEnabled(),
57 | defaultValue: defaultProps.enabled,
58 | },
59 | validationStatus: {
60 | ...dValidationStatus(),
61 | defaultValue: defaultProps.validationStatus,
62 | },
63 | optionLabelTemplate: dComponent(
64 | `This property allows replacing the default template to display an option in the dropdown list.`,
65 | ),
66 | optionTemplate: dComponent(
67 | `This property allows replacing the default template to display an option in the dropdown list.`,
68 | ),
69 | valueTemplate: dComponent(
70 | `This property allows replacing the default template to display a selected value when ` +
71 | `multiple selections (\`multiSelect\` is \`true\`) are enabled.`,
72 | ),
73 | dropdownHeight: d(
74 | "This property sets the height of the dropdown list. If not set, the height is determined automatically.",
75 | ),
76 | emptyListTemplate: dComponent(
77 | `This optional property provides the ability to customize what is displayed when the ` +
78 | `list of options is empty.`,
79 | ),
80 | multiSelect: {
81 | ...dMulti(),
82 | defaultValue: defaultProps.multiSelect,
83 | },
84 | searchable: {
85 | description: `This property enables the search functionality in the dropdown list.`,
86 | defaultValue: defaultProps.searchable,
87 | },
88 | inProgress: {
89 | description: `This property indicates whether the component is in progress. It can be used to show a loading message.`,
90 | defaultValue: defaultProps.inProgress,
91 | },
92 | inProgressNotificationMessage: {
93 | description: `This property indicates the message to display when the component is in progress.`,
94 | defaultValue: defaultProps.inProgressNotificationMessage,
95 | },
96 | },
97 | events: {
98 | gotFocus: dGotFocus(COMP),
99 | lostFocus: dLostFocus(COMP),
100 | didChange: dDidChange(COMP),
101 | },
102 | apis: {
103 | focus: {
104 | description: `This method focuses the \`${COMP}\` component. You can use it to programmatically focus the component.`,
105 | signature: "focus(): void",
106 | },
107 | setValue: {
108 | description: `This API sets the value of the \`${COMP}\`. You can use it to programmatically change the value.`,
109 | signature: "setValue(value: string | string[] | undefined): void",
110 | parameters: {
111 | value:
112 | "The new value to set. Can be a single value or an array of values for multi-select.",
113 | },
114 | },
115 | value: {
116 | description: `This API retrieves the current value of the \`${COMP}\`. You can use it to get the value programmatically.`,
117 | signature: "get value(): string | string[] | undefined",
118 | },
119 | reset: {
120 | description: `This method resets the component to its initial value, or clears the selection if no initial value was provided.`,
121 | signature: "reset(): void",
122 | },
123 | },
124 | contextVars: {
125 | $item: d("Represents the current option's data (label and value properties)"),
126 | $itemContext: d("Provides utility methods like `removeItem()` for multi-select scenarios"),
127 | },
128 | themeVars: parseScssVar(styles.themeVars),
129 | defaultThemeVars: {
130 | [`backgroundColor-menu-${COMP}`]: "$color-surface-raised",
131 | [`boxShadow-menu-${COMP}`]: "$boxShadow-md",
132 | [`borderRadius-menu-${COMP}`]: "$borderRadius",
133 | [`borderWidth-menu-${COMP}`]: "1px",
134 | [`borderColor-menu-${COMP}`]: "$borderColor",
135 | [`backgroundColor-${COMP}-badge`]: "$color-primary-500",
136 | [`fontSize-${COMP}-badge`]: "$fontSize-sm",
137 | [`paddingHorizontal-${COMP}-badge`]: "$space-2_5",
138 | [`paddingVertical-${COMP}-badge`]: "$space-0_5",
139 | [`borderRadius-${COMP}-badge`]: "$borderRadius",
140 | [`paddingHorizontal-item-${COMP}`]: "$space-2",
141 | [`paddingVertical-item-${COMP}`]: "$space-2",
142 | [`paddingHorizontal-${COMP}`]: "$space-2",
143 | [`paddingVertical-${COMP}`]: "$space-2",
144 | [`opacity-text-item-${COMP}--disabled`]: "0.5",
145 | [`opacity-${COMP}--disabled`]: "0.5",
146 | [`backgroundColor-${COMP}-badge--hover`]: "$color-primary-400",
147 | [`backgroundColor-${COMP}-badge--active`]: "$color-primary-500",
148 | [`textColor-item-${COMP}--disabled`]: "$color-surface-200",
149 | [`textColor-${COMP}-badge`]: "$const-color-surface-50",
150 | [`backgroundColor-item-${COMP}`]: "$backgroundColor-dropdown-item",
151 | [`backgroundColor-item-${COMP}--hover`]: "$backgroundColor-dropdown-item--hover",
152 | [`backgroundColor-item-${COMP}--active`]: "$backgroundColor-dropdown-item--active",
153 | // Default borderColor-Input--disabled is too light so the disabled component is barely visible
154 | [`borderColor-${COMP}--disabled`]: "initial",
155 | },
156 | });
157 |
158 | export const selectComponentRenderer = createComponentRenderer(
159 | COMP,
160 | SelectMd,
161 | ({
162 | node,
163 | state,
164 | updateState,
165 | extractValue,
166 | renderChild,
167 | lookupEventHandler,
168 | className,
169 | registerComponentApi,
170 | }) => {
171 | const multiSelect = extractValue.asOptionalBoolean(node.props.multiSelect);
172 | const searchable = extractValue.asOptionalBoolean(node.props.searchable);
173 |
174 | const isControlled = node.props.value !== undefined;
175 | return (
176 | <Select
177 | multiSelect={multiSelect}
178 | className={className}
179 | inProgress={extractValue.asOptionalBoolean(node.props.inProgress)}
180 | inProgressNotificationMessage={extractValue.asOptionalString(
181 | node.props.inProgressNotificationMessage,
182 | )}
183 | readOnly={extractValue.asOptionalBoolean(node.props.readOnly)}
184 | updateState={isControlled ? undefined : updateState}
185 | searchable={searchable}
186 | initialValue={extractValue(node.props.initialValue)}
187 | value={isControlled ? extractValue(node.props.value) : state?.value}
188 | autoFocus={extractValue.asOptionalBoolean(node.props.autoFocus)}
189 | enabled={extractValue.asOptionalBoolean(node.props.enabled)}
190 | placeholder={extractValue.asOptionalString(node.props.placeholder)}
191 | validationStatus={extractValue(node.props.validationStatus)}
192 | onDidChange={lookupEventHandler("didChange")}
193 | onFocus={lookupEventHandler("gotFocus")}
194 | onBlur={lookupEventHandler("lostFocus")}
195 | registerComponentApi={registerComponentApi}
196 | emptyListTemplate={renderChild(node.props.emptyListTemplate)}
197 | dropdownHeight={extractValue(node.props.dropdownHeight)}
198 | required={extractValue.asOptionalBoolean(node.props.required)}
199 | valueRenderer={
200 | node.props.valueTemplate
201 | ? (item, removeItem) => {
202 | return (
203 | <MemoizedItem
204 | contextVars={{
205 | $itemContext: { removeItem },
206 | }}
207 | node={node.props.valueTemplate}
208 | item={item}
209 | renderChild={renderChild}
210 | />
211 | );
212 | }
213 | : undefined
214 | }
215 | optionRenderer={
216 | node.props.optionTemplate
217 | ? (item, val, inTrigger) => {
218 | return (
219 | <MemoizedItem
220 | node={node.props.optionTemplate}
221 | item={item}
222 | contextVars={{
223 | $selectedValue: val,
224 | $inTrigger: inTrigger,
225 | }}
226 | renderChild={renderChild}
227 | />
228 | );
229 | }
230 | : undefined
231 | }
232 | >
233 | {renderChild(node.children)}
234 | </Select>
235 | );
236 | },
237 | );
238 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/Splitter/SplitterNative.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import React, { useEffect, useState, useMemo } from "react";
2 | import classnames from "classnames";
3 |
4 | import styles from "./Splitter.module.scss";
5 |
6 | import { noop } from "../../components-core/constants";
7 | import { parseSize, toPercentage } from "../Splitter/utils";
8 | import type { OrientationOptions } from "../abstractions";
9 |
10 | export const defaultProps = {
11 | initialPrimarySize: "50%",
12 | minPrimarySize: "0%",
13 | maxPrimarySize: "100%",
14 | orientation: "vertical" as OrientationOptions,
15 | swapped: false,
16 | floating: false,
17 | };
18 |
19 | type SplitterProps = {
20 | children: React.ReactNode[] | React.ReactNode;
21 | style?: React.CSSProperties;
22 | className?: string;
23 | splitterTemplate?: React.ReactNode;
24 | orientation?: OrientationOptions;
25 | floating?: boolean;
26 | resize?: (sizes: [number, number]) => void;
27 | swapped?: boolean;
28 | initialPrimarySize?: string;
29 | minPrimarySize?: string;
30 | maxPrimarySize?: string;
31 | visibleChildCount?: number;
32 | };
33 |
34 | export const Splitter = ({
35 | initialPrimarySize = defaultProps.initialPrimarySize,
36 | minPrimarySize = defaultProps.minPrimarySize,
37 | maxPrimarySize = defaultProps.maxPrimarySize,
38 | orientation = defaultProps.orientation,
39 | children,
40 | style,
41 | className,
42 | swapped = defaultProps.swapped,
43 | floating = defaultProps.floating,
44 | splitterTemplate,
45 | resize = noop,
46 | visibleChildCount,
47 | ...rest
48 | }: SplitterProps) => {
49 | const [sizePercentage, setSizePercentage] = useState(50);
50 | const [containerSize, setContainerSize] = useState(100);
51 | const [splitter, setSplitter] = useState<HTMLDivElement | null>(null);
52 | const [resizerVisible, setResizerVisible] = useState(false);
53 | const [resizer, setResizer] = useState<HTMLDivElement | null>(null);
54 | const [floatingResizer, setFloatingResizer] = useState<HTMLDivElement | null>(null);
55 | const resizerElement = useMemo(
56 | () => (floating ? floatingResizer : resizer),
57 | [floating, resizer, floatingResizer],
58 | );
59 |
60 | // Calculate actual size in pixels from percentage
61 | const size = useMemo(() => {
62 | return (sizePercentage / 100) * containerSize;
63 | }, [sizePercentage, containerSize]);
64 |
65 | // Since the XMLUI renderer now pre-filters children, we can use them directly
66 | const childrenArray = React.Children.toArray(children);
67 | const actualChildCount = childrenArray.length;
68 | const effectiveChildCount = visibleChildCount ?? actualChildCount;
69 | const isMultiPanel = effectiveChildCount > 1;
70 |
71 | // ResizeObserver to track container size changes
72 | useEffect(() => {
73 | if (!splitter) return;
74 |
75 | const resizeObserver = new ResizeObserver((entries) => {
76 | for (const entry of entries) {
77 | const newContainerSize =
78 | orientation === "horizontal"
79 | ? entry.contentRect.width
80 | : entry.contentRect.height;
81 | setContainerSize(newContainerSize);
82 | }
83 | });
84 |
85 | resizeObserver.observe(splitter);
86 |
87 | return () => {
88 | resizeObserver.disconnect();
89 | };
90 | }, [splitter, orientation]);
91 |
92 | // Initialize container size and primary panel percentage
93 | useEffect(() => {
94 | if (splitter) {
95 | const newContainerSize =
96 | orientation === "horizontal"
97 | ? splitter.getBoundingClientRect().width
98 | : splitter.getBoundingClientRect().height;
99 |
100 | setContainerSize(newContainerSize);
101 |
102 | // Parse initial size and convert to percentage
103 | const initialParsedSize = parseSize(initialPrimarySize, newContainerSize);
104 | const initialPercentage = toPercentage(initialParsedSize, newContainerSize);
105 |
106 | setSizePercentage(initialPercentage);
107 |
108 | if (resize) {
109 | const actualPrimarySize = (initialPercentage / 100) * newContainerSize;
110 | resize([actualPrimarySize, newContainerSize - actualPrimarySize]);
111 | }
112 | }
113 | }, [initialPrimarySize, orientation, resize, splitter, swapped]);
114 |
115 | useEffect(() => {
116 | const handleMouseMove = (event: MouseEvent) => {
117 | if (splitter && resizerElement && containerSize > 0) {
118 | const newSize =
119 | orientation === "horizontal"
120 | ? Math.min(
121 | Math.max(
122 | event.clientX - splitter.getBoundingClientRect().left,
123 | parseSize(minPrimarySize, containerSize),
124 | ),
125 | parseSize(maxPrimarySize, containerSize),
126 | )
127 | : Math.min(
128 | Math.max(
129 | event.clientY - splitter.getBoundingClientRect().top,
130 | parseSize(minPrimarySize, containerSize),
131 | ),
132 | parseSize(maxPrimarySize, containerSize),
133 | );
134 |
135 | const newPercentage = toPercentage(newSize, containerSize);
136 | setSizePercentage(newPercentage);
137 |
138 | if (resize) {
139 | resize([
140 | newPercentage,
141 | 100 - newPercentage,
142 | ]);
143 | }
144 | }
145 | };
146 |
147 | const handleMouseUp = () => {
148 | document.removeEventListener("mousemove", handleMouseMove);
149 | document.removeEventListener("mouseup", handleMouseUp);
150 | };
151 |
152 | const handleMouseDown = () => {
153 | document.addEventListener("mousemove", handleMouseMove);
154 | document.addEventListener("mouseup", handleMouseUp);
155 | };
156 |
157 | if (resizerElement) {
158 | resizerElement.addEventListener("mousedown", handleMouseDown);
159 | }
160 |
161 | return () => {
162 | if (resizerElement) {
163 | resizerElement.removeEventListener("mousedown", handleMouseDown);
164 | }
165 | document.removeEventListener("mousemove", handleMouseMove);
166 | document.removeEventListener("mouseup", handleMouseUp);
167 | };
168 | }, [minPrimarySize, maxPrimarySize, orientation, resize, floating, resizerElement, splitter, containerSize]);
169 |
170 | useEffect(() => {
171 | const watchResizer = (event: MouseEvent) => {
172 | const cursorPosition = orientation === "horizontal" ? event.clientX : event.clientY;
173 | if (splitter) {
174 | const paneStart =
175 | orientation === "horizontal"
176 | ? splitter.getBoundingClientRect().left
177 | : splitter.getBoundingClientRect().top;
178 | const resizerPosition = paneStart + size;
179 | // Check if the cursor is near the resizer (within 20 pixels)
180 | if (cursorPosition > resizerPosition - 20 && cursorPosition < resizerPosition + 20) {
181 | setResizerVisible(true);
182 | } else {
183 | setResizerVisible(false);
184 | }
185 | }
186 | };
187 |
188 | if (splitter) {
189 | splitter.addEventListener("mousemove", watchResizer);
190 | splitter.addEventListener("mouseleave", () => setResizerVisible(false));
191 | }
192 |
193 | return () => {
194 | if (splitter) {
195 | splitter.removeEventListener("mouseleave", () => setResizerVisible(false));
196 | splitter.removeEventListener("mousemove", watchResizer);
197 | }
198 | };
199 | }, [size, orientation, splitter]);
200 |
201 | useEffect(() => {
202 | if (floatingResizer) {
203 | floatingResizer.style.opacity = resizerVisible ? "1" : "0";
204 | }
205 | }, [floatingResizer, resizerVisible]);
206 |
207 | return (
208 | <div
209 | {...rest}
210 | ref={(s) => setSplitter(s)}
211 | className={classnames(
212 | styles.splitter,
213 | {
214 | [styles.horizontal]: orientation === "horizontal",
215 | [styles.vertical]: orientation === "vertical",
216 | },
217 | className,
218 | )}
219 | style={style}
220 | >
221 | {isMultiPanel ? (
222 | <>
223 | <div
224 | style={!swapped ? { flexBasis: size } : {}}
225 | className={classnames({
226 | [styles.primaryPanel]: !swapped,
227 | [styles.secondaryPanel]: swapped,
228 | })}
229 | >
230 | {childrenArray[0]}
231 | </div>
232 | {!floating && (
233 | <div
234 | className={classnames(styles.resizer, {
235 | [styles.horizontal]: orientation === "horizontal",
236 | [styles.vertical]: orientation === "vertical",
237 | })}
238 | ref={(r) => setResizer(r)}
239 | >
240 | {splitterTemplate}
241 | </div>
242 | )}
243 | <div
244 | className={classnames({
245 | [styles.primaryPanel]: swapped,
246 | [styles.secondaryPanel]: !swapped,
247 | })}
248 | style={swapped ? { flexBasis: size } : {}}
249 | >
250 | {childrenArray[1]}
251 | </div>
252 | {floating && (
253 | <div
254 | ref={(fr) => setFloatingResizer(fr)}
255 | className={classnames(styles.floatingResizer, {
256 | [styles.horizontal]: orientation === "horizontal",
257 | [styles.vertical]: orientation === "vertical",
258 | })}
259 | style={{
260 | top: orientation === "horizontal" ? 0 : size,
261 | left: orientation === "horizontal" ? size : 0,
262 | }}
263 | >
264 | {splitterTemplate}
265 | </div>
266 | )}
267 | </>
268 | ) : (
269 | <>
270 | {childrenArray?.[0] && (
271 | <div className={styles.panel}>{childrenArray[0]}</div>
272 | )}
273 | </>
274 | )}
275 | </div>
276 | );
277 | };
278 |
```
--------------------------------------------------------------------------------
/xmlui/scripts/generate-docs/DocsGenerator.mjs:
--------------------------------------------------------------------------------
```
1 | import { basename, extname, join } from "path";
2 | import { existsSync, writeFileSync } from "fs";
3 | import { unlink, readFile, writeFile, readdir, mkdir } from "fs/promises";
4 | import { logger, LOGGER_LEVELS, processError } from "./logger.mjs";
5 | import { MetadataProcessor } from "./MetadataProcessor.mjs";
6 | import { getSectionBeforeAndAfter, strBufferToLines, toHeadingPath } from "./utils.mjs";
7 | import { buildPagesMap } from "./build-pages-map.mjs";
8 | import { buildDownloadsMap } from "./build-downloads-map.mjs";
9 | import { FOLDERS } from "./folders.mjs";
10 | import {
11 | FILE_EXTENSIONS,
12 | OUTPUT_FILES,
13 | ERROR_MESSAGES,
14 | METADATA_SECTIONS
15 | } from "./constants.mjs";
16 |
17 | logger.setLevels(LOGGER_LEVELS.warning, LOGGER_LEVELS.error);
18 |
19 | export class DocsGenerator {
20 | metadata = [];
21 | folders = {
22 | sourceFolder: FOLDERS.pages,
23 | outFolder: FOLDERS.pages,
24 | examplesFolder: FOLDERS.pages,
25 | };
26 |
27 | constructor(metadata, folders, { excludeComponentStatuses }) {
28 | this.metadata = metadata;
29 | this.folders = folders;
30 | this.expandMetadata(excludeComponentStatuses);
31 | }
32 |
33 | /**
34 | * Filters provided metadata, then adds further information possibly missing.
35 | * @param {string[]} excludeComponentStatuses The status of the component to exclude, e.g. 'in progress' can be excluded
36 | */
37 | expandMetadata(excludeComponentStatuses) {
38 | logger.info("Transforming & expanding component metadata");
39 | this.metadata = Object.entries(this.metadata)
40 | .filter(([_, compData]) => {
41 | return !excludeComponentStatuses.includes(compData.status?.toLowerCase());
42 | })
43 | .map(([compName, compData]) => {
44 | const displayName = compName;
45 |
46 | let componentFolder = "";
47 | if (compData.specializedFrom) {
48 | const parentName = Object.keys(this.metadata).find((name) => name === compData.specializedFrom);
49 | if (parentName) {
50 | componentFolder = this.metadata[parentName].docFolder || compData.specializedFrom;
51 | }
52 | } else {
53 | componentFolder = compData.docFolder || compName;
54 | }
55 |
56 | const descriptionRef = join(componentFolder, `${displayName}.md`);
57 | const extendedComponentData = {
58 | ...compData,
59 | displayName,
60 | description: compData.description,
61 | descriptionRef,
62 | folderPath: componentFolder,
63 | };
64 |
65 | const entries = addDescriptionRef(extendedComponentData, [
66 | METADATA_SECTIONS.PROPS,
67 | METADATA_SECTIONS.EVENTS,
68 | METADATA_SECTIONS.API,
69 | METADATA_SECTIONS.CONTEXT_VARS,
70 | ]);
71 | return { ...extendedComponentData, ...entries };
72 | });
73 | }
74 |
75 | generateDocs() {
76 | logger.info("Processing MDX files");
77 | const metaProcessor = new MetadataProcessor(this.metadata, "", this.folders);
78 | return metaProcessor.processDocfiles();
79 | }
80 |
81 | /**
82 | * Writes the meta file summary to the output folder
83 | * @param {Record<string,string>} metaFileContents The meta file contents
84 | * @param {string} outputFolder The output folder
85 | */
86 | writeMetaSummary(metaFileContents, outputFolder) {
87 | try {
88 | writeFileSync(join(outputFolder, FILE_EXTENSIONS.METADATA), JSON.stringify(metaFileContents, null, 2));
89 | } catch (e) {
90 | logger.error(ERROR_MESSAGES.WRITE_META_FILE_ERROR, e?.message || ERROR_MESSAGES.UNKNOWN_ERROR);
91 | }
92 | }
93 |
94 | async exportMetadataToJson(folderName, filename) {
95 | logger.info("Exporting metadata to JSON");
96 | try {
97 | const outPath = join(FOLDERS.script, "metadata", folderName ?? "");
98 | if (!existsSync(outPath)) {
99 | await mkdir(outPath, { recursive: true });
100 | }
101 | await writeFile(
102 | join(outPath, `${filename ? `${filename}-` : ""}${OUTPUT_FILES.METADATA_JSON}`),
103 | JSON.stringify(this.metadata, null, 2),
104 | );
105 | } catch (error) {
106 | processError(error);
107 | }
108 | }
109 |
110 | /**
111 | * Creates the metadata JSON for the landing page to link components to the documentation.
112 | * @param {string} docsUrl docs site base URL
113 | * @param {string} pathToEndpoint the path that leads to the component articles on the site
114 | */
115 | async createMetadataJsonForLanding(docsUrl, pathToEndpoint) {
116 | logger.info("Creating metadata JSON for landing page");
117 | try {
118 | const dataForLanding = this.metadata.map((component) => ({
119 | displayName: component.displayName,
120 | description: component.description,
121 | docFileLink: new URL(`${pathToEndpoint}/${component.displayName}`, docsUrl).href,
122 | }));
123 | const distMetaFolder = join(FOLDERS.xmluiDist, "metadata");
124 | if (!existsSync(distMetaFolder)) {
125 | await mkdir(distMetaFolder, { recursive: true });
126 | }
127 |
128 | await writeFile(
129 | join(distMetaFolder, OUTPUT_FILES.LANDING_METADATA_JSON),
130 | JSON.stringify(dataForLanding, null, 2),
131 | );
132 | } catch (error) {
133 | processError(error);
134 | }
135 | }
136 |
137 | /**
138 | * Generates the package description section in a specified file for a given Extension package.
139 | * @param {string} packageDescription The data to add to the file
140 | * @param {string} sectionHeading Name & level of the section to (re)generate
141 | * @param {string} fileName The name and absolute path of the file to write to
142 | */
143 | async generatePackageDescription(packageDescription, sectionHeading, fileName) {
144 | logger.info("Creating package description section in specified file");
145 | try {
146 | const outFile = fileName || join(FOLDERS.pages, `${basename(this.folders.sourceFolder)}.md`);
147 |
148 | if (!existsSync(outFile)) {
149 | await writeFile(outFile, "");
150 | }
151 | let buffer = await readFile(outFile, "utf8");
152 |
153 | const { beforeSection, afterSection } = getSectionBeforeAndAfter(buffer, sectionHeading);
154 | const section =
155 | beforeSection + "\n" + sectionHeading + "\n\n" + packageDescription + afterSection;
156 |
157 | await writeFile(outFile, section.trim());
158 | } catch (error) {
159 | processError(error);
160 | }
161 | }
162 |
163 | async generatePermalinksForHeaders() {
164 | logger.info("Generating permalinks for file headings");
165 |
166 | const docFiles = existsSync(this.folders.outFolder)
167 | ? (await readdir(this.folders.outFolder)).filter((file) => extname(file) === FILE_EXTENSIONS.MARKDOWN[0])
168 | : [];
169 |
170 | for (const file of docFiles) {
171 | const filePath = join(this.folders.outFolder, file);
172 | if (!existsSync(filePath)) {
173 | throw new ErrorWithSeverity(`File ${file} does not exist.`, LOGGER_LEVELS.error);
174 | }
175 | await generatePermalinks(filePath);
176 | }
177 | }
178 |
179 | async generateArticleAndDownloadsLinks() {
180 | try {
181 | const pagesMapFile = join(FOLDERS.docsMeta, OUTPUT_FILES.PAGES_MAP);
182 | if (existsSync(pagesMapFile)) {
183 | await unlink(pagesMapFile);
184 | await writeFile(pagesMapFile, "");
185 | }
186 |
187 | logger.info("Generating link IDs for article headings");
188 | buildPagesMap(FOLDERS.pages, pagesMapFile);
189 |
190 | const downloadsMapFile = join(FOLDERS.docsMeta, OUTPUT_FILES.DOWNLOADS_MAP);
191 | if (existsSync(downloadsMapFile)) {
192 | await unlink(downloadsMapFile);
193 | await writeFile(downloadsMapFile, "");
194 | }
195 |
196 | logger.info("Generating link IDs for downloadable files");
197 | buildDownloadsMap(join(FOLDERS.docsRoot, "public", "resources", "files"), downloadsMapFile);
198 | } catch (error) {
199 | processError(error);
200 | }
201 | }
202 | }
203 |
204 | function addDescriptionRef(component, entries = []) {
205 | const result = {};
206 |
207 | if (component) {
208 | entries.forEach((entry) => {
209 | if (component[entry]) {
210 | result[entry] = Object.fromEntries(
211 | Object.entries(component[entry]).map(([k, v]) => {
212 | v.descriptionRef = `${component.displayName}.md?${k}`;
213 | return [k, v];
214 | }),
215 | );
216 | }
217 | });
218 | }
219 |
220 | return result;
221 | }
222 |
223 | /**
224 | * Get the ID and path of the article heading.
225 | * @param {string} articlePath The path of the article.
226 | */
227 | async function generatePermalinks(articlePath) {
228 | try {
229 | const content = await readFile(articlePath, { encoding: "utf8" });
230 | const lines = strBufferToLines(content);
231 | const newContent = appendHeadingIds(lines);
232 | await writeFile(articlePath, newContent, { encoding: "utf8" });
233 | } catch (error) {
234 | processError(error);
235 | }
236 |
237 | // ---
238 |
239 | function appendHeadingIds(lines) {
240 | let newLines = [];
241 | for (const line of lines) {
242 | // Match Headings
243 | const match = line.match(/^#{1,6}\s+.+?\s*(\[#[\w-]+\])?$/);
244 | if (match && typeof match[1] === "undefined") {
245 | newLines.push(
246 | `${line} [#${toHeadingPath(stripApostrophies(stripParentheses(stripBackticks(match[0]))))}]`,
247 | );
248 | continue;
249 | }
250 | // Rest
251 | newLines.push(line);
252 | }
253 | return newLines.join("\n");
254 | }
255 |
256 | function stripBackticks(str) {
257 | return str.replace(/`/g, "");
258 | }
259 |
260 | function stripParentheses(str) {
261 | return str.replace(/\(|\)/g, "");
262 | }
263 |
264 | function stripApostrophies(str) {
265 | return str.replace(/"|'/g, "");
266 | }
267 | }
268 |
```