import { a as usePage, o as vue_exports, s as router } from "../ssr.js";
import { n as server_renderer_exports, t } from "./i18n-CXLOYfyq.js";
import { t as toast } from "./toast-DMXj7c3P.js";
import { i as convoro } from "./AuthModal-BJdeGGae.js";
import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.js";
//#region resources/js/Components/ThemeEditor.vue?vue&type=script&setup=true&lang.ts
var SIDEBAR_SLOT = "forum:sidebar";
var labelCls = "mb-2 block text-xs font-bold uppercase tracking-wide text-ink-muted";
var ThemeEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue_exports.defineComponent)({
	__name: "ThemeEditor",
	__ssrInlineRender: true,
	setup(__props) {
		const page = usePage();
		const isAdmin = (0, vue_exports.computed)(() => !!page.props.auth?.isAdmin);
		const fonts = (0, vue_exports.computed)(() => page.props.themeFonts ?? []);
		(0, vue_exports.computed)(() => page.props.site?.theme ?? {});
		(0, vue_exports.computed)(() => page.props.site ?? {});
		const open = (0, vue_exports.ref)(false);
		const saving = (0, vue_exports.ref)(false);
		const ready = (0, vue_exports.ref)(false);
		const tab = (0, vue_exports.ref)("theme");
		t("Body text on background"), t("Switch the appearance mode — text/background colors come from the light or dark preset."), t("Body text on cards"), t("Switch the appearance mode — card colors come from the light or dark preset."), t("Secondary text on cards"), t("Switch the appearance mode to improve secondary-text contrast."), t("Muted text on background"), t("Darken the “Muted text color” below until this passes."), t("White text on brand buttons"), t("Darken the Primary color so white button text meets contrast."), t("Links/badges (brand on soft)"), t("Adjust the Primary color so links and badges meet contrast.");
		const guidelines = [
			{
				label: t("Keyboard navigation + visible focus rings"),
				status: "pass"
			},
			{
				label: t("Semantic landmarks (header, nav, main)"),
				status: "pass"
			},
			{
				label: t("Skip-to-content link"),
				status: "pass"
			},
			{
				label: t("All form fields have labels"),
				status: "pass"
			},
			{
				label: t("Light and dark themes available"),
				status: "pass"
			},
			{
				label: t("Respects “reduce motion” preference"),
				status: "pass"
			},
			{
				label: t("Alt text captured on uploaded images"),
				status: "todo"
			},
			{
				label: t("Full screen-reader audit (ARIA roles)"),
				status: "partial"
			}
		];
		const a11yResults = (0, vue_exports.ref)([]);
		const flashSection = (0, vue_exports.ref)("");
		const a11yHint = (0, vue_exports.ref)("");
		const a11yScore = (0, vue_exports.computed)(() => {
			const cPass = a11yResults.value.filter((r) => r.ok).length;
			const cTotal = a11yResults.value.length || 1;
			const gPass = guidelines.filter((g) => g.status === "pass").length;
			const gPartial = guidelines.filter((g) => g.status === "partial").length;
			return Math.round((cPass + gPass + gPartial * .5) / (cTotal + guidelines.length) * 100);
		});
		const a11yGrade = (0, vue_exports.computed)(() => a11yScore.value >= 90 ? t("Excellent") : a11yScore.value >= 75 ? t("Good") : a11yScore.value >= 50 ? t("Fair") : t("Needs work"));
		const a11yStatusStyle = (s) => s === "pass" ? "bg-emerald-500/20 text-emerald-400" : s === "partial" ? "bg-amber-500/20 text-amber-400" : "bg-slate-500/20 text-slate-400";
		const a11yStatusLabel = (s) => s === "pass" ? t("Pass") : s === "partial" ? t("Partial") : t("To do");
		const form = (0, vue_exports.reactive)({
			primary: "#5b5bd6",
			accent: "#8b5cf6",
			radius: 12,
			button_radius: "",
			mode: "light",
			font: "Inter",
			heading_font: "",
			font_size: 16,
			container: 1240,
			avatar_shape: "circle",
			post_style: "card",
			header_bg: "surface",
			header_color: "#5b5bd6",
			density: "comfortable",
			link_color: "primary",
			muted: "",
			custom_css: "",
			logo: "",
			favicon: ""
		});
		function currentMutedHex() {
			const p = getComputedStyle(document.documentElement).getPropertyValue("--c-muted").trim().split(/\s+/).map(Number);
			if (p.length === 3 && p.every((n) => !Number.isNaN(n))) return "#" + p.map((n) => Math.max(0, Math.min(255, n)).toString(16).padStart(2, "0")).join("");
			return "#8a90a6";
		}
		const mutedValue = (0, vue_exports.computed)(() => form.muted || currentMutedHex());
		function save() {
			saving.value = true;
			router.post("/admin/theme", {
				...form,
				button_radius: form.button_radius === "" ? null : form.button_radius
			}, {
				preserveScroll: true,
				preserveState: true,
				onSuccess: () => toast(t("Theme saved")),
				onError: () => toast(t("Couldn't save theme"), "error"),
				onFinish: () => saving.value = false
			});
		}
		const uploading = (0, vue_exports.ref)("");
		const wOrder = (0, vue_exports.ref)([]);
		const wDisabled = (0, vue_exports.ref)([]);
		const aboutHtml = (0, vue_exports.ref)("");
		const aboutTitle = (0, vue_exports.ref)("");
		const dragFrom = (0, vue_exports.ref)(null);
		const dragOver = (0, vue_exports.ref)(null);
		function reconcileWidgets() {
			convoro.registeredWidgets(SIDEBAR_SLOT).forEach((r) => {
				if (!wOrder.value.includes(r.key)) wOrder.value.push(r.key);
			});
		}
		const displayWidgets = (0, vue_exports.computed)(() => {
			const reg = new Map(convoro.registeredWidgets(SIDEBAR_SLOT).map((r) => [r.key, r]));
			return wOrder.value.map((key) => {
				const r = reg.get(key);
				return {
					key,
					label: r ? t(r.label) : key,
					enabled: !wDisabled.value.includes(key),
					known: !!r
				};
			});
		});
		(0, vue_exports.watch)(() => convoro.registeredWidgets(SIDEBAR_SLOT).length, () => {
			if (open.value) reconcileWidgets();
		});
		const currentLayout = (0, vue_exports.computed)(() => wOrder.value.map((key) => ({
			key,
			enabled: !wDisabled.value.includes(key)
		})));
		function previewWidgets() {
			convoro.setLayout(SIDEBAR_SLOT, {
				order: wOrder.value.slice(),
				disabled: wDisabled.value.slice()
			});
			convoro.setData({
				aboutHtml: aboutHtml.value,
				aboutTitle: aboutTitle.value
			});
			convoro.emit("convoro:data");
		}
		function saveWidgets() {
			saving.value = true;
			router.post("/admin/theme/widgets", {
				widgets: currentLayout.value,
				about_html: aboutHtml.value,
				about_title: aboutTitle.value
			}, {
				preserveScroll: true,
				preserveState: true,
				onSuccess: () => toast(t("Widgets saved")),
				onError: () => toast(t("Couldn't save widgets"), "error"),
				onFinish: () => saving.value = false
			});
		}
		let themeTimer = null;
		let widgetTimer = null;
		(0, vue_exports.watch)(form, () => {
			if (!ready.value || !open.value) return;
			if (themeTimer) clearTimeout(themeTimer);
			themeTimer = setTimeout(save, 700);
		}, { deep: true });
		(0, vue_exports.watch)([
			wOrder,
			wDisabled,
			aboutHtml,
			aboutTitle
		], () => {
			if (!ready.value || !open.value) return;
			previewWidgets();
			if (widgetTimer) clearTimeout(widgetTimer);
			widgetTimer = setTimeout(saveWidgets, 700);
		}, { deep: true });
		const avatarShapes = [
			{
				v: "circle",
				label: t("Circle")
			},
			{
				v: "rounded",
				label: t("Rounded")
			},
			{
				v: "square",
				label: t("Square")
			}
		];
		const postStyles = [
			{
				v: "card",
				label: t("Card")
			},
			{
				v: "bordered",
				label: t("Bordered")
			},
			{
				v: "flat",
				label: t("Flat")
			}
		];
		const headerStyles = [
			{
				v: "surface",
				label: t("Default")
			},
			{
				v: "brand",
				label: t("Brand")
			},
			{
				v: "custom",
				label: t("Custom")
			}
		];
		const densities = [
			{
				v: "compact",
				label: t("Compact")
			},
			{
				v: "comfortable",
				label: t("Cozy")
			},
			{
				v: "spacious",
				label: t("Spacious")
			}
		];
		const containers = [
			{
				v: 1100,
				label: t("Narrow")
			},
			{
				v: 1240,
				label: t("Default")
			},
			{
				v: 1400,
				label: t("Wide")
			},
			{
				v: 1600,
				label: t("Extra wide")
			},
			{
				v: 0,
				label: t("Full")
			}
		];
		return (_ctx, _push, _parent, _attrs) => {
			if (isAdmin.value) {
				_push(`<div${(0, server_renderer_exports.ssrRenderAttrs)(_attrs)} data-v-c25880e2>`);
				if (!open.value) _push(`<button type="button" class="fixed bottom-5 left-5 z-[70] hidden h-12 w-12 items-center justify-center rounded-full bg-primary text-white shadow-xl shadow-primary/40 hover:bg-primary-600 md:flex"${(0, server_renderer_exports.ssrRenderAttr)("title", (0, vue_exports.unref)(t)("Theme editor"))}${(0, server_renderer_exports.ssrRenderAttr)("aria-label", (0, vue_exports.unref)(t)("Open theme editor"))} data-v-c25880e2><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" data-v-c25880e2><circle cx="13.5" cy="6.5" r="2.5" data-v-c25880e2></circle><circle cx="17.5" cy="10.5" r="2.5" data-v-c25880e2></circle><circle cx="8.5" cy="7.5" r="2.5" data-v-c25880e2></circle><circle cx="6.5" cy="12.5" r="2.5" data-v-c25880e2></circle><path d="M12 2a10 10 0 1 0 0 20 2 2 0 0 0 2-2 1.5 1.5 0 0 1 1.5-1.5H18a4 4 0 0 0 4-4 10 10 0 0 0-10-10z" data-v-c25880e2></path></svg></button>`);
				else _push(`<!---->`);
				if (open.value) {
					_push(`<div class="fixed inset-y-0 left-0 z-[71] flex w-[340px] max-w-[90vw] flex-col border-r border-line bg-surface shadow-2xl" data-v-c25880e2><div class="flex items-center gap-2 border-b border-line px-5 py-4" data-v-c25880e2><h2 class="text-base font-extrabold" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Customize"))}</h2><span class="rounded-full bg-primary/15 px-2 py-0.5 text-[11px] font-bold text-primary" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Live"))}</span><button type="button" class="ml-auto text-ink-muted hover:text-ink"${(0, server_renderer_exports.ssrRenderAttr)("aria-label", (0, vue_exports.unref)(t)("Close"))} data-v-c25880e2>✕</button></div><div class="flex gap-1 border-b border-line px-3 pt-2" data-v-c25880e2><button type="button" class="${(0, server_renderer_exports.ssrRenderClass)([tab.value === "theme" ? "bg-surface-2 text-ink" : "text-ink-muted hover:text-ink", "rounded-t-lg px-3 py-2 text-sm font-semibold"])}" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Theme"))}</button><button type="button" class="${(0, server_renderer_exports.ssrRenderClass)([tab.value === "widgets" ? "bg-surface-2 text-ink" : "text-ink-muted hover:text-ink", "rounded-t-lg px-3 py-2 text-sm font-semibold"])}" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Widgets"))}</button><button type="button" class="${(0, server_renderer_exports.ssrRenderClass)([tab.value === "a11y" ? "bg-surface-2 text-ink" : "text-ink-muted hover:text-ink", "flex items-center gap-1.5 rounded-t-lg px-3 py-2 text-sm font-semibold"])}" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("A11y"))} <span class="${(0, server_renderer_exports.ssrRenderClass)([a11yScore.value >= 90 ? "bg-emerald-500/20 text-emerald-400" : a11yScore.value >= 75 ? "bg-amber-500/20 text-amber-400" : "bg-red-500/20 text-red-400", "rounded-full px-1.5 py-0.5 text-[10px] font-bold"])}" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)(a11yScore.value)}%</span></button></div><div class="flex-1 space-y-6 overflow-y-auto px-5 py-5" style="${(0, server_renderer_exports.ssrRenderStyle)(tab.value === "theme" ? null : { display: "none" })}" data-v-c25880e2>`);
					if (a11yHint.value) _push(`<div class="flex items-start gap-2 rounded-xl border border-primary/40 bg-primary/10 px-3 py-2.5 text-xs text-ink" data-v-c25880e2><svg class="mt-0.5 shrink-0 text-primary" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" data-v-c25880e2><path d="M12 16v-4M12 8h.01" data-v-c25880e2></path><circle cx="12" cy="12" r="10" data-v-c25880e2></circle></svg><span class="flex-1" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)(a11yHint.value)}</span><button type="button" class="shrink-0 text-ink-muted hover:text-ink"${(0, server_renderer_exports.ssrRenderAttr)("aria-label", (0, vue_exports.unref)(t)("Dismiss"))} data-v-c25880e2>✕</button></div>`);
					else _push(`<!---->`);
					_push(`<div id="sec-appearance" class="${(0, server_renderer_exports.ssrRenderClass)([{ "a11y-flash": flashSection.value === "appearance" }, "scroll-mt-3 rounded-xl"])}" data-v-c25880e2><label class="${(0, server_renderer_exports.ssrRenderClass)(labelCls)}" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Appearance"))}</label><div class="flex gap-2" data-v-c25880e2><!--[-->`);
					(0, server_renderer_exports.ssrRenderList)(["light", "dark"], (m) => {
						_push(`<button type="button" class="${(0, server_renderer_exports.ssrRenderClass)([form.mode === m ? "border-primary bg-primary/10 text-primary" : "border-line text-ink-2 hover:bg-surface-2", "flex-1 rounded-lg border px-3 py-2 text-sm font-semibold capitalize"])}" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)(m))}</button>`);
					});
					_push(`<!--]--></div></div><div id="sec-brand" class="${(0, server_renderer_exports.ssrRenderClass)([{ "a11y-flash": flashSection.value === "brand" }, "scroll-mt-3 rounded-xl"])}" data-v-c25880e2><label class="${(0, server_renderer_exports.ssrRenderClass)(labelCls)}" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Primary color"))}</label><div class="flex items-center gap-3" data-v-c25880e2><input type="color"${(0, server_renderer_exports.ssrRenderAttr)("value", form.primary)} class="h-10 w-14 cursor-pointer rounded border border-line bg-surface p-1" data-v-c25880e2><input type="text"${(0, server_renderer_exports.ssrRenderAttr)("value", form.primary)} class="w-full rounded-lg border-line bg-surface-2 font-mono text-sm text-ink focus:border-primary focus:ring-primary" data-v-c25880e2></div><label class="${(0, server_renderer_exports.ssrRenderClass)([labelCls, "mt-3"])}" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Accent color"))}</label><div class="flex items-center gap-3" data-v-c25880e2><input type="color"${(0, server_renderer_exports.ssrRenderAttr)("value", form.accent)} class="h-10 w-14 cursor-pointer rounded border border-line bg-surface p-1" data-v-c25880e2><input type="text"${(0, server_renderer_exports.ssrRenderAttr)("value", form.accent)} class="w-full rounded-lg border-line bg-surface-2 font-mono text-sm text-ink focus:border-primary focus:ring-primary" data-v-c25880e2></div><div class="mt-3 flex items-center gap-2" data-v-c25880e2><span class="text-xs font-semibold text-ink-muted" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Links use"))}</span><!--[-->`);
					(0, server_renderer_exports.ssrRenderList)(["primary", "accent"], (l) => {
						_push(`<button type="button" class="${(0, server_renderer_exports.ssrRenderClass)([form.link_color === l ? "border-primary bg-primary/10 text-primary" : "border-line text-ink-2 hover:bg-surface-2", "rounded-lg border px-2.5 py-1 text-xs font-semibold capitalize"])}" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)(l))}</button>`);
					});
					_push(`<!--]--></div></div><div id="sec-text" class="${(0, server_renderer_exports.ssrRenderClass)([{ "a11y-flash": flashSection.value === "text" }, "scroll-mt-3 rounded-xl"])}" data-v-c25880e2><label class="${(0, server_renderer_exports.ssrRenderClass)(labelCls)}" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Muted text color"))}</label><div class="flex items-center gap-3" data-v-c25880e2><input type="color"${(0, server_renderer_exports.ssrRenderAttr)("value", mutedValue.value)} class="h-10 w-14 cursor-pointer rounded border border-line bg-surface p-1" data-v-c25880e2><input type="text"${(0, server_renderer_exports.ssrRenderAttr)("value", mutedValue.value)} class="w-full rounded-lg border-line bg-surface-2 font-mono text-sm text-ink focus:border-primary focus:ring-primary" data-v-c25880e2>`);
					if (form.muted) _push(`<button type="button"${(0, server_renderer_exports.ssrRenderAttr)("title", (0, vue_exports.unref)(t)("Reset to theme default"))} class="shrink-0 rounded-lg border border-line px-2 py-1 text-[11px] font-semibold text-ink-2 hover:bg-surface-2" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Reset"))}</button>`);
					else _push(`<!---->`);
					_push(`</div><p class="mt-1 text-[11px] text-ink-muted" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Used for hints, timestamps and secondary labels. Darken it to pass the “Muted text” contrast check."))}</p></div><div data-v-c25880e2><label class="${(0, server_renderer_exports.ssrRenderClass)(labelCls)}" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Header background"))}</label><div class="flex gap-2" data-v-c25880e2><!--[-->`);
					(0, server_renderer_exports.ssrRenderList)(headerStyles, (h) => {
						_push(`<button type="button" class="${(0, server_renderer_exports.ssrRenderClass)([form.header_bg === h.v ? "border-primary bg-primary/10 text-primary" : "border-line text-ink-2 hover:bg-surface-2", "flex-1 rounded-lg border px-2 py-2 text-xs font-semibold"])}" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)(h.label)}</button>`);
					});
					_push(`<!--]--></div>`);
					if (form.header_bg === "custom") _push(`<div class="mt-2 flex items-center gap-3" data-v-c25880e2><input type="color"${(0, server_renderer_exports.ssrRenderAttr)("value", form.header_color)} class="h-9 w-12 cursor-pointer rounded border border-line bg-surface p-1" data-v-c25880e2><input type="text"${(0, server_renderer_exports.ssrRenderAttr)("value", form.header_color)} class="w-full rounded-lg border-line bg-surface-2 font-mono text-sm text-ink focus:border-primary focus:ring-primary" data-v-c25880e2></div>`);
					else _push(`<!---->`);
					_push(`</div><div data-v-c25880e2><label class="${(0, server_renderer_exports.ssrRenderClass)(labelCls)}" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Corner radius — {radius}px", { radius: form.radius }))}</label><input type="range" min="0" max="24"${(0, server_renderer_exports.ssrRenderAttr)("value", form.radius)} class="w-full accent-primary" data-v-c25880e2><label class="${(0, server_renderer_exports.ssrRenderClass)([labelCls, "mt-3"])}" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)(form.button_radius === "" ? (0, vue_exports.unref)(t)("Button radius — match") : (0, vue_exports.unref)(t)("Button radius — {radius}px", { radius: form.button_radius }))}</label><div class="flex items-center gap-2" data-v-c25880e2><input type="range" min="0" max="24"${(0, server_renderer_exports.ssrRenderAttr)("value", form.button_radius === "" ? form.radius : form.button_radius)} class="w-full accent-primary" data-v-c25880e2><button type="button" class="shrink-0 rounded-lg border border-line px-2 py-1 text-[11px] font-semibold text-ink-2 hover:bg-surface-2" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Match"))}</button></div></div><div data-v-c25880e2><label class="${(0, server_renderer_exports.ssrRenderClass)(labelCls)}" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Body font"))}</label><select class="w-full rounded-lg border-line bg-surface-2 text-sm text-ink focus:border-primary focus:ring-primary" data-v-c25880e2><!--[-->`);
					(0, server_renderer_exports.ssrRenderList)(fonts.value, (f) => {
						_push(`<option${(0, server_renderer_exports.ssrRenderAttr)("value", f.value)} data-v-c25880e2${(0, server_renderer_exports.ssrIncludeBooleanAttr)(Array.isArray(form.font) ? (0, server_renderer_exports.ssrLooseContain)(form.font, f.value) : (0, server_renderer_exports.ssrLooseEqual)(form.font, f.value)) ? " selected" : ""}>${(0, server_renderer_exports.ssrInterpolate)(f.label)}</option>`);
					});
					_push(`<!--]--></select><label class="${(0, server_renderer_exports.ssrRenderClass)([labelCls, "mt-3"])}" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Heading font"))}</label><select class="w-full rounded-lg border-line bg-surface-2 text-sm text-ink focus:border-primary focus:ring-primary" data-v-c25880e2><option value="" data-v-c25880e2${(0, server_renderer_exports.ssrIncludeBooleanAttr)(Array.isArray(form.heading_font) ? (0, server_renderer_exports.ssrLooseContain)(form.heading_font, "") : (0, server_renderer_exports.ssrLooseEqual)(form.heading_font, "")) ? " selected" : ""}>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Same as body"))}</option><!--[-->`);
					(0, server_renderer_exports.ssrRenderList)(fonts.value, (f) => {
						_push(`<option${(0, server_renderer_exports.ssrRenderAttr)("value", f.value)} data-v-c25880e2${(0, server_renderer_exports.ssrIncludeBooleanAttr)(Array.isArray(form.heading_font) ? (0, server_renderer_exports.ssrLooseContain)(form.heading_font, f.value) : (0, server_renderer_exports.ssrLooseEqual)(form.heading_font, f.value)) ? " selected" : ""}>${(0, server_renderer_exports.ssrInterpolate)(f.label)}</option>`);
					});
					_push(`<!--]--></select><label class="${(0, server_renderer_exports.ssrRenderClass)([labelCls, "mt-3"])}" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Text size — {size}px", { size: form.font_size }))}</label><input type="range" min="12" max="20"${(0, server_renderer_exports.ssrRenderAttr)("value", form.font_size)} class="w-full accent-primary" data-v-c25880e2></div><div data-v-c25880e2><label class="${(0, server_renderer_exports.ssrRenderClass)(labelCls)}" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Density"))}</label><div class="flex gap-2" data-v-c25880e2><!--[-->`);
					(0, server_renderer_exports.ssrRenderList)(densities, (d) => {
						_push(`<button type="button" class="${(0, server_renderer_exports.ssrRenderClass)([form.density === d.v ? "border-primary bg-primary/10 text-primary" : "border-line text-ink-2 hover:bg-surface-2", "flex-1 rounded-lg border px-2 py-2 text-xs font-semibold"])}" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)(d.label)}</button>`);
					});
					_push(`<!--]--></div></div><div data-v-c25880e2><label class="${(0, server_renderer_exports.ssrRenderClass)(labelCls)}" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Avatar shape"))}</label><div class="flex gap-2" data-v-c25880e2><!--[-->`);
					(0, server_renderer_exports.ssrRenderList)(avatarShapes, (s) => {
						_push(`<button type="button" class="${(0, server_renderer_exports.ssrRenderClass)([form.avatar_shape === s.v ? "border-primary bg-primary/10 text-primary" : "border-line text-ink-2 hover:bg-surface-2", "flex flex-1 flex-col items-center gap-1.5 rounded-lg border px-2 py-2 text-xs font-semibold"])}" data-v-c25880e2><span class="h-6 w-6 bg-ink-muted" style="${(0, server_renderer_exports.ssrRenderStyle)({ borderRadius: s.v === "square" ? "4px" : s.v === "rounded" ? "8px" : "9999px" })}" data-v-c25880e2></span> ${(0, server_renderer_exports.ssrInterpolate)(s.label)}</button>`);
					});
					_push(`<!--]--></div></div><div data-v-c25880e2><label class="${(0, server_renderer_exports.ssrRenderClass)(labelCls)}" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Post containers"))}</label><div class="flex gap-2" data-v-c25880e2><!--[-->`);
					(0, server_renderer_exports.ssrRenderList)(postStyles, (s) => {
						_push(`<button type="button" class="${(0, server_renderer_exports.ssrRenderClass)([form.post_style === s.v ? "border-primary bg-primary/10 text-primary" : "border-line text-ink-2 hover:bg-surface-2", "flex-1 rounded-lg border px-2 py-2 text-xs font-semibold"])}" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)(s.label)}</button>`);
					});
					_push(`<!--]--></div></div><div data-v-c25880e2><label class="${(0, server_renderer_exports.ssrRenderClass)(labelCls)}" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Content width"))}</label><select class="w-full rounded-lg border-line bg-surface-2 text-sm text-ink focus:border-primary focus:ring-primary" data-v-c25880e2><!--[-->`);
					(0, server_renderer_exports.ssrRenderList)(containers, (c) => {
						_push(`<option${(0, server_renderer_exports.ssrRenderAttr)("value", c.v)} data-v-c25880e2${(0, server_renderer_exports.ssrIncludeBooleanAttr)(Array.isArray(form.container) ? (0, server_renderer_exports.ssrLooseContain)(form.container, c.v) : (0, server_renderer_exports.ssrLooseEqual)(form.container, c.v)) ? " selected" : ""}>${(0, server_renderer_exports.ssrInterpolate)(c.label)}</option>`);
					});
					_push(`<!--]--></select></div><div data-v-c25880e2><label class="${(0, server_renderer_exports.ssrRenderClass)(labelCls)}" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Logo"))}</label><div class="flex items-center gap-3" data-v-c25880e2><div class="grid h-10 min-w-[40px] place-items-center rounded-lg border border-line bg-surface-2 px-2" data-v-c25880e2>`);
					if (form.logo) _push(`<img${(0, server_renderer_exports.ssrRenderAttr)("src", form.logo)} class="h-7 max-w-[120px] object-contain"${(0, server_renderer_exports.ssrRenderAttr)("alt", (0, vue_exports.unref)(t)("logo"))} data-v-c25880e2>`);
					else _push(`<span class="text-[11px] text-ink-muted" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("None"))}</span>`);
					_push(`</div><label class="cursor-pointer rounded-lg border border-line px-3 py-2 text-xs font-semibold text-ink-2 hover:bg-surface-2" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)(uploading.value === "logo" ? (0, vue_exports.unref)(t)("Uploading…") : (0, vue_exports.unref)(t)("Upload"))}<input type="file" accept="image/*" class="hidden" data-v-c25880e2></label>`);
					if (form.logo) _push(`<button type="button" class="text-xs font-semibold text-ink-muted hover:text-red-400" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Clear"))}</button>`);
					else _push(`<!---->`);
					_push(`</div><label class="${(0, server_renderer_exports.ssrRenderClass)([labelCls, "mt-3"])}" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Favicon"))}</label><div class="flex items-center gap-3" data-v-c25880e2><div class="grid h-10 w-10 place-items-center rounded-lg border border-line bg-surface-2" data-v-c25880e2>`);
					if (form.favicon) _push(`<img${(0, server_renderer_exports.ssrRenderAttr)("src", form.favicon)} class="h-6 w-6 object-contain"${(0, server_renderer_exports.ssrRenderAttr)("alt", (0, vue_exports.unref)(t)("favicon"))} data-v-c25880e2>`);
					else _push(`<span class="text-[11px] text-ink-muted" data-v-c25880e2>—</span>`);
					_push(`</div><label class="cursor-pointer rounded-lg border border-line px-3 py-2 text-xs font-semibold text-ink-2 hover:bg-surface-2" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)(uploading.value === "favicon" ? (0, vue_exports.unref)(t)("Uploading…") : (0, vue_exports.unref)(t)("Upload"))}<input type="file" accept="image/*" class="hidden" data-v-c25880e2></label>`);
					if (form.favicon) _push(`<button type="button" class="text-xs font-semibold text-ink-muted hover:text-red-400" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Clear"))}</button>`);
					else _push(`<!---->`);
					_push(`</div></div><div data-v-c25880e2><label class="${(0, server_renderer_exports.ssrRenderClass)(labelCls)}" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Custom CSS"))}</label><textarea rows="5" spellcheck="false" placeholder=".q-post { ... }" class="w-full rounded-lg border-line bg-surface-2 font-mono text-xs text-ink focus:border-primary focus:ring-primary" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)(form.custom_css)}</textarea><p class="mt-1 text-[11px] text-ink-muted" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Applied site-wide after the theme tokens. Save to preview."))}</p></div></div><div class="flex-1 space-y-5 overflow-y-auto px-5 py-5" style="${(0, server_renderer_exports.ssrRenderStyle)(tab.value === "widgets" ? null : { display: "none" })}" data-v-c25880e2><div data-v-c25880e2><label class="${(0, server_renderer_exports.ssrRenderClass)(labelCls)}" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Sidebar widgets"))}</label><p class="mb-3 text-[11px] text-ink-muted" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Drag to reorder, toggle to show or hide. Changes preview live."))}</p>`);
					if (!displayWidgets.value.length) _push(`<div class="rounded-xl border border-dashed border-line p-6 text-center text-sm text-ink-muted" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("No widgets installed yet."))}</div>`);
					else {
						_push(`<div class="space-y-2" data-v-c25880e2><!--[-->`);
						(0, server_renderer_exports.ssrRenderList)(displayWidgets.value, (w, i) => {
							_push(`<div class="${(0, server_renderer_exports.ssrRenderClass)([[dragFrom.value === i ? "opacity-40" : "", dragOver.value === i && dragFrom.value !== i ? "border-primary ring-2 ring-primary/50" : "border-line"], "rounded-xl border bg-surface-2 p-3 transition"])}" data-v-c25880e2><div class="flex items-center gap-2" data-v-c25880e2><span draggable="true" class="cursor-grab select-none text-ink-muted active:cursor-grabbing"${(0, server_renderer_exports.ssrRenderAttr)("title", (0, vue_exports.unref)(t)("drag to reorder"))} data-v-c25880e2>⠿</span><span class="${(0, server_renderer_exports.ssrRenderClass)([!w.enabled ? "opacity-50" : "", "text-sm font-semibold text-ink"])}" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)(w.label)}</span><button type="button" role="switch"${(0, server_renderer_exports.ssrRenderAttr)("aria-checked", w.enabled)} class="${(0, server_renderer_exports.ssrRenderClass)([w.enabled ? "bg-primary" : "bg-line", "relative ml-auto h-5 w-9 shrink-0 rounded-full transition-colors"])}" data-v-c25880e2><span class="${(0, server_renderer_exports.ssrRenderClass)([w.enabled ? "left-[18px]" : "left-0.5", "absolute top-0.5 h-4 w-4 rounded-full bg-white shadow transition-all"])}" data-v-c25880e2></span></button></div>`);
							if (w.key === "convoro-about" && w.enabled) _push(`<div class="mt-3 space-y-2" data-v-c25880e2><input${(0, server_renderer_exports.ssrRenderAttr)("value", aboutTitle.value)}${(0, server_renderer_exports.ssrRenderAttr)("placeholder", (0, vue_exports.unref)(t)("Heading (optional)"))} class="w-full rounded-lg border-line bg-surface text-sm text-ink focus:border-primary focus:ring-primary" data-v-c25880e2><textarea rows="4"${(0, server_renderer_exports.ssrRenderAttr)("placeholder", (0, vue_exports.unref)(t)("Text or HTML…"))} class="w-full rounded-lg border-line bg-surface text-xs text-ink focus:border-primary focus:ring-primary" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)(aboutHtml.value)}</textarea></div>`);
							else _push(`<!---->`);
							_push(`</div>`);
						});
						_push(`<!--]--></div>`);
					}
					_push(`<p class="mt-2 text-[11px] text-ink-muted" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Renders in the right rail of the community page for every visitor."))}</p></div></div><div class="flex-1 space-y-5 overflow-y-auto px-5 py-5" style="${(0, server_renderer_exports.ssrRenderStyle)(tab.value === "a11y" ? null : { display: "none" })}" data-v-c25880e2><div class="flex items-center gap-4 rounded-xl border border-line bg-surface-2 p-4" data-v-c25880e2><div class="text-3xl font-extrabold text-ink" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)(a11yScore.value)}%</div><div data-v-c25880e2><div class="text-sm font-bold text-ink" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)(a11yGrade.value)}</div><div class="text-[11px] text-ink-muted" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("WCAG / ADA compliance for the live theme"))}</div></div></div><div data-v-c25880e2><label class="${(0, server_renderer_exports.ssrRenderClass)(labelCls)}" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Color contrast (live)"))}</label><ul class="divide-y divide-line rounded-xl border border-line" data-v-c25880e2><!--[-->`);
					(0, server_renderer_exports.ssrRenderList)(a11yResults.value, (r) => {
						_push(`<li class="${(0, server_renderer_exports.ssrRenderClass)(["flex items-center justify-between gap-2 px-3 py-2 text-sm", !r.ok ? "cursor-pointer hover:bg-surface-2" : ""])}"${(0, server_renderer_exports.ssrRenderAttr)("role", !r.ok ? "button" : void 0)}${(0, server_renderer_exports.ssrRenderAttr)("tabindex", !r.ok ? 0 : void 0)} data-v-c25880e2><span class="text-ink-2" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)(r.label)}</span><span class="flex shrink-0 items-center gap-2" data-v-c25880e2><span class="font-mono text-xs text-ink-muted" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)(r.ratio)}:1</span><span class="${(0, server_renderer_exports.ssrRenderClass)([r.ok ? "bg-emerald-500/20 text-emerald-400" : "bg-red-500/20 text-red-400", "rounded-full px-2 py-0.5 text-[11px] font-semibold"])}" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)(r.ok ? (0, vue_exports.unref)(t)("AA") : (0, vue_exports.unref)(t)("Fail"))}</span>`);
						if (!r.ok) _push(`<span class="flex items-center gap-0.5 text-[11px] font-semibold text-primary" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Fix"))} <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" data-v-c25880e2><path d="M9 18l6-6-6-6" data-v-c25880e2></path></svg></span>`);
						else _push(`<!---->`);
						_push(`</span></li>`);
					});
					_push(`<!--]--></ul><p class="mt-2 text-[11px] text-ink-muted" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Click a failing check to jump to the setting that fixes it — changes preview instantly."))}</p></div><div data-v-c25880e2><label class="${(0, server_renderer_exports.ssrRenderClass)(labelCls)}" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Best practices"))}</label><ul class="divide-y divide-line rounded-xl border border-line" data-v-c25880e2><!--[-->`);
					(0, server_renderer_exports.ssrRenderList)(guidelines, (g) => {
						_push(`<li class="flex items-center justify-between gap-2 px-3 py-2 text-sm" data-v-c25880e2><span class="text-ink-2" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)(g.label)}</span><span class="${(0, server_renderer_exports.ssrRenderClass)([a11yStatusStyle(g.status), "shrink-0 rounded-full px-2 py-0.5 text-[11px] font-semibold"])}" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)(a11yStatusLabel(g.status))}</span></li>`);
					});
					_push(`<!--]--></ul></div></div><div class="flex items-center justify-center gap-2 border-t border-line px-5 py-4 text-[12px]" data-v-c25880e2>`);
					if (saving.value) _push(`<!--[--><svg class="animate-spin text-ink-muted" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" data-v-c25880e2><path d="M21 12a9 9 0 1 1-6.219-8.56" data-v-c25880e2></path></svg><span class="font-semibold text-ink-2" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Saving…"))}</span><!--]-->`);
					else _push(`<!--[--><svg class="text-emerald-500" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" data-v-c25880e2><path d="M20 6 9 17l-5-5" data-v-c25880e2></path></svg><span class="text-ink-muted" data-v-c25880e2>${(0, server_renderer_exports.ssrInterpolate)((0, vue_exports.unref)(t)("Changes save & publish automatically"))}</span><!--]-->`);
					_push(`</div></div>`);
				} else _push(`<!---->`);
				_push(`</div>`);
			} else _push(`<!---->`);
		};
	}
});
//#endregion
//#region resources/js/Components/ThemeEditor.vue
var _sfc_setup = ThemeEditor_vue_vue_type_script_setup_true_lang_default.setup;
ThemeEditor_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/Components/ThemeEditor.vue");
	return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
};
var ThemeEditor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(ThemeEditor_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-c25880e2"]]);
//#endregion
export { ThemeEditor_default as default };
