import { i as useForm, n as head_default, o as vue_exports } from "../ssr.js";
import { n as server_renderer_exports, t } from "./i18n-CXLOYfyq.js";
import { t as AdminLayout_default } from "./AdminLayout-DJaJT5Cr.js";
//#region resources/js/Pages/Admin/Theme.vue?vue&type=script&setup=true&lang.ts
var Theme_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue_exports.defineComponent)({
	__name: "Theme",
	__ssrInlineRender: true,
	props: {
		theme: {},
		fonts: {}
	},
	setup(__props) {
		const props = __props;
		const form = useForm({
			primary: props.theme.primary,
			radius: props.theme.radius,
			mode: props.theme.mode,
			font: props.theme.font,
			font_size: props.theme.font_size,
			container: props.theme.container
		});
		function fontType(family) {
			return props.fonts.find((f) => f.value === family)?.type ?? "sans";
		}
		function fontStack(family) {
			const t = fontType(family);
			if (t === "system") return "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif";
			return `'${family}', ${t === "serif" ? "Georgia, 'Times New Roman', serif" : t === "mono" ? "ui-monospace, Menlo, monospace" : "ui-sans-serif, system-ui, sans-serif"}`;
		}
		const presets = [
			{
				name: "Indigo",
				primary: "#5b5bd6",
				mode: "light"
			},
			{
				name: "Ocean",
				primary: "#2563eb",
				mode: "light"
			},
			{
				name: "Teal",
				primary: "#0d9488",
				mode: "light"
			},
			{
				name: "Forest",
				primary: "#16a34a",
				mode: "light"
			},
			{
				name: "Sunset",
				primary: "#f59e0b",
				mode: "light"
			},
			{
				name: "Rose",
				primary: "#e11d48",
				mode: "light"
			},
			{
				name: "Violet",
				primary: "#7c3aed",
				mode: "light"
			},
			{
				name: "Midnight",
				primary: "#818cf8",
				mode: "dark"
			}
		];
		const containers = [
			{
				label: "Compact",
				value: 1100
			},
			{
				label: "Default",
				value: 1240
			},
			{
				label: "Wide",
				value: 1400
			},
			{
				label: "Extra wide",
				value: 1600
			},
			{
				label: "Full width",
				value: 0
			}
		];
		function hexToRgb(hex) {
			let h = hex.replace("#", "");
			if (h.length === 3) h = h.split("").map((c) => c + c).join("");
			if (!/^[0-9a-fA-F]{6}$/.test(h)) return [
				91,
				91,
				214
			];
			return [
				parseInt(h.slice(0, 2), 16),
				parseInt(h.slice(2, 4), 16),
				parseInt(h.slice(4, 6), 16)
			];
		}
		const darken = (rgb, f) => rgb.map((c) => Math.round(c * f));
		const mixWhite = (rgb, a) => rgb.map((c) => Math.round(c + (255 - c) * a));
		const triplet = (rgb) => `${rgb[0]} ${rgb[1]} ${rgb[2]}`;
		function luminance(rgb) {
			const a = rgb.map((v) => {
				const s = v / 255;
				return s <= .03928 ? s / 12.92 : Math.pow((s + .055) / 1.055, 2.4);
			});
			return .2126 * a[0] + .7152 * a[1] + .0722 * a[2];
		}
		const contrast = (0, vue_exports.computed)(() => {
			const l1 = luminance([
				255,
				255,
				255
			]);
			const l2 = luminance(hexToRgb(form.primary));
			const [hi, lo] = l1 > l2 ? [l1, l2] : [l2, l1];
			const ratio = (hi + .05) / (lo + .05);
			const level = ratio >= 7 ? "AAA" : ratio >= 4.5 ? "AA" : ratio >= 3 ? "AA Large only" : "Fail";
			return {
				ratio: ratio.toFixed(2),
				level,
				ok: ratio >= 4.5,
				warn: ratio >= 3 && ratio < 4.5
			};
		});
		function ensureFont(family) {
			const id = "convoro-preview-font";
			const existing = document.getElementById(id);
			if (family === "System" || family === "Inter") {
				existing?.remove();
				return;
			}
			const href = `https://fonts.googleapis.com/css2?family=${family.replace(/ /g, "+")}:wght@400;500;600;700&display=swap`;
			if (existing) {
				existing.href = href;
				return;
			}
			const link = document.createElement("link");
			link.id = id;
			link.rel = "stylesheet";
			link.href = href;
			document.head.appendChild(link);
		}
		function applyLive() {
			const root = document.documentElement.style;
			const p = hexToRgb(form.primary);
			root.setProperty("--c-primary", triplet(p));
			root.setProperty("--c-primary-600", triplet(darken(p, .9)));
			root.setProperty("--c-primary-700", triplet(darken(p, .8)));
			root.setProperty("--c-primary-soft", triplet(mixWhite(p, .86)));
			root.setProperty("--c-radius", `${form.radius}px`);
			root.setProperty("--c-container", form.container > 0 ? `${form.container}px` : "100%");
			root.setProperty("--c-font", fontStack(form.font));
			root.setProperty("--c-font-size", `${form.font_size}px`);
			ensureFont(form.font);
			document.documentElement.dataset.theme = form.mode;
		}
		(0, vue_exports.watch)(() => [
			form.primary,
			form.radius,
			form.mode,
			form.font,
			form.font_size,
			form.container
		], applyLive, { immediate: true });
		(0, vue_exports.onBeforeUnmount)(() => {
			[
				"--c-primary",
				"--c-primary-600",
				"--c-primary-700",
				"--c-primary-soft",
				"--c-radius",
				"--c-container",
				"--c-font",
				"--c-font-size"
			].forEach((v) => document.documentElement.style.removeProperty(v));
			document.getElementById("convoro-preview-font")?.remove();
			document.documentElement.dataset.theme = props.theme.mode;
		});
		function applyPreset(p) {
			form.primary = p.primary;
			form.mode = p.mode;
		}
		function save() {
			form.post("/admin/theme", { preserveScroll: true });
		}
		return (_ctx, _push, _parent, _attrs) => {
			_push(`<!--[-->`);
			_push((0, server_renderer_exports.ssrRenderComponent)((0, vue_exports.unref)(head_default), { title: (0, vue_exports.unref)(t)("Admin · Theme") }, null, _parent));
			_push((0, server_renderer_exports.ssrRenderComponent)(AdminLayout_default, null, {
				title: (0, vue_exports.withCtx)((_, _push, _parent, _scopeId) => {
					if (_push) _push(`${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Theme editor"))}`);
					else return [(0, vue_exports.createTextVNode)((0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Theme editor")), 1)];
				}),
				subtitle: (0, vue_exports.withCtx)((_, _push, _parent, _scopeId) => {
					if (_push) _push(`${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Changes preview live across the whole site — Save to publish for everyone"))}`);
					else return [(0, vue_exports.createTextVNode)((0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Changes preview live across the whole site — Save to publish for everyone")), 1)];
				}),
				default: (0, vue_exports.withCtx)((_, _push, _parent, _scopeId) => {
					if (_push) {
						_push(`<div class="grid gap-6 xl:grid-cols-[380px_1fr]"${_scopeId}><form class="space-y-4"${_scopeId}><section class="rounded-2xl border border-line bg-surface p-5"${_scopeId}><h3 class="mb-3 text-xs font-bold uppercase tracking-wide text-ink-2"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Presets"))}</h3><div class="grid grid-cols-4 gap-2"${_scopeId}><!--[-->`);
						(0, server_renderer_exports.ssrRenderList)(presets, (p) => {
							_push(`<button type="button" class="group rounded-xl border border-line p-2 text-center hover:border-line"${_scopeId}><span class="mx-auto block h-8 w-8 rounded-lg" style="${(0, server_renderer_exports.ssrRenderStyle)({ background: p.primary })}"${_scopeId}></span><span class="mt-1 block text-[11px] text-ink-2 group-hover:text-ink"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)(p.name))}</span></button>`);
						});
						_push(`<!--]--></div></section><section class="rounded-2xl border border-line bg-surface p-5"${_scopeId}><h3 class="mb-3 text-xs font-bold uppercase tracking-wide text-ink-2"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Colors"))}</h3><label class="block text-sm font-medium text-ink-2"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Brand color"))}</label><div class="mt-2 flex items-center gap-3"${_scopeId}><input${(0, server_renderer_exports.ssrRenderAttr)("value", (0, vue_exports.unref)(form).primary)} type="color" class="h-10 w-12 cursor-pointer rounded border-line bg-transparent"${_scopeId}><input${(0, server_renderer_exports.ssrRenderAttr)("value", (0, vue_exports.unref)(form).primary)} type="text" class="w-32 rounded-lg border-line bg-appbg font-mono text-sm text-ink focus:border-indigo-500 focus:ring-indigo-500"${_scopeId}></div><div class="mt-3 flex items-center gap-2 rounded-lg border border-line bg-appbg px-3 py-2"${_scopeId}><span class="${(0, server_renderer_exports.ssrRenderClass)([contrast.value.ok ? "bg-emerald-500/20 text-emerald-400" : contrast.value.warn ? "bg-amber-500/20 text-amber-400" : "bg-red-500/20 text-red-400", "flex h-5 w-5 items-center justify-center rounded-full text-[11px] font-bold"])}"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(contrast.value.ok ? "✓" : "!")}</span><span class="text-sm text-ink-2"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("White text contrast {ratio}:1", { ratio: contrast.value.ratio }))}</span><span class="${(0, server_renderer_exports.ssrRenderClass)([contrast.value.ok ? "text-emerald-400" : contrast.value.warn ? "text-amber-400" : "text-red-400", "ml-auto text-xs font-semibold"])}"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("WCAG {level}", { level: (0, vue_exports.unref)(t)(contrast.value.level) }))}</span></div>`);
						if (!contrast.value.ok) _push(`<p class="mt-1.5 text-xs text-ink-muted"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Aim for 4.5:1 (AA) so button labels stay readable for everyone — try a darker brand color."))}</p>`);
						else _push(`<!---->`);
						_push(`</section><section class="rounded-2xl border border-line bg-surface p-5"${_scopeId}><h3 class="mb-3 text-xs font-bold uppercase tracking-wide text-ink-2"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Appearance"))}</h3><div class="grid grid-cols-2 gap-2"${_scopeId}><!--[-->`);
						(0, server_renderer_exports.ssrRenderList)(["light", "dark"], (m) => {
							_push(`<button type="button" class="${(0, server_renderer_exports.ssrRenderClass)([(0, vue_exports.unref)(form).mode === m ? "border-indigo-500 bg-indigo-500/10 text-ink" : "border-line text-ink-2 hover:text-ink", "rounded-lg border px-3 py-2 text-sm font-semibold capitalize"])}"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)(m))}</button>`);
						});
						_push(`<!--]--></div></section><section class="rounded-2xl border border-line bg-surface p-5"${_scopeId}><h3 class="mb-3 text-xs font-bold uppercase tracking-wide text-ink-2"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Typography"))}</h3><label class="block text-sm font-medium text-ink-2"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Font"))}</label><select class="mt-1.5 w-full rounded-lg border-line bg-appbg text-ink focus:border-indigo-500 focus:ring-indigo-500"${_scopeId}><!--[-->`);
						(0, server_renderer_exports.ssrRenderList)(__props.fonts, (f) => {
							_push(`<option${(0, server_renderer_exports.ssrRenderAttr)("value", f.value)}${(0, server_renderer_exports.ssrIncludeBooleanAttr)(Array.isArray((0, vue_exports.unref)(form).font) ? (0, server_renderer_exports.ssrLooseContain)((0, vue_exports.unref)(form).font, f.value) : (0, server_renderer_exports.ssrLooseEqual)((0, vue_exports.unref)(form).font, f.value)) ? " selected" : ""}${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)(f.label)}</option>`);
						});
						_push(`<!--]--></select><label class="mt-4 block text-sm font-medium text-ink-2"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Base size — {size}px", { size: (0, vue_exports.unref)(form).font_size }))}</label><input${(0, server_renderer_exports.ssrRenderAttr)("value", (0, vue_exports.unref)(form).font_size)} type="range" min="12" max="20" class="mt-2 w-full accent-indigo-500"${_scopeId}></section><section class="rounded-2xl border border-line bg-surface p-5"${_scopeId}><h3 class="mb-3 text-xs font-bold uppercase tracking-wide text-ink-2"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Layout"))}</h3><label class="block text-sm font-medium text-ink-2"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Corner radius — {radius}px", { radius: (0, vue_exports.unref)(form).radius }))}</label><input${(0, server_renderer_exports.ssrRenderAttr)("value", (0, vue_exports.unref)(form).radius)} type="range" min="0" max="28" class="mt-2 w-full accent-indigo-500"${_scopeId}><label class="mt-4 block text-sm font-medium text-ink-2"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Content width"))}</label><select class="mt-1.5 w-full rounded-lg border-line bg-appbg text-ink focus:border-indigo-500 focus:ring-indigo-500"${_scopeId}><!--[-->`);
						(0, server_renderer_exports.ssrRenderList)(containers, (c) => {
							_push(`<option${(0, server_renderer_exports.ssrRenderAttr)("value", c.value)}${(0, server_renderer_exports.ssrIncludeBooleanAttr)(Array.isArray((0, vue_exports.unref)(form).container) ? (0, server_renderer_exports.ssrLooseContain)((0, vue_exports.unref)(form).container, c.value) : (0, server_renderer_exports.ssrLooseEqual)((0, vue_exports.unref)(form).container, c.value)) ? " selected" : ""}${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)(c.label))}${(0, server_renderer_exports.ssrInterpolate)(c.value ? ` (${c.value}px)` : "")}</option>`);
						});
						_push(`<!--]--></select></section><div class="sticky bottom-4 flex items-center gap-3 rounded-2xl border border-line bg-surface p-4"${_scopeId}><button type="submit"${(0, server_renderer_exports.ssrIncludeBooleanAttr)((0, vue_exports.unref)(form).processing) ? " disabled" : ""} class="rounded-lg bg-indigo-500 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-600 disabled:opacity-60"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Save theme"))}</button>`);
						if ((0, vue_exports.unref)(form).recentlySuccessful) _push(`<span class="text-sm text-emerald-400"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Saved for everyone."))}</span>`);
						else _push(`<!---->`);
						_push(`<span class="ml-auto text-xs text-ink-muted"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Live preview →"))}</span></div></form><div class="overflow-hidden rounded-2xl border border-line"${_scopeId}><div class="bg-appbg p-5 text-ink" style="${(0, server_renderer_exports.ssrRenderStyle)({
							"font-family": "var(--c-font)",
							"font-size": "var(--c-font-size)"
						})}"${_scopeId}><div class="flex items-center gap-3 rounded-c border border-line bg-surface px-4 py-3"${_scopeId}><span class="flex h-8 w-8 items-center justify-center rounded-c bg-primary font-bold text-ink"${_scopeId}>C</span><span class="font-extrabold tracking-tight"${_scopeId}>Convoro</span><span class="ml-auto rounded-full bg-primary px-3 py-1 text-xs font-semibold text-ink"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Join"))}</span></div><div class="mt-4 rounded-c border border-line bg-surface p-5"${_scopeId}><div class="flex items-center gap-2"${_scopeId}><span class="h-9 w-9 rounded-full bg-primary-soft"${_scopeId}></span><div${_scopeId}><div class="font-bold"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Welcome to the community 👋"))}</div><div class="text-sm text-ink-muted"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Posted by {name} · {count} replies", {
							name: "Riley",
							count: 3
						}))}</div></div></div><p class="mt-3 text-ink-2"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("The quick brown fox jumps over the lazy dog. This sample shows your font, size, colors and corners in context."))}</p><div class="mt-4 flex flex-wrap items-center gap-2"${_scopeId}><button class="rounded-c bg-primary px-4 py-2 text-sm font-semibold text-ink hover:bg-primary-600"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Reply"))}</button><button class="rounded-c bg-primary-soft px-4 py-2 text-sm font-semibold text-primary-700"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("React"))}</button><span class="rounded-full bg-primary-soft px-3 py-1 text-xs font-semibold text-primary-700"${_scopeId}>#announcement</span><a class="ml-1 text-sm font-semibold text-primary-700 hover:underline"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("View thread →"))}</a></div></div><div class="mt-3 grid grid-cols-3 gap-3"${_scopeId}><!--[-->`);
						(0, server_renderer_exports.ssrRenderList)(3, (n) => {
							_push(`<div class="rounded-c border border-line bg-surface p-3 text-sm"${_scopeId}><div class="h-2 w-2/3 rounded bg-primary-soft"${_scopeId}></div><div class="mt-2 text-ink-muted"${_scopeId}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Card {n}", { n }))}</div></div>`);
						});
						_push(`<!--]--></div></div></div></div>`);
					} else return [(0, vue_exports.createVNode)("div", { class: "grid gap-6 xl:grid-cols-[380px_1fr]" }, [(0, vue_exports.createVNode)("form", {
						class: "space-y-4",
						onSubmit: (0, vue_exports.withModifiers)(save, ["prevent"])
					}, [
						(0, vue_exports.createVNode)("section", { class: "rounded-2xl border border-line bg-surface p-5" }, [(0, vue_exports.createVNode)("h3", { class: "mb-3 text-xs font-bold uppercase tracking-wide text-ink-2" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Presets")), 1), (0, vue_exports.createVNode)("div", { class: "grid grid-cols-4 gap-2" }, [((0, vue_exports.openBlock)(), (0, vue_exports.createBlock)(vue_exports.Fragment, null, (0, vue_exports.renderList)(presets, (p) => {
							return (0, vue_exports.createVNode)("button", {
								key: p.name,
								type: "button",
								class: "group rounded-xl border border-line p-2 text-center hover:border-line",
								onClick: ($event) => applyPreset(p)
							}, [(0, vue_exports.createVNode)("span", {
								class: "mx-auto block h-8 w-8 rounded-lg",
								style: { background: p.primary }
							}, null, 4), (0, vue_exports.createVNode)("span", { class: "mt-1 block text-[11px] text-ink-2 group-hover:text-ink" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)(p.name)), 1)], 8, ["onClick"]);
						}), 64))])]),
						(0, vue_exports.createVNode)("section", { class: "rounded-2xl border border-line bg-surface p-5" }, [
							(0, vue_exports.createVNode)("h3", { class: "mb-3 text-xs font-bold uppercase tracking-wide text-ink-2" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Colors")), 1),
							(0, vue_exports.createVNode)("label", { class: "block text-sm font-medium text-ink-2" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Brand color")), 1),
							(0, vue_exports.createVNode)("div", { class: "mt-2 flex items-center gap-3" }, [(0, vue_exports.withDirectives)((0, vue_exports.createVNode)("input", {
								"onUpdate:modelValue": ($event) => (0, vue_exports.unref)(form).primary = $event,
								type: "color",
								class: "h-10 w-12 cursor-pointer rounded border-line bg-transparent"
							}, null, 8, ["onUpdate:modelValue"]), [[vue_exports.vModelText, (0, vue_exports.unref)(form).primary]]), (0, vue_exports.withDirectives)((0, vue_exports.createVNode)("input", {
								"onUpdate:modelValue": ($event) => (0, vue_exports.unref)(form).primary = $event,
								type: "text",
								class: "w-32 rounded-lg border-line bg-appbg font-mono text-sm text-ink focus:border-indigo-500 focus:ring-indigo-500"
							}, null, 8, ["onUpdate:modelValue"]), [[vue_exports.vModelText, (0, vue_exports.unref)(form).primary]])]),
							(0, vue_exports.createVNode)("div", { class: "mt-3 flex items-center gap-2 rounded-lg border border-line bg-appbg px-3 py-2" }, [
								(0, vue_exports.createVNode)("span", { class: ["flex h-5 w-5 items-center justify-center rounded-full text-[11px] font-bold", contrast.value.ok ? "bg-emerald-500/20 text-emerald-400" : contrast.value.warn ? "bg-amber-500/20 text-amber-400" : "bg-red-500/20 text-red-400"] }, (0, vue_exports.toDisplayString)(contrast.value.ok ? "✓" : "!"), 3),
								(0, vue_exports.createVNode)("span", { class: "text-sm text-ink-2" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("White text contrast {ratio}:1", { ratio: contrast.value.ratio })), 1),
								(0, vue_exports.createVNode)("span", { class: ["ml-auto text-xs font-semibold", contrast.value.ok ? "text-emerald-400" : contrast.value.warn ? "text-amber-400" : "text-red-400"] }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("WCAG {level}", { level: (0, vue_exports.unref)(t)(contrast.value.level) })), 3)
							]),
							!contrast.value.ok ? ((0, vue_exports.openBlock)(), (0, vue_exports.createBlock)("p", {
								key: 0,
								class: "mt-1.5 text-xs text-ink-muted"
							}, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Aim for 4.5:1 (AA) so button labels stay readable for everyone — try a darker brand color.")), 1)) : (0, vue_exports.createCommentVNode)("", true)
						]),
						(0, vue_exports.createVNode)("section", { class: "rounded-2xl border border-line bg-surface p-5" }, [(0, vue_exports.createVNode)("h3", { class: "mb-3 text-xs font-bold uppercase tracking-wide text-ink-2" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Appearance")), 1), (0, vue_exports.createVNode)("div", { class: "grid grid-cols-2 gap-2" }, [((0, vue_exports.openBlock)(), (0, vue_exports.createBlock)(vue_exports.Fragment, null, (0, vue_exports.renderList)(["light", "dark"], (m) => {
							return (0, vue_exports.createVNode)("button", {
								key: m,
								type: "button",
								class: ["rounded-lg border px-3 py-2 text-sm font-semibold capitalize", (0, vue_exports.unref)(form).mode === m ? "border-indigo-500 bg-indigo-500/10 text-ink" : "border-line text-ink-2 hover:text-ink"],
								onClick: ($event) => (0, vue_exports.unref)(form).mode = m
							}, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)(m)), 11, ["onClick"]);
						}), 64))])]),
						(0, vue_exports.createVNode)("section", { class: "rounded-2xl border border-line bg-surface p-5" }, [
							(0, vue_exports.createVNode)("h3", { class: "mb-3 text-xs font-bold uppercase tracking-wide text-ink-2" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Typography")), 1),
							(0, vue_exports.createVNode)("label", { class: "block text-sm font-medium text-ink-2" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Font")), 1),
							(0, vue_exports.withDirectives)((0, vue_exports.createVNode)("select", {
								"onUpdate:modelValue": ($event) => (0, vue_exports.unref)(form).font = $event,
								class: "mt-1.5 w-full rounded-lg border-line bg-appbg text-ink focus:border-indigo-500 focus:ring-indigo-500"
							}, [((0, vue_exports.openBlock)(true), (0, vue_exports.createBlock)(vue_exports.Fragment, null, (0, vue_exports.renderList)(__props.fonts, (f) => {
								return (0, vue_exports.openBlock)(), (0, vue_exports.createBlock)("option", {
									key: f.value,
									value: f.value
								}, (0, vue_exports.toDisplayString)(f.label), 9, ["value"]);
							}), 128))], 8, ["onUpdate:modelValue"]), [[vue_exports.vModelSelect, (0, vue_exports.unref)(form).font]]),
							(0, vue_exports.createVNode)("label", { class: "mt-4 block text-sm font-medium text-ink-2" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Base size — {size}px", { size: (0, vue_exports.unref)(form).font_size })), 1),
							(0, vue_exports.withDirectives)((0, vue_exports.createVNode)("input", {
								"onUpdate:modelValue": ($event) => (0, vue_exports.unref)(form).font_size = $event,
								type: "range",
								min: "12",
								max: "20",
								class: "mt-2 w-full accent-indigo-500"
							}, null, 8, ["onUpdate:modelValue"]), [[
								vue_exports.vModelText,
								(0, vue_exports.unref)(form).font_size,
								void 0,
								{ number: true }
							]])
						]),
						(0, vue_exports.createVNode)("section", { class: "rounded-2xl border border-line bg-surface p-5" }, [
							(0, vue_exports.createVNode)("h3", { class: "mb-3 text-xs font-bold uppercase tracking-wide text-ink-2" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Layout")), 1),
							(0, vue_exports.createVNode)("label", { class: "block text-sm font-medium text-ink-2" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Corner radius — {radius}px", { radius: (0, vue_exports.unref)(form).radius })), 1),
							(0, vue_exports.withDirectives)((0, vue_exports.createVNode)("input", {
								"onUpdate:modelValue": ($event) => (0, vue_exports.unref)(form).radius = $event,
								type: "range",
								min: "0",
								max: "28",
								class: "mt-2 w-full accent-indigo-500"
							}, null, 8, ["onUpdate:modelValue"]), [[
								vue_exports.vModelText,
								(0, vue_exports.unref)(form).radius,
								void 0,
								{ number: true }
							]]),
							(0, vue_exports.createVNode)("label", { class: "mt-4 block text-sm font-medium text-ink-2" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Content width")), 1),
							(0, vue_exports.withDirectives)((0, vue_exports.createVNode)("select", {
								"onUpdate:modelValue": ($event) => (0, vue_exports.unref)(form).container = $event,
								class: "mt-1.5 w-full rounded-lg border-line bg-appbg text-ink focus:border-indigo-500 focus:ring-indigo-500"
							}, [((0, vue_exports.openBlock)(), (0, vue_exports.createBlock)(vue_exports.Fragment, null, (0, vue_exports.renderList)(containers, (c) => {
								return (0, vue_exports.createVNode)("option", {
									key: c.value,
									value: c.value
								}, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)(c.label)) + (0, vue_exports.toDisplayString)(c.value ? ` (${c.value}px)` : ""), 9, ["value"]);
							}), 64))], 8, ["onUpdate:modelValue"]), [[
								vue_exports.vModelSelect,
								(0, vue_exports.unref)(form).container,
								void 0,
								{ number: true }
							]])
						]),
						(0, vue_exports.createVNode)("div", { class: "sticky bottom-4 flex items-center gap-3 rounded-2xl border border-line bg-surface p-4" }, [
							(0, vue_exports.createVNode)("button", {
								type: "submit",
								disabled: (0, vue_exports.unref)(form).processing,
								class: "rounded-lg bg-indigo-500 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-600 disabled:opacity-60"
							}, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Save theme")), 9, ["disabled"]),
							(0, vue_exports.unref)(form).recentlySuccessful ? ((0, vue_exports.openBlock)(), (0, vue_exports.createBlock)("span", {
								key: 0,
								class: "text-sm text-emerald-400"
							}, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Saved for everyone.")), 1)) : (0, vue_exports.createCommentVNode)("", true),
							(0, vue_exports.createVNode)("span", { class: "ml-auto text-xs text-ink-muted" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Live preview →")), 1)
						])
					], 32), (0, vue_exports.createVNode)("div", { class: "overflow-hidden rounded-2xl border border-line" }, [(0, vue_exports.createVNode)("div", {
						class: "bg-appbg p-5 text-ink",
						style: {
							"font-family": "var(--c-font)",
							"font-size": "var(--c-font-size)"
						}
					}, [
						(0, vue_exports.createVNode)("div", { class: "flex items-center gap-3 rounded-c border border-line bg-surface px-4 py-3" }, [
							(0, vue_exports.createVNode)("span", { class: "flex h-8 w-8 items-center justify-center rounded-c bg-primary font-bold text-ink" }, "C"),
							(0, vue_exports.createVNode)("span", { class: "font-extrabold tracking-tight" }, "Convoro"),
							(0, vue_exports.createVNode)("span", { class: "ml-auto rounded-full bg-primary px-3 py-1 text-xs font-semibold text-ink" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Join")), 1)
						]),
						(0, vue_exports.createVNode)("div", { class: "mt-4 rounded-c border border-line bg-surface p-5" }, [
							(0, vue_exports.createVNode)("div", { class: "flex items-center gap-2" }, [(0, vue_exports.createVNode)("span", { class: "h-9 w-9 rounded-full bg-primary-soft" }), (0, vue_exports.createVNode)("div", null, [(0, vue_exports.createVNode)("div", { class: "font-bold" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Welcome to the community 👋")), 1), (0, vue_exports.createVNode)("div", { class: "text-sm text-ink-muted" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Posted by {name} · {count} replies", {
								name: "Riley",
								count: 3
							})), 1)])]),
							(0, vue_exports.createVNode)("p", { class: "mt-3 text-ink-2" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("The quick brown fox jumps over the lazy dog. This sample shows your font, size, colors and corners in context.")), 1),
							(0, vue_exports.createVNode)("div", { class: "mt-4 flex flex-wrap items-center gap-2" }, [
								(0, vue_exports.createVNode)("button", { class: "rounded-c bg-primary px-4 py-2 text-sm font-semibold text-ink hover:bg-primary-600" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Reply")), 1),
								(0, vue_exports.createVNode)("button", { class: "rounded-c bg-primary-soft px-4 py-2 text-sm font-semibold text-primary-700" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("React")), 1),
								(0, vue_exports.createVNode)("span", { class: "rounded-full bg-primary-soft px-3 py-1 text-xs font-semibold text-primary-700" }, "#announcement"),
								(0, vue_exports.createVNode)("a", { class: "ml-1 text-sm font-semibold text-primary-700 hover:underline" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("View thread →")), 1)
							])
						]),
						(0, vue_exports.createVNode)("div", { class: "mt-3 grid grid-cols-3 gap-3" }, [((0, vue_exports.openBlock)(), (0, vue_exports.createBlock)(vue_exports.Fragment, null, (0, vue_exports.renderList)(3, (n) => {
							return (0, vue_exports.createVNode)("div", {
								key: n,
								class: "rounded-c border border-line bg-surface p-3 text-sm"
							}, [(0, vue_exports.createVNode)("div", { class: "h-2 w-2/3 rounded bg-primary-soft" }), (0, vue_exports.createVNode)("div", { class: "mt-2 text-ink-muted" }, (0, vue_exports.toDisplayString)((0, vue_exports.unref)(t)("Card {n}", { n })), 1)]);
						}), 64))])
					])])])];
				}),
				_: 1
			}, _parent));
			_push(`<!--]-->`);
		};
	}
});
//#endregion
//#region resources/js/Pages/Admin/Theme.vue
var _sfc_setup = Theme_vue_vue_type_script_setup_true_lang_default.setup;
Theme_vue_vue_type_script_setup_true_lang_default.setup = (props, ctx) => {
	const ssrContext = (0, vue_exports.useSSRContext)();
	(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("resources/js/Pages/Admin/Theme.vue");
	return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
};
var Theme_default = Theme_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { Theme_default as default };
