@comfyorg/design-system 1.2.0 → 1.3.0-alpha.1

package/dist/shared/ColorPickerPanel-DQGHuvxk.js

@@ -0,0 +1,239 @@
+import { t as Select_default } from "./Select-DtVgv7Po.js";
+import { t as SelectContent_default } from "./SelectContent-Ba1mCDWM.js";
+import { t as SelectItem_default } from "./SelectItem-DaOr3TFS.js";
+import { t as SelectTrigger_default } from "./SelectTrigger-BBicbVsI.js";
+import { t as SelectValue_default } from "./SelectValue-BjaQc-WU.js";
+import { t as ColorPickerSaturationValue_default } from "./ColorPickerSaturationValue-B5VDiMcl.js";
+import { a as normalizeHex, n as hexToHsva, o as rgbToHex, r as hsbToRgb, s as rgbToHsv, t as ColorPickerSlider_default } from "./ColorPickerSlider--mnQyzWD.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, openBlock, reactive, ref, renderList, toDisplayString, unref, useModel, vModelText, watch, withCtx, withDirectives, withKeys } from "vue";
+import { clamp } from "es-toolkit";
+// src/components/color-picker/useColorPicker.ts
+var rgbChannels = [
+	{ key: "r" },
+	{ key: "g" },
+	{ key: "b" }
+];
+function useDraftField(source, apply) {
+	const draft = ref(source());
+	const isEditing = ref(false);
+	watch(source, (value) => {
+		if (!isEditing.value) draft.value = value;
+	});
+	return reactive({
+		draft,
+		beginEdit: () => {
+			isEditing.value = true;
+		},
+		commit: () => apply(draft.value),
+		reset: () => {
+			isEditing.value = false;
+			draft.value = source();
+		}
+	});
+}
+function useColorPicker(hsva) {
+	const rgb = computed(() => hsbToRgb({
+		h: hsva.value.h,
+		s: hsva.value.s,
+		b: hsva.value.v
+	}));
+	const hexString = computed(() => rgbToHex(rgb.value).toLowerCase());
+	return {
+		hex: useDraftField(() => hexString.value, (draft) => {
+			const normalized = normalizeHex(draft);
+			if (!normalized) return;
+			const next = hexToHsva(normalized);
+			hsva.value = {
+				...hsva.value,
+				h: next.h,
+				s: next.s,
+				v: next.v
+			};
+		}),
+		rgb: useDraftField(() => ({ ...rgb.value }), ({ r, g, b }) => {
+			if (![
+				r,
+				g,
+				b
+			].every(Number.isFinite)) return;
+			const hsv = rgbToHsv({
+				r: clamp(Math.round(r), 0, 255),
+				g: clamp(Math.round(g), 0, 255),
+				b: clamp(Math.round(b), 0, 255)
+			});
+			hsva.value = {
+				...hsva.value,
+				h: hsv.h,
+				s: hsv.s,
+				v: hsv.v
+			};
+		}),
+		alpha: useDraftField(() => hsva.value.a, (draft) => {
+			if (!Number.isFinite(draft)) return;
+			hsva.value = {
+				...hsva.value,
+				a: clamp(Math.round(draft), 0, 100)
+			};
+		})
+	};
+}
+// src/components/color-picker/ColorPickerPanel.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex w-[211px] flex-col gap-2 rounded-lg border border-border/50 bg-background p-2 shadow-md" };
+var _hoisted_2 = { class: "flex items-center gap-1" };
+var _hoisted_3 = { class: "flex h-6 min-w-0 flex-1 items-center gap-1 rounded-sm bg-secondary px-1 text-xs text-muted-foreground" };
+var _hoisted_4 = ["aria-label"];
+var _hoisted_5 = ["onUpdate:modelValue", "aria-label"];
+var _hoisted_6 = {
+	key: 2,
+	class: "flex shrink-0 items-center border-l border-border/50 pl-1"
+};
+var _hoisted_7 = ["aria-label"];
+// src/components/color-picker/ColorPickerPanel.vue
+var ColorPickerPanel_default = /* @__PURE__ */ defineComponent({
+	__name: "ColorPickerPanel",
+	props: /*@__PURE__*/ mergeModels({
+		alpha: {
+			type: Boolean,
+			default: true
+		},
+		hexLabel: {},
+		rgbaLabel: {},
+		hueLabel: {},
+		alphaLabel: {},
+		redLabel: {},
+		greenLabel: {},
+		blueLabel: {},
+		saturationBrightnessLabel: {},
+		formatLabel: {}
+	}, {
+		"hsva": { required: true },
+		"hsvaModifiers": {},
+		"displayMode": { required: true },
+		"displayModeModifiers": {}
+	}),
+	emits: ["update:hsva", "update:displayMode"],
+	setup(__props) {
+		const hsva = useModel(__props, "hsva");
+		const displayMode = useModel(__props, "displayMode");
+		const channelLabels = computed(() => ({
+			r: __props.redLabel,
+			g: __props.greenLabel,
+			b: __props.blueLabel
+		}));
+		const { hex, rgb, alpha: alphaField } = useColorPicker(hsva);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				createVNode(ColorPickerSaturationValue_default, {
+					saturation: hsva.value.s,
+					"onUpdate:saturation": _cache[0] || (_cache[0] = ($event) => hsva.value.s = $event),
+					value: hsva.value.v,
+					"onUpdate:value": _cache[1] || (_cache[1] = ($event) => hsva.value.v = $event),
+					hue: hsva.value.h,
+					"aria-label": __props.saturationBrightnessLabel
+				}, null, 8, [
+					"saturation",
+					"value",
+					"hue",
+					"aria-label"
+				]),
+				createVNode(ColorPickerSlider_default, {
+					modelValue: hsva.value.h,
+					"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => hsva.value.h = $event),
+					type: "hue",
+					"aria-label": __props.hueLabel
+				}, null, 8, ["modelValue", "aria-label"]),
+				__props.alpha ? (openBlock(), createBlock(ColorPickerSlider_default, {
+					key: 0,
+					modelValue: hsva.value.a,
+					"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => hsva.value.a = $event),
+					type: "alpha",
+					hue: hsva.value.h,
+					saturation: hsva.value.s,
+					brightness: hsva.value.v,
+					"aria-label": __props.alphaLabel
+				}, null, 8, [
+					"modelValue",
+					"hue",
+					"saturation",
+					"brightness",
+					"aria-label"
+				])) : createCommentVNode("", true),
+				createElementVNode("div", _hoisted_2, [createVNode(unref(Select_default), {
+					modelValue: displayMode.value,
+					"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => displayMode.value = $event)
+				}, {
+					default: withCtx(() => [createVNode(unref(SelectTrigger_default), {
+						"aria-label": __props.formatLabel,
+						class: "h-6 w-[58px] shrink-0 gap-0.5 overflow-clip rounded-sm border-0 px-1.5 py-0 text-xs [&>span]:overflow-visible"
+					}, {
+						default: withCtx(() => [createVNode(unref(SelectValue_default))]),
+						_: 1
+					}, 8, ["aria-label"]), createVNode(unref(SelectContent_default), { class: "min-w-16 p-1" }, {
+						default: withCtx(() => [createVNode(unref(SelectItem_default), {
+							value: "hex",
+							class: "py-1 text-xs"
+						}, {
+							default: withCtx(() => [createTextVNode(toDisplayString(__props.hexLabel), 1)]),
+							_: 1
+						}), createVNode(unref(SelectItem_default), {
+							value: "rgba",
+							class: "py-1 text-xs"
+						}, {
+							default: withCtx(() => [createTextVNode(toDisplayString(__props.rgbaLabel), 1)]),
+							_: 1
+						})]),
+						_: 1
+					})]),
+					_: 1
+				}, 8, ["modelValue"]), createElementVNode("div", _hoisted_3, [displayMode.value === "hex" ? withDirectives((openBlock(), createElementBlock("input", {
+					key: 0,
+					"onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => unref(hex).draft = $event),
+					type: "text",
+					spellcheck: "false",
+					"aria-label": __props.hexLabel,
+					class: "min-w-0 flex-1 appearance-none border-none bg-transparent p-0 text-center outline-none",
+					onFocus: _cache[6] || (_cache[6] = (...args) => unref(hex).beginEdit && unref(hex).beginEdit(...args)),
+					onInput: _cache[7] || (_cache[7] = (...args) => unref(hex).commit && unref(hex).commit(...args)),
+					onKeydown: _cache[8] || (_cache[8] = withKeys((...args) => unref(hex).commit && unref(hex).commit(...args), ["enter"])),
+					onBlur: _cache[9] || (_cache[9] = (...args) => unref(hex).reset && unref(hex).reset(...args))
+				}, null, 40, _hoisted_4)), [[vModelText, unref(hex).draft]]) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(rgbChannels), (channel) => {
+					return withDirectives((openBlock(), createElementBlock("input", {
+						key: channel.key,
+						"onUpdate:modelValue": ($event) => unref(rgb).draft[channel.key] = $event,
+						type: "number",
+						min: 0,
+						max: 255,
+						"aria-label": channelLabels.value[channel.key],
+						class: "min-w-0 flex-1 appearance-none border-none bg-transparent p-0 text-center outline-none [&::-webkit-inner-spin-button]:appearance-none",
+						onFocus: _cache[10] || (_cache[10] = (...args) => unref(rgb).beginEdit && unref(rgb).beginEdit(...args)),
+						onInput: _cache[11] || (_cache[11] = (...args) => unref(rgb).commit && unref(rgb).commit(...args)),
+						onKeydown: _cache[12] || (_cache[12] = withKeys((...args) => unref(rgb).commit && unref(rgb).commit(...args), ["enter"])),
+						onBlur: _cache[13] || (_cache[13] = (...args) => unref(rgb).reset && unref(rgb).reset(...args))
+					}, null, 40, _hoisted_5)), [[
+						vModelText,
+						unref(rgb).draft[channel.key],
+						void 0,
+						{ number: true }
+					]]);
+				}), 128)), __props.alpha ? (openBlock(), createElementBlock("div", _hoisted_6, [withDirectives(createElementVNode("input", {
+					"onUpdate:modelValue": _cache[14] || (_cache[14] = ($event) => unref(alphaField).draft = $event),
+					type: "number",
+					min: 0,
+					max: 100,
+					"aria-label": __props.alphaLabel,
+					class: "w-6 min-w-0 appearance-none border-none bg-transparent p-0 text-right outline-none [&::-webkit-inner-spin-button]:appearance-none",
+					onFocus: _cache[15] || (_cache[15] = (...args) => unref(alphaField).beginEdit && unref(alphaField).beginEdit(...args)),
+					onInput: _cache[16] || (_cache[16] = (...args) => unref(alphaField).commit && unref(alphaField).commit(...args)),
+					onKeydown: _cache[17] || (_cache[17] = withKeys((...args) => unref(alphaField).commit && unref(alphaField).commit(...args), ["enter"])),
+					onBlur: _cache[18] || (_cache[18] = (...args) => unref(alphaField).reset && unref(alphaField).reset(...args))
+				}, null, 40, _hoisted_7), [[
+					vModelText,
+					unref(alphaField).draft,
+					void 0,
+					{ number: true }
+				]]), _cache[19] || (_cache[19] = createElementVNode("span", null, "%", -1))])) : createCommentVNode("", true)])])
+			]);
+		};
+	}
+});
+export { ColorPickerPanel_default as t };

package/dist/shared/ColorPickerSaturationValue-B5VDiMcl.js

@@ -0,0 +1,64 @@
+import { computed, createElementBlock, createElementVNode, defineComponent, mergeModels, normalizeStyle, openBlock, ref, useModel } from "vue";
+// src/components/color-picker/ColorPickerSaturationValue.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-valuetext"];
+// src/components/color-picker/ColorPickerSaturationValue.vue
+var ColorPickerSaturationValue_default = /* @__PURE__ */ defineComponent({
+	__name: "ColorPickerSaturationValue",
+	props: /*@__PURE__*/ mergeModels({ hue: {} }, {
+		"saturation": { required: true },
+		"saturationModifiers": {},
+		"value": { required: true },
+		"valueModifiers": {}
+	}),
+	emits: ["update:saturation", "update:value"],
+	setup(__props) {
+		const saturation = useModel(__props, "saturation");
+		const value = useModel(__props, "value");
+		const containerRef = ref(null);
+		const hueBackground = computed(() => `hsl(${__props.hue}, 100%, 50%)`);
+		const handleStyle = computed(() => ({
+			left: `${saturation.value}%`,
+			top: `${100 - value.value}%`
+		}));
+		function updateFromPointer(e) {
+			const el = containerRef.value;
+			if (!el) return;
+			const rect = el.getBoundingClientRect();
+			const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+			const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
+			saturation.value = Math.round(x * 100);
+			value.value = Math.round((1 - y) * 100);
+		}
+		function handlePointerDown(e) {
+			e.currentTarget.setPointerCapture(e.pointerId);
+			updateFromPointer(e);
+		}
+		function handlePointerMove(e) {
+			if (!e.currentTarget.hasPointerCapture(e.pointerId)) return;
+			updateFromPointer(e);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "containerRef",
+				ref: containerRef,
+				role: "slider",
+				"aria-valuetext": `${saturation.value}%, ${value.value}%`,
+				class: "relative aspect-square w-full cursor-crosshair rounded-sm",
+				style: normalizeStyle({
+					backgroundColor: hueBackground.value,
+					touchAction: "none"
+				}),
+				onPointerdown: handlePointerDown,
+				onPointermove: handlePointerMove
+			}, [
+				_cache[0] || (_cache[0] = createElementVNode("div", { class: "absolute inset-0 rounded-sm bg-linear-to-r from-white to-transparent" }, null, -1)),
+				_cache[1] || (_cache[1] = createElementVNode("div", { class: "absolute inset-0 rounded-sm bg-linear-to-b from-transparent to-black" }, null, -1)),
+				createElementVNode("div", {
+					class: "pointer-events-none absolute size-3.5 -translate-1/2 rounded-full border-2 border-white shadow-[0_0_2px_rgba(0,0,0,0.6)]",
+					style: normalizeStyle(handleStyle.value)
+				}, null, 4)
+			], 44, _hoisted_1);
+		};
+	}
+});
+export { ColorPickerSaturationValue_default as t };

package/dist/shared/ColorPickerSlider--mnQyzWD.js

@@ -0,0 +1,305 @@
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeModels, normalizeStyle, openBlock, useModel } from "vue";
+import { memoize } from "es-toolkit/compat";
+// ../shared-frontend-utils/src/colorUtil.ts
+function rgbToHsl({ r, g, b }) {
+	r /= 255;
+	g /= 255;
+	b /= 255;
+	const max = Math.max(r, g, b), min = Math.min(r, g, b);
+	let h = 0, s = 0;
+	const l = (max + min) / 2;
+	if (max !== min) {
+		const d = max - min;
+		s = l > .5 ? d / (2 - max - min) : d / (max + min);
+		switch (max) {
+			case r:
+				h = (g - b) / d + (g < b ? 6 : 0);
+				break;
+			case g:
+				h = (b - r) / d + 2;
+				break;
+			case b: h = (r - g) / d + 4;
+		}
+		h /= 6;
+	}
+	return {
+		h,
+		s,
+		l
+	};
+}
+function hexToRgb(hex) {
+	let r = 0, g = 0, b = 0;
+	if (hex.length === 4 || hex.length === 5) {
+		r = parseInt(hex[1] + hex[1], 16);
+		g = parseInt(hex[2] + hex[2], 16);
+		b = parseInt(hex[3] + hex[3], 16);
+	} else if (hex.length === 7 || hex.length === 9) {
+		r = parseInt(hex.slice(1, 3), 16);
+		g = parseInt(hex.slice(3, 5), 16);
+		b = parseInt(hex.slice(5, 7), 16);
+	}
+	return {
+		r,
+		g,
+		b
+	};
+}
+function rgbToHex({ r, g, b }) {
+	const toHex = (n) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, "0");
+	return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function hsbToRgb({ h, s, b }) {
+	const hh = (h % 360 + 360) % 360;
+	const ss = Math.max(0, Math.min(100, s)) / 100;
+	const vv = Math.max(0, Math.min(100, b)) / 100;
+	const c = vv * ss;
+	const x = c * (1 - Math.abs(hh / 60 % 2 - 1));
+	const m = vv - c;
+	let rp, gp, bp;
+	if (hh < 60) {
+		rp = c;
+		gp = x;
+		bp = 0;
+	} else if (hh < 120) {
+		rp = x;
+		gp = c;
+		bp = 0;
+	} else if (hh < 180) {
+		rp = 0;
+		gp = c;
+		bp = x;
+	} else if (hh < 240) {
+		rp = 0;
+		gp = x;
+		bp = c;
+	} else if (hh < 300) {
+		rp = x;
+		gp = 0;
+		bp = c;
+	} else {
+		rp = c;
+		gp = 0;
+		bp = x;
+	}
+	return {
+		r: Math.floor((rp + m) * 255),
+		g: Math.floor((gp + m) * 255),
+		b: Math.floor((bp + m) * 255)
+	};
+}
+var identifyColorFormat = (color) => {
+	if (!color) return null;
+	if (color.startsWith("#") && (color.length === 4 || color.length === 5 || color.length === 7 || color.length === 9)) return "hex";
+	if (/rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*/.test(color)) return color.includes("rgba") ? "rgba" : "rgb";
+	if (/hsla?\(\s*\d+(\.\d+)?\s*,\s*\d+(\.\d+)?%\s*,\s*\d+(\.\d+)?%/.test(color)) return color.includes("hsla") ? "hsla" : "hsl";
+	return null;
+};
+var isHSLA = (color) => {
+	if (typeof color !== "object" || color === null) return false;
+	return [
+		"h",
+		"s",
+		"l",
+		"a"
+	].every((key) => typeof color[key] === "number" && !isNaN(color[key]));
+};
+function parseToHSLA(color, format) {
+	let match;
+	switch (format) {
+		case "hex": {
+			let a = 1;
+			let hexColor = color;
+			if (color.length === 9) {
+				a = parseInt(color.slice(7, 9), 16) / 255;
+				hexColor = color.slice(0, 7);
+			} else if (color.length === 5) {
+				const aChar = color[4];
+				a = parseInt(aChar + aChar, 16) / 255;
+				hexColor = color.slice(0, 4);
+			}
+			const hsl = rgbToHsl(hexToRgb(hexColor));
+			return {
+				h: Math.round(hsl.h * 360),
+				s: +(hsl.s * 100).toFixed(1),
+				l: +(hsl.l * 100).toFixed(1),
+				a
+			};
+		}
+		case "rgb":
+		case "rgba": {
+			match = color.match(/\d+(\.\d+)?/g);
+			if (!match || match.length < 3) return null;
+			const [r, g, b] = match.map(Number);
+			const hsl = rgbToHsl({
+				r,
+				g,
+				b
+			});
+			const a = format === "rgba" && match[3] ? parseFloat(match[3]) : 1;
+			return {
+				h: Math.round(hsl.h * 360),
+				s: +(hsl.s * 100).toFixed(1),
+				l: +(hsl.l * 100).toFixed(1),
+				a
+			};
+		}
+		case "hsl":
+		case "hsla": {
+			match = color.match(/\d+(\.\d+)?/g);
+			if (!match || match.length < 3) return null;
+			const [h, s, l] = match.map(Number);
+			return {
+				h,
+				s,
+				l,
+				a: format === "hsla" && match[3] ? parseFloat(match[3]) : 1
+			};
+		}
+		default: return null;
+	}
+}
+function rgbToHsv({ r, g, b }) {
+	r /= 255;
+	g /= 255;
+	b /= 255;
+	const max = Math.max(r, g, b);
+	const d = max - Math.min(r, g, b);
+	let h = 0;
+	const s = max === 0 ? 0 : d / max * 100;
+	const v = max * 100;
+	if (d !== 0) switch (max) {
+		case r:
+			h = ((g - b) / d + (g < b ? 6 : 0)) * 60;
+			break;
+		case g:
+			h = ((b - r) / d + 2) * 60;
+			break;
+		case b: h = ((r - g) / d + 4) * 60;
+	}
+	return {
+		h,
+		s,
+		v
+	};
+}
+function normalizeHex(value) {
+	const digits = value.trim().replace(/^#/, "");
+	return /^([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(digits) ? `#${digits}` : null;
+}
+function hexToHsva(hex) {
+	const normalized = hex.startsWith("#") ? hex : `#${hex}`;
+	let a = 100;
+	let hexColor = normalized;
+	if (normalized.length === 9) {
+		a = Math.round(parseInt(normalized.slice(7, 9), 16) / 255 * 100);
+		hexColor = normalized.slice(0, 7);
+	} else if (normalized.length === 5) {
+		const aChar = normalized[4];
+		a = Math.round(parseInt(aChar + aChar, 16) / 255 * 100);
+		hexColor = normalized.slice(0, 4);
+	}
+	return {
+		...rgbToHsv(hexToRgb(hexColor)),
+		a
+	};
+}
+function hsvaToHex(hsva) {
+	const hex = rgbToHex(hsbToRgb({
+		h: hsva.h,
+		s: hsva.s,
+		b: hsva.v
+	}));
+	if (hsva.a >= 100) return hex.toLowerCase();
+	return `${hex}${Math.round(hsva.a / 100 * 255).toString(16).padStart(2, "0")}`.toLowerCase();
+}
+var applyColorAdjustments = (color, options) => {
+	if (!Object.keys(options).length) return color;
+	const format = identifyColorFormat(color);
+	if (!format) {
+		console.warn(`Unsupported color format in color palette: ${color}`);
+		return color;
+	}
+	const hsla = parseToHSLA(color, format);
+	if (!isHSLA(hsla)) {
+		console.warn(`Invalid color values in color palette: ${color}`);
+		return color;
+	}
+	if (options.lightness) hsla.l = Math.max(0, Math.min(100, hsla.l + options.lightness * 100));
+	if (options.opacity) hsla.a = Math.max(0, Math.min(1, options.opacity));
+	return `hsla(${hsla.h}, ${hsla.s}%, ${hsla.l}%, ${hsla.a})`;
+};
+memoize(applyColorAdjustments, (color, options) => `${color}-${JSON.stringify(options)}`);
+// src/components/color-picker/ColorPickerSlider.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-valuemax", "aria-valuenow"];
+// src/components/color-picker/ColorPickerSlider.vue
+var ColorPickerSlider_default = /* @__PURE__ */ defineComponent({
+	__name: "ColorPickerSlider",
+	props: /*@__PURE__*/ mergeModels({
+		type: {},
+		hue: { default: 0 },
+		saturation: { default: 100 },
+		brightness: { default: 100 }
+	}, {
+		"modelValue": { required: true },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const modelValue = useModel(__props, "modelValue");
+		const max = computed(() => __props.type === "hue" ? 360 : 100);
+		const fraction = computed(() => modelValue.value / max.value);
+		const trackBackground = computed(() => {
+			if (__props.type === "hue") return "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)";
+			return `linear-gradient(to right, transparent, ${rgbToHex(hsbToRgb({
+				h: __props.hue,
+				s: __props.saturation,
+				b: __props.brightness
+			}))})`;
+		});
+		const containerStyle = computed(() => {
+			if (__props.type === "alpha") return {
+				backgroundImage: "repeating-conic-gradient(#808080 0% 25%, transparent 0% 50%)",
+				backgroundSize: "8px 8px",
+				touchAction: "none"
+			};
+			return {
+				background: trackBackground.value,
+				touchAction: "none"
+			};
+		});
+		function updateFromPointer(e) {
+			const rect = e.currentTarget.getBoundingClientRect();
+			const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+			modelValue.value = Math.round(x * max.value);
+		}
+		function handlePointerDown(e) {
+			e.currentTarget.setPointerCapture(e.pointerId);
+			updateFromPointer(e);
+		}
+		function handlePointerMove(e) {
+			if (!e.currentTarget.hasPointerCapture(e.pointerId)) return;
+			updateFromPointer(e);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				role: "slider",
+				"aria-valuemin": 0,
+				"aria-valuemax": max.value,
+				"aria-valuenow": modelValue.value,
+				class: "relative flex h-4 cursor-pointer items-center rounded-full p-px",
+				style: normalizeStyle(containerStyle.value),
+				onPointerdown: handlePointerDown,
+				onPointermove: handlePointerMove
+			}, [__props.type === "alpha" ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: "absolute inset-0 rounded-full",
+				style: normalizeStyle({ background: trackBackground.value })
+			}, null, 4)) : createCommentVNode("", true), createElementVNode("div", {
+				class: "pointer-events-none absolute aspect-square h-full -translate-x-1/2 rounded-full border-2 border-white shadow-[0_0_2px_rgba(0,0,0,0.6)]",
+				style: normalizeStyle({ left: `${fraction.value * 100}%` })
+			}, null, 4)], 44, _hoisted_1);
+		};
+	}
+});
+export { normalizeHex as a, hsvaToHex as i, hexToHsva as n, rgbToHex as o, hsbToRgb as r, rgbToHsv as s, ColorPickerSlider_default as t };

package/dist/shared/{ContextMenuContent-CNQHJQ81.js → ContextMenuContent-RNyBBJOX.js}

@@ -1,9 +1,8 @@
-import { t as cn } from "./src-CnJ6AzLP.js";
+import { t as cn } from "./src-DTwuqov4.js";
 import { menuContentClass } from "../menu/menuStyles.js";
 import { createBlock, createPropsRestProxy, createVNode, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
 import { ContextMenuContent, ContextMenuPortal, injectContextMenuRootContext, useForwardPropsEmits } from "reka-ui";
-//#endregion
-//#region src/components/menu/ContextMenuContent.vue
+// src/components/menu/ContextMenuContent.vue
 var ContextMenuContent_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "ContextMenuContent",
@@ -60,5 +59,4 @@ var ContextMenuContent_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-//#endregion
 export { ContextMenuContent_default as t };

package/dist/shared/DialogClose-CrtPRSNX.js

@@ -0,0 +1,22 @@
+import { t as Button_default } from "./Button-Dj_H5v3V.js";
+import { createBlock, createElementVNode, createVNode, defineComponent, openBlock, renderSlot, unref, withCtx } from "vue";
+import { DialogClose } from "reka-ui";
+// src/components/dialog/DialogClose.vue
+var DialogClose_default = /* @__PURE__ */ defineComponent({
+	__name: "DialogClose",
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(DialogClose), { "as-child": "" }, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [createVNode(unref(Button_default), {
+					size: "icon",
+					variant: "muted-textonly"
+				}, {
+					default: withCtx(() => [..._cache[0] || (_cache[0] = [createElementVNode("i", { class: "icon-[lucide--x]" }, null, -1)])]),
+					_: 1
+				})])]),
+				_: 3
+			});
+		};
+	}
+});
+export { DialogClose_default as t };