zova-module-a-style 5.0.44 → 5.1.0

package/cli/css/boilerplate/{{sceneName}}.{{beanName}}.ts_

@@ -0,0 +1,10 @@
+import type { IDecoratorCssOptions } from 'zova-module-a-style';
+import { BeanBase, useComputed } from 'zova';
+import { Css } from 'zova-module-a-style';
+
+export interface ICssOptions<%=argv.beanNameCapitalize%> extends IDecoratorCssOptions {}
+
+@Css<ICssOptions<%=argv.beanNameCapitalize%>>()
+export class Css<%=argv.beanNameCapitalize%> extends BeanBase {
+  protected async __init__() {}
+}

package/cli/theme/boilerplate/{{sceneName}}.{{beanName}}.ts_

@@ -0,0 +1,14 @@
+import type { IDecoratorThemeOptions, IThemeApplyParams, IThemeApplyResult, IThemeBase, ThemeToken } from 'zova-module-a-style';
+import { BeanThemeBase, Theme } from 'zova-module-a-style';
+
+export interface IThemeOptions<%=argv.beanNameCapitalize%> extends IDecoratorThemeOptions {}
+
+@Theme<IThemeOptions<%=argv.beanNameCapitalize%>>()
+export class Theme<%=argv.beanNameCapitalize%> extends BeanThemeBase implements IThemeBase {
+  async apply({ name, dark }: IThemeApplyParams): Promise<IThemeApplyResult> {
+    const token: ThemeToken = {};
+    return {
+      token: this.mergeOptionsToken({ name, dark }, token),
+    };
+  }
+}

package/cli/themeHandler/boilerplate/{{sceneName}}.{{beanName}}.ts_

@@ -0,0 +1,7 @@
+import { BeanBase } from 'zova';
+import { Meta } from 'zova-module-a-meta';
+
+@Meta()
+export class Meta<%=argv.beanNameCapitalize%> extends BeanBase {
+  protected async __init__() {}
+}

package/dist/index.js

@@ -0,0 +1,292 @@
+import { BeanBase, BeanInfo, BeanScopeBase, BeanSimple, SymbolBeanFullName, UseScope, beanFullNameFromOnionName, cast, createBeanDecorator, deepExtend, useComputed } from "zova";
+import { Bean, Scope } from "zova-module-a-bean";
+import { BeanModelBase } from "zova-module-a-model";
+import { createTypeStyle, cssRaw, cssRule, style } from "typestyle";
+//#region src/bean/bean.theme.ts
+var _dec$1, _dec2$1, _dec3, _dec4, _class$1, _class2, _descriptor;
+function _initializerDefineProperty(e, i, r, l) {
+	r && Object.defineProperty(e, i, {
+		enumerable: r.enumerable,
+		configurable: r.configurable,
+		writable: r.writable,
+		value: r.initializer ? r.initializer.call(l) : void 0
+	});
+}
+function _applyDecoratedDescriptor(i, e, r, n, l) {
+	var a = {};
+	return Object.keys(n).forEach(function(i) {
+		a[i] = n[i];
+	}), a.enumerable = !!a.enumerable, a.configurable = !!a.configurable, ("value" in a || a.initializer) && (a.writable = !0), a = r.slice().reverse().reduce(function(r, n) {
+		return n(i, e, r) || r;
+	}, a), l && void 0 !== a.initializer && (a.value = a.initializer ? a.initializer.call(l) : void 0, a.initializer = void 0), void 0 === a.initializer ? (Object.defineProperty(i, e, a), null) : a;
+}
+var BeanTheme = (_dec$1 = Bean(), _dec2$1 = BeanInfo({ module: "a-style" }), _dec3 = UseScope("a-ssr"), _dec4 = Reflect.metadata("design:type", typeof ScopeModuleASsr === "undefined" ? Object : ScopeModuleASsr), _dec$1(_class$1 = _dec2$1(_class$1 = (_class2 = class BeanTheme extends BeanModelBase {
+	constructor(...args) {
+		super(...args);
+		this.name = void 0;
+		this.darkMode = void 0;
+		this._dark = void 0;
+		this.token = void 0;
+		this._mediaDark = void 0;
+		this._onMediaDarkChange = void 0;
+		_initializerDefineProperty(this, "$$scopeSsr", _descriptor, this);
+	}
+	get dark() {
+		return this._dark;
+	}
+	async __init__() {
+		const cookieTheme = this.$$scopeSsr.config.cookieTheme;
+		const cookieThemeDarkDefault = this.$$scopeSsr.config.cookieThemeDarkDefault;
+		this.name = this.$useState(cookieTheme ? "cookie" : "local", {
+			queryKey: ["themename"],
+			meta: {
+				persister: { maxAge: this.scope.config.model.themename.persister.maxAge },
+				defaultData: this.scope.config.defaultTheme
+			}
+		});
+		this.darkMode = this.$useState(cookieTheme ? "cookie" : "local", {
+			queryKey: ["themedark"],
+			meta: {
+				persister: {
+					maxAge: this.scope.config.model.themename.persister.maxAge,
+					deserialize: (value, deserializeDefault) => {
+						if (cookieTheme && value === "auto") value = cookieThemeDarkDefault;
+						return deserializeDefault(value);
+					}
+				},
+				defaultData: cookieTheme ? cookieThemeDarkDefault : "auto"
+			}
+		});
+		this._updateDark();
+		this.$watch(() => this.darkMode, () => {
+			this._updateDark();
+		});
+		if (process.env.CLIENT) this.$watch([() => this.name, () => this._dark], () => {
+			this._applyTheme();
+		});
+		await this._applyThemeWrapper();
+	}
+	__dispose__() {
+		this._listenMediaDarkChange(false);
+	}
+	_updateDark() {
+		this._dark = this._getDarkFromDarkMode(this.darkMode);
+	}
+	async _applyThemeWrapper() {
+		await this._applyTheme();
+		if (process.env.SERVER && !this.$$scopeSsr.config.cookieTheme) {
+			this.toggleDark();
+			await this._applyTheme();
+		}
+	}
+	async _applyTheme() {
+		const name = this.name;
+		const dark = this._dark;
+		const theme = await this._loadThemeBean(name);
+		if (!theme) {
+			this.name = this.scope.config.defaultTheme;
+			await this._applyTheme();
+			return;
+		}
+		const res = await theme.apply({
+			name,
+			dark
+		});
+		this.token = cast(res).token;
+		const handler = res.handler ?? this.scope.config.defaultThemeHandler;
+		if (handler) await (await this.bean._getBean(beanFullNameFromOnionName(handler, "meta"), true)).apply({
+			name,
+			dark,
+			token: this.token
+		});
+	}
+	async _loadThemeBean(name) {
+		const parts = name.split(":");
+		if (parts.length === 1) throw new Error(`invalid theme name: ${name}`);
+		const moduleName = parts[0];
+		if (!this.app.meta.module.exists(moduleName)) return;
+		return await this.bean._getBean(beanFullNameFromOnionName(name, "theme"), true);
+	}
+	toggleDark() {
+		this.darkMode = !this._dark;
+		this._updateDark();
+	}
+	_getDarkFromDarkMode(mode) {
+		if (mode === void 0) mode = "auto";
+		if (mode === "auto") {
+			this._listenMediaDarkChange(true);
+			return !!this._mediaDark?.matches;
+		} else {
+			this._listenMediaDarkChange(false);
+			return mode;
+		}
+	}
+	_listenMediaDarkChange(listen) {
+		if (process.env.SERVER) return;
+		if (listen) {
+			if (!this._mediaDark) {
+				this._mediaDark = window.matchMedia("(prefers-color-scheme: dark)");
+				this._onMediaDarkChange = async () => {
+					this._updateDark();
+					this._applyTheme();
+				};
+				this._mediaDark.addEventListener("change", this._onMediaDarkChange);
+			}
+		} else if (this._mediaDark) {
+			this._mediaDark.removeEventListener("change", this._onMediaDarkChange);
+			this._onMediaDarkChange = void 0;
+			this._mediaDark = void 0;
+		}
+	}
+}, _descriptor = _applyDecoratedDescriptor(_class2.prototype, "$$scopeSsr", [_dec3, _dec4], {
+	configurable: true,
+	enumerable: true,
+	writable: true,
+	initializer: null
+}), _class2)) || _class$1) || _class$1);
+//#endregion
+//#region src/config/config.ts
+var config = (_sys) => {
+	return {
+		defaultCss: "home-base:default",
+		defaultTheme: "home-base:default",
+		defaultThemeHandler: "",
+		model: { themename: { persister: { maxAge: Infinity } } }
+	};
+};
+//#endregion
+//#region src/.metadata/this.ts
+var __ThisModule__ = "a-style";
+//#endregion
+//#region src/monkey.ts
+var Monkey = class extends BeanSimple {
+	constructor(...args) {
+		super(...args);
+		this._beanTheme = void 0;
+		this._beanCssDefault = void 0;
+		this._styleInstance = void 0;
+	}
+	async appInitialize() {
+		if (process.env.SERVER) {
+			this._styleInstance = createTypeStyle();
+			this.ctx.meta.$ssr.context.onRendered((err) => {
+				if (err) return;
+				const styles = this._styleInstance.getStyles();
+				this.ctx.meta.$ssr.context._meta.endingHeadTags += `<style id="styles-target">${styles}</style>`;
+			});
+		}
+		if (process.env.CLIENT && this.ctx.meta.$ssr.isRuntimeSsrPreHydration) {
+			this._styleInstance = createTypeStyle();
+			this.ctx.meta.$ssr.onHydrated(() => {
+				this._styleInstance.setStylesTarget(document.getElementById("styles-target"));
+			});
+		}
+	}
+	async appInitialized() {
+		this._beanTheme = await this.bean._getBean(BeanTheme, true);
+		const scope = await this.bean.getScope(__ThisModule__);
+		this._beanCssDefault = await this.bean._getBean(beanFullNameFromOnionName(scope.config.defaultCss, "css"), true);
+	}
+	async beanInit(bean, beanInstance) {
+		const self = this;
+		bean.defineProperty(beanInstance, "$style", {
+			enumerable: false,
+			configurable: true,
+			get() {
+				return function(props, ...args) {
+					return self._patchStyle(beanInstance, props, ...args);
+				};
+			}
+		});
+		bean.defineProperty(beanInstance, "$cssRule", {
+			enumerable: false,
+			configurable: true,
+			get() {
+				return function(selector, ...objects) {
+					return self._patchCssRule(beanInstance, selector, ...objects);
+				};
+			}
+		});
+		bean.defineProperty(beanInstance, "$cssRaw", {
+			enumerable: false,
+			configurable: true,
+			get() {
+				return function(mustBeValidCSS) {
+					return self._patchCssRaw(beanInstance, mustBeValidCSS);
+				};
+			}
+		});
+		bean.defineProperty(beanInstance, "$css", {
+			enumerable: false,
+			configurable: true,
+			get() {
+				return self._beanCssDefault;
+			}
+		});
+		bean.defineProperty(beanInstance, "$theme", {
+			enumerable: false,
+			configurable: true,
+			get() {
+				return self._beanTheme;
+			}
+		});
+		bean.defineProperty(beanInstance, "$token", {
+			enumerable: false,
+			configurable: true,
+			get() {
+				return useComputed(() => self._beanTheme.token);
+			}
+		});
+	}
+	_patchStyle(beanInstance, props, ...args) {
+		if (process.env.DEV) {
+			if (props && typeof props === "object") props = Object.assign({ $debugName: beanInstance[SymbolBeanFullName].replaceAll(".", "_") }, props);
+		}
+		if (this._styleInstance) return this._styleInstance.style(props, ...args);
+		else return style(props, ...args);
+	}
+	_patchCssRule(_beanInstance, selector, ...objects) {
+		if (this._styleInstance) return this._styleInstance.cssRule(selector, ...objects);
+		else return cssRule(selector, ...objects);
+	}
+	_patchCssRaw(_beanInstance, mustBeValidCSS) {
+		if (this._styleInstance) return this._styleInstance.cssRaw(mustBeValidCSS);
+		else return cssRaw(mustBeValidCSS);
+	}
+};
+//#endregion
+//#region src/.metadata/index.ts
+/** monkey: end */
+/** scope: begin */
+var _dec, _dec2, _class;
+var ScopeModuleAStyle = (_dec = Scope(), _dec2 = BeanInfo({ module: "a-style" }), _dec(_class = _dec2(_class = class ScopeModuleAStyle extends BeanScopeBase {}) || _class) || _class);
+/** scope: end */
+//#endregion
+//#region src/lib/style.ts
+function Css(options) {
+	return createBeanDecorator("css", "app", true, options);
+}
+function Theme(options) {
+	return createBeanDecorator("theme", "app", true, options);
+}
+//#endregion
+//#region src/lib/theme.ts
+function $getThemeName(themeName) {
+	return themeName;
+}
+//#endregion
+//#region src/lib/themeBase.ts
+var BeanThemeBase = class extends BeanBase {
+	getOptionsToken(params) {
+		return this.$onionOptions.token?.(params);
+	}
+	mergeOptionsToken(params, token) {
+		const optionsToken = this.getOptionsToken(params);
+		if (optionsToken) token = deepExtend(token, optionsToken);
+		return token;
+	}
+};
+//#endregion
+export { $getThemeName, BeanTheme, BeanThemeBase, Css, Monkey, ScopeModuleAStyle, Theme, config };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/bean/bean.theme.ts","../src/config/config.ts","../src/.metadata/this.ts","../src/monkey.ts","../src/.metadata/index.ts","../src/lib/style.ts","../src/lib/theme.ts","../src/lib/themeBase.ts"],"sourcesContent":["import { beanFullNameFromOnionName, cast, UseScope } from 'zova';\nimport { Bean } from 'zova-module-a-bean';\nimport { BeanModelBase } from 'zova-module-a-model';\nimport { ScopeModuleASsr } from 'zova-module-a-ssr';\n\nimport type { IThemeBase, IThemeHandler, IThemeRecord } from '../types/index.js';\n\nexport type ThemeDarkMode = 'auto' | boolean;\n\n@Bean()\nexport class BeanTheme extends BeanModelBase {\n  name: keyof IThemeRecord;\n  darkMode: ThemeDarkMode; // auto/true/false\n\n  private _dark: boolean;\n  get dark() {\n    return this._dark;\n  }\n\n  token: unknown;\n  private _mediaDark?: MediaQueryList;\n  private _onMediaDarkChange?;\n\n  @UseScope()\n  $$scopeSsr: ScopeModuleASsr;\n\n  protected async __init__() {\n    const cookieTheme = this.$$scopeSsr.config.cookieTheme;\n    const cookieThemeDarkDefault = this.$$scopeSsr.config.cookieThemeDarkDefault;\n    // support admin\n    this.name = this.$useState(cookieTheme ? 'cookie' : 'local', {\n      queryKey: ['themename'],\n      meta: {\n        persister: {\n          maxAge: this.scope.config.model.themename.persister.maxAge,\n        },\n        defaultData: this.scope.config.defaultTheme,\n      },\n    });\n    this.darkMode = this.$useState(cookieTheme ? 'cookie' : 'local', {\n      queryKey: ['themedark'],\n      meta: {\n        persister: {\n          maxAge: this.scope.config.model.themename.persister.maxAge,\n          deserialize: (value, deserializeDefault) => {\n            if (cookieTheme && value === 'auto') value = cookieThemeDarkDefault;\n            return deserializeDefault(value);\n          },\n        },\n        defaultData: cookieTheme ? cookieThemeDarkDefault : 'auto',\n      },\n    });\n    this._updateDark();\n\n    this.$watch(\n      () => this.darkMode,\n      () => {\n        this._updateDark();\n      },\n    );\n\n    if (process.env.CLIENT) {\n      this.$watch([() => this.name, () => this._dark], () => {\n        this._applyTheme();\n      });\n    }\n\n    // not use watch.immediate for await done\n    await this._applyThemeWrapper();\n  }\n\n  protected __dispose__() {\n    this._listenMediaDarkChange(false);\n  }\n\n  private _updateDark() {\n    this._dark = this._getDarkFromDarkMode(this.darkMode);\n  }\n\n  async _applyThemeWrapper() {\n    await this._applyTheme();\n    if (process.env.SERVER && !this.$$scopeSsr.config.cookieTheme) {\n      this.toggleDark();\n      await this._applyTheme();\n    }\n  }\n\n  async _applyTheme() {\n    const name = this.name;\n    const dark = this._dark;\n    const theme = await this._loadThemeBean(name);\n    if (!theme) {\n      this.name = this.scope.config.defaultTheme;\n      await this._applyTheme();\n      return;\n    }\n    const res = await theme.apply({ name, dark });\n    this.token = cast(res).token;\n    const handler = res.handler ?? this.scope.config.defaultThemeHandler;\n    if (handler) {\n      const themeHandler = (await this.bean._getBean(beanFullNameFromOnionName(handler, 'meta'), true)) as unknown as IThemeHandler;\n      await themeHandler.apply({ name, dark, token: this.token } as any);\n    }\n  }\n\n  async _loadThemeBean(name: keyof IThemeRecord): Promise<IThemeBase | undefined> {\n    const parts = name.split(':');\n    if (parts.length === 1) {\n      throw new Error(`invalid theme name: ${name}`);\n    }\n    const moduleName = parts[0];\n    if (!this.app.meta.module.exists(moduleName)) return;\n    return (await this.bean._getBean(beanFullNameFromOnionName(name, 'theme'), true)) as IThemeBase;\n  }\n\n  toggleDark() {\n    this.darkMode = !this._dark;\n    this._updateDark(); // immediate\n  }\n\n  _getDarkFromDarkMode(mode?: ThemeDarkMode) {\n    if (mode === undefined) mode = 'auto';\n    if (mode === 'auto') {\n      this._listenMediaDarkChange(true);\n      return !!this._mediaDark?.matches;\n    } else {\n      this._listenMediaDarkChange(false);\n      return mode;\n    }\n  }\n\n  _listenMediaDarkChange(listen: boolean) {\n    if (process.env.SERVER) return;\n    if (listen) {\n      if (!this._mediaDark) {\n        this._mediaDark = window.matchMedia('(prefers-color-scheme: dark)');\n        this._onMediaDarkChange = async () => {\n          this._updateDark();\n          this._applyTheme();\n        };\n        this._mediaDark.addEventListener('change', this._onMediaDarkChange);\n      }\n    } else {\n      if (this._mediaDark) {\n        this._mediaDark.removeEventListener('change', this._onMediaDarkChange);\n        this._onMediaDarkChange = undefined;\n        this._mediaDark = undefined;\n      }\n    }\n  }\n}\n","import type { ZovaSys } from 'zova';\nimport type { TypeMetaRecordSelectorSpecificNameKeys } from 'zova-module-a-meta';\n\nimport type { ICssRecord } from '../types/css.js';\nimport type { IThemeRecord } from '../types/theme.js';\n\nexport const config = (_sys: ZovaSys) => {\n  return {\n    defaultCss: 'home-base:default' as keyof ICssRecord,\n    defaultTheme: 'home-base:default' as keyof IThemeRecord,\n    defaultThemeHandler: '' as TypeMetaRecordSelectorSpecificNameKeys<'themeHandler'>,\n    model: {\n      themename: {\n        persister: {\n          maxAge: Infinity,\n        },\n      },\n    },\n  };\n};\n","export const __ThisModule__ = 'a-style';\nexport { ScopeModuleAStyle as ScopeModule } from './index.js';\n","import type { TypeStyle } from 'typestyle';\nimport type { NestedCSSProperties } from 'typestyle/lib/types.js';\nimport type { BeanBase, BeanContainer, IMonkeyAppInitialize, IMonkeyAppInitialized, IMonkeyBeanInit } from 'zova';\n\nimport { createTypeStyle, cssRaw, cssRule, style } from 'typestyle';\nimport { beanFullNameFromOnionName, BeanSimple, SymbolBeanFullName, useComputed } from 'zova';\n\nimport type { ScopeModule } from './.metadata/this.js';\n\nimport { __ThisModule__ } from './.metadata/this.js';\nimport { BeanTheme } from './bean/bean.theme.js';\n\nexport class Monkey extends BeanSimple implements IMonkeyAppInitialize, IMonkeyAppInitialized, IMonkeyBeanInit {\n  private _beanTheme: BeanTheme;\n  private _beanCssDefault: any;\n  private _styleInstance: TypeStyle;\n\n  async appInitialize() {\n    if (process.env.SERVER) {\n      this._styleInstance = createTypeStyle();\n      this.ctx.meta.$ssr.context.onRendered((err?: Error) => {\n        if (err) return;\n        const styles = this._styleInstance.getStyles();\n        this.ctx.meta.$ssr.context._meta.endingHeadTags += `<style id=\"styles-target\">${styles}</style>`;\n      });\n    }\n    if (process.env.CLIENT && this.ctx.meta.$ssr.isRuntimeSsrPreHydration) {\n      this._styleInstance = createTypeStyle();\n      this.ctx.meta.$ssr.onHydrated(() => {\n        this._styleInstance.setStylesTarget(document.getElementById('styles-target')!);\n      });\n    }\n  }\n\n  async appInitialized() {\n    // theme\n    this._beanTheme = await this.bean._getBean(BeanTheme, true);\n    // css default\n    const scope: ScopeModule = await this.bean.getScope(__ThisModule__);\n    this._beanCssDefault = await this.bean._getBean(beanFullNameFromOnionName(scope.config.defaultCss, 'css'), true);\n  }\n\n  async beanInit(bean: BeanContainer, beanInstance: BeanBase) {\n    const self = this;\n    bean.defineProperty(beanInstance, '$style', {\n      enumerable: false,\n      configurable: true,\n      get() {\n        return function (props, ...args) {\n          return self._patchStyle(beanInstance, props, ...args);\n        };\n      },\n    });\n    bean.defineProperty(beanInstance, '$cssRule', {\n      enumerable: false,\n      configurable: true,\n      get() {\n        return function (selector: string, ...objects: NestedCSSProperties[]) {\n          return self._patchCssRule(beanInstance, selector, ...objects);\n        };\n      },\n    });\n    bean.defineProperty(beanInstance, '$cssRaw', {\n      enumerable: false,\n      configurable: true,\n      get() {\n        return function (mustBeValidCSS: string) {\n          return self._patchCssRaw(beanInstance, mustBeValidCSS);\n        };\n      },\n    });\n    bean.defineProperty(beanInstance, '$css', {\n      enumerable: false,\n      configurable: true,\n      get() {\n        return self._beanCssDefault;\n      },\n    });\n    bean.defineProperty(beanInstance, '$theme', {\n      enumerable: false,\n      configurable: true,\n      get() {\n        return self._beanTheme;\n      },\n    });\n    bean.defineProperty(beanInstance, '$token', {\n      enumerable: false,\n      configurable: true,\n      get() {\n        return useComputed(() => self._beanTheme.token);\n      },\n    });\n  }\n\n  _patchStyle(beanInstance: BeanBase, props, ...args) {\n    if (process.env.DEV) {\n      if (props && typeof props === 'object') {\n        props = Object.assign({ $debugName: beanInstance[SymbolBeanFullName].replaceAll('.', '_') }, props);\n      }\n    }\n    if (this._styleInstance) {\n      return this._styleInstance.style(props, ...args);\n    } else {\n      return style(props, ...args);\n    }\n  }\n\n  _patchCssRule(_beanInstance: BeanBase, selector: string, ...objects: NestedCSSProperties[]) {\n    if (this._styleInstance) {\n      return this._styleInstance.cssRule(selector, ...objects);\n    } else {\n      return cssRule(selector, ...objects);\n    }\n  }\n\n  _patchCssRaw(_beanInstance: BeanBase, mustBeValidCSS: string) {\n    if (this._styleInstance) {\n      return this._styleInstance.cssRaw(mustBeValidCSS);\n    } else {\n      return cssRaw(mustBeValidCSS);\n    }\n  }\n}\n","// eslint-disable\n/** bean: begin */\nexport * from '../bean/bean.theme.js';\n\nimport 'zova';\ndeclare module 'zova' {\n  \n  \n}\ndeclare module 'zova-module-a-style' {\n  \n        export interface BeanTheme {\n          /** @internal */\n          get scope(): ScopeModuleAStyle;\n        }\n\n        export interface BeanTheme {\n          get $beanFullName(): 'a-style.bean.theme';\n          get $onionName(): 'a-style:theme';\n          \n        } \n}\n/** bean: end */\n/** bean: begin */\nimport { BeanTheme } from '../bean/bean.theme.js';\nimport 'zova';\ndeclare module 'zova' {\n  export interface IBeanRecordGeneral {\n    'a-style.bean.theme': BeanTheme;\n  }\n}\n/** bean: end */\n/** config: begin */\nexport * from '../config/config.js';\nimport { config } from '../config/config.js';\n/** config: end */\n/** monkey: begin */\nexport * from '../monkey.js';\n/** monkey: end */\n/** scope: begin */\nimport { BeanScopeBase, type BeanScopeUtil, TypeModuleConfig } from 'zova';\nimport { Scope } from 'zova-module-a-bean';\n\n@Scope()\nexport class ScopeModuleAStyle extends BeanScopeBase {}\n\nexport interface ScopeModuleAStyle {\n  util: BeanScopeUtil;\nconfig: TypeModuleConfig<typeof config>;\n}\n\nimport 'zova';\ndeclare module 'zova' {\n  export interface IBeanScopeRecord {\n    'a-style': ScopeModuleAStyle;\n  }\n  \n  export interface IBeanScopeConfig {\n    'a-style': ReturnType<typeof config>;\n  }\n\n  \n\n  \n}\n  \n/** scope: end */\n","import { createBeanDecorator } from 'zova';\n\nimport type { IDecoratorCssOptions } from '../types/css.js';\nimport type { IDecoratorThemeOptions } from '../types/theme.js';\n\nexport function Css<T extends IDecoratorCssOptions>(options?: T): ClassDecorator {\n  return createBeanDecorator('css', 'app', true, options);\n}\n\nexport function Theme<T extends IDecoratorThemeOptions>(options?: T): ClassDecorator {\n  return createBeanDecorator('theme', 'app', true, options);\n}\n","import type { IThemeRecord } from '../types/theme.js';\n\nexport function $getThemeName<K extends keyof IThemeRecord>(themeName: K): K {\n  return themeName;\n}\n","import { BeanBase, deepExtend } from 'zova';\n\nimport type { IDecoratorThemeOptions, IThemeApplyParams, ThemeToken } from '../types/theme.js';\n\nexport class BeanThemeBase extends BeanBase {\n  protected getOptionsToken(params: IThemeApplyParams) {\n    const options = this.$onionOptions as IDecoratorThemeOptions;\n    return options.token?.(params);\n  }\n\n  protected mergeOptionsToken(params: IThemeApplyParams, token: ThemeToken) {\n    const optionsToken = this.getOptionsToken(params);\n    if (optionsToken) {\n      token = deepExtend(token, optionsToken);\n    }\n    return token;\n  }\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,43 @@
 {
   "name": "zova-module-a-style",
-  "version": "5.0.44",
+  "version": "5.1.0",
+  "gitHead": "bf1ceb4582381c74ba41ccf11b89d3b9e7b73628",
+  "description": "style",
+  "keywords": [
+    "Zova Module"
+  ],
+  "license": "MIT",
+  "author": "zhennann",
+  "files": [
+    "cli",
+    "dist",
+    "src",
+    "icons",
+    "assets",
+    "rest"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": [
+        "./src/index.ts",
+        "./dist/index.d.ts"
+      ],
+      "default": "./dist/index.js"
+    },
+    "./*": "./*"
+  },
+  "scripts": {
+    "clean": "rimraf dist tsconfig.build.tsbuildinfo",
+    "tsc:publish": "npm run clean && zova :bin:buildModule --sourcemap",
+    "prepublishOnly": "npm run tsc:publish",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore && npm run clean"
+  },
+  "dependencies": {
+    "csx": "^10.0.2",
+    "typestyle": "^2.4.0"
+  },
   "title": "a-style",
   "zovaModule": {
     "capabilities": {
@@ -13,53 +50,33 @@
       "csx": true,
       "typestyle": true
     },
+    "onions": {
+      "css": {
+        "optionsGlobalInterfaceName": "IDecoratorCssOptions",
+        "optionsGlobalInterfaceFrom": "zova-module-a-style",
+        "boilerplate": "css/boilerplate"
+      },
+      "theme": {
+        "optionsGlobalInterfaceName": "IDecoratorThemeOptions",
+        "optionsGlobalInterfaceFrom": "zova-module-a-style",
+        "boilerplate": "theme/boilerplate"
+      }
+    },
+    "metas": {
+      "themeHandler": {
+        "boilerplate": "themeHandler/boilerplate"
+      }
+    },
     "bundle": {
       "vendors": [
         {
           "match": [
-            "csx"
-          ],
-          "output": "typestyle"
-        },
-        {
-          "match": [
+            "csx",
             "typestyle"
           ],
           "output": "typestyle"
         }
       ]
     }
-  },
-  "type": "module",
-  "exports": {
-    ".": {
-      "types": [
-        "./src/index.ts",
-        "./dist/index.d.ts"
-      ],
-      "import": "./src/index.ts",
-      "default": "./dist/index.js"
-    },
-    "./*": "./*"
-  },
-  "description": "style",
-  "keywords": [
-    "Zova Module"
-  ],
-  "author": "zhennann",
-  "license": "MIT",
-  "files": [
-    "dist",
-    "src"
-  ],
-  "scripts": {
-    "clean": "tsc -b --clean",
-    "tsc:publish": "npm run clean && tsc -b",
-    "_prepublishOnly": "npm run tsc:publish"
-  },
-  "dependencies": {
-    "csx": "^10.0.2",
-    "typestyle": "^2.4.0"
-  },
-  "gitHead": "2aa8046cc0dcb637f5ea7ef6a8916a94154c4dc5"
+  }
 }

package/src/.metadata/index.ts

@@ -1,13 +1,35 @@
-/** beans: begin */
+// eslint-disable
+/** bean: begin */
 export * from '../bean/bean.theme.js';
+
+import 'zova';
+declare module 'zova' {
+  
+  
+}
+declare module 'zova-module-a-style' {
+  
+        export interface BeanTheme {
+          /** @internal */
+          get scope(): ScopeModuleAStyle;
+        }
+
+        export interface BeanTheme {
+          get $beanFullName(): 'a-style.bean.theme';
+          get $onionName(): 'a-style:theme';
+          
+        } 
+}
+/** bean: end */
+/** bean: begin */
 import { BeanTheme } from '../bean/bean.theme.js';
 import 'zova';
 declare module 'zova' {
-  export interface IBeanRecord {
+  export interface IBeanRecordGeneral {
     'a-style.bean.theme': BeanTheme;
   }
 }
-/** beans: end */
+/** bean: end */
 /** config: begin */
 export * from '../config/config.js';
 import { config } from '../config/config.js';
@@ -16,21 +38,30 @@ import { config } from '../config/config.js';
 export * from '../monkey.js';
 /** monkey: end */
 /** scope: begin */
-import { BeanScopeBase, Scope, TypeModuleResource } from 'zova';
+import { BeanScopeBase, type BeanScopeUtil, TypeModuleConfig } from 'zova';
+import { Scope } from 'zova-module-a-bean';
 
 @Scope()
 export class ScopeModuleAStyle extends BeanScopeBase {}
 
-export interface ScopeModuleAStyle extends TypeModuleResource<typeof config, any, any, any, any> {}
+export interface ScopeModuleAStyle {
+  util: BeanScopeUtil;
+config: TypeModuleConfig<typeof config>;
+}
 
 import 'zova';
 declare module 'zova' {
   export interface IBeanScopeRecord {
     'a-style': ScopeModuleAStyle;
   }
-
+  
   export interface IBeanScopeConfig {
     'a-style': ReturnType<typeof config>;
   }
+
+  
+
+  
 }
+  
 /** scope: end */

package/src/bean/bean.theme.ts

@@ -1,14 +1,15 @@
-import { Bean, Cast, IBeanRecord } from 'zova';
-import { ScopeModule } from '../.metadata/this.js';
-import { ThemeBase, ThemeHandler } from '../types.js';
+import { beanFullNameFromOnionName, cast, UseScope } from 'zova';
+import { Bean } from 'zova-module-a-bean';
 import { BeanModelBase } from 'zova-module-a-model';
-import { watch } from 'vue';
+import { ScopeModuleASsr } from 'zova-module-a-ssr';
+
+import type { IThemeBase, IThemeHandler, IThemeRecord } from '../types/index.js';
 
 export type ThemeDarkMode = 'auto' | boolean;
 
-@Bean({ containerScope: 'app' })
-export class BeanTheme extends BeanModelBase<ScopeModule> {
-  name: keyof IBeanRecord;
+@Bean()
+export class BeanTheme extends BeanModelBase {
+  name: keyof IThemeRecord;
   darkMode: ThemeDarkMode; // auto/true/false
 
   private _dark: boolean;
@@ -20,11 +21,14 @@ export class BeanTheme extends BeanModelBase<ScopeModule> {
   private _mediaDark?: MediaQueryList;
   private _onMediaDarkChange?;
 
+  @UseScope()
+  $$scopeSsr: ScopeModuleASsr;
+
   protected async __init__() {
+    const cookieTheme = this.$$scopeSsr.config.cookieTheme;
+    const cookieThemeDarkDefault = this.$$scopeSsr.config.cookieThemeDarkDefault;
     // support admin
-    const cookieThemeName = this.app.config.ssr.cookieThemeName;
-    const useQueryMethodThemeName = cookieThemeName ? '$useQueryCookie' : '$useQueryLocal';
-    this.name = this[useQueryMethodThemeName]({
+    this.name = this.$useState(cookieTheme ? 'cookie' : 'local', {
       queryKey: ['themename'],
       meta: {
         persister: {
@@ -33,25 +37,22 @@ export class BeanTheme extends BeanModelBase<ScopeModule> {
         defaultData: this.scope.config.defaultTheme,
       },
     });
-    const cookieThemeDark = this.app.config.ssr.cookieThemeDark;
-    const cookieThemeDarkDefault = this.app.config.ssr.cookieThemeDarkDefault;
-    const useQueryMethodThemeDark = cookieThemeDark ? '$useQueryCookie' : '$useQueryLocal';
-    this.darkMode = this[useQueryMethodThemeDark]({
+    this.darkMode = this.$useState(cookieTheme ? 'cookie' : 'local', {
       queryKey: ['themedark'],
       meta: {
         persister: {
           maxAge: this.scope.config.model.themename.persister.maxAge,
           deserialize: (value, deserializeDefault) => {
-            if (cookieThemeDark && value === 'auto') value = cookieThemeDarkDefault;
+            if (cookieTheme && value === 'auto') value = cookieThemeDarkDefault;
             return deserializeDefault(value);
           },
         },
-        defaultData: cookieThemeDark ? cookieThemeDarkDefault : 'auto',
+        defaultData: cookieTheme ? cookieThemeDarkDefault : 'auto',
       },
     });
     this._updateDark();
 
-    watch(
+    this.$watch(
       () => this.darkMode,
       () => {
         this._updateDark();
@@ -59,7 +60,7 @@ export class BeanTheme extends BeanModelBase<ScopeModule> {
     );
 
     if (process.env.CLIENT) {
-      watch([() => this.name, () => this._dark], () => {
+      this.$watch([() => this.name, () => this._dark], () => {
         this._applyTheme();
       });
     }
@@ -78,7 +79,7 @@ export class BeanTheme extends BeanModelBase<ScopeModule> {
 
   async _applyThemeWrapper() {
     await this._applyTheme();
-    if (process.env.SERVER && !this.app.config.ssr.cookieThemeDark) {
+    if (process.env.SERVER && !this.$$scopeSsr.config.cookieTheme) {
       this.toggleDark();
       await this._applyTheme();
     }
@@ -94,18 +95,22 @@ export class BeanTheme extends BeanModelBase<ScopeModule> {
       return;
     }
     const res = await theme.apply({ name, dark });
-    this.token = Cast(res).token;
+    this.token = cast(res).token;
     const handler = res.handler ?? this.scope.config.defaultThemeHandler;
     if (handler) {
-      const themeHandler = (await this.bean._getBean(handler, true)) as unknown as ThemeHandler;
+      const themeHandler = (await this.bean._getBean(beanFullNameFromOnionName(handler, 'meta'), true)) as unknown as IThemeHandler;
       await themeHandler.apply({ name, dark, token: this.token } as any);
     }
   }
 
-  async _loadThemeBean(name: string): Promise<ThemeBase | undefined> {
-    const moduleName = name.split('.')[0];
+  async _loadThemeBean(name: keyof IThemeRecord): Promise<IThemeBase | undefined> {
+    const parts = name.split(':');
+    if (parts.length === 1) {
+      throw new Error(`invalid theme name: ${name}`);
+    }
+    const moduleName = parts[0];
     if (!this.app.meta.module.exists(moduleName)) return;
-    return await this.bean._getBean(name as any, true);
+    return (await this.bean._getBean(beanFullNameFromOnionName(name, 'theme'), true)) as IThemeBase;
   }
 
   toggleDark() {

package/src/config/config.ts

@@ -1,10 +1,14 @@
-import { IBeanRecord, ZovaApplication } from 'zova';
+import type { ZovaSys } from 'zova';
+import type { TypeMetaRecordSelectorSpecificNameKeys } from 'zova-module-a-meta';
 
-export const config = (_app: ZovaApplication) => {
+import type { ICssRecord } from '../types/css.js';
+import type { IThemeRecord } from '../types/theme.js';
+
+export const config = (_sys: ZovaSys) => {
   return {
-    defaultStyle: 'home-base.style.default' as keyof IBeanRecord,
-    defaultTheme: 'home-base.theme.default' as keyof IBeanRecord,
-    defaultThemeHandler: '' as keyof IBeanRecord,
+    defaultCss: 'home-base:default' as keyof ICssRecord,
+    defaultTheme: 'home-base:default' as keyof IThemeRecord,
+    defaultThemeHandler: '' as TypeMetaRecordSelectorSpecificNameKeys<'themeHandler'>,
     model: {
       themename: {
         persister: {

package/src/index.ts

@@ -1,2 +1,3 @@
 export * from './.metadata/index.js';
-export * from './types.js';
+export * from './lib/index.js';
+export * from './types/index.js';

package/src/lib/index.ts

@@ -0,0 +1,3 @@
+export * from './style.js';
+export * from './theme.js';
+export * from './themeBase.js';

package/src/lib/style.ts

@@ -0,0 +1,12 @@
+import { createBeanDecorator } from 'zova';
+
+import type { IDecoratorCssOptions } from '../types/css.js';
+import type { IDecoratorThemeOptions } from '../types/theme.js';
+
+export function Css<T extends IDecoratorCssOptions>(options?: T): ClassDecorator {
+  return createBeanDecorator('css', 'app', true, options);
+}
+
+export function Theme<T extends IDecoratorThemeOptions>(options?: T): ClassDecorator {
+  return createBeanDecorator('theme', 'app', true, options);
+}

package/src/lib/theme.ts

@@ -0,0 +1,5 @@
+import type { IThemeRecord } from '../types/theme.js';
+
+export function $getThemeName<K extends keyof IThemeRecord>(themeName: K): K {
+  return themeName;
+}

package/src/lib/themeBase.ts

@@ -0,0 +1,18 @@
+import { BeanBase, deepExtend } from 'zova';
+
+import type { IDecoratorThemeOptions, IThemeApplyParams, ThemeToken } from '../types/theme.js';
+
+export class BeanThemeBase extends BeanBase {
+  protected getOptionsToken(params: IThemeApplyParams) {
+    const options = this.$onionOptions as IDecoratorThemeOptions;
+    return options.token?.(params);
+  }
+
+  protected mergeOptionsToken(params: IThemeApplyParams, token: ThemeToken) {
+    const optionsToken = this.getOptionsToken(params);
+    if (optionsToken) {
+      token = deepExtend(token, optionsToken);
+    }
+    return token;
+  }
+}

package/src/monkey.ts

@@ -1,44 +1,45 @@
-import { style, createTypeStyle, TypeStyle } from 'typestyle';
-import {
-  BeanBase,
-  BeanContainer,
-  BeanSimple,
-  IMonkeyAppInitialize,
-  IMonkeyAppInitialized,
-  IMonkeyBeanInit,
-  SymbolModuleName,
-  useComputed,
-} from 'zova';
-import { ScopeModule, __ThisModule__ } from './.metadata/this.js';
+import type { TypeStyle } from 'typestyle';
+import type { NestedCSSProperties } from 'typestyle/lib/types.js';
+import type { BeanBase, BeanContainer, IMonkeyAppInitialize, IMonkeyAppInitialized, IMonkeyBeanInit } from 'zova';
+
+import { createTypeStyle, cssRaw, cssRule, style } from 'typestyle';
+import { beanFullNameFromOnionName, BeanSimple, SymbolBeanFullName, useComputed } from 'zova';
+
+import type { ScopeModule } from './.metadata/this.js';
+
+import { __ThisModule__ } from './.metadata/this.js';
 import { BeanTheme } from './bean/bean.theme.js';
 
 export class Monkey extends BeanSimple implements IMonkeyAppInitialize, IMonkeyAppInitialized, IMonkeyBeanInit {
   private _beanTheme: BeanTheme;
-  private _beanStyleDefault: any;
+  private _beanCssDefault: any;
   private _styleInstance: TypeStyle;
 
   async appInitialize() {
     if (process.env.SERVER) {
       this._styleInstance = createTypeStyle();
-      this.ctx.meta.ssr.context.onRendered(() => {
+      this.ctx.meta.$ssr.context.onRendered((err?: Error) => {
+        if (err) return;
         const styles = this._styleInstance.getStyles();
-        this.ctx.meta.ssr.context._meta.endingHeadTags += `<style id="styles-target">${styles}</style>`;
+        this.ctx.meta.$ssr.context._meta.endingHeadTags += `<style id="styles-target">${styles}</style>`;
       });
     }
-    if (process.env.CLIENT && this.ctx.meta.ssr.isRuntimeSsrPreHydration) {
+    if (process.env.CLIENT && this.ctx.meta.$ssr.isRuntimeSsrPreHydration) {
       this._styleInstance = createTypeStyle();
-      this.ctx.meta.ssr.onHydrated(() => {
+      this.ctx.meta.$ssr.onHydrated(() => {
         this._styleInstance.setStylesTarget(document.getElementById('styles-target')!);
       });
     }
   }
+
   async appInitialized() {
     // theme
     this._beanTheme = await this.bean._getBean(BeanTheme, true);
-    // style default
+    // css default
     const scope: ScopeModule = await this.bean.getScope(__ThisModule__);
-    this._beanStyleDefault = await this.bean._getBean(scope.config.defaultStyle, true);
+    this._beanCssDefault = await this.bean._getBean(beanFullNameFromOnionName(scope.config.defaultCss, 'css'), true);
   }
+
   async beanInit(bean: BeanContainer, beanInstance: BeanBase) {
     const self = this;
     bean.defineProperty(beanInstance, '$style', {
@@ -50,11 +51,29 @@ export class Monkey extends BeanSimple implements IMonkeyAppInitialize, IMonkeyA
         };
       },
     });
-    bean.defineProperty(beanInstance, '$class', {
+    bean.defineProperty(beanInstance, '$cssRule', {
+      enumerable: false,
+      configurable: true,
+      get() {
+        return function (selector: string, ...objects: NestedCSSProperties[]) {
+          return self._patchCssRule(beanInstance, selector, ...objects);
+        };
+      },
+    });
+    bean.defineProperty(beanInstance, '$cssRaw', {
       enumerable: false,
       configurable: true,
       get() {
-        return self._beanStyleDefault;
+        return function (mustBeValidCSS: string) {
+          return self._patchCssRaw(beanInstance, mustBeValidCSS);
+        };
+      },
+    });
+    bean.defineProperty(beanInstance, '$css', {
+      enumerable: false,
+      configurable: true,
+      get() {
+        return self._beanCssDefault;
       },
     });
     bean.defineProperty(beanInstance, '$theme', {
@@ -76,7 +95,7 @@ export class Monkey extends BeanSimple implements IMonkeyAppInitialize, IMonkeyA
   _patchStyle(beanInstance: BeanBase, props, ...args) {
     if (process.env.DEV) {
       if (props && typeof props === 'object') {
-        props = Object.assign({ $debugName: beanInstance[SymbolModuleName] }, props);
+        props = Object.assign({ $debugName: beanInstance[SymbolBeanFullName].replaceAll('.', '_') }, props);
       }
     }
     if (this._styleInstance) {
@@ -85,4 +104,20 @@ export class Monkey extends BeanSimple implements IMonkeyAppInitialize, IMonkeyA
       return style(props, ...args);
     }
   }
+
+  _patchCssRule(_beanInstance: BeanBase, selector: string, ...objects: NestedCSSProperties[]) {
+    if (this._styleInstance) {
+      return this._styleInstance.cssRule(selector, ...objects);
+    } else {
+      return cssRule(selector, ...objects);
+    }
+  }
+
+  _patchCssRaw(_beanInstance: BeanBase, mustBeValidCSS: string) {
+    if (this._styleInstance) {
+      return this._styleInstance.cssRaw(mustBeValidCSS);
+    } else {
+      return cssRaw(mustBeValidCSS);
+    }
+  }
 }

package/src/types/css.ts

@@ -0,0 +1,22 @@
+import type { OmitNever } from 'zova';
+import type { ServiceOnion } from 'zova-module-a-bean';
+
+export interface ICssRecord {}
+
+export interface IDecoratorCssOptions {}
+
+declare module 'zova-module-a-bean' {
+  export interface SysOnion {
+    css: ServiceOnion<IDecoratorCssOptions, keyof ICssRecord>;
+  }
+}
+
+declare module 'zova' {
+  export interface ConfigOnions {
+    css: OmitNever<ICssRecord>;
+  }
+
+  export interface IBeanSceneRecord {
+    css: never;
+  }
+}

package/src/types/index.ts

@@ -0,0 +1,3 @@
+export * from './css.js';
+export * from './style.js';
+export * from './theme.js';

package/src/types/style.ts

@@ -0,0 +1,13 @@
+import type { cssRaw, cssRule, style } from 'typestyle';
+
+import type { BeanTheme } from '../bean/bean.theme.js';
+import 'zova';
+
+declare module 'zova' {
+  export interface BeanBase {
+    $style: typeof style;
+    $cssRule: typeof cssRule;
+    $cssRaw: typeof cssRaw;
+    $theme: BeanTheme;
+  }
+}

package/src/types/theme.ts

@@ -0,0 +1,55 @@
+import type { OmitNever, PowerPartial } from 'zova';
+import type { ServiceOnion } from 'zova-module-a-bean';
+import type { IMetaRecord } from 'zova-module-a-meta';
+
+export interface IThemeRecord {}
+
+export interface IDecoratorThemeOptions {
+  token?: (params: IThemeApplyParams) => PowerPartial<ThemeToken>;
+}
+
+declare module 'zova-module-a-bean' {
+  export interface SysOnion {
+    theme: ServiceOnion<IDecoratorThemeOptions, keyof IThemeRecord>;
+  }
+}
+
+declare module 'zova' {
+  export interface ConfigOnions {
+    theme: OmitNever<IThemeRecord>;
+  }
+
+  export interface IBeanSceneRecord {
+    theme: never;
+  }
+
+  export interface BeanBase {
+    $token: ThemeToken;
+  }
+}
+
+export interface ThemeToken {}
+
+export interface IThemeApplyParams {
+  name: string;
+  dark: boolean;
+}
+
+export interface IThemeApplyResult {
+  token: ThemeToken;
+  handler?: keyof IMetaRecord;
+}
+
+export interface IThemeBase {
+  apply(params: IThemeApplyParams): Promise<IThemeApplyResult>;
+}
+
+export interface IThemeHandler {
+  apply(result: IThemeHandlerApplyParams): Promise<void>;
+}
+
+export interface IThemeHandlerApplyParams {
+  name: string;
+  dark: boolean;
+  token: ThemeToken;
+}

package/src/.metadata/modules.d.ts

@@ -1,15 +0,0 @@
-import 'zova-module-a-test';
-import 'zova-module-demo-basic';
-import 'zova-module-demo-todo';
-import 'zova-module-a-model';
-import 'zova-module-a-router';
-import 'zova-module-a-style';
-import 'zova-module-a-core';
-import 'zova-module-home-base';
-import 'zova-module-home-icon';
-import 'zova-module-home-index';
-import 'zova-module-home-layout';
-import 'zova-module-home-user';
-import 'zova-module-a-pinia';
-import 'zova-module-a-tabs';
-import 'zova-module-devui-adapter';

package/src/types.ts

@@ -1,32 +0,0 @@
-import { style } from 'typestyle';
-import 'zova';
-import { BeanTheme } from './bean/bean.theme.js';
-import { IBeanRecord } from 'zova';
-declare module 'zova' {
-  export interface BeanBase {
-    $style: typeof style;
-    $theme: BeanTheme;
-  }
-}
-
-export interface ThemeApplyParams {
-  name: string;
-  dark: boolean;
-}
-
-export interface ThemeApplyResult {
-  handler?: keyof IBeanRecord;
-}
-
-export interface ThemeBase {
-  apply({ name, dark }: ThemeApplyParams): Promise<ThemeApplyResult>;
-}
-
-export interface ThemeHandler {
-  apply(result: ThemeHandlerApplyParams): Promise<void>;
-}
-
-export interface ThemeHandlerApplyParams {
-  name: string;
-  dark: boolean;
-}