camox 0.48.0 → 0.51.0

package/dist/features/settings/AnalyticsSettings.js

@@ -0,0 +1,622 @@
+import { SettingsPart } from "./SettingsPart.js";
+import { useProjectMutation } from "./useProjectMutation.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@camox/ui/button";
+import { Input } from "@camox/ui/input";
+import { Label } from "@camox/ui/label";
+import { useForm, useStore } from "@tanstack/react-form";
+import { Plus, Trash2 } from "lucide-react";
+import { Spinner } from "@camox/ui/spinner";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@camox/ui/select";
+import { Separator } from "@camox/ui/separator";
+import { ga4MeasurementIdSchema, posthogProjectApiKeySchema, posthogRegionSchema } from "@camox/api-contract/analytics";
+
+//#region src/features/settings/AnalyticsSettings.tsx
+/** Saves a provider's settings, or removes the provider when given null. */
+function useSaveProvider(provider, name, t0) {
+	const $ = c(21);
+	const { project, onClose } = t0;
+	let t1;
+	if ($[0] !== name || $[1] !== provider) {
+		t1 = (input) => input[provider] === null ? `${name} removed` : `${name} saved`;
+		$[0] = name;
+		$[1] = provider;
+		$[2] = t1;
+	} else t1 = $[2];
+	const t2 = `Could not save ${name}`;
+	let t3;
+	if ($[3] !== onClose || $[4] !== provider) {
+		t3 = (input_0) => {
+			if (input_0[provider] === null) onClose();
+		};
+		$[3] = onClose;
+		$[4] = provider;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== t1 || $[7] !== t2 || $[8] !== t3) {
+		t4 = {
+			success: t1,
+			failure: t2,
+			onSuccess: t3
+		};
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	const mutation = useProjectMutation(project, "updateAnalytics", t4);
+	let t5;
+	if ($[10] !== project || $[11] !== provider) {
+		t5 = (settings) => ({
+			id: project.id,
+			[provider]: settings
+		});
+		$[10] = project;
+		$[11] = provider;
+		$[12] = t5;
+	} else t5 = $[12];
+	const input_1 = t5;
+	let t6;
+	let t7;
+	if ($[13] !== input_1 || $[14] !== mutation) {
+		t6 = (settings_0) => mutation.mutate(input_1(settings_0));
+		t7 = (settings_1) => mutation.mutateAsync(input_1(settings_1));
+		$[13] = input_1;
+		$[14] = mutation;
+		$[15] = t6;
+		$[16] = t7;
+	} else {
+		t6 = $[15];
+		t7 = $[16];
+	}
+	let t8;
+	if ($[17] !== mutation.isPending || $[18] !== t6 || $[19] !== t7) {
+		t8 = {
+			isPending: mutation.isPending,
+			mutate: t6,
+			mutateAsync: t7
+		};
+		$[17] = mutation.isPending;
+		$[18] = t6;
+		$[19] = t7;
+		$[20] = t8;
+	} else t8 = $[20];
+	return t8;
+}
+/**
+* A provider's form: its fields, then Save, and either Cancel while adding it or Remove once it's
+* saved.
+*/
+function ProviderForm(t0) {
+	const $ = c(20);
+	const { name, saved, dirty, submitting, save, onSubmit, onCancel, children } = t0;
+	let t1;
+	if ($[0] !== onSubmit) {
+		t1 = (event) => {
+			event.preventDefault();
+			event.stopPropagation();
+			onSubmit();
+		};
+		$[0] = onSubmit;
+		$[1] = t1;
+	} else t1 = $[1];
+	const t2 = !dirty || submitting || save.isPending;
+	let t3;
+	if ($[2] !== submitting) {
+		t3 = submitting && /* @__PURE__ */ jsx(Spinner, {});
+		$[2] = submitting;
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== t2 || $[5] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Button, {
+			type: "submit",
+			disabled: t2,
+			children: [t3, "Save"]
+		});
+		$[4] = t2;
+		$[5] = t3;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== name || $[8] !== onCancel || $[9] !== save || $[10] !== saved || $[11] !== submitting) {
+		t5 = saved ? /* @__PURE__ */ jsxs(Button, {
+			type: "button",
+			variant: "ghost",
+			className: "ml-auto",
+			disabled: save.isPending,
+			onClick: () => save.mutate(null),
+			children: [
+				/* @__PURE__ */ jsx(Trash2, {}),
+				"Remove ",
+				name
+			]
+		}) : /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "outline",
+			disabled: submitting,
+			onClick: onCancel,
+			children: "Cancel"
+		});
+		$[7] = name;
+		$[8] = onCancel;
+		$[9] = save;
+		$[10] = saved;
+		$[11] = submitting;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== t4 || $[14] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap gap-2",
+			children: [t4, t5]
+		});
+		$[13] = t4;
+		$[14] = t5;
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] !== children || $[17] !== t1 || $[18] !== t6) {
+		t7 = /* @__PURE__ */ jsxs("form", {
+			onSubmit: t1,
+			className: "flex flex-col gap-4",
+			children: [children, t6]
+		});
+		$[16] = children;
+		$[17] = t1;
+		$[18] = t6;
+		$[19] = t7;
+	} else t7 = $[19];
+	return t7;
+}
+/** A monospace text input for an ID or key, with its validation error. */
+function IdInput(t0) {
+	const $ = c(14);
+	const { id, placeholder, field } = t0;
+	let t1;
+	if ($[0] !== field) {
+		t1 = (event) => field.handleChange(event.target.value);
+		$[0] = field;
+		$[1] = t1;
+	} else t1 = $[1];
+	const t2 = field.state.meta.errors.length ? true : void 0;
+	let t3;
+	if ($[2] !== field.state.value || $[3] !== id || $[4] !== placeholder || $[5] !== t1 || $[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Input, {
+			id,
+			className: "font-mono",
+			placeholder,
+			autoComplete: "off",
+			spellCheck: false,
+			value: field.state.value,
+			onChange: t1,
+			"aria-invalid": t2
+		});
+		$[2] = field.state.value;
+		$[3] = id;
+		$[4] = placeholder;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== field.state.meta.errors[0] || $[9] !== field.state.meta.errors.length) {
+		t4 = field.state.meta.errors.length > 0 && /* @__PURE__ */ jsx("p", {
+			className: "text-destructive text-xs",
+			children: field.state.meta.errors[0]
+		});
+		$[8] = field.state.meta.errors[0];
+		$[9] = field.state.meta.errors.length;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== t3 || $[12] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Fragment, { children: [t3, t4] });
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
+	return t5;
+}
+function Ga4Form(props) {
+	const $ = c(20);
+	const { saved, onClose } = props;
+	const save = useSaveProvider("ga4", "Google Analytics", props);
+	const t0 = saved?.measurementId ?? "";
+	let t1;
+	if ($[0] !== t0) {
+		t1 = { measurementId: t0 };
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== save) {
+		t2 = async (t3) => {
+			const { value } = t3;
+			await save.mutateAsync({ measurementId: value.measurementId.trim().toUpperCase() }).catch(_temp);
+		};
+		$[2] = save;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t1 || $[5] !== t2) {
+		t3 = {
+			defaultValues: t1,
+			onSubmit: t2
+		};
+		$[4] = t1;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	const form = useForm(t3);
+	const dirty = useStore(form.store, _temp2);
+	const submitting = useStore(form.store, _temp3);
+	const t4 = !!saved;
+	let t5;
+	if ($[7] !== form) {
+		t5 = () => void form.handleSubmit();
+		$[7] = form;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = { onSubmit: _temp4 };
+		$[9] = t6;
+	} else t6 = $[9];
+	let t7;
+	if ($[10] !== form.Field) {
+		t7 = /* @__PURE__ */ jsx(form.Field, {
+			name: "measurementId",
+			validators: t6,
+			children: _temp5
+		});
+		$[10] = form.Field;
+		$[11] = t7;
+	} else t7 = $[11];
+	let t8;
+	if ($[12] !== dirty || $[13] !== onClose || $[14] !== save || $[15] !== submitting || $[16] !== t4 || $[17] !== t5 || $[18] !== t7) {
+		t8 = /* @__PURE__ */ jsx(ProviderForm, {
+			name: "Google Analytics",
+			saved: t4,
+			dirty,
+			submitting,
+			save,
+			onSubmit: t5,
+			onCancel: onClose,
+			children: t7
+		});
+		$[12] = dirty;
+		$[13] = onClose;
+		$[14] = save;
+		$[15] = submitting;
+		$[16] = t4;
+		$[17] = t5;
+		$[18] = t7;
+		$[19] = t8;
+	} else t8 = $[19];
+	return t8;
+}
+function _temp5(field) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [
+			/* @__PURE__ */ jsx(Label, {
+				htmlFor: "camox-ga4-measurement-id",
+				children: "Google Analytics 4 measurement ID"
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-sm",
+				children: "In Google Analytics, go to Admin, then Data streams, and open your website's stream. The measurement ID is at the top right, starting with G-."
+			}),
+			/* @__PURE__ */ jsx(IdInput, {
+				id: "camox-ga4-measurement-id",
+				placeholder: "G-XXXXXXXXXX",
+				field
+			})
+		]
+	});
+}
+function _temp4(t0) {
+	const { value: value_0 } = t0;
+	return ga4MeasurementIdSchema.safeParse(value_0.trim().toUpperCase()).success ? void 0 : "Enter a measurement ID that starts with G-, like G-A1B2C3D4E5";
+}
+function _temp3(state_0) {
+	return state_0.isSubmitting;
+}
+function _temp2(state) {
+	return state.isDirty;
+}
+function _temp() {}
+const POSTHOG_REGION_LABELS = {
+	us: "US Cloud",
+	eu: "EU Cloud"
+};
+const POSTHOG_REGIONS = posthogRegionSchema.options.map((value) => ({
+	value,
+	label: POSTHOG_REGION_LABELS[value]
+}));
+function PosthogForm(props) {
+	const $ = c(22);
+	const { saved, onClose } = props;
+	const save = useSaveProvider("posthog", "PostHog", props);
+	const t0 = saved?.projectApiKey ?? "";
+	const t1 = saved?.region ?? "us";
+	let t2;
+	if ($[0] !== t0 || $[1] !== t1) {
+		t2 = {
+			projectApiKey: t0,
+			region: t1
+		};
+		$[0] = t0;
+		$[1] = t1;
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== save) {
+		t3 = async (t4) => {
+			const { value } = t4;
+			await save.mutateAsync({
+				projectApiKey: value.projectApiKey.trim(),
+				region: value.region
+			}).catch(_temp6);
+		};
+		$[3] = save;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== t2 || $[6] !== t3) {
+		t4 = {
+			defaultValues: t2,
+			onSubmit: t3
+		};
+		$[5] = t2;
+		$[6] = t3;
+		$[7] = t4;
+	} else t4 = $[7];
+	const form = useForm(t4);
+	const dirty = useStore(form.store, _temp7);
+	const submitting = useStore(form.store, _temp8);
+	const t5 = !!saved;
+	let t6;
+	if ($[8] !== form) {
+		t6 = () => void form.handleSubmit();
+		$[8] = form;
+		$[9] = t6;
+	} else t6 = $[9];
+	let t7;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground text-sm",
+			children: "In PostHog, go to Project settings. The project API key starts with phc_, and the region is the cloud your project is hosted in, shown in your PostHog address (us.posthog.com or eu.posthog.com)."
+		});
+		$[10] = t7;
+	} else t7 = $[10];
+	let t8;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = { onSubmit: _temp9 };
+		$[11] = t8;
+	} else t8 = $[11];
+	let t9;
+	if ($[12] !== form.Field) {
+		t9 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-start gap-4",
+			children: [/* @__PURE__ */ jsx(form.Field, {
+				name: "projectApiKey",
+				validators: t8,
+				children: _temp10
+			}), /* @__PURE__ */ jsx(form.Field, {
+				name: "region",
+				children: _temp12
+			})]
+		});
+		$[12] = form.Field;
+		$[13] = t9;
+	} else t9 = $[13];
+	let t10;
+	if ($[14] !== dirty || $[15] !== onClose || $[16] !== save || $[17] !== submitting || $[18] !== t5 || $[19] !== t6 || $[20] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(ProviderForm, {
+			name: "PostHog",
+			saved: t5,
+			dirty,
+			submitting,
+			save,
+			onSubmit: t6,
+			onCancel: onClose,
+			children: [t7, t9]
+		});
+		$[14] = dirty;
+		$[15] = onClose;
+		$[16] = save;
+		$[17] = submitting;
+		$[18] = t5;
+		$[19] = t6;
+		$[20] = t9;
+		$[21] = t10;
+	} else t10 = $[21];
+	return t10;
+}
+function _temp12(field_0) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [/* @__PURE__ */ jsx(Label, {
+			htmlFor: "camox-posthog-region",
+			children: "Region"
+		}), /* @__PURE__ */ jsxs(Select, {
+			value: field_0.state.value,
+			onValueChange: (value_1) => {
+				if (value_1 != null) field_0.handleChange(value_1);
+			},
+			items: POSTHOG_REGIONS,
+			children: [/* @__PURE__ */ jsx(SelectTrigger, {
+				id: "camox-posthog-region",
+				children: /* @__PURE__ */ jsx(SelectValue, {})
+			}), /* @__PURE__ */ jsx(SelectContent, { children: POSTHOG_REGIONS.map(_temp11) })]
+		})]
+	});
+}
+function _temp11(region) {
+	return /* @__PURE__ */ jsx(SelectItem, {
+		value: region.value,
+		children: region.label
+	}, region.value);
+}
+function _temp10(field) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-64 flex-1 flex-col gap-2",
+		children: [/* @__PURE__ */ jsx(Label, {
+			htmlFor: "camox-posthog-project-api-key",
+			children: "PostHog project API key"
+		}), /* @__PURE__ */ jsx(IdInput, {
+			id: "camox-posthog-project-api-key",
+			placeholder: "phc_XXXXXXXXXX",
+			field
+		})]
+	});
+}
+function _temp9(t0) {
+	const { value: value_0 } = t0;
+	return posthogProjectApiKeySchema.safeParse(value_0.trim()).success ? void 0 : "Enter a project API key that starts with phc_";
+}
+function _temp8(state_0) {
+	return state_0.isSubmitting;
+}
+function _temp7(state) {
+	return state.isDirty;
+}
+function _temp6() {}
+/** Each provider the Analytics part offers, in the order it lists them. */
+const PROVIDERS = {
+	ga4: {
+		addLabel: "Add Google Analytics 4",
+		Form: Ga4Form
+	},
+	posthog: {
+		addLabel: "Add PostHog",
+		Form: PosthogForm
+	}
+};
+function ProviderSettings(t0) {
+	const $ = c(6);
+	let props;
+	let provider;
+	if ($[0] !== t0) {
+		({provider, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = provider;
+	} else {
+		props = $[1];
+		provider = $[2];
+	}
+	const { Form } = PROVIDERS[provider];
+	let t1;
+	if ($[3] !== Form || $[4] !== props) {
+		t1 = /* @__PURE__ */ jsx(Form, { ...props });
+		$[3] = Form;
+		$[4] = props;
+		$[5] = t1;
+	} else t1 = $[5];
+	return t1;
+}
+function AnalyticsSettings(t0) {
+	const $ = c(21);
+	const { project } = t0;
+	const { analytics } = project;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = [];
+		$[0] = t1;
+	} else t1 = $[0];
+	const [adding, setAdding] = React.useState(t1);
+	let providers;
+	let t2;
+	if ($[1] !== adding || $[2] !== analytics) {
+		providers = Object.keys(PROVIDERS);
+		t2 = providers.filter((provider) => analytics[provider] || adding.includes(provider));
+		$[1] = adding;
+		$[2] = analytics;
+		$[3] = providers;
+		$[4] = t2;
+	} else {
+		providers = $[3];
+		t2 = $[4];
+	}
+	const shown = t2;
+	let t3;
+	if ($[5] !== providers || $[6] !== shown) {
+		t3 = providers.filter((provider_0) => !shown.includes(provider_0));
+		$[5] = providers;
+		$[6] = shown;
+		$[7] = t3;
+	} else t3 = $[7];
+	const addable = t3;
+	let t4;
+	if ($[8] !== addable) {
+		t4 = /* @__PURE__ */ jsx("div", {
+			className: "flex flex-wrap justify-center gap-2",
+			children: addable.map((provider_1) => /* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				variant: "outline",
+				onClick: () => setAdding((current) => [...current, provider_1]),
+				children: [/* @__PURE__ */ jsx(Plus, {}), PROVIDERS[provider_1].addLabel]
+			}, provider_1))
+		});
+		$[8] = addable;
+		$[9] = t4;
+	} else t4 = $[9];
+	const addButtons = t4;
+	let t5;
+	if ($[10] !== analytics || $[11] !== project || $[12] !== shown) {
+		t5 = shown.map((provider_2, index) => {
+			const saved = analytics[provider_2] ?? void 0;
+			return /* @__PURE__ */ jsxs(React.Fragment, { children: [index > 0 && /* @__PURE__ */ jsx(Separator, {}), /* @__PURE__ */ jsx(ProviderSettings, {
+				provider: provider_2,
+				project,
+				saved,
+				onClose: () => setAdding((current_0) => current_0.filter((p) => p !== provider_2))
+			}, saved ? JSON.stringify(saved) : "new")] }, provider_2);
+		});
+		$[10] = analytics;
+		$[11] = project;
+		$[12] = shown;
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] !== addButtons || $[15] !== addable.length || $[16] !== shown.length) {
+		t6 = shown.length === 0 ? /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-3 rounded-lg border border-dashed p-6 text-center",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-sm",
+				children: "No analytics yet. Add a provider to count your website's visitors."
+			}), addButtons]
+		}) : addable.length > 0 && /* @__PURE__ */ jsx("div", {
+			className: "flex",
+			children: addButtons
+		});
+		$[14] = addButtons;
+		$[15] = addable.length;
+		$[16] = shown.length;
+		$[17] = t6;
+	} else t6 = $[17];
+	let t7;
+	if ($[18] !== t5 || $[19] !== t6) {
+		t7 = /* @__PURE__ */ jsx(SettingsPart, {
+			title: "Analytics",
+			description: "Count your website's unauthenticated visitors.",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-4",
+				children: [t5, t6]
+			})
+		});
+		$[18] = t5;
+		$[19] = t6;
+		$[20] = t7;
+	} else t7 = $[20];
+	return t7;
+}
+
+//#endregion
+export { AnalyticsSettings };

package/dist/features/settings/CamoxSettings.js

@@ -0,0 +1,95 @@
+import { useProjectUuid } from "../../lib/auth.js";
+import { reads, useReadQuery } from "../../lib/studio-reads.js";
+import { AnalyticsSettings } from "./AnalyticsSettings.js";
+import { FaviconSettings } from "./FaviconSettings.js";
+import { ProjectNameSettings } from "./ProjectNameSettings.js";
+import { SocialProfilesSettings } from "./SocialProfilesSettings.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { TriangleAlert } from "lucide-react";
+import { Skeleton } from "@camox/ui/skeleton";
+import { Alert, AlertDescription } from "@camox/ui/alert";
+import { Separator } from "@camox/ui/separator";
+
+//#region src/features/settings/CamoxSettings.tsx
+/** The Settings Section's parts, top to bottom. Each saves on its own. */
+const parts = [
+	{
+		id: "name",
+		Part: ProjectNameSettings
+	},
+	{
+		id: "favicon",
+		Part: FaviconSettings
+	},
+	{
+		id: "social-profiles",
+		Part: SocialProfilesSettings
+	},
+	{
+		id: "analytics",
+		Part: AnalyticsSettings
+	}
+];
+/**
+* The Settings Section (GLOSSARY): where members change Project Settings. They apply to Live and
+* every draft as soon as they're saved, whichever draft the studio is viewing.
+*/
+const CamoxSettings = () => {
+	const $ = c(8);
+	const projectUuid = useProjectUuid();
+	let t0;
+	if ($[0] !== projectUuid) {
+		t0 = reads.project({ projectUuid });
+		$[0] = projectUuid;
+		$[1] = t0;
+	} else t0 = $[1];
+	const { data: project } = useReadQuery(t0);
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx("h1", {
+			className: "text-xl font-semibold",
+			children: "Settings"
+		});
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsxs("header", {
+			className: "flex flex-col gap-4",
+			children: [t1, /* @__PURE__ */ jsxs(Alert, {
+				variant: "warning",
+				children: [/* @__PURE__ */ jsx(TriangleAlert, {}), /* @__PURE__ */ jsx(AlertDescription, { children: "Settings apply to the live website and every draft as soon as you save them." })]
+			})]
+		});
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== project) {
+		t3 = project ? parts.map((t4, index) => {
+			const { id, Part } = t4;
+			return /* @__PURE__ */ jsxs(React.Fragment, { children: [index > 0 && /* @__PURE__ */ jsx(Separator, {}), /* @__PURE__ */ jsx(Part, { project })] }, id);
+		}) : /* @__PURE__ */ jsxs("div", {
+			role: "status",
+			"aria-label": "Loading settings",
+			className: "flex flex-col gap-4",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-24" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-24" })]
+		});
+		$[4] = project;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== t3) {
+		t4 = /* @__PURE__ */ jsxs("div", {
+			className: "mx-auto flex w-full max-w-4xl flex-col gap-8 p-6 md:p-10",
+			children: [t2, t3]
+		});
+		$[6] = t3;
+		$[7] = t4;
+	} else t4 = $[7];
+	return t4;
+};
+
+//#endregion
+export { CamoxSettings };