destyler/destyler

Purpose and Entry Points

Destyler is a TypeScript monorepo for unstyled, accessible web UI primitives. It exposes framework adapters for Vue, React, Solid, Svelte, Lit, and vanilla DOM while keeping component interaction logic framework-neutral. Public package entry points are typically packages/components/*/index.ts and packages/frameworks/*/index.ts; workspace orchestration begins at package.json and pnpm-workspace.yaml.

Headless Component Architecture

Each component package follows a uniform state-machine architecture: anatomy defines semantic parts, a machine owns state/transitions, connect projects machine state into framework-usable APIs/props, and DOM/props/type layers define boundaries.

• packages/components/dialog/src/machine.ts

• packages/components/dialog/src/connect.ts

• packages/components/dialog/src/anatomy.ts

This pattern is replicated across interactive primitives such as combobox, calendar, slider, popover, tree, tour, and toast. Consumers render markup and apply returned props; Destyler does not impose production styling.

State-Machine Runtime

packages/xstate is the core interaction runtime/wrapper layer used by component machines. It provides machine creation, proxying, transition utilities, delayed events, guard helpers, and prop merging.

• packages/xstate/src/machine.ts

• packages/xstate/src/create-proxy.ts

• packages/xstate/src/transition-utils.ts

Primary control flow: user/browser event → component machine transition → state snapshot/context update → connect.ts generates part props/state → framework renderer updates DOM. This separates interaction semantics from rendering implementation.

Framework Integration Boundary

Framework packages adapt actor/machine lifecycle and normalize cross-framework DOM props. They are the key boundary between headless component APIs and each renderer.

• packages/frameworks/vue/src/composition/machine.ts

• packages/frameworks/react/src/hooks/use-machine.ts

• packages/frameworks/lit/src/controllers/machine-controller.ts

The adapters support Vue composition APIs, React hooks, Solid hooks, Svelte rune-oriented hooks, Lit controllers/directives, and imperative vanilla helpers. Portal implementations in framework packages handle overlay rendering where required.

Shared Browser Behaviors and Domain Utilities

Reusable packages provide the browser-level behavior that machines compose: focus, dismissal, geometry, placement, DOM querying, collections, dates, colors, files, and accessibility isolation.

• packages/shareds/dismissable/src/dismissable-layer.ts

• packages/shareds/focus-trap/src/focus-trap.ts

• packages/shareds/popper/src/get-placement.ts

Specialized components additionally own domain parsing/collection logic—for example packages/components/select/src/collection.ts, packages/components/calendar/src/parse.ts, and packages/components/tour/src/utils/step.ts. These are internal implementation boundaries rather than renderer concerns.

Rendering Assets, Examples, and Documentation

The shared workspace supplies reusable demo controls, visualizers, and optional component CSS, distinct from unstyled runtime packages.

• shared/src/index.ts

• shared/src/styles/components/dialog.css

• shared/src/vue/components/Layout.vue

Each component contains framework-specific examples, snippets, Storybook stories, and MDX docs. The Astro documentation site consumes documentation data and framework-specific previews.

• document/src/content.config.ts

• document/src/components/FrameworkLayout.astro

• packages/docs/src/data.ts

Build, Validation, and Delivery

The repository runs on Node.js with pnpm workspaces, TypeScript, tsdown package builds, Vitest configurations, Astro documentation, and Storybook integration. CI/release automation is GitHub Actions-based.

• vitest.config.ts

• scripts/publish.ts

• .github/workflows/release.yml

Publishing is npm-oriented, as indicated by package metadata and release scripts; documentation is deployed through scripts/deploy.ts. No application backend or external runtime service is represented in the tree.