@comfyorg/design-system 1.1.0 → 1.2.0

package/dist/common/MarkdownText.vue.js

@@ -0,0 +1,93 @@
+import { Fragment, computed, createElementBlock, createElementVNode, defineComponent, openBlock, renderList, toDisplayString } from "vue";
+//#region src/components/common/MarkdownText.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "wrap-break-word" };
+var _hoisted_2 = ["textContent"];
+var _hoisted_3 = { key: 1 };
+var _hoisted_4 = ["href"];
+var _hoisted_5 = { class: "text-blue-600" };
+var _hoisted_6 = { key: 1 };
+var _hoisted_7 = { key: 2 };
+var _hoisted_8 = {
+	key: 3,
+	class: "rounded-sm px-1 py-0.5 text-xs"
+};
+var _hoisted_9 = { key: 4 };
+//#endregion
+//#region src/components/common/MarkdownText.vue
+var MarkdownText_default = /* @__PURE__ */ defineComponent({
+	__name: "MarkdownText",
+	props: { text: {} },
+	setup(__props) {
+		const hasMarkdown = computed(() => {
+			return /(\[.*?\]\(.*?\)|(\*\*|__)(.*?)(\*\*|__)|(\*|_)(.*?)(\*|_)|`(.*?)`)/.test(__props.text);
+		});
+		const parsedSegments = computed(() => {
+			if (!hasMarkdown.value) return [{
+				type: "text",
+				text: __props.text
+			}];
+			const segments = [];
+			const remainingText = __props.text;
+			let lastIndex = 0;
+			const linkRegex = /\[(.*?)\]\((.*?)\)/g;
+			let linkMatch;
+			while ((linkMatch = linkRegex.exec(remainingText)) !== null) {
+				if (linkMatch.index > lastIndex) segments.push({
+					type: "text",
+					text: remainingText.substring(lastIndex, linkMatch.index)
+				});
+				segments.push({
+					type: "link",
+					text: linkMatch[1],
+					url: linkMatch[2]
+				});
+				lastIndex = linkMatch.index + linkMatch[0].length;
+			}
+			if (lastIndex < remainingText.length) {
+				let rest = remainingText.substring(lastIndex);
+				rest = rest.replace(/(\*\*|__)(.*?)(\*\*|__)/g, (_, __, p2) => {
+					segments.push({
+						type: "bold",
+						text: p2
+					});
+					return "";
+				});
+				rest = rest.replace(/(\*|_)(.*?)(\*|_)/g, (_, __, p2) => {
+					segments.push({
+						type: "italic",
+						text: p2
+					});
+					return "";
+				});
+				rest = rest.replace(/`(.*?)`/g, (_, p1) => {
+					segments.push({
+						type: "code",
+						text: p1
+					});
+					return "";
+				});
+				if (rest) segments.push({
+					type: "text",
+					text: rest
+				});
+			}
+			return segments;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [!hasMarkdown.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				textContent: toDisplayString(__props.text)
+			}, null, 8, _hoisted_2)) : (openBlock(), createElementBlock("div", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(parsedSegments.value, (segment, index) => {
+				return openBlock(), createElementBlock(Fragment, { key: index }, [segment.type === "link" && "url" in segment ? (openBlock(), createElementBlock("a", {
+					key: 0,
+					href: segment.url,
+					target: "_blank",
+					rel: "noopener noreferrer",
+					class: "hover:underline"
+				}, [createElementVNode("span", _hoisted_5, toDisplayString(segment.text), 1)], 8, _hoisted_4)) : segment.type === "bold" ? (openBlock(), createElementBlock("strong", _hoisted_6, toDisplayString(segment.text), 1)) : segment.type === "italic" ? (openBlock(), createElementBlock("em", _hoisted_7, toDisplayString(segment.text), 1)) : segment.type === "code" ? (openBlock(), createElementBlock("code", _hoisted_8, toDisplayString(segment.text), 1)) : (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(segment.text), 1))], 64);
+			}), 128))]))]);
+		};
+	}
+});
+//#endregion
+export { MarkdownText_default as default };

package/dist/common/MarqueeLine.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/common/MarqueeLine.vue.js

@@ -0,0 +1,12 @@
+import { t as _plugin_vue_export_helper_default } from "../shared/_plugin-vue_export-helper-BOaGB7Aw.js";
+import { createElementBlock, createElementVNode, openBlock, renderSlot } from "vue";
+//#region src/components/common/MarqueeLine.vue
+var _sfc_main = {};
+var _hoisted_1 = { class: "@container overflow-hidden mask-[linear-gradient(to_right,black_70%,transparent)] motion-safe:group-hover:mask-none" };
+var _hoisted_2 = { class: "inline-block min-w-full whitespace-nowrap [--_marquee-end:min(calc(-100%+100cqw),0px)] motion-safe:group-hover:animate-[marquee-scroll_2s_linear_infinite_alternate]" };
+function _sfc_render(_ctx, _cache) {
+	return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "default")])]);
+}
+var MarqueeLine_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render]]);
+//#endregion
+export { MarqueeLine_default as default };

package/dist/common/OverlayIcon.vue.d.ts

@@ -0,0 +1,13 @@
+type Position = 'top' | 'bottom' | 'left' | 'right';
+export interface OverlayIconProps {
+    mainIcon: string;
+    subIcon: string;
+    positionX?: Position;
+    positionY?: Position;
+    offsetX?: number;
+    offsetY?: number;
+    subIconScale?: number;
+}
+declare const __VLS_export: import('vue').DefineComponent<OverlayIconProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<OverlayIconProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/common/OverlayIcon.vue.js

@@ -0,0 +1,2 @@
+import { t as OverlayIcon_default } from "../shared/OverlayIcon-DntJI-mm.js";
+export { OverlayIcon_default as default };

package/dist/common/SanitizedHtml.vue.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    html: string;
+    as?: 'div' | 'span';
+    profile?: 'default' | 'highlighted-code';
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/common/SanitizedHtml.vue.js

@@ -0,0 +1,60 @@
+import { computed, createElementBlock, defineComponent, mergeProps, openBlock } from "vue";
+import createDOMPurify from "dompurify";
+//#region src/components/common/SanitizedHtml.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["innerHTML"];
+var _hoisted_2 = ["innerHTML"];
+//#endregion
+//#region src/components/common/SanitizedHtml.vue
+var SanitizedHtml_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "SanitizedHtml",
+	props: {
+		html: {},
+		as: { default: "div" },
+		profile: { default: "default" }
+	},
+	setup(__props) {
+		const purifier = createDOMPurify(window);
+		purifier.addHook("uponSanitizeAttribute", (node, data) => {
+			if (data.attrName !== "style") return;
+			if (__props.profile !== "highlighted-code" || !(node instanceof HTMLSpanElement)) {
+				data.keepAttr = false;
+				return;
+			}
+			const source = document.createElement("span").style;
+			const allowed = document.createElement("span").style;
+			source.cssText = data.attrValue;
+			for (const property of [
+				"color",
+				"font-style",
+				"font-weight"
+			]) allowed.setProperty(property, source.getPropertyValue(property));
+			data.attrValue = allowed.cssText;
+			data.keepAttr = data.attrValue.length > 0;
+		});
+		const sanitizedHtml = computed(() => purifier.sanitize(__props.html, {
+			ADD_TAGS: ["video", "source"],
+			ADD_ATTR: [
+				"controls",
+				"autoplay",
+				"loop",
+				"muted",
+				"preload",
+				"poster",
+				"target",
+				"rel"
+			],
+			FORBID_TAGS: [
+				"form",
+				"input",
+				"button"
+			],
+			FORBID_ATTR: __props.profile === "highlighted-code" ? [] : ["style"]
+		}));
+		return (_ctx, _cache) => {
+			return __props.as === "span" ? (openBlock(), createElementBlock("span", mergeProps({ key: 0 }, _ctx.$attrs, { innerHTML: sanitizedHtml.value }), null, 16, _hoisted_1)) : (openBlock(), createElementBlock("div", mergeProps({ key: 1 }, _ctx.$attrs, { innerHTML: sanitizedHtml.value }), null, 16, _hoisted_2));
+		};
+	}
+});
+//#endregion
+export { SanitizedHtml_default as default };

package/dist/common/TextDivider.vue.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    text: string;
+    position?: 'left' | 'right';
+    type?: 'solid' | 'dashed' | 'dotted';
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/common/TextDivider.vue.js

@@ -0,0 +1,36 @@
+import { t as cn } from "../shared/src-CnJ6AzLP.js";
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref } from "vue";
+//#region src/components/common/TextDivider.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex items-center" };
+var _hoisted_2 = {
+	key: 0,
+	class: "mr-2 shrink-0"
+};
+var _hoisted_3 = {
+	key: 1,
+	class: "ml-2 shrink-0"
+};
+//#endregion
+//#region src/components/common/TextDivider.vue
+var TextDivider_default = /* @__PURE__ */ defineComponent({
+	__name: "TextDivider",
+	props: {
+		text: {},
+		position: { default: "left" },
+		type: { default: "solid" }
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				__props.position === "left" ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(__props.text), 1)) : createCommentVNode("", true),
+				createElementVNode("div", {
+					role: "separator",
+					class: normalizeClass(unref(cn)("grow border-0 border-t", __props.type === "dashed" && "border-dashed", __props.type === "dotted" && "border-dotted"))
+				}, null, 2),
+				__props.position === "right" ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.text), 1)) : createCommentVNode("", true)
+			]);
+		};
+	}
+});
+//#endregion
+export { TextDivider_default as default };

package/dist/common/TextTicker.vue.d.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    /** Scroll speed in pixels per second */
+    speed?: number;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/common/TextTicker.vue.js

@@ -0,0 +1,53 @@
+import { t as cn } from "../shared/src-CnJ6AzLP.js";
+import { createElementBlock, defineComponent, normalizeClass, openBlock, ref, renderSlot, unref, watch } from "vue";
+import { useElementHover, useElementSize, useRafFn } from "@vueuse/core";
+//#endregion
+//#region src/components/common/TextTicker.vue
+var TextTicker_default = /* @__PURE__ */ defineComponent({
+	__name: "TextTicker",
+	props: { speed: { default: 70 } },
+	setup(__props) {
+		const containerRef = ref(null);
+		const isHovered = useElementHover(containerRef, { delayEnter: 350 });
+		const { width: containerWidth } = useElementSize(containerRef);
+		const isScrolling = ref(false);
+		let scrollStartTime = 0;
+		let overflowAmount = 0;
+		const { pause, resume } = useRafFn(({ timestamp }) => {
+			const el = containerRef.value;
+			if (!el || overflowAmount <= 0) return pause();
+			const elapsed = timestamp - scrollStartTime;
+			const duration = overflowAmount / __props.speed * 1e3;
+			const progress = Math.min(elapsed / duration, 1);
+			el.scrollLeft = overflowAmount * progress;
+			if (progress >= 1) pause();
+		}, { immediate: false });
+		function startScroll() {
+			const el = containerRef.value;
+			if (!el) return;
+			overflowAmount = el.scrollWidth - containerWidth.value;
+			if (overflowAmount <= 0) return;
+			isScrolling.value = true;
+			scrollStartTime = performance.now();
+			resume();
+		}
+		function stopScroll() {
+			pause();
+			if (containerRef.value) containerRef.value.scrollLeft = 0;
+			isScrolling.value = false;
+		}
+		watch(isHovered, (hovered) => {
+			if (hovered) startScroll();
+			else stopScroll();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "containerRef",
+				ref: containerRef,
+				class: normalizeClass(unref(cn)("overflow-hidden whitespace-nowrap", !isScrolling.value && "text-ellipsis"))
+			}, [renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+//#endregion
+export { TextTicker_default as default };

package/dist/common/TextTickerMultiLine.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    text: string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/common/TextTickerMultiLine.vue.js

@@ -0,0 +1,54 @@
+import MarqueeLine_default from "./MarqueeLine.vue.js";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createTextVNode, defineComponent, openBlock, renderList, toDisplayString, useTemplateRef, withCtx } from "vue";
+import { useElementSize } from "@vueuse/core";
+//#region src/components/common/textTickerUtils.ts
+function splitTextAtWordBoundary(text, ratio) {
+	if (ratio >= 1) return [text, ""];
+	const estimate = Math.floor(text.length * ratio);
+	const before = text.lastIndexOf(" ", estimate);
+	const breakIndex = before > 0 ? before : text.indexOf(" ");
+	if (breakIndex <= 0) return [text, ""];
+	return [text.substring(0, breakIndex), text.substring(breakIndex + 1)];
+}
+//#endregion
+//#region src/components/common/TextTickerMultiLine.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["textContent"];
+var _hoisted_2 = { class: "flex w-full flex-col" };
+//#endregion
+//#region src/components/common/TextTickerMultiLine.vue
+var TextTickerMultiLine_default = /* @__PURE__ */ defineComponent({
+	__name: "TextTickerMultiLine",
+	props: { text: {} },
+	setup(__props) {
+		const measureRef = useTemplateRef("measureRef");
+		const containerRef = useTemplateRef("containerRef");
+		const { width: textWidth } = useElementSize(measureRef);
+		const { width: containerWidth } = useElementSize(containerRef);
+		const lines = computed(() => {
+			if (!textWidth.value || !containerWidth.value) return [__props.text];
+			const safeRenderWidth = containerWidth.value - 30;
+			if (textWidth.value <= safeRenderWidth) return [__props.text];
+			return splitTextAtWordBoundary(__props.text, safeRenderWidth / textWidth.value);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "containerRef",
+				ref: containerRef,
+				class: "w-full"
+			}, [createElementVNode("div", {
+				ref_key: "measureRef",
+				ref: measureRef,
+				class: "pointer-events-none invisible absolute inset-x-0 top-0 overflow-hidden whitespace-nowrap",
+				"aria-hidden": "true",
+				textContent: toDisplayString(__props.text)
+			}, null, 8, _hoisted_1), createElementVNode("div", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(lines.value, (line, index) => {
+				return openBlock(), createBlock(MarqueeLine_default, { key: index }, {
+					default: withCtx(() => [createTextVNode(toDisplayString(line), 1)]),
+					_: 2
+				}, 1024);
+			}), 128))])], 512);
+		};
+	}
+});
+//#endregion
+export { TextTickerMultiLine_default as default };

package/dist/common/VerticalDivider.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/common/VerticalDivider.vue.js

@@ -0,0 +1,15 @@
+import { t as _plugin_vue_export_helper_default } from "../shared/_plugin-vue_export-helper-BOaGB7Aw.js";
+import { createElementBlock, openBlock } from "vue";
+//#region src/components/common/VerticalDivider.vue
+var _sfc_main = {};
+var _hoisted_1 = {
+	role: "separator",
+	"aria-orientation": "vertical",
+	class: "h-6 w-px self-center bg-border"
+};
+function _sfc_render(_ctx, _cache) {
+	return openBlock(), createElementBlock("div", _hoisted_1);
+}
+var VerticalDivider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render]]);
+//#endregion
+export { VerticalDivider_default as default };

package/dist/common/VideoCompareSlider.vue.d.ts

@@ -0,0 +1,24 @@
+type __VLS_Props = {
+    baseSrc: string;
+    overlaySrc: string;
+    label: string;
+    baseMuted?: boolean;
+    overlayMuted?: boolean;
+    startPosition?: number;
+};
+declare function syncPlayback(): void;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
+    syncPlayback: typeof syncPlayback;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/common/VideoCompareSlider.vue.js

@@ -0,0 +1,141 @@
+import { t as cn } from "../shared/src-CnJ6AzLP.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, unref, useTemplateRef, watchEffect } from "vue";
+import { useEventListener, usePreferredReducedMotion } from "@vueuse/core";
+//#region src/components/common/VideoCompareSlider.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = [
+	"src",
+	"muted",
+	"autoplay"
+];
+var _hoisted_3 = [
+	"src",
+	"muted",
+	"autoplay"
+];
+var _hoisted_4 = ["aria-label", "aria-valuenow"];
+var KEY_STEP = 5;
+//#endregion
+//#region src/components/common/VideoCompareSlider.vue
+var VideoCompareSlider_default = /* @__PURE__ */ defineComponent({
+	__name: "VideoCompareSlider",
+	props: {
+		baseSrc: {},
+		overlaySrc: {},
+		label: {},
+		baseMuted: {
+			type: Boolean,
+			default: true
+		},
+		overlayMuted: {
+			type: Boolean,
+			default: true
+		},
+		startPosition: { default: 50 }
+	},
+	setup(__props, { expose: __expose }) {
+		const root = useTemplateRef("root");
+		const baseVideo = useTemplateRef("baseVideo");
+		const overlayVideo = useTemplateRef("overlayVideo");
+		const position = ref(__props.startPosition);
+		function setPosition(value) {
+			position.value = Math.max(0, Math.min(100, value));
+		}
+		function positionFromPointer(event) {
+			const el = root.value;
+			if (!el) return;
+			const rect = el.getBoundingClientRect();
+			if (rect.width === 0) return;
+			setPosition((event.clientX - rect.left) / rect.width * 100);
+		}
+		const isDragging = ref(false);
+		useEventListener(root, "pointerdown", (event) => {
+			if (event.target.closest("button")) return;
+			isDragging.value = true;
+			root.value?.setPointerCapture(event.pointerId);
+			positionFromPointer(event);
+		});
+		useEventListener(root, "pointermove", (event) => {
+			if (isDragging.value) positionFromPointer(event);
+		});
+		function endDrag(event) {
+			isDragging.value = false;
+			root.value?.releasePointerCapture(event.pointerId);
+		}
+		useEventListener(root, "pointerup", endDrag);
+		useEventListener(root, "pointercancel", endDrag);
+		const reducedMotion = usePreferredReducedMotion();
+		const motionAllowed = computed(() => reducedMotion.value !== "reduce");
+		watchEffect(() => {
+			if (motionAllowed.value) return;
+			baseVideo.value?.pause();
+			overlayVideo.value?.pause();
+		});
+		function onKeydown(event) {
+			if (event.key === "ArrowLeft") setPosition(position.value - KEY_STEP);
+			else if (event.key === "ArrowRight") setPosition(position.value + KEY_STEP);
+			else if (event.key === "Home") setPosition(0);
+			else if (event.key === "End") setPosition(100);
+			else return;
+			event.preventDefault();
+		}
+		function syncPlayback() {
+			if (baseVideo.value && overlayVideo.value) overlayVideo.value.currentTime = baseVideo.value.currentTime;
+		}
+		__expose({ syncPlayback });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "root",
+				ref: root,
+				class: normalizeClass(unref(cn)("relative touch-none overflow-hidden select-none", isDragging.value ? "cursor-grabbing" : "cursor-grab")),
+				role: "group",
+				"aria-label": __props.label
+			}, [
+				createElementVNode("video", {
+					ref_key: "baseVideo",
+					ref: baseVideo,
+					src: __props.baseSrc,
+					class: "pointer-events-none absolute inset-0 size-full object-cover",
+					muted: __props.baseMuted,
+					autoplay: motionAllowed.value,
+					loop: "",
+					playsinline: "",
+					"aria-hidden": "true",
+					"data-testid": "compare-clip"
+				}, null, 8, _hoisted_2),
+				createElementVNode("div", {
+					class: "absolute inset-0 overflow-hidden",
+					style: normalizeStyle({ clipPath: `inset(0 ${100 - position.value}% 0 0)` })
+				}, [createElementVNode("video", {
+					ref_key: "overlayVideo",
+					ref: overlayVideo,
+					src: __props.overlaySrc,
+					class: "pointer-events-none absolute inset-0 size-full object-cover",
+					muted: __props.overlayMuted,
+					autoplay: motionAllowed.value,
+					loop: "",
+					playsinline: "",
+					"aria-hidden": "true",
+					"data-testid": "compare-clip"
+				}, null, 8, _hoisted_3)], 4),
+				createElementVNode("div", {
+					class: "absolute inset-y-0 w-0.5 -translate-x-1/2 bg-white/90 shadow-lg outline-none focus-visible:ring-2 focus-visible:ring-white",
+					style: normalizeStyle({ left: `${position.value}%` }),
+					role: "slider",
+					tabindex: "0",
+					"aria-label": __props.label,
+					"aria-valuemin": "0",
+					"aria-valuemax": "100",
+					"aria-valuenow": Math.round(position.value),
+					onKeydown
+				}, [..._cache[0] || (_cache[0] = [createElementVNode("span", { class: "absolute top-1/2 left-1/2 flex size-6 -translate-1/2 items-center justify-center rounded-full bg-white/90 shadow-sm" }, [createElementVNode("i", {
+					class: "icon-[lucide--chevrons-left-right] size-3.5 text-black",
+					"aria-hidden": "true"
+				})], -1)])], 44, _hoisted_4),
+				renderSlot(_ctx.$slots, "default")
+			], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { VideoCompareSlider_default as default };

package/dist/common/ViewportWidgetShell.vue.d.ts

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    bottomClass?: string;
+};
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    top?: (props: typeof __VLS_1) => any;
+} & {
+    bottom?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
+    container: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+    toolbar: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    mouseenter: () => any;
+    mouseleave: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onMouseenter?: (() => any) | undefined;
+    onMouseleave?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};