แผนที่แพ็กเกจ

pantoken เป็น monorepo ของแพ็กเกจขนาดเล็กที่มุ่งจุดประสงค์เดียว จัดกลุ่มเป็นบัคเก็ต ติดตั้งตัวที่เหมาะกับงานของคุณ หรือจะติดตั้งแพ็กเกจรวม pantoken แล้วนำเข้าจาก subpaths ของมัน (เช่น pantoken/css, pantoken/react, pantoken/tailwind) ก็ได้

แกนหลัก

โมเดลร่วมและตัวแปลงที่ทุกอย่างอื่นสร้างขึ้นบน

Package	What it does
@pantoken/model	TypeScript types แบบไม่มี dependency: รูปร่าง Token และสัญญา plugin.
@pantoken/core	แปลงโทเค็นและไอคอน upstream เป็น IR แบบ canonical และเรนเดอร์ CSS.
@pantoken/tokens	IR ที่ถูก resolve แล้วซึ่งบรรจุเป็น JSON แบบสแตติก ต่อธีม รวมทั้งแหล่ง Tokens Studio ดิบ.
@pantoken/utils	ตัวแก้ไขโทเค็น, regex อ้างอิง, ตัวช่วยจัดการ case และสี, การตรวจสอบ drift, และตัว emitter สำหรับ token→utility-class.
@pantoken/plugin-kit	สร้างและประกอบแพลตฟอร์ม pantoken plugins ด้วย definePlugin.
@pantoken/cli	pantoken generate <target> — ออกซอร์สต้นทางสำหรับ native และแพลตฟอร์มต่างๆ.

รูปแบบ (Formats)

แปลงโทเค็นเป็นไฟล์รูปแบบต่างๆ

Package	Output
@pantoken/css	CSS ที่ typed แบบ @property พร้อม light-dark() และไอคอนเป็น data-URI.
@pantoken/scss	ตัวแปร SCSS ที่ resolve เป็นโหมดเดี่ยว.
@pantoken/less	ตัวแปร Less.
@pantoken/stylus	ตัวแปร Stylus.
@pantoken/dtcg	เอกสาร W3C Design Tokens (DTCG).
@pantoken/tokens	IR ในรูปแบบ JavaScript และ JSON (มีระบุไว้ภายใต้ Core ด้วย).
@pantoken/icons	มุมมองที่สะดวกสำหรับไอคอนโทเค็น.
@pantoken/icon-font	ไอคอนเว็บฟอนต์ (TTF, WOFF2) พร้อม CSS ของมัน.
@pantoken/components	ไลบรารีคอมโพเนนต์ CSS แบบ InstUI-look (ปุ่ม, แจ้งเตือน, ตาราง, ฯลฯ) พร้อมรีเซ็ตฐาน, focus ring, การจัดรูปแบบ prose, utilities ข้ามพื้นที่ และฟอนต์แบรนด์ ดู Components.

เรนเดอร์ (Renderers)

การผสานรวมกับเฟรมเวิร์กและเครื่องมือ

Package	For
@pantoken/react	React hooks, <Icon>, และ token provider.
@pantoken/vue, @pantoken/svelte, @pantoken/angular	ไวร์เว็บคอมโพเนนต์เข้าแต่ละเฟรมเวิร์ก.
@pantoken/react-native	ออบเจ็กต์โทเค็นที่เป็นมิตรกับ StyleSheet (ไม่มี CSS variables).
@pantoken/web-components	<instui-icon> และ primitive ที่ styled, ไม่ขึ้นกับเฟรมเวิร์ก.
@pantoken/astro	การตั้งค่าโทเค็นสำหรับไซต์ Astro.
@pantoken/react-markdown, @pantoken/rehype	ไอคอนโทเค็นและ swatches ใน Markdown.
@pantoken/markdown-it	ปลั๊กอิน markdown-it สำหรับโค้ดไอคอนและ color swatches.
@pantoken/css-in-js	ธีมที่ type-safe สำหรับ styled-components และ Emotion.
@pantoken/mui	ธีมสำหรับ Material UI.
@pantoken/bootstrap, @pantoken/shadcn	สะพาน CSS-variable สำหรับ Bootstrap และ shadcn/ui.
@pantoken/foundation	การแทนค่าการตั้งค่า Sass และ overlay CSS สำหรับ Foundation.
@pantoken/docusaurus, @pantoken/vitepress	ธีมสำหรับ Docusaurus และ VitePress.
@pantoken/mintlify	ธีม Mintlify docs.json (สี + พื้นหลัง).
@pantoken/storybook	ธีมสำหรับ Storybook.
@pantoken/pendo	CSS โกลบอลสไตล์ Instructure สำหรับคำแนะนำ Pendo.

Bundlers

การผสานรวมกับเครื่องมือสร้าง

Package	For
@pantoken/vite	ปลั๊กอิน Vite ที่มี virtual modules และการฉีด CSS.
@pantoken/next	withPantoken สำหรับ Next.js transpilePackages.
@pantoken/webpack	ปลั๊กอิน webpack.
@pantoken/postcss	at-rule @pantoken;.
@pantoken/tailwind	preset สำหรับ Tailwind.
@pantoken/panda	preset สำหรับ Panda CSS.

แพลตฟอร์ม (Platforms)

เป้าหมาย native และ site-generator ที่ถูกปล่อยโดย CLI หรือตัว API ของพวกมันเอง

Package	Output
@pantoken/swift	ซอร์ส Swift พร้อมสเตับ manifest ของ SwiftPM.
@pantoken/android	แหล่งทรัพยากร Android XML.
@pantoken/compose	Jetpack Compose Kotlin.
@pantoken/flutter	Flutter Dart.
@pantoken/rust	Rust consts สำหรับ egui หรือ iced.
@pantoken/wordpress	WordPress block-theme theme.json.
@pantoken/vanilla	Vanilla Forums variables.json.
@pantoken/drupal	แอสเซ็ตธีม Drupal.
@pantoken/hugo, @pantoken/jekyll	ข้อมูลไซต์สำหรับ Hugo และ Jekyll.
@pantoken/email	ค่าที่เหมาะสำหรับการฝังในอีเมล HTML.

การออกแบบ (Design)

สำหรับเครื่องมือออกแบบ

Package	Output
@pantoken/figma	payload ของ Figma Variables.
@pantoken/swatches	ชุดสี (ASE, GPL, Sketch) พร้อมแผ่นตัวอย่าง SVG ที่ดูได้.

ปลั๊กอิน (Plugins)

การแปลงแบบเลือกได้ที่ขยายผลลัพธ์โทเค็นหรือ CSS ดู Plugins

Package	What it adds
@pantoken/plugin-stacking	ความลึก z-index ที่ตั้งชื่อเป็นโทเค็น --instui-stacking-*.
@pantoken/plugin-visual-debug	ขอบ outline สำหรับการดีบักการจัดวาง -with-visual-debug.
@pantoken/plugin-simple-icons	ไอคอนแบรนด์จาก simple-icons.
@pantoken/plugin-logos	โลโก้ผลิตภัณฑ์ Instructure เป็น SVG, data URI, และ image tokens.
@pantoken/plugin-prune-custom-props	ปลั๊กอิน PostCSS ที่ตัด custom properties ที่ไม่ได้ใช้.

เครื่องมือ (Tools)

โครงสร้างพื้นฐานสำหรับการสร้าง เอกสาร และเดโมของ monorepo เอง ส่วนใหญ่เป็นภายใน แต่ส่วนประกอบแยกกันได้ ดังนั้นจึงมีเอกสารที่นี่และบางส่วนถูกปล่อยขึ้น npm แยก

Package	What it does
@pantoken/aggregate	สร้างแพ็กเกจเบเรลรวม pantoken และ exports จาก dependencies ของมัน.
@pantoken/validate-generated	ประตูตรวจสอบ drift: ตรวจสอบว่า stylesheets ที่สร้างทั้งหมด resolve กับ token IR หรือไม่.
@pantoken/demo	ตัวรันเดโมแบบ self-hosted: resolve สเปค @demo เป็น iframe และเรนเดอร์ HTML/CSS/JS แบบ same-origin ที่มีธีมโทเค็น.
@cssdoc/core (external)	ตัวสกัดเอกสาร CSS ทั่วไป (TSDoc สำหรับ CSS): แยก doc-comments + CSS AST เป็นโมเดลที่เอกสารใช้เป็นการอ้างอิง CSS API. อยู่ในรีโพของตัวเอง; ถูกนำมาใช้เป็น dependency แบบลิงก์.

@pantoken/validate-generated เป็นสคริปต์ที่รันครั้งเดียว (ถูกเรียกโดย pnpm run ready), ดังนั้นจึงไม่มีหน้าจำนวน API; อันอื่นๆ มีหน้า

AI

ทรัพยากรการตั้งค่า AI สำหรับผู้บริโภค ไฟล์เหล่านี้สำหรับโปรเจกต์ที่ใช้ pantoken ไม่ใช่สำหรับการพัฒนา pantoken เอง

• @pantoken/ai ติดตั้ง AGENTS.md, llms.txt, และกฎผู้ช่วย/ตัวแก้ไข (Cursor, Copilot, Windsurf, Claude Code) ลงใน repository ของผู้บริโภค

ปลั๊กอินสำหรับการพัฒนา (Dev plugins)

ปลั๊กอินที่ผู้เขียนสำหรับเครื่องมือที่ใช้ จัดกลุ่มตาม host แยกกันและสามารถปล่อยได้

Package	Plugs into
@pantoken/typedoc-plugin-demo	TypeDoc: แปลงแท็กบล็อก @demo <provider>:<ref> เป็นเฟนซ์เดโมที่ฝังได้.
@pantoken/vite-workspace-orchestrator	Vite: สร้างใหม่แพ็กเกจ upstream ของ workspace (และ dependents) เมื่อซอร์สของพวกมันเปลี่ยน.