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

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

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

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

@@ -1,5 +1,5 @@
 import { cva } from "cva";
-//#region src/components/input-group/inputGroup.variants.ts
+// 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: {
@@ -18,5 +18,4 @@ var inputGroupButtonVariants = cva({
 	} },
 	defaultVariants: { size: "xs" }
 });
-//#endregion
 export { inputGroupAddonVariants, inputGroupButtonVariants };

package/dist/knob/Knob.vue.js

@@ -1,6 +1,6 @@
-import { t as cn } from "../shared/src-CnJ6AzLP.js";
+import { t as cn } from "../shared/src-DTwuqov4.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
+// src/components/knob/Knob.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"tabindex",
 	"aria-valuemin",
@@ -13,8 +13,7 @@ var _hoisted_2 = {
 	class: "size-full rotate-[-225deg]"
 };
 var _hoisted_3 = ["stroke-dashoffset"];
-//#endregion
-//#region src/components/knob/Knob.vue
+// src/components/knob/Knob.vue
 var Knob_default = /* @__PURE__ */ defineComponent({
 	__name: "Knob",
 	props: /*@__PURE__*/ mergeModels({
@@ -120,5 +119,4 @@ var Knob_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-//#endregion
 export { Knob_default as default };

package/dist/label/Label.vue.js

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

package/dist/layout/BaseModalLayout.vue.d.ts

@@ -0,0 +1,67 @@
+import { ButtonVariants } from '@comfyorg/design-system/button.variants';
+declare const SIZE_CLASSES: {
+    readonly md: "h-[80vh] w-[90vw] max-w-[1400px]";
+    readonly lg: "h-[80vh] max-h-[1026px] w-[90vw] max-w-[1280px] min-[1450px]:max-w-[1724px] min-[3000px]:max-h-[1320px] min-[3000px]:max-w-[2200px]";
+};
+type ModalSize = keyof typeof SIZE_CLASSES;
+type ContentPadding = 'default' | 'compact' | 'none';
+type HeaderPadding = 'default' | 'symmetric';
+type __VLS_Props = {
+    contentTitle: string;
+    labels: {
+        showLeftPanel: string;
+        hideLeftPanel: string;
+        showRightPanel: string;
+        hideRightPanel: string;
+        close: string;
+    };
+    rightPanelTitle?: string;
+    size?: ModalSize;
+    leftPanelWidth?: string;
+    contentPadding?: ContentPadding;
+    headerPadding?: HeaderPadding;
+    closeButtonVariant?: ButtonVariants['variant'];
+    closeIcon?: string;
+};
+type __VLS_ModelProps = {
+    'rightPanelOpen'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {}, __VLS_11: {}, __VLS_21: {}, __VLS_23: {}, __VLS_41: {}, __VLS_49: {}, __VLS_51: {}, __VLS_53: {}, __VLS_71: {};
+type __VLS_Slots = {} & {
+    leftPanelHeaderTitle?: (props: typeof __VLS_1) => any;
+} & {
+    leftPanel?: (props: typeof __VLS_11) => any;
+} & {
+    header?: (props: typeof __VLS_21) => any;
+} & {
+    'header-right-area'?: (props: typeof __VLS_23) => any;
+} & {
+    contentFilter?: (props: typeof __VLS_41) => any;
+} & {
+    content?: (props: typeof __VLS_49) => any;
+} & {
+    rightPanelHeaderTitle?: (props: typeof __VLS_51) => any;
+} & {
+    rightPanelHeaderActions?: (props: typeof __VLS_53) => any;
+} & {
+    rightPanel?: (props: typeof __VLS_71) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
+    getContentScrollTop: () => number;
+    setContentScrollTop: (scrollTop: number) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: () => any;
+    "update:rightPanelOpen": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    "onUpdate:rightPanelOpen"?: ((value: boolean) => 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/layout/BaseModalLayout.vue.js

@@ -0,0 +1,198 @@
+import { t as Button_default } from "../shared/Button-Dj_H5v3V.js";
+import { t as DialogTitle_default } from "../shared/DialogTitle-Chomvpgq.js";
+import { t as cn } from "../shared/src-DTwuqov4.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, toDisplayString, unref, useModel, useSlots, watch, withCtx, withKeys } from "vue";
+import { useBreakpoints } from "@vueuse/core";
+// src/components/layout/BaseModalLayout.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["inert", "aria-hidden"];
+var _hoisted_2 = {
+	"data-component-id": "LeftPanelHeader",
+	class: "flex h-18 w-full shrink-0 items-center-safe gap-2 pr-3 pl-6"
+};
+var _hoisted_3 = { class: "flex flex-col overflow-hidden bg-background" };
+var _hoisted_4 = { class: "flex min-h-0 flex-1 flex-col" };
+var _hoisted_5 = ["inert", "aria-hidden"];
+var _hoisted_6 = { class: "flex h-full w-72 min-w-72 flex-col bg-card" };
+var _hoisted_7 = {
+	"data-component-id": "RightPanelHeader",
+	class: "flex h-18 shrink-0 items-center gap-2 px-6"
+};
+var _hoisted_8 = {
+	key: 0,
+	class: "flex-1 text-base font-semibold select-none"
+};
+var _hoisted_9 = {
+	key: 1,
+	class: "flex-1"
+};
+var _hoisted_10 = { class: "min-h-0 flex-1 overflow-y-auto" };
+// src/components/layout/BaseModalLayout.vue
+var BaseModalLayout_default = /* @__PURE__ */ defineComponent({
+	__name: "BaseModalLayout",
+	props: /*@__PURE__*/ mergeModels({
+		contentTitle: {},
+		labels: {},
+		rightPanelTitle: {},
+		size: { default: "lg" },
+		leftPanelWidth: { default: "14rem" },
+		contentPadding: { default: "default" },
+		headerPadding: { default: "default" },
+		closeButtonVariant: {},
+		closeIcon: { default: "icon-[lucide--x]" }
+	}, {
+		"rightPanelOpen": {
+			type: Boolean,
+			default: false
+		},
+		"rightPanelOpenModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["close"], ["update:rightPanelOpen"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const SIZE_CLASSES = {
+			md: "h-[80vh] w-[90vw] max-w-[1400px]",
+			lg: "h-[80vh] max-h-[1026px] w-[90vw] max-w-[1280px] min-[1450px]:max-w-[1724px] min-[3000px]:max-h-[1320px] min-[3000px]:max-w-[2200px]"
+		};
+		const emit = __emit;
+		const sizeClasses = computed(() => SIZE_CLASSES[__props.size]);
+		const isRightPanelOpen = useModel(__props, "rightPanelOpen");
+		const slots = useSlots();
+		const hasLeftPanel = computed(() => !!slots.leftPanel);
+		const hasRightPanel = computed(() => !!slots.rightPanel);
+		const notMobile = useBreakpoints({ md: 880 }).greater("md");
+		const isLeftPanelOpen = ref(true);
+		const mobileMenuOpen = ref(false);
+		const contentContainer = ref(null);
+		watch(notMobile, (isDesktop) => {
+			if (!isDesktop) mobileMenuOpen.value = false;
+		});
+		const showLeftPanel = computed(() => {
+			return notMobile.value ? isLeftPanelOpen.value : mobileMenuOpen.value;
+		});
+		const headerClass = computed(() => cn("flex w-full items-center justify-between gap-2", __props.headerPadding === "symmetric" ? "px-6 py-5" : "h-18 px-6"));
+		const headerContentClass = computed(() => cn("flex min-w-0 flex-1 gap-2", __props.headerPadding === "symmetric" && "min-h-10 items-center"));
+		const contentContainerClass = computed(() => cn("flex scrollbar-custom min-h-0 flex-1 flex-col overflow-y-auto", __props.contentPadding === "default" && "px-6 pt-0 pb-10", __props.contentPadding === "compact" && "px-6 pt-0 pb-2"));
+		const gridStyle = computed(() => ({ gridTemplateColumns: hasRightPanel.value ? `${hasLeftPanel.value && showLeftPanel.value ? __props.leftPanelWidth : "0rem"} 1fr ${isRightPanelOpen.value ? "18rem" : "0rem"}` : `${hasLeftPanel.value && showLeftPanel.value ? __props.leftPanelWidth : "0rem"} 1fr` }));
+		const toggleLeftPanel = () => {
+			if (notMobile.value) isLeftPanelOpen.value = !isLeftPanelOpen.value;
+			else mobileMenuOpen.value = !mobileMenuOpen.value;
+		};
+		const toggleRightPanel = () => {
+			isRightPanelOpen.value = !isRightPanelOpen.value;
+		};
+		function handleEscape(event) {
+			const target = event.target;
+			if (!(target instanceof HTMLElement)) return;
+			if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement || target.isContentEditable) return;
+			if (isRightPanelOpen.value) {
+				event.stopPropagation();
+				isRightPanelOpen.value = false;
+			}
+		}
+		__expose({
+			getContentScrollTop: () => contentContainer.value?.scrollTop ?? 0,
+			setContentScrollTop: (scrollTop) => {
+				if (contentContainer.value) contentContainer.value.scrollTop = scrollTop;
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(unref(cn)("relative overflow-hidden rounded-2xl border bg-background shadow-lg", sizeClasses.value)),
+				onKeydownCapture: withKeys(handleEscape, ["esc"])
+			}, [createElementVNode("div", {
+				class: "grid size-full transition-[grid-template-columns] duration-300 ease-out",
+				style: normalizeStyle(gridStyle.value)
+			}, [
+				createElementVNode("nav", {
+					class: "flex h-full flex-col overflow-hidden bg-card",
+					inert: !showLeftPanel.value,
+					"aria-hidden": !showLeftPanel.value
+				}, [createElementVNode("header", _hoisted_2, [renderSlot(_ctx.$slots, "leftPanelHeaderTitle"), !unref(notMobile) && showLeftPanel.value ? (openBlock(), createBlock(unref(Button_default), {
+					key: 0,
+					size: "lg",
+					class: "ml-auto w-10 p-0",
+					"aria-label": __props.labels.hideLeftPanel,
+					onClick: toggleLeftPanel
+				}, {
+					default: withCtx(() => [..._cache[2] || (_cache[2] = [createElementVNode("i", { class: "icon-[lucide--panel-left-close]" }, null, -1)])]),
+					_: 1
+				}, 8, ["aria-label"])) : createCommentVNode("", true)]), renderSlot(_ctx.$slots, "leftPanel")], 8, _hoisted_1),
+				createElementVNode("div", _hoisted_3, [_ctx.$slots.header ? (openBlock(), createElementBlock("header", {
+					key: 0,
+					class: normalizeClass(headerClass.value)
+				}, [
+					createElementVNode("div", { class: normalizeClass(headerContentClass.value) }, [!unref(notMobile) && !showLeftPanel.value ? (openBlock(), createBlock(unref(Button_default), {
+						key: 0,
+						size: "lg",
+						class: "w-10 p-0",
+						"aria-label": __props.labels.showLeftPanel,
+						onClick: toggleLeftPanel
+					}, {
+						default: withCtx(() => [..._cache[3] || (_cache[3] = [createElementVNode("i", { class: "icon-[lucide--panel-left]" }, null, -1)])]),
+						_: 1
+					}, 8, ["aria-label"])) : createCommentVNode("", true), renderSlot(_ctx.$slots, "header")], 2),
+					renderSlot(_ctx.$slots, "header-right-area"),
+					!isRightPanelOpen.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [hasRightPanel.value ? (openBlock(), createBlock(unref(Button_default), {
+						key: 0,
+						size: "lg",
+						class: "w-10 p-0",
+						"aria-label": __props.labels.showRightPanel,
+						onClick: toggleRightPanel
+					}, {
+						default: withCtx(() => [..._cache[4] || (_cache[4] = [createElementVNode("i", { class: "icon-[lucide--panel-right]" }, null, -1)])]),
+						_: 1
+					}, 8, ["aria-label"])) : createCommentVNode("", true), createVNode(unref(Button_default), {
+						size: "lg",
+						class: "w-10",
+						variant: __props.closeButtonVariant,
+						"aria-label": __props.labels.close,
+						onClick: _cache[0] || (_cache[0] = ($event) => emit("close"))
+					}, {
+						default: withCtx(() => [createElementVNode("i", { class: normalizeClass(__props.closeIcon) }, null, 2)]),
+						_: 1
+					}, 8, ["variant", "aria-label"])], 64)) : createCommentVNode("", true)
+				], 2)) : createCommentVNode("", true), createElementVNode("main", _hoisted_4, [
+					renderSlot(_ctx.$slots, "contentFilter"),
+					createVNode(unref(DialogTitle_default), { class: normalizeClass(unref(cn)("m-0 px-6 pt-2 pb-6 text-2xl font-normal capitalize select-none", hasLeftPanel.value && "sr-only")) }, {
+						default: withCtx(() => [createTextVNode(toDisplayString(__props.contentTitle), 1)]),
+						_: 1
+					}, 8, ["class"]),
+					createElementVNode("div", {
+						ref_key: "contentContainer",
+						ref: contentContainer,
+						"data-testid": "base-modal-content",
+						class: normalizeClass(contentContainerClass.value)
+					}, [renderSlot(_ctx.$slots, "content")], 2)
+				])]),
+				hasRightPanel.value ? (openBlock(), createElementBlock("aside", {
+					key: 0,
+					class: "overflow-hidden",
+					inert: !isRightPanelOpen.value,
+					"aria-hidden": !isRightPanelOpen.value
+				}, [createElementVNode("div", _hoisted_6, [createElementVNode("header", _hoisted_7, [
+					__props.rightPanelTitle ? (openBlock(), createElementBlock("h2", _hoisted_8, toDisplayString(__props.rightPanelTitle), 1)) : (openBlock(), createElementBlock("div", _hoisted_9, [renderSlot(_ctx.$slots, "rightPanelHeaderTitle")])),
+					renderSlot(_ctx.$slots, "rightPanelHeaderActions"),
+					createVNode(unref(Button_default), {
+						size: "lg",
+						class: "w-10 p-0",
+						"aria-label": __props.labels.hideRightPanel,
+						onClick: toggleRightPanel
+					}, {
+						default: withCtx(() => [..._cache[5] || (_cache[5] = [createElementVNode("i", { class: "icon-[lucide--panel-right-close]" }, null, -1)])]),
+						_: 1
+					}, 8, ["aria-label"]),
+					createVNode(unref(Button_default), {
+						size: "lg",
+						class: "w-10 p-0",
+						variant: __props.closeButtonVariant,
+						"aria-label": __props.labels.close,
+						onClick: _cache[1] || (_cache[1] = ($event) => emit("close"))
+					}, {
+						default: withCtx(() => [createElementVNode("i", { class: normalizeClass(__props.closeIcon) }, null, 2)]),
+						_: 1
+					}, 8, ["variant", "aria-label"])
+				]), createElementVNode("div", _hoisted_10, [renderSlot(_ctx.$slots, "rightPanel")])])], 8, _hoisted_5)) : createCommentVNode("", true)
+			], 4)], 34);
+		};
+	}
+});
+export { BaseModalLayout_default as default };

package/dist/media/AudioPreview.vue.js

@@ -1,12 +1,11 @@
 import { Fragment, createCommentVNode, createElementBlock, defineComponent, openBlock, renderList } from "vue";
-//#region src/components/media/AudioPreview.vue?vue&type=script&setup=true&lang.ts
+// 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
+// src/components/media/AudioPreview.vue
 var AudioPreview_default = /* @__PURE__ */ defineComponent({
 	__name: "AudioPreview",
 	props: { audioUrls: {} },
@@ -24,5 +23,4 @@ var AudioPreview_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-//#endregion
 export { AudioPreview_default as default };

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

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    src: string;
+    alt?: string;
+    fallbackTitle: string;
+    closeLabel: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+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: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/media/ImageLightbox.vue.js

@@ -0,0 +1,76 @@
+import { t as DialogClose_default } from "../shared/DialogClose-CrtPRSNX.js";
+import { t as DialogContent_default } from "../shared/DialogContent-v2s55FXs.js";
+import { t as DialogOverlay_default } from "../shared/DialogOverlay-C9qv0zme.js";
+import { t as DialogPortal_default } from "../shared/DialogPortal-DtCpLgtO.js";
+import { t as Button_default } from "../shared/Button-Dj_H5v3V.js";
+import { createBlock, createCommentVNode, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, openBlock, toDisplayString, unref, useModel, withCtx } from "vue";
+import { DialogDescription, DialogRoot, DialogTitle, VisuallyHidden } from "reka-ui";
+// src/components/media/ImageLightbox.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["src", "alt"];
+// src/components/media/ImageLightbox.vue
+var ImageLightbox_default = /* @__PURE__ */ defineComponent({
+	__name: "ImageLightbox",
+	props: /*@__PURE__*/ mergeModels({
+		src: {},
+		alt: { default: "" },
+		fallbackTitle: {},
+		closeLabel: {}
+	}, {
+		"modelValue": {
+			type: Boolean,
+			default: false
+		},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const open = useModel(__props, "modelValue");
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(DialogRoot), {
+				open: open.value,
+				"onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event)
+			}, {
+				default: withCtx(() => [createVNode(unref(DialogPortal_default), null, {
+					default: withCtx(() => [createVNode(unref(DialogOverlay_default)), createVNode(unref(DialogContent_default), {
+						surface: "none",
+						size: "fit"
+					}, {
+						default: withCtx(() => [
+							createVNode(unref(VisuallyHidden), null, {
+								default: withCtx(() => [createVNode(unref(DialogTitle), null, {
+									default: withCtx(() => [createTextVNode(toDisplayString(__props.alt || __props.fallbackTitle), 1)]),
+									_: 1
+								}), __props.alt ? (openBlock(), createBlock(unref(DialogDescription), { key: 0 }, {
+									default: withCtx(() => [createTextVNode(toDisplayString(__props.alt), 1)]),
+									_: 1
+								})) : createCommentVNode("", true)]),
+								_: 1
+							}),
+							createVNode(unref(DialogClose_default), null, {
+								default: withCtx(() => [createVNode(unref(Button_default), {
+									"aria-label": __props.closeLabel,
+									size: "icon",
+									variant: "muted-textonly",
+									class: "absolute -top-2 -right-2 z-10 translate-x-full text-white hover:text-white/80"
+								}, {
+									default: withCtx(() => [..._cache[1] || (_cache[1] = [createElementVNode("i", { class: "icon-[lucide--x] size-5" }, null, -1)])]),
+									_: 1
+								}, 8, ["aria-label"])]),
+								_: 1
+							}),
+							createElementVNode("img", {
+								src: __props.src,
+								alt: __props.alt,
+								class: "max-h-[90vh] max-w-[90vw] rounded-sm object-contain"
+							}, null, 8, _hoisted_1)
+						]),
+						_: 1
+					})]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["open"]);
+		};
+	}
+});
+export { ImageLightbox_default as default };

package/dist/media/MediaTitle.vue.js

@@ -1,8 +1,7 @@
 import { createElementBlock, defineComponent, openBlock, toDisplayString } from "vue";
-//#region src/components/media/MediaTitle.vue?vue&type=script&setup=true&lang.ts
+// src/components/media/MediaTitle.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["title"];
-//#endregion
-//#region src/components/media/MediaTitle.vue
+// src/components/media/MediaTitle.vue
 var MediaTitle_default = /* @__PURE__ */ defineComponent({
 	__name: "MediaTitle",
 	props: { fileName: {} },
@@ -15,5 +14,4 @@ var MediaTitle_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-//#endregion
 export { MediaTitle_default as default };

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

@@ -0,0 +1,28 @@
+type __VLS_Props = {
+    sources?: Array<{
+        src: string;
+        type: string;
+    }>;
+    posterSrc?: string;
+    autoplay?: boolean;
+    muted?: boolean;
+    loop?: boolean;
+    playsInline?: boolean;
+    playbackLabels?: {
+        play: string;
+        pause: string;
+    };
+};
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    fallback?: (props: typeof __VLS_9) => 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/media/Video.vue.js

@@ -0,0 +1,100 @@
+import { t as Button_default } from "../shared/Button-Dj_H5v3V.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderList, renderSlot, unref, useTemplateRef, watchEffect, withCtx } from "vue";
+import { usePreferredReducedMotion } from "@vueuse/core";
+// src/components/media/Video.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "relative"
+};
+var _hoisted_2 = [
+	"poster",
+	"autoplay",
+	"muted",
+	"loop",
+	"playsinline"
+];
+var _hoisted_3 = [
+	"src",
+	"type",
+	"onError"
+];
+// src/components/media/Video.vue
+var Video_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "Video",
+	props: {
+		sources: { default: () => [] },
+		posterSrc: { default: "" },
+		autoplay: {
+			type: Boolean,
+			default: false
+		},
+		muted: {
+			type: Boolean,
+			default: false
+		},
+		loop: {
+			type: Boolean,
+			default: false
+		},
+		playsInline: {
+			type: Boolean,
+			default: false
+		},
+		playbackLabels: {}
+	},
+	setup(__props) {
+		const video = useTemplateRef("video");
+		const failed = ref(false);
+		const playing = ref(false);
+		const reducedMotion = usePreferredReducedMotion();
+		const shouldAutoplay = computed(() => __props.autoplay && reducedMotion.value !== "reduce");
+		watchEffect(() => {
+			if (__props.autoplay && !shouldAutoplay.value) video.value?.pause();
+		});
+		function togglePlayback() {
+			const element = video.value;
+			if (!element) return;
+			if (!element.paused) element.pause();
+			else element.play().catch(() => {
+				playing.value = false;
+			});
+		}
+		return (_ctx, _cache) => {
+			return __props.sources.length && !failed.value ? (openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("video", mergeProps({
+				ref_key: "video",
+				ref: video
+			}, _ctx.$attrs, {
+				poster: __props.posterSrc || void 0,
+				autoplay: shouldAutoplay.value,
+				muted: __props.muted,
+				loop: __props.loop,
+				playsinline: __props.playsInline,
+				onPlay: _cache[0] || (_cache[0] = ($event) => playing.value = true),
+				onPause: _cache[1] || (_cache[1] = ($event) => playing.value = false),
+				onError: _cache[2] || (_cache[2] = ($event) => failed.value = true)
+			}), [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.sources, (source, index) => {
+				return openBlock(), createElementBlock("source", {
+					key: source.src,
+					src: source.src,
+					type: source.type,
+					onError: ($event) => failed.value = index === __props.sources.length - 1
+				}, null, 40, _hoisted_3);
+			}), 128))], 16, _hoisted_2), __props.playbackLabels ? (openBlock(), createBlock(unref(Button_default), {
+				key: 0,
+				variant: "overlay-white",
+				size: "icon",
+				class: "absolute right-3 bottom-3",
+				"aria-label": playing.value ? __props.playbackLabels.pause : __props.playbackLabels.play,
+				onClick: togglePlayback
+			}, {
+				default: withCtx(() => [createElementVNode("i", {
+					class: normalizeClass(playing.value ? "icon-[lucide--pause]" : "icon-[lucide--play]"),
+					"aria-hidden": "true"
+				}, null, 2)]),
+				_: 1
+			}, 8, ["aria-label"])) : createCommentVNode("", true)])) : renderSlot(_ctx.$slots, "fallback", {}, void 0, void 0, 1);
+		};
+	}
+});
+export { Video_default as default };

package/dist/media/VideoPlayOverlay.vue.js

@@ -1,9 +1,8 @@
-import { t as cn } from "../shared/src-CnJ6AzLP.js";
+import { t as cn } from "../shared/src-DTwuqov4.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
+// 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
+// src/components/media/VideoPlayOverlay.vue
 var VideoPlayOverlay_default = /* @__PURE__ */ defineComponent({
 	__name: "VideoPlayOverlay",
 	props: {
@@ -24,5 +23,4 @@ var VideoPlayOverlay_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-//#endregion
 export { VideoPlayOverlay_default as default };

package/dist/media/VideoPreview.vue.js

@@ -1,9 +1,8 @@
 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
+// 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
+// src/components/media/VideoPreview.vue
 var VideoPreview_default = /* @__PURE__ */ defineComponent({
 	__name: "VideoPreview",
 	props: {
@@ -28,5 +27,4 @@ var VideoPreview_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-//#endregion
 export { VideoPreview_default as default };

package/dist/media/ZoomPane.vue.js

@@ -1,6 +1,5 @@
 import { computed, createElementBlock, defineComponent, isRef, normalizeStyle, openBlock, ref, renderSlot, useTemplateRef, withModifiers } from "vue";
-//#endregion
-//#region src/components/media/ZoomPane.vue
+// src/components/media/ZoomPane.vue
 var ZoomPane_default = /* @__PURE__ */ defineComponent({
 	__name: "ZoomPane",
 	setup(__props) {
@@ -58,5 +57,4 @@ var ZoomPane_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-//#endregion
 export { ZoomPane_default as default };

package/dist/menu/ContextMenu.vue.js

@@ -1,9 +1,8 @@
-import { t as ContextMenuContent_default } from "../shared/ContextMenuContent-CNQHJQ81.js";
-import { t as MenuItems_default } from "../shared/MenuItems-BJKetPV-.js";
+import { t as ContextMenuContent_default } from "../shared/ContextMenuContent-RNyBBJOX.js";
+import { t as MenuItems_default } from "../shared/MenuItems-BZTlERd6.js";
 import { createBlock, createSlots, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeProps, openBlock, renderSlot, toValue, unref, useModel, withCtx } from "vue";
 import { ContextMenuRoot, ContextMenuTrigger } from "reka-ui";
-//#endregion
-//#region src/components/menu/ContextMenu.vue
+// src/components/menu/ContextMenu.vue
 var ContextMenu_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "ContextMenu",
@@ -48,5 +47,4 @@ var ContextMenu_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-//#endregion
 export { ContextMenu_default as default };

package/dist/menu/ContextMenuContent.vue.js

@@ -1,2 +1 @@
-import { t as ContextMenuContent_default } from "../shared/ContextMenuContent-CNQHJQ81.js";
-export { ContextMenuContent_default as default };
+export { t as default } from "../shared/ContextMenuContent-RNyBBJOX.js";