@tixxin/nuxt-theme-engine 0.0.1

package/dist/runtime/build-shims.d.ts

@@ -0,0 +1,52 @@
+declare module '#build/theme-engine.options.mjs' {
+  export const themeEngineOptions: {
+    themesDir: string
+    defaultTheme: string
+    cookieKey: string
+    lazyLoadThemes: boolean
+    requiredCssVars: string[]
+    contractsEntry: string
+    contractsImportId: string
+  }
+
+  export const themeEngineThemeNames: string[]
+
+  export const themeEngineThemes: Array<{
+    name: string
+    label: string
+    extends: string | null
+    inheritanceChain: string[]
+  }>
+}
+
+declare module '#build/theme-engine.registry.mjs' {
+  import type { Component } from 'vue'
+
+  export const themeComponentRegistry: Record<string, Record<string, {
+    alias: string
+    sourceTheme: string
+  }>>
+
+  export const themeComponentLoaders: Record<string, Record<string, () => Promise<{ default: Component }>>>
+}
+
+declare module '#build/theme-engine.contracts.mjs' {
+  export const themeEngineContracts: {
+    entry: string
+    importId: string
+  }
+
+  export type GeneratedThemeComponentName = string
+  export type GeneratedThemeComponentContracts = Record<string, Record<string, unknown>>
+  export type ThemeComponentDiscriminatedProps = {
+    name: GeneratedThemeComponentName
+  } & Record<string, unknown>
+}
+
+declare module '#build/theme-engine.css-report.mjs' {
+  export const themeCssVariableReport: Array<{
+    theme: string
+    provided: string[]
+    missing: string[]
+  }>
+}

package/dist/runtime/components/ThemeComponent.d.vue.ts

@@ -0,0 +1,10 @@
+type GeneratedThemeComponentName = import('#build/theme-engine.contracts.mjs').GeneratedThemeComponentName;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    name: GeneratedThemeComponentName;
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    name: GeneratedThemeComponentName;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/ThemeComponent.vue

@@ -0,0 +1,46 @@
+<script>
+import { computed, defineAsyncComponent, defineComponent, h, useAttrs, useSlots } from "vue";
+import { themeComponentLoaders, themeComponentRegistry } from "#build/theme-engine.registry.mjs";
+import { useThemeEngine } from "../composables/useThemeEngine";
+const asyncComponentCache = /* @__PURE__ */ new Map();
+export default defineComponent({
+  name: "ThemeComponent",
+  inheritAttrs: false,
+  props: {
+    name: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props) {
+    const attrs = useAttrs();
+    const slots = useSlots();
+    const { currentTheme } = useThemeEngine();
+    const firstThemeName = Object.keys(themeComponentRegistry)[0] ?? "";
+    const entry = computed(() => {
+      return themeComponentRegistry[currentTheme.value]?.[props.name] ?? themeComponentRegistry[firstThemeName]?.[props.name];
+    });
+    const resolvedComponent = computed(() => {
+      const resolvedEntry = entry.value;
+      if (!resolvedEntry) {
+        return null;
+      }
+      const loader = themeComponentLoaders[currentTheme.value]?.[props.name] ?? themeComponentLoaders[firstThemeName]?.[props.name];
+      if (!loader) {
+        return null;
+      }
+      const cacheKey = `${resolvedEntry.sourceTheme}:${props.name}`;
+      if (!asyncComponentCache.has(cacheKey)) {
+        asyncComponentCache.set(cacheKey, defineAsyncComponent(loader));
+      }
+      return asyncComponentCache.get(cacheKey) ?? null;
+    });
+    return () => {
+      if (!resolvedComponent.value) {
+        return null;
+      }
+      return h(resolvedComponent.value, attrs, slots);
+    };
+  }
+});
+</script>

package/dist/runtime/components/ThemeComponent.vue.d.ts

@@ -0,0 +1,10 @@
+type GeneratedThemeComponentName = import('#build/theme-engine.contracts.mjs').GeneratedThemeComponentName;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    name: GeneratedThemeComponentName;
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    name: GeneratedThemeComponentName;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/composables/useThemeConfig.d.ts

@@ -0,0 +1,10 @@
+type ThemeConfigValue = string | number | boolean | null | Record<string, unknown> | unknown[];
+type ThemeConfigRecord = Record<string, ThemeConfigValue>;
+export declare function useThemeConfig(): {
+    activeThemeConfig: import("vue").ComputedRef<ThemeConfigRecord>;
+    getThemeOption: <T = ThemeConfigValue>(key: string, fallback?: T) => T | undefined;
+    setThemeOption: (key: string, value: ThemeConfigValue) => void;
+    removeThemeOption: (key: string) => void;
+    replaceThemeConfig: (nextConfig: ThemeConfigRecord) => void;
+};
+export {};

package/dist/runtime/composables/useThemeConfig.js

@@ -0,0 +1,88 @@
+import { computed, watch } from "vue";
+import { useCookie, useState } from "nuxt/app";
+import { themeEngineOptions } from "#build/theme-engine.options.mjs";
+import { useThemeEngine } from "./useThemeEngine.js";
+const CONFIG_STATE_KEY = "theme-engine:config-store";
+const CONFIG_STORAGE_KEY = "theme-engine:theme-config";
+const CONFIG_COOKIE_KEY_SUFFIX = "-config";
+let themeConfigInitialized = false;
+let themeConfigWatchRegistered = false;
+function parseStoredConfig(raw) {
+  if (!raw) {
+    return {};
+  }
+  try {
+    const parsed = JSON.parse(raw);
+    return parsed && typeof parsed === "object" ? parsed : {};
+  } catch {
+    return {};
+  }
+}
+export function useThemeConfig() {
+  const { currentTheme } = useThemeEngine();
+  const cookie = useCookie(`${themeEngineOptions.cookieKey}${CONFIG_COOKIE_KEY_SUFFIX}`, {
+    default: () => ({})
+  });
+  const store = useState(CONFIG_STATE_KEY, () => cookie.value ?? {});
+  if (import.meta.client && !themeConfigInitialized) {
+    const storageValue = parseStoredConfig(window.localStorage.getItem(CONFIG_STORAGE_KEY));
+    store.value = Object.keys(storageValue).length > 0 ? storageValue : cookie.value ?? {};
+    themeConfigInitialized = true;
+  }
+  if (import.meta.client && !themeConfigWatchRegistered) {
+    watch(store, (value) => {
+      cookie.value = value;
+      if (import.meta.client) {
+        window.localStorage.setItem(CONFIG_STORAGE_KEY, JSON.stringify(value));
+      }
+    }, {
+      deep: true,
+      immediate: true
+    });
+    themeConfigWatchRegistered = true;
+  }
+  const activeThemeConfig = computed(() => {
+    return store.value[currentTheme.value] ?? {};
+  });
+  function getThemeOption(key, fallback) {
+    const value = activeThemeConfig.value[key];
+    return value ?? fallback;
+  }
+  function setThemeOption(key, value) {
+    const themeName = currentTheme.value;
+    const currentConfig = store.value[themeName] ?? {};
+    store.value = {
+      ...store.value,
+      [themeName]: {
+        ...currentConfig,
+        [key]: value
+      }
+    };
+  }
+  function removeThemeOption(key) {
+    const themeName = currentTheme.value;
+    const currentConfig = {
+      ...store.value[themeName] ?? {}
+    };
+    delete currentConfig[key];
+    store.value = {
+      ...store.value,
+      [themeName]: currentConfig
+    };
+  }
+  function replaceThemeConfig(nextConfig) {
+    store.value = {
+      ...store.value,
+      [currentTheme.value]: {
+        ...nextConfig
+      }
+    };
+  }
+  return {
+    activeThemeConfig,
+    getThemeOption,
+    setThemeOption,
+    removeThemeOption,
+    replaceThemeConfig
+  };
+}

package/dist/runtime/composables/useThemeEngine.d.ts

@@ -0,0 +1,6 @@
+export declare function useThemeEngine(): {
+    currentTheme: Readonly<import("vue").Ref<string, string>>;
+    availableThemes: import("vue").ComputedRef<any[]>;
+    themeDefinitions: import("vue").ComputedRef<any[]>;
+    setTheme: (themeName: string) => boolean;
+};

package/dist/runtime/composables/useThemeEngine.js

@@ -0,0 +1,68 @@
+import { computed, readonly, watch } from "vue";
+import { useCookie, useRoute, useState } from "nuxt/app";
+import { themeEngineOptions, themeEngineThemeNames, themeEngineThemes } from "#build/theme-engine.options.mjs";
+const CURRENT_THEME_KEY = "theme-engine:current-theme";
+const STORAGE_KEY = "theme-engine:storage";
+let themeEngineInitialized = false;
+let themeEngineWatchRegistered = false;
+function isThemeName(value) {
+  return Boolean(value) && themeEngineThemeNames.includes(value);
+}
+function resolveRouteTheme() {
+  const route = useRoute();
+  const queryTheme = route.query.theme;
+  return typeof queryTheme === "string" ? queryTheme : void 0;
+}
+function resolveInitialTheme(cookieKey, fallbackTheme) {
+  const routeTheme = resolveRouteTheme();
+  if (isThemeName(routeTheme)) {
+    return routeTheme;
+  }
+  const cookie = useCookie(cookieKey);
+  if (isThemeName(cookie.value)) {
+    return cookie.value;
+  }
+  if (import.meta.client) {
+    const storageTheme = window.localStorage.getItem(STORAGE_KEY);
+    if (isThemeName(storageTheme)) {
+      return storageTheme;
+    }
+  }
+  return fallbackTheme;
+}
+export function useThemeEngine() {
+  const currentTheme = useState(CURRENT_THEME_KEY, () => themeEngineOptions.defaultTheme);
+  if (import.meta.server || !themeEngineInitialized) {
+    currentTheme.value = resolveInitialTheme(themeEngineOptions.cookieKey, themeEngineOptions.defaultTheme);
+    if (import.meta.client) {
+      themeEngineInitialized = true;
+    }
+  }
+  const cookie = useCookie(themeEngineOptions.cookieKey);
+  if (import.meta.client && !themeEngineWatchRegistered) {
+    watch(currentTheme, (themeName) => {
+      cookie.value = themeName;
+      if (import.meta.client) {
+        window.localStorage.setItem(STORAGE_KEY, themeName);
+      }
+    }, {
+      immediate: true
+    });
+    themeEngineWatchRegistered = true;
+  }
+  const availableThemes = computed(() => [...themeEngineThemeNames]);
+  const themeDefinitions = computed(() => [...themeEngineThemes]);
+  function setTheme(themeName) {
+    if (!isThemeName(themeName)) {
+      return false;
+    }
+    currentTheme.value = themeName;
+    return true;
+  }
+  return {
+    currentTheme: readonly(currentTheme),
+    availableThemes,
+    themeDefinitions,
+    setTheme
+  };
+}

package/dist/runtime/devtools/page.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/devtools/page.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { computed } from "vue";
+import { themeCssVariableReport } from "#build/theme-engine.css-report.mjs";
+import { themeComponentRegistry } from "#build/theme-engine.registry.mjs";
+import { themeEngineOptions } from "#build/theme-engine.options.mjs";
+import { useThemeConfig } from "../composables/useThemeConfig";
+import { useThemeEngine } from "../composables/useThemeEngine";
+const { currentTheme, availableThemes, themeDefinitions, setTheme } = useThemeEngine();
+const { activeThemeConfig } = useThemeConfig();
+const currentRegistryEntries = computed(() => {
+  return Object.entries(themeComponentRegistry[currentTheme.value] ?? {});
+});
+</script>
+
+<template>
+  <main class="theme-engine-devtools">
+    <section class="theme-engine-card">
+      <h1>Theme Engine</h1>
+      <p>当前主题：<strong>{{ currentTheme }}</strong></p>
+      <div class="theme-engine-actions">
+        <button
+          v-for="themeName in availableThemes"
+          :key="themeName"
+          :class="{ active: themeName === currentTheme }"
+          type="button"
+          @click="setTheme(themeName)"
+        >
+          {{ themeName }}
+        </button>
+      </div>
+    </section>
+
+    <section class="theme-engine-grid">
+      <article class="theme-engine-card">
+        <h2>模块选项</h2>
+        <pre>{{ themeEngineOptions }}</pre>
+      </article>
+
+      <article class="theme-engine-card">
+        <h2>主题定义</h2>
+        <pre>{{ themeDefinitions }}</pre>
+      </article>
+
+      <article class="theme-engine-card">
+        <h2>当前主题组件映射</h2>
+        <pre>{{ currentRegistryEntries }}</pre>
+      </article>
+
+      <article class="theme-engine-card">
+        <h2>主题配置 KV</h2>
+        <pre>{{ activeThemeConfig }}</pre>
+      </article>
+
+      <article class="theme-engine-card">
+        <h2>CSS 变量报告</h2>
+        <pre>{{ themeCssVariableReport }}</pre>
+      </article>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+.theme-engine-devtools{background:#0f172a;color:#e2e8f0;font-family:Inter,system-ui,sans-serif;min-height:100vh;padding:24px}.theme-engine-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}.theme-engine-card{background:rgba(15,23,42,.85);border:1px solid rgba(148,163,184,.3);border-radius:12px;padding:16px}.theme-engine-card pre{background:rgba(2,6,23,.85);border-radius:8px;overflow:auto;padding:12px;white-space:pre-wrap;word-break:break-word}.theme-engine-actions{display:flex;flex-wrap:wrap;gap:8px}.theme-engine-actions button{background:transparent;border:1px solid rgba(148,163,184,.35);border-radius:999px;color:inherit;cursor:pointer;padding:8px 12px}.theme-engine-actions button.active{background:rgba(56,189,248,.2);border-color:rgba(56,189,248,.7)}
+</style>

package/dist/runtime/devtools/page.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/plugins/theme-sync.client.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugins/theme-sync.client.js

@@ -0,0 +1,9 @@
+import { watchEffect } from "vue";
+import { defineNuxtPlugin } from "nuxt/app";
+import { useThemeEngine } from "../composables/useThemeEngine.js";
+export default defineNuxtPlugin(() => {
+  const { currentTheme } = useThemeEngine();
+  watchEffect(() => {
+    document.documentElement.dataset.theme = currentTheme.value;
+  });
+});

package/dist/runtime/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "../.."
+  },
+  "include": [
+    "./**/*.ts",
+    "./**/*.vue",
+    "./**/*.d.ts",
+    "../types.ts",
+    "../../packages/theme-contracts/src/**/*.ts"
+  ]
+}

package/dist/types.d.mts

@@ -0,0 +1,7 @@
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module.mjs'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { default } from './module.mjs'

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@tixxin/nuxt-theme-engine",
+  "version": "0.0.1",
+  "type": "module",
+  "description": "A Nuxt 4 theme engine with layered themes, typed contracts, and runtime theme switching.",
+  "license": "MIT",
+  "main": "./dist/module.mjs",
+  "types": "./dist/types.d.mts",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs"
+    },
+    "./runtime/*": "./dist/runtime/*"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "nuxi dev playground",
+    "dev:prepare": "nuxi prepare playground",
+    "build": "pnpm --filter @tixxin/theme-contracts build && nuxt-module-build build",
+    "prepack": "pnpm build",
+    "lint": "eslint .",
+    "typecheck": "pnpm dev:prepare && tsc --noEmit -p tsconfig.json && vue-tsc --noEmit -p playground/.nuxt/tsconfig.json"
+  },
+  "peerDependencies": {
+    "nuxt": "^4.0.0"
+  },
+  "dependencies": {
+    "@tixxin/theme-contracts": "workspace:*",
+    "defu": "^6.1.6",
+    "fast-glob": "^3.3.3",
+    "pathe": "^2.0.3",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@nuxt/devtools-kit": "4.0.0-alpha.3",
+    "@nuxt/kit": "^4.4.2",
+    "@nuxt/module-builder": "^1.0.2",
+    "@types/node": "^25.5.0",
+    "@unocss/nuxt": "^66.6.7",
+    "@unocss/transformer-directives": "^66.6.7",
+    "eslint": "^10.1.0",
+    "nuxt": "^4.4.2",
+    "typescript": "^5.9.3",
+    "unbuild": "^3.6.1",
+    "unocss": "^66.6.7",
+    "vue": "^3.5.31",
+    "vue-tsc": "^3.2.6"
+  }
+}