npm - @vuecs/design - Versions diffs - 1.0.0 - Mend

@vuecs/design 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (45) hide show

package/LICENSE +201 -0
package/README.md +57 -0
package/assets/animations.css +506 -0
package/assets/index.css +197 -0
package/assets/palettes.css +303 -0
package/assets/standalone.css +37 -0
package/dist/core/color-mode/bind.d.ts +12 -0
package/dist/core/color-mode/bind.d.ts.map +1 -0
package/dist/core/color-mode/composable.d.ts +13 -0
package/dist/core/color-mode/composable.d.ts.map +1 -0
package/dist/core/color-mode/index.d.ts +4 -0
package/dist/core/color-mode/index.d.ts.map +1 -0
package/dist/core/color-mode/types.d.ts +36 -0
package/dist/core/color-mode/types.d.ts.map +1 -0
package/dist/core/color-palette/apply.d.ts +34 -0
package/dist/core/color-palette/apply.d.ts.map +1 -0
package/dist/core/color-palette/bind.d.ts +14 -0
package/dist/core/color-palette/bind.d.ts.map +1 -0
package/dist/core/color-palette/catalog.d.ts +78 -0
package/dist/core/color-palette/catalog.d.ts.map +1 -0
package/dist/core/color-palette/composable.d.ts +34 -0
package/dist/core/color-palette/composable.d.ts.map +1 -0
package/dist/core/color-palette/index.d.ts +7 -0
package/dist/core/color-palette/index.d.ts.map +1 -0
package/dist/core/color-palette/render.d.ts +16 -0
package/dist/core/color-palette/render.d.ts.map +1 -0
package/dist/core/color-palette/types.d.ts +107 -0
package/dist/core/color-palette/types.d.ts.map +1 -0
package/dist/core/index.d.ts +4 -0
package/dist/core/index.d.ts.map +1 -0
package/dist/core/theme-runtime/capture.d.ts +32 -0
package/dist/core/theme-runtime/capture.d.ts.map +1 -0
package/dist/core/theme-runtime/composable.d.ts +34 -0
package/dist/core/theme-runtime/composable.d.ts.map +1 -0
package/dist/core/theme-runtime/index.d.ts +4 -0
package/dist/core/theme-runtime/index.d.ts.map +1 -0
package/dist/core/theme-runtime/types.d.ts +42 -0
package/dist/core/theme-runtime/types.d.ts.map +1 -0
package/dist/index.d.ts +2 -0
package/dist/index.d.ts.map +1 -0
package/dist/index.mjs +467 -0
package/dist/index.mjs.map +1 -0
package/dist/utils/object.d.ts +2 -0
package/dist/utils/object.d.ts.map +1 -0
package/package.json +83 -0

package/dist/index.mjs ADDED Viewed

@@ -0,0 +1,467 @@
+import { createSharedComposable, usePreferredDark, useStorage } from "@vueuse/core";
+import { computed, inject, ref, watch, watchEffect } from "vue";
+//#region src/core/theme-runtime/composable.ts
+/**
+* Globally-shared `InjectionKey` for the ThemeManager. SSR plugins
+* (Nuxt, future frameworks) that need to look up the manager from
+* outside Vue's component context use this with `app.runWithContext`
+* (or equivalent) + `inject`.
+*
+* Bridge between `@vuecs/design` and `@vuecs/core`'s `ThemeManager`
+* without a hard runtime dep: both packages reference the same
+* `Symbol.for('VCThemeManager')` registry key, so the ThemeManager
+* provided by `installThemeManager(app)` (in `@vuecs/core`) is
+* reachable here. `Symbol.for(...)` is reference-equal across module
+* boundaries, and the `InjectionKey<ThemeRuntimeManager>` cast
+* surfaces the manager type to `inject()` callers without leaking
+* `@vuecs/core` internals.
+*
+* `inject()` returns `undefined` if no ThemeManager is installed —
+* design composables use that as the "no theme dispatch" fallback so
+* they keep working in standalone apps that import `@vuecs/design`
+* without `@vuecs/core`.
+*/
+const THEME_RUNTIME_MANAGER_SYMBOL = Symbol.for("VCThemeManager");
+/**
+* Look up the ThemeManager installed by `app.use(vuecs)` (or
+* `installThemeManager(app)`). Returns `undefined` if no manager is
+* provided in the current setup context — design composables fall back
+* to no-dispatch behaviour in that case.
+*
+* Must be called during `setup()` or another composable's setup phase
+* (Vue's `inject()` requirement).
+*/
+function useThemeRuntimeManager() {
+	return inject(THEME_RUNTIME_MANAGER_SYMBOL, void 0);
+}
+//#endregion
+//#region src/core/color-mode/bind.ts
+/**
+* Wire any reactive `Ref<ColorMode>` into the design system: track
+* system preference, expose the resolved light/dark value, and
+* (optionally) sync the `.dark` / `.light` class on `<html>`.
+*
+* The `syncClass` watcher mirrors what `@vuecs/nuxt`'s SSR plugin
+* writes server-side, so client hydration leaves the class in place.
+*/
+function bindColorMode(source, options = {}) {
+	const { syncClass = true } = options;
+	const preferredDark = usePreferredDark();
+	const resolved = computed(() => {
+		if (source.value === "dark") return "dark";
+		if (source.value === "light") return "light";
+		return preferredDark.value ? "dark" : "light";
+	});
+	const mode = computed({
+		get: () => source.value,
+		set: (value) => {
+			source.value = value;
+		}
+	});
+	const isDark = computed({
+		get: () => resolved.value === "dark",
+		set: (value) => {
+			source.value = value ? "dark" : "light";
+		}
+	});
+	if (syncClass && typeof document !== "undefined") watch(resolved, (value) => {
+		document.documentElement.classList.toggle("dark", value === "dark");
+		document.documentElement.classList.toggle("light", value === "light");
+	}, { immediate: true });
+	const manager = useThemeRuntimeManager();
+	if (typeof document !== "undefined") watch([resolved, () => manager?.themes], ([value, themes]) => {
+		if (!themes) return;
+		for (const theme of themes) theme.colorMode?.handle(document, value);
+	}, { immediate: true });
+	function toggle() {
+		source.value = resolved.value === "dark" ? "light" : "dark";
+	}
+	return {
+		mode,
+		resolved,
+		isDark,
+		toggle
+	};
+}
+//#endregion
+//#region src/core/color-mode/composable.ts
+const DEFAULT_STORAGE_KEY$1 = "vc-color-mode";
+const COLOR_MODE_SET = new Set([
+	"light",
+	"dark",
+	"system"
+]);
+const sanitize = (value, fallback) => typeof value === "string" && COLOR_MODE_SET.has(value) ? value : fallback;
+/**
+* Reactive color-mode state with localStorage persistence. Shared
+* across all call sites via `createSharedComposable` so toggling in
+* one component updates every consumer (and the `<html>` class) in
+* lockstep.
+*
+* For SSR-aware cookie-backed storage (Nuxt), the `@vuecs/nuxt` module
+* ships its own `useColorMode()` that calls `bindColorMode()` directly
+* with a cookie-backed ref. Both expose the same return shape.
+*/
+const useColorMode = createSharedComposable((options = {}) => {
+	const { initial = "system", persist = true, storageKey = DEFAULT_STORAGE_KEY$1, syncClass = true } = options;
+	return bindColorMode(persist ? useStorage(storageKey, initial, void 0, { serializer: {
+		read: (raw) => sanitize(raw, initial),
+		write: (value) => value
+	} }) : ref(initial), { syncClass });
+});
+//#endregion
+//#region src/core/color-palette/apply.ts
+/**
+* DOM id used for the runtime palette `<style>` block. Themes that
+* implement palette switching should write into a `<style>` element
+* with this id (via `applyColorPaletteCss()`); SSR plugins use the same
+* id so client hydration replaces the server-rendered block atomically.
+*/
+const COLOR_PALETTE_STYLE_ELEMENT_ID = "vc-color-palette";
+/**
+* Apply an arbitrary CSS string as a `<style id="vc-color-palette">` block
+* (client-side only). Idempotent — subsequent calls replace the
+* element's content.
+*
+* Theme-agnostic: accepts whatever CSS string the caller wants. Themes
+* that ship palette switching compose this with their own renderer
+* (e.g. `@vuecs/theme-tailwind`'s `renderColorPaletteStyles()`); other
+* tooling can call it directly with custom CSS.
+*
+* The optional `nonce` parameter wires CSP nonce attribution: when set,
+* the created `<style>` element carries `nonce="..."` so it survives a
+* strict Content-Security-Policy. Subsequent calls update the
+* attribute when the value changes, and clear it when the new value is
+* undefined (so consumers can revoke a stale nonce on policy update).
+* Consumers typically read this via
+* `useConfig('nonce')` (from `@vuecs/core`, augmented by
+* `@vuecs/theme-tailwind`); the per-theme `useColorPalette` wrappers
+* already do this.
+*
+* On the server (`document` undefined) this is a no-op; SSR pre-render
+* paths should serialize the renderer's output into the response head
+* directly (with the nonce wired through framework-specific head
+* APIs), then let the client take over on hydration.
+*/
+function applyColorPaletteCss(css, doc = globalThis.document, nonce) {
+	if (!doc) return;
+	let style = doc.getElementById(COLOR_PALETTE_STYLE_ELEMENT_ID);
+	if (!style) {
+		style = doc.createElement("style");
+		style.id = COLOR_PALETTE_STYLE_ELEMENT_ID;
+		if (nonce) style.setAttribute("nonce", nonce);
+		doc.head.appendChild(style);
+	} else if (nonce) {
+		if (style.getAttribute("nonce") !== nonce) style.setAttribute("nonce", nonce);
+	} else if (style.hasAttribute("nonce")) style.removeAttribute("nonce");
+	style.textContent = css;
+}
+//#endregion
+//#region src/core/color-palette/bind.ts
+/**
+* Wire any reactive `Ref<T>` into the palette runtime: render the
+* current value via the theme-supplied `render` function, apply it via
+* `applyColorPaletteCss`, and re-apply on every change.
+*
+* Generic: each theme defines its own palette shape `T` and renderer.
+* `@vuecs/theme-tailwind` wraps this with its `ColorPaletteConfig` and
+* `renderColorPaletteStyles`; community themes can do the same with their
+* own shapes — including custom merge semantics via `options.extend`.
+*/
+function bindColorPalette(source, options) {
+	const { render, extend, document = globalThis.document, nonce } = options;
+	const resolveNonce = typeof nonce === "function" ? nonce : () => nonce;
+	if (document) applyColorPaletteCss(render(source.value), document, resolveNonce());
+	watch([source, () => resolveNonce()], () => {
+		applyColorPaletteCss(render(source.value), document, resolveNonce());
+	}, { deep: true });
+	return {
+		current: computed(() => source.value),
+		set(palette) {
+			source.value = palette;
+		},
+		extend(partial) {
+			source.value = extend(source.value, partial);
+		}
+	};
+}
+//#endregion
+//#region src/core/color-palette/catalog.ts
+/**
+* Canonical palette catalog for the vuecs design system.
+*
+* The names originated in Tailwind v4 (see `@vuecs/design/standalone`'s
+* `palettes.css`, generated from `tailwindcss/theme.css`), but the
+* catalog is now considered design-owned: every supported palette
+* source — Tailwind via `@import "tailwindcss"`, or the
+* standalone subpath — provides the matching `--color-<palette>-<shade>`
+* literals so `setColorPalette()` resolves correctly regardless of
+* whether Tailwind is loaded.
+*
+* Themes typically reuse this catalog verbatim (theme-tailwind and
+* theme-bulma both declare `palette.names: COLOR_PALETTES`). A theme
+* with extra palette names just defines its own local union:
+*
+*     type AcmePaletteName = ColorPaletteName | 'acme-blue';
+*
+* — and ships its own `palette.names` array.
+*/
+/**
+* The six semantic scales every vuecs theme exposes through the
+* `--vc-color-<scale>-*` variable family. A `setColorPalette({
+* primary: 'green' })` call binds one scale to one palette catalog
+* entry at runtime.
+*/
+const SEMANTIC_SCALES = [
+	"primary",
+	"neutral",
+	"success",
+	"warning",
+	"error",
+	"info"
+];
+/**
+* The 22 catalog palettes shipped with `@vuecs/design` (sourced
+* verbatim from Tailwind v4). Any of these can be assigned to a
+* `SemanticScaleName` via `setColorPalette()`.
+*/
+const COLOR_PALETTES = [
+	"slate",
+	"gray",
+	"zinc",
+	"neutral",
+	"stone",
+	"red",
+	"orange",
+	"amber",
+	"yellow",
+	"lime",
+	"green",
+	"emerald",
+	"teal",
+	"cyan",
+	"sky",
+	"blue",
+	"indigo",
+	"violet",
+	"purple",
+	"fuchsia",
+	"pink",
+	"rose"
+];
+/**
+* Tailwind-style 11-stop shade ladder. The same ladder appears in
+* every catalog entry (the standalone subpath's `palettes.css` and
+* Tailwind's own `theme.css` both emit `--color-<palette>-<shade>`
+* for each stop).
+*/
+const COLOR_PALETTE_SHADES = [
+	"50",
+	"100",
+	"200",
+	"300",
+	"400",
+	"500",
+	"600",
+	"700",
+	"800",
+	"900",
+	"950"
+];
+//#endregion
+//#region src/utils/object.ts
+function isObject(input) {
+	return typeof input === "object" && input !== null && !Array.isArray(input);
+}
+//#endregion
+//#region src/core/color-palette/render.ts
+/**
+* Concatenate every installed theme's `palette.handle` output into a
+* single CSS string. SSR plugins emit the result as the
+* `<style id="vc-color-palette">` block so palette-aware themes flow
+* on first paint.
+*
+* Mirrors the client-side concat semantics in `useColorPalette()`:
+* non-overlapping rules from different themes coexist; CSS cascade
+* resolves any incidental overlap with later-rule-wins.
+*
+* Errors thrown by a theme's handler are caught + logged so one
+* broken theme can't crash SSR; other themes still emit.
+*/
+function renderColorPaletteFromThemes(themes, palette) {
+	const parts = [];
+	for (const theme of themes) {
+		if (!theme.palette?.handle) continue;
+		const handle = theme.palette.handle.bind(theme.palette);
+		const input = applyScaleAliases(palette, theme.palette.scaleAliases);
+		try {
+			const out = handle(input);
+			if (out) parts.push(out);
+		} catch (e) {
+			if (typeof console !== "undefined") console.warn("[vuecs] theme palette.handle failed; skipping:", e);
+		}
+	}
+	return parts.join("\n");
+}
+const FORBIDDEN_KEYS = new Set([
+	"__proto__",
+	"constructor",
+	"prototype"
+]);
+function applyScaleAliases(palette, aliases) {
+	if (!aliases) return palette;
+	const out = Object.create(null);
+	for (const [k, v] of Object.entries(palette)) {
+		const target = aliases[k] ?? k;
+		if (FORBIDDEN_KEYS.has(target)) continue;
+		out[target] = v;
+	}
+	return out;
+}
+//#endregion
+//#region src/core/color-palette/composable.ts
+const DEFAULT_STORAGE_KEY = "vc-color-palette";
+const SEMANTIC_SCALE_SET = new Set(SEMANTIC_SCALES);
+const PALETTE_NAME_SET = new Set(COLOR_PALETTES);
+function defaultSanitize(value) {
+	if (!isObject(value)) return {};
+	const out = {};
+	for (const [k, v] of Object.entries(value)) if (SEMANTIC_SCALE_SET.has(k) && typeof v === "string" && PALETTE_NAME_SET.has(v)) out[k] = v;
+	return out;
+}
+const shallowMerge = (current, partial) => ({
+	...current,
+	...partial
+});
+/**
+* Theme-aware reactive palette state — un-shared variant.
+*
+* Concatenates every installed theme's `palette.handle` output into the
+* `<style id="vc-color-palette">` element. Walking the installed themes
+* each render means runtime theme swaps via `setThemes()` automatically
+* pick up the new renderer chain.
+*
+* Concat (rather than last-wins) is the doctrinal semantic: when an app
+* stacks multiple palette-aware themes (the docs-site case where
+* Tailwind components and Bulma components share the same picker UI),
+* each theme's renderer emits its own non-overlapping CSS rules —
+* Tailwind rebinds `--vc-color-*`, Bulma writes per-variant HSL channel
+* vars. The CSS cascade resolves any incidental overlap with
+* later-rule-wins semantics, so concat behaves like last-wins for
+* overlapping properties AND emits both themes' unique properties.
+*
+* Production callers should use `useColorPalette` (the shared variant
+* below). This un-shared form is exposed primarily for testing — every
+* call creates a fresh `watchEffect` and palette state.
+*/
+function useColorPaletteUnshared(options = {}) {
+	const { initial = {}, source, persist = true, storageKey = DEFAULT_STORAGE_KEY, sanitize = defaultSanitize, extend = shallowMerge, nonce } = options;
+	const resolveNonce = typeof nonce === "function" ? nonce : () => nonce;
+	const manager = useThemeRuntimeManager();
+	const storage = source ?? (persist ? useStorage(storageKey, sanitize(initial), void 0, { serializer: {
+		read: (raw) => {
+			try {
+				return sanitize(JSON.parse(raw));
+			} catch {
+				return sanitize({});
+			}
+		},
+		write: (value) => JSON.stringify(value)
+	} }) : ref(sanitize(initial)));
+	const renderConcatenated = (palette) => {
+		const themes = manager?.themes;
+		if (!themes || themes.length === 0) return "";
+		return renderColorPaletteFromThemes(themes, sanitize(palette));
+	};
+	if (typeof document !== "undefined") watchEffect(() => {
+		applyColorPaletteCss(renderConcatenated(storage.value), void 0, resolveNonce());
+	});
+	return {
+		current: computed(() => storage.value),
+		set(palette) {
+			storage.value = palette;
+		},
+		extend(partial) {
+			storage.value = extend(storage.value, partial);
+		}
+	};
+}
+/**
+* Theme-aware reactive palette state with localStorage persistence
+* (plan 021 slice 2).
+*
+* Wrapped with `createSharedComposable` so every call site shares the
+* same ref + watcher. For SSR-aware cookie-backed storage (Nuxt), the
+* matching Nuxt module ships its own composable that calls
+* `bindColorPalette()` directly with a cookie-backed ref.
+*/
+const useColorPalette = createSharedComposable(useColorPaletteUnshared);
+//#endregion
+//#region src/core/theme-runtime/capture.ts
+/**
+* Build a synthetic Document-like whose `documentElement` records
+* `setAttribute` / `removeAttribute` calls into the supplied target
+* record, plus a no-op `classList`. **No other Document or Element
+* APIs are stubbed** — themes that call `doc.createElement`,
+* `doc.head.appendChild`, etc. WILL throw at SSR runtime. Themes
+* needing richer DOM access from `colorMode.handle` should guard their
+* CSR-only logic with `if (typeof window === 'undefined') return;`
+* and split the SSR-flowing bits into declarative `setAttribute` calls.
+*
+* Exposed for advanced consumers; the higher-level
+* `captureColorModeAttrs()` covers the common case and catches errors
+* per theme so a single broken theme can't crash SSR.
+*/
+function createCaptureDocument(target) {
+	return { documentElement: {
+		setAttribute(name, value) {
+			target[name] = value;
+		},
+		removeAttribute(name) {
+			delete target[name];
+		},
+		classList: {
+			add() {},
+			remove() {},
+			toggle() {
+				return false;
+			},
+			contains() {
+				return false;
+			},
+			replace() {}
+		}
+	} };
+}
+/**
+* Walk every installed theme's `colorMode.handle` against a synthetic
+* Document and capture the resulting attribute mutations. SSR plugins
+* use this to flow `data-bs-theme` / `data-theme` (or any other
+* attribute a theme declares) into `useHead({ htmlAttrs })` before
+* first paint.
+*
+* Each theme's handler runs in install order. If multiple themes set
+* the same attribute, the last one wins — same semantic as the live
+* `document.documentElement.setAttribute` chain on the client.
+*
+* Errors thrown by a theme's handler are caught + logged as a warning
+* so one malformed theme can't crash SSR; other themes still run.
+*/
+function captureColorModeAttrs(themes, mode) {
+	const attrs = Object.create(null);
+	const fakeDoc = createCaptureDocument(attrs);
+	for (const theme of themes) {
+		if (!theme.colorMode?.handle) continue;
+		const handle = theme.colorMode?.handle.bind(theme.colorMode);
+		try {
+			handle(fakeDoc, mode);
+		} catch (e) {
+			if (typeof console !== "undefined") console.warn("[vuecs] theme colorMode.handle failed; skipping:", e);
+		}
+	}
+	return attrs;
+}
+//#endregion
+export { COLOR_PALETTES, COLOR_PALETTE_SHADES, COLOR_PALETTE_STYLE_ELEMENT_ID, SEMANTIC_SCALES, THEME_RUNTIME_MANAGER_SYMBOL, applyColorPaletteCss, bindColorMode, bindColorPalette, captureColorModeAttrs, createCaptureDocument, renderColorPaletteFromThemes, useColorMode, useColorPalette, useColorPaletteUnshared, useThemeRuntimeManager };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.mjs","names":["DEFAULT_STORAGE_KEY"],"sources":["../src/core/theme-runtime/composable.ts","../src/core/color-mode/bind.ts","../src/core/color-mode/composable.ts","../src/core/color-palette/apply.ts","../src/core/color-palette/bind.ts","../src/core/color-palette/catalog.ts","../src/utils/object.ts","../src/core/color-palette/render.ts","../src/core/color-palette/composable.ts","../src/core/theme-runtime/capture.ts"],"sourcesContent":["import type { InjectionKey } from 'vue';\nimport { inject } from 'vue';\nimport type { ThemeRuntimeManager } from './types';\n\n/**\n * Globally-shared `InjectionKey` for the ThemeManager. SSR plugins\n * (Nuxt, future frameworks) that need to look up the manager from\n * outside Vue's component context use this with `app.runWithContext`\n * (or equivalent) + `inject`.\n *\n * Bridge between `@vuecs/design` and `@vuecs/core`'s `ThemeManager`\n * without a hard runtime dep: both packages reference the same\n * `Symbol.for('VCThemeManager')` registry key, so the ThemeManager\n * provided by `installThemeManager(app)` (in `@vuecs/core`) is\n * reachable here. `Symbol.for(...)` is reference-equal across module\n * boundaries, and the `InjectionKey<ThemeRuntimeManager>` cast\n * surfaces the manager type to `inject()` callers without leaking\n * `@vuecs/core` internals.\n *\n * `inject()` returns `undefined` if no ThemeManager is installed —\n * design composables use that as the \"no theme dispatch\" fallback so\n * they keep working in standalone apps that import `@vuecs/design`\n * without `@vuecs/core`.\n */\nexport const THEME_RUNTIME_MANAGER_SYMBOL = Symbol.for('VCThemeManager') as InjectionKey<ThemeRuntimeManager>;\n\n/**\n * Look up the ThemeManager installed by `app.use(vuecs)` (or\n * `installThemeManager(app)`). Returns `undefined` if no manager is\n * provided in the current setup context — design composables fall back\n * to no-dispatch behaviour in that case.\n *\n * Must be called during `setup()` or another composable's setup phase\n * (Vue's `inject()` requirement).\n */\nexport function useThemeRuntimeManager(): ThemeRuntimeManager | undefined {\n return inject(THEME_RUNTIME_MANAGER_SYMBOL, undefined);\n}\n","import { usePreferredDark } from '@vueuse/core';\nimport { computed, watch } from 'vue';\nimport type { Ref } from 'vue';\nimport { useThemeRuntimeManager } from '../theme-runtime/composable';\nimport type { ColorMode, UseColorModeOptions, UseColorModeReturn } from './types';\n\n/**\n * Wire any reactive `Ref<ColorMode>` into the design system: track\n * system preference, expose the resolved light/dark value, and\n * (optionally) sync the `.dark` / `.light` class on `<html>`.\n *\n * The `syncClass` watcher mirrors what `@vuecs/nuxt`'s SSR plugin\n * writes server-side, so client hydration leaves the class in place.\n */\nexport function bindColorMode(\n source: Ref<ColorMode>,\n options: Pick<UseColorModeOptions, 'syncClass'> = {},\n): UseColorModeReturn {\n const { syncClass = true } = options;\n const preferredDark = usePreferredDark();\n\n const resolved = computed<'light' | 'dark'>(() => {\n if (source.value === 'dark') return 'dark';\n if (source.value === 'light') return 'light';\n return preferredDark.value ? 'dark' : 'light';\n });\n\n const mode = computed<ColorMode>({\n get: () => source.value,\n set: (value) => {\n source.value = value;\n },\n });\n\n const isDark = computed<boolean>({\n get: () => resolved.value === 'dark',\n set: (value) => {\n source.value = value ? 'dark' : 'light';\n },\n });\n\n if (syncClass && typeof document !== 'undefined') {\n watch(\n resolved,\n (value) => {\n document.documentElement.classList.toggle('dark', value === 'dark');\n document.documentElement.classList.toggle('light', value === 'light');\n },\n { immediate: true },\n );\n }\n\n /*\n * Theme-configurable dispatch (plan 021): each installed theme that\n * declares a `colorMode.handle` hook gets called with the resolved\n * mode. Themes use this to mirror framework-specific dark-mode\n * markers (theme-bootstrap → `data-bs-theme`, theme-bulma →\n * `data-theme`) so framework chrome flips alongside vuecs's own\n * `.dark` class without per-app `watchEffect` mirrors.\n *\n * The watch source is a tuple `[resolved, () => manager?.themes]`\n * because Vue's `watch(source, callback)` only tracks reactive\n * dependencies accessed inside the source — callback reads do NOT\n * subscribe. Including the themes getter in the source means\n * `ThemeManager.setThemes()` (which mutates the underlying\n * `shallowRef`) re-fires the dispatch with the new theme list.\n */\n const manager = useThemeRuntimeManager();\n if (typeof document !== 'undefined') {\n watch(\n [resolved, () => manager?.themes],\n ([value, themes]) => {\n if (!themes) return;\n for (const theme of themes) {\n theme.colorMode?.handle(document, value);\n }\n },\n { immediate: true },\n );\n }\n\n function toggle(): void {\n source.value = resolved.value === 'dark' ? 'light' : 'dark';\n }\n\n return {\n mode,\n resolved,\n isDark,\n toggle,\n };\n}\n","import { createSharedComposable, useStorage } from '@vueuse/core';\nimport { ref } from 'vue';\nimport type { Ref } from 'vue';\nimport { bindColorMode } from './bind';\nimport type { ColorMode, UseColorModeOptions, UseColorModeReturn } from './types';\n\nconst DEFAULT_STORAGE_KEY = 'vc-color-mode';\nconst COLOR_MODES: readonly ColorMode[] = ['light', 'dark', 'system'];\nconst COLOR_MODE_SET = new Set<string>(COLOR_MODES);\n\nconst sanitize = (value: unknown, fallback: ColorMode): ColorMode => (\n typeof value === 'string' && COLOR_MODE_SET.has(value) ?\n (value as ColorMode) :\n fallback\n);\n\n/**\n * Reactive color-mode state with localStorage persistence. Shared\n * across all call sites via `createSharedComposable` so toggling in\n * one component updates every consumer (and the `<html>` class) in\n * lockstep.\n *\n * For SSR-aware cookie-backed storage (Nuxt), the `@vuecs/nuxt` module\n * ships its own `useColorMode()` that calls `bindColorMode()` directly\n * with a cookie-backed ref. Both expose the same return shape.\n */\nexport const useColorMode = createSharedComposable(\n (options: UseColorModeOptions = {}): UseColorModeReturn => {\n const {\n initial = 'system',\n persist = true,\n storageKey = DEFAULT_STORAGE_KEY,\n syncClass = true,\n } = options;\n\n const storage: Ref<ColorMode> = persist ?\n useStorage<ColorMode>(storageKey, initial, undefined, {\n serializer: {\n read: (raw) => sanitize(raw, initial),\n write: (value) => value,\n },\n }) :\n ref<ColorMode>(initial);\n\n return bindColorMode(storage, { syncClass });\n },\n);\n","/**\n * DOM id used for the runtime palette `<style>` block. Themes that\n * implement palette switching should write into a `<style>` element\n * with this id (via `applyColorPaletteCss()`); SSR plugins use the same\n * id so client hydration replaces the server-rendered block atomically.\n */\nexport const COLOR_PALETTE_STYLE_ELEMENT_ID = 'vc-color-palette';\n\n/**\n * Apply an arbitrary CSS string as a `<style id=\"vc-color-palette\">` block\n * (client-side only). Idempotent — subsequent calls replace the\n * element's content.\n *\n * Theme-agnostic: accepts whatever CSS string the caller wants. Themes\n * that ship palette switching compose this with their own renderer\n * (e.g. `@vuecs/theme-tailwind`'s `renderColorPaletteStyles()`); other\n * tooling can call it directly with custom CSS.\n *\n * The optional `nonce` parameter wires CSP nonce attribution: when set,\n * the created `<style>` element carries `nonce=\"...\"` so it survives a\n * strict Content-Security-Policy. Subsequent calls update the\n * attribute when the value changes, and clear it when the new value is\n * undefined (so consumers can revoke a stale nonce on policy update).\n * Consumers typically read this via\n * `useConfig('nonce')` (from `@vuecs/core`, augmented by\n * `@vuecs/theme-tailwind`); the per-theme `useColorPalette` wrappers\n * already do this.\n *\n * On the server (`document` undefined) this is a no-op; SSR pre-render\n * paths should serialize the renderer's output into the response head\n * directly (with the nonce wired through framework-specific head\n * APIs), then let the client take over on hydration.\n */\nexport function applyColorPaletteCss(\n css: string,\n doc: Document | undefined = globalThis.document,\n nonce?: string,\n): void {\n if (!doc) return;\n\n let style = doc.getElementById(COLOR_PALETTE_STYLE_ELEMENT_ID) as HTMLStyleElement | null;\n if (!style) {\n style = doc.createElement('style');\n style.id = COLOR_PALETTE_STYLE_ELEMENT_ID;\n if (nonce) style.setAttribute('nonce', nonce);\n doc.head.appendChild(style);\n } else if (nonce) {\n if (style.getAttribute('nonce') !== nonce) {\n style.setAttribute('nonce', nonce);\n }\n } else if (style.hasAttribute('nonce')) {\n style.removeAttribute('nonce');\n }\n style.textContent = css;\n}\n","import { computed, watch } from 'vue';\nimport type { Ref } from 'vue';\nimport { applyColorPaletteCss } from './apply';\nimport type { BindColorPaletteOptions, UseColorPaletteReturn } from './types';\n\n/**\n * Wire any reactive `Ref<T>` into the palette runtime: render the\n * current value via the theme-supplied `render` function, apply it via\n * `applyColorPaletteCss`, and re-apply on every change.\n *\n * Generic: each theme defines its own palette shape `T` and renderer.\n * `@vuecs/theme-tailwind` wraps this with its `ColorPaletteConfig` and\n * `renderColorPaletteStyles`; community themes can do the same with their\n * own shapes — including custom merge semantics via `options.extend`.\n */\nexport function bindColorPalette<T>(\n source: Ref<T>,\n options: BindColorPaletteOptions<T>,\n): UseColorPaletteReturn<T> {\n const {\n render,\n extend,\n document = globalThis.document,\n nonce,\n } = options;\n\n const resolveNonce: () => string | undefined = typeof nonce === 'function' ?\n nonce :\n () => nonce;\n\n if (document) {\n applyColorPaletteCss(render(source.value), document, resolveNonce());\n }\n /*\n * Watch both the palette source AND the resolved nonce. The nonce\n * getter form (e.g. `() => useConfig('nonce').value`) reads a\n * reactive ref, so a nonce-only rotation (CSP policy update via\n * `setConfig({ nonce })`) re-applies the `<style>` element's\n * attribute without needing a palette mutation. Static nonce\n * strings return the same primitive on every call → the nonce\n * lane of the watcher is silently inert.\n */\n watch(\n [source, () => resolveNonce()] as const,\n () => {\n applyColorPaletteCss(render(source.value), document, resolveNonce());\n },\n { deep: true },\n );\n\n return {\n current: computed(() => source.value),\n set(palette) {\n source.value = palette;\n },\n extend(partial) {\n source.value = extend(source.value, partial);\n },\n };\n}\n","/**\n * Canonical palette catalog for the vuecs design system.\n *\n * The names originated in Tailwind v4 (see `@vuecs/design/standalone`'s\n * `palettes.css`, generated from `tailwindcss/theme.css`), but the\n * catalog is now considered design-owned: every supported palette\n * source — Tailwind via `@import \"tailwindcss\"`, or the\n * standalone subpath — provides the matching `--color-<palette>-<shade>`\n * literals so `setColorPalette()` resolves correctly regardless of\n * whether Tailwind is loaded.\n *\n * Themes typically reuse this catalog verbatim (theme-tailwind and\n * theme-bulma both declare `palette.names: COLOR_PALETTES`). A theme\n * with extra palette names just defines its own local union:\n *\n * type AcmePaletteName = ColorPaletteName | 'acme-blue';\n *\n * — and ships its own `palette.names` array.\n */\n\n/**\n * The six semantic scales every vuecs theme exposes through the\n * `--vc-color-<scale>-*` variable family. A `setColorPalette({\n * primary: 'green' })` call binds one scale to one palette catalog\n * entry at runtime.\n */\nexport const SEMANTIC_SCALES = [\n 'primary',\n 'neutral',\n 'success',\n 'warning',\n 'error',\n 'info',\n] as const;\n\nexport type SemanticScaleName = typeof SEMANTIC_SCALES[number];\n\n/**\n * The 22 catalog palettes shipped with `@vuecs/design` (sourced\n * verbatim from Tailwind v4). Any of these can be assigned to a\n * `SemanticScaleName` via `setColorPalette()`.\n */\nexport const COLOR_PALETTES = [\n 'slate',\n 'gray',\n 'zinc',\n 'neutral',\n 'stone',\n 'red',\n 'orange',\n 'amber',\n 'yellow',\n 'lime',\n 'green',\n 'emerald',\n 'teal',\n 'cyan',\n 'sky',\n 'blue',\n 'indigo',\n 'violet',\n 'purple',\n 'fuchsia',\n 'pink',\n 'rose',\n] as const;\n\n/**\n * Augmentation hook for community themes that extend the catalog with\n * their own palette names. Defaults to empty — `ColorPaletteName` is just\n * the 22-name Tailwind-derived catalog. A theme that ships extra palettes\n * widens the union via declaration merging:\n *\n * declare module '@vuecs/design' {\n * interface ExtraColorPaletteNames {\n * 'acme-blue': true;\n * 'acme-orange': true;\n * }\n * }\n *\n * Both the SPA composables (`@vuecs/theme-tailwind`'s `useColorPalette`,\n * etc.) and `@vuecs/nuxt`'s `colorPalette.value` option pick up the\n * extension automatically because both type against `ColorPaletteName`.\n */\nexport interface ExtraColorPaletteNames {}\n\nexport type ColorPaletteName = typeof COLOR_PALETTES[number] | keyof ExtraColorPaletteNames;\n\n/**\n * Tailwind-style 11-stop shade ladder. The same ladder appears in\n * every catalog entry (the standalone subpath's `palettes.css` and\n * Tailwind's own `theme.css` both emit `--color-<palette>-<shade>`\n * for each stop).\n */\nexport const COLOR_PALETTE_SHADES = [\n '50',\n '100',\n '200',\n '300',\n '400',\n '500',\n '600',\n '700',\n '800',\n '900',\n '950',\n] as const;\n\nexport type ColorPaletteShade = typeof COLOR_PALETTE_SHADES[number];\n\n/**\n * Canonical runtime palette config — a partial mapping of every\n * semantic scale to a catalog palette name. Used by every theme that\n * opts into runtime palette switching (`theme-tailwind`, `theme-bulma`,\n * and any future palette-aware theme).\n *\n * Both keys (`SemanticScaleName`) and values (`ColorPaletteName`)\n * widen automatically via declaration merging: `ExtraColorPaletteNames`\n * adds value-side names; the canonical scale list is fixed at six.\n *\n * Themes whose internal scale names diverge from the canonical six\n * declare a `scaleAliases` map on their `Theme.palette` slot — the\n * dispatcher translates input keys before calling `palette.handle`,\n * so the public-facing config still uses canonical names.\n */\nexport type ColorPaletteConfig = Partial<Record<SemanticScaleName, ColorPaletteName>>;\n","/*\n * Local mirror of `@vuecs/core`'s `isObject` helper. Duplicated (not\n * imported from core) so `@vuecs/design` keeps Layer-0 standing — no\n * internal runtime deps, works standalone with BS / Bulma / no theme.\n *\n * Keep this in sync with `packages/core/src/utils/object.ts` if the\n * semantics ever change.\n */\nexport function isObject(input: unknown): input is Record<string, unknown> {\n return typeof input === 'object' &&\n input !== null &&\n !Array.isArray(input);\n}\n","import type { ThemeRuntimeEntry } from '../theme-runtime/types';\n\n/**\n * Concatenate every installed theme's `palette.handle` output into a\n * single CSS string. SSR plugins emit the result as the\n * `<style id=\"vc-color-palette\">` block so palette-aware themes flow\n * on first paint.\n *\n * Mirrors the client-side concat semantics in `useColorPalette()`:\n * non-overlapping rules from different themes coexist; CSS cascade\n * resolves any incidental overlap with later-rule-wins.\n *\n * Errors thrown by a theme's handler are caught + logged so one\n * broken theme can't crash SSR; other themes still emit.\n */\nexport function renderColorPaletteFromThemes(\n themes: readonly ThemeRuntimeEntry[],\n palette: Record<string, string>,\n): string {\n const parts: string[] = [];\n for (const theme of themes) {\n if (!theme.palette?.handle) {\n continue;\n }\n\n // Preserve `this` so themes whose handle method reads from\n // `theme.palette` state (e.g. caches a renderer instance) keep\n // working when the function is extracted before call.\n const handle = theme.palette.handle.bind(theme.palette);\n\n // Apply per-theme scale aliasing (plan 026). Themes whose\n // internal scale names diverge from the canonical six declare\n // a rename map; the dispatcher rewrites input keys so the\n // theme's renderer sees its own naming while the public-facing\n // palette config stays canonical.\n const input = applyScaleAliases(palette, theme.palette.scaleAliases);\n\n try {\n const out = handle(input);\n if (out) {\n parts.push(out);\n }\n } catch (e) {\n if (typeof console !== 'undefined') {\n // eslint-disable-next-line no-console\n console.warn('[vuecs] theme palette.handle failed; skipping:', e);\n }\n }\n }\n return parts.join('\\n');\n}\n\nconst FORBIDDEN_KEYS = new Set(['__proto__', 'constructor', 'prototype']);\n\nfunction applyScaleAliases(\n palette: Record<string, string>,\n aliases: Record<string, string> | undefined,\n): Record<string, string> {\n if (!aliases) {\n return palette;\n }\n // Use a prototype-free object + explicit deny-list so a theme-provided\n // `scaleAliases` mapping a canonical key to `__proto__` (or any other\n // prototype-touching name) can't reach Object.prototype. Defense in\n // depth: the upstream sanitize already filters input palette keys to\n // SEMANTIC_SCALES, but `aliases` itself is theme-provided and unsanitized.\n const out: Record<string, string> = Object.create(null);\n for (const [k, v] of Object.entries(palette)) {\n const target = aliases[k] ?? k;\n if (FORBIDDEN_KEYS.has(target)) continue;\n out[target] = v;\n }\n return out;\n}\n","import { createSharedComposable, useStorage } from '@vueuse/core';\nimport type { ComputedRef, Ref } from 'vue';\nimport { computed, ref, watchEffect } from 'vue';\nimport { isObject } from '../../utils/object';\nimport { useThemeRuntimeManager } from '../theme-runtime/composable';\nimport { applyColorPaletteCss } from './apply';\nimport { COLOR_PALETTES, SEMANTIC_SCALES } from './catalog';\nimport { renderColorPaletteFromThemes } from './render';\nimport type { UseColorPaletteOptions, UseColorPaletteReturn } from './types';\n\nconst DEFAULT_STORAGE_KEY = 'vc-color-palette';\n\nconst SEMANTIC_SCALE_SET = new Set<string>(SEMANTIC_SCALES);\nconst PALETTE_NAME_SET = new Set<string>(COLOR_PALETTES);\n\nfunction defaultSanitize<T>(value: unknown): T {\n /*\n * Defensive default: reject primitives + arrays, then filter to the\n * canonical catalog (six semantic scales × 22 palette names). Cookies\n * and localStorage can hold anything (older library version,\n * hand-edited DevTools value, payload written under the same key by\n * a different theme). Dropping unknown keys prevents broken CSS\n * downstream — the renderers each defend their inputs as a second\n * line of defense, but applying the filter at the dispatcher means\n * theme `palette.handle` hooks never see junk on the happy path.\n *\n * Themes whose palette config widens past the canonical catalog\n * (`ExtraColorPaletteNames` or a divergent scale set via\n * `scaleAliases`) pass their own `sanitize` to override.\n */\n if (!isObject(value)) {\n return {} as T;\n }\n\n const out: Record<string, string> = {};\n for (const [k, v] of Object.entries(value as Record<string, unknown>)) {\n if (\n SEMANTIC_SCALE_SET.has(k) &&\n typeof v === 'string' &&\n PALETTE_NAME_SET.has(v)\n ) {\n out[k] = v;\n }\n }\n return out as T;\n}\n\nconst shallowMerge = <T extends Record<string, unknown>>(current: T, partial: Partial<T>): T => ({\n ...current,\n ...partial,\n} as T);\n\n/**\n * Theme-aware reactive palette state — un-shared variant.\n *\n * Concatenates every installed theme's `palette.handle` output into the\n * `<style id=\"vc-color-palette\">` element. Walking the installed themes\n * each render means runtime theme swaps via `setThemes()` automatically\n * pick up the new renderer chain.\n *\n * Concat (rather than last-wins) is the doctrinal semantic: when an app\n * stacks multiple palette-aware themes (the docs-site case where\n * Tailwind components and Bulma components share the same picker UI),\n * each theme's renderer emits its own non-overlapping CSS rules —\n * Tailwind rebinds `--vc-color-*`, Bulma writes per-variant HSL channel\n * vars. The CSS cascade resolves any incidental overlap with\n * later-rule-wins semantics, so concat behaves like last-wins for\n * overlapping properties AND emits both themes' unique properties.\n *\n * Production callers should use `useColorPalette` (the shared variant\n * below). This un-shared form is exposed primarily for testing — every\n * call creates a fresh `watchEffect` and palette state.\n */\nexport function useColorPaletteUnshared<\n T extends Record<string, unknown> = Record<string, string>,\n>(options: UseColorPaletteOptions<T> = {}): UseColorPaletteReturn<T> {\n const {\n initial = {} as T,\n source,\n persist = true,\n storageKey = DEFAULT_STORAGE_KEY,\n sanitize = defaultSanitize<T>,\n extend = shallowMerge,\n nonce,\n } = options;\n\n const resolveNonce: () => string | undefined = typeof nonce === 'function' ?\n nonce :\n () => nonce;\n\n const manager = useThemeRuntimeManager();\n\n /*\n * `source` lets external persistence layers (Nuxt's `useCookie`,\n * custom IndexedDB-backed refs, etc.) replace the default storage\n * without forking the dispatch logic. When provided, `persist` /\n * `storageKey` / `initial` are ignored — the caller is responsible\n * for the initial value and any persistence semantics.\n */\n const storage: Ref<T> = source ??\n (persist ?\n useStorage<T>(storageKey, sanitize(initial), undefined, {\n serializer: {\n read: (raw): T => {\n try {\n return sanitize(JSON.parse(raw));\n } catch {\n return sanitize({});\n }\n },\n write: (value) => JSON.stringify(value),\n },\n }) :\n ref<T>(sanitize(initial)) as Ref<T>);\n\n const renderConcatenated = (palette: T): string => {\n const themes = manager?.themes;\n if (!themes || themes.length === 0) {\n return '';\n }\n\n /*\n * Sanitize at the render boundary so the `source`-provided path\n * (Nuxt cookie, custom IndexedDB, etc.) gets the same defensive\n * filter as the default `useStorage` path (which sanitizes at\n * `serializer.read` time). Theme `palette.handle` hooks should\n * never see primitives, arrays, or other malformed payloads —\n * downstream theme renderers each filter their own input, but\n * applying `sanitize` here keeps the per-theme filter as a\n * second line of defense rather than the only one.\n */\n const sanitized = sanitize(palette);\n return renderColorPaletteFromThemes(themes, sanitized as Record<string, string>);\n };\n\n if (typeof document !== 'undefined') {\n /*\n * Reactive on both storage AND theme swaps: reading\n * `manager.themes` (a shallowRef-backed getter) inside the\n * effect subscribes to `setThemes()`. Reading `storage.value`\n * subscribes to palette changes. Either trigger re-renders the\n * `<style>` block.\n */\n watchEffect(() => {\n applyColorPaletteCss(renderConcatenated(storage.value), undefined, resolveNonce());\n });\n }\n\n return {\n current: computed(() => storage.value) as ComputedRef<T>,\n set(palette) {\n storage.value = palette;\n },\n extend(partial) {\n storage.value = extend(storage.value, partial);\n },\n };\n}\n\n/**\n * Theme-aware reactive palette state with localStorage persistence\n * (plan 021 slice 2).\n *\n * Wrapped with `createSharedComposable` so every call site shares the\n * same ref + watcher. For SSR-aware cookie-backed storage (Nuxt), the\n * matching Nuxt module ships its own composable that calls\n * `bindColorPalette()` directly with a cookie-backed ref.\n */\nexport const useColorPalette = createSharedComposable(useColorPaletteUnshared);\n","import type { ThemeRuntimeEntry } from './types';\n\n/*\n * SSR capture utilities (plan 021 slice 3).\n *\n * On the client, `bindColorMode` and `useColorPalette` walk installed\n * themes and dispatch through their hooks against the live `document`.\n * On the server there is no `document` — but Nuxt SSR plugins still\n * need to flow the same theme-specific markers (`data-bs-theme` /\n * `data-theme` for color mode, `<style id=\"vc-color-palette\">` for\n * palette) into the rendered head before first paint.\n *\n * The pattern: run themes' `colorMode.handle` against a synthetic\n * Document-like object that captures attribute mutations into a plain\n * record. The Nuxt plugin then plumbs the captured record into\n * `useHead({ htmlAttrs })`.\n *\n * Themes that need DOM operations beyond `setAttribute` /\n * `removeAttribute` / `classList` (e.g. inserting child nodes) are not\n * SSR-friendly via this helper; their CSR-only logic should guard with\n * `if (typeof window === 'undefined') return;`.\n */\n\n/**\n * Build a synthetic Document-like whose `documentElement` records\n * `setAttribute` / `removeAttribute` calls into the supplied target\n * record, plus a no-op `classList`. **No other Document or Element\n * APIs are stubbed** — themes that call `doc.createElement`,\n * `doc.head.appendChild`, etc. WILL throw at SSR runtime. Themes\n * needing richer DOM access from `colorMode.handle` should guard their\n * CSR-only logic with `if (typeof window === 'undefined') return;`\n * and split the SSR-flowing bits into declarative `setAttribute` calls.\n *\n * Exposed for advanced consumers; the higher-level\n * `captureColorModeAttrs()` covers the common case and catches errors\n * per theme so a single broken theme can't crash SSR.\n */\nexport function createCaptureDocument(target: Record<string, string>): Document {\n const noopClassList = {\n add() {},\n remove() {},\n toggle(): boolean {\n return false;\n },\n contains(): boolean {\n return false;\n },\n replace() {},\n };\n\n const documentElement = {\n setAttribute(name: string, value: string): void {\n target[name] = value;\n },\n removeAttribute(name: string): void {\n delete target[name];\n },\n classList: noopClassList,\n };\n\n return { documentElement } as unknown as Document;\n}\n\n/**\n * Walk every installed theme's `colorMode.handle` against a synthetic\n * Document and capture the resulting attribute mutations. SSR plugins\n * use this to flow `data-bs-theme` / `data-theme` (or any other\n * attribute a theme declares) into `useHead({ htmlAttrs })` before\n * first paint.\n *\n * Each theme's handler runs in install order. If multiple themes set\n * the same attribute, the last one wins — same semantic as the live\n * `document.documentElement.setAttribute` chain on the client.\n *\n * Errors thrown by a theme's handler are caught + logged as a warning\n * so one malformed theme can't crash SSR; other themes still run.\n */\nexport function captureColorModeAttrs(\n themes: readonly ThemeRuntimeEntry[],\n mode: 'light' | 'dark',\n): Record<string, string> {\n /*\n * Use a prototype-free record: attribute names come from theme\n * code (potentially third-party), and a key like `__proto__` could\n * theoretically poison the result if it later gets merged into\n * another object via `Object.assign` (which uses `[[Set]]` and\n * triggers the prototype setter). `Object.create(null)` avoids the\n * concern entirely without any functional downside.\n */\n const attrs: Record<string, string> = Object.create(null) as Record<string, string>;\n const fakeDoc = createCaptureDocument(attrs);\n\n for (const theme of themes) {\n if (!theme.colorMode?.handle) {\n continue;\n }\n\n const handle = theme.colorMode?.handle.bind(theme.colorMode);\n\n try {\n handle(fakeDoc, mode);\n } catch (e) {\n if (typeof console !== 'undefined') {\n // eslint-disable-next-line no-console\n console.warn('[vuecs] theme colorMode.handle failed; skipping:', e);\n }\n }\n }\n\n return attrs;\n}\n"],"mappings":"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"}

package/dist/utils/object.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export declare function isObject(input: unknown): input is Record<string, unknown>;
2	+ //# sourceMappingURL=object.d.ts.map

package/dist/utils/object.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"object.d.ts","sourceRoot":"","sources":["../../src/utils/object.ts"],"names":[],"mappings":"AAQA,wBAAgB,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAIzE"}

package/package.json ADDED Viewed

@@ -0,0 +1,83 @@
+{
+    "name": "@vuecs/design",
+    "version": "1.0.0",
+    "type": "module",
+    "description": "Design tokens (CSS variables) and runtime palette switcher for vuecs components.",
+    "exports": {
+        "./package.json": "./package.json",
+        ".": {
+            "types": "./dist/index.d.ts",
+            "style": "./assets/index.css",
+            "import": "./dist/index.mjs"
+        },
+        "./index.css": "./assets/index.css",
+        "./assets/index.css": "./assets/index.css",
+        "./animations.css": "./assets/animations.css",
+        "./assets/animations.css": "./assets/animations.css",
+        "./palettes.css": "./assets/palettes.css",
+        "./assets/palettes.css": "./assets/palettes.css",
+        "./standalone": {
+            "style": "./assets/standalone.css",
+            "default": "./assets/standalone.css"
+        },
+        "./standalone.css": "./assets/standalone.css",
+        "./assets/standalone.css": "./assets/standalone.css"
+    },
+    "style": "./assets/index.css",
+    "files": [
+        "dist",
+        "assets"
+    ],
+    "keywords": [
+        "vuecs",
+        "design",
+        "design-system",
+        "design-tokens",
+        "css-variables",
+        "theme",
+        "tailwind",
+        "palette"
+    ],
+    "author": {
+        "name": "Peter Placzek",
+        "email": "contact@tada5hi.net",
+        "url": "https://tada5hi.net"
+    },
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/tada5hi/vuecs.git",
+        "directory": "packages/design"
+    },
+    "sideEffects": [
+        "./assets/*.css",
+        "./dist/*.css"
+    ],
+    "scripts": {
+        "build:js": "tsdown",
+        "build:types": "tsc --emitDeclarationOnly -p tsconfig.build.json",
+        "build": "rimraf dist && npm run build:js && npm run build:types",
+        "standalone:build": "tsx scripts/build-standalone.ts",
+        "standalone:check": "tsx scripts/build-standalone.ts --check",
+        "test": "vitest --config test/vitest.config.ts --run",
+        "test:coverage": "vitest --config test/vitest.config.ts --run --coverage"
+    },
+    "devDependencies": {
+        "@vuecs/core": "^3.0.0",
+        "@vueuse/core": "^14.3.0",
+        "jsdom": "^29.1.1",
+        "tailwindcss": "^4.0.0",
+        "tsx": "^4.22.0",
+        "vue": "^3.5.34"
+    },
+    "peerDependencies": {
+        "@vueuse/core": "^13.0.0 || ^14.0.0",
+        "vue": "^3.x"
+    },
+    "engines": {
+        "node": ">=22.0.0"
+    },
+    "publishConfig": {
+        "access": "public"
+    }
+}