@verbb/plugin-kit-vue 2.0.0

package/tailwind-preflight-scope.css

@@ -0,0 +1,28 @@
+/**
+ * Tailwind-beside-kit host contract (documentation + no-op import target).
+ *
+ * ## Cascade fact
+ * Outer author styles that match a custom element **beat** shadow `:host` for
+ * margin/padding (encapsulation context). Tailwind preflight’s `* { margin: 0 }`
+ * therefore zeros kit host margins. That is not Kit being “restricted” — it’s
+ * how shadow hosts participate in the cascade.
+ *
+ * ## What does *not* work
+ * `margin: revert-layer` on `[data-pk]` looks like a fix but still specifies an
+ * **outer** value (usually the previous layer / UA `0`). Outer still wins, so
+ * `:host { margin: … }` never shows up. DevTools will highlight this rule and
+ * the host will still measure with no margin.
+ *
+ * ## What does work
+ * 1. Prefer default rhythm **inside** the shadow tree (e.g. `pk-separator` paints
+ *    a `.line` with margin — outer resets cannot reach it).
+ * 2. When spacing **must** live on the host (sibling gaps in a flex row, e.g.
+ *    button-group hairlines), mark those `:host` margins `!important` so they
+ *    outrank outer non-important author styles.
+ * 3. Host apps may still set host margin/padding intentionally (utilities like
+ *    `my-4`) — those outer rules remain the override surface for consumers.
+ *
+ * Keep importing this file after `@import "tailwindcss"` so consumers have a
+ * stable contract path; rules that claimed to “restore” host margin were removed
+ * because they were harmful.
+ */

package/tailwind-theme.css

@@ -0,0 +1,245 @@
+/**
+ * Tailwind v4 theme bridge — map utility colors onto Plugin Kit tokens.
+ * Import separately from style.css (tokens/FOUCE) so head FOUCE minify does not
+ * see unknown `@theme`. Classes like `bg-gray-50` / `border-gray-150` resolve
+ * to Craft-aligned PK colors when the app also `@import "tailwindcss"`.
+ */
+
+@theme {
+    /* Reset stock Tailwind color scale; rebuild from PK tokens. */
+    --color-*: initial;
+
+    --color-white: var(--pk-color-white);
+    --color-black: var(--pk-color-black);
+    --color-link: var(--pk-color-link);
+    --color-error: var(--pk-color-error);
+    --color-success: var(--pk-color-success);
+    --color-warning: var(--pk-color-warning);
+    --color-gray-50: var(--pk-color-gray-50);
+    --color-gray-100: var(--pk-color-gray-100);
+    --color-gray-150: var(--pk-color-gray-150);
+    --color-gray-200: var(--pk-color-gray-200);
+    --color-gray-250: var(--pk-color-gray-250);
+    --color-gray-300: var(--pk-color-gray-300);
+    --color-gray-350: var(--pk-color-gray-350);
+    --color-gray-400: var(--pk-color-gray-400);
+    --color-gray-500: var(--pk-color-gray-500);
+    --color-gray-550: var(--pk-color-gray-550);
+    --color-gray-600: var(--pk-color-gray-600);
+    --color-gray-700: var(--pk-color-gray-700);
+    --color-gray-800: var(--pk-color-gray-800);
+    --color-gray-900: var(--pk-color-gray-900);
+    --color-gray-1000: var(--pk-color-gray-1000);
+    --color-slate-50: var(--pk-color-slate-50);
+    --color-slate-100: var(--pk-color-slate-100);
+    --color-slate-150: var(--pk-color-slate-150);
+    --color-slate-200: var(--pk-color-slate-200);
+    --color-slate-250: var(--pk-color-slate-250);
+    --color-slate-300: var(--pk-color-slate-300);
+    --color-slate-350: var(--pk-color-slate-350);
+    --color-slate-400: var(--pk-color-slate-400);
+    --color-slate-500: var(--pk-color-slate-500);
+    --color-slate-550: var(--pk-color-slate-550);
+    --color-slate-600: var(--pk-color-slate-600);
+    --color-slate-700: var(--pk-color-slate-700);
+    --color-slate-800: var(--pk-color-slate-800);
+    --color-slate-900: var(--pk-color-slate-900);
+    --color-slate-1000: var(--pk-color-slate-1000);
+    --color-red-50: var(--pk-color-red-50);
+    --color-red-100: var(--pk-color-red-100);
+    --color-red-200: var(--pk-color-red-200);
+    --color-red-300: var(--pk-color-red-300);
+    --color-red-400: var(--pk-color-red-400);
+    --color-red-500: var(--pk-color-red-500);
+    --color-red-600: var(--pk-color-red-600);
+    --color-red-700: var(--pk-color-red-700);
+    --color-red-800: var(--pk-color-red-800);
+    --color-red-900: var(--pk-color-red-900);
+    --color-red-950: var(--pk-color-red-950);
+    --color-orange-50: var(--pk-color-orange-50);
+    --color-orange-100: var(--pk-color-orange-100);
+    --color-orange-200: var(--pk-color-orange-200);
+    --color-orange-300: var(--pk-color-orange-300);
+    --color-orange-400: var(--pk-color-orange-400);
+    --color-orange-500: var(--pk-color-orange-500);
+    --color-orange-600: var(--pk-color-orange-600);
+    --color-orange-700: var(--pk-color-orange-700);
+    --color-orange-800: var(--pk-color-orange-800);
+    --color-orange-900: var(--pk-color-orange-900);
+    --color-orange-950: var(--pk-color-orange-950);
+    --color-amber-50: var(--pk-color-amber-50);
+    --color-amber-100: var(--pk-color-amber-100);
+    --color-amber-200: var(--pk-color-amber-200);
+    --color-amber-300: var(--pk-color-amber-300);
+    --color-amber-400: var(--pk-color-amber-400);
+    --color-amber-500: var(--pk-color-amber-500);
+    --color-amber-600: var(--pk-color-amber-600);
+    --color-amber-700: var(--pk-color-amber-700);
+    --color-amber-800: var(--pk-color-amber-800);
+    --color-amber-900: var(--pk-color-amber-900);
+    --color-amber-950: var(--pk-color-amber-950);
+    --color-yellow-50: var(--pk-color-yellow-50);
+    --color-yellow-100: var(--pk-color-yellow-100);
+    --color-yellow-200: var(--pk-color-yellow-200);
+    --color-yellow-300: var(--pk-color-yellow-300);
+    --color-yellow-400: var(--pk-color-yellow-400);
+    --color-yellow-500: var(--pk-color-yellow-500);
+    --color-yellow-600: var(--pk-color-yellow-600);
+    --color-yellow-700: var(--pk-color-yellow-700);
+    --color-yellow-750: var(--pk-color-yellow-750);
+    --color-yellow-800: var(--pk-color-yellow-800);
+    --color-yellow-900: var(--pk-color-yellow-900);
+    --color-yellow-950: var(--pk-color-yellow-950);
+    --color-lime-50: var(--pk-color-lime-50);
+    --color-lime-100: var(--pk-color-lime-100);
+    --color-lime-200: var(--pk-color-lime-200);
+    --color-lime-300: var(--pk-color-lime-300);
+    --color-lime-400: var(--pk-color-lime-400);
+    --color-lime-500: var(--pk-color-lime-500);
+    --color-lime-600: var(--pk-color-lime-600);
+    --color-lime-700: var(--pk-color-lime-700);
+    --color-lime-800: var(--pk-color-lime-800);
+    --color-lime-900: var(--pk-color-lime-900);
+    --color-lime-950: var(--pk-color-lime-950);
+    --color-green-050: var(--pk-color-green-050);
+    --color-green-100: var(--pk-color-green-100);
+    --color-green-200: var(--pk-color-green-200);
+    --color-green-300: var(--pk-color-green-300);
+    --color-green-400: var(--pk-color-green-400);
+    --color-green-500: var(--pk-color-green-500);
+    --color-green-600: var(--pk-color-green-600);
+    --color-green-700: var(--pk-color-green-700);
+    --color-green-800: var(--pk-color-green-800);
+    --color-green-900: var(--pk-color-green-900);
+    --color-green-950: var(--pk-color-green-950);
+    --color-emerald-50: var(--pk-color-emerald-50);
+    --color-emerald-100: var(--pk-color-emerald-100);
+    --color-emerald-200: var(--pk-color-emerald-200);
+    --color-emerald-300: var(--pk-color-emerald-300);
+    --color-emerald-400: var(--pk-color-emerald-400);
+    --color-emerald-500: var(--pk-color-emerald-500);
+    --color-emerald-600: var(--pk-color-emerald-600);
+    --color-emerald-700: var(--pk-color-emerald-700);
+    --color-emerald-800: var(--pk-color-emerald-800);
+    --color-emerald-900: var(--pk-color-emerald-900);
+    --color-emerald-950: var(--pk-color-emerald-950);
+    --color-teal-50: var(--pk-color-teal-50);
+    --color-teal-100: var(--pk-color-teal-100);
+    --color-teal-200: var(--pk-color-teal-200);
+    --color-teal-300: var(--pk-color-teal-300);
+    --color-teal-400: var(--pk-color-teal-400);
+    --color-teal-500: var(--pk-color-teal-500);
+    --color-teal-550: var(--pk-color-teal-550);
+    --color-teal-600: var(--pk-color-teal-600);
+    --color-teal-700: var(--pk-color-teal-700);
+    --color-teal-800: var(--pk-color-teal-800);
+    --color-teal-900: var(--pk-color-teal-900);
+    --color-teal-950: var(--pk-color-teal-950);
+    --color-teal-550-border: var(--pk-color-teal-550-border);
+    --color-cyan-50: var(--pk-color-cyan-50);
+    --color-cyan-100: var(--pk-color-cyan-100);
+    --color-cyan-200: var(--pk-color-cyan-200);
+    --color-cyan-300: var(--pk-color-cyan-300);
+    --color-cyan-400: var(--pk-color-cyan-400);
+    --color-cyan-500: var(--pk-color-cyan-500);
+    --color-cyan-600: var(--pk-color-cyan-600);
+    --color-cyan-700: var(--pk-color-cyan-700);
+    --color-cyan-800: var(--pk-color-cyan-800);
+    --color-cyan-900: var(--pk-color-cyan-900);
+    --color-cyan-950: var(--pk-color-cyan-950);
+    --color-sky-50: var(--pk-color-sky-50);
+    --color-sky-100: var(--pk-color-sky-100);
+    --color-sky-200: var(--pk-color-sky-200);
+    --color-sky-300: var(--pk-color-sky-300);
+    --color-sky-400: var(--pk-color-sky-400);
+    --color-sky-500: var(--pk-color-sky-500);
+    --color-sky-600: var(--pk-color-sky-600);
+    --color-sky-700: var(--pk-color-sky-700);
+    --color-sky-800: var(--pk-color-sky-800);
+    --color-sky-900: var(--pk-color-sky-900);
+    --color-sky-950: var(--pk-color-sky-950);
+    --color-blue-50: var(--pk-color-blue-50);
+    --color-blue-100: var(--pk-color-blue-100);
+    --color-blue-200: var(--pk-color-blue-200);
+    --color-blue-300: var(--pk-color-blue-300);
+    --color-blue-400: var(--pk-color-blue-400);
+    --color-blue-500: var(--pk-color-blue-500);
+    --color-blue-600: var(--pk-color-blue-600);
+    --color-blue-700: var(--pk-color-blue-700);
+    --color-blue-800: var(--pk-color-blue-800);
+    --color-blue-900: var(--pk-color-blue-900);
+    --color-blue-950: var(--pk-color-blue-950);
+    --color-indigo-50: var(--pk-color-indigo-50);
+    --color-indigo-100: var(--pk-color-indigo-100);
+    --color-indigo-200: var(--pk-color-indigo-200);
+    --color-indigo-300: var(--pk-color-indigo-300);
+    --color-indigo-400: var(--pk-color-indigo-400);
+    --color-indigo-500: var(--pk-color-indigo-500);
+    --color-indigo-600: var(--pk-color-indigo-600);
+    --color-indigo-700: var(--pk-color-indigo-700);
+    --color-indigo-800: var(--pk-color-indigo-800);
+    --color-indigo-900: var(--pk-color-indigo-900);
+    --color-indigo-950: var(--pk-color-indigo-950);
+    --color-violet-50: var(--pk-color-violet-50);
+    --color-violet-100: var(--pk-color-violet-100);
+    --color-violet-200: var(--pk-color-violet-200);
+    --color-violet-300: var(--pk-color-violet-300);
+    --color-violet-400: var(--pk-color-violet-400);
+    --color-violet-500: var(--pk-color-violet-500);
+    --color-violet-600: var(--pk-color-violet-600);
+    --color-violet-700: var(--pk-color-violet-700);
+    --color-violet-800: var(--pk-color-violet-800);
+    --color-violet-900: var(--pk-color-violet-900);
+    --color-violet-950: var(--pk-color-violet-950);
+    --color-purple-50: var(--pk-color-purple-50);
+    --color-purple-100: var(--pk-color-purple-100);
+    --color-purple-200: var(--pk-color-purple-200);
+    --color-purple-300: var(--pk-color-purple-300);
+    --color-purple-400: var(--pk-color-purple-400);
+    --color-purple-500: var(--pk-color-purple-500);
+    --color-purple-600: var(--pk-color-purple-600);
+    --color-purple-700: var(--pk-color-purple-700);
+    --color-purple-800: var(--pk-color-purple-800);
+    --color-purple-900: var(--pk-color-purple-900);
+    --color-purple-950: var(--pk-color-purple-950);
+    --color-fuchsia-50: var(--pk-color-fuchsia-50);
+    --color-fuchsia-100: var(--pk-color-fuchsia-100);
+    --color-fuchsia-200: var(--pk-color-fuchsia-200);
+    --color-fuchsia-300: var(--pk-color-fuchsia-300);
+    --color-fuchsia-400: var(--pk-color-fuchsia-400);
+    --color-fuchsia-500: var(--pk-color-fuchsia-500);
+    --color-fuchsia-600: var(--pk-color-fuchsia-600);
+    --color-fuchsia-700: var(--pk-color-fuchsia-700);
+    --color-fuchsia-800: var(--pk-color-fuchsia-800);
+    --color-fuchsia-900: var(--pk-color-fuchsia-900);
+    --color-fuchsia-950: var(--pk-color-fuchsia-950);
+    --color-pink-50: var(--pk-color-pink-50);
+    --color-pink-100: var(--pk-color-pink-100);
+    --color-pink-200: var(--pk-color-pink-200);
+    --color-pink-300: var(--pk-color-pink-300);
+    --color-pink-400: var(--pk-color-pink-400);
+    --color-pink-500: var(--pk-color-pink-500);
+    --color-pink-600: var(--pk-color-pink-600);
+    --color-pink-700: var(--pk-color-pink-700);
+    --color-pink-800: var(--pk-color-pink-800);
+    --color-pink-900: var(--pk-color-pink-900);
+    --color-pink-950: var(--pk-color-pink-950);
+    --color-rose-50: var(--pk-color-rose-50);
+    --color-rose-100: var(--pk-color-rose-100);
+    --color-rose-200: var(--pk-color-rose-200);
+    --color-rose-300: var(--pk-color-rose-300);
+    --color-rose-400: var(--pk-color-rose-400);
+    --color-rose-500: var(--pk-color-rose-500);
+    --color-rose-600: var(--pk-color-rose-600);
+    --color-rose-700: var(--pk-color-rose-700);
+    --color-rose-800: var(--pk-color-rose-800);
+    --color-rose-900: var(--pk-color-rose-900);
+    --color-rose-950: var(--pk-color-rose-950);
+
+    --radius-xs: var(--pk-radius-xs, 2px);
+    --radius-sm: var(--pk-radius-sm, 3px);
+    --radius-md: var(--pk-radius-md, 4px);
+    --radius-lg: var(--pk-radius-lg, 5px);
+
+    --shadow-modal: var(--pk-shadow-modal);
+}

package/vite-dev.mjs

@@ -0,0 +1,60 @@
+import { resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+const srcRoot = resolve(__dirname, 'src');
+const pkgRoot = __dirname;
+
+/**
+ * Vite `resolve.alias` entries so apps can compile `@verbb/plugin-kit-vue` from `src/`
+ * during `vite` dev (HMR). Production builds should use `exports` → `dist/`.
+ *
+ * Mirrors public `package.json` `exports` subpaths (except `package.json`).
+ * Required because in-package source files import via those public subpaths
+ * (e.g. `@verbb/plugin-kit-vue/app`), which must not fall through to the bare
+ * package alias (`…/src/index.ts/app`).
+ */
+export function getPluginKitVueViteDevAliases() {
+    return [
+        {
+            find: /^@verbb\/plugin-kit-vue\/style\.css(\?.*)?$/,
+            replacement: `${resolve(pkgRoot, 'style.css')}$1`,
+        },
+        {
+            find: /^@verbb\/plugin-kit-vue\/tailwind-theme\.css(\?.*)?$/,
+            replacement: `${resolve(pkgRoot, 'tailwind-theme.css')}$1`,
+        },
+        {
+            find: /^@verbb\/plugin-kit-vue\/tailwind-preflight-scope\.css(\?.*)?$/,
+            replacement: `${resolve(pkgRoot, 'tailwind-preflight-scope.css')}$1`,
+        },
+        {
+            find: /^@verbb\/plugin-kit-vue\/components$/,
+            replacement: resolve(srcRoot, 'components/index.ts'),
+        },
+        {
+            find: /^@verbb\/plugin-kit-vue\/app$/,
+            replacement: resolve(srcRoot, 'app/index.ts'),
+        },
+        {
+            find: /^@verbb\/plugin-kit-vue\/forms$/,
+            replacement: resolve(srcRoot, 'forms/index.ts'),
+        },
+        {
+            find: /^@verbb\/plugin-kit-vue\/hooks$/,
+            replacement: resolve(srcRoot, 'hooks/index.ts'),
+        },
+        {
+            find: /^@verbb\/plugin-kit-vue\/fault$/,
+            replacement: resolve(srcRoot, 'fault/index.ts'),
+        },
+        {
+            find: /^@verbb\/plugin-kit-vue\/utils$/,
+            replacement: resolve(srcRoot, 'utils/index.ts'),
+        },
+        {
+            find: /^@verbb\/plugin-kit-vue$/,
+            replacement: resolve(srcRoot, 'index.ts'),
+        },
+    ];
+}