@shtabapp/ui-kit 1.85.0 → 1.85.1

package/dist/components/SColorPicker/parts/SColorValues.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,266 @@
+import { EColorFormat } from "../../../utils/color/types.js";
+import { resolveColorPreview } from "../../../utils/color/colorValue.js";
+import { COLOR_FORMAT_LABELS, DEFAULT_COLOR_FORMATS, formatColorForDisplay, resolveEditableHexColor } from "../../../utils/color/formatColorForDisplay.js";
+import { parseColorFromInput } from "../../../utils/color/parseColorFromInput.js";
+import { EButtonAppearance, EButtonSize, EButtonVariant } from "../../SButton/SButton.types.js";
+import SButton_default from "../../SButton/SButton.vue.js";
+import { resolveColorSwatchFillElement } from "../utils/resolveColorSwatchFillElement.js";
+import SSelect_default from "../../SSelect/SSelect.vue.js";
+import { Fragment, computed, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, onMounted, openBlock, ref, unref, useModel, useTemplateRef, vModelText, watch, withDirectives } from "vue";
+import { ESColorSwatchSize, SColorSwatch, useUiKitI18n } from "@shtabapp/ui-kit-primitives";
+//#region src/components/SColorPicker/parts/SColorValues.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "s-ui-color-values__left" };
+var _hoisted_2 = { class: "s-ui-color-values__format" };
+var _hoisted_3 = { class: "s-ui-color-values__value-group" };
+var _hoisted_4 = { class: "s-ui-color-values__inputs" };
+var _hoisted_5 = {
+	key: 0,
+	class: "s-ui-color-values__input-wrap"
+};
+var _hoisted_6 = [
+	"disabled",
+	"readonly",
+	"aria-label"
+];
+var _hoisted_7 = { class: "s-ui-color-values__input-wrap" };
+var _hoisted_8 = [
+	"disabled",
+	"readonly",
+	"aria-label"
+];
+var _hoisted_9 = { class: "s-ui-color-values__input-wrap" };
+var _hoisted_10 = [
+	"disabled",
+	"readonly",
+	"aria-label"
+];
+var _hoisted_11 = { class: "s-ui-color-values__input-wrap" };
+var _hoisted_12 = [
+	"disabled",
+	"readonly",
+	"aria-label"
+];
+var SColorValues_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "SColorValues",
+	props: /*@__PURE__*/ mergeModels({
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		formats: { default: () => DEFAULT_COLOR_FORMATS }
+	}, {
+		"modelValue": { required: true },
+		"modelModifiers": {},
+		"format": { default: EColorFormat.HEX },
+		"formatModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["formatDropdownOpen", "formatDropdownClose"], ["update:modelValue", "update:format"]),
+	setup(__props, { emit: __emit }) {
+		const { t } = useUiKitI18n();
+		const modelValue = useModel(__props, "modelValue");
+		const format = useModel(__props, "format");
+		const emit = __emit;
+		const previewSwatchRef = useTemplateRef("previewSwatchRef");
+		const hexDraft = ref("");
+		const channelDraftFirst = ref("0");
+		const channelDraftSecond = ref("0");
+		const channelDraftThird = ref("0");
+		const resolvedFormatOptions = computed(() => {
+			return (__props.formats.length > 0 ? __props.formats : DEFAULT_COLOR_FORMATS).map((formatValue) => {
+				return {
+					value: formatValue,
+					label: COLOR_FORMAT_LABELS[formatValue]
+				};
+			});
+		});
+		const previewColor = computed(() => {
+			return resolveColorPreview(modelValue.value);
+		});
+		const editableHexColor = computed(() => {
+			return resolveEditableHexColor(modelValue.value, resolveColorSwatchFillElement(previewSwatchRef.value));
+		});
+		const firstChannelAriaLabel = computed(() => {
+			if (format.value === EColorFormat.RGB) return t("colorValues.redChannel");
+			return t("colorValues.hueChannel");
+		});
+		const secondChannelAriaLabel = computed(() => {
+			if (format.value === EColorFormat.RGB) return t("colorValues.greenChannel");
+			return t("colorValues.saturationChannel");
+		});
+		const thirdChannelAriaLabel = computed(() => {
+			if (format.value === EColorFormat.RGB) return t("colorValues.blueChannel");
+			return t("colorValues.lightnessChannel");
+		});
+		const syncDraftFromModel = () => {
+			const hexColor = editableHexColor.value;
+			if (!hexColor) return;
+			const displayValue = formatColorForDisplay(hexColor, format.value);
+			if (format.value === EColorFormat.HEX && typeof displayValue === "string") {
+				hexDraft.value = displayValue;
+				return;
+			}
+			if (typeof displayValue === "object") {
+				channelDraftFirst.value = String(displayValue.first);
+				channelDraftSecond.value = String(displayValue.second);
+				channelDraftThird.value = String(displayValue.third);
+			}
+		};
+		watch([
+			modelValue,
+			format,
+			editableHexColor
+		], () => {
+			syncDraftFromModel();
+		});
+		onMounted(() => {
+			nextTick(() => {
+				syncDraftFromModel();
+			});
+		});
+		const handleInputCommit = () => {
+			if (__props.disabled || __props.readonly) return;
+			if (format.value === EColorFormat.HEX) {
+				const parsedHexColor = parseColorFromInput(EColorFormat.HEX, hexDraft.value);
+				if (parsedHexColor) modelValue.value = parsedHexColor;
+				syncDraftFromModel();
+				return;
+			}
+			const parsedHexColor = parseColorFromInput(format.value, {
+				first: Number.parseInt(channelDraftFirst.value, 10),
+				second: Number.parseInt(channelDraftSecond.value, 10),
+				third: Number.parseInt(channelDraftThird.value, 10)
+			});
+			if (parsedHexColor) modelValue.value = parsedHexColor;
+			syncDraftFromModel();
+		};
+		const handleInputKeydown = (event) => {
+			if (event.key !== "Enter") return;
+			event.preventDefault();
+			handleInputCommit();
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({ class: ["s-ui-color-values", {
+				"s-ui-color-values--disabled": __props.disabled,
+				"s-ui-color-values--readonly": __props.readonly
+			}] }, _ctx.$attrs), [createElementVNode("div", _hoisted_1, [createVNode(unref(SColorSwatch), {
+				ref_key: "previewSwatchRef",
+				ref: previewSwatchRef,
+				class: "s-ui-color-values__preview",
+				color: previewColor.value,
+				size: unref(ESColorSwatchSize).SIZE_32,
+				disabled: __props.disabled,
+				tabindex: "-1",
+				"aria-hidden": "true"
+			}, null, 8, [
+				"color",
+				"size",
+				"disabled"
+			]), createElementVNode("div", _hoisted_2, [createVNode(unref(SSelect_default), {
+				modelValue: format.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => format.value = $event),
+				class: "s-ui-color-values__format-select",
+				options: resolvedFormatOptions.value,
+				disabled: __props.disabled,
+				readonly: __props.readonly,
+				bordered: true,
+				clearable: false,
+				"close-on-select": true,
+				"fit-viewport": false,
+				"aria-label": unref(t)("colorValues.format"),
+				onOpen: _cache[1] || (_cache[1] = ($event) => emit("formatDropdownOpen")),
+				onClose: _cache[2] || (_cache[2] = ($event) => emit("formatDropdownClose"))
+			}, null, 8, [
+				"modelValue",
+				"options",
+				"disabled",
+				"readonly",
+				"aria-label"
+			])])]), createElementVNode("div", _hoisted_3, [
+				createVNode(unref(SButton_default), {
+					class: "s-ui-color-values__pipette",
+					appearance: unref(EButtonAppearance).BARE,
+					variant: unref(EButtonVariant).NEUTRAL,
+					size: unref(EButtonSize).SMALL,
+					icon: "pipette",
+					"aria-label": unref(t)("colorValues.pickColor"),
+					"aria-disabled": "true",
+					disabled: __props.disabled,
+					tabindex: "-1"
+				}, null, 8, [
+					"appearance",
+					"variant",
+					"size",
+					"aria-label",
+					"disabled"
+				]),
+				_cache[9] || (_cache[9] = createElementVNode("span", {
+					class: "s-ui-color-values__separator",
+					"aria-hidden": "true"
+				}, null, -1)),
+				createElementVNode("div", _hoisted_4, [format.value === unref(EColorFormat).HEX ? (openBlock(), createElementBlock("div", _hoisted_5, [withDirectives(createElementVNode("input", {
+					"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => hexDraft.value = $event),
+					class: "s-ui-color-values__input s-ui-typography-body-14-regular",
+					type: "text",
+					inputmode: "text",
+					spellcheck: "false",
+					disabled: __props.disabled,
+					readonly: __props.readonly,
+					"aria-label": unref(t)("colorValues.hexValue"),
+					onBlur: handleInputCommit,
+					onKeydown: handleInputKeydown
+				}, null, 40, _hoisted_6), [[vModelText, hexDraft.value]])])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+					createElementVNode("div", _hoisted_7, [withDirectives(createElementVNode("input", {
+						"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => channelDraftFirst.value = $event),
+						class: "s-ui-color-values__input s-ui-typography-body-14-regular",
+						type: "text",
+						inputmode: "numeric",
+						spellcheck: "false",
+						disabled: __props.disabled,
+						readonly: __props.readonly,
+						"aria-label": firstChannelAriaLabel.value,
+						onBlur: handleInputCommit,
+						onKeydown: handleInputKeydown
+					}, null, 40, _hoisted_8), [[vModelText, channelDraftFirst.value]])]),
+					_cache[7] || (_cache[7] = createElementVNode("span", {
+						class: "s-ui-color-values__separator",
+						"aria-hidden": "true"
+					}, null, -1)),
+					createElementVNode("div", _hoisted_9, [withDirectives(createElementVNode("input", {
+						"onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => channelDraftSecond.value = $event),
+						class: "s-ui-color-values__input s-ui-typography-body-14-regular",
+						type: "text",
+						inputmode: "numeric",
+						spellcheck: "false",
+						disabled: __props.disabled,
+						readonly: __props.readonly,
+						"aria-label": secondChannelAriaLabel.value,
+						onBlur: handleInputCommit,
+						onKeydown: handleInputKeydown
+					}, null, 40, _hoisted_10), [[vModelText, channelDraftSecond.value]])]),
+					_cache[8] || (_cache[8] = createElementVNode("span", {
+						class: "s-ui-color-values__separator",
+						"aria-hidden": "true"
+					}, null, -1)),
+					createElementVNode("div", _hoisted_11, [withDirectives(createElementVNode("input", {
+						"onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => channelDraftThird.value = $event),
+						class: "s-ui-color-values__input s-ui-typography-body-14-regular",
+						type: "text",
+						inputmode: "numeric",
+						spellcheck: "false",
+						disabled: __props.disabled,
+						readonly: __props.readonly,
+						"aria-label": thirdChannelAriaLabel.value,
+						onBlur: handleInputCommit,
+						onKeydown: handleInputKeydown
+					}, null, 40, _hoisted_12), [[vModelText, channelDraftThird.value]])])
+				], 64))])
+			])], 16);
+		};
+	}
+});
+//#endregion
+export { SColorValues_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/SColorPicker/utils/resolveColorSwatchFillElement.cjs

@@ -0,0 +1,10 @@
+//#region src/components/SColorPicker/utils/resolveColorSwatchFillElement.ts
+var resolveColorSwatchFillElement = (swatchInstance) => {
+	if (!swatchInstance) return null;
+	const swatchRoot = swatchInstance.$el;
+	if (!(swatchRoot instanceof HTMLElement)) return null;
+	const fillElement = swatchRoot.querySelector(".s-ui-color-swatch__fill");
+	return fillElement instanceof HTMLElement ? fillElement : null;
+};
+//#endregion
+exports.resolveColorSwatchFillElement = resolveColorSwatchFillElement;

package/dist/components/SColorPicker/utils/resolveColorSwatchFillElement.js

@@ -0,0 +1,10 @@
+//#region src/components/SColorPicker/utils/resolveColorSwatchFillElement.ts
+var resolveColorSwatchFillElement = (swatchInstance) => {
+	if (!swatchInstance) return null;
+	const swatchRoot = swatchInstance.$el;
+	if (!(swatchRoot instanceof HTMLElement)) return null;
+	const fillElement = swatchRoot.querySelector(".s-ui-color-swatch__fill");
+	return fillElement instanceof HTMLElement ? fillElement : null;
+};
+//#endregion
+export { resolveColorSwatchFillElement };

package/dist/components/SColorPicker/utils/useColorArea.cjs

@@ -0,0 +1,156 @@
+const require_colorFormatChannels = require("../../../utils/color/colorFormatChannels.cjs");
+let vue = require("vue");
+let _vueuse_core = require("@vueuse/core");
+//#region src/components/SColorPicker/utils/useColorArea.ts
+var fallbackHexColor = "#000000";
+var resolveHexColor = (hexColor) => {
+	return hexColor ?? fallbackHexColor;
+};
+var useColorArea = ({ modelValue, getEditableHex, saturationAreaRef, hueSliderRef, disabled, readonly }) => {
+	const initialHsv = require_colorFormatChannels.hexToHsvChannels(resolveHexColor(getEditableHex())) ?? {
+		hue: 0,
+		saturation: 0,
+		value: 0
+	};
+	const hue = (0, vue.ref)(initialHsv.hue);
+	const saturation = (0, vue.ref)(initialHsv.saturation);
+	const brightness = (0, vue.ref)(initialHsv.value);
+	const isInternalUpdate = (0, vue.ref)(false);
+	const isDraggingSaturation = (0, vue.ref)(false);
+	const isDraggingHue = (0, vue.ref)(false);
+	const saturationCachedRect = (0, vue.shallowRef)(null);
+	const hueCachedRect = (0, vue.shallowRef)(null);
+	const hexColor = (0, vue.computed)(() => {
+		return require_colorFormatChannels.hsvChannelsToHex({
+			hue: hue.value,
+			saturation: saturation.value,
+			value: brightness.value
+		});
+	});
+	const hueBackground = (0, vue.computed)(() => {
+		return require_colorFormatChannels.hsvChannelsToHex({
+			hue: hue.value,
+			saturation: 1,
+			value: 1
+		});
+	});
+	const setHue = (nextHue) => {
+		hue.value = Math.max(0, Math.min(360, nextHue));
+	};
+	const setSaturationBrightness = (nextSaturation, nextBrightness) => {
+		saturation.value = Math.max(0, Math.min(1, nextSaturation));
+		brightness.value = Math.max(0, Math.min(1, nextBrightness));
+	};
+	const setHexColor = (hex) => {
+		const hsvChannels = require_colorFormatChannels.hexToHsvChannels(resolveHexColor(hex));
+		if (!hsvChannels) return;
+		isInternalUpdate.value = true;
+		if (hsvChannels.saturation > 0) hue.value = hsvChannels.hue;
+		saturation.value = hsvChannels.saturation;
+		brightness.value = hsvChannels.value;
+		isInternalUpdate.value = false;
+	};
+	const syncFromModelValue = () => {
+		const editableHex = getEditableHex();
+		if (!editableHex) return;
+		if (editableHex.toUpperCase() !== hexColor.value.toUpperCase()) setHexColor(editableHex);
+	};
+	const commitHexToModel = () => {
+		const nextHexColor = hexColor.value;
+		if (getEditableHex()?.toUpperCase() === nextHexColor.toUpperCase()) return;
+		isInternalUpdate.value = true;
+		modelValue.value = nextHexColor;
+		isInternalUpdate.value = false;
+	};
+	(0, vue.watch)([
+		hue,
+		saturation,
+		brightness
+	], () => {
+		if (!isInternalUpdate.value) commitHexToModel();
+	});
+	(0, vue.watch)(modelValue, () => {
+		if (!isInternalUpdate.value) syncFromModelValue();
+	});
+	(0, vue.onMounted)(() => {
+		(0, vue.nextTick)(() => {
+			cacheSaturationRect();
+			cacheHueRect();
+			syncFromModelValue();
+		});
+	});
+	const cacheSaturationRect = () => {
+		saturationCachedRect.value = saturationAreaRef.value?.getBoundingClientRect() ?? null;
+	};
+	const cacheHueRect = () => {
+		hueCachedRect.value = hueSliderRef.value?.getBoundingClientRect() ?? null;
+	};
+	const saturationPointerStyle = (0, vue.computed)(() => {
+		const rect = saturationCachedRect.value;
+		if (!rect) return {};
+		return { transform: `translate3d(calc(${saturation.value * rect.width}px - 50%), calc(${(1 - brightness.value) * rect.height}px - 50%), 0)` };
+	});
+	const huePointerStyle = (0, vue.computed)(() => {
+		const rect = hueCachedRect.value;
+		if (!rect) return {};
+		return { transform: `translate3d(-50%, calc(${hue.value / 360 * rect.height}px - 50%), 0)` };
+	});
+	const canInteract = () => {
+		return !disabled.value && !readonly.value;
+	};
+	const updateSaturationFromEvent = (event) => {
+		const rect = saturationCachedRect.value;
+		if (!rect) return;
+		const posX = Math.max(0, Math.min(event.clientX - rect.left, rect.width));
+		const posY = Math.max(0, Math.min(event.clientY - rect.top, rect.height));
+		setSaturationBrightness(posX / rect.width, 1 - posY / rect.height);
+	};
+	const updateHueFromEvent = (event) => {
+		const rect = hueCachedRect.value;
+		if (!rect) return;
+		setHue(Math.max(0, Math.min(event.clientY - rect.top, rect.height)) / rect.height * 360);
+	};
+	const handleSaturationPointerDown = (event) => {
+		if (!canInteract()) return;
+		cacheSaturationRect();
+		isDraggingSaturation.value = true;
+		updateSaturationFromEvent(event);
+		if (event.currentTarget instanceof HTMLElement) event.currentTarget.setPointerCapture(event.pointerId);
+	};
+	const handleHuePointerDown = (event) => {
+		if (!canInteract()) return;
+		cacheHueRect();
+		isDraggingHue.value = true;
+		updateHueFromEvent(event);
+		if (event.currentTarget instanceof HTMLElement) event.currentTarget.setPointerCapture(event.pointerId);
+	};
+	const stopSaturationDragging = () => {
+		isDraggingSaturation.value = false;
+	};
+	const stopHueDragging = () => {
+		isDraggingHue.value = false;
+	};
+	(0, _vueuse_core.useEventListener)(saturationAreaRef, "pointermove", (event) => {
+		if (isDraggingSaturation.value) updateSaturationFromEvent(event);
+	});
+	(0, _vueuse_core.useEventListener)(saturationAreaRef, "pointerup", stopSaturationDragging);
+	(0, _vueuse_core.useEventListener)(saturationAreaRef, "pointercancel", stopSaturationDragging);
+	(0, _vueuse_core.useEventListener)(saturationAreaRef, "lostpointercapture", stopSaturationDragging);
+	(0, _vueuse_core.useEventListener)(hueSliderRef, "pointermove", (event) => {
+		if (isDraggingHue.value) updateHueFromEvent(event);
+	});
+	(0, _vueuse_core.useEventListener)(hueSliderRef, "pointerup", stopHueDragging);
+	(0, _vueuse_core.useEventListener)(hueSliderRef, "pointercancel", stopHueDragging);
+	(0, _vueuse_core.useEventListener)(hueSliderRef, "lostpointercapture", stopHueDragging);
+	return {
+		hexColor,
+		hueBackground,
+		saturationPointerStyle,
+		huePointerStyle,
+		handleSaturationPointerDown,
+		handleHuePointerDown,
+		syncFromModelValue
+	};
+};
+//#endregion
+exports.useColorArea = useColorArea;

package/dist/components/SColorPicker/utils/useColorArea.js

@@ -0,0 +1,156 @@
+import { hexToHsvChannels, hsvChannelsToHex } from "../../../utils/color/colorFormatChannels.js";
+import { computed, nextTick, onMounted, ref, shallowRef, watch } from "vue";
+import { useEventListener } from "@vueuse/core";
+//#region src/components/SColorPicker/utils/useColorArea.ts
+var fallbackHexColor = "#000000";
+var resolveHexColor = (hexColor) => {
+	return hexColor ?? fallbackHexColor;
+};
+var useColorArea = ({ modelValue, getEditableHex, saturationAreaRef, hueSliderRef, disabled, readonly }) => {
+	const initialHsv = hexToHsvChannels(resolveHexColor(getEditableHex())) ?? {
+		hue: 0,
+		saturation: 0,
+		value: 0
+	};
+	const hue = ref(initialHsv.hue);
+	const saturation = ref(initialHsv.saturation);
+	const brightness = ref(initialHsv.value);
+	const isInternalUpdate = ref(false);
+	const isDraggingSaturation = ref(false);
+	const isDraggingHue = ref(false);
+	const saturationCachedRect = shallowRef(null);
+	const hueCachedRect = shallowRef(null);
+	const hexColor = computed(() => {
+		return hsvChannelsToHex({
+			hue: hue.value,
+			saturation: saturation.value,
+			value: brightness.value
+		});
+	});
+	const hueBackground = computed(() => {
+		return hsvChannelsToHex({
+			hue: hue.value,
+			saturation: 1,
+			value: 1
+		});
+	});
+	const setHue = (nextHue) => {
+		hue.value = Math.max(0, Math.min(360, nextHue));
+	};
+	const setSaturationBrightness = (nextSaturation, nextBrightness) => {
+		saturation.value = Math.max(0, Math.min(1, nextSaturation));
+		brightness.value = Math.max(0, Math.min(1, nextBrightness));
+	};
+	const setHexColor = (hex) => {
+		const hsvChannels = hexToHsvChannels(resolveHexColor(hex));
+		if (!hsvChannels) return;
+		isInternalUpdate.value = true;
+		if (hsvChannels.saturation > 0) hue.value = hsvChannels.hue;
+		saturation.value = hsvChannels.saturation;
+		brightness.value = hsvChannels.value;
+		isInternalUpdate.value = false;
+	};
+	const syncFromModelValue = () => {
+		const editableHex = getEditableHex();
+		if (!editableHex) return;
+		if (editableHex.toUpperCase() !== hexColor.value.toUpperCase()) setHexColor(editableHex);
+	};
+	const commitHexToModel = () => {
+		const nextHexColor = hexColor.value;
+		if (getEditableHex()?.toUpperCase() === nextHexColor.toUpperCase()) return;
+		isInternalUpdate.value = true;
+		modelValue.value = nextHexColor;
+		isInternalUpdate.value = false;
+	};
+	watch([
+		hue,
+		saturation,
+		brightness
+	], () => {
+		if (!isInternalUpdate.value) commitHexToModel();
+	});
+	watch(modelValue, () => {
+		if (!isInternalUpdate.value) syncFromModelValue();
+	});
+	onMounted(() => {
+		nextTick(() => {
+			cacheSaturationRect();
+			cacheHueRect();
+			syncFromModelValue();
+		});
+	});
+	const cacheSaturationRect = () => {
+		saturationCachedRect.value = saturationAreaRef.value?.getBoundingClientRect() ?? null;
+	};
+	const cacheHueRect = () => {
+		hueCachedRect.value = hueSliderRef.value?.getBoundingClientRect() ?? null;
+	};
+	const saturationPointerStyle = computed(() => {
+		const rect = saturationCachedRect.value;
+		if (!rect) return {};
+		return { transform: `translate3d(calc(${saturation.value * rect.width}px - 50%), calc(${(1 - brightness.value) * rect.height}px - 50%), 0)` };
+	});
+	const huePointerStyle = computed(() => {
+		const rect = hueCachedRect.value;
+		if (!rect) return {};
+		return { transform: `translate3d(-50%, calc(${hue.value / 360 * rect.height}px - 50%), 0)` };
+	});
+	const canInteract = () => {
+		return !disabled.value && !readonly.value;
+	};
+	const updateSaturationFromEvent = (event) => {
+		const rect = saturationCachedRect.value;
+		if (!rect) return;
+		const posX = Math.max(0, Math.min(event.clientX - rect.left, rect.width));
+		const posY = Math.max(0, Math.min(event.clientY - rect.top, rect.height));
+		setSaturationBrightness(posX / rect.width, 1 - posY / rect.height);
+	};
+	const updateHueFromEvent = (event) => {
+		const rect = hueCachedRect.value;
+		if (!rect) return;
+		setHue(Math.max(0, Math.min(event.clientY - rect.top, rect.height)) / rect.height * 360);
+	};
+	const handleSaturationPointerDown = (event) => {
+		if (!canInteract()) return;
+		cacheSaturationRect();
+		isDraggingSaturation.value = true;
+		updateSaturationFromEvent(event);
+		if (event.currentTarget instanceof HTMLElement) event.currentTarget.setPointerCapture(event.pointerId);
+	};
+	const handleHuePointerDown = (event) => {
+		if (!canInteract()) return;
+		cacheHueRect();
+		isDraggingHue.value = true;
+		updateHueFromEvent(event);
+		if (event.currentTarget instanceof HTMLElement) event.currentTarget.setPointerCapture(event.pointerId);
+	};
+	const stopSaturationDragging = () => {
+		isDraggingSaturation.value = false;
+	};
+	const stopHueDragging = () => {
+		isDraggingHue.value = false;
+	};
+	useEventListener(saturationAreaRef, "pointermove", (event) => {
+		if (isDraggingSaturation.value) updateSaturationFromEvent(event);
+	});
+	useEventListener(saturationAreaRef, "pointerup", stopSaturationDragging);
+	useEventListener(saturationAreaRef, "pointercancel", stopSaturationDragging);
+	useEventListener(saturationAreaRef, "lostpointercapture", stopSaturationDragging);
+	useEventListener(hueSliderRef, "pointermove", (event) => {
+		if (isDraggingHue.value) updateHueFromEvent(event);
+	});
+	useEventListener(hueSliderRef, "pointerup", stopHueDragging);
+	useEventListener(hueSliderRef, "pointercancel", stopHueDragging);
+	useEventListener(hueSliderRef, "lostpointercapture", stopHueDragging);
+	return {
+		hexColor,
+		hueBackground,
+		saturationPointerStyle,
+		huePointerStyle,
+		handleSaturationPointerDown,
+		handleHuePointerDown,
+		syncFromModelValue
+	};
+};
+//#endregion
+export { useColorArea };

package/dist/components/SDayTimeline/SDayTimeline.types.cjs

@@ -0,0 +1,5 @@
+//#region src/components/SDayTimeline/SDayTimeline.types.ts
+/** Минут в сутках — координатная сетка таймлайна. */
+var DAY_TIMELINE_MINUTES = 1440;
+//#endregion
+exports.DAY_TIMELINE_MINUTES = DAY_TIMELINE_MINUTES;

package/dist/components/SDayTimeline/SDayTimeline.types.js

@@ -0,0 +1,5 @@
+//#region src/components/SDayTimeline/SDayTimeline.types.ts
+/** Минут в сутках — координатная сетка таймлайна. */
+var DAY_TIMELINE_MINUTES = 1440;
+//#endregion
+export { DAY_TIMELINE_MINUTES };

package/dist/components/SDayTimeline/SDayTimeline.vue.cjs

@@ -0,0 +1,6 @@
+const require_SDayTimeline_vue_vue_type_script_setup_true_lang = require("./SDayTimeline.vue_vue_type_script_setup_true_lang.cjs");
+;/* empty css                                                                  */
+//#region src/components/SDayTimeline/SDayTimeline.vue
+var SDayTimeline_default = require_SDayTimeline_vue_vue_type_script_setup_true_lang.default;
+//#endregion
+exports.default = SDayTimeline_default;

package/dist/components/SDayTimeline/SDayTimeline.vue.js

@@ -0,0 +1,6 @@
+import SDayTimeline_vue_vue_type_script_setup_true_lang_default from "./SDayTimeline.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                                */
+//#region src/components/SDayTimeline/SDayTimeline.vue
+var SDayTimeline_default = SDayTimeline_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { SDayTimeline_default as default };