@comfyorg/design-system 1.1.0 → 1.2.0

package/dist/input/Input.vue.d.ts

@@ -0,0 +1,21 @@
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+};
+type __VLS_ModelProps = {
+    modelValue?: string | number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {
+    focus: () => void | undefined;
+    select: () => void | undefined;
+    blur: () => void | undefined;
+    setSelectionRange: (start: number, end: number) => void | undefined;
+    selectAll: () => void | undefined;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/input/Input.vue.js

@@ -0,0 +1,2 @@
+import { t as Input_default } from "../shared/Input-39RLwDr2.js";
+export { Input_default as default };

package/dist/input/PasswordInput.vue.d.ts

@@ -0,0 +1,18 @@
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    hidePasswordLabel: string;
+    showPasswordLabel: string;
+    class?: HTMLAttributes['class'];
+    disabled?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/input/PasswordInput.vue.js

@@ -0,0 +1,68 @@
+import { t as InputGroup_default } from "../shared/InputGroup-kjQKkhyB.js";
+import { t as InputGroupAddon_default } from "../shared/InputGroupAddon-DLDRT0CQ.js";
+import { t as InputGroupButton_default } from "../shared/InputGroupButton-BoEp2apg.js";
+import { t as InputGroupInput_default } from "../shared/InputGroupInput-E2MlEVUU.js";
+import { createBlock, createElementVNode, createVNode, defineComponent, mergeModels, mergeProps, normalizeClass, openBlock, ref, unref, useModel, withCtx } from "vue";
+//#endregion
+//#region src/components/input/PasswordInput.vue
+var PasswordInput_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "PasswordInput",
+	props: /*@__PURE__*/ mergeModels({
+		hidePasswordLabel: {},
+		showPasswordLabel: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const modelValue = useModel(__props, "modelValue");
+		const visible = ref(false);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(InputGroup_default), { class: normalizeClass(__props.class) }, {
+				default: withCtx(() => [createVNode(unref(InputGroupInput_default), mergeProps({
+					modelValue: modelValue.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event)
+				}, _ctx.$attrs, {
+					type: visible.value ? "text" : "password",
+					disabled: __props.disabled
+				}), null, 16, [
+					"modelValue",
+					"type",
+					"disabled"
+				]), createVNode(unref(InputGroupAddon_default), { align: "inline-end" }, {
+					default: withCtx(() => [createVNode(unref(InputGroupButton_default), {
+						size: "icon-sm",
+						disabled: __props.disabled,
+						"aria-label": visible.value ? __props.hidePasswordLabel : __props.showPasswordLabel,
+						"aria-pressed": visible.value,
+						onClick: _cache[1] || (_cache[1] = ($event) => visible.value = !visible.value)
+					}, {
+						default: withCtx(() => [createElementVNode("i", { class: normalizeClass(visible.value ? "icon-[lucide--eye-off]" : "icon-[lucide--eye]") }, null, 2)]),
+						_: 1
+					}, 8, [
+						"disabled",
+						"aria-label",
+						"aria-pressed"
+					])]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["class"]);
+		};
+	}
+});
+//#endregion
+export { PasswordInput_default as default };

package/dist/input-group/InputGroup.vue.d.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+};
+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/input-group/InputGroup.vue.js

@@ -0,0 +1,2 @@
+import { t as InputGroup_default } from "../shared/InputGroup-kjQKkhyB.js";
+export { InputGroup_default as default };

package/dist/input-group/InputGroupAddon.vue.d.ts

@@ -0,0 +1,19 @@
+import { HTMLAttributes } from 'vue';
+import { InputGroupAddonVariants } from './inputGroup.variants';
+type __VLS_Props = {
+    align?: InputGroupAddonVariants['align'];
+    class?: HTMLAttributes['class'];
+};
+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/input-group/InputGroupAddon.vue.js

@@ -0,0 +1,2 @@
+import { t as InputGroupAddon_default } from "../shared/InputGroupAddon-DLDRT0CQ.js";
+export { InputGroupAddon_default as default };

package/dist/input-group/InputGroupButton.vue.d.ts

@@ -0,0 +1,21 @@
+import { HTMLAttributes } from 'vue';
+import { ButtonVariants } from '@comfyorg/design-system/button.variants';
+import { InputGroupButtonVariants } from './inputGroup.variants';
+type __VLS_Props = {
+    variant?: ButtonVariants['variant'];
+    size?: InputGroupButtonVariants['size'];
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => 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/input-group/InputGroupButton.vue.js

@@ -0,0 +1,2 @@
+import { t as InputGroupButton_default } from "../shared/InputGroupButton-BoEp2apg.js";
+export { InputGroupButton_default as default };

package/dist/input-group/InputGroupInput.vue.d.ts

@@ -0,0 +1,15 @@
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+};
+type __VLS_ModelProps = {
+    modelValue?: string | number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/input-group/InputGroupInput.vue.js

@@ -0,0 +1,2 @@
+import { t as InputGroupInput_default } from "../shared/InputGroupInput-E2MlEVUU.js";
+export { InputGroupInput_default as default };

package/dist/input-group/inputGroup.variants.d.ts

@@ -0,0 +1,21 @@
+import { VariantProps } from 'cva';
+export declare const inputGroupAddonVariants: (props?: ({
+    align?: "inline-start" | "inline-end" | undefined;
+} & ({
+    class?: import('cva').ClassValue;
+    className?: never;
+} | {
+    class?: never;
+    className?: import('cva').ClassValue;
+})) | undefined) => string;
+export type InputGroupAddonVariants = VariantProps<typeof inputGroupAddonVariants>;
+export declare const inputGroupButtonVariants: (props?: ({
+    size?: "sm" | "xs" | "icon-xs" | "icon-sm" | undefined;
+} & ({
+    class?: import('cva').ClassValue;
+    className?: never;
+} | {
+    class?: never;
+    className?: import('cva').ClassValue;
+})) | undefined) => string;
+export type InputGroupButtonVariants = VariantProps<typeof inputGroupButtonVariants>;

package/dist/input-group/inputGroup.variants.js

@@ -0,0 +1,22 @@
+import { cva } from "cva";
+//#region src/components/input-group/inputGroup.variants.ts
+var inputGroupAddonVariants = cva({
+	base: "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-has-[[data-slot=input-group-control]:disabled]/input-group:opacity-50",
+	variants: { align: {
+		"inline-start": "order-first pl-3 has-[>button]:pl-1",
+		"inline-end": "order-last pr-3 has-[>button]:pr-1"
+	} },
+	defaultVariants: { align: "inline-start" }
+});
+var inputGroupButtonVariants = cva({
+	base: "flex items-center gap-2 text-sm",
+	variants: { size: {
+		xs: "h-6 gap-1 rounded-sm px-2",
+		sm: "h-8 gap-1.5 rounded-md px-2.5",
+		"icon-xs": "size-6 rounded-sm p-0",
+		"icon-sm": "size-8 p-0"
+	} },
+	defaultVariants: { size: "xs" }
+});
+//#endregion
+export { inputGroupAddonVariants, inputGroupButtonVariants };

package/dist/knob/Knob.vue.d.ts

@@ -0,0 +1,19 @@
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+    disabled?: boolean;
+    max?: number;
+    min?: number;
+    step?: number;
+};
+type __VLS_ModelProps = {
+    modelValue: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/knob/Knob.vue.js

@@ -0,0 +1,124 @@
+import { t as cn } from "../shared/src-CnJ6AzLP.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, mergeModels, normalizeClass, openBlock, unref, useModel, useTemplateRef } from "vue";
+//#region src/components/knob/Knob.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"tabindex",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-valuenow",
+	"aria-disabled"
+];
+var _hoisted_2 = {
+	viewBox: "0 0 32 32",
+	class: "size-full rotate-[-225deg]"
+};
+var _hoisted_3 = ["stroke-dashoffset"];
+//#endregion
+//#region src/components/knob/Knob.vue
+var Knob_default = /* @__PURE__ */ defineComponent({
+	__name: "Knob",
+	props: /*@__PURE__*/ mergeModels({
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		max: { default: 100 },
+		min: { default: 0 },
+		step: { default: 1 }
+	}, {
+		"modelValue": { required: true },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const modelValue = useModel(__props, "modelValue");
+		const root = useTemplateRef("root");
+		const progress = computed(() => __props.max === __props.min ? 0 : (modelValue.value - __props.min) / (__props.max - __props.min));
+		const dashOffset = computed(() => 75 * (1 - progress.value));
+		function setValue(value) {
+			if (__props.disabled) return;
+			const stepped = __props.step ? Math.round((value - __props.min) / __props.step) * __props.step + __props.min : value;
+			modelValue.value = Math.min(__props.max, Math.max(__props.min, stepped));
+		}
+		function updateFromPointer(event) {
+			const bounds = root.value?.getBoundingClientRect();
+			if (!bounds) return;
+			const x = event.clientX - bounds.left - bounds.width / 2;
+			const y = event.clientY - bounds.top - bounds.height / 2;
+			const clockwise = (Math.atan2(y, x) * 180 / Math.PI + 225 + 360) % 360;
+			const position = clockwise > 315 ? 0 : clockwise / 270;
+			setValue(__props.min + position * (__props.max - __props.min));
+		}
+		function onPointerDown(event) {
+			root.value?.setPointerCapture(event.pointerId);
+			updateFromPointer(event);
+		}
+		function keyboardTarget(key) {
+			switch (key) {
+				case "ArrowUp":
+				case "ArrowRight": return modelValue.value + __props.step;
+				case "ArrowDown":
+				case "ArrowLeft": return modelValue.value - __props.step;
+				case "PageUp": return modelValue.value + 10 * __props.step;
+				case "PageDown": return modelValue.value - 10 * __props.step;
+				case "Home": return __props.min;
+				case "End": return __props.max;
+			}
+		}
+		function onKeydown(event) {
+			const target = keyboardTarget(event.key);
+			if (target === void 0) return;
+			event.preventDefault();
+			setValue(target);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "root",
+				ref: root,
+				role: "slider",
+				tabindex: __props.disabled ? -1 : 0,
+				"aria-valuemin": __props.min,
+				"aria-valuemax": __props.max,
+				"aria-valuenow": modelValue.value,
+				"aria-disabled": __props.disabled || void 0,
+				class: normalizeClass(unref(cn)("size-12 cursor-pointer touch-none outline-none", __props.disabled && "cursor-not-allowed opacity-50", __props.class)),
+				onKeydown,
+				onPointerdown: onPointerDown,
+				onPointermove: _cache[0] || (_cache[0] = (event) => root.value?.hasPointerCapture(event.pointerId) && updateFromPointer(event))
+			}, [(openBlock(), createElementBlock("svg", _hoisted_2, [_cache[1] || (_cache[1] = createElementVNode("circle", {
+				"data-testid": "knob-track",
+				cx: "16",
+				cy: "16",
+				r: "12",
+				pathLength: "100",
+				fill: "none",
+				stroke: "currentColor",
+				"stroke-width": "3",
+				"stroke-dasharray": "75 25",
+				class: "text-secondary"
+			}, null, -1)), createElementVNode("circle", {
+				"data-testid": "knob-value",
+				cx: "16",
+				cy: "16",
+				r: "12",
+				pathLength: "100",
+				fill: "none",
+				stroke: "currentColor",
+				"stroke-width": "3",
+				"stroke-linecap": "round",
+				"stroke-dasharray": "75 100",
+				"stroke-dashoffset": dashOffset.value,
+				class: "text-primary"
+			}, null, 8, _hoisted_3)]))], 42, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { Knob_default as default };

package/dist/label/Label.vue.d.ts

@@ -0,0 +1,18 @@
+import { LabelProps } from 'reka-ui';
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = LabelProps & {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => 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/label/Label.vue.js

@@ -0,0 +1,2 @@
+import { t as Label_default } from "../shared/Label-Cx_lFofI.js";
+export { Label_default as default };

package/dist/media/AudioPreview.vue.d.ts

@@ -0,0 +1,6 @@
+interface AudioPreviewProps {
+    readonly audioUrls: readonly string[];
+}
+declare const __VLS_export: import('vue').DefineComponent<AudioPreviewProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<AudioPreviewProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/media/AudioPreview.vue.js

@@ -0,0 +1,28 @@
+import { Fragment, createCommentVNode, createElementBlock, defineComponent, openBlock, renderList } from "vue";
+//#region src/components/media/AudioPreview.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "flex flex-col gap-2 px-2"
+};
+var _hoisted_2 = ["src"];
+//#endregion
+//#region src/components/media/AudioPreview.vue
+var AudioPreview_default = /* @__PURE__ */ defineComponent({
+	__name: "AudioPreview",
+	props: { audioUrls: {} },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return __props.audioUrls.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.audioUrls, (url, index) => {
+				return openBlock(), createElementBlock("audio", {
+					key: index,
+					src: url,
+					controls: "",
+					preload: "metadata",
+					class: "w-full"
+				}, null, 8, _hoisted_2);
+			}), 128))])) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+export { AudioPreview_default as default };

package/dist/media/MediaTitle.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    fileName: 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/media/MediaTitle.vue.js

@@ -0,0 +1,19 @@
+import { createElementBlock, defineComponent, openBlock, toDisplayString } from "vue";
+//#region src/components/media/MediaTitle.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["title"];
+//#endregion
+//#region src/components/media/MediaTitle.vue
+var MediaTitle_default = /* @__PURE__ */ defineComponent({
+	__name: "MediaTitle",
+	props: { fileName: {} },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("p", {
+				class: "m-0 line-clamp-2 text-sm/tight break-all text-foreground",
+				title: __props.fileName
+			}, toDisplayString(__props.fileName), 9, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { MediaTitle_default as default };

package/dist/media/VideoPlayOverlay.vue.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    visible?: boolean;
+    size?: 'sm' | 'md';
+    overlayClass?: 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/media/VideoPlayOverlay.vue.js

@@ -0,0 +1,28 @@
+import { t as cn } from "../shared/src-CnJ6AzLP.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, unref } from "vue";
+//#region src/components/media/VideoPlayOverlay.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "pointer-events-none absolute inset-0 flex items-center justify-center" };
+//#endregion
+//#region src/components/media/VideoPlayOverlay.vue
+var VideoPlayOverlay_default = /* @__PURE__ */ defineComponent({
+	__name: "VideoPlayOverlay",
+	props: {
+		visible: {
+			type: Boolean,
+			default: true
+		},
+		size: { default: "md" },
+		overlayClass: { default: "bg-black/15" }
+	},
+	setup(__props) {
+		const iconSizeClass = computed(() => __props.size === "sm" ? "size-3" : "size-6");
+		return (_ctx, _cache) => {
+			return __props.visible ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("div", { class: normalizeClass(unref(cn)("pointer-events-none absolute inset-0", __props.overlayClass)) }, null, 2), createElementVNode("div", _hoisted_1, [createElementVNode("i", {
+				"aria-hidden": "true",
+				class: normalizeClass(unref(cn)("icon-[lucide--play] text-white", iconSizeClass.value))
+			}, null, 2)])], 64)) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+export { VideoPlayOverlay_default as default };

package/dist/media/VideoPreview.vue.d.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    src: string;
+    label?: 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/media/VideoPreview.vue.js

@@ -0,0 +1,32 @@
+import { Fragment, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeProps, openBlock, ref, toDisplayString, useTemplateRef } from "vue";
+//#region src/components/media/VideoPreview.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["src"];
+var _hoisted_2 = { class: "z-10 self-center" };
+//#endregion
+//#region src/components/media/VideoPreview.vue
+var VideoPreview_default = /* @__PURE__ */ defineComponent({
+	__name: "VideoPreview",
+	props: {
+		src: {},
+		label: {}
+	},
+	setup(__props) {
+		const videoRef = useTemplateRef("videoRef");
+		const width = ref("");
+		const height = ref("");
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("video", mergeProps({
+				ref_key: "videoRef",
+				ref: videoRef,
+				src: __props.src,
+				controls: ""
+			}, _ctx.$attrs, { onLoadedmetadata: _cache[0] || (_cache[0] = () => {
+				if (!videoRef.value) return;
+				width.value = `${videoRef.value.videoWidth}`;
+				height.value = `${videoRef.value.videoHeight}`;
+			}) }), null, 16, _hoisted_1), createElementVNode("span", _hoisted_2, [createTextVNode(toDisplayString(`${width.value} x ${height.value}`) + " ", 1), __props.label ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(" | " + toDisplayString(__props.label), 1)], 64)) : createCommentVNode("", true)])], 64);
+		};
+	}
+});
+//#endregion
+export { VideoPreview_default as default };

package/dist/media/ZoomPane.vue.d.ts

@@ -0,0 +1,17 @@
+declare var __VLS_1: {
+    style: {
+        transform: string;
+    };
+};
+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/media/ZoomPane.vue.js

@@ -0,0 +1,62 @@
+import { computed, createElementBlock, defineComponent, isRef, normalizeStyle, openBlock, ref, renderSlot, useTemplateRef, withModifiers } from "vue";
+//#endregion
+//#region src/components/media/ZoomPane.vue
+var ZoomPane_default = /* @__PURE__ */ defineComponent({
+	__name: "ZoomPane",
+	setup(__props) {
+		const zoomPane = useTemplateRef("zoomPane");
+		const zoom = ref(1);
+		const panX = ref(0);
+		const panY = ref(0);
+		function handleWheel(e) {
+			const zoomPaneEl = zoomPane.value;
+			if (!zoomPaneEl || (e.deltaY < 0 ? zoom.value > 1200 : zoom.value < -500)) return;
+			zoom.value -= e.deltaY;
+			const { x, y, width, height } = zoomPaneEl.getBoundingClientRect();
+			const offsetX = e.clientX - x - width / 2;
+			const offsetY = e.clientY - y - height / 2;
+			const scaler = 1.1 ** (e.deltaY / -30);
+			panY.value = panY.value * scaler - offsetY * (scaler - 1);
+			panX.value = panX.value * scaler - offsetX * (scaler - 1);
+		}
+		let dragging = false;
+		function handleDown(e) {
+			if (e.button !== 0 && e.button !== 1) return;
+			const zoomPaneEl = zoomPane.value;
+			if (!zoomPaneEl) return;
+			zoomPaneEl.parentElement?.focus();
+			zoomPaneEl.setPointerCapture(e.pointerId);
+			dragging = true;
+		}
+		function handleMove(e) {
+			if (!dragging) return;
+			panX.value += e.movementX;
+			panY.value += e.movementY;
+		}
+		const transform = computed(() => {
+			const scale = 1.1 ** (zoom.value / 30);
+			return `matrix(${[
+				scale,
+				0,
+				0,
+				scale,
+				panX.value,
+				panY.value
+			].join(",")})`;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "zoomPane",
+				ref: zoomPane,
+				class: "place-content-center contain-size",
+				onWheel: handleWheel,
+				onPointerdown: withModifiers(handleDown, ["prevent"]),
+				onPointermove: handleMove,
+				onPointerup: _cache[0] || (_cache[0] = ($event) => isRef(dragging) ? dragging.value = false : dragging = false),
+				onPointercancel: _cache[1] || (_cache[1] = ($event) => isRef(dragging) ? dragging.value = false : dragging = false)
+			}, [renderSlot(_ctx.$slots, "default", { style: normalizeStyle({ transform: transform.value }) })], 544);
+		};
+	}
+});
+//#endregion
+export { ZoomPane_default as default };