vunor 0.1.2 → 0.1.4

package/dist/DevTools.mjs

@@ -1,16 +1,13 @@
-import "./utils-Z0nPSAzb.js";
-import { Fragment, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, normalizeClass, normalizeStyle, onMounted, openBlock, reactive, ref, renderList, unref, useModel, vModelText, withCtx, withDirectives, withModifiers } from "vue";
+import { Fragment, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, normalizeClass, normalizeStyle, onMounted, openBlock, reactive, ref, renderList, toDisplayString, unref, useModel, vModelText, watch, withCtx, withDirectives, withModifiers } from "vue";
 import VuButton$1 from "vunor/Button";
 import VuCard$1 from "vunor/Card";
-import "vunor/InputBase";
-import VuInput$1 from "vunor/Input";
+import VuCheckbox from "vunor/Checkbox";
 import VuCardHeader$1 from "vunor/CardHeader";
 import VuCardInner from "vunor/CardInner";
 import VuSlider from "vunor/Slider";
 import VuTabs from "vunor/Tabs";
 import { color, palitra } from "@prostojs/palitra";
 import defu from "defu";
-
 //#region src/theme/palitra.ts
 const defaultOpts = {
 	colors: {
@@ -62,6 +59,7 @@ const defaultOpts = {
 	lightest: .97,
 	darkest: .24,
 	layersDepth: .08,
+	flatness: 1,
 	mainPalette: {
 		preserveInputColor: false,
 		luminance: {
@@ -224,6 +222,7 @@ function generatePalette(_opts) {
 	const bgOptions = {
 		count: 5,
 		preserveInputColor: false,
+		flatness: opts.layerPalette.flatness ?? opts.flatness,
 		luminance: {
 			dark: opts.layerPalette.luminance?.dark ?? opts.darkest,
 			light: opts.layerPalette.luminance?.light ?? opts.darkest + opts.layersDepth,
@@ -247,8 +246,9 @@ function generatePalette(_opts) {
 		"light-3",
 		"light-4"
 	].toReversed();
+	const lumDark = bgOptions.luminance?.dark ?? opts.darkest;
 	bgOptions.luminance = {
-		dark: 1 - (bgOptions.luminance.light - bgOptions.luminance.dark),
+		dark: 1 - ((bgOptions.luminance?.light ?? opts.darkest + opts.layersDepth) - lumDark),
 		light: 1,
 		useMiddle: false
 	};
@@ -264,6 +264,7 @@ function generatePalette(_opts) {
 	}, {
 		count: 10,
 		preserveInputColor: opts.mainPalette.preserveInputColor,
+		flatness: opts.mainPalette.flatness ?? opts.flatness,
 		luminance: {
 			dark: opts.mainPalette.luminance?.dark ?? opts.darkest + opts.layersDepth + .02,
 			light: opts.mainPalette.luminance?.light ?? opts.lightest,
@@ -294,12 +295,32 @@ function multiplySaturation(colors, m = .5) {
 	}
 	return newObj;
 }
-
 //#endregion
 //#region src/components/DevTools/DevTools.vue?vue&type=script&setup=true&lang.ts
 const _hoisted_1 = { key: 0 };
-const _hoisted_2 = ["id", "onUpdate:modelValue"];
-var DevTools_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+const _hoisted_2 = { class: "flex items-center gap-$xs mb-$xs" };
+const _hoisted_3 = ["id", "onUpdate:modelValue"];
+const _hoisted_4 = ["onUpdate:modelValue"];
+const _hoisted_5 = { class: "w-6em truncate" };
+const _hoisted_6 = {
+	key: 0,
+	class: "pl-$m grid grid-cols-2 gap-$xs"
+};
+const _hoisted_7 = {
+	key: 1,
+	class: "grid grid-cols-2 gap-$xs"
+};
+const _hoisted_8 = {
+	key: 2,
+	class: "grid grid-cols-2 gap-$xs"
+};
+const _hoisted_9 = {
+	key: 3,
+	class: "grid grid-cols-1 gap-$xs"
+};
+//#endregion
+//#region src/components/DevTools/DevTools.vue
+var DevTools_default = /* @__PURE__ */ defineComponent({
 	__name: "DevTools",
 	props: /* @__PURE__ */ mergeModels({ defaultOpen: {
 		type: Boolean,
@@ -311,7 +332,7 @@ var DevTools_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 	emits: ["update:open"],
 	setup(__props) {
 		function colorToRgbWithOpacity(c) {
-			const [r, g, b, a] = color(c).rgba();
+			const [r, g, b] = color(c).rgba();
 			return `${r} ${g} ${b}`;
 		}
 		function debounce(func, wait) {
@@ -327,126 +348,217 @@ var DevTools_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		const modelValue = useModel(__props, "open");
 		modelValue.value = !!props.defaultOpen;
 		const colors = ref([]);
-		const mainPalette = ref({});
-		const layerPalette = ref({});
-		const misc = ref({
-			darkest: .24,
-			lightest: .97,
-			layersDepth: .08
-		});
-		const mainSlider = ref([
-			0,
-			0,
-			0
-		]);
+		const main = ref(null);
+		const layer = ref(null);
+		const misc = ref(null);
 		function cleanup() {
 			const s = document.head.querySelector("style#vunor-palette-sandbox");
 			if (s) s.remove();
 		}
-		const apply = debounce(() => {
-			cleanup();
+		function buildOpts() {
+			if (!main.value || !layer.value || !misc.value) return {};
+			const m = main.value;
+			const l = layer.value;
+			const x = misc.value;
 			const opts = {
-				darkest: mainSlider.value[0],
-				lightest: mainSlider.value[2],
-				mainPalette: { luminance: { middle: mainSlider.value[1] } },
+				darkest: x.darkest[0],
+				lightest: x.lightest[0],
+				layersDepth: x.layersDepth[0],
+				flatness: x.flatness[0],
+				mainPalette: {
+					preserveInputColor: m.preserveInputColor[0],
+					flatness: m.flatness[0],
+					luminance: {
+						dark: m.lumDark[0],
+						light: m.lumLight[0],
+						middle: m.lumMiddle[0],
+						useMiddle: m.useMiddle[0]
+					},
+					saturate: {
+						dark: m.saturateDark[0],
+						light: m.saturateLight[0]
+					},
+					vivid: {
+						dark: m.vividDark[0],
+						light: m.vividLight[0]
+					}
+				},
+				layerPalette: {
+					desaturate: l.desaturate[0],
+					flatness: l.flatness[0],
+					luminance: {
+						dark: l.lumDark[0],
+						light: l.lumLight[0]
+					},
+					saturate: {
+						dark: l.saturateDark[0],
+						light: l.saturateLight[0]
+					},
+					vivid: {
+						dark: l.vividDark[0],
+						light: l.vividLight[0]
+					}
+				},
 				colors: {}
 			};
-			for (const c of colors.value) opts.colors[c.name] = c;
-			const { colors: result } = generatePalette(opts);
+			for (const c of colors.value) opts.colors[c.name] = {
+				color: c.color,
+				preserveInputColor: c.preserveInputColor[0],
+				saturate: {
+					dark: c.saturateDark[0],
+					light: c.saturateLight[0]
+				},
+				vivid: {
+					dark: c.vividDark[0],
+					light: c.vividLight[0]
+				},
+				flatness: c.flatness[0]
+			};
+			return opts;
+		}
+		const SUFFIXES = [
+			"50",
+			"100",
+			"200",
+			"300",
+			"400",
+			"500",
+			"600",
+			"700",
+			"800",
+			"900"
+		];
+		const LD = [
+			"light-0",
+			"light-1",
+			"light-2",
+			"light-3",
+			"light-4",
+			"dark-0",
+			"dark-1",
+			"dark-2",
+			"dark-3",
+			"dark-4"
+		];
+		const COLOR_NAMES = [
+			"primary",
+			"secondary",
+			"grey",
+			"neutral",
+			"good",
+			"warn",
+			"error"
+		];
+		const apply = debounce(() => {
+			cleanup();
+			const { colors: result } = generatePalette(buildOpts());
 			const newS = document.createElement("style");
 			newS.id = "vunor-palette-sandbox";
-			const suffixes = [
-				"50",
-				"100",
-				"200",
-				"300",
-				"400",
-				"500",
-				"600",
-				"700",
-				"800",
-				"900"
-			];
-			const ld = [
-				"light-0",
-				"light-1",
-				"light-2",
-				"light-3",
-				"light-4",
-				"dark-0",
-				"dark-1",
-				"dark-2",
-				"dark-3",
-				"dark-4"
-			];
-			for (const c of [
-				"primary",
-				"secondary",
-				"grey",
-				"neutral",
-				"good",
-				"warn",
-				"error"
-			]) {
-				newS.textContent += `.scope-${c} {\n`;
+			for (const c of COLOR_NAMES) {
 				const col = result[c];
-				for (const s of suffixes) newS.textContent += `--scope-color-${s}: ${colorToRgbWithOpacity(result[`${c}-${s}`]) || ""};\n`;
+				if (!col) continue;
+				newS.textContent += `.scope-${c} {\n`;
+				for (const s of SUFFIXES) {
+					const v = result[`${c}-${s}`];
+					newS.textContent += `--scope-color-${s}: ${v ? colorToRgbWithOpacity(v) : ""};\n`;
+				}
 				newS.textContent += `--scope-color: ${colorToRgbWithOpacity(col)};\n`;
-				newS.textContent += `--current-hl: ${colorToRgbWithOpacity(result[`${c}-500`]) || ""};\n`;
-				for (const s of ld) newS.textContent += `--scope-${s}: ${colorToRgbWithOpacity(result[`${c}-${s}`]) || ""};\n`;
+				const v500 = result[`${c}-500`];
+				newS.textContent += `--current-hl: ${v500 ? colorToRgbWithOpacity(v500) : ""};\n`;
+				for (const s of LD) {
+					const v = result[`${c}-${s}`];
+					newS.textContent += `--scope-${s}: ${v ? colorToRgbWithOpacity(v) : ""};\n`;
+				}
 				newS.textContent += "}\n";
-				for (const s of suffixes) {
-					newS.textContent += `.text-${c}-${s}{color:rgb(${colorToRgbWithOpacity(result[`${c}-${s}`])} / var(--un-text-opacity))}\n`;
-					newS.textContent += `.bg-${c}-${s}{background-color:rgb(${colorToRgbWithOpacity(result[`${c}-${s}`])} / var(--un-bg-opacity))}\n`;
-					newS.textContent += `.current-outline-${c}-${s}{--current-outline:${colorToRgbWithOpacity(result[`${c}-${s}`])};}\n`;
-					newS.textContent += `.current-text-${c}-${s}{--current-text:${colorToRgbWithOpacity(result[`${c}-${s}`])};}\n`;
-					newS.textContent += `.current-bg-${c}-${s}{--current-bg:${colorToRgbWithOpacity(result[`${c}-${s}`])};}\n`;
-					newS.textContent += `.current-border-${c}-${s}{--current-border:${colorToRgbWithOpacity(result[`${c}-${s}`])};}\n`;
-					newS.textContent += `.current-icon-${c}-${s}{--current-icon:${colorToRgbWithOpacity(result[`${c}-${s}`])};}\n`;
+				for (const s of SUFFIXES) {
+					const v = result[`${c}-${s}`];
+					if (!v) continue;
+					const rgb = colorToRgbWithOpacity(v);
+					newS.textContent += `.text-${c}-${s}{color:rgb(${rgb} / var(--un-text-opacity))}\n`;
+					newS.textContent += `.bg-${c}-${s}{background-color:rgb(${rgb} / var(--un-bg-opacity))}\n`;
+					newS.textContent += `.current-outline-${c}-${s}{--current-outline:${rgb};}\n`;
+					newS.textContent += `.current-text-${c}-${s}{--current-text:${rgb};}\n`;
+					newS.textContent += `.current-bg-${c}-${s}{--current-bg:${rgb};}\n`;
+					newS.textContent += `.current-border-${c}-${s}{--current-border:${rgb};}\n`;
+					newS.textContent += `.current-icon-${c}-${s}{--current-icon:${rgb};}\n`;
 				}
 			}
 			document.head.append(newS);
 		}, 100);
+		function buildMisc(p) {
+			return {
+				darkest: [p.darkest],
+				lightest: [p.lightest],
+				layersDepth: [p.layersDepth],
+				flatness: [p.flatness ?? 1]
+			};
+		}
+		function buildMain(p) {
+			const m = p.mainPalette;
+			return {
+				preserveInputColor: [m.preserveInputColor ?? false],
+				flatness: [m.flatness ?? p.flatness ?? 1],
+				lumDark: [m.luminance?.dark ?? p.darkest + p.layersDepth + .02],
+				lumLight: [m.luminance?.light ?? p.lightest],
+				lumMiddle: [m.luminance?.middle ?? .62],
+				useMiddle: [m.luminance?.useMiddle ?? true],
+				saturateDark: [m.saturate?.dark ?? -.25],
+				saturateLight: [m.saturate?.light ?? -.25],
+				vividDark: [m.vivid?.dark ?? .1],
+				vividLight: [m.vivid?.light ?? .2]
+			};
+		}
+		function buildLayer(p) {
+			const l = p.layerPalette;
+			return {
+				desaturate: [l.desaturate ?? .2],
+				flatness: [l.flatness ?? p.flatness ?? 1],
+				lumDark: [l.luminance?.dark ?? p.darkest],
+				lumLight: [l.luminance?.light ?? p.darkest + p.layersDepth],
+				saturateDark: [l.saturate?.dark ?? -.2],
+				saturateLight: [l.saturate?.light ?? -.2],
+				vividDark: [l.vivid?.dark ?? 0],
+				vividLight: [l.vivid?.light ?? 0]
+			};
+		}
+		function buildColor(name, val, p) {
+			const m = p.mainPalette;
+			return {
+				name,
+				color: val.color ?? "#000000",
+				preserveInputColor: [val.preserveInputColor ?? m.preserveInputColor ?? false],
+				saturateDark: [val.saturate?.dark ?? m.saturate?.dark ?? -.25],
+				saturateLight: [val.saturate?.light ?? m.saturate?.light ?? -.25],
+				vividDark: [val.vivid?.dark ?? m.vivid?.dark ?? .1],
+				vividLight: [val.vivid?.light ?? m.vivid?.light ?? .2],
+				flatness: [val.flatness ?? m.flatness ?? p.flatness ?? 1]
+			};
+		}
 		function reset() {
-			if (document?.head) {
-				cleanup();
-				const s = document.head.querySelector("style[data-vite-dev-id=\"\\/__uno.css\"]").textContent;
-				if (s) {
-					const base64 = /__vunor_palette_options\s\{background-image:\surl\("data:image\/gif;base64,([^"]+)/.exec(s)?.[1];
-					if (base64) {
-						const paletteOpts = JSON.parse(atob(base64));
-						colors.value = [];
-						mainPalette.value = { ...paletteOpts.mainPalette };
-						layerPalette.value = { ...paletteOpts.layerPalette };
-						misc.value = {
-							darkest: paletteOpts.darkest,
-							lightest: paletteOpts.lightest,
-							layersDepth: paletteOpts.layersDepth
-						};
-						mainSlider.value = [
-							misc.value.darkest,
-							mainPalette.value.luminance.middle,
-							misc.value.lightest
-						];
-						for (const [name, val] of Object.entries(paletteOpts.colors)) colors.value.push({
-							color: val.color,
-							preserveInputColor: val.preserveInputColor === paletteOpts.mainPalette.preserveInputColor ? val.preserveInputColor : void 0,
-							saturate: {
-								dark: val.saturate?.dark === paletteOpts.mainPalette.saturate?.dark ? val.saturate?.dark : void 0,
-								light: val.saturate?.light === paletteOpts.mainPalette.saturate?.light ? val.saturate?.light : void 0
-							},
-							vivid: {
-								dark: val.vivid?.dark === paletteOpts.mainPalette.vivid?.dark ? val.vivid?.dark : void 0,
-								light: val.vivid?.light === paletteOpts.mainPalette.vivid?.light ? val.vivid?.light : void 0
-							},
-							name
-						});
-					}
-				}
-			}
+			if (!document?.head) return;
+			cleanup();
+			const s = document.head.querySelector("style[data-vite-dev-id=\"\\/__uno.css\"]")?.textContent;
+			if (!s) return;
+			const base64 = /__vunor_palette_options\s\{background-image:\surl\("data:image\/gif;base64,([^"]+)/.exec(s)?.[1];
+			if (!base64) return;
+			const paletteOpts = JSON.parse(atob(base64));
+			misc.value = buildMisc(paletteOpts);
+			main.value = buildMain(paletteOpts);
+			layer.value = buildLayer(paletteOpts);
+			colors.value = Object.entries(paletteOpts.colors).map(([name, val]) => buildColor(name, val, paletteOpts));
 		}
 		onMounted(reset);
+		watch(misc, (m) => {
+			if (!m || !main.value || !layer.value) return;
+			main.value.lumDark = [m.darkest[0] + m.layersDepth[0] + .02];
+			main.value.lumLight = [m.lightest[0]];
+			main.value.flatness = [m.flatness[0]];
+			layer.value.lumDark = [m.darkest[0]];
+			layer.value.lumLight = [m.darkest[0] + m.layersDepth[0]];
+			layer.value.flatness = [m.flatness[0]];
+		}, { deep: true });
 		const tab = ref("colors");
+		const expandedColor = ref(null);
 		const down = ref(false);
 		const offset = reactive({
 			x: 12,
@@ -482,12 +594,15 @@ var DevTools_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 			offset.x = prevPos.x + event.screenX - grabbedAt.x;
 			offset.y = prevPos.y + event.screenY - grabbedAt.y;
 		}
+		function fmt(v) {
+			return v === void 0 ? "" : Number(v).toFixed(2);
+		}
 		return (_ctx, _cache) => {
 			return colors.value?.length > 0 ? (openBlock(), createElementBlock("div", {
 				key: 0,
 				style: normalizeStyle({ transform: `translate(${offset.x}px, ${offset.y}px)` }),
 				class: normalizeClass(["fingertip-[2em] fixed left-0 top-0 max-w-screen max-h-screen text-11px", {
-					"w-[30em] h-[40em]": modelValue.value,
+					"w-[34em] h-[44em]": modelValue.value,
 					"w-[3em] h-[3em]": !modelValue.value
 				}])
 			}, [
@@ -495,7 +610,7 @@ var DevTools_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 					"no-padding": "",
 					rounded: "",
 					level: "h6",
-					class: normalizeClass(["layer-0 transition-all-200 w-[30em] h-[40em] border border-grey-500/50 overflow-clip flex flex-col transform-origin-tl", {
+					class: normalizeClass(["layer-0 transition-all-200 w-[34em] h-[44em] border border-grey-500/50 overflow-clip flex flex-col transform-origin-tl", {
 						"scale-100 shadow-md opacity-50 hover:opacity-100": modelValue.value,
 						"scale-20 opacity-0 pointer-events-none": !modelValue.value
 					}])
@@ -509,7 +624,7 @@ var DevTools_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 							}, "layer-2 flex justify-between items-center fingertip-[1em] select-none"])
 						}, {
 							default: withCtx(() => [createVNode(unref(VuCardHeader$1), { class: "text-mb-0 text-mt-0" }, {
-								default: withCtx(() => [..._cache[5] || (_cache[5] = [createTextVNode("Vunor Palette Sandbox", -1)])]),
+								default: withCtx(() => [..._cache[27] || (_cache[27] = [createTextVNode("Vunor Palette Sandbox", -1)])]),
 								_: 1
 							}), createVNode(unref(VuButton$1), {
 								icon: "i--clear",
@@ -527,15 +642,19 @@ var DevTools_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 								tabs: [
 									{
 										value: "colors",
-										label: "Colors "
+										label: "Colors"
 									},
 									{
 										value: "main",
-										label: "Main Palette"
+										label: "Main"
 									},
 									{
 										value: "layers",
-										label: "Layers Palette"
+										label: "Layers"
+									},
+									{
+										value: "misc",
+										label: "Misc"
 									}
 								]
 							}, null, 8, ["modelValue"])]),
@@ -543,38 +662,357 @@ var DevTools_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 						}),
 						createVNode(unref(VuCardInner), { class: "layer-0 flex-grow overflow-auto pt-$l" }, {
 							default: withCtx(() => [
-								_cache[6] || (_cache[6] = createElementVNode("div", { class: "text-primary-700" }, "Test", -1)),
-								createCommentVNode(" colors "),
-								tab.value === "colors" ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(VuSlider, {
-									label: "Darkest | Middle | Brightest",
-									min: 0,
-									max: 1,
-									step: .01,
-									thumbs: 3,
-									modelValue: mainSlider.value,
-									"onUpdate:modelValue": [_cache[3] || (_cache[3] = ($event) => mainSlider.value = $event), unref(apply)],
-									class: "mb-$l"
-								}, null, 8, ["modelValue", "onUpdate:modelValue"]), (openBlock(true), createElementBlock(Fragment, null, renderList(colors.value, (c) => {
+								createCommentVNode(" COLORS TAB "),
+								tab.value === "colors" ? (openBlock(), createElementBlock("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(colors.value, (c) => {
 									return openBlock(), createElementBlock("div", {
 										key: c.name,
-										class: "flex items-center gap-$xs"
-									}, [createVNode(unref(VuInput$1), {
-										modelValue: c.color,
-										"onUpdate:modelValue": [($event) => c.color = $event, unref(apply)],
-										"stack-label": "",
-										design: "filled",
-										class: "w-12em"
-									}, {
-										before: withCtx(() => [withDirectives(createElementVNode("input", {
+										class: "border-b border-grey-500/30 pb-$xs mb-$xs"
+									}, [createElementVNode("div", _hoisted_2, [
+										withDirectives(createElementVNode("input", {
 											type: "color",
 											id: `vunor-color-${c.name}`,
 											"onUpdate:modelValue": ($event) => c.color = $event,
-											class: "p-0 size-[2em] bg-transparent",
-											onInput: _cache[4] || (_cache[4] = (...args) => unref(apply) && unref(apply)(...args))
-										}, null, 40, _hoisted_2), [[vModelText, c.color]])]),
-										_: 2
-									}, 1032, ["modelValue", "onUpdate:modelValue"])]);
-								}), 128))])) : createCommentVNode("v-if", true)
+											class: "p-0 size-[2em] bg-transparent border-0",
+											onInput: _cache[3] || (_cache[3] = (...args) => unref(apply) && unref(apply)(...args))
+										}, null, 40, _hoisted_3), [[vModelText, c.color]]),
+										withDirectives(createElementVNode("input", {
+											"onUpdate:modelValue": ($event) => c.color = $event,
+											onInput: _cache[4] || (_cache[4] = (...args) => unref(apply) && unref(apply)(...args)),
+											class: "flex-grow bg-transparent border border-grey-500/30 px-$xs py-1 rounded text-mono"
+										}, null, 40, _hoisted_4), [[vModelText, c.color]]),
+										createElementVNode("strong", _hoisted_5, toDisplayString(c.name), 1),
+										createVNode(unref(VuButton$1), {
+											icon: expandedColor.value === c.name ? "i--chevron-up" : "i--chevron-down",
+											class: "c8-flat btn-square rounded",
+											onClick: ($event) => expandedColor.value = expandedColor.value === c.name ? null : c.name
+										}, null, 8, ["icon", "onClick"])
+									]), expandedColor.value === c.name ? (openBlock(), createElementBlock("div", _hoisted_6, [
+										createVNode(VuSlider, {
+											label: `saturate.dark ${fmt(c.saturateDark[0])}`,
+											min: -1,
+											max: 1,
+											step: .05,
+											modelValue: c.saturateDark,
+											"onUpdate:modelValue": [($event) => c.saturateDark = $event, unref(apply)]
+										}, null, 8, [
+											"label",
+											"modelValue",
+											"onUpdate:modelValue"
+										]),
+										createVNode(VuSlider, {
+											label: `saturate.light ${fmt(c.saturateLight[0])}`,
+											min: -1,
+											max: 1,
+											step: .05,
+											modelValue: c.saturateLight,
+											"onUpdate:modelValue": [($event) => c.saturateLight = $event, unref(apply)]
+										}, null, 8, [
+											"label",
+											"modelValue",
+											"onUpdate:modelValue"
+										]),
+										createVNode(VuSlider, {
+											label: `vivid.dark ${fmt(c.vividDark[0])}`,
+											min: 0,
+											max: 1,
+											step: .05,
+											modelValue: c.vividDark,
+											"onUpdate:modelValue": [($event) => c.vividDark = $event, unref(apply)]
+										}, null, 8, [
+											"label",
+											"modelValue",
+											"onUpdate:modelValue"
+										]),
+										createVNode(VuSlider, {
+											label: `vivid.light ${fmt(c.vividLight[0])}`,
+											min: 0,
+											max: 1,
+											step: .05,
+											modelValue: c.vividLight,
+											"onUpdate:modelValue": [($event) => c.vividLight = $event, unref(apply)]
+										}, null, 8, [
+											"label",
+											"modelValue",
+											"onUpdate:modelValue"
+										]),
+										createVNode(VuSlider, {
+											label: `flatness ${fmt(c.flatness[0])}`,
+											min: 0,
+											max: 1,
+											step: .01,
+											modelValue: c.flatness,
+											"onUpdate:modelValue": [($event) => c.flatness = $event, unref(apply)]
+										}, null, 8, [
+											"label",
+											"modelValue",
+											"onUpdate:modelValue"
+										]),
+										createVNode(VuCheckbox, {
+											modelValue: c.preserveInputColor[0],
+											"onUpdate:modelValue": [($event) => c.preserveInputColor[0] = $event, unref(apply)],
+											label: "preserveInputColor"
+										}, null, 8, ["modelValue", "onUpdate:modelValue"])
+									])) : createCommentVNode("v-if", true)]);
+								}), 128))])) : createCommentVNode("v-if", true),
+								createCommentVNode(" MAIN PALETTE TAB "),
+								tab.value === "main" && main.value ? (openBlock(), createElementBlock("div", _hoisted_7, [
+									createVNode(VuSlider, {
+										label: `luminance.dark ${fmt(main.value.lumDark[0])}`,
+										min: 0,
+										max: 1,
+										step: .01,
+										modelValue: main.value.lumDark,
+										"onUpdate:modelValue": [_cache[5] || (_cache[5] = ($event) => main.value.lumDark = $event), unref(apply)]
+									}, null, 8, [
+										"label",
+										"modelValue",
+										"onUpdate:modelValue"
+									]),
+									createVNode(VuSlider, {
+										label: `luminance.light ${fmt(main.value.lumLight[0])}`,
+										min: 0,
+										max: 1,
+										step: .01,
+										modelValue: main.value.lumLight,
+										"onUpdate:modelValue": [_cache[6] || (_cache[6] = ($event) => main.value.lumLight = $event), unref(apply)]
+									}, null, 8, [
+										"label",
+										"modelValue",
+										"onUpdate:modelValue"
+									]),
+									createVNode(VuSlider, {
+										label: `luminance.middle ${fmt(main.value.lumMiddle[0])}`,
+										min: 0,
+										max: 1,
+										step: .01,
+										modelValue: main.value.lumMiddle,
+										"onUpdate:modelValue": [_cache[7] || (_cache[7] = ($event) => main.value.lumMiddle = $event), unref(apply)]
+									}, null, 8, [
+										"label",
+										"modelValue",
+										"onUpdate:modelValue"
+									]),
+									createVNode(VuCheckbox, {
+										modelValue: main.value.useMiddle[0],
+										"onUpdate:modelValue": [_cache[8] || (_cache[8] = ($event) => main.value.useMiddle[0] = $event), unref(apply)],
+										label: "luminance.useMiddle"
+									}, null, 8, ["modelValue", "onUpdate:modelValue"]),
+									createVNode(VuSlider, {
+										label: `saturate.dark ${fmt(main.value.saturateDark[0])}`,
+										min: -1,
+										max: 1,
+										step: .05,
+										modelValue: main.value.saturateDark,
+										"onUpdate:modelValue": [_cache[9] || (_cache[9] = ($event) => main.value.saturateDark = $event), unref(apply)]
+									}, null, 8, [
+										"label",
+										"modelValue",
+										"onUpdate:modelValue"
+									]),
+									createVNode(VuSlider, {
+										label: `saturate.light ${fmt(main.value.saturateLight[0])}`,
+										min: -1,
+										max: 1,
+										step: .05,
+										modelValue: main.value.saturateLight,
+										"onUpdate:modelValue": [_cache[10] || (_cache[10] = ($event) => main.value.saturateLight = $event), unref(apply)]
+									}, null, 8, [
+										"label",
+										"modelValue",
+										"onUpdate:modelValue"
+									]),
+									createVNode(VuSlider, {
+										label: `vivid.dark ${fmt(main.value.vividDark[0])}`,
+										min: 0,
+										max: 1,
+										step: .05,
+										modelValue: main.value.vividDark,
+										"onUpdate:modelValue": [_cache[11] || (_cache[11] = ($event) => main.value.vividDark = $event), unref(apply)]
+									}, null, 8, [
+										"label",
+										"modelValue",
+										"onUpdate:modelValue"
+									]),
+									createVNode(VuSlider, {
+										label: `vivid.light ${fmt(main.value.vividLight[0])}`,
+										min: 0,
+										max: 1,
+										step: .05,
+										modelValue: main.value.vividLight,
+										"onUpdate:modelValue": [_cache[12] || (_cache[12] = ($event) => main.value.vividLight = $event), unref(apply)]
+									}, null, 8, [
+										"label",
+										"modelValue",
+										"onUpdate:modelValue"
+									]),
+									createVNode(VuSlider, {
+										label: `flatness ${fmt(main.value.flatness[0])}`,
+										min: 0,
+										max: 1,
+										step: .01,
+										modelValue: main.value.flatness,
+										"onUpdate:modelValue": [_cache[13] || (_cache[13] = ($event) => main.value.flatness = $event), unref(apply)]
+									}, null, 8, [
+										"label",
+										"modelValue",
+										"onUpdate:modelValue"
+									]),
+									createVNode(VuCheckbox, {
+										modelValue: main.value.preserveInputColor[0],
+										"onUpdate:modelValue": [_cache[14] || (_cache[14] = ($event) => main.value.preserveInputColor[0] = $event), unref(apply)],
+										label: "preserveInputColor"
+									}, null, 8, ["modelValue", "onUpdate:modelValue"])
+								])) : createCommentVNode("v-if", true),
+								createCommentVNode(" LAYERS PALETTE TAB "),
+								tab.value === "layers" && layer.value ? (openBlock(), createElementBlock("div", _hoisted_8, [
+									createVNode(VuSlider, {
+										label: `desaturate ${fmt(layer.value.desaturate[0])}`,
+										min: 0,
+										max: 1,
+										step: .05,
+										modelValue: layer.value.desaturate,
+										"onUpdate:modelValue": [_cache[15] || (_cache[15] = ($event) => layer.value.desaturate = $event), unref(apply)]
+									}, null, 8, [
+										"label",
+										"modelValue",
+										"onUpdate:modelValue"
+									]),
+									createVNode(VuSlider, {
+										label: `flatness ${fmt(layer.value.flatness[0])}`,
+										min: 0,
+										max: 1,
+										step: .01,
+										modelValue: layer.value.flatness,
+										"onUpdate:modelValue": [_cache[16] || (_cache[16] = ($event) => layer.value.flatness = $event), unref(apply)]
+									}, null, 8, [
+										"label",
+										"modelValue",
+										"onUpdate:modelValue"
+									]),
+									createVNode(VuSlider, {
+										label: `luminance.dark ${fmt(layer.value.lumDark[0])}`,
+										min: 0,
+										max: 1,
+										step: .01,
+										modelValue: layer.value.lumDark,
+										"onUpdate:modelValue": [_cache[17] || (_cache[17] = ($event) => layer.value.lumDark = $event), unref(apply)]
+									}, null, 8, [
+										"label",
+										"modelValue",
+										"onUpdate:modelValue"
+									]),
+									createVNode(VuSlider, {
+										label: `luminance.light ${fmt(layer.value.lumLight[0])}`,
+										min: 0,
+										max: 1,
+										step: .01,
+										modelValue: layer.value.lumLight,
+										"onUpdate:modelValue": [_cache[18] || (_cache[18] = ($event) => layer.value.lumLight = $event), unref(apply)]
+									}, null, 8, [
+										"label",
+										"modelValue",
+										"onUpdate:modelValue"
+									]),
+									createVNode(VuSlider, {
+										label: `saturate.dark ${fmt(layer.value.saturateDark[0])}`,
+										min: -1,
+										max: 1,
+										step: .05,
+										modelValue: layer.value.saturateDark,
+										"onUpdate:modelValue": [_cache[19] || (_cache[19] = ($event) => layer.value.saturateDark = $event), unref(apply)]
+									}, null, 8, [
+										"label",
+										"modelValue",
+										"onUpdate:modelValue"
+									]),
+									createVNode(VuSlider, {
+										label: `saturate.light ${fmt(layer.value.saturateLight[0])}`,
+										min: -1,
+										max: 1,
+										step: .05,
+										modelValue: layer.value.saturateLight,
+										"onUpdate:modelValue": [_cache[20] || (_cache[20] = ($event) => layer.value.saturateLight = $event), unref(apply)]
+									}, null, 8, [
+										"label",
+										"modelValue",
+										"onUpdate:modelValue"
+									]),
+									createVNode(VuSlider, {
+										label: `vivid.dark ${fmt(layer.value.vividDark[0])}`,
+										min: 0,
+										max: 1,
+										step: .05,
+										modelValue: layer.value.vividDark,
+										"onUpdate:modelValue": [_cache[21] || (_cache[21] = ($event) => layer.value.vividDark = $event), unref(apply)]
+									}, null, 8, [
+										"label",
+										"modelValue",
+										"onUpdate:modelValue"
+									]),
+									createVNode(VuSlider, {
+										label: `vivid.light ${fmt(layer.value.vividLight[0])}`,
+										min: 0,
+										max: 1,
+										step: .05,
+										modelValue: layer.value.vividLight,
+										"onUpdate:modelValue": [_cache[22] || (_cache[22] = ($event) => layer.value.vividLight = $event), unref(apply)]
+									}, null, 8, [
+										"label",
+										"modelValue",
+										"onUpdate:modelValue"
+									])
+								])) : createCommentVNode("v-if", true),
+								createCommentVNode(" MISC TAB "),
+								tab.value === "misc" && misc.value ? (openBlock(), createElementBlock("div", _hoisted_9, [
+									createVNode(VuSlider, {
+										label: `darkest ${fmt(misc.value.darkest[0])}`,
+										min: 0,
+										max: 1,
+										step: .01,
+										modelValue: misc.value.darkest,
+										"onUpdate:modelValue": [_cache[23] || (_cache[23] = ($event) => misc.value.darkest = $event), unref(apply)]
+									}, null, 8, [
+										"label",
+										"modelValue",
+										"onUpdate:modelValue"
+									]),
+									createVNode(VuSlider, {
+										label: `lightest ${fmt(misc.value.lightest[0])}`,
+										min: 0,
+										max: 1,
+										step: .01,
+										modelValue: misc.value.lightest,
+										"onUpdate:modelValue": [_cache[24] || (_cache[24] = ($event) => misc.value.lightest = $event), unref(apply)]
+									}, null, 8, [
+										"label",
+										"modelValue",
+										"onUpdate:modelValue"
+									]),
+									createVNode(VuSlider, {
+										label: `layersDepth ${fmt(misc.value.layersDepth[0])}`,
+										min: 0,
+										max: .5,
+										step: .01,
+										modelValue: misc.value.layersDepth,
+										"onUpdate:modelValue": [_cache[25] || (_cache[25] = ($event) => misc.value.layersDepth = $event), unref(apply)]
+									}, null, 8, [
+										"label",
+										"modelValue",
+										"onUpdate:modelValue"
+									]),
+									createVNode(VuSlider, {
+										label: `flatness (top-level) ${fmt(misc.value.flatness[0])}`,
+										min: 0,
+										max: 1,
+										step: .01,
+										modelValue: misc.value.flatness,
+										"onUpdate:modelValue": [_cache[26] || (_cache[26] = ($event) => misc.value.flatness = $event), unref(apply)]
+									}, null, 8, [
+										"label",
+										"modelValue",
+										"onUpdate:modelValue"
+									])
+								])) : createCommentVNode("v-if", true)
 							]),
 							_: 1
 						}),
@@ -598,15 +1036,10 @@ var DevTools_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 					}]),
 					title: "Vunor Palette Sandbox",
 					onMousedown: onMouseDown
-				}, [..._cache[7] || (_cache[7] = [createElementVNode("strong", { class: "text-16px text-mb-0" }, "V", -1)])], 34)
+				}, [..._cache[28] || (_cache[28] = [createElementVNode("strong", { class: "text-16px text-mb-0" }, "V", -1)])], 34)
 			], 6)) : createCommentVNode("v-if", true);
 		};
 	}
 });
-
-//#endregion
-//#region src/components/DevTools/DevTools.vue
-var DevTools_default = DevTools_vue_vue_type_script_setup_true_lang_default;
-
 //#endregion
-export { DevTools_default as default };
+export { DevTools_default as default };