@hot-updater/console 1.0.0-rc.4 → 1.0.0-rc.41

package/.output/server/_ssr/remote-config-D2GmbGwI.mjs

@@ -0,0 +1,2594 @@
+import { i as __toESM } from "../_runtime.mjs";
+import { u as createServerFn } from "./createMiddleware-Cm6Tn0_Y.mjs";
+import { _t as require_react, gt as require_jsx_runtime, n as Toggle, t as ToggleGroup } from "../_libs/@base-ui/react+[...].mjs";
+import { A as GitBranch, J as Braces, L as Clipboard, N as Eye, T as LoaderCircle, Y as ArrowUp, Z as ArrowRight, _ as Plus, a as Trash2, d as SlidersHorizontal, et as ArrowDown, g as RefreshCw, h as RotateCcw, i as TriangleAlert, k as History, n as Upload, p as Search, r as Undo2, t as X, u as Smartphone, v as Pencil } from "../_libs/lucide-react.mjs";
+import { t as cva } from "../_libs/class-variance-authority+clsx.mjs";
+import { A as createSsrRpc, C as Skeleton, S as SidebarTrigger, k as cn, n as Input, t as Button$1 } from "./sidebar-DPcOijvL.mjs";
+import { t as consoleAccess } from "./console-access--o9FXikU.mjs";
+import { f as lazyRouteComponent, p as createFileRoute } from "../_libs/@tanstack/react-router+[...].mjs";
+import { i as useQuery, n as useMutation, s as useQueryClient, t as useInfiniteQuery } from "../_libs/tanstack__react-query.mjs";
+import { l as keepPreviousData } from "../_libs/tanstack__query-core.mjs";
+import { r as requireConsoleFeature } from "./console-features-api-CYclUQ4h.mjs";
+import { a as EmptyMedia, i as EmptyHeader, n as EmptyContent, o as EmptyTitle, r as EmptyDescription, t as Empty } from "./empty-BPayFad3.mjs";
+import { _ as FieldLegend, a as Badge, c as CardDescription, d as CardTitle, f as Field, g as FieldLabel, h as FieldGroup, i as AlertTitle, m as FieldError, n as AlertAction, o as Card, p as FieldDescription, r as AlertDescription, s as CardContent, t as Alert, u as CardHeader, v as FieldSet } from "./field-DjZ5t7rH.mjs";
+import { a as AlertDialogDescription, i as AlertDialogContent, l as AlertDialogTitle, n as AlertDialogAction, o as AlertDialogFooter, r as AlertDialogCancel, s as AlertDialogHeader, t as AlertDialog$1 } from "./alert-dialog-Chkim7vZ.mjs";
+import { a as DialogHeader, i as DialogFooter, n as DialogContent, o as DialogTitle, r as DialogDescription, t as Dialog$1 } from "./dialog-mfSANqjC.mjs";
+import { n as toast } from "../_libs/sonner.mjs";
+import { i as TabsTrigger, n as TabsContent, r as TabsList, t as Tabs$1 } from "./tabs-trDcbRkT.mjs";
+import { a as SelectItem, i as SelectGroup, n as Select$1, o as SelectTrigger, r as SelectContent, s as SelectValue, t as PlatformIcon } from "./select-DkzM2miy.mjs";
+import { i as InputGroupInput, n as InputGroupAddon, o as Textarea, r as InputGroupButton, t as InputGroup } from "./input-group-Dx-MEkNM.mjs";
+import { i as useChannelsQuery } from "./api-C-Il5-sa.mjs";
+import { t as Switch$1 } from "./switch-BqJ2mAwC.mjs";
+import { n as require_dayjs_min, t as require_relativeTime } from "../_libs/dayjs.mjs";
+//#region node_modules/.nitro/vite/services/ssr/assets/remote-config-D2GmbGwI.js
+var import_react = /* @__PURE__ */ __toESM(require_react());
+var import_jsx_runtime = require_jsx_runtime();
+var import_dayjs_min = /* @__PURE__ */ __toESM(require_dayjs_min());
+var import_relativeTime = /* @__PURE__ */ __toESM(require_relativeTime());
+/** Remote Config, once the console's access check and the feature guard pass. */
+var field = (input, key) => typeof input === "object" && input !== null ? Reflect.get(input, key) : void 0;
+var versionNumber = (value, name) => {
+	if (typeof value !== "number" || !Number.isSafeInteger(value) || value < 0) throw new TypeError(`${name} must be a non-negative integer.`);
+	return value;
+};
+var parseCursor = (input) => {
+	const cursor = field(input, "cursor");
+	if (cursor !== void 0 && typeof cursor !== "string") throw new TypeError("cursor must be text.");
+	return cursor === void 0 ? {} : { cursor };
+};
+var parseVersion = (input) => ({ version: versionNumber(field(input, "version"), "version") });
+var parsePublish = (input) => {
+	const description = field(input, "description");
+	if (description !== void 0 && typeof description !== "string") throw new TypeError("description must be text.");
+	return {
+		template: field(input, "template"),
+		baseVersion: versionNumber(field(input, "baseVersion"), "baseVersion"),
+		...description === void 0 ? {} : { description }
+	};
+};
+var parseRollback = (input) => ({
+	version: versionNumber(field(input, "version"), "version"),
+	baseVersion: versionNumber(field(input, "baseVersion"), "baseVersion")
+});
+var CONTEXT_FIELDS = [
+	"platform",
+	"appVersion",
+	"channel",
+	"cohort",
+	"fingerprintHash"
+];
+var parsePreview = (input) => {
+	const raw = field(input, "context");
+	const context = {};
+	for (const key of CONTEXT_FIELDS) {
+		const value = field(raw, key);
+		if (typeof value === "string" && value.trim().length > 0) context[key] = value.trim();
+	}
+	if (context.platform !== void 0 && context.platform !== "ios" && context.platform !== "android") throw new TypeError("platform must be \"ios\" or \"android\".");
+	const now = field(raw, "now");
+	if (now !== void 0 && (typeof now !== "number" || !Number.isFinite(now))) throw new TypeError("now must be a time in milliseconds since the epoch.");
+	return {
+		template: field(input, "template"),
+		context: {
+			...context,
+			now: now ?? Date.now()
+		}
+	};
+};
+var getRemoteConfigRpc = createServerFn({ method: "GET" }).middleware([consoleAccess]).handler(createSsrRpc("0ccfae64b399b03d820328fa98a38e2caa0b622d3da5a7ca633c5a0e8101e3f6"));
+var listRemoteConfigVersionsRpc = createServerFn({ method: "GET" }).middleware([consoleAccess]).validator(parseCursor).handler(createSsrRpc("3377db68b9d1d971971595469029c0466da0777a177b294d655cd0c039737f1a"));
+var getRemoteConfigVersionRpc = createServerFn({ method: "GET" }).middleware([consoleAccess]).validator(parseVersion).handler(createSsrRpc("af71e3c55a659ce46093e33b9d70e729359610eec7d576502e8f0e26c785b317"));
+var publishRemoteConfigRpc = createServerFn({ method: "POST" }).middleware([consoleAccess]).validator(parsePublish).handler(createSsrRpc("4182bf9ccbb675700638f30bc6122517ccd90b16a339a6823a0f5f6c808d70a6"));
+var rollbackRemoteConfigRpc = createServerFn({ method: "POST" }).middleware([consoleAccess]).validator(parseRollback).handler(createSsrRpc("98c10bdc514eb4d3fe65af546be44452b492a81092cfe45625778a4c9f731727"));
+/** What a device with `context` would receive from a template, published or not. */
+var previewRemoteConfigRpc = createServerFn({ method: "POST" }).middleware([consoleAccess]).validator(parsePreview).handler(createSsrRpc("1371bff16085636e2c44b60a573ae434b556c63045c40a0a93a93ab69ec47999"));
+var remoteConfigQueryKeys = {
+	all: ["remote-config"],
+	active: ["remote-config", "active"],
+	versions: ["remote-config", "versions"],
+	version: (version) => [
+		"remote-config",
+		"version",
+		version
+	],
+	preview: (input) => [
+		"remote-config",
+		"preview",
+		input
+	]
+};
+/** The published template, read once a visit unless a publish changes it. */
+var useRemoteConfigQuery = () => useQuery({
+	queryKey: remoteConfigQueryKeys.active,
+	queryFn: () => getRemoteConfigRpc(),
+	staleTime: 6e4
+});
+/** Published versions, newest first, a page at a time. */
+var useRemoteConfigVersionsQuery = ({ enabled }) => useInfiniteQuery({
+	queryKey: remoteConfigQueryKeys.versions,
+	queryFn: ({ pageParam }) => listRemoteConfigVersionsRpc({ data: pageParam === void 0 ? {} : { cursor: pageParam } }),
+	initialPageParam: void 0,
+	getNextPageParam: (page) => page.next,
+	staleTime: 6e4,
+	enabled
+});
+/** One version with its template; a version never changes once published. */
+var useRemoteConfigVersionQuery = (version) => useQuery({
+	queryKey: remoteConfigQueryKeys.version(version ?? 0),
+	queryFn: () => getRemoteConfigVersionRpc({ data: { version } }),
+	enabled: version !== null,
+	staleTime: Infinity
+});
+var useRefreshAfterPublish = () => {
+	const queryClient = useQueryClient();
+	return async () => {
+		await Promise.all([queryClient.invalidateQueries({ queryKey: remoteConfigQueryKeys.active }), queryClient.invalidateQueries({ queryKey: remoteConfigQueryKeys.versions })]);
+	};
+};
+var usePublishRemoteConfigMutation = () => {
+	const refresh = useRefreshAfterPublish();
+	return useMutation({
+		mutationFn: (input) => publishRemoteConfigRpc({ data: input }),
+		onSuccess: async (result) => {
+			if (result.status === "published" || result.status === "conflict") await refresh();
+		}
+	});
+};
+var useRollbackRemoteConfigMutation = () => {
+	return useMutation({
+		mutationFn: (input) => rollbackRemoteConfigRpc({ data: input }),
+		onSuccess: useRefreshAfterPublish()
+	});
+};
+/** A device's view of the draft, kept on screen while the next one loads. */
+var useRemoteConfigPreviewQuery = (input) => useQuery({
+	queryKey: remoteConfigQueryKeys.preview(input),
+	queryFn: () => previewRemoteConfigRpc({ data: input }),
+	placeholderData: keepPreviousData,
+	staleTime: Infinity
+});
+var VALUE_TYPE_LABELS = {
+	STRING: "String",
+	NUMBER: "Number",
+	BOOLEAN: "Boolean",
+	JSON: "JSON"
+};
+var RULE_TYPE_LABELS = {
+	platform: "Platform",
+	channel: "Channel",
+	appVersion: "App version",
+	percent: "Percentage of installs",
+	cohort: "Cohort",
+	fingerprint: "Fingerprint",
+	dateTime: "Date and time"
+};
+/**
+* A parameter's value for a condition. Condition names come from users, so
+* `constructor` must name theirs, never Object.prototype's.
+*/
+var conditionalValueFor = (values, name) => values !== void 0 && Object.hasOwn(values, name) ? values[name] : void 0;
+/** Whether two templates publish the same thing. */
+var isSameTemplate = (left, right) => JSON.stringify(left) === JSON.stringify(right);
+/** Adds a parameter, or replaces `previousKey`'s in its place. */
+var upsertParameter = (template, previousKey, key, parameter) => {
+	const entries = Object.entries(template.parameters);
+	const index = previousKey === null ? -1 : entries.findIndex(([existing]) => existing === previousKey);
+	const next = index === -1 ? [...entries.filter(([existing]) => existing !== key), [key, parameter]] : entries.map((entry, position) => position === index ? [key, parameter] : entry);
+	return {
+		...template,
+		parameters: Object.fromEntries(next)
+	};
+};
+var removeParameter = (template, key) => ({
+	...template,
+	parameters: Object.fromEntries(Object.entries(template.parameters).filter(([existing]) => existing !== key))
+});
+/** Every parameter's conditional values, with `rename` applied to their condition names. */
+var mapConditionalValues = (template, rename) => Object.fromEntries(Object.entries(template.parameters).map(([key, parameter]) => {
+	const { conditionalValues, ...rest } = parameter;
+	const kept = Object.entries(conditionalValues ?? {}).flatMap(([name, value]) => {
+		const next = rename(name);
+		return next === null ? [] : [[next, value]];
+	});
+	return [key, kept.length === 0 ? rest : {
+		...rest,
+		conditionalValues: Object.fromEntries(kept)
+	}];
+}));
+/**
+* Adds a condition last, or replaces `previousName`'s in its place; a
+* rename carries the parameters' values for it to the new name.
+*/
+var upsertCondition = (template, previousName, condition) => {
+	if (previousName === null) return {
+		...template,
+		conditions: [...template.conditions, condition]
+	};
+	return {
+		conditions: template.conditions.map((existing) => existing.name === previousName ? condition : existing),
+		parameters: previousName === condition.name ? template.parameters : mapConditionalValues(template, (name) => name === previousName ? condition.name : name)
+	};
+};
+/** Removes a condition and every parameter's value for it. */
+var removeCondition = (template, name) => ({
+	conditions: template.conditions.filter((condition) => condition.name !== name),
+	parameters: mapConditionalValues(template, (existing) => existing === name ? null : existing)
+});
+/** Moves a condition up (`-1`) or down (`1`) in priority. */
+var moveCondition = (template, index, offset) => {
+	const target = index + offset;
+	if (target < 0 || target >= template.conditions.length) return template;
+	const conditions = [...template.conditions];
+	[conditions[index], conditions[target]] = [conditions[target], conditions[index]];
+	return {
+		...template,
+		conditions
+	};
+};
+/** The parameters that give a condition a value. */
+var parametersUsing = (template, name) => Object.entries(template.parameters).filter(([, parameter]) => conditionalValueFor(parameter.conditionalValues, name) !== void 0).map(([key]) => key);
+var listText = (values, limit = 3) => values.length <= limit ? values.join(", ") : `${values.slice(0, limit).join(", ")} +${values.length - limit}`;
+var percentText = (value) => Number.isInteger(value) ? String(value) : value.toFixed(1);
+/** Dates in English with their offset, as Insights shows them. */
+var createDateTimeText = (timeZone) => {
+	const format = new Intl.DateTimeFormat("en", {
+		timeZone,
+		timeZoneName: timeZone === "UTC" ? "short" : "shortOffset",
+		year: "numeric",
+		month: "short",
+		day: "numeric",
+		hour: "2-digit",
+		minute: "2-digit",
+		hourCycle: "h23"
+	});
+	return (iso) => format.format(new Date(iso));
+};
+/** The server renders in UTC; the page switches to the viewer's zone once mounted. */
+var UTC_DATE_TIME_TEXT = createDateTimeText("UTC");
+/** The quick choices for a rule's start, as UTC instants. */
+var startPresets = (now = /* @__PURE__ */ new Date()) => {
+	const nextHour = new Date(now);
+	nextHour.setMinutes(60, 0, 0);
+	const tomorrow = new Date(now);
+	tomorrow.setDate(tomorrow.getDate() + 1);
+	tomorrow.setHours(9, 0, 0, 0);
+	const minute = new Date(now);
+	minute.setSeconds(0, 0);
+	return [
+		{
+			label: "Now",
+			iso: minute.toISOString()
+		},
+		{
+			label: "Next hour",
+			iso: nextHour.toISOString()
+		},
+		{
+			label: "Tomorrow 09:00",
+			iso: tomorrow.toISOString()
+		}
+	];
+};
+/** The quick choices for a rule's end, counted from its start or from now. */
+var endPresets = (from, now = /* @__PURE__ */ new Date()) => {
+	const start = from === void 0 ? now : new Date(from);
+	const after = (days) => {
+		const end = new Date(start);
+		end.setDate(end.getDate() + days);
+		end.setSeconds(0, 0);
+		return end.toISOString();
+	};
+	return [{
+		label: "+1 day",
+		iso: after(1)
+	}, {
+		label: "+1 week",
+		iso: after(7)
+	}];
+};
+/** An instant as a `datetime-local` input shows it, in the viewer's time zone. */
+var toLocalDateTimeInput = (iso) => {
+	if (iso === void 0) return "";
+	const date = new Date(iso);
+	const pad = (value) => String(value).padStart(2, "0");
+	return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+};
+/** A `datetime-local` input's value, in the viewer's time zone, as a UTC instant. */
+var fromLocalDateTimeInput = (value) => {
+	if (value.length === 0) return void 0;
+	const ms = new Date(value).getTime();
+	return Number.isFinite(ms) ? new Date(ms).toISOString() : void 0;
+};
+/** A rule in a few words, such as `Channel is beta, qa`. */
+var describeRule = (rule, dateTimeText = UTC_DATE_TIME_TEXT) => {
+	switch (rule.type) {
+		case "platform": return `Platform is ${listText(rule.platforms.map((platform) => platform === "ios" ? "iOS" : "Android"))}`;
+		case "channel": return `Channel is ${listText(rule.channels)}`;
+		case "appVersion": return `App version ${rule.range}`;
+		case "cohort": return `Cohort is ${listText(rule.cohorts)}`;
+		case "percent": return rule.from === 0 ? `${percentText(rule.to)}% of installs` : `${percentText(rule.from)}–${percentText(rule.to)}% of installs`;
+		case "fingerprint": return `Fingerprint is ${listText(rule.hashes.map((hash) => hash.slice(0, 8)))}`;
+		case "dateTime": return rule.from !== void 0 && rule.to !== void 0 ? `From ${dateTimeText(rule.from)} until ${dateTimeText(rule.to)}` : rule.from !== void 0 ? `From ${dateTimeText(rule.from)}` : `Until ${dateTimeText(rule.to ?? "")}`;
+	}
+};
+/** A value as the page shows it: its text, or the app's own default. */
+var describeValue = (value) => "value" in value ? value.value.length === 0 ? "\"\"" : value.value : "In-app default";
+/** A short random seed, so a new percentage rule picks its own installs. */
+var createSeed = () => {
+	const bytes = crypto.getRandomValues(new Uint8Array(6));
+	return Array.from(bytes, (byte) => byte.toString(36).padStart(2, "0")).join("").slice(0, 8);
+};
+var diffKeys = (base, draft) => ({
+	added: Object.keys(draft).filter((key) => !Object.hasOwn(base, key)),
+	changed: Object.keys(draft).filter((key) => Object.hasOwn(base, key) && JSON.stringify(base[key]) !== JSON.stringify(draft[key])),
+	removed: Object.keys(base).filter((key) => !Object.hasOwn(draft, key))
+});
+/** What a publish changes, for the publish dialog. */
+var summarizeChanges = (base, draft) => {
+	const byName = (template) => Object.fromEntries(template.conditions.map((condition) => [condition.name, condition]));
+	const kept = (template, other) => template.conditions.map(({ name }) => name).filter((name) => other.conditions.some((it) => it.name === name));
+	return {
+		parameters: diffKeys(base.parameters, draft.parameters),
+		conditions: diffKeys(byName(base), byName(draft)),
+		reordered: kept(base, draft).join("\n") !== kept(draft, base).join("\n")
+	};
+};
+var NOT_SET = "Not set";
+/** What changes in a parameter the draft changes, field by field. */
+var describeParameterChange = (before, after) => {
+	const changes = [];
+	const add = (field, from, to) => {
+		if (from !== to) changes.push({
+			field,
+			before: from,
+			after: to
+		});
+	};
+	add("Type", VALUE_TYPE_LABELS[before.valueType], VALUE_TYPE_LABELS[after.valueType]);
+	add("Default", describeValue(before.defaultValue), describeValue(after.defaultValue));
+	const conditionNames = new Set([...Object.keys(before.conditionalValues ?? {}), ...Object.keys(after.conditionalValues ?? {})]);
+	for (const name of conditionNames) {
+		const from = conditionalValueFor(before.conditionalValues, name);
+		const to = conditionalValueFor(after.conditionalValues, name);
+		add(`When ${name}`, from === void 0 ? NOT_SET : describeValue(from), to === void 0 ? NOT_SET : describeValue(to));
+	}
+	add("Description", before.description ?? NOT_SET, after.description ?? NOT_SET);
+	return changes;
+};
+/** What changes in a condition the draft changes: its rules. */
+var describeConditionChange = (before, after, dateTimeText = UTC_DATE_TIME_TEXT) => {
+	const rules = (condition) => condition.rules.map((rule) => describeRule(rule, dateTimeText)).join(" · ");
+	const from = rules(before);
+	const to = rules(after);
+	return from === to ? [] : [{
+		field: "Rules",
+		before: from,
+		after: to
+	}];
+};
+var DRAFT_STORAGE_KEY = "hot-updater:remote-config-draft";
+var isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var isParameterValueShape = (value) => isRecord(value) && (typeof value.value === "string" || value.useInAppDefault === true);
+/** Whether a stored value has a template's shape, so the page can render it. */
+var isTemplateShape = (value) => isRecord(value) && isRecord(value.parameters) && Array.isArray(value.conditions) && Object.values(value.parameters).every((parameter) => isRecord(parameter) && Object.hasOwn(VALUE_TYPE_LABELS, String(parameter.valueType)) && isParameterValueShape(parameter.defaultValue) && (parameter.conditionalValues === void 0 || isRecord(parameter.conditionalValues) && Object.values(parameter.conditionalValues).every(isParameterValueShape))) && value.conditions.every((condition) => isRecord(condition) && typeof condition.name === "string" && Array.isArray(condition.rules) && condition.rules.every((rule) => isRecord(rule) && Object.hasOwn(RULE_TYPE_LABELS, String(rule.type))));
+/**
+* The draft this browser kept for a server whose active version is
+* `published`, or null. Several projects' Consoles can share one origin, so
+* a draft comes back only onto the version and template it started from.
+*/
+var readStoredDraft = (published) => {
+	try {
+		const raw = window.localStorage.getItem(DRAFT_STORAGE_KEY);
+		if (raw === null) return null;
+		const stored = JSON.parse(raw);
+		if (!isRecord(stored) || stored.baseVersion !== published.version || !isTemplateShape(stored.base) || !isTemplateShape(stored.template) || !isSameTemplate(stored.base, published.template) || isSameTemplate(stored.template, published.template)) return null;
+		return {
+			baseVersion: published.version,
+			base: stored.base,
+			template: stored.template
+		};
+	} catch {
+		return null;
+	}
+};
+/** Keeps the draft in this browser, or forgets it; false when the browser refuses. */
+var storeDraft = (draft) => {
+	try {
+		if (draft === null) window.localStorage.removeItem(DRAFT_STORAGE_KEY);
+		else window.localStorage.setItem(DRAFT_STORAGE_KEY, JSON.stringify(draft));
+		return true;
+	} catch {
+		return false;
+	}
+};
+var PARAMETER_KEY_PATTERN = /^[A-Za-z_][A-Za-z0-9_]{0,255}$/u;
+/** Why a parameter key cannot be used, or null. */
+var parameterKeyError = (key, taken) => {
+	if (key.length === 0) return "Enter a key.";
+	if (!PARAMETER_KEY_PATTERN.test(key)) return "Start with a letter or _, then use letters, digits, and _.";
+	return taken.includes(key) ? "Another parameter uses this key." : null;
+};
+/** Why a value's text does not suit its type, or null. */
+var valueTextError = (valueType, text) => {
+	if (valueType === "NUMBER") return text.trim().length > 0 && Number.isFinite(Number(text)) ? null : "Enter a number.";
+	if (valueType === "JSON") try {
+		JSON.parse(text);
+		return null;
+	} catch {
+		return "Enter valid JSON.";
+	}
+	if (valueType === "BOOLEAN" && text !== "true" && text !== "false") return "Choose true or false.";
+	return null;
+};
+/**
+* A name for a condition saved without one: its rules in a few words, kept
+* within 100 characters and apart from the names in use.
+*/
+var suggestConditionName = (rules, taken, dateTimeText) => {
+	const text = rules.map((rule) => describeRule(rule, dateTimeText)).join(" · ");
+	const base = text.length <= 100 ? text : `${text.slice(0, 99).trimEnd()}…`;
+	if (base.length === 0 || !taken.includes(base)) return base;
+	for (let copy = 2;; copy += 1) {
+		const suffix = ` (${copy})`;
+		const name = `${base.slice(0, 100 - suffix.length)}${suffix}`;
+		if (!taken.includes(name)) return name;
+	}
+};
+/** Why a condition name cannot be used, or null. */
+var conditionNameError = (name, taken) => {
+	const trimmed = name.trim();
+	if (trimmed.length === 0) return "Enter a name.";
+	if (trimmed.length > 100) return "Use 100 characters or fewer.";
+	return taken.includes(trimmed) ? "Another condition uses this name." : null;
+};
+/** Splits a comma- or newline-separated list, without blanks or repeats. */
+var splitList = (text) => [...new Set(text.split(/[\n,]/u).map((entry) => entry.trim()).filter((entry) => entry.length > 0))];
+/** The problem with a rule, for its editor; null when the server would take it. */
+var ruleError = (rule) => {
+	switch (rule.type) {
+		case "platform": return rule.platforms.length === 0 ? "Choose a platform." : null;
+		case "channel": return rule.channels.length === 0 ? "Enter a channel." : null;
+		case "appVersion": return rule.range.trim().length === 0 ? "Enter a version range, such as >=1.4.0." : null;
+		case "cohort": return rule.cohorts.length === 0 ? "Enter a cohort." : null;
+		case "percent": return rule.from >= rule.to || rule.from < 0 || rule.to > 100 || Math.abs(rule.to * 10 - Math.round(rule.to * 10)) > 1e-9 || Math.abs(rule.from * 10 - Math.round(rule.from * 10)) > 1e-9 ? "Use a range from 0 to 100 in steps of 0.1." : null;
+		case "fingerprint": return rule.hashes.length === 0 ? "Enter a fingerprint." : null;
+		case "dateTime":
+			if (rule.from === void 0 && rule.to === void 0) return "Choose a start, an end, or both.";
+			return rule.from !== void 0 && rule.to !== void 0 && rule.from >= rule.to ? "End after the start." : null;
+	}
+};
+/** A new rule of a type, with sensible starting values. */
+var createRule = (type) => {
+	switch (type) {
+		case "platform": return {
+			type,
+			platforms: ["ios"]
+		};
+		case "channel": return {
+			type,
+			channels: []
+		};
+		case "appVersion": return {
+			type,
+			range: ""
+		};
+		case "cohort": return {
+			type,
+			cohorts: []
+		};
+		case "percent": return {
+			type,
+			seed: createSeed(),
+			from: 0,
+			to: 10
+		};
+		case "fingerprint": return {
+			type,
+			hashes: []
+		};
+		case "dateTime": return {
+			type,
+			from: startPresets()[1].iso
+		};
+	}
+};
+var toggleVariants = cva("group/toggle inline-flex items-center justify-center gap-1 rounded-md text-xs font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+	variants: {
+		variant: {
+			default: "bg-transparent",
+			outline: "border border-input bg-transparent hover:bg-muted"
+		},
+		size: {
+			default: "h-7 min-w-7 px-2 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+			sm: "h-6 min-w-6 rounded-[min(var(--radius-md),8px)] px-2 text-[0.625rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+			lg: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+var ToggleGroupContext = import_react.createContext({
+	size: "default",
+	variant: "default",
+	spacing: 2,
+	orientation: "horizontal"
+});
+function ToggleGroup$1({ className, variant, size, spacing = 2, orientation = "horizontal", children, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroup, {
+		"data-slot": "toggle-group",
+		"data-variant": variant,
+		"data-size": size,
+		"data-spacing": spacing,
+		"data-orientation": orientation,
+		style: { "--gap": spacing },
+		className: cn("group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-md data-[size=sm]:rounded-[min(var(--radius-md),8px)] data-vertical:flex-col data-vertical:items-stretch", className),
+		...props,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupContext.Provider, {
+			value: {
+				variant,
+				size,
+				spacing,
+				orientation
+			},
+			children
+		})
+	});
+}
+function ToggleGroupItem({ className, children, variant = "default", size = "default", ...props }) {
+	const context = import_react.useContext(ToggleGroupContext);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Toggle, {
+		"data-slot": "toggle-group-item",
+		"data-variant": context.variant || variant,
+		"data-size": context.size || size,
+		"data-spacing": context.spacing,
+		className: cn("shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t", toggleVariants({
+			variant: context.variant || variant,
+			size: context.size || size
+		}), className),
+		...props,
+		children
+	});
+}
+/**
+* Dates in the viewer's time zone, with its name. The server renders in UTC,
+* and the page switches once mounted, so both render the same first.
+*/
+function useDateTimeText() {
+	const [timeZone, setTimeZone] = (0, import_react.useState)("UTC");
+	(0, import_react.useEffect)(() => {
+		setTimeZone(Intl.DateTimeFormat().resolvedOptions().timeZone);
+	}, []);
+	return {
+		timeZone,
+		dateTimeText: (0, import_react.useMemo)(() => createDateTimeText(timeZone), [timeZone])
+	};
+}
+var RULE_TYPES = Object.keys(RULE_TYPE_LABELS);
+/** A list typed as text, kept as typed until it is saved. */
+function ListInput({ id, values, onChange, placeholder, multiline = false }) {
+	const [text, setText] = (0, import_react.useState)(values.join(", "));
+	const [shown, setShown] = (0, import_react.useState)(values);
+	if (shown !== values) {
+		setShown(values);
+		if (splitList(text).join("\n") !== values.join("\n")) setText(values.join(", "));
+	}
+	const update = (next) => {
+		setText(next);
+		onChange(splitList(next));
+	};
+	return multiline ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Textarea, {
+		className: "min-h-20 font-mono text-xs",
+		id,
+		onChange: (event) => update(event.target.value),
+		placeholder,
+		spellCheck: false,
+		value: text
+	}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
+		autoComplete: "off",
+		className: "min-h-11 sm:min-h-9",
+		id,
+		onChange: (event) => update(event.target.value),
+		placeholder,
+		value: text
+	});
+}
+/** One end of a date and time rule: a picker, a clear button, and quick choices. */
+function DateTimeField({ id, label, value, presets, onChange }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Field, { children: [
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldLabel, {
+			htmlFor: id,
+			children: label
+		}),
+		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(InputGroup, {
+			className: "h-11 sm:h-9",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputGroupInput, {
+				className: "h-11 tabular-nums sm:h-9",
+				id,
+				onChange: (event) => onChange(fromLocalDateTimeInput(event.target.value)),
+				type: "datetime-local",
+				value: toLocalDateTimeInput(value)
+			}), value === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputGroupAddon, {
+				align: "inline-end",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputGroupButton, {
+					"aria-label": `Clear ${label.toLowerCase()}`,
+					className: "size-11 sm:size-5",
+					onClick: () => onChange(void 0),
+					size: "icon-xs",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(X, {})
+				})
+			})]
+		}),
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "flex flex-wrap gap-1.5",
+			children: presets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
+				"aria-pressed": preset.iso === value,
+				className: "min-h-11 sm:min-h-6",
+				onClick: () => onChange(preset.iso),
+				size: "xs",
+				type: "button",
+				variant: preset.iso === value ? "secondary" : "outline",
+				children: preset.label
+			}, preset.label))
+		})
+	] });
+}
+function RuleFields({ rule, onChange }) {
+	const id = (0, import_react.useId)();
+	const channels = useChannelsQuery();
+	switch (rule.type) {
+		case "platform": return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroup$1, {
+			"aria-label": "Platforms",
+			multiple: true,
+			onValueChange: (values) => onChange({
+				...rule,
+				platforms: values.filter((value) => value === "ios" || value === "android")
+			}),
+			value: [...rule.platforms],
+			variant: "outline",
+			children: ["ios", "android"].map((platform) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ToggleGroupItem, {
+				className: "min-h-11 px-3 sm:min-h-8",
+				value: platform,
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlatformIcon, {
+					className: "size-3.5",
+					platform
+				}), platform === "ios" ? "iOS" : "Android"]
+			}, platform))
+		});
+		case "channel": {
+			const known = (channels.data ?? []).map(({ name }) => name).filter((channel) => !rule.channels.includes(channel));
+			return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col gap-2",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListInput, {
+					id: `${id}-channels`,
+					onChange: (next) => onChange({
+						...rule,
+						channels: next
+					}),
+					placeholder: "production, beta",
+					values: rule.channels
+				}), known.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex flex-wrap items-center gap-1.5",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "text-xs text-muted-foreground",
+						children: "Add:"
+					}), known.slice(0, 8).map((channel) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button$1, {
+						className: "min-h-11 sm:min-h-6",
+						onClick: () => onChange({
+							...rule,
+							channels: [...rule.channels, channel]
+						}),
+						size: "xs",
+						type: "button",
+						variant: "outline",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Plus, { "data-icon": "inline-start" }), channel]
+					}, channel))]
+				}) : null]
+			});
+		}
+		case "appVersion": return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
+			"aria-label": "App version range",
+			autoComplete: "off",
+			className: "min-h-11 font-mono sm:min-h-9",
+			onChange: (event) => onChange({
+				...rule,
+				range: event.target.value
+			}),
+			placeholder: ">=1.4.0",
+			value: rule.range
+		});
+		case "cohort": return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListInput, {
+			id: `${id}-cohorts`,
+			onChange: (next) => onChange({
+				...rule,
+				cohorts: next
+			}),
+			placeholder: "1, 2, beta-testers",
+			values: rule.cohorts
+		});
+		case "percent": return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "grid gap-2 sm:grid-cols-[repeat(2,minmax(0,8rem))_minmax(0,1fr)]",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Field, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldLabel, {
+					htmlFor: `${id}-from`,
+					children: "From %"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
+					className: "min-h-11 tabular-nums sm:min-h-9",
+					id: `${id}-from`,
+					inputMode: "decimal",
+					max: 100,
+					min: 0,
+					onChange: (event) => onChange({
+						...rule,
+						from: Number(event.target.value)
+					}),
+					step: .1,
+					type: "number",
+					value: rule.from
+				})] }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Field, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldLabel, {
+					htmlFor: `${id}-to`,
+					children: "To %"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
+					className: "min-h-11 tabular-nums sm:min-h-9",
+					id: `${id}-to`,
+					inputMode: "decimal",
+					max: 100,
+					min: 0,
+					onChange: (event) => onChange({
+						...rule,
+						to: Number(event.target.value)
+					}),
+					step: .1,
+					type: "number",
+					value: rule.to
+				})] }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Field, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldLabel, {
+					htmlFor: `${id}-seed`,
+					children: "Seed"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
+						autoComplete: "off",
+						className: "min-h-11 font-mono sm:min-h-9",
+						id: `${id}-seed`,
+						onChange: (event) => onChange({
+							...rule,
+							seed: event.target.value
+						}),
+						value: rule.seed
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
+						"aria-label": "New seed",
+						className: "size-11 sm:size-9",
+						onClick: () => onChange({
+							...rule,
+							seed: createSeed()
+						}),
+						size: "icon",
+						type: "button",
+						variant: "outline",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RefreshCw, {})
+					})]
+				})] })
+			]
+		});
+		case "fingerprint": return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListInput, {
+			id: `${id}-hashes`,
+			multiline: true,
+			onChange: (next) => onChange({
+				...rule,
+				hashes: next
+			}),
+			placeholder: "One fingerprint hash per line",
+			values: rule.hashes
+		});
+		case "dateTime": {
+			const change = (field, instant) => {
+				const { [field]: _previous, ...rest } = rule;
+				onChange(instant === void 0 ? rest : {
+					...rest,
+					[field]: instant
+				});
+			};
+			return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "grid gap-3 sm:grid-cols-2",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DateTimeField, {
+					id: `${id}-from`,
+					label: "From",
+					onChange: (instant) => change("from", instant),
+					presets: startPresets(),
+					value: rule.from
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DateTimeField, {
+					id: `${id}-until`,
+					label: "Until",
+					onChange: (instant) => change("to", instant),
+					presets: endPresets(rule.from),
+					value: rule.to
+				})]
+			});
+		}
+	}
+}
+var RULE_HINTS = {
+	platform: "Devices on any of these platforms.",
+	channel: "Devices on any of these channels, separated by commas.",
+	appVersion: "A semver range of native app versions, as release targets use: 2.x, >=1.4.0 <2.0.0.",
+	percent: "Installs whose numeric cohort lands in this share. Rules with one seed split the same order, so 0–10 and 10–20 never overlap.",
+	cohort: "Numeric cohorts from 1 to 1000, or custom cohort names.",
+	fingerprint: "Native builds with any of these fingerprints.",
+	dateTime: "Leave either end empty to keep it open. Devices get the change at their next fetch."
+};
+/** Adds or edits a condition: a name and the rules a device must all match. */
+function ConditionDialog({ open, onOpenChange, condition, takenNames, onSave }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog$1, {
+		onOpenChange,
+		open,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogContent, {
+			className: "max-h-[calc(100svh-2rem)] overflow-y-auto sm:max-w-xl",
+			children: open ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConditionForm, {
+				condition,
+				onCancel: () => onOpenChange(false),
+				onSave: (next) => {
+					onSave(next);
+					onOpenChange(false);
+				},
+				takenNames
+			}) : null
+		})
+	});
+}
+function ConditionForm({ condition, takenNames, onSave, onCancel }) {
+	const id = (0, import_react.useId)();
+	const { dateTimeText, timeZone } = useDateTimeText();
+	const [name, setName] = (0, import_react.useState)(condition?.name ?? "");
+	const [rules, setRules] = (0, import_react.useState)(condition === null ? [createRule("platform")] : [...condition.rules]);
+	const [submitted, setSubmitted] = (0, import_react.useState)(false);
+	const suggestedName = suggestConditionName(rules, takenNames, dateTimeText);
+	const savedName = name.trim().length === 0 ? suggestedName : name;
+	const nameError = conditionNameError(savedName, takenNames);
+	const ruleErrors = rules.map(ruleError);
+	const unused = RULE_TYPES.filter((type) => !rules.some((rule) => rule.type === type));
+	const invalid = nameError !== null || rules.length === 0 || ruleErrors.some((error) => error !== null);
+	const submit = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		setSubmitted(true);
+		if (invalid) return;
+		onSave({
+			name: savedName.trim(),
+			rules: rules.map((rule) => rule.type === "appVersion" ? {
+				...rule,
+				range: rule.range.trim()
+			} : rule)
+		});
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", {
+		className: "flex flex-col gap-4",
+		noValidate: true,
+		onSubmit: submit,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogHeader, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTitle, { children: condition === null ? "Add condition" : "Edit condition" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogDescription, { children: "A device matches when it matches every rule." })] }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FieldGroup, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Field, {
+				"data-invalid": submitted && nameError !== null || void 0,
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldLabel, {
+						htmlFor: `${id}-name`,
+						children: "Name"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
+						autoComplete: "off",
+						className: "min-h-11 sm:min-h-9",
+						id: `${id}-name`,
+						maxLength: 101,
+						onChange: (event) => setName(event.target.value),
+						placeholder: suggestedName || "Beta testers on iOS",
+						value: name
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldDescription, { children: "Optional: without one, it is named after its rules." }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldError, { children: submitted ? nameError : null })
+				]
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FieldSet, { children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldLegend, {
+					variant: "label",
+					children: "Rules"
+				}),
+				rules.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldError, { children: submitted ? "Add at least one rule." : null }) : null,
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", {
+					className: "flex flex-col gap-3",
+					children: rules.map((rule, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", {
+						className: "rounded-lg border p-3",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Field, {
+							"data-invalid": submitted && ruleErrors[index] !== null || void 0,
+							children: [
+								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+									className: "flex items-center justify-between gap-2",
+									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+										className: "text-sm font-medium",
+										children: RULE_TYPE_LABELS[rule.type]
+									}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
+										"aria-label": `Remove the ${RULE_TYPE_LABELS[rule.type].toLowerCase()} rule`,
+										className: "size-11 sm:size-7",
+										onClick: () => setRules(rules.filter((_, at) => at !== index)),
+										size: "icon-sm",
+										type: "button",
+										variant: "ghost",
+										children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Trash2, {})
+									})]
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(RuleFields, {
+									onChange: (next) => setRules(rules.map((existing, at) => at === index ? next : existing)),
+									rule
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldDescription, { children: rule.type === "dateTime" ? `In your time zone, ${timeZone}. ${RULE_HINTS.dateTime}` : RULE_HINTS[rule.type] }),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldError, { children: submitted ? ruleErrors[index] : null })
+							]
+						})
+					}, rule.type))
+				}),
+				unused.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Select$1, {
+					items: Object.fromEntries(unused.map((type) => [type, RULE_TYPE_LABELS[type]])),
+					onValueChange: (value) => {
+						if (value !== null) setRules([...rules, createRule(value)]);
+					},
+					value: null,
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SelectTrigger, {
+						"aria-label": "Add a rule",
+						className: "min-h-11 w-full sm:min-h-9 sm:w-56",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Plus, {
+							"aria-hidden": "true",
+							className: "size-3.5"
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectValue, { placeholder: "Add a rule" })]
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectGroup, { children: unused.map((type) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItem, {
+						value: type,
+						children: RULE_TYPE_LABELS[type]
+					}, type)) }) })]
+				}) : null
+			] })] }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogFooter, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
+				onClick: onCancel,
+				type: "button",
+				variant: "outline",
+				children: "Cancel"
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
+				type: "submit",
+				children: condition === null ? "Add condition" : "Save condition"
+			})] })
+		]
+	});
+}
+/** A condition's rules in a few words, unless its name already says them. */
+function RuleSummary({ condition, dateTimeText }) {
+	const text = condition.rules.map((rule) => describeRule(rule, dateTimeText)).join(" · ");
+	return text === condition.name ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+		className: "text-xs text-muted-foreground",
+		children: text
+	});
+}
+/** The draft's conditions in priority order: the first match decides a value. */
+function ConditionsCard({ template, onSaveCondition, onRemoveCondition, onMoveCondition }) {
+	const [editing, setEditing] = (0, import_react.useState)(null);
+	const [removing, setRemoving] = (0, import_react.useState)(null);
+	const { dateTimeText } = useDateTimeText();
+	const { conditions } = template;
+	const editingName = editing?.name ?? null;
+	const removingUsers = removing === null ? [] : parametersUsing(template, removing);
+	const remove = (name) => {
+		if (parametersUsing(template, name).length === 0) onRemoveCondition(name);
+		else setRemoving(name);
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Card, {
+		className: "overflow-hidden shadow-sm",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardHeader, {
+				className: "flex-row flex-wrap items-center justify-between gap-3 space-y-0 border-b px-4 py-3 sm:px-6",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardTitle, {
+						className: "text-sm",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Conditions" })
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardDescription, {
+						className: "text-xs",
+						children: "Listed by priority: when several match a device, the first wins."
+					})]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button$1, {
+					className: "min-h-11 sm:min-h-7",
+					onClick: () => setEditing({ name: null }),
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Plus, { "data-icon": "inline-start" }), "Add condition"]
+				})]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardContent, {
+				className: "p-0",
+				children: conditions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Empty, {
+					className: "py-10",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(EmptyHeader, { children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyMedia, {
+							variant: "icon",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GitBranch, {})
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyTitle, { children: "No conditions" }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyDescription, { children: "Add a condition to give some devices other values: a platform, channel, app version range, cohort, or a share of installs." })
+					] }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button$1, {
+						className: "min-h-11 sm:min-h-7",
+						onClick: () => setEditing({ name: null }),
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Plus, { "data-icon": "inline-start" }), "Add condition"]
+					}) })]
+				}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", {
+					"aria-label": "Conditions",
+					className: "divide-y",
+					children: conditions.map((condition, index) => {
+						const users = parametersUsing(template, condition.name);
+						return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", {
+							className: "grid gap-3 px-4 py-3 sm:px-6 md:grid-cols-[auto_minmax(0,1fr)_auto] md:items-center",
+							children: [
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									"aria-label": `Priority ${index + 1}`,
+									className: "flex size-6 items-center justify-center rounded-md bg-muted text-xs font-medium tabular-nums",
+									children: index + 1
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+									className: "min-w-0",
+									children: [
+										/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+											className: "truncate text-sm font-medium",
+											children: condition.name
+										}),
+										/* @__PURE__ */ (0, import_jsx_runtime.jsx)(RuleSummary, {
+											condition,
+											dateTimeText
+										}),
+										/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+											className: "mt-1 text-xs text-muted-foreground",
+											children: users.length === 0 ? "No parameter uses it yet" : `Sets ${users.length === 1 ? "1 parameter" : `${users.length} parameters`}: ${users.slice(0, 3).join(", ")}${users.length > 3 ? "…" : ""}`
+										})
+									]
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+									className: "flex flex-wrap gap-1 md:justify-end",
+									children: [
+										/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
+											"aria-label": `Move ${condition.name} up`,
+											className: "size-11 md:size-7",
+											disabled: index === 0,
+											onClick: () => onMoveCondition(index, -1),
+											size: "icon",
+											variant: "ghost",
+											children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowUp, {})
+										}),
+										/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
+											"aria-label": `Move ${condition.name} down`,
+											className: "size-11 md:size-7",
+											disabled: index === conditions.length - 1,
+											onClick: () => onMoveCondition(index, 1),
+											size: "icon",
+											variant: "ghost",
+											children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowDown, {})
+										}),
+										/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button$1, {
+											"aria-label": `Edit ${condition.name}`,
+											className: "min-h-11 md:min-h-7",
+											onClick: () => setEditing({ name: condition.name }),
+											size: "sm",
+											variant: "outline",
+											children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pencil, { "data-icon": "inline-start" }), "Edit"]
+										}),
+										/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
+											"aria-label": `Delete ${condition.name}`,
+											className: "size-11 md:size-7",
+											onClick: () => remove(condition.name),
+											size: "icon",
+											variant: "ghost",
+											children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Trash2, {})
+										})
+									]
+								})
+							]
+						}, condition.name);
+					})
+				})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConditionDialog, {
+				condition: editingName === null ? null : conditions.find(({ name }) => name === editingName) ?? null,
+				onOpenChange: (open) => {
+					if (!open) setEditing(null);
+				},
+				onSave: (condition) => onSaveCondition(editingName, condition),
+				open: editing !== null,
+				takenNames: conditions.map(({ name }) => name).filter((name) => name !== editingName)
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertDialog$1, {
+				onOpenChange: (open) => {
+					if (!open) setRemoving(null);
+				},
+				open: removing !== null,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AlertDialogContent, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AlertDialogHeader, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AlertDialogTitle, { children: [
+					"Delete ",
+					removing,
+					"?"
+				] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AlertDialogDescription, { children: [
+					removingUsers.length === 1 ? "1 parameter has a value for it" : `${removingUsers.length} parameters have a value for it`,
+					" ",
+					"(",
+					removingUsers.join(", "),
+					"). Those values are removed too, so matching devices get the default value after you publish."
+				] })] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AlertDialogFooter, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertDialogCancel, { children: "Cancel" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertDialogAction, {
+					onClick: (event) => {
+						event.preventDefault();
+						if (removing !== null) onRemoveCondition(removing);
+						setRemoving(null);
+					},
+					variant: "destructive",
+					children: "Delete condition"
+				})] })] })
+			})
+		]
+	});
+}
+/** A value's starting text for a type: what a new value of that type holds. */
+var initialValueText = (valueType) => valueType === "BOOLEAN" ? "false" : valueType === "NUMBER" ? "0" : valueType === "JSON" ? "{}" : "";
+/** The problem with a value, or null; an in-app default has none. */
+var parameterValueError = (valueType, value) => "value" in value ? valueTextError(valueType, value.value) : null;
+/**
+* Edits one value of a parameter, by its type, with the option to leave the
+* app's in-app default in place.
+*/
+function ValueInput({ id, label, valueType, value, onChange, showErrors }) {
+	const inAppDefault = !("value" in value);
+	const text = "value" in value ? value.value : "";
+	const error = showErrors ? parameterValueError(valueType, value) : null;
+	const setText = (next) => onChange({ value: next });
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Field, {
+		"data-invalid": error !== null || void 0,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex flex-wrap items-center justify-between gap-2",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldLabel, {
+					htmlFor: id,
+					id: `${id}-label`,
+					children: label
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex min-h-11 items-center gap-2 text-xs text-muted-foreground sm:min-h-0",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Switch$1, {
+						checked: inAppDefault,
+						id: `${id}-in-app-default`,
+						onCheckedChange: (checked) => onChange(checked ? { useInAppDefault: true } : { value: initialValueText(valueType) })
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
+						htmlFor: `${id}-in-app-default`,
+						children: "Use in-app default"
+					})]
+				})]
+			}),
+			inAppDefault ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
+				className: "rounded-md border border-dashed px-3 py-2 text-xs text-muted-foreground",
+				id,
+				children: [
+					"Devices keep the default set in the app's",
+					" ",
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("code", {
+						className: "font-mono",
+						children: [
+							"remoteConfig(",
+							"{ defaults }",
+							")"
+						]
+					}),
+					"."
+				]
+			}) : valueType === "BOOLEAN" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ToggleGroup$1, {
+				"aria-labelledby": `${id}-label`,
+				id,
+				onValueChange: (values) => {
+					const [next] = values;
+					if (next === "true" || next === "false") setText(next);
+				},
+				value: [text],
+				variant: "outline",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupItem, {
+					className: "min-h-11 px-4 sm:min-h-8",
+					value: "true",
+					children: "true"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupItem, {
+					className: "min-h-11 px-4 sm:min-h-8",
+					value: "false",
+					children: "false"
+				})]
+			}) : valueType === "NUMBER" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
+				autoComplete: "off",
+				className: "min-h-11 font-mono sm:min-h-9",
+				id,
+				inputMode: "decimal",
+				onChange: (event) => setText(event.target.value),
+				value: text
+			}) : valueType === "JSON" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col gap-2",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Textarea, {
+					className: "min-h-24 font-mono text-xs",
+					id,
+					onChange: (event) => setText(event.target.value),
+					spellCheck: false,
+					value: text
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button$1, {
+					className: "self-start",
+					disabled: valueTextError("JSON", text) !== null,
+					onClick: () => setText(JSON.stringify(JSON.parse(text), null, 2)),
+					size: "sm",
+					type: "button",
+					variant: "outline",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Braces, { "data-icon": "inline-start" }), "Format JSON"]
+				})]
+			}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Textarea, {
+				className: "min-h-11 text-sm sm:min-h-9",
+				id,
+				onChange: (event) => setText(event.target.value),
+				rows: 2,
+				value: text
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldError, { children: error })
+		]
+	});
+}
+var VALUE_TYPES = Object.keys(VALUE_TYPE_LABELS);
+/** How the app reads a value of each type; JSON arrives as text to parse. */
+var READ_METHODS = {
+	STRING: "getString",
+	NUMBER: "getNumber",
+	BOOLEAN: "getBoolean",
+	JSON: "getString"
+};
+/** A value converted to another type: kept when it still fits, reset when not. */
+var retype = (value, valueType) => "value" in value && parameterValueError(valueType, value) !== null ? { value: initialValueText(valueType) } : value;
+/**
+* Adds or edits a parameter: its key, type, default value, and a value for
+* any of the template's conditions, which it can also add on the spot.
+*/
+function ParameterDialog({ open, onOpenChange, parameterKey, parameter, takenKeys, conditions, onSave, onAddCondition }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog$1, {
+		onOpenChange,
+		open,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogContent, {
+			className: "max-h-[calc(100svh-2rem)] overflow-y-auto data-nested-dialog-open:after:absolute data-nested-dialog-open:after:inset-0 data-nested-dialog-open:after:rounded-xl data-nested-dialog-open:after:bg-background/70 sm:max-w-2xl",
+			children: open ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ParameterForm, {
+				conditions,
+				onAddCondition,
+				onCancel: () => onOpenChange(false),
+				onSave: (key, next) => {
+					onSave(key, next);
+					onOpenChange(false);
+				},
+				parameter,
+				parameterKey,
+				takenKeys
+			}) : null
+		})
+	});
+}
+function ParameterForm({ parameterKey, parameter, takenKeys, conditions, onSave, onCancel, onAddCondition }) {
+	const id = (0, import_react.useId)();
+	const { dateTimeText } = useDateTimeText();
+	const [key, setKey] = (0, import_react.useState)(parameterKey ?? "");
+	const [valueType, setValueType] = (0, import_react.useState)(parameter?.valueType ?? "STRING");
+	const [description, setDescription] = (0, import_react.useState)(parameter?.description ?? "");
+	const descriptionTooLong = description.trim().length > 256;
+	const [defaultValue, setDefaultValue] = (0, import_react.useState)(parameter?.defaultValue ?? { value: "" });
+	const [conditionalValues, setConditionalValues] = (0, import_react.useState)(parameter?.conditionalValues ?? {});
+	const [submitted, setSubmitted] = (0, import_react.useState)(false);
+	const [addingCondition, setAddingCondition] = (0, import_react.useState)(false);
+	const keyError = parameterKeyError(key.trim(), takenKeys);
+	const valued = conditions.filter(({ name }) => conditionalValueFor(conditionalValues, name) !== void 0);
+	const unvalued = conditions.filter(({ name }) => conditionalValueFor(conditionalValues, name) === void 0);
+	const invalid = keyError !== null || descriptionTooLong || [defaultValue, ...Object.values(conditionalValues)].some((value) => parameterValueError(valueType, value) !== null);
+	const changeType = (next) => {
+		setValueType(next);
+		setDefaultValue(retype(defaultValue, next));
+		setConditionalValues(Object.fromEntries(Object.entries(conditionalValues).map(([name, value]) => [name, retype(value, next)])));
+	};
+	const addValueFor = (name) => setConditionalValues({
+		...conditionalValues,
+		[name]: { value: initialValueText(valueType) }
+	});
+	const submit = (event) => {
+		event.preventDefault();
+		setSubmitted(true);
+		if (invalid) return;
+		const kept = Object.fromEntries(valued.map(({ name }) => [name, conditionalValueFor(conditionalValues, name)]));
+		onSave(key.trim(), {
+			valueType,
+			defaultValue,
+			...Object.keys(kept).length === 0 ? {} : { conditionalValues: kept },
+			...description.trim().length === 0 ? {} : { description: description.trim() }
+		});
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", {
+		className: "flex flex-col gap-4",
+		noValidate: true,
+		onSubmit: submit,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogHeader, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTitle, { children: parameterKey === null ? "Add parameter" : "Edit parameter" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogDescription, { children: [
+				"The app reads it with",
+				" ",
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("code", {
+					className: "font-mono",
+					children: [
+						"hotUpdater.remoteConfig.",
+						READ_METHODS[valueType],
+						"(\"",
+						key.trim() || "key",
+						"\")"
+					]
+				}),
+				", which is null when neither the server nor the app's defaults have a value."
+			] })] }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FieldGroup, { children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "grid gap-4 sm:grid-cols-[minmax(0,1fr)_11rem]",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Field, {
+						"data-invalid": submitted && keyError !== null || void 0,
+						children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldLabel, {
+								htmlFor: `${id}-key`,
+								children: "Key"
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
+								autoComplete: "off",
+								className: "min-h-11 font-mono sm:min-h-9",
+								id: `${id}-key`,
+								maxLength: 257,
+								onChange: (event) => setKey(event.target.value),
+								placeholder: "welcome_message",
+								spellCheck: false,
+								value: key
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldError, { children: submitted ? keyError : null })
+						]
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Field, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldLabel, {
+						htmlFor: `${id}-type`,
+						children: "Type"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Select$1, {
+						items: VALUE_TYPE_LABELS,
+						onValueChange: (value) => {
+							if (value !== null) changeType(value);
+						},
+						value: valueType,
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectTrigger, {
+							className: "min-h-11 w-full sm:min-h-9",
+							id: `${id}-type`,
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectValue, {})
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectGroup, { children: VALUE_TYPES.map((type) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItem, {
+							value: type,
+							children: VALUE_TYPE_LABELS[type]
+						}, type)) }) })]
+					})] })]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Field, {
+					"data-invalid": descriptionTooLong || void 0,
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldLabel, {
+							htmlFor: `${id}-description`,
+							children: "Description"
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
+							autoComplete: "off",
+							className: "min-h-11 sm:min-h-9",
+							id: `${id}-description`,
+							onChange: (event) => setDescription(event.target.value),
+							placeholder: "Optional: what the app does with it",
+							value: description
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldError, { children: descriptionTooLong ? "Use 256 characters or fewer." : null })
+					]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ValueInput, {
+					id: `${id}-default`,
+					label: "Default value",
+					onChange: setDefaultValue,
+					showErrors: submitted,
+					value: defaultValue,
+					valueType
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FieldSet, { children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldLegend, {
+						variant: "label",
+						children: "Conditional values"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldDescription, { children: "Devices that match a condition get its value. When several match, the first in the Conditions list wins." }),
+					valued.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", {
+						className: "flex flex-col gap-3",
+						children: valued.map((condition) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", {
+							className: "rounded-lg border p-3",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+								className: "mb-2 flex items-start justify-between gap-2",
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+									className: "min-w-0",
+									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+										className: "truncate text-sm font-medium",
+										children: condition.name
+									}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RuleSummary, {
+										condition,
+										dateTimeText
+									})]
+								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
+									"aria-label": `Remove the value for ${condition.name}`,
+									className: "size-11 sm:size-7",
+									onClick: () => {
+										const { [condition.name]: _removed, ...rest } = conditionalValues;
+										setConditionalValues(rest);
+									},
+									size: "icon-sm",
+									type: "button",
+									variant: "ghost",
+									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Trash2, {})
+								})]
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ValueInput, {
+								id: `${id}-${condition.name}`,
+								label: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: ["Value", /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+									className: "sr-only",
+									children: [" for ", condition.name]
+								})] }),
+								onChange: (value) => setConditionalValues({
+									...conditionalValues,
+									[condition.name]: value
+								}),
+								showErrors: submitted,
+								value: conditionalValueFor(conditionalValues, condition.name),
+								valueType
+							})]
+						}, condition.name))
+					}) : null,
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: "flex flex-wrap gap-2",
+						children: [unvalued.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Select$1, {
+							items: Object.fromEntries(unvalued.map(({ name }) => [name, name])),
+							onValueChange: (value) => {
+								if (value !== null) addValueFor(value);
+							},
+							value: null,
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SelectTrigger, {
+								"aria-label": "Add a value for a condition",
+								className: "min-h-11 w-full sm:min-h-9 sm:w-64",
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Plus, {
+									"aria-hidden": "true",
+									className: "size-3.5"
+								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectValue, { placeholder: "Add a value for a condition" })]
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectGroup, { children: unvalued.map(({ name }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItem, {
+								value: name,
+								children: name
+							}, name)) }) })]
+						}) : null, /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button$1, {
+							className: "min-h-11 sm:min-h-9",
+							onClick: () => setAddingCondition(true),
+							type: "button",
+							variant: "outline",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Plus, { "data-icon": "inline-start" }), "New condition"]
+						})]
+					})
+				] })
+			] }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogFooter, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
+				onClick: onCancel,
+				type: "button",
+				variant: "outline",
+				children: "Cancel"
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
+				type: "submit",
+				children: parameterKey === null ? "Add parameter" : "Save parameter"
+			})] })
+		]
+	}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConditionDialog, {
+		condition: null,
+		onOpenChange: setAddingCondition,
+		onSave: (condition) => {
+			onAddCondition(condition);
+			addValueFor(condition.name);
+		},
+		open: addingCondition,
+		takenNames: conditions.map(({ name }) => name)
+	})] });
+}
+/** A value's text in one line, as the list shows it. */
+function ValueText({ text }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+		className: "block min-w-0 truncate font-mono text-xs text-foreground",
+		title: text,
+		children: text
+	});
+}
+function ParameterRow({ parameterKey, parameter, conditions, onEdit, onRemove }) {
+	const conditional = conditions.filter(({ name }) => conditionalValueFor(parameter.conditionalValues, name) !== void 0);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", {
+		className: "grid gap-3 px-4 py-3 sm:px-6 md:grid-cols-[minmax(0,15rem)_minmax(0,1fr)_auto] md:items-start",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex min-w-0 items-center gap-2",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "truncate font-mono text-sm font-medium",
+						children: parameterKey
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, {
+						className: "shrink-0",
+						variant: "outline",
+						children: VALUE_TYPE_LABELS[parameter.valueType]
+					})]
+				}), parameter.description === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+					className: "mt-1 text-xs text-muted-foreground",
+					children: parameter.description
+				})]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("dl", {
+				className: "grid min-w-0 grid-cols-[minmax(0,7rem)_minmax(0,1fr)] gap-x-3 gap-y-1.5 text-xs",
+				children: [
+					conditional.map(({ name }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: "contents",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("dt", {
+							className: "truncate text-muted-foreground",
+							title: name,
+							children: name
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dd", {
+							className: "min-w-0",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ValueText, { text: describeValue(conditionalValueFor(parameter.conditionalValues, name)) })
+						})]
+					}, name)),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("dt", {
+						className: "text-muted-foreground",
+						children: "Default"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("dd", {
+						className: "min-w-0",
+						children: "value" in parameter.defaultValue ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ValueText, { text: describeValue(parameter.defaultValue) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: "text-muted-foreground",
+							children: "In-app default"
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex gap-1 md:justify-end",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button$1, {
+					"aria-label": `Edit ${parameterKey}`,
+					className: "min-h-11 md:min-h-7",
+					onClick: onEdit,
+					size: "sm",
+					variant: "outline",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pencil, { "data-icon": "inline-start" }), "Edit"]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
+					"aria-label": `Delete ${parameterKey}`,
+					className: "size-11 md:size-7",
+					onClick: onRemove,
+					size: "icon",
+					variant: "ghost",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Trash2, {})
+				})]
+			})
+		]
+	});
+}
+/** The draft's parameters, with what each device gets for them. */
+function ParametersCard({ template, onSaveParameter, onRemoveParameter, onAddCondition }) {
+	const [editing, setEditing] = (0, import_react.useState)(null);
+	const [filter, setFilter] = (0, import_react.useState)("");
+	const keys = Object.keys(template.parameters);
+	const shown = keys.filter((key) => key.toLowerCase().includes(filter.trim().toLowerCase()));
+	const editingKey = editing?.key ?? null;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Card, {
+		className: "overflow-hidden shadow-sm",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardHeader, {
+				className: "flex-row flex-wrap items-center justify-between gap-3 space-y-0 border-b px-4 py-3 sm:px-6",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardTitle, {
+					className: "text-sm",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Parameters" })
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex w-full flex-wrap gap-2 sm:w-auto",
+					children: [keys.length > 5 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(InputGroup, {
+						className: "min-h-11 w-full sm:min-h-8 sm:w-56",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputGroupAddon, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Search, { "aria-hidden": "true" }) }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputGroupInput, {
+							"aria-label": "Filter parameters by key",
+							className: "text-base sm:text-xs",
+							onChange: (event) => setFilter(event.target.value),
+							placeholder: "Filter by key",
+							value: filter
+						})]
+					}) : null, /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button$1, {
+						className: "min-h-11 sm:min-h-7",
+						onClick: () => setEditing({ key: null }),
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Plus, { "data-icon": "inline-start" }), "Add parameter"]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardContent, {
+				className: "p-0",
+				children: keys.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Empty, {
+					className: "py-10",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(EmptyHeader, { children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyMedia, {
+							variant: "icon",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SlidersHorizontal, {})
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyTitle, { children: "No parameters" }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyDescription, { children: "Add a parameter, give it a default, then publish to change the app without a new build." })
+					] }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button$1, {
+						className: "min-h-11 sm:min-h-7",
+						onClick: () => setEditing({ key: null }),
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Plus, { "data-icon": "inline-start" }), "Add parameter"]
+					}) })]
+				}) : shown.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex flex-col items-center gap-2 px-4 py-10 text-center text-xs text-muted-foreground",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+						className: "font-medium text-foreground",
+						children: "No matching keys"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
+						onClick: () => setFilter(""),
+						size: "sm",
+						variant: "outline",
+						children: "Clear filter"
+					})]
+				}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", {
+					"aria-label": "Parameters",
+					className: "divide-y",
+					children: shown.map((key) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ParameterRow, {
+						conditions: template.conditions,
+						onEdit: () => setEditing({ key }),
+						onRemove: () => onRemoveParameter(key),
+						parameter: template.parameters[key],
+						parameterKey: key
+					}, key))
+				})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ParameterDialog, {
+				conditions: template.conditions,
+				onAddCondition,
+				onOpenChange: (open) => {
+					if (!open) setEditing(null);
+				},
+				onSave: (key, parameter) => onSaveParameter(editingKey, key, parameter),
+				open: editing !== null,
+				parameter: editingKey === null ? null : template.parameters[editingKey] ?? null,
+				parameterKey: editingKey,
+				takenKeys: keys.filter((key) => key !== editingKey)
+			})
+		]
+	});
+}
+var INITIAL_DEVICE = {
+	platform: "ios",
+	channel: "production",
+	appVersion: "1.0.0",
+	cohort: "1",
+	fingerprintHash: "",
+	at: ""
+};
+/** The device after typing pauses, so each keystroke does not ask the server. */
+var useSettled = (value, delayMs = 300) => {
+	const [settled, setSettled] = (0, import_react.useState)(value);
+	(0, import_react.useEffect)(() => {
+		const timer = setTimeout(() => setSettled(value), delayMs);
+		return () => clearTimeout(timer);
+	}, [value, delayMs]);
+	return settled;
+};
+/** What a device with the context entered gets from the draft. */
+function PreviewCard({ template, isDraft }) {
+	const id = (0, import_react.useId)();
+	const [device, setDevice] = (0, import_react.useState)(INITIAL_DEVICE);
+	const { at, ...deviceContext } = useSettled(device);
+	const atInstant = fromLocalDateTimeInput(at);
+	const preview = useRemoteConfigPreviewQuery({
+		template,
+		context: {
+			...deviceContext,
+			...atInstant === void 0 ? {} : { now: Date.parse(atInstant) }
+		}
+	});
+	const keys = Object.keys(template.parameters);
+	const set = (field, value) => setDevice({
+		...device,
+		[field]: value
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Card, {
+		className: "overflow-hidden shadow-sm",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardHeader, {
+			className: "border-b px-4 py-3 sm:px-6",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardTitle, {
+				className: "text-sm",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Preview a device" })
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardDescription, {
+				className: "text-xs",
+				children: isDraft ? "The values this device would get once your changes are published, now or at the time you pick." : "The values this device gets from the active version, now or at the time you pick."
+			})]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardContent, {
+			className: "flex flex-col gap-4 p-4 sm:p-6",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "grid gap-3 sm:grid-cols-2 xl:grid-cols-3",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Field, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldLabel, {
+						htmlFor: `${id}-platform`,
+						children: "Platform"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Select$1, {
+						items: {
+							ios: "iOS",
+							android: "Android"
+						},
+						onValueChange: (value) => {
+							if (value === "ios" || value === "android") set("platform", value);
+						},
+						value: device.platform,
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectTrigger, {
+							className: "min-h-11 w-full sm:min-h-9",
+							id: `${id}-platform`,
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SelectValue, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlatformIcon, {
+								className: "size-3.5",
+								platform: device.platform
+							}), device.platform === "ios" ? "iOS" : "Android"] })
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SelectGroup, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SelectItem, {
+							value: "ios",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlatformIcon, {
+								className: "size-3.5",
+								platform: "ios"
+							}), "iOS"]
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SelectItem, {
+							value: "android",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlatformIcon, {
+								className: "size-3.5",
+								platform: "android"
+							}), "Android"]
+						})] }) })]
+					})] }),
+					[
+						[
+							"channel",
+							"Channel",
+							"production"
+						],
+						[
+							"appVersion",
+							"App version",
+							"1.0.0"
+						],
+						[
+							"cohort",
+							"Cohort",
+							"1-1000 or a name"
+						],
+						[
+							"fingerprintHash",
+							"Fingerprint",
+							"Optional"
+						]
+					].map(([field, label, placeholder]) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Field, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldLabel, {
+						htmlFor: `${id}-${field}`,
+						children: label
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
+						autoComplete: "off",
+						className: "min-h-11 text-base sm:min-h-9 sm:text-xs",
+						id: `${id}-${field}`,
+						onChange: (event) => set(field, event.target.value),
+						placeholder,
+						spellCheck: false,
+						value: device[field]
+					})] }, field)),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Field, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldLabel, {
+						htmlFor: `${id}-at`,
+						children: "Time"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(InputGroup, {
+						className: "h-11 sm:h-9",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputGroupInput, {
+							className: "h-11 text-base tabular-nums sm:h-9 sm:text-xs",
+							id: `${id}-at`,
+							onChange: (event) => set("at", event.target.value),
+							type: "datetime-local",
+							value: device.at
+						}), device.at.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputGroupAddon, {
+							align: "inline-end",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputGroupButton, {
+								className: "min-h-11 sm:min-h-6",
+								onClick: () => set("at", ""),
+								size: "xs",
+								children: "Now"
+							})
+						})]
+					})] })
+				]
+			}), keys.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Empty, {
+				className: "border py-8",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(EmptyHeader, { children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyMedia, {
+						variant: "icon",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Smartphone, {})
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyTitle, { children: "Nothing to preview" }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyDescription, { children: "Add a parameter, and its value for this device shows here." })
+				] })
+			}) : preview.data?.status === "invalid" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Alert, {
+				variant: "destructive",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TriangleAlert, {}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertTitle, { children: "The draft has problems to fix first" }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertDescription, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", {
+						className: "list-disc pl-4",
+						children: preview.data.issues.slice(0, 5).map((issue) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { children: [issue.path === "" ? "" : `${issue.path}: `, issue.message] }, `${issue.path}:${issue.message}`))
+					}) })
+				]
+			}) : preview.isError ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Alert, {
+				variant: "destructive",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TriangleAlert, {}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertTitle, { children: "The preview couldn't be loaded" }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertDescription, { children: "Check the connection, then change a field to try again." })
+				]
+			}) : preview.data === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col gap-2",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: "sr-only",
+					children: "Loading the preview"
+				}), keys.slice(0, 4).map((key) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-8 w-full" }, key))]
+			}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dl", {
+				"aria-busy": preview.isFetching || void 0,
+				className: "divide-y rounded-lg border",
+				children: keys.map((key) => {
+					const result = preview.data.status === "ok" ? preview.data.parameters[key] : void 0;
+					return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: "grid gap-1 px-3 py-2.5 sm:grid-cols-[minmax(0,14rem)_minmax(0,1fr)_auto] sm:items-center sm:gap-3",
+						children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("dt", {
+								className: "truncate font-mono text-xs font-medium",
+								children: key
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("dd", {
+								className: "min-w-0 truncate font-mono text-xs",
+								children: result === void 0 ? "…" : result.value === null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									className: "font-sans text-muted-foreground",
+									children: "In-app default"
+								}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									title: result.value,
+									children: result.value.length === 0 ? "\"\"" : result.value
+								})
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("dd", { children: result?.condition === void 0 ? null : result.condition === null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, {
+								variant: "outline",
+								children: "Default value"
+							}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, {
+								variant: "secondary",
+								children: result.condition
+							}) })
+						]
+					}, key);
+				})
+			})]
+		})]
+	});
+}
+/** A changed key, and each of its fields from before to after. */
+function ChangedKey({ name, fields }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", {
+		className: "min-w-0",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+			className: "break-words font-mono",
+			children: name
+		}), fields.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", {
+			className: "mt-0.5 flex flex-col gap-0.5",
+			children: fields.map((change) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", {
+				className: "flex min-w-0 flex-wrap items-center gap-x-1.5 text-muted-foreground",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: change.field }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "max-w-full truncate font-mono line-through decoration-muted-foreground/60",
+						title: change.before,
+						children: change.before
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowRight, {
+						"aria-hidden": "true",
+						className: "size-3 shrink-0"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "sr-only",
+						children: "to"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "max-w-full truncate font-mono text-foreground",
+						title: change.after,
+						children: change.after
+					})
+				]
+			}, change.field))
+		})]
+	});
+}
+function ChangeList({ label, changes, describe }) {
+	const rows = [
+		["Added", changes.added],
+		["Changed", changes.changed],
+		["Removed", changes.removed]
+	];
+	if (rows.every(([, keys]) => keys.length === 0)) return null;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+		className: "text-xs font-medium",
+		children: label
+	}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dl", {
+		className: "mt-1 grid grid-cols-[5rem_minmax(0,1fr)] gap-x-3 gap-y-1 text-xs",
+		children: rows.map(([title, keys]) => keys.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "contents",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("dt", {
+				className: "text-muted-foreground",
+				children: title
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dd", {
+				className: "min-w-0",
+				children: title === "Changed" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", {
+					className: "flex flex-col gap-1.5",
+					children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChangedKey, {
+						fields: describe(key),
+						name: key
+					}, key))
+				}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: "break-words font-mono",
+					children: keys.join(", ")
+				})
+			})]
+		}, title))
+	})] });
+}
+/** Publishes the draft as the next version, after a summary of what changes. */
+function PublishDialog({ open, onOpenChange, base, baseVersion, draft, onPublished, onLoadLatest, onPublishOver }) {
+	const id = (0, import_react.useId)();
+	const publish = usePublishRemoteConfigMutation();
+	const [description, setDescription] = (0, import_react.useState)("");
+	const [result, setResult] = (0, import_react.useState)(null);
+	const { dateTimeText } = useDateTimeText();
+	const changes = summarizeChanges(base, draft);
+	const describeParameter = (key) => {
+		const before = base.parameters[key];
+		const after = draft.parameters[key];
+		return before === void 0 || after === void 0 ? [] : describeParameterChange(before, after);
+	};
+	const describeCondition = (name) => {
+		const before = base.conditions.find((it) => it.name === name);
+		const after = draft.conditions.find((it) => it.name === name);
+		return before === void 0 || after === void 0 ? [] : describeConditionChange(before, after, dateTimeText);
+	};
+	const tooLong = description.trim().length > 256;
+	const close = (next) => {
+		if (publish.isPending) return;
+		onOpenChange(next);
+		if (!next) {
+			setResult(null);
+			publish.reset();
+		}
+	};
+	const submit = async (event) => {
+		event.preventDefault();
+		if (tooLong) return;
+		try {
+			const outcome = await publish.mutateAsync({
+				template: draft,
+				baseVersion,
+				...description.trim().length === 0 ? {} : { description: description.trim() }
+			});
+			setResult(outcome);
+			if (outcome.status === "published") {
+				toast.success(`Published version ${outcome.version.version}`);
+				setDescription("");
+				setResult(null);
+				onOpenChange(false);
+				onPublished();
+			}
+		} catch (error) {
+			toast.error(error instanceof Error ? error.message : "Unable to publish");
+		}
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog$1, {
+		onOpenChange: close,
+		open,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogContent, {
+			className: "max-h-[calc(100svh-2rem)] overflow-y-auto sm:max-w-lg",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", {
+				className: "flex flex-col gap-4",
+				noValidate: true,
+				onSubmit: submit,
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogHeader, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTitle, { children: "Publish changes" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogDescription, { children: [
+						"This becomes version ",
+						baseVersion + 1,
+						". Devices get its values on their next fetch; earlier versions stay available to roll back to."
+					] })] }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: "flex flex-col gap-3 rounded-lg border p-3",
+						children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChangeList, {
+								changes: changes.parameters,
+								describe: describeParameter,
+								label: "Parameters"
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChangeList, {
+								changes: changes.conditions,
+								describe: describeCondition,
+								label: "Conditions"
+							}),
+							changes.reordered ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+								className: "text-xs text-muted-foreground",
+								children: "Condition priority changed."
+							}) : null
+						]
+					}),
+					result?.status === "invalid" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Alert, {
+						variant: "destructive",
+						children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TriangleAlert, {}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertTitle, { children: "The server refused the template" }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertDescription, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", {
+								className: "list-disc pl-4",
+								children: result.issues.slice(0, 6).map((issue) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { children: [issue.path === "" ? "" : `${issue.path}: `, issue.message] }, `${issue.path}:${issue.message}`))
+							}) })
+						]
+					}) : null,
+					result?.status === "conflict" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Alert, { children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TriangleAlert, {}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AlertTitle, { children: [
+							"Version ",
+							result.currentVersion,
+							" was published while you edited"
+						] }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertDescription, { children: "Load it to review what changed, or publish yours after it, replacing its values." }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: "col-span-full mt-2 flex flex-wrap gap-2",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button$1, {
+								onClick: () => {
+									close(false);
+									onLoadLatest();
+								},
+								size: "sm",
+								type: "button",
+								variant: "outline",
+								children: ["Load version ", result.currentVersion]
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
+								onClick: () => {
+									onPublishOver(result.currentVersion);
+									setResult(null);
+								},
+								size: "sm",
+								type: "button",
+								variant: "ghost",
+								children: "Publish mine after it"
+							})]
+						})
+					] }) : null,
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Field, {
+						"data-invalid": tooLong || void 0,
+						children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldLabel, {
+								htmlFor: `${id}-description`,
+								children: "Description"
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
+								autoComplete: "off",
+								className: "min-h-11 sm:min-h-9",
+								id: `${id}-description`,
+								onChange: (event) => setDescription(event.target.value),
+								placeholder: "What changed and why",
+								value: description
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldDescription, { children: "Shown in the version history." }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldError, { children: tooLong ? "Use 256 characters or fewer." : null })
+						]
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogFooter, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
+						disabled: publish.isPending,
+						onClick: () => close(false),
+						type: "button",
+						variant: "outline",
+						children: "Cancel"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button$1, {
+						disabled: publish.isPending || result?.status === "conflict",
+						type: "submit",
+						children: [
+							publish.isPending ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoaderCircle, {
+								className: "animate-spin",
+								"data-icon": "inline-start"
+							}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Upload, { "data-icon": "inline-start" }),
+							"Publish version ",
+							baseVersion + 1
+						]
+					})] })
+				]
+			})
+		})
+	});
+}
+/** A publish time: the date and time, with the exact UTC time on hover. */
+function PublishedAt({ ms }) {
+	const date = new Date(ms);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("time", {
+		className: "tabular-nums",
+		dateTime: date.toISOString(),
+		title: `${date.toISOString().replace("T", " ").slice(0, 19)} UTC`,
+		children: (0, import_dayjs_min.default)(ms).format("YYYY/MM/DD HH:mm")
+	});
+}
+function VersionDialog({ version, onOpenChange }) {
+	const detail = useRemoteConfigVersionQuery(version);
+	const json = detail.data === null || detail.data === void 0 ? null : JSON.stringify(detail.data.template, null, 2);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog$1, {
+		onOpenChange,
+		open: version !== null,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogContent, {
+			className: "max-h-[calc(100svh-2rem)] grid-rows-[auto_minmax(0,1fr)] sm:max-w-2xl",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogHeader, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogTitle, { children: ["Version ", version] }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogDescription, { children: "The template as it was published, in the JSON the admin API takes." })] }), detail.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-48 w-full" }) : detail.isError ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Alert, {
+				variant: "destructive",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TriangleAlert, {}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertTitle, { children: "This version couldn't be loaded" }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertDescription, { children: "Check the connection and try again." }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertAction, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button$1, {
+						onClick: () => void detail.refetch(),
+						size: "xs",
+						variant: "outline",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(RefreshCw, { "data-icon": "inline-start" }), "Retry"]
+					}) })
+				]
+			}) : json === null ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
+				className: "text-sm text-muted-foreground",
+				children: [
+					"Version ",
+					version,
+					" no longer exists."
+				]
+			}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex min-h-0 flex-col gap-2",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", {
+					className: "min-h-0 overflow-auto rounded-md bg-muted p-3 font-mono text-xs",
+					children: json
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button$1, {
+					className: "self-end",
+					onClick: () => {
+						navigator.clipboard.writeText(json).then(() => toast.success("Template JSON copied"), () => toast.error("Unable to copy the template"));
+					},
+					size: "sm",
+					variant: "outline",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Clipboard, { "data-icon": "inline-start" }), "Copy JSON"]
+				})]
+			})]
+		})
+	});
+}
+/** Published versions, newest first, each viewable and restorable. */
+function VersionsCard({ activeVersion, hasDraft, onRolledBack, onStartEditing }) {
+	const versions = useRemoteConfigVersionsQuery({ enabled: true });
+	const rollback = useRollbackRemoteConfigMutation();
+	const [viewing, setViewing] = (0, import_react.useState)(null);
+	const [restoring, setRestoring] = (0, import_react.useState)(null);
+	const rows = versions.data?.pages.flatMap((page) => page.versions) ?? [];
+	const restore = async (event) => {
+		event.preventDefault();
+		if (restoring === null) return;
+		try {
+			const result = await rollback.mutateAsync({
+				version: restoring,
+				baseVersion: activeVersion
+			});
+			if (result.status === "published") {
+				toast.success(`Version ${result.version.version} restores version ${restoring}`);
+				onRolledBack();
+			} else if (result.status === "conflict") toast.error(`Version ${result.currentVersion} was published meanwhile. Review it, then roll back again.`);
+			else toast.error("That version no longer exists.");
+			setRestoring(null);
+		} catch (error) {
+			toast.error(error instanceof Error ? error.message : "Unable to roll back");
+		}
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Card, {
+		className: "overflow-hidden shadow-sm",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardHeader, {
+				className: "border-b px-4 py-3 sm:px-6",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardTitle, {
+					className: "text-sm",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Versions" })
+				})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardContent, {
+				className: "p-0",
+				children: versions.isError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "p-4",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Alert, {
+						variant: "destructive",
+						children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TriangleAlert, {}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertTitle, { children: "Versions couldn't be loaded" }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertDescription, { children: "Check the connection and try again." }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertAction, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button$1, {
+								onClick: () => void versions.refetch(),
+								size: "xs",
+								variant: "outline",
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(RefreshCw, { "data-icon": "inline-start" }), "Retry"]
+							}) })
+						]
+					})
+				}) : versions.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex flex-col gap-3 p-4 sm:p-6",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "sr-only",
+						children: "Loading versions"
+					}), Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-10 w-full" }, index))]
+				}) : rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Empty, {
+					className: "py-10",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(EmptyHeader, { children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyMedia, {
+							variant: "icon",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(History, {})
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyTitle, { children: "No versions yet" }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyDescription, { children: "Your first publish becomes version 1. Every publish after it is kept here, ready to roll back to." })
+					] }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
+						className: "min-h-11 sm:min-h-7",
+						onClick: onStartEditing,
+						children: "Add a parameter"
+					}) })]
+				}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", {
+					"aria-label": "Versions",
+					className: "divide-y",
+					children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", {
+						className: "grid gap-2 px-4 py-3 sm:px-6 md:grid-cols-[minmax(0,1fr)_auto] md:items-center",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+								className: "flex flex-wrap items-center gap-2",
+								children: [
+									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+										className: "text-sm font-medium tabular-nums",
+										children: ["Version ", row.version]
+									}),
+									row.version === activeVersion ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, { children: "Active" }) : null,
+									row.updateType === "ROLLBACK" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Badge, {
+										variant: "outline",
+										children: ["Rollback to v", row.rollbackSource]
+									}) : null
+								]
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
+								className: "mt-0.5 text-xs text-muted-foreground",
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PublishedAt, { ms: row.createdAtMs }), row.description === null ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [" · ", row.description] })]
+							})]
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: "flex gap-1 md:justify-end",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button$1, {
+								"aria-label": `View version ${row.version}`,
+								className: "min-h-11 md:min-h-7",
+								onClick: () => setViewing(row.version),
+								size: "sm",
+								variant: "ghost",
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Eye, { "data-icon": "inline-start" }), "View"]
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button$1, {
+								"aria-label": `Roll back to version ${row.version}`,
+								className: "min-h-11 md:min-h-7",
+								disabled: row.version === activeVersion,
+								onClick: () => setRestoring(row.version),
+								size: "sm",
+								variant: "outline",
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(RotateCcw, { "data-icon": "inline-start" }), "Roll back"]
+							})]
+						})]
+					}, row.version))
+				}), versions.hasNextPage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "border-t px-4 py-3 sm:px-6",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button$1, {
+						className: "min-h-11 w-full sm:min-h-7 sm:w-auto",
+						disabled: versions.isFetchingNextPage,
+						onClick: () => void versions.fetchNextPage(),
+						variant: "outline",
+						children: [versions.isFetchingNextPage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoaderCircle, {
+							className: "animate-spin",
+							"data-icon": "inline-start"
+						}) : null, "Load older versions"]
+					})
+				}) : null] })
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(VersionDialog, {
+				onOpenChange: (open) => {
+					if (!open) setViewing(null);
+				},
+				version: viewing
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertDialog$1, {
+				onOpenChange: (open) => {
+					if (!rollback.isPending && !open) setRestoring(null);
+				},
+				open: restoring !== null,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AlertDialogContent, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AlertDialogHeader, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AlertDialogTitle, { children: [
+					"Roll back to version ",
+					restoring,
+					"?"
+				] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AlertDialogDescription, { children: [
+					"Version ",
+					activeVersion + 1,
+					" will publish a copy of version",
+					" ",
+					restoring,
+					", and devices get its values on their next fetch.",
+					hasDraft ? " Your unpublished changes are discarded." : ""
+				] })] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AlertDialogFooter, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertDialogCancel, {
+					disabled: rollback.isPending,
+					children: "Cancel"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AlertDialogAction, {
+					disabled: rollback.isPending,
+					onClick: (event) => void restore(event),
+					children: [rollback.isPending ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoaderCircle, {
+						className: "animate-spin",
+						"data-icon": "inline-start"
+					}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RotateCcw, { "data-icon": "inline-start" }), "Roll back"]
+				})] })] })
+			})
+		]
+	});
+}
+import_dayjs_min.default.extend(import_relativeTime.default);
+var REMOTE_CONFIG_TABS = [
+	"parameters",
+	"conditions",
+	"preview",
+	"versions"
+];
+/**
+* Remote Config: edit the parameters and conditions of a draft, preview what
+* a device gets, publish the draft as a version, and roll back to an earlier
+* one.
+*/
+function RemoteConfigPage({ tab, onTabChange }) {
+	const active = useRemoteConfigQuery();
+	const [draft, setDraft] = (0, import_react.useState)(null);
+	const [restoreChecked, setRestoreChecked] = (0, import_react.useState)(false);
+	const [restored, setRestored] = (0, import_react.useState)(false);
+	const [publishing, setPublishing] = (0, import_react.useState)(false);
+	const published = active.data;
+	const template = draft?.template ?? published?.template;
+	const dirty = draft !== null && published !== void 0 && !isSameTemplate(draft.template, published.template);
+	const stale = dirty && published !== void 0 && draft.baseVersion !== published.version;
+	(0, import_react.useEffect)(() => {
+		if (restoreChecked || published === void 0) return;
+		setRestoreChecked(true);
+		const stored = readStoredDraft(published);
+		if (stored === null) return;
+		setDraft(stored);
+		setRestored(true);
+	}, [published, restoreChecked]);
+	(0, import_react.useEffect)(() => {
+		if (draft === null || !dirty || storeDraft(draft)) return;
+		const warn = (event) => event.preventDefault();
+		window.addEventListener("beforeunload", warn);
+		return () => window.removeEventListener("beforeunload", warn);
+	}, [draft, dirty]);
+	const clearDraft = () => {
+		setDraft(null);
+		setRestored(false);
+		storeDraft(null);
+	};
+	const edit = (change) => {
+		if (published === void 0 || template === void 0) return;
+		setRestored(false);
+		setDraft({
+			baseVersion: draft?.baseVersion ?? published.version,
+			base: draft?.base ?? published.template,
+			template: change(template)
+		});
+	};
+	const counts = {
+		parameters: template === void 0 ? null : Object.keys(template.parameters).length,
+		conditions: template?.conditions.length ?? null
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex h-svh min-h-0 flex-col",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", {
+				className: "sticky top-0 z-10 flex shrink-0 flex-wrap items-center gap-x-3 gap-y-2 border-b bg-background px-3 py-3 sm:min-h-12 sm:bg-card/70 sm:px-4 sm:backdrop-blur-sm",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SidebarTrigger, { className: "-ml-1 size-11 lg:size-7" }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: "flex items-center gap-1.5",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SlidersHorizontal, {
+							"aria-hidden": "true",
+							className: "size-3.5 text-muted-foreground"
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", {
+							className: "text-sm font-medium",
+							children: "Remote Config"
+						})]
+					}),
+					published === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+						className: "text-xs text-muted-foreground",
+						children: published.version === 0 ? "Nothing published yet" : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+							"Version ",
+							published.version,
+							published.updatedAtMs === null ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [" · published ", /* @__PURE__ */ (0, import_jsx_runtime.jsx)("time", {
+								dateTime: new Date(published.updatedAtMs).toISOString(),
+								title: (0, import_dayjs_min.default)(published.updatedAtMs).format("YYYY/MM/DD HH:mm:ss"),
+								children: (0, import_dayjs_min.default)(published.updatedAtMs).fromNow()
+							})] })
+						] })
+					}),
+					dirty ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: "ml-auto flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, {
+								className: "hidden sm:inline-flex",
+								variant: "secondary",
+								children: "Unpublished changes"
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button$1, {
+								className: "min-h-11 lg:min-h-7",
+								onClick: clearDraft,
+								variant: "ghost",
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Undo2, { "data-icon": "inline-start" }), "Discard"]
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button$1, {
+								className: "min-h-11 lg:min-h-7",
+								onClick: () => setPublishing(true),
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Upload, { "data-icon": "inline-start" }), "Publish changes"]
+							})
+						]
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "min-h-0 min-w-0 flex-1 overflow-y-auto bg-muted/5 p-3 sm:p-6",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "mx-auto flex w-full max-w-5xl flex-col gap-4",
+					children: [
+						active.isError ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Alert, {
+							variant: "destructive",
+							children: [
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TriangleAlert, {}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertTitle, { children: "Remote Config couldn't be loaded" }),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertDescription, { children: "Check the connection and try again." }),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertAction, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button$1, {
+									onClick: () => void active.refetch(),
+									size: "xs",
+									variant: "outline",
+									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(RefreshCw, { "data-icon": "inline-start" }), "Retry"]
+								}) })
+							]
+						}) : null,
+						restored && dirty && draft !== null ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Alert, { children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(History, {}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertTitle, { children: "Your unpublished changes are back" }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AlertDescription, { children: [
+								"This browser kept them from your last visit, on version",
+								" ",
+								draft.baseVersion,
+								"."
+							] }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertAction, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
+								onClick: clearDraft,
+								size: "xs",
+								variant: "outline",
+								children: "Discard them"
+							}) })
+						] }) : null,
+						stale && draft !== null && published !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Alert, { children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TriangleAlert, {}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AlertTitle, { children: [
+								"Version ",
+								published.version,
+								" was published while you edited"
+							] }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AlertDescription, { children: [
+								"Your draft started from version ",
+								draft.baseVersion,
+								". Discard it to review version ",
+								published.version,
+								", or publish yours after it."
+							] }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertAction, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button$1, {
+								onClick: clearDraft,
+								size: "xs",
+								variant: "outline",
+								children: ["Load version ", published.version]
+							}) })
+						] }) : null,
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Tabs$1, {
+							onValueChange: (value) => onTabChange(value),
+							value: tab,
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsList, {
+								"aria-label": "Remote Config views",
+								className: "max-w-full group-data-horizontal/tabs:h-auto",
+								children: [
+									[
+										"parameters",
+										"Parameters",
+										counts.parameters
+									],
+									[
+										"conditions",
+										"Conditions",
+										counts.conditions
+									],
+									[
+										"preview",
+										"Preview",
+										null
+									],
+									[
+										"versions",
+										"Versions",
+										null
+									]
+								].map(([value, label, count]) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TabsTrigger, {
+									className: "min-h-11 flex-none px-3 lg:min-h-7",
+									value,
+									children: [label, count === null ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+										className: "tabular-nums text-muted-foreground",
+										children: count
+									})]
+								}, value))
+							}), template === void 0 || published === void 0 ? active.isError ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+								className: "flex flex-col gap-3 pt-2",
+								children: [
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+										className: "sr-only",
+										children: "Loading Remote Config"
+									}),
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-14 w-full" }),
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-14 w-full" }),
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-14 w-full" })
+								]
+							}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContent, {
+									value: "parameters",
+									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ParametersCard, {
+										onAddCondition: (condition) => edit((current) => upsertCondition(current, null, condition)),
+										onRemoveParameter: (key) => edit((current) => removeParameter(current, key)),
+										onSaveParameter: (previousKey, key, parameter) => edit((current) => upsertParameter(current, previousKey, key, parameter)),
+										template
+									})
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContent, {
+									value: "conditions",
+									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConditionsCard, {
+										onMoveCondition: (index, offset) => edit((current) => moveCondition(current, index, offset)),
+										onRemoveCondition: (name) => edit((current) => removeCondition(current, name)),
+										onSaveCondition: (previousName, condition) => edit((current) => upsertCondition(current, previousName, condition)),
+										template
+									})
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContent, {
+									value: "preview",
+									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewCard, {
+										isDraft: dirty,
+										template
+									})
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContent, {
+									value: "versions",
+									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VersionsCard, {
+										activeVersion: published.version,
+										hasDraft: dirty,
+										onRolledBack: clearDraft,
+										onStartEditing: () => onTabChange("parameters")
+									})
+								})
+							] })]
+						})
+					]
+				})
+			}),
+			published !== void 0 && draft !== null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PublishDialog, {
+				base: published.template,
+				baseVersion: draft.baseVersion,
+				draft: draft.template,
+				onLoadLatest: clearDraft,
+				onOpenChange: setPublishing,
+				onPublishOver: (version) => setDraft({
+					...draft,
+					baseVersion: version,
+					base: published.template
+				}),
+				onPublished: clearDraft,
+				open: publishing
+			}) : null
+		]
+	});
+}
+var $$splitComponentImporter = () => import("./remote-config-Cc5P4J-r.mjs");
+var $$splitNotFoundComponentImporter = () => import("./remote-config-CjdxcZ9B.mjs");
+var Route = createFileRoute("/remote-config")({
+	beforeLoad: ({ context }) => requireConsoleFeature(context.queryClient, "remoteConfig"),
+	notFoundComponent: lazyRouteComponent($$splitNotFoundComponentImporter, "notFoundComponent"),
+	component: lazyRouteComponent($$splitComponentImporter, "component"),
+	validateSearch: (search) => REMOTE_CONFIG_TABS.includes(search.tab) && search.tab !== "parameters" ? { tab: search.tab } : {}
+});
+//#endregion
+export { Route as n, RemoteConfigPage as t };