https://leks-forever-lez-rus-2.hf.space/assets/Index-DC3IOpLR.js

1import { w as writable, p as prop, e as init, s as slot, d as bind_this, b as set_class, f as set_style, l as legacy_rest_props, c as attribute_effect, S as STYLE, C as CLASS, i as if_block, q as store_get, m as setup_stores, r as rest_props, g as spread_props } from './i18n-CGlVUOvE.js';
2import { M as push, a8 as onMount, Z as get, Y as legacy_pre_effect, y as deep_read_state, _ as legacy_pre_effect_reset, U as event, av as $window, Q as child, T as reset, S as sibling, a5 as next, $ as set, t as template_effect, a as append, O as pop, a0 as mutable_source, P as flushSync, R as from_html, a1 as createEventDispatcher, I as tick, V as replay_events, N as first_child, w as untrack, ae as derived_safe_equal, a3 as comment, ab as state, ac as proxy, ad as user_effect, a2 as user_derived } from './index-Bq2njFOY.js';
3import { G as Gradio } from './utils.svelte-Bi9ASwv9.js';
4import { b as bind_element_size } from './size-CWi277d_.js';
5import { b as bubble_event } from './misc-D8a4ZbMA.js';
6import { s as select } from './select-k8gDf_61.js';
7import { d as dispatch } from './dispatch-tQmgj1It.js';
8import { I as IconButton } from './ScrollFade.svelte_svelte_type_style_lang-D0JPkGar.js';
9import './MarkdownCode.svelte_svelte_type_style_lang-B29zDiob.js';
10import { B as BlockLabel } from './BlockLabel-VpI11pHf.js';
11import { D as DownloadLink } from './DownloadLink-D6EYxQxh.js';
12import { E as Empty } from './Empty-BrRNpJ3n.js';
13import { C as Clear } from './Clear-C8Tfa7QP.js';
14import { D as Download } from './Download-D5ZNT7uE.js';
15import { I as Image } from './Image-DfZjI5oa.js';
16import { U as Undo } from './Undo-4MCSCpCy.js';
17import { I as IconButtonWrapper } from './IconButtonWrapper-DAsvkfJg.js';
18import { F as FullscreenButton } from './FullscreenButton-C6RgeACK.js';
19import { r as raf, l as loop } from './StreamingBar.svelte_svelte_type_style_lang-DWGn5tT_.js';
20import { i as is_date, S as Static } from './index-1GCmrSlD.js';
21import { U as Upload } from './Upload-xR3P-2U5.js';
22import { B as Block } from './Block-DNK-JdLJ.js';
23import { U as UploadText } from './UploadText-C6bbM_PO.js';
24import './snippet-BG7qkY_1.js';
25import './prism-python-NrKIQnfs.js';
26import './Maximize-2N5airbC.js';
27import './html-Bwif0JPw.js';
28import './actions-CgRQ2lHA.js';
29
30/*
31Adapted from https://github.com/mattdesl
32Distributed under MIT License https://github.com/mattdesl/eases/blob/master/LICENSE.md
33*/
34
35/**
36 * @param {number} t
37 * @returns {number}
38 */
39function linear(t) {
40	return t;
41}
42
43/** @import { Task } from '../internal/client/types' */
44/** @import { Tweened } from './public' */
45/** @import { TweenedOptions } from './private' */
46
47/**
48 * @template T
49 * @param {T} a
50 * @param {T} b
51 * @returns {(t: number) => T}
52 */
53function get_interpolator(a, b) {
54	if (a === b || a !== a) return () => a;
55
56	const type = typeof a;
57	if (type !== typeof b || Array.isArray(a) !== Array.isArray(b)) {
58		throw new Error('Cannot interpolate values of different type');
59	}
60
61	if (Array.isArray(a)) {
62		const arr = /** @type {Array<any>} */ (b).map((bi, i) => {
63			return get_interpolator(/** @type {Array<any>} */ (a)[i], bi);
64		});
65
66		// @ts-ignore
67		return (t) => arr.map((fn) => fn(t));
68	}
69
70	if (type === 'object') {
71		if (!a || !b) {
72			throw new Error('Object cannot be null');
73		}
74
75		if (is_date(a) && is_date(b)) {
76			const an = a.getTime();
77			const bn = b.getTime();
78			const delta = bn - an;
79
80			// @ts-ignore
81			return (t) => new Date(an + t * delta);
82		}
83
84		const keys = Object.keys(b);
85
86		/** @type {Record<string, (t: number) => T>} */
87		const interpolators = {};
88		keys.forEach((key) => {
89			// @ts-ignore
90			interpolators[key] = get_interpolator(a[key], b[key]);
91		});
92
93		// @ts-ignore
94		return (t) => {
95			/** @type {Record<string, any>} */
96			const result = {};
97			keys.forEach((key) => {
98				result[key] = interpolators[key](t);
99			});
100			return result;
101		};
102	}
103
104	if (type === 'number') {
105		const delta = /** @type {number} */ (b) - /** @type {number} */ (a);
106		// @ts-ignore
107		return (t) => a + t * delta;
108	}
109
110	// for non-numeric values, snap to the final value immediately
111	return () => b;
112}
113
114/**
115 * A tweened store in Svelte is a special type of store that provides smooth transitions between state values over time.
116 *
117 * @deprecated Use [`Tween`](https://svelte.dev/docs/svelte/svelte-motion#Tween) instead
118 * @template T
119 * @param {T} [value]
120 * @param {TweenedOptions<T>} [defaults]
121 * @returns {Tweened<T>}
122 */
123function tweened(value, defaults = {}) {
124	const store = writable(value);
125	/** @type {Task} */
126	let task;
127	let target_value = value;
128	/**
129	 * @param {T} new_value
130	 * @param {TweenedOptions<T>} [opts]
131	 */
132	function set(new_value, opts) {
133		target_value = new_value;
134
135		if (value == null) {
136			store.set((value = new_value));
137			return Promise.resolve();
138		}
139
140		/** @type {Task | null} */
141		let previous_task = task;
142
143		let started = false;

144		let {
145			delay = 0,
146			duration = 400,
147			easing = linear,
148			interpolate = get_interpolator
149		} = { ...defaults, ...opts };
150
151		if (duration === 0) {
152			if (previous_task) {
153				previous_task.abort();
154				previous_task = null;
155			}
156			store.set((value = target_value));
157			return Promise.resolve();
158		}
159
160		const start = raf.now() + delay;
161
162		/** @type {(t: number) => T} */
163		let fn;
164		task = loop((now) => {
165			if (now < start) return true;
166			if (!started) {
167				fn = interpolate(/** @type {any} */ (value), new_value);
168				if (typeof duration === 'function')
169					duration = duration(/** @type {any} */ (value), new_value);
170				started = true;
171			}
172			if (previous_task) {
173				previous_task.abort();
174				previous_task = null;
175			}
176			const elapsed = now - start;
177			if (elapsed > /** @type {number} */ (duration)) {
178				store.set((value = new_value));
179				return false;
180			}
181			// @ts-ignore
182			store.set((value = fn(easing(elapsed / duration))));
183			return true;
184		});
185		return task.promise;
186	}
187	return {
188		set,
189		update: (fn, opts) =>
190			set(fn(/** @type {any} */ (target_value), /** @type {any} */ (value)), opts),
191		subscribe: store.subscribe
192	};
193}
194
195function sourceEvent(event) {
196  let sourceEvent;
197  while (sourceEvent = event.sourceEvent) event = sourceEvent;
198  return event;
199}
200
201function pointer(event, node) {
202  event = sourceEvent(event);
203  if (node === undefined) node = event.currentTarget;
204  if (node) {
205    var svg = node.ownerSVGElement || node;
206    if (svg.createSVGPoint) {
207      var point = svg.createSVGPoint();
208      point.x = event.clientX, point.y = event.clientY;
209      point = point.matrixTransform(node.getScreenCTM().inverse());
210      return [point.x, point.y];
211    }
212    if (node.getBoundingClientRect) {
213      var rect = node.getBoundingClientRect();
214      return [event.clientX - rect.left - node.clientLeft, event.clientY - rect.top - node.clientTop];
215    }
216  }
217  return [event.pageX, event.pageY];
218}
219
220// These are typically used in conjunction with noevent to ensure that we can
221// preventDefault on the event.
222const nonpassive = {passive: false};
223const nonpassivecapture = {capture: true, passive: false};
224
225function nopropagation(event) {
226  event.stopImmediatePropagation();
227}
228
229function noevent(event) {
230  event.preventDefault();
231  event.stopImmediatePropagation();
232}
233
234function dragDisable(view) {
235  var root = view.document.documentElement,
236      selection = select(view).on("dragstart.drag", noevent, nonpassivecapture);
237  if ("onselectstart" in root) {
238    selection.on("selectstart.drag", noevent, nonpassivecapture);
239  } else {
240    root.__noselect = root.style.MozUserSelect;
241    root.style.MozUserSelect = "none";
242  }
243}
244
245function yesdrag(view, noclick) {
246  var root = view.document.documentElement,
247      selection = select(view).on("dragstart.drag", null);
248  if (noclick) {
249    selection.on("click.drag", noevent, nonpassivecapture);
250    setTimeout(function() { selection.on("click.drag", null); }, 0);
251  }
252  if ("onselectstart" in root) {
253    selection.on("selectstart.drag", null);
254  } else {
255    root.style.MozUserSelect = root.__noselect;
256    delete root.__noselect;
257  }
258}
259
260const constant = x => () => x;
261
262function DragEvent(type, {
263  sourceEvent,
264  subject,
265  target,
266  identifier,
267  active,
268  x, y, dx, dy,
269  dispatch
270}) {
271  Object.defineProperties(this, {
272    type: {value: type, enumerable: true, configurable: true},
273    sourceEvent: {value: sourceEvent, enumerable: true, configurable: true},
274    subject: {value: subject, enumerable: true, configurable: true},
275    target: {value: target, enumerable: true, configurable: true},
276    identifier: {value: identifier, enumerable: true, configurable: true},
277    active: {value: active, enumerable: true, configurable: true},
278    x: {value: x, enumerable: true, configurable: true},
279    y: {value: y, enumerable: true, configurable: true},
280    dx: {value: dx, enumerable: true, configurable: true},
281    dy: {value: dy, enumerable: true, configurable: true},
282    _: {value: dispatch}
283  });
284}
285
286DragEvent.prototype.on = function() {
287  var value = this._.on.apply(this._, arguments);
288  return value === this._ ? this : value;
289};
290
291// Ignore right-click, since that should open the context menu.
292function defaultFilter(event) {
293  return !event.ctrlKey && !event.button;
294}
295
296function defaultContainer() {
297  return this.parentNode;
298}
299
300function defaultSubject(event, d) {
301  return d == null ? {x: event.x, y: event.y} : d;
302}
303
304function defaultTouchable() {
305  return navigator.maxTouchPoints || ("ontouchstart" in this);
306}
307
308function drag() {
309  var filter = defaultFilter,
310      container = defaultContainer,
311      subject = defaultSubject,
312      touchable = defaultTouchable,
313      gestures = {},
314      listeners = dispatch("start", "drag", "end"),
315      active = 0,
316      mousedownx,
317      mousedowny,
318      mousemoving,
319      touchending,
320      clickDistance2 = 0;
321
322  function drag(selection) {
323    selection
324        .on("mousedown.drag", mousedowned)
325      .filter(touchable)
326        .on("touchstart.drag", touchstarted)
327        .on("touchmove.drag", touchmoved, nonpassive)
328        .on("touchend.drag touchcancel.drag", touchended)
329        .style("touch-action", "none")
330        .style("-webkit-tap-highlight-color", "rgba(0,0,0,0)");
331  }
332
333  function mousedowned(event, d) {
334    if (touchending || !filter.call(this, event, d)) return;
335    var gesture = beforestart(this, container.call(this, event, d), event, d, "mouse");
336    if (!gesture) return;
337    select(event.view)
338      .on("mousemove.drag", mousemoved, nonpassivecapture)
339      .on("mouseup.drag", mouseupped, nonpassivecapture);
340    dragDisable(event.view);
341    nopropagation(event);
342    mousemoving = false;

343    mousedownx = event.clientX;
344    mousedowny = event.clientY;
345    gesture("start", event);
346  }
347
348  function mousemoved(event) {
349    noevent(event);
350    if (!mousemoving) {
351      var dx = event.clientX - mousedownx, dy = event.clientY - mousedowny;
352      mousemoving = dx * dx + dy * dy > clickDistance2;
353    }
354    gestures.mouse("drag", event);
355  }
356
357  function mouseupped(event) {
358    select(event.view).on("mousemove.drag mouseup.drag", null);
359    yesdrag(event.view, mousemoving);
360    noevent(event);
361    gestures.mouse("end", event);
362  }
363
364  function touchstarted(event, d) {
365    if (!filter.call(this, event, d)) return;
366    var touches = event.changedTouches,
367        c = container.call(this, event, d),
368        n = touches.length, i, gesture;
369
370    for (i = 0; i < n; ++i) {
371      if (gesture = beforestart(this, c, event, d, touches[i].identifier, touches[i])) {
372        nopropagation(event);
373        gesture("start", event, touches[i]);
374      }
375    }
376  }
377
378  function touchmoved(event) {
379    var touches = event.changedTouches,
380        n = touches.length, i, gesture;
381
382    for (i = 0; i < n; ++i) {
383      if (gesture = gestures[touches[i].identifier]) {
384        noevent(event);
385        gesture("drag", event, touches[i]);
386      }
387    }
388  }
389
390  function touchended(event) {
391    var touches = event.changedTouches,
392        n = touches.length, i, gesture;
393
394    if (touchending) clearTimeout(touchending);
395    touchending = setTimeout(function() { touchending = null; }, 500); // Ghost clicks are delayed!
396    for (i = 0; i < n; ++i) {
397      if (gesture = gestures[touches[i].identifier]) {
398        nopropagation(event);
399        gesture("end", event, touches[i]);
400      }
401    }
402  }
403
404  function beforestart(that, container, event, d, identifier, touch) {
405    var dispatch = listeners.copy(),
406        p = pointer(touch || event, container), dx, dy,
407        s;
408
409    if ((s = subject.call(that, new DragEvent("beforestart", {
410        sourceEvent: event,
411        target: drag,
412        identifier,
413        active,
414        x: p[0],
415        y: p[1],
416        dx: 0,
417        dy: 0,
418        dispatch
419      }), d)) == null) return;
420
421    dx = s.x - p[0] || 0;
422    dy = s.y - p[1] || 0;
423
424    return function gesture(type, event, touch) {
425      var p0 = p, n;
426      switch (type) {
427        case "start": gestures[identifier] = gesture, n = active++; break;
428        case "end": delete gestures[identifier], --active; // falls through
429        case "drag": p = pointer(touch || event, container), n = active; break;
430      }
431      dispatch.call(
432        type,
433        that,
434        new DragEvent(type, {
435          sourceEvent: event,
436          subject: s,
437          target: drag,
438          identifier,
439          active: n,
440          x: p[0] + dx,
441          y: p[1] + dy,
442          dx: p[0] - p0[0],
443          dy: p[1] - p0[1],
444          dispatch
445        }),
446        d
447      );
448    };
449  }
450
451  drag.filter = function(_) {
452    return arguments.length ? (filter = typeof _ === "function" ? _ : constant(!!_), drag) : filter;
453  };
454
455  drag.container = function(_) {
456    return arguments.length ? (container = typeof _ === "function" ? _ : constant(_), drag) : container;
457  };
458
459  drag.subject = function(_) {
460    return arguments.length ? (subject = typeof _ === "function" ? _ : constant(_), drag) : subject;
461  };
462
463  drag.touchable = function(_) {
464    return arguments.length ? (touchable = typeof _ === "function" ? _ : constant(!!_), drag) : touchable;
465  };
466
467  drag.on = function() {
468    var value = listeners.on.apply(listeners, arguments);
469    return value === listeners ? drag : value;
470  };
471
472  drag.clickDistance = function(_) {
473    return arguments.length ? (clickDistance2 = (_ = +_) * _, drag) : Math.sqrt(clickDistance2);
474  };
475
476  return drag;
477}
478
479var root$3 = from_html(`<div class="wrap svelte-b2bl92" role="none"><div class="content svelte-b2bl92"><!></div> <div role="none"><span><span class="icon left svelte-b2bl92">◢</span><span class="icon center svelte-b2bl92"></span><span class="icon right svelte-b2bl92">◢</span></span> <div class="inner svelte-b2bl92"></div></div></div>`);
480
481function Slider($$anchor, $$props) {
482	push($$props, false);
483
484	function clamp(value, min, max) {
485		return Math.min(Math.max(value, min), max);
486	}
487
488	let position = prop($$props, 'position', 12, 0.5);
489	let disabled = prop($$props, 'disabled', 12, false);
490	let slider_color = prop($$props, 'slider_color', 12, "var(--border-color-primary)");
491	let image_size = prop($$props, 'image_size', 28, () => ({ top: 0, left: 0, width: 0, height: 0 }));
492	let el = prop($$props, 'el', 12, undefined);
493	let parent_el = prop($$props, 'parent_el', 12, undefined);
494	let inner = mutable_source();
495	let px = mutable_source(0);
496	let active = mutable_source(false);
497	let container_width = 0;
498
499	function set_position(width) {
500		container_width = parent_el()?.getBoundingClientRect().width || 0;
501
502		if (width === 0) {
503			image_size(image_size().width = el()?.getBoundingClientRect().width || 0, true);
504		}
505
506		set(px, clamp(image_size().width * position() + image_size().left, 0, container_width));
507	}
508
509	function round(n, points) {
510		const mod = Math.pow(10, points);
511
512		return Math.round((n + Number.EPSILON) * mod) / mod;
513	}
514
515	function update_position(x) {
516		set(px, clamp(x, 0, container_width));
517		position(round((x - image_size().left) / image_size().width, 5));
518	}
519
520	function drag_start(event) {
521		if (disabled()) return;
522
523		set(active, true);
524		update_position(event.x);
525	}
526
527	function drag_move(event) {
528		if (disabled()) return;
529
530		update_position(event.x);
531	}
532
533	function drag_end() {
534		if (disabled()) return;
535
536		set(active, false);
537	}
538
539	function update_position_from_pc(pc) {
540		set(px, clamp(image_size().width * pc + image_size().left, 0, container_width));
541	}
542
543	onMount(() => {
544		set_position(image_size().width);
545
546		const drag_handler = drag().on("start", drag_start).on("drag", drag_move).on("end", drag_end);
547
548		select(get(inner)).call(drag_handler);
549	});
550
551	legacy_pre_effect(() => (deep_read_state(image_size())), () => {
552		set_position(image_size().width);
553	});
554
555	legacy_pre_effect(() => (deep_read_state(position())), () => {
556		update_position_from_pc(position());
557	});
558
559	legacy_pre_effect_reset();
560
561	var $$exports = {
562		get position() {
563			return position();
564		},
565
566		set position($$value) {
567			position($$value);
568			flushSync();
569		},
570
571		get disabled() {
572			return disabled();
573		},
574
575		set disabled($$value) {
576			disabled($$value);
577			flushSync();
578		},
579
580		get slider_color() {
581			return slider_color();
582		},
583
584		set slider_color($$value) {
585			slider_color($$value);
586			flushSync();
587		},
588
589		get image_size() {
590			return image_size();
591		},
592
593		set image_size($$value) {
594			image_size($$value);
595			flushSync();
596		},
597
598		get el() {

599			return el();
600		},
601
602		set el($$value) {
603			el($$value);
604			flushSync();
605		},
606
607		get parent_el() {
608			return parent_el();
609		},
610
611		set parent_el($$value) {
612			parent_el($$value);
613			flushSync();
614		}
615	};
616
617	init();
618
619	var div = root$3();
620
621	event('resize', $window, () => set_position(image_size().width));
622
623	var div_1 = child(div);
624	var node = child(div_1);
625
626	slot(node, $$props, 'default', {}, null);
627	reset(div_1);
628	bind_this(div_1, ($$value) => el($$value), () => el());
629
630	var div_2 = sibling(div_1, 2);
631	let classes;
632	var span = child(div_2);
633	let classes_1;
634	var span_1 = sibling(child(span));
635	let styles;
636
637	next();
638	reset(span);
639
640	var div_3 = sibling(span, 2);
641	let styles_1;
642
643	reset(div_2);
644	bind_this(div_2, ($$value) => set(inner, $$value), () => get(inner));
645	reset(div);
646	bind_this(div, ($$value) => parent_el($$value), () => parent_el());
647
648	template_effect(() => {
649		classes = set_class(div_2, 1, 'outer svelte-b2bl92', null, classes, { disabled: disabled(), grab: get(active) });
650		set_style(div_2, `transform: translateX(${get(px) ?? ''}px)`);
651		classes_1 = set_class(span, 1, 'icon-wrap svelte-b2bl92', null, classes_1, { active: get(active), disabled: disabled() });
652		styles = set_style(span_1, '', styles, { '--color': slider_color() });
653		styles_1 = set_style(div_3, '', styles_1, { '--color': slider_color() });
654	});
655
656	append($$anchor, div);
657
658	return pop($$exports);
659}
660
661var root$2 = from_html(`<img/>`);
662
663function ImageEl($$anchor, $$props) {
664	const $$sanitized_props = legacy_rest_props($$props, ['children', '$$slots', '$$events', '$$legacy']);
665
666	const $$restProps = legacy_rest_props($$sanitized_props, [
667		'src',
668		'fullscreen',
669		'fixed',
670		'transform',
671		'img_el',
672		'hidden',
673		'variant',
674		'max_height'
675	]);
676
677	push($$props, false);
678
679	let src = prop($$props, 'src', 12, undefined);
680	let fullscreen = prop($$props, 'fullscreen', 12, false);
681	let fixed = prop($$props, 'fixed', 12, false);
682	let transform = prop($$props, 'transform', 12, "translate(0px, 0px) scale(1)");
683	let img_el = prop($$props, 'img_el', 12, null);
684	let hidden = prop($$props, 'hidden', 12, false);
685	let variant = prop($$props, 'variant', 12, "upload");
686	let max_height = prop($$props, 'max_height', 12, 500);
687	const dispatch = createEventDispatcher();
688
689	function get_image_size(img) {
690		if (!img) return { top: 0, left: 0, width: 0, height: 0 };
691
692		const container = img.parentElement?.getBoundingClientRect();
693
694		if (!container) return { top: 0, left: 0, width: 0, height: 0 };
695
696		const naturalAspect = img.naturalWidth / img.naturalHeight;
697		const containerAspect = container.width / container.height;
698		let displayedWidth, displayedHeight;
699
700		if (naturalAspect > containerAspect) {
701			displayedWidth = container.width;
702			displayedHeight = container.width / naturalAspect;
703		} else {
704			displayedHeight = container.height;
705			displayedWidth = container.height * naturalAspect;
706		}
707
708		const offsetX = (container.width - displayedWidth) / 2;
709		const offsetY = (container.height - displayedHeight) / 2;
710
711		return {
712			top: offsetY,
713			left: offsetX,
714			width: displayedWidth,
715			height: displayedHeight
716		};
717	}
718
719	onMount(() => {
720		const resizer = new ResizeObserver(async (entries) => {
721			for (const entry of entries) {
722				await tick();
723				dispatch("load", get_image_size(img_el()));
724			}
725		});
726
727		resizer.observe(img_el());
728
729		return () => {
730			resizer.disconnect();
731		};
732	});
733
734	var $$exports = {
735		get src() {
736			return src();
737		},
738
739		set src($$value) {
740			src($$value);
741			flushSync();
742		},
743
744		get fullscreen() {
745			return fullscreen();
746		},
747
748		set fullscreen($$value) {
749			fullscreen($$value);
750			flushSync();
751		},
752
753		get fixed() {
754			return fixed();
755		},
756
757		set fixed($$value) {
758			fixed($$value);
759			flushSync();
760		},
761
762		get transform() {
763			return transform();
764		},
765
766		set transform($$value) {
767			transform($$value);
768			flushSync();
769		},
770
771		get img_el() {
772			return img_el();
773		},
774
775		set img_el($$value) {
776			img_el($$value);
777			flushSync();
778		},
779
780		get hidden() {
781			return hidden();
782		},
783
784		set hidden($$value) {
785			hidden($$value);
786			flushSync();
787		},
788
789		get variant() {
790			return variant();
791		},
792
793		set variant($$value) {
794			variant($$value);
795			flushSync();
796		},
797
798		get max_height() {
799			return max_height();
800		},
801
802		set max_height($$value) {
803			max_height($$value);
804			flushSync();
805		}
806	};
807
808	init();
809
810	var img_1 = root$2();
811
812	attribute_effect(
813		img_1,
814		() => ({
815			src: src(),
816			...$$restProps,
817			[CLASS]: {
818				fixed: fixed(),
819				hidden: hidden(),
820				preview: variant() === "preview",
821				slider: variant() === "upload",
822				fullscreen: fullscreen(),
823				small: !fullscreen()
824			},
825			[STYLE]: {
826				transform: transform(),
827				'max-height': max_height() && !fullscreen() ? `${max_height()}px` : null
828			}
829		}),
830		void 0,
831		void 0,
832		void 0,
833		'svelte-j3ek2n'
834	);
835
836	bind_this(img_1, ($$value) => img_el($$value), () => img_el());
837	replay_events(img_1);

838	event('load', img_1, () => dispatch("load", get_image_size(img_el())));
839	append($$anchor, img_1);
840
841	return pop($$exports);
842}
843
844class ZoomableImage {
845  container;
846  image;
847  scale;
848  offsetX;
849  offsetY;
850  isDragging;
851  lastX;
852  lastY;
853  initial_left_padding;
854  initial_top_padding;
855  initial_width;
856  initial_height;
857  subscribers;
858  handleImageLoad;
859  real_image_size = { top: 0, left: 0, width: 0, height: 0 };
860  last_touch_distance;
861  constructor(container, image) {
862    this.container = container;
863    this.image = image;
864    this.scale = 1;
865    this.offsetX = 0;
866    this.offsetY = 0;
867    this.isDragging = false;
868    this.lastX = 0;
869    this.lastY = 0;
870    this.initial_left_padding = 0;
871    this.initial_top_padding = 0;
872    this.initial_width = 0;
873    this.initial_height = 0;
874    this.subscribers = [];
875    this.last_touch_distance = 0;
876    this.handleWheel = this.handleWheel.bind(this);
877    this.handleMouseDown = this.handleMouseDown.bind(this);
878    this.handleMouseMove = this.handleMouseMove.bind(this);
879    this.handleMouseUp = this.handleMouseUp.bind(this);
880    this.handleImageLoad = this.init.bind(this);
881    this.handleTouchStart = this.handleTouchStart.bind(this);
882    this.handleTouchMove = this.handleTouchMove.bind(this);
883    this.handleTouchEnd = this.handleTouchEnd.bind(this);
884    this.image.addEventListener("load", this.handleImageLoad);
885    this.container.addEventListener("wheel", this.handleWheel);
886    this.container.addEventListener("mousedown", this.handleMouseDown);
887    document.addEventListener("mousemove", this.handleMouseMove);
888    document.addEventListener("mouseup", this.handleMouseUp);
889    this.container.addEventListener("touchstart", this.handleTouchStart);
890    document.addEventListener("touchmove", this.handleTouchMove);
891    document.addEventListener("touchend", this.handleTouchEnd);
892    const observer = new ResizeObserver((entries) => {
893      for (const entry of entries) {
894        if (entry.target === this.container) {
895          this.handleResize();
896          this.get_image_size(this.image);
897        }
898      }
899    });
900    observer.observe(this.container);
901  }
902  handleResize() {
903    this.init();
904  }
905  init() {
906    const containerRect = this.container.getBoundingClientRect();
907    const imageRect = this.image.getBoundingClientRect();
908    this.initial_left_padding = imageRect.left - containerRect.left;
909    this.initial_top_padding = imageRect.top - containerRect.top;
910    this.initial_width = imageRect.width;
911    this.initial_height = imageRect.height;
912    this.reset_zoom();
913    this.updateTransform();
914  }
915  reset_zoom() {
916    this.scale = 1;
917    this.offsetX = 0;
918    this.offsetY = 0;
919    this.updateTransform();
920  }
921  handleMouseDown(e) {
922    const imageRect = this.image.getBoundingClientRect();
923    if (e.clientX >= imageRect.left && e.clientX <= imageRect.right && e.clientY >= imageRect.top && e.clientY <= imageRect.bottom) {
924      e.preventDefault();
925      if (this.scale === 1) return;
926      this.isDragging = true;
927      this.lastX = e.clientX;
928      this.lastY = e.clientY;
929      this.image.style.cursor = "grabbing";
930    }
931  }
932  handleMouseMove(e) {
933    if (!this.isDragging) return;
934    const deltaX = e.clientX - this.lastX;
935    const deltaY = e.clientY - this.lastY;
936    this.offsetX += deltaX;
937    this.offsetY += deltaY;
938    this.lastX = e.clientX;
939    this.lastY = e.clientY;
940    this.updateTransform();
941    this.updateTransform();
942  }
943  handleMouseUp() {
944    if (this.isDragging) {
945      this.constrain_to_bounds(true);
946      this.updateTransform();
947      this.isDragging = false;
948      this.image.style.cursor = this.scale > 1 ? "grab" : "zoom-in";
949    }
950  }
951  async handleWheel(e) {
952    e.preventDefault();
953    const containerRect = this.container.getBoundingClientRect();
954    const imageRect = this.image.getBoundingClientRect();
955    if (e.clientX < imageRect.left || e.clientX > imageRect.right || e.clientY < imageRect.top || e.clientY > imageRect.bottom) {
956      return;
957    }
958    const zoomFactor = 1.05;
959    const oldScale = this.scale;
960    const newScale = -Math.sign(e.deltaY) > 0 ? Math.min(15, oldScale * zoomFactor) : Math.max(1, oldScale / zoomFactor);
961    if (newScale === oldScale) return;
962    const cursorX = e.clientX - containerRect.left - this.initial_left_padding;
963    const cursorY = e.clientY - containerRect.top - this.initial_top_padding;
964    this.scale = newScale;
965    this.offsetX = this.compute_new_offset({
966      cursor_position: cursorX,
967      current_offset: this.offsetX,
968      new_scale: newScale,
969      old_scale: oldScale
970    });
971    this.offsetY = this.compute_new_offset({
972      cursor_position: cursorY,
973      current_offset: this.offsetY,
974      new_scale: newScale,
975      old_scale: oldScale
976    });
977    this.updateTransform();
978    this.constrain_to_bounds();
979    this.updateTransform();
980    this.image.style.cursor = this.scale > 1 ? "grab" : "zoom-in";
981  }
982  // compute_offset_for_positions({ position: number, scale: number }) {
983  // 	return position - (scale / this.scale) * (position - this.offset);
984  // }
985  compute_new_position({
986    position,
987    scale,
988    anchor_position
989  }) {
990    return position - (position - anchor_position) * (scale / this.scale);
991  }
992  compute_new_offset({
993    cursor_position,
994    current_offset,
995    new_scale,
996    old_scale
997  }) {

998    return cursor_position - new_scale / old_scale * (cursor_position - current_offset);
999  }
1000  constrain_to_bounds(pan = false) {
1001    if (this.scale === 1) {
1002      this.offsetX = 0;
1003      this.offsetY = 0;
1004      return;
1005    }
1006    const onscreen = {
1007      top: this.real_image_size.top * this.scale + this.offsetY,
1008      left: this.real_image_size.left * this.scale + this.offsetX,
1009      width: this.real_image_size.width * this.scale,
1010      height: this.real_image_size.height * this.scale,
1011      bottom: this.real_image_size.top * this.scale + this.offsetY + this.real_image_size.height * this.scale,
1012      right: this.real_image_size.left * this.scale + this.offsetX + this.real_image_size.width * this.scale
1013    };
1014    const real_image_size_right = this.real_image_size.left + this.real_image_size.width;
1015    const real_image_size_bottom = this.real_image_size.top + this.real_image_size.height;
1016    if (pan) {
1017      if (onscreen.top > this.real_image_size.top) {
1018        this.offsetY = this.calculate_position(
1019          this.real_image_size.top,
1020          0,
1021          "y"
1022        );
1023      } else if (onscreen.bottom < real_image_size_bottom) {
1024        this.offsetY = this.calculate_position(real_image_size_bottom, 1, "y");
1025      }
1026      if (onscreen.left > this.real_image_size.left) {
1027        this.offsetX = this.calculate_position(
1028          this.real_image_size.left,
1029          0,
1030          "x"
1031        );
1032      } else if (onscreen.right < real_image_size_right) {
1033        this.offsetX = this.calculate_position(real_image_size_right, 1, "x");
1034      }
1035    }
1036  }
1037  updateTransform() {
1038    this.notify({ x: this.offsetX, y: this.offsetY, scale: this.scale });
1039  }
1040  destroy() {
1041    this.container.removeEventListener("wheel", this.handleWheel);
1042    this.container.removeEventListener("mousedown", this.handleMouseDown);
1043    document.removeEventListener("mousemove", this.handleMouseMove);
1044    document.removeEventListener("mouseup", this.handleMouseUp);
1045    this.container.removeEventListener("touchstart", this.handleTouchStart);
1046    document.removeEventListener("touchmove", this.handleTouchMove);
1047    document.removeEventListener("touchend", this.handleTouchEnd);
1048    this.image.removeEventListener("load", this.handleImageLoad);
1049  }
1050  subscribe(cb) {
1051    this.subscribers.push(cb);
1052  }
1053  unsubscribe(cb) {
1054    this.subscribers = this.subscribers.filter(
1055      (subscriber) => subscriber !== cb
1056    );
1057  }
1058  notify({ x, y, scale }) {
1059    this.subscribers.forEach((subscriber) => subscriber({ x, y, scale }));
1060  }
1061  handleTouchStart(e) {
1062    e.preventDefault();
1063    const imageRect = this.image.getBoundingClientRect();
1064    const touch = e.touches[0];
1065    if (touch.clientX >= imageRect.left && touch.clientX <= imageRect.right && touch.clientY >= imageRect.top && touch.clientY <= imageRect.bottom) {
1066      if (e.touches.length === 1 && this.scale > 1) {
1067        this.isDragging = true;
1068        this.lastX = touch.clientX;
1069        this.lastY = touch.clientY;
1070      } else if (e.touches.length === 2) {
1071        const touch1 = e.touches[0];
1072        const touch2 = e.touches[1];
1073        this.last_touch_distance = Math.hypot(
1074          touch2.clientX - touch1.clientX,
1075          touch2.clientY - touch1.clientY
1076        );
1077      }
1078    }
1079  }
1080  get_image_size(img) {
1081    if (!img) return;
1082    const container = img.parentElement?.getBoundingClientRect();
1083    if (!container) return;
1084    const naturalAspect = img.naturalWidth / img.naturalHeight;
1085    const containerAspect = container.width / container.height;
1086    let displayedWidth, displayedHeight;
1087    if (naturalAspect > containerAspect) {
1088      displayedWidth = container.width;
1089      displayedHeight = container.width / naturalAspect;
1090    } else {
1091      displayedHeight = container.height;
1092      displayedWidth = container.height * naturalAspect;
1093    }
1094    const offsetX = (container.width - displayedWidth) / 2;
1095    const offsetY = (container.height - displayedHeight) / 2;
1096    this.real_image_size = {
1097      top: offsetY,
1098      left: offsetX,
1099      width: displayedWidth,
1100      height: displayedHeight
1101    };
1102  }
1103  handleTouchMove(e) {
1104    if (e.touches.length === 1 && this.isDragging) {
1105      e.preventDefault();
1106      const touch = e.touches[0];
1107      const deltaX = touch.clientX - this.lastX;
1108      const deltaY = touch.clientY - this.lastY;
1109      this.offsetX += deltaX;
1110      this.offsetY += deltaY;
1111      this.lastX = touch.clientX;
1112      this.lastY = touch.clientY;
1113      this.updateTransform();
1114    } else if (e.touches.length === 2) {
1115      e.preventDefault();
1116      const touch1 = e.touches[0];
1117      const touch2 = e.touches[1];
1118      const current_distance = Math.hypot(
1119        touch2.clientX - touch1.clientX,
1120        touch2.clientY - touch1.clientY
1121      );
1122      if (this.last_touch_distance === 0) {
1123        this.last_touch_distance = current_distance;
1124        return;
1125      }
1126      const zoomFactor = current_distance / this.last_touch_distance;
1127      const oldScale = this.scale;
1128      const newScale = Math.min(15, Math.max(1, oldScale * zoomFactor));
1129      if (newScale === oldScale) {
1130        this.last_touch_distance = current_distance;
1131        return;
1132      }
1133      const containerRect = this.container.getBoundingClientRect();
1134      const midX = (touch1.clientX + touch2.clientX) / 2 - containerRect.left - this.initial_left_padding;
1135      const midY = (touch1.clientY + touch2.clientY) / 2 - containerRect.top - this.initial_top_padding;
1136      this.scale = newScale;
1137      this.offsetX = this.compute_new_offset({
1138        cursor_position: midX,
1139        current_offset: this.offsetX,
1140        new_scale: newScale,
1141        old_scale: oldScale
1142      });
1143      this.offsetY = this.compute_new_offset({
1144        cursor_position: midY,
1145        current_offset: this.offsetY,
1146        new_scale: newScale,
1147        old_scale: oldScale
1148      });
1149      this.updateTransform();
1150      this.constrain_to_bounds();
1151      this.updateTransform();
1152      this.last_touch_distance = current_distance;
1153      this.image.style.cursor = this.scale > 1 ? "grab" : "zoom-in";
1154    }
1155  }
1156  handleTouchEnd(e) {
1157    if (this.isDragging) {
1158      this.constrain_to_bounds(true);
1159      this.updateTransform();
1160      this.isDragging = false;

1161    }
1162    if (e.touches.length === 0) {
1163      this.last_touch_distance = 0;
1164    }
1165  }
1166  calculate_position(screen_coord, image_anchor, axis) {
1167    this.container.getBoundingClientRect();
1168    if (axis === "x") {
1169      const relative_screen_x = screen_coord;
1170      const anchor_x = this.real_image_size.left + image_anchor * this.real_image_size.width;
1171      return relative_screen_x - anchor_x * this.scale;
1172    }
1173    if (axis === "y") {
1174      const relative_screen_y = screen_coord;
1175      const anchor_y = this.real_image_size.top + image_anchor * this.real_image_size.height;
1176      return relative_screen_y - anchor_y * this.scale;
1177    }
1178    return 0;
1179  }
1180}
1181
1182var root_4$1 = from_html(`<!> <!> <!> <!>`, 1);
1183var root_9 = from_html(`<!> <!>`, 1);
1184var root_3$1 = from_html(`<div class="image-container svelte-1880bc6"><!> <div><!></div></div>`);
1185var root$1 = from_html(`<!> <!>`, 1);
1186
1187function SliderPreview($$anchor, $$props) {
1188	push($$props, false);
1189
1190	const $transform = () => store_get(transform, '$transform', $$stores);
1191	const [$$stores, $$cleanup] = setup_stores();
1192	const coords_at_viewport = mutable_source();
1193	const style = mutable_source();
1194	let value = prop($$props, 'value', 28, () => [null, null]);
1195	let label = prop($$props, 'label', 12, undefined);
1196	let show_download_button = prop($$props, 'show_download_button', 12, true);
1197	let show_label = prop($$props, 'show_label', 12);
1198	let i18n = prop($$props, 'i18n', 12);
1199	let position = prop($$props, 'position', 12);
1200	let layer_images = prop($$props, 'layer_images', 12, true);
1201	let show_single = prop($$props, 'show_single', 12, false);
1202	let slider_color = prop($$props, 'slider_color', 12);
1203	let show_fullscreen_button = prop($$props, 'show_fullscreen_button', 12, true);
1204	let fullscreen = prop($$props, 'fullscreen', 12, false);
1205	let buttons = prop($$props, 'buttons', 12, null);
1206	let on_custom_button_click = prop($$props, 'on_custom_button_click', 12, null);
1207	let el_width = prop($$props, 'el_width', 12, 0);
1208	let max_height = prop($$props, 'max_height', 12);
1209	let interactive = prop($$props, 'interactive', 12, true);
1210	const dispatch = createEventDispatcher();
1211	let img = mutable_source();
1212	let slider_wrap = mutable_source();
1213	let image_container = mutable_source();
1214	let transform = tweened({ x: 0, y: 0, z: 1 }, { duration: 75 });
1215	let parent_el = mutable_source();
1216
1217	function get_coords_at_viewport(
1218		viewport_percent_x, // 0-1
1219		viewportWidth,
1220		image_width,
1221		img_offset_x,
1222		tx, // image translation x (in pixels)
1223		scale // image scale (uniform)
1224	) {
1225		const px_relative_to_image = viewport_percent_x * image_width;
1226		const pixel_position = px_relative_to_image + img_offset_x;
1227		const normalised_position = (pixel_position - tx) / scale;
1228		const percent_position = normalised_position / viewportWidth;
1229
1230		return percent_position;
1231	}
1232	let viewport_width = mutable_source(0);
1233	let zoomable_image = mutable_source(null);
1234	let observer = null;
1235
1236	function init_image(img, slider_wrap) {
1237		if (!img || !slider_wrap) return;
1238
1239		get(zoomable_image)?.destroy();
1240		observer?.disconnect();
1241		img?.getBoundingClientRect().width || 0;
1242		set(viewport_width, slider_wrap?.getBoundingClientRect().width || 0);
1243		set(zoomable_image, new ZoomableImage(slider_wrap, img));
1244
1245		get(zoomable_image).subscribe(({ x, y, scale }) => {
1246			transform.set({ x, y, z: scale });
1247		});
1248
1249		observer = new ResizeObserver((entries) => {
1250			for (const entry of entries) {
1251				if (entry.target === slider_wrap) {
1252					set(viewport_width, entry.contentRect.width);
1253				}
1254
1255				if (entry.target === img) {
1256					entry.contentRect.width;
1257				}
1258			}
1259		});
1260
1261		observer.observe(slider_wrap);
1262		observer.observe(img);
1263	}
1264
1265	onMount(() => {
1266		return () => {
1267			get(zoomable_image)?.destroy();
1268			observer?.disconnect();
1269		};
1270	});
1271
1272	let slider_wrap_parent = mutable_source();
1273	let image_size = mutable_source({ top: 0, left: 0, width: 0, height: 0 });
1274
1275	function handle_image_load(event) {
1276		set(image_size, event.detail);
1277	}
1278
1279	legacy_pre_effect(
1280		() => (
1281			deep_read_state(position()),
1282			get(viewport_width),
1283			get(image_size),
1284			$transform()
1285		),
1286		() => {
1287			set(coords_at_viewport, get_coords_at_viewport(position(), get(viewport_width), get(image_size).width, get(image_size).left, $transform().x, $transform().z));
1288		}
1289	);
1290
1291	legacy_pre_effect(() => (deep_read_state(layer_images()), get(coords_at_viewport)), () => {
1292		set(style, layer_images()
1293			? `clip-path: inset(0 0 0 ${get(coords_at_viewport) * 100}%)`
1294			: "");
1295	});
1296
1297	legacy_pre_effect(() => (get(img), get(slider_wrap)), () => {
1298		init_image(get(img), get(slider_wrap));
1299	});
1300
1301	legacy_pre_effect_reset();
1302
1303	var $$exports = {
1304		get value() {
1305			return value();
1306		},
1307
1308		set value($$value) {
1309			value($$value);
1310			flushSync();
1311		},
1312
1313		get label() {
1314			return label();
1315		},
1316
1317		set label($$value) {
1318			label($$value);
1319			flushSync();
1320		},
1321
1322		get show_download_button() {
1323			return show_download_button();
1324		},
1325
1326		set show_download_button($$value) {
1327			show_download_button($$value);
1328			flushSync();
1329		},
1330
1331		get show_label() {
1332			return show_label();
1333		},
1334
1335		set show_label($$value) {
1336			show_label($$value);
1337			flushSync();
1338		},
1339
1340		get i18n() {
1341			return i18n();
1342		},
1343
1344		set i18n($$value) {
1345			i18n($$value);
1346			flushSync();
1347		},
1348
1349		get position() {
1350			return position();
1351		},
1352
1353		set position($$value) {
1354			position($$value);
1355			flushSync();
1356		},
1357
1358		get layer_images() {
1359			return layer_images();
1360		},
1361
1362		set layer_images($$value) {
1363			layer_images($$value);
1364			flushSync();
1365		},
1366
1367		get show_single() {
1368			return show_single();
1369		},
1370
1371		set show_single($$value) {
1372			show_single($$value);
1373			flushSync();
1374		},
1375
1376		get slider_color() {
1377			return slider_color();
1378		},
1379
1380		set slider_color($$value) {
1381			slider_color($$value);
1382			flushSync();
1383		},
1384
1385		get show_fullscreen_button() {
1386			return show_fullscreen_button();
1387		},
1388
1389		set show_fullscreen_button($$value) {
1390			show_fullscreen_button($$value);
1391			flushSync();
1392		},
1393
1394		get fullscreen() {
1395			return fullscreen();
1396		},
1397
1398		set fullscreen($$value) {
1399			fullscreen($$value);
1400			flushSync();
1401		},
1402
1403		get buttons() {
1404			return buttons();
1405		},
1406
1407		set buttons($$value) {
1408			buttons($$value);
1409			flushSync();
1410		},
1411
1412		get on_custom_button_click() {
1413			return on_custom_button_click();
1414		},
1415
1416		set on_custom_button_click($$value) {
1417			on_custom_button_click($$value);
1418			flushSync();
1419		},
1420
1421		get el_width() {
1422			return el_width();
1423		},
1424
1425		set el_width($$value) {
1426			el_width($$value);
1427			flushSync();
1428		},
1429
1430		get max_height() {
1431			return max_height();
1432		},
1433
1434		set max_height($$value) {
1435			max_height($$value);
1436			flushSync();
1437		},
1438
1439		get interactive() {
1440			return interactive();
1441		},
1442
1443		set interactive($$value) {
1444			interactive($$value);
1445			flushSync();
1446		}
1447	};
1448
1449	init();
1450
1451	var fragment = root$1();
1452	var node = first_child(fragment);
1453
1454	{
1455		let $0 = derived_safe_equal(() => (
1456			deep_read_state(label()),

1457			deep_read_state(i18n()),
1458			untrack(() => label() || i18n()("image.image"))
1459		));
1460
1461		BlockLabel(node, {
1462			get show_label() {
1463				return show_label();
1464			},
1465
1466			get Icon() {
1467				return Image;
1468			},
1469
1470			get label() {
1471				return get($0);
1472			}
1473		});
1474	}
1475
1476	var node_1 = sibling(node, 2);
1477
1478	{
1479		var consequent = ($$anchor) => {
1480			Empty($$anchor, {
1481				unpadded_box: true,
1482				size: 'large',
1483				children: ($$anchor, $$slotProps) => {
1484					Image($$anchor);
1485				},
1486				$$slots: { default: true }
1487			});
1488		};
1489
1490		var alternate = ($$anchor) => {
1491			var div = root_3$1();
1492			var node_2 = child(div);
1493
1494			IconButtonWrapper(node_2, {
1495				get buttons() {
1496					return buttons();
1497				},
1498
1499				get on_custom_button_click() {
1500					return on_custom_button_click();
1501				},
1502
1503				children: ($$anchor, $$slotProps) => {
1504					var fragment_3 = root_4$1();
1505					var node_3 = first_child(fragment_3);
1506
1507					{
1508						let $0 = derived_safe_equal(() => (
1509							deep_read_state(i18n()),
1510							untrack(() => i18n()("common.undo"))
1511						));
1512
1513						let $1 = derived_safe_equal(() => ($transform(), untrack(() => $transform().z === 1)));
1514
1515						IconButton(node_3, {
1516							get Icon() {
1517								return Undo;
1518							},
1519
1520							get label() {
1521								return get($0);
1522							},
1523
1524							get disabled() {
1525								return get($1);
1526							},
1527							onclick: () => get(zoomable_image)?.reset_zoom()
1528						});
1529					}
1530
1531					var node_4 = sibling(node_3, 2);
1532
1533					{
1534						var consequent_1 = ($$anchor) => {
1535							FullscreenButton($$anchor, {
1536								get fullscreen() {
1537									return fullscreen();
1538								},
1539
1540								$$events: {
1541									fullscreen($$arg) {
1542										bubble_event.call(this, $$props, $$arg);
1543									}
1544								}
1545							});
1546						};
1547
1548						if_block(node_4, ($$render) => {
1549							if (show_fullscreen_button()) $$render(consequent_1);
1550						});
1551					}
1552
1553					var node_5 = sibling(node_4, 2);
1554
1555					{
1556						var consequent_2 = ($$anchor) => {
1557							{
1558								let $0 = derived_safe_equal(() => (deep_read_state(value()), untrack(() => value()[1]?.url)));
1559
1560								let $1 = derived_safe_equal(() => (
1561									deep_read_state(value()),
1562									untrack(() => value()[1]?.orig_name || "image")
1563								));
1564
1565								DownloadLink($$anchor, {
1566									get href() {
1567										return get($0);
1568									},
1569
1570									get download() {
1571										return get($1);
1572									},
1573
1574									children: ($$anchor, $$slotProps) => {
1575										{
1576											let $0 = derived_safe_equal(() => (
1577												deep_read_state(i18n()),
1578												untrack(() => i18n()("common.download"))
1579											));
1580
1581											IconButton($$anchor, {
1582												get Icon() {
1583													return Download;
1584												},
1585
1586												get label() {
1587													return get($0);
1588												}
1589											});
1590										}
1591									},
1592									$$slots: { default: true }
1593								});
1594							}
1595						};
1596
1597						if_block(node_5, ($$render) => {
1598							if (show_download_button()) $$render(consequent_2);
1599						});
1600					}
1601
1602					var node_6 = sibling(node_5, 2);
1603
1604					{
1605						var consequent_3 = ($$anchor) => {
1606							IconButton($$anchor, {
1607								get Icon() {
1608									return Clear;
1609								},
1610								label: 'Remove Image',
1611								onclick: (event) => {
1612									value([null, null]);
1613									dispatch("clear");
1614									event.stopPropagation();
1615								}
1616							});
1617						};
1618
1619						if_block(node_6, ($$render) => {
1620							if (interactive()) $$render(consequent_3);
1621						});
1622					}
1623
1624					append($$anchor, fragment_3);
1625				},
1626				$$slots: { default: true }
1627			});
1628
1629			var div_1 = sibling(node_2, 2);
1630			let classes;
1631			var node_7 = child(div_1);
1632
1633			Slider(node_7, {
1634				get slider_color() {
1635					return slider_color();
1636				},
1637
1638				get image_size() {
1639					return get(image_size);
1640				},
1641
1642				get position() {
1643					return position();
1644				},
1645
1646				set position($$value) {
1647					position($$value);
1648				},
1649
1650				get el() {
1651					return get(slider_wrap);
1652				},
1653
1654				set el($$value) {
1655					set(slider_wrap, $$value);
1656				},
1657
1658				get parent_el() {
1659					return get(parent_el);
1660				},
1661
1662				set parent_el($$value) {
1663					set(parent_el, $$value);
1664				},
1665
1666				children: ($$anchor, $$slotProps) => {
1667					var fragment_8 = root_9();
1668					var node_8 = first_child(fragment_8);
1669
1670					{
1671						let $0 = derived_safe_equal(() => (
1672							deep_read_state(value()),
1673							untrack(() => value()?.[0]?.url)
1674						));
1675
1676						ImageEl(node_8, {
1677							get src() {
1678								return get($0);
1679							},
1680							alt: '',
1681							loading: 'lazy',
1682							variant: 'preview',
1683							get transform() {
1684								return `translate(${($transform(), untrack(() => $transform().x)) ?? ''}px, ${($transform(), untrack(() => $transform().y)) ?? ''}px) scale(${($transform(), untrack(() => $transform().z)) ?? ''})`;
1685							},
1686
1687							get fullscreen() {
1688								return fullscreen();
1689							},
1690
1691							get max_height() {
1692								return max_height();
1693							},
1694
1695							get img_el() {
1696								return get(img);
1697							},
1698
1699							set img_el($$value) {
1700								set(img, $$value);
1701							},
1702							$$events: { load: handle_image_load },
1703							$$legacy: true
1704						});
1705					}
1706
1707					var node_9 = sibling(node_8, 2);
1708
1709					{
1710						let $0 = derived_safe_equal(() => (
1711							deep_read_state(value()),
1712							untrack(() => !value()?.[1]?.url)
1713						));
1714
1715						let $1 = derived_safe_equal(() => (
1716							deep_read_state(value()),
1717							untrack(() => value()?.[1]?.url)
1718						));
1719
1720						ImageEl(node_9, {
1721							variant: 'preview',
1722							get fixed() {
1723								return layer_images();
1724							},
1725
1726							get hidden() {
1727								return get($0);
1728							},
1729
1730							get src() {
1731								return get($1);
1732							},
1733							alt: '',
1734							loading: 'lazy',
1735							get style() {
1736								return `${get(style) ?? ''}; background: var(--block-background-fill);`;
1737							},
1738
1739							get transform() {
1740								return `translate(${($transform(), untrack(() => $transform().x)) ?? ''}px, ${($transform(), untrack(() => $transform().y)) ?? ''}px) scale(${($transform(), untrack(() => $transform().z)) ?? ''})`;
1741							},
1742
1743							get fullscreen() {
1744								return fullscreen();
1745							},
1746
1747							get max_height() {
1748								return max_height();
1749							},
1750							$$events: { load: handle_image_load }
1751						});
1752					}
1753
1754					append($$anchor, fragment_8);
1755				},
1756				$$slots: { default: true },
1757				$$legacy: true
1758			});
1759
1760			reset(div_1);
1761			bind_this(div_1, ($$value) => set(slider_wrap_parent, $$value), () => get(slider_wrap_parent));
1762			reset(div);
1763			bind_this(div, ($$value) => set(image_container, $$value), () => get(image_container));
1764			template_effect(() => classes = set_class(div_1, 1, 'slider-wrap svelte-1880bc6', null, classes, { limit_height: !fullscreen() }));
1765			bind_element_size(div_1, 'clientWidth', el_width);
1766			append($$anchor, div);
1767		};
1768
1769		if_block(node_1, ($$render) => {
1770			if ((
1771				deep_read_state(value()),
1772				deep_read_state(show_single()),
1773				untrack(() =>

1773 (value() === null || value()[0] === null || value()[1] === null) && !show_single())
1774			)) $$render(consequent); else $$render(alternate, false);
1775		});
1776	}
1777
1778	append($$anchor, fragment);
1779
1780	var $$pop = pop($$exports);
1781
1782	$$cleanup();
1783
1784	return $$pop;
1785}
1786
1787var root = from_html(`<div class="svelte-2ufkjh"><!></div>`);
1788
1789function ClearImage($$anchor, $$props) {
1790	push($$props, false);
1791
1792	const dispatch = createEventDispatcher();
1793
1794	init();
1795
1796	var div = root();
1797	var node = child(div);
1798
1799	IconButton(node, {
1800		get Icon() {
1801			return Clear;
1802		},
1803		label: 'Remove Image',
1804		onclick: (event) => {
1805			dispatch("remove_image");
1806			event.stopPropagation();
1807		}
1808	});
1809
1810	reset(div);
1811	append($$anchor, div);
1812	pop();
1813}
1814
1815var root_3 = from_html(`<div class="icon-buttons svelte-1c8zs50"><!></div>`);
1816var root_7 = from_html(`<div><!></div>`);
1817var root_13 = from_html(`<div><!></div>`);
1818var root_6 = from_html(`<div><!> <!></div>`);
1819var root_1 = from_html(`<!> <div data-testid="image" class="image-container svelte-1c8zs50"><!> <!> <!></div>`, 1);
1820
1821function Image_1($$anchor, $$props) {
1822	push($$props, false);
1823
1824	let value = prop($$props, 'value', 12);
1825	let label = prop($$props, 'label', 12, undefined);
1826	let show_label = prop($$props, 'show_label', 12);
1827	let root = prop($$props, 'root', 12);
1828	let position = prop($$props, 'position', 12);
1829	let upload_count = prop($$props, 'upload_count', 12, 2);
1830	let show_download_button = prop($$props, 'show_download_button', 12, true);
1831	let slider_color = prop($$props, 'slider_color', 12);
1832	let upload = prop($$props, 'upload', 12);
1833	let stream_handler = prop($$props, 'stream_handler', 12);
1834	let max_file_size = prop($$props, 'max_file_size', 12, null);
1835	let i18n = prop($$props, 'i18n', 12);
1836	let max_height = prop($$props, 'max_height', 12);
1837	let upload_promise = prop($$props, 'upload_promise', 12, null);
1838	let value_ = mutable_source(value() || [null, null]);
1839	let img = mutable_source();
1840	let el_width = mutable_source();
1841	let el_height = mutable_source();
1842
1843	async function handle_upload(detail, n) {
1844		const new_value = [value()[0], value()[1]];
1845
1846		if (detail.length > 1) {
1847			new_value[n] = detail[0];
1848		} else {
1849			new_value[n] = detail[n];
1850		}
1851
1852		value(new_value);
1853		await tick();
1854		dispatch("upload", new_value);
1855	}
1856
1857	let old_value = mutable_source("");
1858	const dispatch = createEventDispatcher();
1859	let dragging = prop($$props, 'dragging', 12, false);
1860
1861	legacy_pre_effect(() => (deep_read_state(value()), get(old_value)), () => {
1862		if (JSON.stringify(value()) !== get(old_value)) {
1863			set(old_value, JSON.stringify(value()));
1864			set(value_, value());
1865		}
1866	});
1867
1868	legacy_pre_effect(() => (deep_read_state(dragging())), () => {
1869		dispatch("drag", dragging());
1870	});
1871
1872	legacy_pre_effect_reset();
1873
1874	var $$exports = {
1875		get value() {
1876			return value();
1877		},
1878
1879		set value($$value) {
1880			value($$value);
1881			flushSync();
1882		},
1883
1884		get label() {
1885			return label();
1886		},
1887
1888		set label($$value) {
1889			label($$value);
1890			flushSync();
1891		},
1892
1893		get show_label() {
1894			return show_label();
1895		},
1896
1897		set show_label($$value) {
1898			show_label($$value);
1899			flushSync();
1900		},
1901
1902		get root() {
1903			return root();
1904		},
1905
1906		set root($$value) {
1907			root($$value);
1908			flushSync();
1909		},
1910
1911		get position() {
1912			return position();
1913		},
1914
1915		set position($$value) {
1916			position($$value);
1917			flushSync();
1918		},
1919
1920		get upload_count() {
1921			return upload_count();
1922		},
1923
1924		set upload_count($$value) {
1925			upload_count($$value);
1926			flushSync();
1927		},
1928
1929		get show_download_button() {
1930			return show_download_button();
1931		},
1932
1933		set show_download_button($$value) {
1934			show_download_button($$value);
1935			flushSync();
1936		},
1937
1938		get slider_color() {
1939			return slider_color();
1940		},
1941
1942		set slider_color($$value) {
1943			slider_color($$value);
1944			flushSync();
1945		},
1946
1947		get upload() {
1948			return upload();
1949		},
1950
1951		set upload($$value) {
1952			upload($$value);
1953			flushSync();
1954		},
1955
1956		get stream_handler() {
1957			return stream_handler();
1958		},
1959
1960		set stream_handler($$value) {
1961			stream_handler($$value);
1962			flushSync();
1963		},
1964
1965		get max_file_size() {
1966			return max_file_size();
1967		},
1968
1969		set max_file_size($$value) {
1970			max_file_size($$value);
1971			flushSync();
1972		},
1973
1974		get i18n() {
1975			return i18n();
1976		},
1977
1978		set i18n($$value) {
1979			i18n($$value);
1980			flushSync();
1981		},
1982
1983		get max_height() {
1984			return max_height();
1985		},
1986
1987		set max_height($$value) {
1988			max_height($$value);
1989			flushSync();
1990		},
1991
1992		get upload_promise() {
1993			return upload_promise();
1994		},
1995
1996		set upload_promise($$value) {
1997			upload_promise($$value);
1998			flushSync();
1999		},
2000
2001		get dragging() {
2002			return dragging();
2003		},
2004
2005		set dragging($$value) {
2006			dragging($$value);
2007			flushSync();
2008		}
2009	};
2010
2011	init();
2012
2013	var fragment = root_1();
2014	var node = first_child(fragment);
2015
2016	{
2017		let $0 = derived_safe_equal(() => (
2018			deep_read_state(label()),

2019			deep_read_state(i18n()),
2020			untrack(() => label() || i18n()("image.image"))
2021		));
2022
2023		BlockLabel(node, {
2024			get show_label() {
2025				return show_label();
2026			},
2027
2028			get Icon() {
2029				return Image;
2030			},
2031
2032			get label() {
2033				return get($0);
2034			}
2035		});
2036	}
2037
2038	var div = sibling(node, 2);
2039	var node_1 = child(div);
2040
2041	{
2042		var consequent = ($$anchor) => {
2043			ClearImage($$anchor, {
2044				$$events: {
2045					remove_image: () => {
2046						position(0.5);
2047						value([null, null]);
2048						dispatch("clear");
2049					}
2050				}
2051			});
2052		};
2053
2054		if_block(node_1, ($$render) => {
2055			if ((
2056				deep_read_state(value()),
2057				untrack(() => value()?.[0]?.url || value()?.[1]?.url)
2058			)) $$render(consequent);
2059		});
2060	}
2061
2062	var node_2 = sibling(node_1, 2);
2063
2064	{
2065		var consequent_2 = ($$anchor) => {
2066			var div_1 = root_3();
2067			var node_3 = child(div_1);
2068
2069			{
2070				var consequent_1 = ($$anchor) => {
2071					{
2072						let $0 = derived_safe_equal(() => (
2073							deep_read_state(value()),
2074							untrack(() => value()[1].orig_name || "image")
2075						));
2076
2077						DownloadLink($$anchor, {
2078							get href() {
2079								return (deep_read_state(value()), untrack(() => value()[1].url));
2080							},
2081
2082							get download() {
2083								return get($0);
2084							},
2085
2086							children: ($$anchor, $$slotProps) => {
2087								IconButton($$anchor, {
2088									get Icon() {
2089										return Download;
2090									}
2091								});
2092							},
2093							$$slots: { default: true }
2094						});
2095					}
2096				};
2097
2098				if_block(node_3, ($$render) => {
2099					if (show_download_button()) $$render(consequent_1);
2100				});
2101			}
2102
2103			reset(div_1);
2104			append($$anchor, div_1);
2105		};
2106
2107		if_block(node_2, ($$render) => {
2108			if ((
2109				deep_read_state(value()),
2110				untrack(() => value()?.[1]?.url)
2111			)) $$render(consequent_2);
2112		});
2113	}
2114
2115	var node_4 = sibling(node_2, 2);
2116
2117	{
2118		let $0 = derived_safe_equal(() => (
2119			deep_read_state(upload_count()),
2120			deep_read_state(value()),
2121			untrack(() => upload_count() == 2 || !value()?.[0])
2122		));
2123
2124		Slider(node_4, {
2125			get disabled() {
2126				return get($0);
2127			},
2128
2129			get slider_color() {
2130				return slider_color();
2131			},
2132
2133			get position() {
2134				return position();
2135			},
2136
2137			set position($$value) {
2138				position($$value);
2139			},
2140
2141			children: ($$anchor, $$slotProps) => {
2142				var div_2 = root_6();
2143				let classes;
2144				let styles;
2145				var node_5 = child(div_2);
2146
2147				{
2148					var consequent_3 = ($$anchor) => {
2149						var div_3 = root_7();
2150						let classes_1;
2151						var node_6 = child(div_3);
2152
2153						{
2154							let $0 = derived_safe_equal(() => (deep_read_state(value()), untrack(() => !!value()?.[0])));
2155
2156							Upload(node_6, {
2157								filetype: 'image/*',
2158								onload: (e) => handle_upload(e, 0),
2159								get disable_click() {
2160									return get($0);
2161								},
2162
2163								get root() {
2164									return root();
2165								},
2166								file_count: 'multiple',
2167								get upload() {
2168									return upload();
2169								},
2170
2171								get stream_handler() {
2172									return stream_handler();
2173								},
2174
2175								get max_file_size() {
2176									return max_file_size();
2177								},
2178
2179								get upload_promise() {
2180									return upload_promise();
2181								},
2182
2183								set upload_promise($$value) {
2184									upload_promise($$value);
2185								},
2186
2187								get dragging() {
2188									return dragging();
2189								},
2190
2191								set dragging($$value) {
2192									dragging($$value);
2193								},
2194
2195								children: ($$anchor, $$slotProps) => {
2196									var fragment_4 = comment();
2197									var node_7 = first_child(fragment_4);
2198
2199									slot(node_7, $$props, 'default', {}, null);
2200									append($$anchor, fragment_4);
2201								},
2202								$$slots: { default: true },
2203								$$legacy: true
2204							});
2205						}
2206
2207						reset(div_3);
2208						template_effect(() => classes_1 = set_class(div_3, 1, 'wrap svelte-1c8zs50', null, classes_1, { 'half-wrap': upload_count() === 1 }));
2209						append($$anchor, div_3);
2210					};
2211
2212					var alternate = ($$anchor) => {
2213						{
2214							let $0 = derived_safe_equal(() => (get(value_), untrack(() => get(value_)[0]?.url)));
2215
2216							ImageEl($$anchor, {
2217								variant: 'upload',
2218								get src() {
2219									return get($0);
2220								},
2221								alt: '',
2222								get max_height() {
2223									return max_height();
2224								},
2225
2226								get img_el() {
2227									return get(img);
2228								},
2229
2230								set img_el($$value) {
2231									set(img, $$value);
2232								},
2233								$$legacy: true
2234							});
2235						}
2236					};
2237
2238					if_block(node_5, ($$render) => {
2239						if ((get(value_), untrack(() => !get(value_)?.[0]))) $$render(consequent_3); else $$render(alternate, false);
2240					});
2241				}
2242
2243				var node_8 = sibling(node_5, 2);
2244
2245				{
2246					var consequent_4 = ($$anchor) => {
2247						{
2248							let $0 = derived_safe_equal(() => (deep_read_state(value()), untrack(() => !!value()?.[1])));
2249
2250							Upload($$anchor, {
2251								filetype: 'image/*',
2252								onload: (e) => handle_upload(e, 1),
2253								get disable_click() {
2254									return get($0);
2255								},
2256
2257								get root() {

2258									return root();
2259								},
2260								file_count: 'multiple',
2261								get upload() {
2262									return upload();
2263								},
2264
2265								get stream_handler() {
2266									return stream_handler();
2267								},
2268
2269								get max_file_size() {
2270									return max_file_size();
2271								},
2272
2273								get upload_promise() {
2274									return upload_promise();
2275								},
2276
2277								set upload_promise($$value) {
2278									upload_promise($$value);
2279								},
2280
2281								get dragging() {
2282									return dragging();
2283								},
2284
2285								set dragging($$value) {
2286									dragging($$value);
2287								},
2288
2289								children: ($$anchor, $$slotProps) => {
2290									var fragment_7 = comment();
2291									var node_9 = first_child(fragment_7);
2292
2293									slot(node_9, $$props, 'default', {}, null);
2294									append($$anchor, fragment_7);
2295								},
2296								$$slots: { default: true },
2297								$$legacy: true
2298							});
2299						}
2300					};
2301
2302					var alternate_2 = ($$anchor) => {
2303						var fragment_8 = comment();
2304						var node_10 = first_child(fragment_8);
2305
2306						{
2307							var consequent_5 = ($$anchor) => {
2308								var div_4 = root_13();
2309								let classes_2;
2310								let styles_1;

2311								var node_11 = child(div_4);
2312
2313								Empty(node_11, {
2314									unpadded_box: true,
2315									size: 'large',
2316									children: ($$anchor, $$slotProps) => {
2317										Image($$anchor);
2318									},
2319									$$slots: { default: true }
2320								});
2321
2322								reset(div_4);
2323
2324								template_effect(() => {
2325									classes_2 = set_class(div_4, 1, 'empty-wrap fixed svelte-1c8zs50', null, classes_2, { 'white-icon': !value()?.[0]?.url });
2326
2327									styles_1 = set_style(div_4, '', styles_1, {
2328										width: `${get(el_width) * (1 - position())}px`,
2329										transform: `translateX(${get(el_width) * position()}px)`
2330									});
2331								});
2332
2333								append($$anchor, div_4);
2334							};
2335
2336							var alternate_1 = ($$anchor) => {
2337								var fragment_10 = comment();
2338								var node_12 = first_child(fragment_10);
2339
2340								{
2341									var consequent_6 = ($$anchor) => {
2342										{
2343											let $0 = derived_safe_equal(() => upload_count() === 1);
2344
2345											ImageEl($$anchor, {
2346												variant: 'upload',
2347												get src() {
2348													return (get(value_), untrack(() => get(value_)[1].url));
2349												},
2350												alt: '',
2351												get fixed() {
2352													return get($0);
2353												},
2354												transform: 'translate(0px, 0px) scale(1)',
2355												get max_height() {
2356													return max_height();
2357												}
2358											});
2359										}
2360									};
2361
2362									if_block(
2363										node_12,
2364										($$render) => {
2365											if ((get(value_), untrack(() => get(value_)?.[1]))) $$render(consequent_6);
2366										},
2367										true
2368									);
2369								}
2370
2371								append($$anchor, fragment_10);
2372							};
2373
2374							if_block(
2375								node_10,
2376								($$render) => {
2377									if ((
2378										get(value_),
2379										deep_read_state(upload_count()),
2380										untrack(() => !get(value_)?.[1] && upload_count() === 1)
2381									)) $$render(consequent_5); else $$render(alternate_1, false);
2382								},
2383								true
2384							);
2385						}
2386
2387						append($$anchor, fragment_8);
2388					};
2389
2390					if_block(node_8, ($$render) => {
2391						if ((
2392							get(value_),
2393							deep_read_state(upload_count()),
2394							untrack(() => !get(value_)?.[1] && upload_count() === 2)
2395						)) $$render(consequent_4); else $$render(alternate_2, false);
2396					});
2397				}
2398
2399				reset(div_2);
2400
2401				template_effect(() => {
2402					classes = set_class(div_2, 1, 'upload-wrap svelte-1c8zs50', null, classes, { 'side-by-side': upload_count() === 2 });
2403					styles = set_style(div_2, '', styles, { display: upload_count() === 2 ? "flex" : "block" });
2404				});
2405
2406				append($$anchor, div_2);
2407			},
2408			$$slots: { default: true },
2409			$$legacy: true
2410		});
2411	}
2412
2413	reset(div);
2414	bind_element_size(div, 'clientWidth', ($$value) => set(el_width, $$value));
2415	bind_element_size(div, 'clientHeight', ($$value) => set(el_height, $$value));
2416	append($$anchor, fragment);
2417
2418	return pop($$exports);
2419}
2420
2421function SliderUpload($$anchor, $$props) {
2422	push($$props, false);
2423
2424	let value = prop($$props, 'value', 28, () => [null, null]);
2425	let upload = prop($$props, 'upload', 12);
2426	let stream_handler = prop($$props, 'stream_handler', 12);
2427	let label = prop($$props, 'label', 12);
2428	let show_label = prop($$props, 'show_label', 12);
2429	let i18n = prop($$props, 'i18n', 12);
2430	let root = prop($$props, 'root', 12);
2431	let upload_count = prop($$props, 'upload_count', 12, 1);
2432	let dragging = prop($$props, 'dragging', 12);
2433	let max_height = prop($$props, 'max_height', 12);
2434	let max_file_size = prop($$props, 'max_file_size', 12, null);
2435	let upload_promise = prop($$props, 'upload_promise', 12, null);
2436
2437	var $$exports = {
2438		get value() {
2439			return value();
2440		},
2441
2442		set value($$value) {
2443			value($$value);
2444			flushSync();
2445		},
2446
2447		get upload() {
2448			return upload();
2449		},
2450
2451		set upload($$value) {
2452			upload($$value);
2453			flushSync();
2454		},
2455
2456		get stream_handler() {
2457			return stream_handler();
2458		},
2459
2460		set stream_handler($$value) {
2461			stream_handler($$value);
2462			flushSync();
2463		},
2464
2465		get label() {
2466			return label();
2467		},
2468
2469		set label($$value) {
2470			label($$value);
2471			flushSync();
2472		},
2473
2474		get show_label() {
2475			return show_label();
2476		},
2477
2478		set show_label($$value) {
2479			show_label($$value);
2480			flushSync();
2481		},
2482
2483		get i18n() {
2484			return i18n();
2485		},
2486
2487		set i18n($$value) {
2488			i18n($$value);
2489			flushSync();
2490		},
2491
2492		get root() {

2493			return root();
2494		},
2495
2496		set root($$value) {
2497			root($$value);
2498			flushSync();
2499		},
2500
2501		get upload_count() {
2502			return upload_count();
2503		},
2504
2505		set upload_count($$value) {
2506			upload_count($$value);
2507			flushSync();
2508		},
2509
2510		get dragging() {
2511			return dragging();
2512		},
2513
2514		set dragging($$value) {
2515			dragging($$value);
2516			flushSync();
2517		},
2518
2519		get max_height() {
2520			return max_height();
2521		},
2522
2523		set max_height($$value) {
2524			max_height($$value);
2525			flushSync();
2526		},
2527
2528		get max_file_size() {
2529			return max_file_size();
2530		},
2531
2532		set max_file_size($$value) {
2533			max_file_size($$value);
2534			flushSync();
2535		},
2536
2537		get upload_promise() {
2538			return upload_promise();
2539		},
2540
2541		set upload_promise($$value) {
2542			upload_promise($$value);
2543			flushSync();
2544		}
2545	};
2546
2547	Image_1($$anchor, {
2548		slider_color: 'var(--border-color-primary)',
2549		position: 0.5,
2550		get root() {
2551			return root();
2552		},
2553
2554		get label() {
2555			return label();
2556		},
2557
2558		get show_label() {
2559			return show_label();
2560		},
2561
2562		get upload_count() {
2563			return upload_count();
2564		},
2565
2566		get stream_handler() {
2567			return stream_handler();
2568		},
2569
2570		get upload() {
2571			return upload();
2572		},
2573
2574		get max_file_size() {
2575			return max_file_size();
2576		},
2577
2578		get max_height() {
2579			return max_height();
2580		},
2581
2582		get i18n() {
2583			return i18n();
2584		},
2585
2586		get upload_promise() {
2587			return upload_promise();
2588		},
2589
2590		set upload_promise($$value) {
2591			upload_promise($$value);
2592		},
2593
2594		get value() {
2595			return value();
2596		},
2597
2598		set value($$value) {
2599			value($$value);
2600		},
2601
2602		get dragging() {
2603			return dragging();
2604		},
2605
2606		set dragging($$value) {
2607			dragging($$value);
2608		},
2609
2610		$$events: {
2611			edit($$arg) {
2612				bubble_event.call(this, $$props, $$arg);
2613			},
2614
2615			clear($$arg) {
2616				bubble_event.call(this, $$props, $$arg);
2617			},
2618
2619			stream($$arg) {
2620				bubble_event.call(this, $$props, $$arg);
2621			},
2622			drag: ({ detail }) => dragging(detail),
2623			upload($$arg) {
2624				bubble_event.call(this, $$props, $$arg);
2625			},
2626
2627			select($$arg) {
2628				bubble_event.call(this, $$props, $$arg);
2629			},
2630
2631			share($$arg) {
2632				bubble_event.call(this, $$props, $$arg);
2633			}
2634		},
2635
2636		children: ($$anchor, $$slotProps) => {
2637			var fragment_1 = comment();
2638			var node = first_child(fragment_1);
2639
2640			slot(node, $$props, 'default', {}, null);
2641			append($$anchor, fragment_1);
2642		},
2643		$$slots: { default: true },
2644		$$legacy: true
2645	});
2646
2647	return pop($$exports);
2648}
2649
2650var root_2 = from_html(`<!> <!>`, 1);
2651var root_4 = from_html(`<!> <!>`, 1);
2652
2653function Index($$anchor, $$props) {
2654	push($$props, true);
2655
2656	let upload_promise = state(void 0);
2657
2658	class ImageSliderGradio extends Gradio {
2659		async get_data() {
2660			if (get(upload_promise)) {
2661				await get(upload_promise);
2662				await tick();
2663			}
2664
2665			const data = await super.get_data();
2666
2667			return data;
2668		}
2669	}
2670
2671	const props = rest_props($$props, ['$$slots', '$$events', '$$legacy']);
2672	const gradio = new ImageSliderGradio(props);
2673	let old_value = state(proxy(gradio.props.value));
2674	let fullscreen = state(false);
2675	let dragging = state(false);
2676	let upload_component;
2677	let normalised_slider_position = user_derived(() => Math.max(0, Math.min(100, gradio.props.slider_position)) / 100);
2678
2679	user_effect(() => {
2680		if (get(old_value) != gradio.props.value) {
2681			set(old_value, gradio.props.value, true);
2682			gradio.dispatch("change");
2683
2684			{
2685				gradio.dispatch("input");
2686			}
2687		}
2688	});
2689
2690	const handle_drag_event = (event) => {
2691		const drag_event = event;
2692
2693		drag_event.preventDefault();
2694		drag_event.stopPropagation();
2695
2696		if (drag_event.type === "dragenter" || drag_event.type === "dragover") {
2697			set(dragging, true);
2698		} else if (drag_event.type === "dragleave") {
2699			set(dragging, false);
2700		}
2701	};
2702
2703	const handle_drop = (event) => {
2704		if (gradio.shared.interactive) {
2705			const drop_event = event;
2706
2707			drop_event.preventDefault();
2708			drop_event.stopPropagation();
2709			set(dragging, false);
2710
2711			if (upload_component) {
2712				upload_component.loadFilesFromDrop(drop_event);
2713			}
2714		}
2715	};
2716
2717	var fragment = comment();
2718	var node = first_child(fragment);
2719
2720	{
2721		var consequent = ($$anchor) => {
2722			{
2723				let $0 = user_derived(() => get(dragging) ? "focus" : "base");
2724				let $1 = user_derived(() => gradio.props.height || undefined);
2725
2726				Block($$anchor, {
2727					get visible() {
2728						return gradio.shared.visible;
2729					},
2730					variant: "solid",
2731					get border_mode() {
2732						return get($0);
2733					},
2734					padding: false,
2735					get elem_id() {
2736						return gradio.shared.elem_id;
2737					},
2738
2739					get elem_classes() {
2740						return gradio.shared.elem_classes;
2741					},
2742
2743					get height() {
2744						return get($1);
2745					},
2746
2747					get width() {
2748						return gradio.props.width;
2749					},
2750					allow_overflow: false,
2751					get container() {
2752						return gradio.shared.container;
2753					},
2754
2755					get scale() {
2756						return gradio.shared.scale;
2757					},
2758
2759					get min_width() {
2760						return gradio.shared.min_width;
2761					},
2762
2763					get fullscreen() {
2764						return get(fullscreen);
2765					},
2766
2767					set fullscreen($$value) {
2768						set(fullscreen, $$value, true);
2769					},
2770
2771					children: ($$anchor, $$slotProps) => {
2772						var fragment_2 = root_2();