{"_id":"@5stack/ui","_rev":"3-f53e8d57ee8384d9f78d067f6b13f0b1","name":"@5stack/ui","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@5stack/ui","version":"0.1.0","license":"MIT","_id":"@5stack/ui@0.1.0","maintainers":[{"name":"lukepolo","email":"luke@lukepolo.com"}],"dist":{"shasum":"66ebe9c9de834bd7bb9faf767368b061d86b0eba","tarball":"https://registry.npmjs.org/@5stack/ui/-/ui-0.1.0.tgz","fileCount":6,"integrity":"sha512-FYz5iwtOrSMSKKkRGvUNxfW+Lf4Wt1SINL0XvENP/tcHXevEMLaOcEY16319NF9rg95D0YNWjt6AxfbnTVcTnQ==","signatures":[{"sig":"MEUCIFdY5816CHrXgcEv6zrjYpaymbY4isaay8bRYXsxDDXRAiEAlc7PQR337ACQW5TE1eoKXipmL9dRykiI4/DDcRo6UAc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11789},"type":"module","exports":{".":{"types":"./src/index.ts","import":"./src/index.ts"},"./lib/utils":"./src/lib/utils.ts","./tokens.css":"./tokens.css","./tailwind-preset":"./tailwind-preset.cjs"},"_npmUser":{"name":"lukepolo","email":"luke@lukepolo.com"},"_npmVersion":"10.9.4","description":"Shared 5stack design system: shadcn-vue components, Tailwind preset, and design tokens. Consumed by web and custom-page plugins; shared as a Module Federation singleton.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.21.1","dependencies":{"tailwindcss-animate":"^1.0.7"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.8.3","tailwindcss":"^3.4.17"},"peerDependencies":{"vue":"^3.5.0","clsx":"^2.1.0","reka-ui":"^2.9.0","tailwind-merge":"^3.0.0","lucide-vue-next":"^0.508.0","class-variance-authority":"^0.7.0"},"_npmOperationalInternal":{"tmp":"tmp/ui_0.1.0_1784311141310_0.350703801754372","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@5stack/ui","version":"0.1.1","license":"MIT","_id":"@5stack/ui@0.1.1","maintainers":[{"name":"lukepolo","email":"luke@lukepolo.com"}],"dist":{"shasum":"5243627616e8806cdc81e6897d7031b5800abce6","tarball":"https://registry.npmjs.org/@5stack/ui/-/ui-0.1.1.tgz","fileCount":6,"integrity":"sha512-6NGzTpK/eMROX02/yj0Xph1NpUJEa6IAxRmSC0+/EkBDrK6o7Am1rHuqt3VX3L9y2ebAec9nN0uID0Mjc9hgbQ==","signatures":[{"sig":"MEUCIQDRUrZTdwSpqCNdqypshwHYkFjDU+aw4IOU1+Vh+AdmxAIgA40gN6Dt4yV6e8SyFutou7LmdV0qRLEDcUv2ur+sKWY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11791},"type":"module","exports":{".":{"types":"./src/index.ts","import":"./src/index.ts"},"./lib/utils":"./src/lib/utils.ts","./tokens.css":"./tokens.css","./tailwind-preset":"./tailwind-preset.cjs"},"_npmUser":{"name":"lukepolo","email":"luke@lukepolo.com"},"_npmVersion":"10.9.4","description":"Shared 5stack design system: shadcn-vue components, Tailwind preset, and design tokens. Consumed by web and custom-page plugins; shared as a Module Federation singleton.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.21.1","dependencies":{"tailwindcss-animate":"^1.0.7"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.8.3","tailwindcss":"^3.4.17"},"peerDependencies":{"vue":"^3.5.0","clsx":"^2.1.0","reka-ui":"^2.9.0","tailwind-merge":"^3.0.0","lucide-vue-next":"^0.508.0","class-variance-authority":"^0.7.0"},"_npmOperationalInternal":{"tmp":"tmp/ui_0.1.1_1784313779329_0.7668021078924763","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@5stack/ui","version":"0.2.0","description":"Shared 5stack design system: shadcn-vue components, Tailwind preset, and design tokens. Consumed by web and custom-page plugins; shared as a Module Federation singleton.","license":"MIT","type":"module","publishConfig":{"access":"public"},"sideEffects":["*.css"],"exports":{".":{"types":"./src/index.ts","import":"./src/index.ts"},"./tailwind-preset":"./tailwind-preset.cjs","./tailwind-plugin-preset":"./tailwind-plugin-preset.cjs","./tokens.css":"./tokens.css","./plugin.css":"./plugin.css","./standalone.css":"./standalone.css","./lib/utils":"./src/lib/utils.ts"},"peerDependencies":{"vue":"^3.5.0","reka-ui":"^2.9.0","lucide-vue-next":"^0.508.0","class-variance-authority":"^0.7.0","tailwind-merge":"^3.0.0","clsx":"^2.1.0"},"dependencies":{"tailwindcss-animate":"^1.0.7"},"devDependencies":{"tailwindcss":"^3.4.17","typescript":"^5.8.3"},"_id":"@5stack/ui@0.2.0","gitHead":"1a2ca87765e32690c79478d6e8e9ec6c1091df5a","_nodeVersion":"22.21.1","_npmVersion":"10.9.4","dist":{"integrity":"sha512-QMsKdjfV9/JBj0oB+XodC9ELAatghFWX8RFSAW3uVC6aNvfA4fws1P+Uh/MHvFSosHQEZW5WSxiG/aCRF2M0vQ==","shasum":"650e8354add4f9ad936380bbda06cf92b5cf37b7","tarball":"https://registry.npmjs.org/@5stack/ui/-/ui-0.2.0.tgz","fileCount":9,"unpackedSize":20607,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIG8+1/wo2HeOugg+H/wcVTtuJvl2rKLUNZ931MLKxoXfAiEA9YjVZK5EgP1MT/HLcn8hf3TX7f3ML6sZDC0A7rnJXIU="}]},"_npmUser":{"name":"lukepolo","email":"luke@lukepolo.com"},"directories":{},"maintainers":[{"name":"lukepolo","email":"luke@lukepolo.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui_0.2.0_1784423527613_0.606612576261542"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-17T17:59:01.084Z","modified":"2026-07-19T01:12:07.926Z","0.1.0":"2026-07-17T17:59:01.452Z","0.1.1":"2026-07-17T18:42:59.481Z","0.2.0":"2026-07-19T01:12:07.750Z"},"license":"MIT","description":"Shared 5stack design system: shadcn-vue components, Tailwind preset, and design tokens. Consumed by web and custom-page plugins; shared as a Module Federation singleton.","maintainers":[{"name":"lukepolo","email":"luke@lukepolo.com"}],"readme":"# @5stack/ui\n\nShared 5stack design system — the single source of truth for the shadcn-vue\ncomponent set, the Tailwind preset, and the design tokens. Consumed by:\n\n- **web** (the 5stack panel)\n- every **custom-page plugin** (e.g. `5stack-inventory-plugin`)\n\nBoth declare it as a **Module Federation shared singleton**, so exactly one\ninstance loads at runtime and components share reactive context.\n\n## Usage\n\n### Custom-page plugins\n\nTwo lines of config and one attribute. Everything a plugin emits is then scoped\nso it cannot damage the host panel:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  presets: [require(\"@5stack/ui/tailwind-plugin-preset\")],\n  content: [\"./index.html\", \"./src/**/*.{vue,ts}\"],\n};\n```\n\n```css\n/* src/style.css — your Tailwind entrypoint. Do NOT add @tailwind base. */\n@import \"@5stack/ui/plugin.css\";\n```\n\n```vue\n<div data-5stack-plugin style=\"display: contents\"> … </div>\n```\n\nOptionally, in your **dev entry only**, for standalone `npm run dev`:\n\n```ts\nif (import.meta.env.DEV) import(\"@5stack/ui/standalone.css\");\n```\n\n### Web (the panel)\n\nWeb owns the document, so it uses the base preset and applies preflight and\ntokens globally as normal:\n\n```js\npresets: [require(\"@5stack/ui/tailwind-preset\")],\n```\n\nHelpers / components:\n\n```ts\nimport { cn } from \"@5stack/ui\";\n```\n\n## Contents\n\n| Path | What |\n| --- | --- |\n| `tailwind-preset.cjs` | token → utility color mappings, radius, animations |\n| `tailwind-plugin-preset.cjs` | the above + `important` scoping + content glob, for plugins |\n| `tokens.css` | `:where(:root)` / `:where(.dark)` CSS-variable definitions |\n| `plugin.css` | the plugin entrypoint: tokens + components + utilities + scoped base |\n| `standalone.css` | global preflight; plugin dev entries only, never shipped |\n| `src/lib/utils.ts` | `cn()` class-merge helper |\n| `src/index.ts` | package entry; components are added here incrementally |\n\n## Why plugins get their own entrypoint\n\nModule Federation shares JS, not CSS, so a plugin's Tailwind is inlined into\n`remoteEntry.js` and installs itself into `<head>` **after** the panel's own\nstylesheet. Anything global a plugin emits therefore lands on top of host\nchrome — Tailwind's preflight repainting `*{border-color}` showed up as a pale\nline down the panel sidebar, and an unscoped `.hidden` breaks the panel's\n`hidden md:flex` nav outright.\n\n`plugin.css` + `tailwind-plugin-preset` exist so plugin authors never have to\nknow that: they emit zero global rules. Tokens sit at `:where()` (zero\nspecificity) so the host's live branding always wins, and every utility and base\nrule is scoped to `[data-5stack-plugin]`.\n\n## Seeding components\n\nThe shadcn-vue primitives currently live in `web/components/ui/*` (\"new-york\",\nbase color zinc). Move/copy them here and re-export from `src/index.ts`; web then\nmigrates its `~/components/ui/*` imports to `@5stack/ui`. Do this incrementally —\na plugin only needs the components it actually uses.\n\n## Version discipline\n\nEvery consumer must pin the **same** versions of the Federation shared\nsingletons (`vue`, `reka-ui`, `pinia`, `@5stack/ui`) as `web`, or a second copy\nloads at runtime and breaks reactivity/component context.\n\n## 0.2.0 — breaking\n\n`tokens.css` is now tokens only: no `@tailwind` directives, no global resets.\nImporting it alone no longer emits any utilities, so a plugin that did\n`@import \"@5stack/ui/tokens.css\"` as its Tailwind entrypoint will build to an\nempty stylesheet. Migrate to the plugin setup above:\n\n1. `@import \"@5stack/ui/plugin.css\"` instead of `tokens.css`\n2. `tailwind-plugin-preset` instead of `tailwind-preset`\n3. drop your own `important: \"[data-my-plugin]\"`, put `data-5stack-plugin` on\n   your root element (keep your old attribute too if hand-written CSS uses it)\n4. move any `@tailwind base` to a dev-entry-only `standalone.css` import\n","readmeFilename":"README.md"}