@dotnaos/ui

@dotnaos/ui is the complete public bundle for the DotNaos component system. Consumer-facing imports use slash-based subpaths:

import { Stack, Button } from "@dotnaos/ui/base";
import { ListDetailPageLayout } from "@dotnaos/ui/layout";
import { FileExplorer } from "@dotnaos/ui/file-tree";
import { GitClient } from "@dotnaos/ui/source-control";
import { PdfViewer } from "@dotnaos/ui/pdf-viewer";

Internal workspace package names use npm-compatible hyphenated names such as @dotnaos/ui-base; those names are implementation details and do not define the public import style or the component-tree labels.

Packages

ui bundle
├── base                 generic primitives, controls, and surfaces
├── layout               panels, shells, and responsive page layouts
├── tree                 generic flat or nested tree behavior
├── file-tree            file navigation and actionable explorer
├── code-editor          editable and read-only code surfaces
├── markdown-editor      Markdown rendering and editing
├── chat                 backend-agnostic chat presentation
├── ai                   assistant controls and composed AI surfaces
├── source-control       changes, diffs, history, and complete Git client
├── canvas               drawing surface and editor
├── calendar             calendar parts and complete calendar
├── pdf-viewer           PDF render parts and complete viewer surfaces
├── settings             fields, groups, panels, and settings page
├── workspace-picker     workspace rows, tree, picker, dialog, and page
├── devtools             review and inspection tooling
├── web                  web runtime composition
└── native               native primitives and native-owned components

Every component domain is a real package under components/ui. git-client is part of source-control, and the former node-tree package is now the generic tree package. Primitives live directly in base; there is no separate primitives, shared, or adapter package.

Architecture rules

• Feature packages depend on lower-level packages and never import from the @dotnaos/ui bundle.
• Web components compose the theme-aware Container and semantic surfaces instead of repeating padding, radius, and background choices.
• Native owns its renderer and shares only platform-neutral design tokens and deliberate contracts.
• Public feature packages can export small rendering units, composed embedded experiences, and optional dialog or page surfaces.
• A meaningful underscore-prefixed path is private and is never exported from its package.
• Every exported React component has a colocated *.design.tsx definition.
• Packages and folders organize source discovery only; runtime composition and Strict UI identity still come from JSX and typed Slots.

The authoritative architecture and refactor contract is ../../docs/ui-repository-refactor-plan.md.

Styling and previews

Web consumers import the shared design styles once:

import "@dotnaos/design/tokens.css";
import "@dotnaos/design/theme.css";
import "@dotnaos/design/styles.css";
import "@dotnaos/ui/styles.css";

Design Space reads the real package and source folders from .designspace.ts; the library does not require its own development server just to be discovered or compiled.