@comfyorg/design-system 1.1.0 → 1.3.0-alpha.0

package/dist/common/NotificationPopup.vue.js

@@ -0,0 +1,63 @@
+import { t as Button_default } from "../shared/Button-Dj_H5v3V.js";
+import { t as cn } from "../shared/src-DTwuqov4.js";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
+// src/components/common/NotificationPopup.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-position"];
+var _hoisted_2 = { class: "flex min-h-0 flex-1 flex-col gap-4 p-4" };
+var _hoisted_3 = { class: "flex items-center gap-4" };
+var _hoisted_4 = {
+	key: 0,
+	class: "flex shrink-0 items-center justify-center rounded-lg bg-primary/90 p-3"
+};
+var _hoisted_5 = { class: "flex flex-1 flex-col gap-1 font-normal" };
+var _hoisted_6 = { class: "text-sm leading-[1.429]" };
+var _hoisted_7 = {
+	key: 0,
+	class: "text-sm leading-[1.21] text-muted-foreground"
+};
+var _hoisted_8 = {
+	key: 0,
+	class: "min-h-0 flex-1 overflow-y-auto text-sm text-muted-foreground"
+};
+var _hoisted_9 = {
+	key: 0,
+	class: "flex items-center justify-between px-4 pb-4"
+};
+var _hoisted_10 = { class: "flex items-center gap-4" };
+// src/components/common/NotificationPopup.vue
+var NotificationPopup_default = /* @__PURE__ */ defineComponent({
+	__name: "NotificationPopup",
+	props: {
+		icon: {},
+		title: {},
+		subtitle: {},
+		closeLabel: {},
+		position: { default: "bottom-left" }
+	},
+	emits: ["close"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				role: "status",
+				"data-position": __props.position,
+				class: normalizeClass(unref(cn)("pointer-events-auto absolute flex max-h-96 w-96 flex-col rounded-lg border bg-background shadow-md", __props.position === "bottom-left" && "bottom-4 left-4", __props.position === "bottom-right" && "right-4 bottom-4"))
+			}, [createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [
+				__props.icon ? (openBlock(), createElementBlock("div", _hoisted_4, [createElementVNode("i", { class: normalizeClass(unref(cn)("text-white", __props.icon)) }, null, 2)])) : createCommentVNode("", true),
+				createElementVNode("div", _hoisted_5, [createElementVNode("div", _hoisted_6, toDisplayString(__props.title), 1), __props.subtitle ? (openBlock(), createElementBlock("div", _hoisted_7, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true)]),
+				__props.closeLabel ? (openBlock(), createBlock(unref(Button_default), {
+					key: 1,
+					class: "size-6 shrink-0 self-start",
+					size: "icon-sm",
+					variant: "muted-textonly",
+					"aria-label": __props.closeLabel,
+					onClick: _cache[0] || (_cache[0] = ($event) => emit("close"))
+				}, {
+					default: withCtx(() => [..._cache[1] || (_cache[1] = [createElementVNode("i", { class: "icon-[lucide--x] size-3.5" }, null, -1)])]),
+					_: 1
+				}, 8, ["aria-label"])) : createCommentVNode("", true)
+			]), _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_8, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true)]), _ctx.$slots["footer-start"] || _ctx.$slots["footer-end"] ? (openBlock(), createElementBlock("div", _hoisted_9, [createElementVNode("div", null, [renderSlot(_ctx.$slots, "footer-start")]), createElementVNode("div", _hoisted_10, [renderSlot(_ctx.$slots, "footer-end")])])) : createCommentVNode("", true)], 10, _hoisted_1);
+		};
+	}
+});
+export { NotificationPopup_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 @@
+export { t as default } from "../shared/OverlayIcon-C-din824.js";

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,58 @@
+import { computed, createElementBlock, defineComponent, mergeProps, openBlock } from "vue";
+import createDOMPurify from "dompurify";
+// src/components/common/SanitizedHtml.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["innerHTML"];
+var _hoisted_2 = ["innerHTML"];
+// 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));
+		};
+	}
+});
+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,34 @@
+import { t as cn } from "../shared/src-DTwuqov4.js";
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref } from "vue";
+// 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"
+};
+// 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)
+			]);
+		};
+	}
+});
+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,51 @@
+import { t as cn } from "../shared/src-DTwuqov4.js";
+import { createElementBlock, defineComponent, normalizeClass, openBlock, ref, renderSlot, unref, watch } from "vue";
+import { useElementHover, useElementSize, useRafFn } from "@vueuse/core";
+// 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);
+		};
+	}
+});
+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,51 @@
+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";
+// 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)];
+}
+// 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" };
+// 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);
+		};
+	}
+});
+export { TextTickerMultiLine_default as default };

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

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    photoUrl?: string | null;
+    label: string;
+    iconClass?: string;
+    size?: 'normal' | 'large';
+};
+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/UserAvatar.vue.js

@@ -0,0 +1,45 @@
+import { t as cn } from "../shared/src-DTwuqov4.js";
+import { computed, createElementBlock, defineComponent, normalizeClass, openBlock, ref, unref, watch } from "vue";
+// src/components/common/UserAvatar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"src",
+	"alt",
+	"aria-label"
+];
+var _hoisted_2 = ["aria-label"];
+// src/components/common/UserAvatar.vue
+var UserAvatar_default = /* @__PURE__ */ defineComponent({
+	__name: "UserAvatar",
+	props: {
+		photoUrl: {},
+		label: {},
+		iconClass: { default: "size-4" },
+		size: { default: "normal" }
+	},
+	setup(__props) {
+		const imageError = ref(false);
+		const handleImageError = () => {
+			imageError.value = true;
+		};
+		const hasAvatar = computed(() => __props.photoUrl && !imageError.value);
+		watch(() => __props.photoUrl, () => {
+			imageError.value = false;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", { class: normalizeClass(unref(cn)("inline-flex aspect-square items-center justify-center overflow-hidden rounded-full bg-muted", __props.size === "large" ? "size-12" : "size-8")) }, [hasAvatar.value ? (openBlock(), createElementBlock("img", {
+				key: 0,
+				src: __props.photoUrl ?? void 0,
+				alt: __props.label,
+				"aria-label": __props.label,
+				class: "size-full object-cover",
+				onError: handleImageError
+			}, null, 40, _hoisted_1)) : (openBlock(), createElementBlock("i", {
+				key: 1,
+				"data-testid": "avatar-icon",
+				"aria-label": __props.label,
+				class: normalizeClass(unref(cn)("icon-[lucide--user]", __props.iconClass))
+			}, null, 10, _hoisted_2))], 2);
+		};
+	}
+});
+export { UserAvatar_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,14 @@
+import { t as _plugin_vue_export_helper_default } from "../shared/_plugin-vue_export-helper-DjkACiAr.js";
+import { createElementBlock, openBlock } from "vue";
+// 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]]);
+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,139 @@
+import { t as cn } from "../shared/src-DTwuqov4.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, unref, useTemplateRef, watchEffect } from "vue";
+import { useEventListener, usePreferredReducedMotion } from "@vueuse/core";
+// 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;
+// 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);
+		};
+	}
+});
+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;
+    };
+};

package/dist/common/ViewportWidgetShell.vue.js

@@ -0,0 +1,56 @@
+import { t as cn } from "../shared/src-DTwuqov4.js";
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, ref, renderSlot, unref, withModifiers } from "vue";
+// src/components/common/ViewportWidgetShell.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "pointer-events-none absolute inset-x-0 top-0" };
+var _hoisted_2 = {
+	key: 0,
+	class: "pointer-events-none absolute inset-x-0 bottom-0"
+};
+// src/components/common/ViewportWidgetShell.vue
+var ViewportWidgetShell_default = /* @__PURE__ */ defineComponent({
+	__name: "ViewportWidgetShell",
+	props: { bottomClass: {} },
+	emits: ["mouseenter", "mouseleave"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const container = ref(null);
+		const toolbar = ref(null);
+		function focusContainer() {
+			container.value?.focus();
+		}
+		__expose({
+			container,
+			toolbar
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "relative size-full min-h-[300px]",
+				onPointerdown: _cache[5] || (_cache[5] = withModifiers(() => {}, ["stop"])),
+				onMousedown: _cache[6] || (_cache[6] = withModifiers(() => {}, ["stop"]))
+			}, [
+				createElementVNode("div", {
+					ref_key: "container",
+					ref: container,
+					class: "relative size-full",
+					"data-capture-wheel": "true",
+					tabindex: "-1",
+					onPointerdown: withModifiers(focusContainer, ["stop"]),
+					onContextmenu: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop", "prevent"])),
+					onMouseenter: _cache[1] || (_cache[1] = ($event) => emit("mouseenter")),
+					onMouseleave: _cache[2] || (_cache[2] = ($event) => emit("mouseleave"))
+				}, null, 544),
+				createElementVNode("div", _hoisted_1, [createElementVNode("div", {
+					ref_key: "toolbar",
+					ref: toolbar,
+					class: "pointer-events-auto flex h-10 items-center gap-1 bg-popover px-2",
+					onWheel: _cache[3] || (_cache[3] = withModifiers(() => {}, ["stop"]))
+				}, [renderSlot(_ctx.$slots, "top")], 544)]),
+				_ctx.$slots.bottom ? (openBlock(), createElementBlock("div", _hoisted_2, [createElementVNode("div", {
+					class: normalizeClass(unref(cn)("pointer-events-auto flex h-10 items-center gap-1 bg-popover px-2", __props.bottomClass)),
+					onWheel: _cache[4] || (_cache[4] = withModifiers(() => {}, ["stop"]))
+				}, [renderSlot(_ctx.$slots, "bottom")], 34)])) : createCommentVNode("", true)
+			], 32);
+		};
+	}
+});
+export { ViewportWidgetShell_default as default };