Bản đồ gói

pantoken là một monorepo gồm các gói nhỏ, chuyên dụng được gom vào các bucket. Cài gói phù hợp với nhiệm vụ của bạn, hoặc cài gói hợp nhất pantoken và import từ các subpath của nó (ví dụ pantoken/css, pantoken/react, pantoken/tailwind).

Core

Mô hình chia sẻ và transformer mà mọi thứ khác xây dựng trên.

Package	Chức năng
@pantoken/model	Kiểu TypeScript không phụ thuộc: hình dạng Token và hợp đồng plugin.
@pantoken/core	Giải quyết các token và icon upstream thành IR chuẩn, và render CSS.
@pantoken/tokens	IR đã được giải quyết đóng gói dưới dạng JSON tĩnh, theo theme, cùng với nguồn Tokens Studio thô.
@pantoken/utils	Bộ giải token, regex tham chiếu, trợ giúp case và màu, kiểm tra drift, và bộ emitters token→utility-class.
@pantoken/plugin-kit	Xây dựng và ghép các plugin pantoken với definePlugin.
@pantoken/cli	pantoken generate <target> — phát sinh mã nguồn native và cho từng nền tảng.

Formats

Biến các token thành định dạng tệp.

Package	Đầu ra
@pantoken/css	CSS kiểu @property với light-dark() và icon dạng data-URI.
@pantoken/scss	Biến SCSS, được giải quyết thành một chế độ duy nhất.
@pantoken/less	Biến Less.
@pantoken/stylus	Biến Stylus.
@pantoken/dtcg	Một tài liệu W3C Design Tokens (DTCG).
@pantoken/tokens	IR dưới dạng JavaScript và JSON (cũng được liệt kê trong Core).
@pantoken/icons	Một giao diện tiện dụng cho các icon token.
@pantoken/icon-font	Một font web icon (TTF, WOFF2) cùng với CSS của nó.
@pantoken/components	Thư viện component CSS theo giao diện InstUI (button, alert, table, và nhiều hơn nữa) cùng với reset cơ bản kèm focus ring, kiểu prose, utilities xuyên cắt, và font thương hiệu. Xem Components.

Renderers

Tích hợp framework và công cụ.

Package	Dùng cho
@pantoken/react	React hooks, <Icon>, và một token provider.
@pantoken/vue, @pantoken/svelte, @pantoken/angular	Web component, được nối vào từng framework.
@pantoken/react-native	Đối tượng token thân thiện với StyleSheet (không dùng CSS variables).
@pantoken/web-components	<instui-icon> và các primitive có style, không phụ thuộc framework.
@pantoken/astro	Thiết lập token cho các site Astro.
@pantoken/react-markdown, @pantoken/rehype	Icon token và swatches trong Markdown.
@pantoken/markdown-it	Plugin markdown-it cho mã icon và color swatches.
@pantoken/css-in-js	Theme có kiểu an toàn cho styled-components và Emotion.
@pantoken/mui	Theme cho Material UI.
@pantoken/bootstrap, @pantoken/shadcn	Cầu nối CSS-variable cho Bootstrap và shadcn/ui.
@pantoken/foundation	Ghi đè cài đặt Sass và overlay CSS cho Foundation.
@pantoken/docusaurus, @pantoken/vitepress	Theme cho Docusaurus và VitePress.
@pantoken/mintlify	Một theme Mintlify docs.json (màu + nền).
@pantoken/storybook	Theme cho Storybook.
@pantoken/pendo	CSS toàn cục theo style Instructure cho hướng dẫn Pendo.

Bundlers

Tích hợp công cụ build.

Package	Dùng cho
@pantoken/vite	Plugin Vite với virtual modules và chèn CSS.
@pantoken/next	withPantoken cho Next.js transpilePackages.
@pantoken/webpack	Plugin webpack.
@pantoken/postcss	@pantoken; at-rule.
@pantoken/tailwind	Preset Tailwind.
@pantoken/panda	Preset Panda CSS.

Platforms

Đầu ra cho native và site-generator, được CLI hoặc API riêng của chúng phát sinh.

Package	Đầu ra
@pantoken/swift	Mã Swift cộng với stub manifest SwiftPM.
@pantoken/android	Tài nguyên Android XML.
@pantoken/compose	Jetpack Compose Kotlin.
@pantoken/flutter	Flutter Dart.
@pantoken/rust	Rust consts cho egui hoặc iced.
@pantoken/wordpress	Một theme.json theme cho WordPress.
@pantoken/vanilla	Một variables.json cho Vanilla Forums.
@pantoken/drupal	Tài sản theme cho Drupal.
@pantoken/hugo, @pantoken/jekyll	Dữ liệu site cho Hugo và Jekyll.
@pantoken/email	Giá trị thân thiện cho HTML email.

Design

Dành cho công cụ thiết kế.

Package	Đầu ra
@pantoken/figma	Payload Figma Variables.
@pantoken/swatches	Color swatches (ASE, GPL, Sketch) cùng với bảng mẫu SVG có thể xem.

Plugins

Các transform tùy chọn mở rộng token hoặc đầu ra CSS. Xem Plugins.

Package	Thêm vào
@pantoken/plugin-stacking	Độ sâu z-index đặt tên dưới dạng token --instui-stacking-*.
@pantoken/plugin-visual-debug	-with-visual-debug outline để debug layout.
@pantoken/plugin-simple-icons	Icon thương hiệu từ simple-icons.
@pantoken/plugin-logos	Logo sản phẩm Instructure dưới dạng SVG, data URI, và image token.
@pantoken/plugin-prune-custom-props	Plugin PostCSS bỏ các custom properties không dùng.

Tools

Cơ sở hạ tầng build, docs, và demo cho chính monorepo. Phần lớn là nội bộ, nhưng các thành phần tách rời và một số được xuất lên npm riêng.

Package	Chức năng
@pantoken/aggregate	Sinh ra gói hợp nhất pantoken barrel và exports từ các dependency của nó.
@pantoken/validate-generated	Cổng drift: kiểm tra mọi stylesheet được tạo có thể được giải quyết so với token IR.
@pantoken/demo	Trình chạy demo live tự-host: giải quyết một spec @demo thành iframe và render HTML/CSS/JS cùng nguồn gốc, theo chủ đề token.
@cssdoc/core (external)	Bộ trích xuất tài liệu CSS tổng quát (TSDoc cho CSS): phân tích doc-comments + AST CSS thành mô hình mà docs phát ra làm tham chiếu API CSS. Nằm trong repo riêng; tiêu thụ qua dependency liên kết.

@pantoken/validate-generated là script chạy một lần (được gọi bởi pnpm run ready), nên không có trang API; các mục khác có.

AI

Tài sản thiết lập AI dành cho người tiêu dùng. Dùng cho dự án sử dụng pantoken, không phải để phát triển pantoken.

• @pantoken/ai cài đặt AGENTS.md, llms.txt, và các quy tắc trợ lý/trình soạn thảo (Cursor, Copilot, Windsurf, Claude Code) vào repo tiêu dùng.

Dev plugins

Plugins do chúng tôi viết cho các công cụ đang dùng, nhóm theo host. Chúng độc lập và có thể publish.

Package	Cắm vào
@pantoken/typedoc-plugin-demo	TypeDoc: biến thẻ block @demo <provider>:<ref> thành một demo fence có thể nhúng.
@pantoken/vite-workspace-orchestrator	Vite: rebuild các package workspace upstream (và dependents) khi source của chúng thay đổi.