@comfyorg/design-system 1.1.0 → 1.2.0

package/dist/chart/Chart.vue.js

@@ -0,0 +1,180 @@
+import { t as cn } from "../shared/src-CnJ6AzLP.js";
+import { createElementBlock, createElementVNode, defineComponent, normalizeClass, onBeforeUnmount, onMounted, openBlock, toRaw, toRef, unref, useTemplateRef, watch } from "vue";
+import { BarController, BarElement, CategoryScale, Chart, Colors, Filler, Legend, LineController, LineElement, LinearScale, PointElement, Tooltip } from "chart.js";
+//#region src/components/chart/useChart.ts
+Chart.register(BarController, BarElement, CategoryScale, Colors, Filler, Legend, LinearScale, LineController, LineElement, PointElement, Tooltip);
+function getCssVar(name) {
+	return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+}
+function getDefaultOptions(type) {
+	const foreground = getCssVar("--color-foreground") || "#ffffff";
+	const muted = getCssVar("--color-muted-foreground") || "#8a8a8a";
+	return {
+		responsive: true,
+		maintainAspectRatio: false,
+		interaction: {
+			mode: "index",
+			intersect: false
+		},
+		plugins: {
+			legend: {
+				align: "start",
+				labels: {
+					color: foreground,
+					usePointStyle: true,
+					pointStyle: "circle",
+					boxWidth: 8,
+					boxHeight: 8,
+					padding: 16,
+					font: {
+						family: "Inter",
+						size: 11
+					},
+					generateLabels(chart) {
+						return chart.data.datasets.map((dataset, i) => {
+							const color = dataset.borderColor ?? dataset.backgroundColor ?? "#888";
+							return {
+								text: dataset.label ?? "",
+								fillStyle: color,
+								strokeStyle: color,
+								lineWidth: 0,
+								pointStyle: "circle",
+								hidden: !chart.isDatasetVisible(i),
+								datasetIndex: i
+							};
+						});
+					}
+				}
+			},
+			tooltip: { enabled: true }
+		},
+		elements: { point: {
+			radius: 0,
+			hoverRadius: 4
+		} },
+		scales: {
+			x: {
+				ticks: {
+					color: muted,
+					font: {
+						family: "Inter",
+						size: 11
+					},
+					padding: 8
+				},
+				grid: {
+					display: true,
+					color: muted + "33",
+					drawTicks: false
+				},
+				border: {
+					display: true,
+					color: muted
+				}
+			},
+			y: {
+				ticks: {
+					color: muted,
+					font: {
+						family: "Inter",
+						size: 11
+					},
+					padding: 4
+				},
+				grid: {
+					display: false,
+					drawTicks: false
+				},
+				border: {
+					display: true,
+					color: muted
+				}
+			}
+		},
+		...type === "bar" && { datasets: { bar: {
+			borderRadius: {
+				topLeft: 4,
+				topRight: 4
+			},
+			borderSkipped: false,
+			barPercentage: .6,
+			categoryPercentage: .8
+		} } }
+	};
+}
+function useChart(canvasRef, type, data) {
+	let chart;
+	function copyData() {
+		const { datasets, labels, ...rest } = toRaw(data.value);
+		return {
+			...rest,
+			labels: labels && [...labels],
+			datasets: datasets.map((dataset) => ({
+				...dataset,
+				data: Array.isArray(dataset.data) ? [...dataset.data] : dataset.data
+			}))
+		};
+	}
+	function createChart() {
+		if (!canvasRef.value) return;
+		chart?.destroy();
+		chart = new Chart(canvasRef.value, {
+			type: type.value,
+			data: copyData(),
+			options: getDefaultOptions(type.value)
+		});
+	}
+	onMounted(createChart);
+	watch(type, createChart);
+	watch(data, () => {
+		if (!chart) return;
+		const next = copyData();
+		const previousCount = chart.data.datasets.length;
+		for (const [index, dataset] of next.datasets.entries()) {
+			if (index >= previousCount) break;
+			const { hidden } = chart.getDatasetMeta(index);
+			if (typeof hidden === "boolean") dataset.hidden = hidden;
+		}
+		chart.data = next;
+		chart.update();
+	}, { deep: true });
+	onBeforeUnmount(() => {
+		chart?.destroy();
+		chart = void 0;
+	});
+}
+//#endregion
+//#region src/components/chart/Chart.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "relative" };
+var _hoisted_2 = ["aria-label"];
+//#endregion
+//#region src/components/chart/Chart.vue
+var Chart_default = /* @__PURE__ */ defineComponent({
+	__name: "Chart",
+	props: {
+		data: {},
+		label: {},
+		type: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(__props) {
+		const canvasRef = useTemplateRef("canvasRef");
+		useChart(canvasRef, toRef(() => __props.type), toRef(() => __props.data));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(cn)("rounded-lg bg-secondary p-6", __props.class)) }, [createElementVNode("div", _hoisted_1, [createElementVNode("canvas", {
+				ref_key: "canvasRef",
+				ref: canvasRef,
+				"aria-label": __props.label,
+				role: "img"
+			}, null, 8, _hoisted_2)])], 2);
+		};
+	}
+});
+//#endregion
+export { Chart_default as default };

package/dist/chart/useChart.d.ts

@@ -0,0 +1,4 @@
+import { ChartData } from 'chart.js';
+import { Ref } from 'vue';
+export type SupportedChartType = 'bar' | 'line';
+export declare function useChart(canvasRef: Readonly<Ref<HTMLCanvasElement | null>>, type: Readonly<Ref<SupportedChartType>>, data: Readonly<Ref<ChartData>>): void;

package/dist/checkbox/Checkbox.vue.d.ts

@@ -0,0 +1,25 @@
+import { CheckboxRootProps } from 'reka-ui';
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = CheckboxRootProps & {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_14: {
+    modelValue: boolean | "indeterminate";
+    state: import('reka-ui').CheckboxCheckedState;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | "indeterminate") => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | "indeterminate") => 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/checkbox/Checkbox.vue.js

@@ -0,0 +1,49 @@
+import { t as cn } from "../shared/src-CnJ6AzLP.js";
+import { createBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeClass, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "reka-ui";
+import { reactiveOmit } from "@vueuse/core";
+//#endregion
+//#region src/components/checkbox/Checkbox.vue
+var Checkbox_default = /* @__PURE__ */ defineComponent({
+	__name: "Checkbox",
+	props: {
+		defaultValue: {},
+		modelValue: {},
+		disabled: { type: Boolean },
+		value: {},
+		id: {},
+		trueValue: {},
+		falseValue: {},
+		asChild: { type: Boolean },
+		as: {},
+		name: {},
+		required: { type: Boolean },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(CheckboxRoot), mergeProps(unref(forwarded), {
+				"data-slot": "checkbox",
+				class: unref(cn)("inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-sm border bg-transparent text-background transition-colors outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary", props.class)
+			}), {
+				default: withCtx((slotProps) => [createVNode(unref(CheckboxIndicator), { class: "flex items-center justify-center" }, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps)), () => [createElementVNode("i", { class: normalizeClass(unref(cn)("size-3", slotProps.state === "indeterminate" ? "icon-[lucide--minus]" : "icon-[lucide--check]")) }, null, 2)])]),
+					_: 2
+				}, 1024)]),
+				_: 3
+			}, 16, ["class"]);
+		};
+	}
+});
+//#endregion
+export { Checkbox_default as default };

package/dist/chip/TagRemoveButton.vue.d.ts

@@ -0,0 +1,18 @@
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    tooltip?: string;
+    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/chip/TagRemoveButton.vue.js

@@ -0,0 +1,2 @@
+import { t as TagRemoveButton_default } from "../shared/TagRemoveButton-BiCdscIC.js";
+export { TagRemoveButton_default as default };

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

@@ -0,0 +1,23 @@
+type __VLS_Props = {
+    /** Leading-edge colour, e.g. `border-l-success`. */
+    accent: string;
+};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_1) => any;
+} & {
+    title?: (props: typeof __VLS_3) => any;
+} & {
+    description?: (props: typeof __VLS_5) => any;
+} & {
+    actions?: (props: typeof __VLS_7) => 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/CanvasBanner.vue.js

@@ -0,0 +1,23 @@
+import { t as cn } from "../shared/src-CnJ6AzLP.js";
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref } from "vue";
+//#region src/components/common/CanvasBanner.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex min-w-0 items-center gap-2" };
+var _hoisted_2 = { class: "flex min-w-0 flex-col text-sm wrap-break-word" };
+var _hoisted_3 = { class: "font-medium text-foreground" };
+var _hoisted_4 = {
+	key: 0,
+	class: "text-muted-foreground"
+};
+//#endregion
+//#region src/components/common/CanvasBanner.vue
+var CanvasBanner_default = /* @__PURE__ */ defineComponent({
+	__name: "CanvasBanner",
+	props: { accent: {} },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(cn)("pointer-events-auto relative flex items-center gap-12 rounded-lg border border-l-4 bg-background p-4 shadow-md", __props.accent)) }, [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "icon"), createElementVNode("div", _hoisted_2, [createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "title")]), _ctx.$slots.description ? (openBlock(), createElementBlock("span", _hoisted_4, [renderSlot(_ctx.$slots, "description")])) : createCommentVNode("", true)])]), renderSlot(_ctx.$slots, "actions")], 2);
+		};
+	}
+});
+//#endregion
+export { CanvasBanner_default as default };

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

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    orientation?: 'horizontal' | 'vertical';
+    width?: number;
+};
+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/ContentDivider.vue.js

@@ -0,0 +1,22 @@
+import { t as _plugin_vue_export_helper_default } from "../shared/_plugin-vue_export-helper-BOaGB7Aw.js";
+import { createElementBlock, defineComponent, normalizeClass, openBlock, useCssVars } from "vue";
+//#endregion
+//#region src/components/common/ContentDivider.vue
+var ContentDivider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "ContentDivider",
+	props: {
+		orientation: { default: "horizontal" },
+		width: { default: .3 }
+	},
+	setup(__props) {
+		useCssVars((_ctx) => ({ "v5581bd6e": _ctx.width + "px" }));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["content-divider bg-border", {
+				"content-divider--horizontal": __props.orientation === "horizontal",
+				"content-divider--vertical": __props.orientation === "vertical"
+			}]) }, null, 2);
+		};
+	}
+}), [["__scopeId", "data-v-dcb6a1f4"]]);
+//#endregion
+export { ContentDivider_default as default };

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

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    renderFunction: () => HTMLElement;
+};
+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/CustomFormValue.vue.js

@@ -0,0 +1,28 @@
+import { createElementBlock, defineComponent, onMounted, openBlock, ref, watch } from "vue";
+//#endregion
+//#region src/components/common/CustomFormValue.vue
+var CustomFormValue_default = /* @__PURE__ */ defineComponent({
+	__name: "CustomFormValue",
+	props: { renderFunction: { type: Function } },
+	setup(__props) {
+		const props = __props;
+		const container = ref(null);
+		function renderContent() {
+			if (container.value) {
+				container.value.innerHTML = "";
+				const element = props.renderFunction();
+				container.value.appendChild(element);
+			}
+		}
+		onMounted(renderContent);
+		watch(() => props.renderFunction, renderContent);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "container",
+				ref: container
+			}, null, 512);
+		};
+	}
+});
+//#endregion
+export { CustomFormValue_default as default };

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

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    size?: number;
+    duration?: 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/DotSpinner.vue.js

@@ -0,0 +1,34 @@
+import { t as _plugin_vue_export_helper_default } from "../shared/_plugin-vue_export-helper-BOaGB7Aw.js";
+import { createElementBlock, createStaticVNode, defineComponent, normalizeStyle, openBlock } from "vue";
+//#region src/components/common/DotSpinner.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["width", "height"];
+//#endregion
+//#region src/components/common/DotSpinner.vue
+var DotSpinner_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "DotSpinner",
+	props: {
+		size: { default: 24 },
+		duration: { default: "2s" }
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				"data-testid": "dot-spinner",
+				class: "inline-flex items-center justify-center",
+				style: normalizeStyle({
+					width: __props.size + "px",
+					height: __props.size + "px"
+				})
+			}, [(openBlock(), createElementBlock("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				width: __props.size,
+				height: __props.size,
+				viewBox: "0 0 14 14",
+				class: "animate-spin fill-foreground",
+				style: normalizeStyle({ animationDuration: __props.duration })
+			}, [..._cache[0] || (_cache[0] = [createStaticVNode("<g clip-path=\"url(#clip0_776_9582)\" data-v-8e668792><path class=\"dot-animation\" style=\"animation-delay:0s;\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7 2.21053C7.61042 2.21053 8.10526 1.71568 8.10526 1.10526C8.10526 0.494843 7.61042 0 7 0C6.38958 0 5.89474 0.494843 5.89474 1.10526C5.89474 1.71568 6.38958 2.21053 7 2.21053Z\" data-v-8e668792></path><path class=\"dot-animation\" style=\"animation-delay:0.25s;\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.21053 7C2.21053 7.61042 1.71568 8.10526 1.10526 8.10526C0.494843 8.10526 0 7.61042 0 7C0 6.38958 0.494843 5.89474 1.10526 5.89474C1.71568 5.89474 2.21053 6.38958 2.21053 7Z\" data-v-8e668792></path><path class=\"dot-animation\" style=\"animation-delay:0.5s;\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M14 7C14 7.61042 13.5052 8.10526 12.8947 8.10526C12.2843 8.10526 11.7895 7.61042 11.7895 7C11.7895 6.38958 12.2843 5.89474 12.8947 5.89474C13.5052 5.89474 14 6.38958 14 7Z\" data-v-8e668792></path><path class=\"dot-animation\" style=\"animation-delay:0.75s;\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.10526 12.8947C8.10526 13.5052 7.61041 14 6.99999 14C6.38957 14 5.89473 13.5052 5.89473 12.8947C5.89473 12.2843 6.38957 11.7895 6.99999 11.7895C7.61041 11.7895 8.10526 12.2843 8.10526 12.8947Z\" data-v-8e668792></path><path class=\"dot-animation\" style=\"animation-delay:0.125s;\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.05039 3.61349C2.48203 4.04513 3.18184 4.04513 3.61347 3.61349C4.0451 3.18186 4.0451 2.48205 3.61347 2.05042C3.18184 1.61878 2.48203 1.61878 2.05039 2.05042C1.61876 2.48205 1.61876 3.18186 2.05039 3.61349Z\" data-v-8e668792></path><path class=\"dot-animation\" style=\"animation-delay:0.625s;\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11.9496 11.9496C11.518 12.3812 10.8182 12.3812 10.3865 11.9496C9.9549 11.5179 9.9549 10.8181 10.3865 10.3865C10.8182 9.95485 11.518 9.95485 11.9496 10.3865C12.3812 10.8181 12.3812 11.5179 11.9496 11.9496Z\" data-v-8e668792></path><path class=\"dot-animation\" style=\"animation-delay:0.875s;\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.05039 11.9496C2.48203 12.3812 3.18184 12.3812 3.61347 11.9496C4.0451 11.5179 4.0451 10.8181 3.61347 10.3865C3.18184 9.95485 2.48203 9.95485 2.05039 10.3865C1.61876 10.8181 1.61876 11.5179 2.05039 11.9496Z\" data-v-8e668792></path><path class=\"dot-animation\" style=\"animation-delay:0.375s;\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11.9496 3.61349C11.518 4.04513 10.8182 4.04513 10.3865 3.61349C9.9549 3.18186 9.9549 2.48205 10.3865 2.05042C10.8182 1.61878 11.518 1.61878 11.9496 2.05042C12.3812 2.48205 12.3812 3.18186 11.9496 3.61349Z\" data-v-8e668792></path></g><defs data-v-8e668792><clipPath id=\"clip0_776_9582\" data-v-8e668792><rect width=\"14\" height=\"14\" fill=\"white\" data-v-8e668792></rect></clipPath></defs>", 2)])], 12, _hoisted_1))], 4);
+		};
+	}
+}), [["__scopeId", "data-v-8e668792"]]);
+//#endregion
+export { DotSpinner_default as default };

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

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    modelValue: string;
+    isEditing?: boolean;
+    inputAttrs?: Record<string, string>;
+    labelClass?: string;
+    labelType?: string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    cancel: (...args: any[]) => void;
+    edit: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: ((...args: any[]) => any) | undefined;
+    onEdit?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/common/EditableText.vue.js

@@ -0,0 +1,73 @@
+import { t as Input_default } from "../shared/Input-39RLwDr2.js";
+import { createBlock, createElementBlock, createTextVNode, defineComponent, mergeProps, nextTick, normalizeClass, openBlock, ref, resolveDynamicComponent, toDisplayString, unref, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
+//#region src/components/common/EditableText.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "editable-text inline" };
+//#endregion
+//#region src/components/common/EditableText.vue
+var EditableText_default = /* @__PURE__ */ defineComponent({
+	__name: "EditableText",
+	props: {
+		modelValue: {},
+		isEditing: {
+			type: Boolean,
+			default: false
+		},
+		inputAttrs: { default: () => ({}) },
+		labelClass: {},
+		labelType: { default: "span" }
+	},
+	emits: ["edit", "cancel"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const inputValue = ref(__props.modelValue);
+		const inputRef = ref();
+		const isCanceling = ref(false);
+		function finishEditing() {
+			if (!isCanceling.value) emit("edit", inputValue.value);
+			isCanceling.value = false;
+		}
+		function cancelEditing() {
+			isCanceling.value = true;
+			inputValue.value = __props.modelValue;
+			emit("cancel");
+			inputRef.value?.blur();
+		}
+		watch(() => __props.isEditing, async (newVal) => {
+			if (newVal) {
+				inputValue.value = __props.modelValue;
+				await nextTick(() => {
+					if (!inputRef.value) return;
+					const fileName = inputValue.value.includes(".") ? inputValue.value.split(".").slice(0, -1).join(".") : inputValue.value;
+					inputRef.value.setSelectionRange(0, fileName.length);
+				});
+			}
+		}, { immediate: true });
+		const vFocus = { mounted: (el) => el.focus() };
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [!__props.isEditing ? (openBlock(), createBlock(resolveDynamicComponent(__props.labelType), {
+				key: 0,
+				class: normalizeClass(__props.labelClass)
+			}, {
+				default: withCtx(() => [createTextVNode(toDisplayString(__props.modelValue), 1)]),
+				_: 1
+			}, 8, ["class"])) : withDirectives((openBlock(), createBlock(unref(Input_default), mergeProps({
+				key: 1,
+				ref_key: "inputRef",
+				ref: inputRef,
+				modelValue: inputValue.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event),
+				type: "text",
+				class: "h-full rounded-none p-0 focus-visible:ring-0"
+			}, __props.inputAttrs, {
+				onBlur: finishEditing,
+				onKeydownCapture: [_cache[1] || (_cache[1] = withKeys(withModifiers(($event) => inputRef.value?.blur(), ["stop"]), ["enter"])), withKeys(withModifiers(cancelEditing, ["stop"]), ["escape"])],
+				onClick: _cache[2] || (_cache[2] = withModifiers(() => {}, ["stop"])),
+				onContextmenu: _cache[3] || (_cache[3] = withModifiers(() => {}, ["stop"])),
+				onPointerdownCapture: _cache[4] || (_cache[4] = withModifiers(() => {}, ["stop"])),
+				onPointermoveCapture: _cache[5] || (_cache[5] = withModifiers(() => {}, ["stop"]))
+			}), null, 16, ["modelValue", "onKeydownCapture"])), [[vFocus]])]);
+		};
+	}
+});
+//#endregion
+export { EditableText_default as default };

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

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    loading: boolean;
+    loadingMessage?: string;
+    size?: 'sm' | 'md';
+};
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => 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/LoadingOverlay.vue.js

@@ -0,0 +1,41 @@
+import { t as cn } from "../shared/src-CnJ6AzLP.js";
+import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
+//#region src/components/common/LoadingOverlay.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "absolute inset-0 z-50 flex items-center justify-center bg-background/50",
+	"data-testid": "loading-overlay"
+};
+var _hoisted_2 = { class: "flex flex-col items-center" };
+var _hoisted_3 = { class: "grid place-items-center" };
+var _hoisted_4 = { class: "col-start-1 row-start-1" };
+var _hoisted_5 = {
+	key: 0,
+	class: "mt-4 text-lg text-foreground"
+};
+//#endregion
+//#region src/components/common/LoadingOverlay.vue
+var LoadingOverlay_default = /* @__PURE__ */ defineComponent({
+	__name: "LoadingOverlay",
+	props: {
+		loading: { type: Boolean },
+		loadingMessage: {},
+		size: { default: "md" }
+	},
+	setup(__props) {
+		const spinnerSizeClass = computed(() => {
+			switch (__props.size) {
+				case "sm": return "h-6 w-6 border-2";
+				default: return "h-12 w-12 border-4";
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Transition, { name: "fade" }, {
+				default: withCtx(() => [__props.loading ? (openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [createElementVNode("div", { class: normalizeClass(unref(cn)("col-start-1 row-start-1 animate-spin rounded-full border-muted-foreground border-t-foreground", spinnerSizeClass.value)) }, null, 2), createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "default")])]), __props.loadingMessage ? (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString(__props.loadingMessage), 1)) : createCommentVNode("", true)])])) : createCommentVNode("", true)]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+export { LoadingOverlay_default as default };

package/dist/common/MarkdownText.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;