@hardimpactdev/craft-ui 0.0.5 → 0.0.7

package/dist/src/vite/aliases.d.ts

@@ -0,0 +1,13 @@
+import { Alias } from 'vite';
+import { CraftConfigOptions } from './types.js';
+/**
+ * Configure Vite resolve options for the Craft stack
+ *
+ * Handles two scenarios:
+ * 1. Normal: Just returns dedupe config and any custom aliases
+ * 2. Local development: Adds aliases for symlinked craft-ui to enable HMR
+ */
+export declare function getResolveConfig(options: CraftConfigOptions): {
+    dedupe: string[];
+    alias: Alias[];
+};

package/dist/src/vite/craftPlugin.d.ts

@@ -0,0 +1,4 @@
+export declare function craft(): {
+    name: string;
+    enforce: string;
+}[];

package/dist/src/vite/defineCraftConfig.d.ts

@@ -1,26 +1,6 @@
-import { UserConfig } from 'vite';
-interface CraftConfigOptions {
-    laravel?: {
-        input: string | string[];
-        publicDirectory?: string;
-        buildDirectory?: string;
-        ssr?: string | string[];
-        ssrOutputDirectory?: string;
-        refresh?: boolean | string | string[];
-        hotFile?: string;
-        detectTls?: string | boolean;
-        valetTls?: string | boolean;
-        transformOnServe?: (code: string, url: string) => string;
-    };
-}
-export declare function defineCraftConfig(options?: CraftConfigOptions): UserConfig;
-/**
- * Craft Vite plugin that provides virtual module for app initialization
- */
-export declare function craft(): {
-    name: string;
-    enforce: "pre";
-    resolveId(id: string): "virtual:craft" | undefined;
-    load(id: string): "\n          import { createInertiaApp } from \"@inertiajs/vue3\";\n          import { resolvePageComponent } from \"laravel-vite-plugin/inertia-helpers\";\n          import { createApp, h } from \"vue\";\n          import { i18n } from \"@hardimpactdev/craft-ui\";\n          import { TooltipProvider } from \"reka-ui\";\n\n          const appName = import.meta.env.VITE_APP_NAME || \"Laravel\";\n\n          export function initializeCraft(options) {\n            const { enhanceVue, layouts } = options || {};\n\n            return createInertiaApp({\n              title: (title) => `${title} - ${appName}`,\n              resolve: (name) => {\n                  const pages = import.meta.glob('/resources/js/pages/**/*.vue', {\n                      eager: true,\n                  });\n\n                  const page = pages[`/resources/js/pages/${name}.vue`];\n\n                  let defaultLayout = undefined;\n\n                  if (layouts) {\n                    Object.entries(layouts).forEach(([key, value]) => {\n                      if(name.startsWith(key)) {\n                        defaultLayout = value;\n                      }\n\n                      if(!defaultLayout && layouts.default) {\n                        defaultLayout = layouts.default;\n                      }\n                    });\n                  }\n\n                  if(!page) {\n                    const errorMessage = `Page not found: ${name}.vue`;\n\n                    console.error(`[Inertia] ${errorMessage}`);\n                  }\n\n                  page.default.layout = defaultLayout;\n                  return page;\n              },\n              setup({ el, App, props, plugin }) {\n                // Get the language files and transform the paths\n                const langGlob = import.meta.glob(\"/lang/*.json\", { eager: true });\n\n                // Transform absolute paths to relative paths expected by i18n\n                const transformedLangs = {};\n                Object.entries(langGlob).forEach(([absolutePath, module]) => {\n                  // Convert \"/lang/en.json\" to \"../../lang/en.json\"\n                  const relativePath = absolutePath.replace('/lang/', '../../lang/');\n                  transformedLangs[relativePath] = module;\n                });\n\n                let app = createApp({ render: () => h(TooltipProvider, null, () => h(App, props)) })\n                  .use(plugin)\n                  .use(i18n, {\n                    langs: transformedLangs,\n                    changeLanguageRoute: '/change-language',\n                  });\n\n                if (enhanceVue) {\n                  app = enhanceVue(app);\n                }\n\n                app.mount(el);\n              },\n              progress: {\n                includeCSS: false,\n              },\n            });\n          }" | undefined;
-};
-export {};
+import { CraftConfigOptions } from './types.js';
+export type { CraftConfigOptions } from './types.js';
+export { getPlugins } from './plugins.js';
+export { getServerConfig } from './server.js';
+export { getResolveConfig } from './aliases.js';
+export declare function defineCraftConfig(options?: CraftConfigOptions): import('vite').UserConfigFnObject;

package/dist/src/vite/plugins.d.ts

@@ -0,0 +1,17 @@
+import { CraftConfigOptions } from './types.js';
+/**
+ * Configure all Vite plugins for the Craft stack
+ *
+ * Includes:
+ * - craft: Virtual module for Inertia app initialization
+ * - laravel: Laravel Vite integration
+ * - tailwindcss: Tailwind CSS v4
+ * - i18n: Laravel Vue i18n
+ * - vue: Vue 3 SFC support
+ * - vueDevTools: Vue DevTools integration
+ * - run: Auto-run artisan commands on file changes (dev only)
+ */
+export declare function getPlugins(options: CraftConfigOptions): (false | {
+    name: string;
+    enforce: string;
+}[] | import('vite').Plugin<any> | import('vite').PluginOption[] | Promise<import('vite').Plugin<any> | (false | null | undefined) | import('vite').PluginOption[]> | null | undefined)[];

package/dist/src/vite/server.d.ts

@@ -0,0 +1,10 @@
+import { ServerOptions } from 'vite';
+/**
+ * Configure Vite dev server for Laravel apps behind a reverse proxy (Caddy/nginx)
+ *
+ * Handles:
+ * - HMR WebSocket connection through the proxy (wss://app.test:443)
+ * - Correct origin for CORS and asset URLs
+ * - Binding to all interfaces for proxy access
+ */
+export declare function getServerConfig(mode: string): ServerOptions;

package/dist/src/vite/types.d.ts

@@ -0,0 +1,64 @@
+import { Alias } from 'vite';
+/**
+ * Configuration options for defineCraftConfig
+ */
+export interface CraftConfigOptions {
+    /**
+     * Laravel Vite plugin options
+     */
+    laravel?: {
+        /** Entry points for the application */
+        input?: string[];
+        /** Enable file refresh on changes */
+        refresh?: boolean;
+    };
+    /**
+     * Additional Vite plugins to include
+     */
+    plugins?: any[];
+    /**
+     * Additional Vite aliases
+     */
+    aliases?: Alias[];
+    /**
+     * Local UI library configuration for development with symlinked packages
+     */
+    ui?: LocalUiOptions;
+}
+/**
+ * Configuration for local UI library development
+ *
+ * When developing craft-ui alongside an app, this enables HMR by:
+ * 1. Redirecting package imports to source files instead of dist/
+ * 2. Resolving conflicting aliases (like @/) based on importer location
+ */
+export interface LocalUiOptions {
+    /**
+     * Relative path from app root to the symlinked craft-ui directory
+     * @example '../craft-ui'
+     */
+    localPath?: string;
+}
+/**
+ * Internal alias configuration for local package resolution
+ */
+export interface LocalAliasConfig {
+    /** Regex pattern to match imports */
+    pattern: RegExp;
+    /** The replacement path or alias */
+    replacement: string;
+    /**
+     * Absolute path to the library (for importer detection)
+     * If set along with basePaths, enables context-aware resolution
+     */
+    libraryPath?: string;
+    /**
+     * Base paths for context-aware resolution
+     */
+    basePaths?: {
+        /** Path to use when import is from the app */
+        app: string;
+        /** Path to use when import is from the library */
+        library: string;
+    };
+}

package/dist/vite/aliases.js

@@ -0,0 +1,62 @@
+import path from "path";
+function getResolveConfig(options) {
+  const aliases = [...options.aliases || []];
+  if (isDevMode() && options.ui?.localPath) {
+    aliases.push(...createLocalDevAliases(options.ui.localPath));
+  }
+  return {
+    // Prevent duplicate instances of packages that must be singletons
+    dedupe: ["@inertiajs/vue3", "@tailwindcss/vite"],
+    alias: aliases
+  };
+}
+function createLocalDevAliases(localPath) {
+  const absoluteLibraryPath = path.resolve(process.cwd(), localPath);
+  const configs = [
+    // Handle @/ alias - resolve based on importer location
+    {
+      pattern: /^@\//,
+      replacement: "@/",
+      libraryPath: absoluteLibraryPath,
+      basePaths: {
+        app: "./resources/js",
+        library: path.join(localPath, "src")
+      }
+    },
+    // Redirect package imports to source
+    {
+      pattern: /^@hardimpactdev\/craft-ui/,
+      replacement: path.join(localPath, "index.ts")
+    }
+  ];
+  return configs.map(createAliasFromConfig);
+}
+function createAliasFromConfig(config) {
+  if (!config.libraryPath || !config.basePaths) {
+    return {
+      find: config.pattern,
+      replacement: path.resolve(process.cwd(), config.replacement)
+    };
+  }
+  return {
+    find: config.pattern,
+    replacement: config.replacement,
+    customResolver: createContextAwareResolver(config)
+  };
+}
+function createContextAwareResolver(config) {
+  return async function customResolver(source, importer) {
+    const isFromLibrary = importer?.includes(config.libraryPath);
+    const basePath = isFromLibrary ? config.basePaths.library : config.basePaths.app;
+    const importPath = source.replace(config.replacement, "");
+    const resolvedPath = path.resolve(process.cwd(), basePath, importPath);
+    const result = await this.resolve(resolvedPath);
+    return result?.id;
+  };
+}
+function isDevMode() {
+  return !process.argv.includes("build");
+}
+export {
+  getResolveConfig
+};

package/dist/vite/craftPlugin.js

@@ -0,0 +1,105 @@
+function craft() {
+  const plugins = [];
+  plugins.push({
+    name: "craft",
+    enforce: "pre",
+    config() {
+      return {
+        optimizeDeps: {
+          exclude: [
+            "@hardimpactdev/craft-ui",
+            "@tailwindcss/vite",
+            "laravel-vue-i18n/vite"
+          ]
+        }
+      };
+    },
+    resolveId(id) {
+      if (id === "virtual:craft") {
+        return id;
+      }
+    },
+    load(id) {
+      if (id === "virtual:craft") {
+        return `
+          import { createInertiaApp } from "@inertiajs/vue3";
+          import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
+          import { createApp, h } from "vue";
+          import { i18n } from "@hardimpactdev/craft-ui";
+          import { TooltipProvider } from "reka-ui";
+
+          const appName = import.meta.env.VITE_APP_NAME || "Laravel";
+
+          export function initializeCraft(options) {
+            const { enhanceVue, layouts } = options || {};
+
+            return createInertiaApp({
+              title: (title) => \`\${title} - \${appName}\`,
+              resolve: (name) => {
+                  const pages = import.meta.glob('/resources/js/pages/**/*.vue', {
+                      eager: true,
+                  });
+
+                  const page = pages[\`/resources/js/pages/\${name}.vue\`];
+
+                  let defaultLayout = undefined;
+
+                  if (layouts) {
+                    Object.entries(layouts).forEach(([key, value]) => {
+                      if(name.startsWith(key)) {
+                        defaultLayout = value;
+                      }
+
+                      if(!defaultLayout && layouts.default) {
+                        defaultLayout = layouts.default;
+                      }
+                    });
+                  }
+
+                  if(!page) {
+                    const errorMessage = \`Page not found: \${name}.vue\`;
+
+                    console.error(\`[Inertia] \${errorMessage}\`);
+                  }
+
+                  page.default.layout = defaultLayout;
+                  return page;
+              },
+              setup({ el, App, props, plugin }) {
+                // Get the language files and transform the paths
+                const langGlob = import.meta.glob("/lang/*.json", { eager: true });
+
+                // Transform absolute paths to relative paths expected by i18n
+                const transformedLangs = {};
+                Object.entries(langGlob).forEach(([absolutePath, module]) => {
+                  // Convert "/lang/en.json" to "../../lang/en.json"
+                  const relativePath = absolutePath.replace('/lang/', '../../lang/');
+                  transformedLangs[relativePath] = module;
+                });
+
+                let app = createApp({ render: () => h(TooltipProvider, null, () => h(App, props)) })
+                  .use(plugin)
+                  .use(i18n, {
+                    langs: transformedLangs,
+                    changeLanguageRoute: '/change-language',
+                  });
+
+                if (enhanceVue) {
+                  app = enhanceVue(app);
+                }
+
+                app.mount(el);
+              },
+              progress: {
+                includeCSS: false,
+              },
+            });
+          }`;
+      }
+    }
+  });
+  return plugins;
+}
+export {
+  craft
+};

package/dist/vite/defineCraftConfig.js

@@ -1,115 +1,23 @@
+import { defineConfig } from "vite";
+import { getPlugins } from "./plugins.js";
+import { getServerConfig } from "./server.js";
+import { getResolveConfig } from "./aliases.js";
+import { getPlugins as getPlugins2 } from "./plugins.js";
+import { getServerConfig as getServerConfig2 } from "./server.js";
+import { getResolveConfig as getResolveConfig2 } from "./aliases.js";
 function defineCraftConfig(options = {}) {
-  const laravelConfig = options.laravel ?? {
-    input: ["resources/js/app.ts"]
-  };
-  return {
+  return defineConfig(({ mode }) => ({
     plugins: [
-      // These will be dynamically imported by the consuming app
-      // We provide the config structure, they provide the actual plugins
+      ...getPlugins(options),
+      ...options.plugins || []
     ],
-    optimizeDeps: {
-      exclude: [
-        "@hardimpactdev/craft-ui",
-        "@tailwindcss/vite",
-        "laravel-vue-i18n/vite"
-      ]
-    },
-    // Store laravel config for the consuming app to use
-    define: {
-      __CRAFT_LARAVEL_CONFIG__: JSON.stringify(laravelConfig)
-    }
-  };
-}
-function craft() {
-  return {
-    name: "craft",
-    enforce: "pre",
-    resolveId(id) {
-      if (id === "virtual:craft") {
-        return id;
-      }
-    },
-    load(id) {
-      if (id === "virtual:craft") {
-        return `
-          import { createInertiaApp } from "@inertiajs/vue3";
-          import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
-          import { createApp, h } from "vue";
-          import { i18n } from "@hardimpactdev/craft-ui";
-          import { TooltipProvider } from "reka-ui";
-
-          const appName = import.meta.env.VITE_APP_NAME || "Laravel";
-
-          export function initializeCraft(options) {
-            const { enhanceVue, layouts } = options || {};
-
-            return createInertiaApp({
-              title: (title) => \`\${title} - \${appName}\`,
-              resolve: (name) => {
-                  const pages = import.meta.glob('/resources/js/pages/**/*.vue', {
-                      eager: true,
-                  });
-
-                  const page = pages[\`/resources/js/pages/\${name}.vue\`];
-
-                  let defaultLayout = undefined;
-
-                  if (layouts) {
-                    Object.entries(layouts).forEach(([key, value]) => {
-                      if(name.startsWith(key)) {
-                        defaultLayout = value;
-                      }
-
-                      if(!defaultLayout && layouts.default) {
-                        defaultLayout = layouts.default;
-                      }
-                    });
-                  }
-
-                  if(!page) {
-                    const errorMessage = \`Page not found: \${name}.vue\`;
-
-                    console.error(\`[Inertia] \${errorMessage}\`);
-                  }
-
-                  page.default.layout = defaultLayout;
-                  return page;
-              },
-              setup({ el, App, props, plugin }) {
-                // Get the language files and transform the paths
-                const langGlob = import.meta.glob("/lang/*.json", { eager: true });
-
-                // Transform absolute paths to relative paths expected by i18n
-                const transformedLangs = {};
-                Object.entries(langGlob).forEach(([absolutePath, module]) => {
-                  // Convert "/lang/en.json" to "../../lang/en.json"
-                  const relativePath = absolutePath.replace('/lang/', '../../lang/');
-                  transformedLangs[relativePath] = module;
-                });
-
-                let app = createApp({ render: () => h(TooltipProvider, null, () => h(App, props)) })
-                  .use(plugin)
-                  .use(i18n, {
-                    langs: transformedLangs,
-                    changeLanguageRoute: '/change-language',
-                  });
-
-                if (enhanceVue) {
-                  app = enhanceVue(app);
-                }
-
-                app.mount(el);
-              },
-              progress: {
-                includeCSS: false,
-              },
-            });
-          }`;
-      }
-    }
-  };
+    resolve: getResolveConfig(options),
+    server: getServerConfig(mode)
+  }));
 }
 export {
-  craft,
-  defineCraftConfig
+  defineCraftConfig,
+  getPlugins2 as getPlugins,
+  getResolveConfig2 as getResolveConfig,
+  getServerConfig2 as getServerConfig
 };

package/dist/vite/plugins.js

@@ -0,0 +1,59 @@
+import vue from "@vitejs/plugin-vue";
+import laravel from "laravel-vite-plugin";
+import { run } from "vite-plugin-run";
+import tailwindcss from "@tailwindcss/vite";
+import i18n from "laravel-vue-i18n/vite";
+import vueDevTools from "vite-plugin-vue-devtools";
+import { craft } from "./craftPlugin.js";
+function getPlugins(options) {
+  return [
+    craft(),
+    laravel({
+      input: options.laravel?.input || ["resources/js/app.ts"],
+      refresh: options.laravel?.refresh ?? true
+    }),
+    tailwindcss(),
+    i18n(),
+    vue({
+      template: {
+        transformAssetUrls: {
+          base: null,
+          includeAbsolute: false
+        },
+        compilerOptions: {
+          isCustomElement: (tag) => tag === "trix-editor"
+        }
+      }
+    }),
+    getArtisanRunners(),
+    vueDevTools({
+      appendTo: "virtual:craft",
+      launchEditor: import.meta.env?.VITE_EDITOR || "cursor"
+    })
+  ].filter(Boolean);
+}
+function getArtisanRunners() {
+  if (false) {
+    return null;
+  }
+  return run([
+    {
+      name: "waymaker",
+      run: ["php", "artisan", "waymaker:generate"],
+      pattern: ["app/**/Http/**/*.php"]
+    },
+    {
+      name: "wayfinder",
+      run: ["php", "artisan", "wayfinder:generate"],
+      pattern: ["routes/*.php", "app/**/Http/**/*.php"]
+    },
+    {
+      name: "typescript",
+      run: ["php", "artisan", "typescript:transform"],
+      pattern: ["app/{Data,Enums}/**/*.php"]
+    }
+  ]);
+}
+export {
+  getPlugins
+};

package/dist/vite/server.js

@@ -0,0 +1,30 @@
+import { loadEnv } from "vite";
+function getServerConfig(mode) {
+  const env = loadEnv(mode, process.cwd());
+  const appUrl = env.VITE_APP_URL;
+  if (!appUrl) {
+    return { host: "0.0.0.0" };
+  }
+  try {
+    const url = new URL(appUrl);
+    const isHttps = url.protocol === "https:";
+    return {
+      // Accept connections from reverse proxy
+      host: "0.0.0.0",
+      // Tell Vite the public origin for asset URLs
+      origin: appUrl,
+      // Configure HMR to connect through the reverse proxy
+      // Without this, browser would try localhost:5173 directly
+      hmr: {
+        host: url.hostname,
+        protocol: isHttps ? "wss" : "ws",
+        clientPort: isHttps ? 443 : parseInt(url.port) || 80
+      }
+    };
+  } catch {
+    return { host: "0.0.0.0" };
+  }
+}
+export {
+  getServerConfig
+};

package/dist/vite/ts/aliases.ts

@@ -0,0 +1,132 @@
+import path from 'path';
+import type { Alias } from 'vite';
+import type { CraftConfigOptions, LocalAliasConfig } from './types.js';
+
+/**
+ * Configure Vite resolve options for the Craft stack
+ *
+ * Handles two scenarios:
+ * 1. Normal: Just returns dedupe config and any custom aliases
+ * 2. Local development: Adds aliases for symlinked craft-ui to enable HMR
+ */
+export function getResolveConfig(options: CraftConfigOptions) {
+    const aliases: Alias[] = [...(options.aliases || [])];
+
+    // Add local development aliases when craft-ui is symlinked
+    if (isDevMode() && options.ui?.localPath) {
+        aliases.push(...createLocalDevAliases(options.ui.localPath));
+    }
+
+    return {
+        // Prevent duplicate instances of packages that must be singletons
+        dedupe: ['@inertiajs/vue3', '@tailwindcss/vite'],
+        alias: aliases,
+    };
+}
+
+/**
+ * Create aliases for local craft-ui development
+ *
+ * When craft-ui is symlinked (e.g., for development), we need to:
+ *
+ * 1. Redirect package imports to source files
+ *    `import { Button } from '@hardimpactdev/craft-ui'`
+ *    → resolves to `../craft-ui/index.ts` instead of `dist/`
+ *    This enables HMR (dist files can't hot-reload)
+ *
+ * 2. Handle the @/ alias conflict
+ *    Both the app and craft-ui use @/ as an alias:
+ *    - App: @/ → ./resources/js
+ *    - craft-ui: @/ → ./src
+ *
+ *    When a file in craft-ui imports `@/lib/utils`, we need to resolve
+ *    it to craft-ui/src/lib/utils, not app/resources/js/lib/utils.
+ *    The resolver checks WHERE the import comes from to decide.
+ */
+function createLocalDevAliases(localPath: string): Alias[] {
+    const absoluteLibraryPath = path.resolve(process.cwd(), localPath);
+
+    const configs: LocalAliasConfig[] = [
+        // Handle @/ alias - resolve based on importer location
+        {
+            pattern: /^@\//,
+            replacement: '@/',
+            libraryPath: absoluteLibraryPath,
+            basePaths: {
+                app: './resources/js',
+                library: path.join(localPath, 'src'),
+            },
+        },
+
+        // Redirect package imports to source
+        {
+            pattern: /^@hardimpactdev\/craft-ui/,
+            replacement: path.join(localPath, 'index.ts'),
+        },
+    ];
+
+    return configs.map(createAliasFromConfig);
+}
+
+/**
+ * Create a Vite alias from our config format
+ */
+function createAliasFromConfig(config: LocalAliasConfig): Alias {
+    // Simple redirect (no context-aware resolution needed)
+    if (!config.libraryPath || !config.basePaths) {
+        return {
+            find: config.pattern,
+            replacement: path.resolve(process.cwd(), config.replacement),
+        };
+    }
+
+    // Context-aware resolution: choose base path based on importer location
+    return {
+        find: config.pattern,
+        replacement: config.replacement,
+        customResolver: createContextAwareResolver(config),
+    };
+}
+
+/**
+ * Create a resolver that picks the right base path based on where the import comes from
+ *
+ * @example
+ * // Import from app file → use app base path
+ * // resources/js/pages/Home.vue imports @/lib/utils
+ * // → resolves to resources/js/lib/utils
+ *
+ * // Import from library file → use library base path
+ * // ../craft-ui/src/components/Button.vue imports @/lib/utils
+ * // → resolves to ../craft-ui/src/lib/utils
+ */
+function createContextAwareResolver(config: LocalAliasConfig) {
+    return async function customResolver(
+        this: { resolve: (id: string, importer?: string) => Promise<{ id: string } | null> },
+        source: string,
+        importer: string | undefined
+    ): Promise<string | undefined> {
+        // Determine if the import is coming from the library or the app
+        const isFromLibrary = importer?.includes(config.libraryPath!);
+        const basePath = isFromLibrary ? config.basePaths!.library : config.basePaths!.app;
+
+        // Build the full path by combining:
+        // 1. Current working directory
+        // 2. The appropriate base path (app or library)
+        // 3. The import path (minus the alias prefix)
+        const importPath = source.replace(config.replacement, '');
+        const resolvedPath = path.resolve(process.cwd(), basePath, importPath);
+
+        // Use Vite's resolver to get the final path (handles extensions, index files, etc.)
+        const result = await this.resolve(resolvedPath);
+        return result?.id;
+    };
+}
+
+/**
+ * Check if we're in development mode
+ * Used to skip local dev aliases during production builds
+ */
+function isDevMode(): boolean {
+    return !process.argv.includes('build');
+}

package/dist/vite/ts/craftPlugin.ts

@@ -0,0 +1,106 @@
+export function craft() {
+  const plugins = [];
+
+  // Core plugin
+  plugins.push({
+    name: 'craft',
+    enforce: 'pre',
+    config() {
+      return {
+        optimizeDeps: {
+          exclude: [
+            '@hardimpactdev/craft-ui',
+            '@tailwindcss/vite',
+            'laravel-vue-i18n/vite'
+          ]
+        }
+      };
+    },
+
+    resolveId(id: string) {
+      if (id === 'virtual:craft') {
+        return id;
+      }
+    },
+    load(id: string) {
+      if (id === 'virtual:craft') {
+        return `
+          import { createInertiaApp } from "@inertiajs/vue3";
+          import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
+          import { createApp, h } from "vue";
+          import { i18n } from "@hardimpactdev/craft-ui";
+          import { TooltipProvider } from "reka-ui";
+
+          const appName = import.meta.env.VITE_APP_NAME || "Laravel";
+
+          export function initializeCraft(options) {
+            const { enhanceVue, layouts } = options || {};
+
+            return createInertiaApp({
+              title: (title) => \`\${title} - \${appName}\`,
+              resolve: (name) => {
+                  const pages = import.meta.glob('/resources/js/pages/**/*.vue', {
+                      eager: true,
+                  });
+
+                  const page = pages[\`/resources/js/pages/\${name}.vue\`];
+
+                  let defaultLayout = undefined;
+
+                  if (layouts) {
+                    Object.entries(layouts).forEach(([key, value]) => {
+                      if(name.startsWith(key)) {
+                        defaultLayout = value;
+                      }
+
+                      if(!defaultLayout && layouts.default) {
+                        defaultLayout = layouts.default;
+                      }
+                    });
+                  }
+
+                  if(!page) {
+                    const errorMessage = \`Page not found: \${name}.vue\`;
+
+                    console.error(\`[Inertia] \${errorMessage}\`);
+                  }
+
+                  page.default.layout = defaultLayout;
+                  return page;
+              },
+              setup({ el, App, props, plugin }) {
+                // Get the language files and transform the paths
+                const langGlob = import.meta.glob("/lang/*.json", { eager: true });
+
+                // Transform absolute paths to relative paths expected by i18n
+                const transformedLangs = {};
+                Object.entries(langGlob).forEach(([absolutePath, module]) => {
+                  // Convert "/lang/en.json" to "../../lang/en.json"
+                  const relativePath = absolutePath.replace('/lang/', '../../lang/');
+                  transformedLangs[relativePath] = module;
+                });
+
+                let app = createApp({ render: () => h(TooltipProvider, null, () => h(App, props)) })
+                  .use(plugin)
+                  .use(i18n, {
+                    langs: transformedLangs,
+                    changeLanguageRoute: '/change-language',
+                  });
+
+                if (enhanceVue) {
+                  app = enhanceVue(app);
+                }
+
+                app.mount(el);
+              },
+              progress: {
+                includeCSS: false,
+              },
+            });
+          }`;
+      }
+    },
+  });
+
+  return plugins;
+}

package/dist/vite/ts/defineCraftConfig.ts

@@ -1,135 +1,24 @@
-import type { UserConfig } from 'vite'
-
-interface CraftConfigOptions {
-  laravel?: {
-    input: string | string[]
-    publicDirectory?: string
-    buildDirectory?: string
-    ssr?: string | string[]
-    ssrOutputDirectory?: string
-    refresh?: boolean | string | string[]
-    hotFile?: string
-    detectTls?: string | boolean
-    valetTls?: string | boolean
-    transformOnServe?: (code: string, url: string) => string
-  }
-}
-
-export function defineCraftConfig(options: CraftConfigOptions = {}): UserConfig {
-  const laravelConfig = options.laravel ?? {
-    input: ['resources/js/app.ts'],
-  }
-
-  return {
-    plugins: [
-      // These will be dynamically imported by the consuming app
-      // We provide the config structure, they provide the actual plugins
-    ],
-    optimizeDeps: {
-      exclude: [
-        '@hardimpactdev/craft-ui',
-        '@tailwindcss/vite',
-        'laravel-vue-i18n/vite'
-      ]
-    },
-    // Store laravel config for the consuming app to use
-    define: {
-      __CRAFT_LARAVEL_CONFIG__: JSON.stringify(laravelConfig)
-    }
-  }
-}
-
-/**
- * Craft Vite plugin that provides virtual module for app initialization
- */
-export function craft() {
-  return {
-    name: 'craft',
-    enforce: 'pre' as const,
-
-    resolveId(id: string) {
-      if (id === 'virtual:craft') {
-        return id
-      }
-    },
-
-    load(id: string) {
-      if (id === 'virtual:craft') {
-        return `
-          import { createInertiaApp } from "@inertiajs/vue3";
-          import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
-          import { createApp, h } from "vue";
-          import { i18n } from "@hardimpactdev/craft-ui";
-          import { TooltipProvider } from "reka-ui";
-
-          const appName = import.meta.env.VITE_APP_NAME || "Laravel";
-
-          export function initializeCraft(options) {
-            const { enhanceVue, layouts } = options || {};
-
-            return createInertiaApp({
-              title: (title) => \`\${title} - \${appName}\`,
-              resolve: (name) => {
-                  const pages = import.meta.glob('/resources/js/pages/**/*.vue', {
-                      eager: true,
-                  });
-
-                  const page = pages[\`/resources/js/pages/\${name}.vue\`];
-
-                  let defaultLayout = undefined;
-
-                  if (layouts) {
-                    Object.entries(layouts).forEach(([key, value]) => {
-                      if(name.startsWith(key)) {
-                        defaultLayout = value;
-                      }
-
-                      if(!defaultLayout && layouts.default) {
-                        defaultLayout = layouts.default;
-                      }
-                    });
-                  }
-
-                  if(!page) {
-                    const errorMessage = \`Page not found: \${name}.vue\`;
-
-                    console.error(\`[Inertia] \${errorMessage}\`);
-                  }
-
-                  page.default.layout = defaultLayout;
-                  return page;
-              },
-              setup({ el, App, props, plugin }) {
-                // Get the language files and transform the paths
-                const langGlob = import.meta.glob("/lang/*.json", { eager: true });
-
-                // Transform absolute paths to relative paths expected by i18n
-                const transformedLangs = {};
-                Object.entries(langGlob).forEach(([absolutePath, module]) => {
-                  // Convert "/lang/en.json" to "../../lang/en.json"
-                  const relativePath = absolutePath.replace('/lang/', '../../lang/');
-                  transformedLangs[relativePath] = module;
-                });
-
-                let app = createApp({ render: () => h(TooltipProvider, null, () => h(App, props)) })
-                  .use(plugin)
-                  .use(i18n, {
-                    langs: transformedLangs,
-                    changeLanguageRoute: '/change-language',
-                  });
-
-                if (enhanceVue) {
-                  app = enhanceVue(app);
-                }
-
-                app.mount(el);
-              },
-              progress: {
-                includeCSS: false,
-              },
-            });
-          }`;
-      }
-    },
-  }
+import { defineConfig } from 'vite';
+import { getPlugins } from './plugins.js';
+import { getServerConfig } from './server.js';
+import { getResolveConfig } from './aliases.js';
+import type { CraftConfigOptions } from './types.js';
+
+// Re-export types for consumers
+export type { CraftConfigOptions } from './types.js';
+
+// Re-export individual modules for advanced customization
+export { getPlugins } from './plugins.js';
+export { getServerConfig } from './server.js';
+export { getResolveConfig } from './aliases.js';
+
+export function defineCraftConfig(options: CraftConfigOptions = {}) {
+    return defineConfig(({ mode }) => ({
+        plugins: [
+            ...getPlugins(options),
+            ...(options.plugins || []),
+        ],
+        resolve: getResolveConfig(options),
+        server: getServerConfig(mode),
+    }));
 }

package/dist/vite/ts/plugins.ts

@@ -0,0 +1,86 @@
+import vue from '@vitejs/plugin-vue';
+import laravel from 'laravel-vite-plugin';
+import { run } from 'vite-plugin-run';
+import tailwindcss from '@tailwindcss/vite';
+import i18n from 'laravel-vue-i18n/vite';
+import vueDevTools from 'vite-plugin-vue-devtools';
+import { craft } from './craftPlugin.js';
+import type { CraftConfigOptions } from './types.js';
+
+/**
+ * Configure all Vite plugins for the Craft stack
+ *
+ * Includes:
+ * - craft: Virtual module for Inertia app initialization
+ * - laravel: Laravel Vite integration
+ * - tailwindcss: Tailwind CSS v4
+ * - i18n: Laravel Vue i18n
+ * - vue: Vue 3 SFC support
+ * - vueDevTools: Vue DevTools integration
+ * - run: Auto-run artisan commands on file changes (dev only)
+ */
+export function getPlugins(options: CraftConfigOptions) {
+    return [
+        craft(),
+
+        laravel({
+            input: options.laravel?.input || ['resources/js/app.ts'],
+            refresh: options.laravel?.refresh ?? true,
+        }),
+
+        tailwindcss(),
+
+        i18n(),
+
+        vue({
+            template: {
+                transformAssetUrls: {
+                    base: null,
+                    includeAbsolute: false,
+                },
+                compilerOptions: {
+                    isCustomElement: (tag) => tag === 'trix-editor',
+                },
+            },
+        }),
+
+        getArtisanRunners(),
+
+        vueDevTools({
+            appendTo: 'virtual:craft',
+            launchEditor: import.meta.env?.VITE_EDITOR || 'cursor',
+        }),
+    ].filter(Boolean);
+}
+
+/**
+ * Configure artisan command runners for development
+ *
+ * Auto-runs:
+ * - waymaker:generate on controller changes
+ * - wayfinder:generate on route/controller changes
+ * - typescript:transform on DTO/Enum changes
+ */
+function getArtisanRunners() {
+    if (process.env.NODE_ENV !== 'development') {
+        return null;
+    }
+
+    return run([
+        {
+            name: 'waymaker',
+            run: ['php', 'artisan', 'waymaker:generate'],
+            pattern: ['app/**/Http/**/*.php'],
+        },
+        {
+            name: 'wayfinder',
+            run: ['php', 'artisan', 'wayfinder:generate'],
+            pattern: ['routes/*.php', 'app/**/Http/**/*.php'],
+        },
+        {
+            name: 'typescript',
+            run: ['php', 'artisan', 'typescript:transform'],
+            pattern: ['app/{Data,Enums}/**/*.php'],
+        },
+    ]);
+}

package/dist/vite/ts/server.ts

@@ -0,0 +1,42 @@
+import { loadEnv } from 'vite';
+import type { ServerOptions } from 'vite';
+
+/**
+ * Configure Vite dev server for Laravel apps behind a reverse proxy (Caddy/nginx)
+ *
+ * Handles:
+ * - HMR WebSocket connection through the proxy (wss://app.test:443)
+ * - Correct origin for CORS and asset URLs
+ * - Binding to all interfaces for proxy access
+ */
+export function getServerConfig(mode: string): ServerOptions {
+    const env = loadEnv(mode, process.cwd());
+    const appUrl = env.VITE_APP_URL;
+
+    if (!appUrl) {
+        return { host: '0.0.0.0' };
+    }
+
+    try {
+        const url = new URL(appUrl);
+        const isHttps = url.protocol === 'https:';
+
+        return {
+            // Accept connections from reverse proxy
+            host: '0.0.0.0',
+
+            // Tell Vite the public origin for asset URLs
+            origin: appUrl,
+
+            // Configure HMR to connect through the reverse proxy
+            // Without this, browser would try localhost:5173 directly
+            hmr: {
+                host: url.hostname,
+                protocol: isHttps ? 'wss' : 'ws',
+                clientPort: isHttps ? 443 : (parseInt(url.port) || 80),
+            },
+        };
+    } catch {
+        return { host: '0.0.0.0' };
+    }
+}

package/dist/vite/ts/types.ts

@@ -0,0 +1,73 @@
+import type { Alias } from 'vite';
+
+/**
+ * Configuration options for defineCraftConfig
+ */
+export interface CraftConfigOptions {
+    /**
+     * Laravel Vite plugin options
+     */
+    laravel?: {
+        /** Entry points for the application */
+        input?: string[];
+        /** Enable file refresh on changes */
+        refresh?: boolean;
+    };
+
+    /**
+     * Additional Vite plugins to include
+     */
+    plugins?: any[];
+
+    /**
+     * Additional Vite aliases
+     */
+    aliases?: Alias[];
+
+    /**
+     * Local UI library configuration for development with symlinked packages
+     */
+    ui?: LocalUiOptions;
+}
+
+/**
+ * Configuration for local UI library development
+ *
+ * When developing craft-ui alongside an app, this enables HMR by:
+ * 1. Redirecting package imports to source files instead of dist/
+ * 2. Resolving conflicting aliases (like @/) based on importer location
+ */
+export interface LocalUiOptions {
+    /**
+     * Relative path from app root to the symlinked craft-ui directory
+     * @example '../craft-ui'
+     */
+    localPath?: string;
+}
+
+/**
+ * Internal alias configuration for local package resolution
+ */
+export interface LocalAliasConfig {
+    /** Regex pattern to match imports */
+    pattern: RegExp;
+
+    /** The replacement path or alias */
+    replacement: string;
+
+    /**
+     * Absolute path to the library (for importer detection)
+     * If set along with basePaths, enables context-aware resolution
+     */
+    libraryPath?: string;
+
+    /**
+     * Base paths for context-aware resolution
+     */
+    basePaths?: {
+        /** Path to use when import is from the app */
+        app: string;
+        /** Path to use when import is from the library */
+        library: string;
+    };
+}

package/package.json

@@ -46,12 +46,17 @@
       "import": "./dist/craft-ui.css",
       "default": "./dist/craft-ui.css"
     },
+    "./dist/craft-ui.css": {
+      "style": "./dist/craft-ui.css",
+      "import": "./dist/craft-ui.css",
+      "default": "./dist/craft-ui.css"
+    },
     "./vite": {
       "import": "./dist/vite/defineCraftConfig.js",
       "types": "./dist/src/vite/defineCraftConfig.d.ts"
     }
   },
-  "version": "0.0.5",
+  "version": "0.0.7",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -71,6 +76,7 @@
     "@inertiajs/core": "^2.3.6",
     "@inertiajs/vue3": "^2.0.0",
     "@tailwindcss/vite": "^4.0.0",
+    "@vitejs/plugin-vue": "^6.0.3",
     "@tanstack/vue-table": "^8.21.3",
     "@types/node": "^25.0.3",
     "@unovis/ts": "^1.6.2",
@@ -91,6 +97,7 @@
     "tw-animate-css": "^1.4.0",
     "vaul-vue": "^0.4.1",
     "vee-validate": "^4.15.1",
+    "vite-plugin-run": "^0.6.1",
     "vite-plugin-vue-devtools": "^8.0.5",
     "vue": "^3.5.0",
     "vue-chartjs": "^5.3.3",
@@ -104,7 +111,6 @@
     "@storybook/addon-themes": "^10.1.11",
     "@storybook/addon-vitest": "10.1.11",
     "@storybook/vue3-vite": "^10.1.11",
-    "@vitejs/plugin-vue": "^6.0.3",
     "@vitest/browser": "^4.0.16",
     "@vitest/browser-playwright": "^4.0.16",
     "@vitest/coverage-v8": "^4.0.16",
@@ -116,7 +122,6 @@
     "typescript": "~5.9.3",
     "vite": "^7.3.0",
     "vite-plugin-dts": "^4.5.4",
-    "vite-plugin-run": "^0.6.1",
     "vitest": "^4.0.16",
     "vue-draggable-plus": "^0.6.0",
     "vue-router": "^4.6.4",
@@ -125,9 +130,11 @@
   "peerDependencies": {
     "@inertiajs/vue3": "^2.0.0",
     "@tailwindcss/vite": "^4.0.0",
+    "@vitejs/plugin-vue": "^6.0.0",
     "laravel-vite-plugin": "^2.0.1",
     "laravel-vue-i18n": "^2.8.0",
-    "vite-plugin-run": "^0.6.1",
+    "vite-plugin-run": "^0.6.0",
+    "vite-plugin-vue-devtools": "^8.0.0",
     "vue": "^3.5.0"
   }
 }