Restructure shared Astro sources and import aliases (#2737)

shared/ui/Range.astro

@@ -0,0 +1,54 @@
+---
+// (registered via addPageScript); without an id → a native <input type=range>.
+import { addPageScript } from '@shared/lib/page-scripts';
+import InlineScript from '@shared/components/InlineScript.astro';
+
+interface Props {
+	min?: number;
+	max?: number;
+	step?: number;
+	value?: string | number;
+	id?: string;
+	connect?: boolean;
+	class?: string;
+}
+
+const { min = 0, max = 100, step = 10, value = 50, id, connect = false, class: className } = Astro.props;
+
+const values = String(value).split(',');
+const size = values.length;
+
+let script = '';
+if (id) {
+	// connect array: {% for i in (2..size) %}cycle false,true{% endfor %} then true, false
+	let connectStr = '';
+	if (size > 1 || connect) {
+		const parts: string[] = [];
+		for (let i = 2; i <= size; i++) parts.push((i - 2) % 2 === 0 ? 'false' : 'true');
+		connectStr = `\t\t\t\t\t  connect: [${[...parts, 'true', 'false'].join(', ')}],\n`;
+	}
+	const start = size > 1 ? `[${values.join(', ')}]` : values[0];
+	script = `<script>
+	document.addEventListener("DOMContentLoaded", function () {
+		 window.noUiSlider && (noUiSlider.create(document.getElementById('range-${id}'), {
+				  start: ${start},
+${connectStr}				  step: ${step},
+				  range: {
+					  min: ${min},
+					  max: ${max}
+				  }
+		 }));
+	});
+</script>`;
+	addPageScript(script);
+}
+---
+
+{
+	id ? (
+		<div class:list={['form-range mb-2', className]} id={`range-${id}`} />
+	) : (
+		<input type="range" class:list={['form-range mb-2', className]} value={value} min={min} max={max} step={step} />
+	)
+}
+{id && <InlineScript code={script} />}