@ui0/theme 0.0.0-stage → 0.1.0

package/dist/index.mjs

@@ -0,0 +1,909 @@
+import { S as schemesOf, _ as parseRef, a as deepMerge, b as backdrop_module_css_default, c as contractGenerators, d as round_module_css_default, f as elevation_module_css_default, g as parseColorProp, h as color_module_css_default, i as withDefaults, l as typography_module_css_default, m as disabled_module_css_default, n as generateThemeCss, o as resolvePreset, p as display_module_css_default, r as generateThemeTypes, s as hashClassName, t as generateThemeArtifacts, u as size_module_css_default, v as buildPool, x as ensureThemeBaseStyle, y as resolvePool } from "./generate-BPYE5ALG.mjs";
+import config from "./config.default.mjs";
+import { RecordContainer, arrayPickNext, arrayPickPrev, getClientHeight, getClientWidth, isArray, isBrowser, isString, mergeCssModulesStyles, newFrameworkError, objectMerge, parseUnits, propsToCssModuleClassNext, toCamelCase } from "@ui0/util";
+import { AT_SIGN } from "@ui0/shared";
+import { getCurrentInstance, hasInjectionContext, inject, isReactive, onMounted, onUnmounted, provide, reactive, ref, toRefs, useCssModule, watch } from "vue";
+import { ThemeProvider } from "./components/index.js";
+// src/constants.ts
+const THEME_SCHEMES = [
+	"dark",
+	"light",
+	"default"
+];
+const EMPTY_OBJ = Object.freeze({});
+// src/contracts/backdrop/backdrop.contract.ts
+function backdropClasses(p, s) {
+	const $ = mergeCssModulesStyles(backdrop_module_css_default, s);
+	console.log("$", $);
+	if (p.backdrop) return [$["backdrop"]];
+	return [];
+}
+function backdropDeal(instance) {
+	const props = instance.props;
+	return {
+		classes: () => instance.inject(backdropClasses(props, instance.$styles)),
+		styles() {
+			const out = {};
+			const val = props.backdrop;
+			if (val) {
+				if (isArray(val)) {} else if (isString(val)) {
+					const split = val.split(AT_SIGN);
+					if (split[1]) {
+						out["--0-backdrop-" + split[0]] = split[1];
+						out["--0-backdrop"] = `${split[0]}(var(--0-backdrop-${split[0]}))`;
+					} else out["--0-backdrop"] = `${props.backdrop}(var(--0-backdrop-${props.backdrop}))`;
+				}
+			}
+			return instance.inject(out);
+		}
+	};
+}
+// src/contracts/backdrop/backdrop.keys.ts
+const BackdropRefKey = Symbol("BackdropRefKey");
+const BackdropContractKey = Symbol("BackdropContractKey");
+// src/contracts/backdrop/index.ts
+const BackdropPropsKeys = ["backdrop"];
+const backdrop = {
+	name: "backdrop",
+	key: BackdropContractKey,
+	ref: BackdropRefKey,
+	deal: backdropDeal,
+	flag: 3,
+	props: BackdropPropsKeys
+};
+// src/contracts/color/color.gradient.ts
+const DIRECTIONS = {
+	right: "to right",
+	left: "to left",
+	top: "to top",
+	bottom: "to bottom",
+	tr: "to top right",
+	tl: "to top left",
+	br: "to bottom right",
+	bl: "to bottom left"
+};
+/** compile a gradient prop value into a `linear-gradient(...)` string */
+function gradientStyle(value) {
+	if (!isString(value) || !value.trim()) return void 0;
+	const parts = value.trim().split(/\s+/);
+	let direction = DIRECTIONS.bottom;
+	if (parts[0]?.startsWith("to-")) {
+		const css = DIRECTIONS[parts[0].slice(3)];
+		if (!css) throw new Error(`ui0 gradient: unknown direction "${parts[0]}" (expected to-right|to-left|to-top|to-bottom|to-tr|to-tl|to-br|to-bl)`);
+		direction = css;
+		parts.shift();
+	}
+	const stops = parts.join("").split("->").map((s) => parseRef(s)).filter((s) => s.ref);
+	if (stops.length < 2) throw new Error(`ui0 gradient: "${value}" needs at least two stops (ref[->ref...])`);
+	const paint = stops.map((s) => `rgb(var(--0-c-${s.ref}-v) / ${s.opacity ?? 1})`).join(", ");
+	return `linear-gradient(${direction}, ${paint})`;
+}
+// src/contracts/color/color.serialize.ts
+function resolveClass(full, $) {
+	return $ && $[full] || hashClassName(full);
+}
+function serializeTokens(tokens, slot, $) {
+	const classes = [];
+	const styles = {};
+	const ns = slot === "c" ? "--0-c" : "--0-f";
+	for (const t of tokens) {
+		const pre = `${t.scheme ? t.scheme + "-" : ""}${t.pseudo ? t.pseudo + "-" : ""}${slot}`;
+		classes.push(resolveClass(`${pre}-${t.ref}`, $));
+		if (t.opacity !== void 0 && t.opacity < 1) {
+			const ctx = `${t.scheme === "light" ? "-l" : t.scheme === "dark" ? "-d" : ""}${t.pseudo ? `-${t.pseudo}` : ""}`;
+			styles[`${ns}-src${ctx}`] = `${t.opacity}`;
+		}
+	}
+	return {
+		classes,
+		styles
+	};
+}
+// src/contracts/color/color.contract.ts
+function colorDeal(instance) {
+	const props = instance.props;
+	let cache;
+	const norm = (v) => isString(v) ? v : Array.isArray(v) ? v.join(" ") : "";
+	const ensure = () => {
+		const key = [
+			norm(props.color),
+			norm(props.fill),
+			norm(props.gradient),
+			norm(instance.context?.color?.value),
+			norm(instance.context?.fill?.value)
+		].join("|");
+		if (cache && cache.key === key) return cache.value;
+		const value = paint(resolveProps());
+		cache = {
+			key,
+			value
+		};
+		return value;
+	};
+	const resolveProps = () => {
+		const out = {};
+		const color = props.color;
+		const fill = props.fill;
+		if (isString(color) && color.split(" ")[0] === "inherit") {
+			const v = instance.context?.color?.value;
+			if (v) out["color"] = v;
+		} else if (color) out["color"] = color;
+		if (isString(fill) && fill.split(" ")[0] === "inherit") {
+			const v = instance.context?.fill?.value;
+			if (v) out["fill"] = v;
+		} else if (fill) out["fill"] = fill;
+		if (props.gradient) out["gradient"] = props.gradient;
+		return out;
+	};
+	const paint = (p) => {
+		const classes = [];
+		const styles = {};
+		const $ = mergeCssModulesStyles(color_module_css_default, instance.$styles);
+		if (p.color) {
+			const out = serializeTokens(parseColorProp(p.color), "c", $);
+			classes.push(...out.classes);
+			Object.assign(styles, out.styles);
+			classes.push($.colored);
+		}
+		if (p.fill) {
+			const out = serializeTokens(parseColorProp(p.fill), "f", $);
+			classes.push(...out.classes);
+			Object.assign(styles, out.styles);
+			classes.push($.filled);
+		}
+		if (p.gradient) {
+			const g = gradientStyle(p.gradient);
+			if (g) {
+				styles["--0-g-cur"] = g;
+				classes.push($.gradiented);
+			}
+		}
+		return {
+			classes,
+			styles
+		};
+	};
+	return {
+		classes: () => props.color || props.fill || props.gradient ? instance.inject(ensure().classes) : instance.inject([]),
+		styles: () => instance.inject(ensure().styles)
+	};
+}
+// src/contracts/color/color.keys.ts
+const ColorContractKey = Symbol("ColorContractKey");
+const ColorRefKey = Symbol("ColorRefKey");
+// src/contracts/color/index.ts
+const ColorPropsKeys = [
+	"color",
+	"fill",
+	"gradient"
+];
+const color = {
+	name: "color",
+	key: ColorContractKey,
+	flag: 3,
+	ref: ColorRefKey,
+	deal: colorDeal,
+	props: ColorPropsKeys
+};
+// src/contracts/disabled/disabled.contract.ts
+function disabledClasses(p, s) {
+	const $ = mergeCssModulesStyles(disabled_module_css_default, s);
+	if (p.disabled) return [$.disabled];
+	return [];
+}
+function disabledDeal(instance) {
+	const props = instance.props;
+	return {
+		classes: () => {
+			if (instance.context) {
+				if (props.disabled === "inherit" && instance.context.disabled) return instance.inject(disabledClasses({ disabled: instance.context.disabled.value }, instance.$styles));
+			}
+			return instance.inject(disabledClasses(props, instance.$styles));
+		},
+		styles: () => instance.inject(EMPTY_OBJ)
+	};
+}
+// src/contracts/disabled/disabled.keys.ts
+const DisabledRefKey = Symbol("DisabledRefKey");
+const DisabledContractKey = Symbol("DisabledContractKey");
+// src/contracts/disabled/index.ts
+const DisabledPropsKeys = ["disabled"];
+const disabled = {
+	key: DisabledContractKey,
+	name: "disabled",
+	ref: DisabledRefKey,
+	flag: 3,
+	deal: disabledDeal,
+	props: DisabledPropsKeys
+};
+// src/contracts/display/display.contract.ts
+function displayClasses(props, styles) {
+	const $ = mergeCssModulesStyles(display_module_css_default, styles);
+	const out = [];
+	if (props.display && $.displayed) out.push($.displayed);
+	return out;
+}
+function displayDeal(instance) {
+	const props = instance.props;
+	return {
+		classes: () => {
+			if (!props.display) return instance.inject([]);
+			if (props.display === "inherit") {
+				const ctx = instance.context;
+				if (ctx?.display) return instance.inject(displayClasses({ display: ctx.display.value }, instance.$styles));
+			}
+			return instance.inject(displayClasses(props, instance.$styles));
+		},
+		styles: () => instance.inject(EMPTY_OBJ)
+	};
+}
+// src/contracts/display/display.keys.ts
+/** context key the deal resolves `inherit` against (see useThemeContract) */
+const DisplayRefKey = Symbol("DisplayRefKey");
+const DisplayContractKey = Symbol("DisplayContractKey");
+const DisplayKey = Symbol("DisplayContractKey");
+const display = {
+	key: DisplayContractKey,
+	name: "display",
+	ref: DisplayRefKey,
+	deal: displayDeal,
+	flag: 1,
+	props: []
+};
+// src/contracts/elevation/elevation.contract.ts
+function elevationClasses(p, s) {
+	const { elevation } = p;
+	if (elevation === void 0) return [];
+	const $ = mergeCssModulesStyles(elevation_module_css_default, s);
+	const value = Number(elevation);
+	return Number.isNaN(value) ? [] : [$["elv" + Math.abs(value) + (value < 0 ? "n" : "")], $.elv];
+}
+function elevationDeal(instance) {
+	const props = instance.props;
+	return {
+		classes: () => {
+			if (instance.context) {
+				if (props.elevation === "inherit" && instance.context.elevation) return instance.inject(elevationClasses({ elevation: instance.context.elevation.value }, instance.$styles));
+			}
+			return instance.inject(elevationClasses(props, instance.$styles));
+		},
+		styles: () => instance.inject(EMPTY_OBJ)
+	};
+}
+// src/contracts/elevation/elevation.keys.ts
+const ElevationRefKey = Symbol("ElevationRefKey");
+const ElevationContractKey = Symbol("ElevationContractKey");
+// src/contracts/elevation/index.ts
+const ElevationPropsKeys = ["elevation"];
+const elevation = {
+	key: ElevationContractKey,
+	name: "elevation",
+	ref: ElevationRefKey,
+	deal: elevationDeal,
+	flag: 3,
+	props: ElevationPropsKeys
+};
+// src/contracts/round/round.contract.ts
+function roundDeal(instance) {
+	return {
+		classes() {
+			const { props, $styles } = instance;
+			const $ = mergeCssModulesStyles(round_module_css_default, $styles);
+			console.log("props", instance.props);
+			console.log("propsToCssModuleClassNext(props, [getRoundPropClasses($), getRoundTargetPropClasses($)], $)", propsToCssModuleClassNext(props, [getRoundPropClasses($), getRoundTargetPropClasses($)], $));
+			return propsToCssModuleClassNext(props, [getRoundPropClasses($), getRoundTargetPropClasses($)], $);
+		},
+		styles: () => instance.inject(EMPTY_OBJ)
+	};
+}
+function getRoundTargetPropClasses(style = round_module_css_default) {
+	return ["roundTarget", {
+		"top-left-none": style.tln,
+		"bottom-left-none": style.bln,
+		"top-right-none": style.trn,
+		"bottom-right-none": style.brn,
+		"top-none": style.tn,
+		"bottom-none": style.bn,
+		"right-none": style.rn,
+		"left-none": style.ln,
+		"bottom-left": style.bl,
+		"bottom-right": style.br,
+		"top-right": style.tr,
+		"top-left": style.tl
+	}];
+}
+function getRoundPropClasses(style = round_module_css_default) {
+	return ["round", {
+		true: style.rFull,
+		none: style.rNone,
+		full: style.rFull,
+		basic: style.rBasic,
+		smooth: style.rSmooth,
+		hard: style.rHard,
+		round: style.round,
+		left: [style.tl, style.bl],
+		right: [style.tr, style.br],
+		bottom: [style.br, style.bl],
+		top: [style.tl, style.tr]
+	}];
+}
+// src/contracts/round/round.keys.ts
+const RoundRefKey = Symbol("RoundRefKey");
+const RoundContractKey = Symbol("RoundContractKey");
+// src/contracts/round/index.ts
+const RoundPropsKeys = ["round", "round-target"];
+const round = {
+	key: RoundContractKey,
+	name: "round",
+	ref: RoundRefKey,
+	deal: roundDeal,
+	flag: 3,
+	props: RoundPropsKeys
+};
+// src/contracts/size/size.types.ts
+/** the absolute scale steps a `size` prop can pick (long and short spellings) */
+const SizeValuesAbsolute = [
+	"xxxs",
+	"xxs",
+	"xs",
+	"s",
+	"m",
+	"l",
+	"xl",
+	"xxl",
+	"xxxl"
+];
+// src/contracts/size/size.contract.ts
+function sizeClasses(props, styles) {
+	const out = [];
+	const { size, density } = props;
+	const normalizedSizing = isArray(density) ? density : [toCamelCase(density)];
+	const $ = mergeCssModulesStyles(size_module_css_default, styles);
+	if (size) {
+		out.push($.sized);
+		const cls = getSizePropClasses($)[size];
+		if (cls) out.push(cls);
+	}
+	if (normalizedSizing) normalizedSizing.forEach((d) => {
+		if ($ && $[d]) out.push($[d]);
+	});
+	return out;
+}
+function getSizePropClasses(styles) {
+	return {
+		"xxx-large": styles.sizeXxxl,
+		"xx-large": styles.sizeXxl,
+		"x-large": styles.sizeXl,
+		large: styles.sizeL,
+		"x-small": styles.sizeXs,
+		"xx-small": styles.sizeXxs,
+		"xxx-small": styles.sizeXxxs,
+		small: styles.sizeS,
+		medium: styles.sizeM,
+		xxxl: styles.sizeXxxl,
+		xxl: styles.sizeXxl,
+		xl: styles.sizeXl,
+		l: styles.sizeL,
+		xs: styles.sizeXs,
+		xxs: styles.sizeXxs,
+		xxxs: styles.sizeXxxs,
+		s: styles.sizeS,
+		m: styles.sizeM,
+		larger: "",
+		inherit: "",
+		smaller: "",
+		custom: styles.sizeCustom
+	};
+}
+function sizeDeal(instance) {
+	const props = instance.props;
+	return {
+		classes: () => {
+			const { size, density } = props;
+			if (!size && !density) return instance.inject([]);
+			if (instance.context) {
+				const out = {};
+				const ctxSize = instance.context.size;
+				if (ctxSize) {
+					if (size === "inherit") out["size"] = ctxSize.value;
+					if (size === "smaller" || size === "larger") out["size"] = (size === "smaller" ? arrayPickPrev : arrayPickNext)(SizeValuesAbsolute, ctxSize.value);
+				}
+				const ctxDensity = instance.context.density;
+				if (ctxDensity && density === "inherit") out["density"] = ctxDensity.value;
+				if (!("density" in out) && props.density) out["density"] = props.density;
+				if (!("size" in out) && props.size) out["size"] = props.size;
+				return instance.inject(sizeClasses(out, instance.$styles));
+			}
+			return instance.inject(sizeClasses(props, instance.$styles));
+		},
+		styles: () => instance.inject(EMPTY_OBJ)
+	};
+}
+// src/contracts/size/size.keys.ts
+const SizeRefKey = Symbol("SizeRefKey");
+const SizeContractKey = Symbol("SizeContractKey");
+// src/contracts/size/index.ts
+const SizePropsKeys = ["size", "density"];
+const size = {
+	ref: SizeRefKey,
+	name: "size",
+	props: SizePropsKeys,
+	deal: sizeDeal,
+	flag: 3,
+	key: SizeContractKey
+};
+// src/contracts/style/index.ts
+const style = {
+	key: Symbol("StyleContractKey"),
+	name: "style",
+	flag: 1
+};
+// src/contracts/typography/typography.contract.ts
+function typographyClasses(props, styles) {
+	const $ = mergeCssModulesStyles(typography_module_css_default, styles);
+	const out = [];
+	if (props.typography && $[props.typography]) out.push($[props.typography]);
+	return out;
+}
+function typographyDeal(instance) {
+	const props = instance.props;
+	return {
+		classes: () => {
+			if (!props.typography) return instance.inject([]);
+			if (props.typography === "inherit") {
+				const ctx = instance.context;
+				if (ctx?.typography) return instance.inject(typographyClasses({ typography: ctx.typography.value }, instance.$styles));
+			}
+			return instance.inject(typographyClasses(props, instance.$styles));
+		},
+		styles: () => instance.inject(EMPTY_OBJ)
+	};
+}
+// src/contracts/index.ts
+const contracts = {
+	color,
+	backdrop,
+	round,
+	elevation,
+	style,
+	disabled,
+	display,
+	typography: {
+		key: Symbol("TypographyContractKey"),
+		name: "typography",
+		ref: Symbol("TypographyRefKey"),
+		deal: typographyDeal,
+		flag: 3,
+		props: ["typography"]
+	},
+	size
+};
+const props = [
+	ColorPropsKeys,
+	RoundPropsKeys,
+	SizePropsKeys,
+	ElevationPropsKeys,
+	BackdropPropsKeys,
+	DisabledPropsKeys
+].flat();
+// src/contracts/display/display.instance.ts
+var Display = class {
+	breakpoints;
+	_watchers;
+	_watcher;
+	_activated;
+	_listeners;
+	_width;
+	_height;
+	_resizeHandler;
+	constructor(config$1) {
+		this.breakpoints = objectMerge(config.contracts.display?.breakpoints, config$1?.breakpoints ?? {});
+		this._watchers = [];
+		this._watcher = null;
+		this._width = null;
+		this._height = null;
+		this._activated = false;
+		this._resizeHandler = () => this.update();
+		this._listeners = new RecordContainer();
+	}
+	update() {
+		if (this._width && this._height) {
+			this._width.value = getClientWidth();
+			this._height.value = getClientHeight();
+		}
+		let wasChanged = false;
+		this._watchers.forEach((watcher) => {
+			const measure = watcher.measure === "width" ? this._width : this._height;
+			const oldValue = watcher.value.value;
+			if (watcher.operation === "between") {
+				const breakpoint1 = this.getBreakpointValue(String(watcher.points[0]));
+				const breakpoint2 = this.getBreakpointValue(String(watcher.points[1]));
+				if (measure && breakpoint1 && breakpoint2) {
+					const b1 = parseUnits(String(breakpoint1)).value;
+					const b2 = parseUnits(String(breakpoint2)).value;
+					if (b1 > b2) watcher.value.value = measure.value > b2 && measure.value < b1;
+					if (b1 < b2) watcher.value.value = measure.value > b1 && measure.value < b2;
+					if (watcher.value.value !== oldValue) wasChanged = true;
+				}
+			}
+			if (watcher.operation === "less" || watcher.operation === "greater") {
+				const breakpoint1 = this.getBreakpointValue(String(watcher.points[0]));
+				if (breakpoint1 && measure) {
+					const b1 = parseUnits(String(breakpoint1)).value;
+					watcher.value.value = watcher.operation === "less" ? measure.value < b1 : measure.value > b1;
+					if (watcher.value.value !== oldValue) wasChanged = true;
+				}
+			}
+		});
+		if (wasChanged) this._listeners.items.forEach((item) => item());
+	}
+	addUpdateListener(fn) {
+		return this._listeners.add(fn);
+	}
+	removeUpdateListener(index) {
+		this._listeners.remove(index);
+	}
+	less(point, measure = "width") {
+		const out = this.addWatcher("less", [point], measure);
+		this.activate();
+		return out;
+	}
+	between(point1, point2, measure = "width") {
+		const out = this.addWatcher("between", [point1, point2], measure);
+		this.activate();
+		this.update();
+		return out;
+	}
+	greater(point, measure = "width") {
+		const out = this.addWatcher("greater", [point], measure);
+		this.activate();
+		return out;
+	}
+	activate() {
+		if (!this._width) this._width = ref(0);
+		if (!this._height) this._height = ref(0);
+		if (isBrowser && !this._activated) window.addEventListener("resize", this._resizeHandler, { passive: true });
+		this.update();
+		this._activated = true;
+	}
+	deactivate() {
+		this._activated = false;
+		if (isBrowser) window.removeEventListener("resize", this._resizeHandler);
+	}
+	getBreakpointValue(name) {
+		return +this.breakpoints[name];
+	}
+	addWatcher(operation, points, measure = "width") {
+		let outRef = void 0;
+		this._watchers.forEach((watcher) => {
+			const isMultiValued = watcher.points.length > 1;
+			if (watcher.operation === operation) {
+				if (isMultiValued) {
+					if (watcher.points[0] === points[0] && watcher.points[1] === points[1]) {
+						console.log("setting existing ", watcher.value);
+						outRef = watcher.value;
+					}
+				} else if (watcher.points[0] === points[0]) outRef = watcher.value;
+			}
+		});
+		if (!outRef) {
+			outRef = ref(false);
+			this._watchers.push({
+				measure,
+				points,
+				operation,
+				value: outRef
+			});
+		}
+		return outRef;
+	}
+};
+// src/persist.ts
+/** the storage slot holding the selection */
+const STORAGE_KEY = "ui0:theme";
+/**
+* Reads the stored selection.
+* @returns the parsed selection, or undefined when absent or unreadable
+*/
+function readStoredSelection() {
+	if (typeof localStorage === "undefined") return void 0;
+	try {
+		const raw = localStorage.getItem(STORAGE_KEY);
+		if (!raw) return void 0;
+		const parsed = JSON.parse(raw);
+		if (typeof parsed !== "object" || parsed === null) return void 0;
+		return parsed;
+	} catch {
+		return;
+	}
+}
+/**
+* Writes the selection, swallowing storage errors.
+* @param preset - the active preset name
+* @param appearance - the active appearance
+*/
+function writeStoredSelection(preset, appearance) {
+	if (typeof localStorage === "undefined") return;
+	try {
+		localStorage.setItem(STORAGE_KEY, JSON.stringify({
+			preset,
+			appearance
+		}));
+	} catch {}
+}
+// src/instance.ts
+function createThemeInstance(config, options = {}) {
+	const resolved = withDefaults(config);
+	const contracts = {};
+	const props = [];
+	const presets = { ...resolved.presets };
+	const cache = {};
+	const names = () => Object.keys(presets);
+	const stored = readStoredSelection();
+	const storedPreset = stored?.preset && stored.preset in presets ? stored.preset : void 0;
+	const storedAppearance = stored?.appearance && THEME_SCHEMES.includes(stored.appearance) ? stored.appearance : void 0;
+	const name = ref(options.theme && options.theme in presets ? options.theme : storedPreset ?? (resolved.default in presets ? resolved.default : names()[0] ?? ""));
+	const appearance = ref(options.appearance ?? storedAppearance ?? "light");
+	watch([name, appearance], ([preset, appr]) => writeStoredSelection(preset, appr), { flush: "sync" });
+	/** the resolved appearance config (base merged under the scheme) */
+	const configFor = (n, appr) => {
+		const preset = resolvePreset(presets, n, cache);
+		const scheme = appr === "default" ? schemesOf(preset).default : schemesOf(preset)[appr];
+		return scheme ? deepMerge(schemesOf(preset).default, scheme) : schemesOf(preset).default;
+	};
+	function descendants(base) {
+		const out = /* @__PURE__ */ new Set();
+		let frontier = [base];
+		while (frontier.length) {
+			const next = [];
+			for (const b of frontier) for (const n of names()) if (!out.has(n) && n !== base && presets[n]?.extends === b) {
+				out.add(n);
+				next.push(n);
+			}
+			frontier = next;
+		}
+		return [...out];
+	}
+	return {
+		contracts,
+		get preset() {
+			return name.value;
+		},
+		presets() {
+			return presets;
+		},
+		set preset(v) {
+			if (v in presets) name.value = v;
+		},
+		get appearance() {
+			return appearance.value;
+		},
+		set appearance(v) {
+			appearance.value = v;
+		},
+		toggle: () => {
+			appearance.value = appearance.value === "dark" ? "light" : "dark";
+		},
+		presetList: () => names(),
+		extends: (exact) => descendants(exact ?? name.value),
+		addPreset(n, preset) {
+			presets[n] = preset;
+			delete cache[n];
+		},
+		addContract(contract) {
+			contracts[contract.key] = contract;
+			if (contract.props && isArray(contract.props)) props.push(...contract.props);
+		},
+		removeContract(key) {
+			delete contracts[key];
+		},
+		contractList: () => Object.getOwnPropertySymbols(contracts),
+		contractProps: () => props,
+		colorList(theme, appr) {
+			const cfg = configFor(theme ?? name.value, appr ?? appearance.value);
+			const { base } = resolvePool(buildPool(cfg.color, void 0));
+			return Object.keys(base);
+		}
+	};
+}
+// src/keys.ts
+const Ui0ThemeKey = Symbol("ui0-theme");
+// src/plugin.ts
+function createUi0Theme(config) {
+	return { install(instance) {
+		const theme = createThemeInstance(config);
+		Object.keys(contracts).forEach((c) => {
+			theme.addContract(contracts[c]);
+		});
+		const display = new Display(config.contracts.display);
+		if (typeof document !== "undefined") ensureThemeBaseStyle(document);
+		if (instance.vue) {
+			instance.vue.provide(Ui0ThemeKey, theme);
+			instance.vue.provide(DisplayKey, display);
+		}
+		return theme;
+	} };
+}
+// src/useTheme.ts
+function useTheme() {
+	if (hasInjectionContext()) {
+		const provided = inject(Ui0ThemeKey, void 0);
+		if (provided) return provided;
+	}
+	const vm = getCurrentInstance();
+	if (!vm) return void 0;
+	return vm.appContext.config.globalProperties.$ui0?.theme;
+}
+// src/useDisplay.ts
+function useDisplay(onUpdate) {
+	if (hasInjectionContext()) {
+		const display = inject(DisplayKey);
+		if (display) {
+			console.log("if display", display);
+			if (onUpdate) onMounted(() => {
+				const id = display.addUpdateListener(onUpdate);
+				onUnmounted(() => {
+					display.removeUpdateListener(id);
+				});
+			});
+			return display;
+		}
+	}
+	throw newFrameworkError("display context not exists");
+}
+// src/contracts/contract.ts
+var ThemeContractInstance = class {
+	props;
+	/**
+	* context have any provided props from styler's
+	*/
+	context;
+	$styles;
+	name;
+	classList = [];
+	styleList = {};
+	contracts;
+	constructor(name, props, styles) {
+		this.$styles = styles ?? {};
+		this.props = props ?? {};
+		this.name = name;
+		this.context = null;
+		this.contracts = {};
+	}
+	add(contract) {
+		this.contracts[contract.name] = contract;
+	}
+	prop(name) {
+		const jobs = {};
+		const instance = this;
+		for (const contract of Object.values(this.contracts)) {
+			if (isArray(name)) name.forEach((n) => {
+				if (contract.props?.includes(n)) jobs[contract.name] = contract.deal;
+			});
+			else if (isString(name)) {
+				if (contract.props?.includes(name)) jobs[contract.name] = contract;
+			}
+			contract?.props?.includes(name);
+		}
+		return {
+			styles() {
+				let out = {};
+				for (const contract of Object.values(jobs)) {
+					const deal = contract?.deal?.(instance);
+					if (deal) out = {
+						...out,
+						...deal.styles()
+					};
+				}
+				return out;
+			},
+			classes() {
+				const out = [];
+				for (const contract of Object.values(jobs)) {
+					const deal = contract?.deal?.(instance);
+					if (deal) out.push(...deal.classes());
+				}
+				return out;
+			}
+		};
+	}
+	remove(name) {
+		delete this.contracts[name];
+	}
+	setContext(p) {
+		this.context = p;
+	}
+	classes(props_, $styles = this.$styles) {
+		const props = props_ ?? this.props;
+		const out = [];
+		for (const contract of Object.values(this.contracts)) {
+			const deal = contract?.deal?.(this);
+			if (deal) out.push(...deal.classes(props, $styles));
+		}
+		return out;
+	}
+	styles(props_) {
+		const props = props_ ?? this.props;
+		let out = {};
+		for (const contract of Object.keys(this.contracts)) {
+			const deal = this.contracts[contract]?.deal?.(this);
+			if (deal) out = {
+				...out,
+				...deal.styles(props)
+			};
+		}
+		return out;
+	}
+	/**
+	* Virtual's classes and styles injector
+	* @param data
+	* @private
+	*/
+	inject(data) {
+		if (isArray(data)) {
+			if (data.indexOf(this.classList[0]) === -1) return [...this.classList, ...data];
+			else return data;
+		} else return {
+			...this.styleList,
+			...data
+		};
+	}
+};
+// src/useThemeContext.ts
+function useThemeContext(props, $styles, _allowContracts) {
+	const vm = getCurrentInstance();
+	if (hasInjectionContext()) {
+		const $style = $styles ?? useCssModule();
+		const theme = useTheme();
+		if (theme) {
+			const refs = isReactive(props) ? toRefs(props) : toRefs(reactive(props));
+			function providePropRef(name, key) {
+				const injected = inject(key, null);
+				const keys = [
+					"smaller",
+					"larger",
+					"inherit"
+				];
+				if (refs) {
+					const ref = refs[name];
+					if (ref) {
+						if (ref.value !== void 0) {
+							const v = ref.value;
+							if (isArray(v) && v.length) {
+								if (v[0] && isString(v[0]) && !keys.includes(v[0])) {
+									provide(key, ref);
+									return ref;
+								} else if (injected) {
+									provide(key, injected);
+									return injected;
+								}
+							} else if (v && isString(v) && !keys.includes(v) || typeof v === "number") {
+								provide(key, ref);
+								return ref;
+							} else if (injected) {
+								provide(key, injected);
+								return injected;
+							}
+						}
+					}
+				}
+			}
+			const provider = new ThemeContractInstance("test", props, $style);
+			const ctx = {};
+			for (const c of theme.contractList()) {
+				const currentContract = theme.contracts[c];
+				const r = currentContract.ref;
+				if (r) ctx[currentContract.name] = providePropRef(currentContract.name, r);
+				provider.add(currentContract);
+			}
+			provider.setContext(ctx);
+			return [theme, provider];
+		}
+	}
+	if (!vm) throw newFrameworkError("ThemeWithContext");
+	if (!vm) return [void 0, void 0];
+	return [vm.appContext.config.globalProperties.$ui0?.theme, void 0];
+}
+export { props as ThemeContractPropsKeys, ThemeProvider, contractGenerators, createThemeInstance, createUi0Theme, generateThemeArtifacts, generateThemeCss, generateThemeTypes, useDisplay, useTheme, useThemeContext, withDefaults };
+
+//# sourceMappingURL=index.mjs.map