wip

Author: lukepolo

package.json

@@ -11,7 +11,7 @@
     "typecheck": "vue-tsc --noEmit"
   },
   "dependencies": {
-    "@5stack/ui": "^0.1.1",
+    "@5stack/ui": "^0.2.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-vue-next": "^0.508.0",

src/App.vue

@@ -10,10 +10,12 @@ defineProps<{
 </script>
 
 <template>
-  <!-- data-hello-plugin anchors the Tailwind `important` selector, so this
-       plugin's utilities can never leak onto the panel's own chrome.
-       display:contents keeps the wrapper from adding a layout box. -->
-  <div data-hello-plugin style="display: contents">
+  <!-- data-5stack-plugin anchors the `important` selector from
+       @5stack/ui/tailwind-plugin-preset, so this plugin's utilities and base
+       rules can never leak onto the panel's own chrome. Required on the root of
+       every custom page. display:contents keeps the wrapper from adding a
+       layout box. -->
+  <div data-5stack-plugin style="display: contents">
     <div
       class="flex min-h-hero flex-col items-center justify-center gap-4 p-8 text-center"
     >

src/main.ts

@@ -2,6 +2,14 @@
 import { createApp } from "vue";
 import App from "./App.vue";
 
+// Global preflight for standalone dev only — outside the panel nothing has
+// reset UA styles. The panel applies its own when embedded, and shipping
+// preflight is what damages the host chrome, so the guard keeps it out of the
+// production bundle entirely.
+if (import.meta.env.DEV) {
+  import("@5stack/ui/standalone.css");
+}
+
 createApp(App, {
   user: { steam_id: "76561197960265728", name: "Dev User", role: "administrator" },
 }).mount("#app");

src/shims-vue.d.ts

@@ -3,4 +3,5 @@ declare module "*.vue" {
   const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
   export default component;
 }
-declare module "@5stack/ui/tokens.css";
+declare module "@5stack/ui/plugin.css";
+declare module "@5stack/ui/standalone.css";

src/style.css

@@ -1 +1,5 @@
-@import "@5stack/ui/tokens.css";
+/* Everything this plugin needs: tokens, components, utilities, and the scoped
+   base rules. Deliberately no `@tailwind` directives of your own — plugin.css
+   is the Tailwind entrypoint, and adding `@tailwind base` here would emit
+   global preflight that repaints the panel's chrome. */
+@import "@5stack/ui/plugin.css";

tailwind.config.js

@@ -1,17 +1,10 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: ["class"],
-  // This plugin's CSS is injected at runtime AFTER the panel's stylesheet, so an
-  // unscoped utility like `.hidden` would override the host's `hidden md:flex`
-  // sidebar pattern and nuke the panel nav. Scoping every generated utility
-  // under the plugin root makes that impossible. Rename this alongside `scope`.
-  important: "[data-hello-plugin]",
-  presets: [require("@5stack/ui/tailwind-preset")],
-  content: [
-    "./index.html",
-    "./src/**/*.{vue,ts}",
-    "./node_modules/@5stack/ui/src/**/*.{vue,ts}",
-  ],
+  // The plugin preset scopes every generated utility under [data-5stack-plugin]
+  // and adds the @5stack/ui content glob, so a plugin can never leak CSS onto
+  // the panel's chrome. Anchor the attribute on your root element (see App.vue).
+  presets: [require("@5stack/ui/tailwind-plugin-preset")],
+  content: ["./index.html", "./src/**/*.{vue,ts}"],
   theme: {
     extend: {
       // Named tokens instead of arbitrary values like `min-h-[60vh]`. Escaped