@hardimpactdev/craft-ui 0.0.5 → 0.0.6

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,21 @@
-import { UserConfig } from 'vite';
-interface CraftConfigOptions {
+interface viteConfigOptions {
     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;
+        input?: string[];
+        refresh?: boolean;
+    };
+    plugins?: any[];
+    aliases?: any[];
+    ui?: {
+        localPath?: string;
     };
 }
-export declare function defineCraftConfig(options?: CraftConfigOptions): UserConfig;
-/**
- * Craft Vite plugin that provides virtual module for app initialization
- */
-export declare function craft(): {
+export declare function defineCraftConfig(options?: viteConfigOptions): import('vite').UserConfigFnObject;
+export declare function pluginConfig(options: viteConfigOptions): ({
     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;
+    enforce: string;
+}[] | import('vite').PluginOption)[];
+export declare function aliasConfig(aliases?: any[], ui?: any): {
+    dedupe: string[];
+    alias: any[];
 };
 export {};

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,166 @@
+import { defineConfig, loadEnv } from "vite";
+import vue from "@vitejs/plugin-vue";
+import path from "path";
+import laravel from "laravel-vite-plugin";
+import { run } from "vite-plugin-run";
+import { craft } from "./craftPlugin.js";
+import tailwindcss from "@tailwindcss/vite";
+import i18n from "laravel-vue-i18n/vite";
+import vueDevTools from "vite-plugin-vue-devtools";
 function defineCraftConfig(options = {}) {
-  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)
-    }
-  };
+  return defineConfig(({ mode }) => {
+    const serverConfig = getServerConfig(mode);
+    return {
+      plugins: [
+        ...pluginConfig(options),
+        ...options.plugins || [],
+        // Plugin to enforce allowedHosts after laravel-vite-plugin
+        // This bypasses Vite's DNS rebinding protection which conflicts with reverse proxy setups
+        {
+          name: "craft-allowed-hosts",
+          enforce: "post",
+          config() {
+            return {
+              server: {
+                allowedHosts: true
+              }
+            };
+          }
+        }
+      ],
+      resolve: {
+        ...aliasConfig(options.aliases, options.ui)
+      },
+      server: serverConfig
+    };
+  });
 }
-function craft() {
-  return {
-    name: "craft",
-    enforce: "pre",
-    resolveId(id) {
-      if (id === "virtual:craft") {
-        return id;
+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 {
+      host: "0.0.0.0",
+      origin: appUrl,
+      allowedHosts: true,
+      hmr: {
+        host: url.hostname,
+        protocol: isHttps ? "wss" : "ws",
+        clientPort: isHttps ? 443 : parseInt(url.port) || 80
       }
-    },
-    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,
-              },
-            });
-          }`;
+    };
+  } catch {
+    return { host: "0.0.0.0" };
+  }
+}
+function pluginConfig(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"
+        }
       }
+    }),
+    runConfiguration(),
+    vueDevTools({
+      appendTo: "virtual:craft",
+      launchEditor: import.meta.env?.VITE_EDITOR || "cursor"
+    })
+  ].filter(Boolean);
+}
+function runConfiguration() {
+  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"]
     }
+  ]);
+}
+function aliasConfig(aliases = [], ui = {}) {
+  if (!process.argv.includes("build") && ui.localPath) {
+    const absoluteLibraryPath = path.resolve(process.cwd(), ui.localPath);
+    const localAliases = [
+      // The following alias will make the @ alias work correctly depending on the importer path.
+      {
+        regex: /^@\//,
+        replacement: "@/",
+        libraryPath: absoluteLibraryPath,
+        aliasLocalBasePath: "./resources/js",
+        aliasExternalBasePath: path.join(ui.localPath, "src")
+      },
+      // The following alias config will change all package references like import { Dialog } from '@hardimpactdev/craft-ui';
+      // to the library's index.ts file instead.
+      {
+        regex: /^@hardimpactdev\/craft-ui/,
+        replacement: path.join(ui.localPath, "index.ts")
+      }
+    ];
+    aliases.push(...aliasLocalPackage(localAliases));
+  }
+  return {
+    dedupe: ["@inertiajs/vue3", "@tailwindcss/vite"],
+    alias: aliases
   };
 }
+function aliasLocalPackage(aliases) {
+  return aliases.map((alias) => {
+    if (!alias.libraryPath && !alias.aliasLocalBasePath && !alias.aliasExternalBasePath) {
+      return {
+        find: alias.regex,
+        replacement: path.resolve(process.cwd(), alias.replacement)
+      };
+    }
+    return {
+      find: alias.regex,
+      replacement: alias.replacement,
+      async customResolver(source, importer) {
+        let resolvedPath = "";
+        resolvedPath = path.resolve(
+          // get the directory name of the importer
+          process.cwd(),
+          // if the importer string includes the folder name, use the external path, otherwise use the local path
+          importer?.includes(alias.libraryPath) ? alias.aliasExternalBasePath : alias.aliasLocalBasePath,
+          // remove the alias replacement from the source path
+          source.replace(alias.replacement, "")
+        );
+        return (await this.resolve(resolvedPath))?.id;
+      }
+    };
+  });
+}
 export {
-  craft,
-  defineCraftConfig
+  aliasConfig,
+  defineCraftConfig,
+  pluginConfig
 };

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,213 @@
-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
-  }
+import { defineConfig, loadEnv } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
+import laravel from 'laravel-vite-plugin';
+import { run } from 'vite-plugin-run';
+import { craft } from './craftPlugin.js';
+import tailwindcss from '@tailwindcss/vite';
+import i18n from 'laravel-vue-i18n/vite';
+import vueDevTools from 'vite-plugin-vue-devtools';
+
+interface viteConfigOptions {
+    laravel?: {
+        input?: string[];
+        refresh?: boolean;
+    };
+    plugins?: any[];
+    aliases?: any[];
+    ui?: {
+        localPath?: 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)
+export function defineCraftConfig(options: viteConfigOptions = {}) {
+    return defineConfig(({ mode }) => {
+        const serverConfig = getServerConfig(mode);
+        return {
+            plugins: [
+                ...pluginConfig(options),
+                ...(options.plugins || []),
+                // Plugin to enforce allowedHosts after laravel-vite-plugin
+                // This bypasses Vite's DNS rebinding protection which conflicts with reverse proxy setups
+                {
+                    name: 'craft-allowed-hosts',
+                    enforce: 'post' as const,
+                    config() {
+                        return {
+                            server: {
+                                allowedHosts: true as const,
+                            },
+                        };
+                    },
+                },
+            ],
+            resolve: {
+                ...aliasConfig(options.aliases, options.ui),
+            },
+            server: serverConfig,
+        };
+    });
+}
+
+function getServerConfig(mode: string) {
+    // Only load VITE_* prefixed env vars (Vite's default secure behavior)
+    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 {
+            host: '0.0.0.0',
+            origin: appUrl,
+            allowedHosts: true as const,
+            hmr: {
+                host: url.hostname,
+                protocol: isHttps ? 'wss' : 'ws',
+                clientPort: isHttps ? 443 : (parseInt(url.port) || 80),
+            },
+        };
+    } catch {
+        return { host: '0.0.0.0' };
+    }
+}
+
+export function pluginConfig(options: viteConfigOptions) {
+    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',
+                },
+            },
+        }),
+        runConfiguration(),
+        vueDevTools({
+            appendTo: 'virtual:craft',
+            launchEditor: import.meta.env?.VITE_EDITOR || 'cursor',
+        }),
+    ].filter(Boolean);
+}
+
+function runConfiguration() {
+    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'],
+        },
+    ]);
+}
+
+interface LocalAlias {
+    regex: RegExp;
+    replacement: string;
+    libraryPath?: string;
+    aliasLocalBasePath?: string;
+    aliasExternalBasePath?: string;
+}
+
+export function aliasConfig(aliases: any[] = [], ui: any = {}) {
+    if (!process.argv.includes('build') && ui.localPath) {
+
+        const absoluteLibraryPath = path.resolve(process.cwd(), ui.localPath);
+
+        const localAliases = [
+            // The following alias will make the @ alias work correctly depending on the importer path.
+            {
+                regex: /^@\//,
+                replacement: "@/",
+                libraryPath: absoluteLibraryPath,
+                aliasLocalBasePath: "./resources/js",
+                aliasExternalBasePath: path.join(ui.localPath, "src"),
+            },
+            // The following alias config will change all package references like import { Dialog } from '@hardimpactdev/craft-ui';
+            // to the library's index.ts file instead.
+            {
+                regex: /^@hardimpactdev\/craft-ui/,
+                replacement: path.join(ui.localPath, "index.ts"),
+            },
+        ];
+
+        aliases.push(...aliasLocalPackage(localAliases as LocalAlias[]));
+    }
+
+    return {
+        dedupe: ['@inertiajs/vue3', '@tailwindcss/vite'],
+        alias: aliases,
+    };
+}
+
+interface CustomResolverContext {
+    resolve: (id: string, importer?: string) => Promise<{ id: string } | null>;
 }
 
-/**
- * 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,
-              },
-            });
-          }`;
-      }
-    },
-  }
+function aliasLocalPackage(aliases: Array<LocalAlias>) {
+
+    return aliases.map((alias) => {
+
+        // if the alias has no external path, folder name, or local path, use the replacement as the path
+        // For example library references like import { Dialog } from '@hardimpactdev/craft-ui'; will be resolved to the library's index.ts file instead.
+        // This will make HMR work correctly. Allowing to update the library and see the changes in the target project without hard page reloads.
+        if (!alias.libraryPath && !alias.aliasLocalBasePath && !alias.aliasExternalBasePath) {
+            return {
+                find: alias.regex,
+                replacement: path.resolve(process.cwd(), alias.replacement),
+            };
+        }
+
+        // When using an alias both in a library and the target project, we need to resolve the alias correctly based on the importer path.
+        // This allows for example to use the @ alias both in the library and the target project.
+        return {
+            find: alias.regex,
+            replacement: alias.replacement,
+            async customResolver(this: CustomResolverContext, source: any, importer: any) {
+                let resolvedPath = '';
+
+                resolvedPath = path.resolve(
+                    // get the directory name of the importer
+                    process.cwd(),
+
+                    // if the importer string includes the folder name, use the external path, otherwise use the local path
+                    importer?.includes(alias.libraryPath) ? alias.aliasExternalBasePath! : alias.aliasLocalBasePath!,
+
+                    // remove the alias replacement from the source path
+                    source.replace(alias.replacement, ''),
+                );
+
+                // use Vite's (in fact, rollup's) resolution function
+                return (await this.resolve(resolvedPath))?.id;
+            },
+        };
+    });
 }

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.6",
   "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"
   }
 }