@burdenoff/fe-libs 2026.510.126

package/src/shared/tokens/tokens.css

@@ -0,0 +1,22 @@
+/**
+ * Burdenoff Design Tokens - Consolidated
+ *
+ * This file aggregates all design tokens from foundation, semantic, and brand layers.
+ * Host shells should import this single file to get all tokens.
+ *
+ * Theme attributes (data-brand, data-theme, data-density, data-typography) must be set
+ * on the root element by the host shell to activate the appropriate token values.
+ */
+
+/* Foundation tokens - color palette, spacing, typography scales */
+@import './build/foundation.css' layer(foundation);
+
+/* Semantic tokens - purpose-driven tokens that reference foundation */
+@import './build/semantic.css' layer(semantic);
+
+/* Brand overrides - brand-specific customizations */
+@import './build/brands/workspaces.css' layer(brands);
+@import './build/brands/tenant.css' layer(brands);
+@import './build/brands/healthybowl.css' layer(brands);
+@import './build/brands/fluidgrids.css' layer(brands);
+@import './build/brands/vibecontrols.css' layer(brands);

package/src/vite/index.ts

@@ -0,0 +1,49 @@
+/**
+ * Burdenoff Vite Configuration Utilities
+ *
+ * @description Standardized Vite configurations for microfrontends and app shells
+ * @version Vite 8.0.0-beta.8+
+ *
+ * @example
+ * ```ts
+ * // Microfrontend vite.config.ts
+ * import { createMicrofrontendConfig } from '@burdenoff/fe-libs/vite';
+ *
+ * export default createMicrofrontendConfig({
+ *   name: 'tags',
+ *   port: 5114,
+ * }, import.meta.url);
+ *
+ * // App Shell vite.config.ts
+ * import { createAppShellConfig } from '@burdenoff/fe-libs/vite';
+ *
+ * export default createAppShellConfig({
+ *   name: 'workspaces',
+ *   port: 5200,
+ *   microfrontends: ['auth', 'billing', 'tags', 'files'],
+ * }, import.meta.url);
+ * ```
+ */
+
+// Types
+export type { MicrofrontendConfig, AppShellConfig } from "./types";
+export {
+  STANDARD_MFE_EXTERNALS,
+  STANDARD_WATCH_IGNORE,
+  MFE_PORT_MAP,
+  APP_SHELL_PORT_MAP,
+} from "./types";
+
+// Plugins
+export {
+  createContextualAliasPlugin,
+  createAdaptiveExpressionsFix,
+  createReactSingletonAliases,
+  createNodeShimAliases,
+  createZustandEsmPlugin,
+  createManualChunks,
+} from "./plugins";
+
+// Config Factories
+export { createMicrofrontendConfig } from "./mfe.config";
+export { createAppShellConfig } from "./shell.config";

package/src/vite/mfe.config.ts

@@ -0,0 +1,176 @@
+/**
+ * Standard Microfrontend Vite Configuration Factory
+ *
+ * @description Creates a production-ready Vite config for microfrontends
+ * @version Vite 8.0.0-beta.8+
+ *
+ * Features:
+ * - Library mode with ES modules output
+ * - preserveModules for optimal tree-shaking
+ * - External dependencies (React, Apollo, etc.) provided by host
+ * - Hot reload in development
+ * - Contextual @/ alias resolution
+ *
+ * @example
+ * ```ts
+ * // vite.config.ts
+ * import { createMicrofrontendConfig } from '@burdenoff/fe-libs/vite';
+ *
+ * export default createMicrofrontendConfig({
+ *   name: 'tags',
+ *   port: 5114,
+ * });
+ * ```
+ */
+
+import { defineConfig, type UserConfig, type Plugin } from "vite";
+import react from "@vitejs/plugin-react";
+import dts from "vite-plugin-dts";
+import { resolve, dirname } from "path";
+import { fileURLToPath } from "url";
+import {
+  type MicrofrontendConfig,
+  STANDARD_MFE_EXTERNALS,
+  STANDARD_WATCH_IGNORE,
+  MFE_PORT_MAP,
+} from "./types";
+import { createContextualAliasPlugin } from "./plugins";
+
+/**
+ * Creates a standardized Vite configuration for microfrontends.
+ *
+ * @param config - Microfrontend configuration options
+ * @param configPath - The path to the vite.config.ts file (use import.meta.url)
+ * @returns Vite configuration object
+ */
+export function createMicrofrontendConfig(
+  config: MicrofrontendConfig,
+  configPath: string,
+): UserConfig {
+  // Resolve __dirname from the config file path
+  const __dirname =
+    typeof configPath === "string" && configPath.startsWith("file://")
+      ? dirname(fileURLToPath(configPath))
+      : configPath;
+
+  const {
+    name,
+    port = MFE_PORT_MAP[name] || 5100,
+    entry = `${name}/index.ts`,
+    feLibsPath = "../../fe-libs/src",
+    additionalExternals = [],
+    additionalAliases = {},
+    additionalPlugins = [],
+    generateDts = false,
+  } = config;
+
+  const resolvedFeLibsPath = resolve(__dirname, feLibsPath);
+  const srcPath = resolve(__dirname, "./src");
+
+  // Build external array including regex patterns
+  const externals: (string | RegExp)[] = [
+    ...STANDARD_MFE_EXTERNALS.filter(
+      (ext): ext is string => typeof ext === "string",
+    ),
+    ...additionalExternals,
+    // Include regex patterns
+    /^@burdenoff\/fe-libs\/.*/,
+  ];
+
+  const plugins: Plugin[] = [
+    createContextualAliasPlugin({
+      feLibsPath: resolvedFeLibsPath,
+      srcPath,
+    }),
+    react(),
+    ...(generateDts ? [dts({ insertTypesEntry: true })] : []),
+    ...additionalPlugins,
+  ];
+
+  return defineConfig({
+    plugins,
+
+    server: {
+      port,
+      strictPort: true,
+      headers: {
+        // Required for OAuth popup flows and SharedArrayBuffer
+        "Cross-Origin-Opener-Policy": "same-origin-allow-popups",
+        "Cross-Origin-Embedder-Policy": "unsafe-none",
+      },
+      watch: {
+        ignored: [...STANDARD_WATCH_IGNORE],
+      },
+    },
+
+    build: {
+      // Library mode configuration
+      lib: {
+        entry: {
+          [name]: resolve(__dirname, `src/${entry}`),
+        },
+        formats: ["es"],
+      },
+
+      // Rolldown options (Vite 8 uses Rolldown instead of Rollup)
+      rolldownOptions: {
+        external: externals,
+        output: {
+          // Preserve module structure for optimal tree-shaking
+          preserveModules: true,
+          preserveModulesRoot: "src",
+          // Consistent file naming
+          entryFileNames: "[name].js",
+          chunkFileNames: "chunks/[name].js",
+        },
+      },
+
+      // Enable source maps for debugging
+      sourcemap: true,
+
+      // Don't minify library builds (app shell will minify)
+      minify: false,
+
+      // Don't empty outDir on rebuild (for watch mode)
+      emptyOutDir: true,
+    },
+
+    resolve: {
+      alias: {
+        "@burdenoff/fe-libs": resolvedFeLibsPath,
+        ...additionalAliases,
+      },
+      // Ensure consistent dependency resolution
+      dedupe: [
+        "react",
+        "react-dom",
+        "react-router-dom",
+        "@apollo/client",
+        "graphql",
+        "zustand",
+      ],
+    },
+
+    // Vite 8 uses Oxc for transforms instead of esbuild
+    oxc: {
+      jsx: {
+        runtime: "automatic",
+      },
+    },
+
+    // Optimize dependencies for faster dev startup
+    optimizeDeps: {
+      include: [
+        "react",
+        "react-dom",
+        "react-router-dom",
+        "@apollo/client",
+        "graphql",
+        "lucide-react",
+        "zustand",
+      ],
+    },
+  }) as UserConfig;
+}
+
+export default createMicrofrontendConfig;

package/src/vite/plugins.ts

@@ -0,0 +1,311 @@
+/**
+ * Shared Vite Plugins for Burdenoff Microfrontends and App Shells
+ *
+ * @description Common plugins used across all Vite configurations
+ * @version Vite 8.0.0-beta.8+
+ */
+
+import type { Plugin } from "vite";
+import { resolve } from "path";
+
+interface ContextualAliasOptions {
+  /** Path to fe-libs/src */
+  feLibsPath: string;
+  /** Path to the current project's src directory */
+  srcPath: string;
+  /** Map of microfrontend names to their src paths (for app shells) */
+  microfePaths?: Record<string, string>;
+}
+
+/**
+ * Creates a plugin that contextually resolves @/ imports based on the importer location.
+ *
+ * This allows:
+ * - Files in fe-libs to use @/ to reference fe-libs/src
+ * - Files in a microfrontend to use @/ to reference that microfrontend's src
+ * - Files in an app shell to use @/ to reference the app's src
+ *
+ * @example
+ * ```ts
+ * plugins: [
+ *   createContextualAliasPlugin({
+ *     feLibsPath: resolve(__dirname, '../../fe-libs/src'),
+ *     srcPath: resolve(__dirname, './src'),
+ *   }),
+ * ]
+ * ```
+ */
+export function createContextualAliasPlugin(
+  options: ContextualAliasOptions,
+): Plugin {
+  const { feLibsPath, srcPath, microfePaths = {} } = options;
+
+  return {
+    name: "burdenoff:contextual-alias",
+    enforce: "pre",
+
+    async resolveId(source, importer, resolveOptions) {
+      // Only handle @/ imports
+      if (!source.startsWith("@/")) {
+        return null;
+      }
+
+      // Need an importer to determine context
+      if (!importer) {
+        return null;
+      }
+
+      const importPath = source.slice(2); // Remove '@/'
+      let basePath: string;
+
+      // Determine base path based on importer location
+      if (importer.includes("fe-libs")) {
+        // Importer is from fe-libs, resolve to fe-libs/src
+        basePath = feLibsPath;
+      } else {
+        // Check if importer is from any microfrontend
+        let foundMicrofe = false;
+        for (const [name, path] of Object.entries(microfePaths)) {
+          if (importer.includes(name)) {
+            basePath = path;
+            foundMicrofe = true;
+            break;
+          }
+        }
+
+        // Otherwise resolve to project src
+        if (!foundMicrofe) {
+          basePath = srcPath;
+        }
+      }
+
+      const resolvedPath = resolve(basePath!, importPath);
+
+      // Let Vite resolve the actual file (handles .ts, .tsx, /index.ts etc.)
+      const resolution = await this.resolve(resolvedPath, importer, {
+        skipSelf: true,
+        ...resolveOptions,
+      });
+
+      return resolution;
+    },
+  };
+}
+
+/**
+ * Creates a plugin that fixes adaptive-expressions browser bundle issues.
+ * Only needed for bigconsole-app and similar apps using adaptive cards.
+ *
+ * @example
+ * ```ts
+ * plugins: [createAdaptiveExpressionsFix()]
+ * ```
+ */
+export function createAdaptiveExpressionsFix(): Plugin {
+  return {
+    name: "burdenoff:adaptive-expressions-fix",
+    enforce: "pre",
+
+    resolveId(source) {
+      // Force correct resolution for adaptive-expressions
+      if (source === "adaptive-expressions") {
+        return {
+          id: "adaptive-expressions/lib/index.js",
+          external: false,
+        };
+      }
+      return null;
+    },
+  };
+}
+
+/**
+ * Plugin to ensure single React instance across linked workspaces.
+ * Prevents "Invalid hook call" errors in monorepo setups.
+ *
+ * @param nodeModulesPath - Path to the app's node_modules directory
+ *
+ * @example
+ * ```ts
+ * plugins: [createReactSingletonPlugin(resolve(__dirname, 'node_modules'))]
+ * ```
+ */
+export function createReactSingletonAliases(
+  nodeModulesPath: string,
+): Record<string, string> {
+  return {
+    react: resolve(nodeModulesPath, "react"),
+    "react-dom": resolve(nodeModulesPath, "react-dom"),
+    "react-dom/client": resolve(nodeModulesPath, "react-dom/client"),
+    "react/jsx-runtime": resolve(nodeModulesPath, "react/jsx-runtime"),
+    "react/jsx-dev-runtime": resolve(nodeModulesPath, "react/jsx-dev-runtime"),
+  };
+}
+
+/**
+ * Creates aliases for Node.js polyfill shims from fe-libs.
+ * Used by app shells that need browser shims for assert, process, util, etc.
+ *
+ * @param feLibsShimsPath - Path to fe-libs/src/shared/shims directory
+ * @param srcPath - Path to the app's src directory (for use-sync-external-store overrides)
+ */
+export function createNodeShimAliases(
+  feLibsShimsPath: string,
+  srcPath?: string,
+): Record<string, string> {
+  const shimsPath = srcPath ?? feLibsShimsPath;
+  return {
+    assert: resolve(feLibsShimsPath, "assert.ts"),
+    util: resolve(feLibsShimsPath, "util.ts"),
+    process: resolve(feLibsShimsPath, "process.ts"),
+    "use-sync-external-store/shim": resolve(
+      shimsPath,
+      "use-sync-external-store-shim.ts",
+    ),
+    "use-sync-external-store/shim/index": resolve(
+      shimsPath,
+      "use-sync-external-store-shim.ts",
+    ),
+    "use-sync-external-store/shim/index.js": resolve(
+      shimsPath,
+      "use-sync-external-store-shim.ts",
+    ),
+    "use-sync-external-store/with-selector": resolve(
+      shimsPath,
+      "use-sync-external-store-with-selector.ts",
+    ),
+    "use-sync-external-store/with-selector.js": resolve(
+      shimsPath,
+      "use-sync-external-store-with-selector.ts",
+    ),
+    "use-sync-external-store/shim/with-selector": resolve(
+      shimsPath,
+      "use-sync-external-store-with-selector.ts",
+    ),
+    "use-sync-external-store/shim/with-selector.js": resolve(
+      shimsPath,
+      "use-sync-external-store-with-selector.ts",
+    ),
+  };
+}
+
+/**
+ * Zustand ESM fix plugin.
+ * Maps zustand imports to ESM entries since zustand v5 ships as CJS.
+ *
+ * @param nodeModulesPath - Path to the app's node_modules
+ * @param shimsPath - Path to the shims directory for use-sync-external-store
+ */
+export function createZustandEsmPlugin(
+  nodeModulesPath: string,
+  shimsPath: string,
+): Plugin {
+  const zustandEsmMap: Record<string, string> = {
+    zustand: resolve(nodeModulesPath, "zustand/esm/index.mjs"),
+    "zustand/vanilla": resolve(nodeModulesPath, "zustand/esm/vanilla.mjs"),
+    "zustand/middleware": resolve(
+      nodeModulesPath,
+      "zustand/esm/middleware.mjs",
+    ),
+    "zustand/middleware/immer": resolve(
+      nodeModulesPath,
+      "zustand/esm/middleware/immer.mjs",
+    ),
+    "zustand/shallow": resolve(nodeModulesPath, "zustand/esm/shallow.mjs"),
+    "zustand/vanilla/shallow": resolve(
+      nodeModulesPath,
+      "zustand/esm/vanilla/shallow.mjs",
+    ),
+    "zustand/react": resolve(nodeModulesPath, "zustand/esm/react.mjs"),
+    "zustand/react/shallow": resolve(
+      nodeModulesPath,
+      "zustand/esm/react/shallow.mjs",
+    ),
+    "zustand/traditional": resolve(
+      nodeModulesPath,
+      "zustand/esm/traditional.mjs",
+    ),
+    "use-sync-external-store/shim": resolve(
+      shimsPath,
+      "use-sync-external-store-shim.ts",
+    ),
+    "use-sync-external-store/shim/index": resolve(
+      shimsPath,
+      "use-sync-external-store-shim.ts",
+    ),
+    "use-sync-external-store/shim/index.js": resolve(
+      shimsPath,
+      "use-sync-external-store-shim.ts",
+    ),
+    "use-sync-external-store/with-selector": resolve(
+      shimsPath,
+      "use-sync-external-store-with-selector.ts",
+    ),
+    "use-sync-external-store/with-selector.js": resolve(
+      shimsPath,
+      "use-sync-external-store-with-selector.ts",
+    ),
+    "use-sync-external-store/shim/with-selector": resolve(
+      shimsPath,
+      "use-sync-external-store-with-selector.ts",
+    ),
+    "use-sync-external-store/shim/with-selector.js": resolve(
+      shimsPath,
+      "use-sync-external-store-with-selector.ts",
+    ),
+  };
+
+  return {
+    name: "burdenoff:zustand-esm",
+    enforce: "pre",
+    resolveId(source) {
+      if (source in zustandEsmMap) {
+        return zustandEsmMap[source];
+      }
+      return null;
+    },
+  };
+}
+
+/**
+ * Standard manual chunks function for app shell builds.
+ * Splits vendor dependencies for optimal caching.
+ */
+export function createManualChunks(id: string): string | undefined {
+  if (
+    id.includes("node_modules/react-dom") ||
+    id.includes("node_modules/react/") ||
+    id.includes("node_modules/react-router") ||
+    id.includes("node_modules/react-error-boundary")
+  ) {
+    return "vendor-react";
+  }
+  if (
+    id.includes("node_modules/@apollo/client") ||
+    id.includes("node_modules/graphql") ||
+    id.includes("node_modules/graphql-ws")
+  ) {
+    return "vendor-apollo";
+  }
+  if (
+    id.includes("node_modules/lucide-react") ||
+    id.includes("node_modules/sonner") ||
+    id.includes("node_modules/cmdk")
+  ) {
+    return "vendor-ui";
+  }
+  if (id.includes("node_modules/@radix-ui")) {
+    return "vendor-radix";
+  }
+  if (
+    id.includes("node_modules/react-hook-form") ||
+    id.includes("node_modules/@hookform") ||
+    id.includes("node_modules/zod")
+  ) {
+    return "vendor-forms";
+  }
+  if (id.includes("node_modules/date-fns")) {
+    return "vendor-datefns";
+  }
+  return undefined;
+}