camox 0.43.0 → 0.45.0

package/dist/features/preview/components/CreatePageModal.js

@@ -1,22 +1,24 @@
+import { useProjectUuid } from "../../../lib/auth.js";
 import { useNavigate } from "../../navigation/navigation.js";
-import { useProjectSlug } from "../../../lib/auth.js";
 import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
-import { layoutQueries, pageMutations, pageQueries, projectQueries } from "../../../lib/queries.js";
+import { reads, useReadQuery } from "../../../lib/studio-reads.js";
+import { pageMutations } from "../../../lib/queries.js";
+import { useLocalizedPath } from "../../../lib/view-locale.js";
+import { PageNicknameField } from "./PageNicknameField.js";
 import { previewStore } from "../previewStore.js";
 import { PageLocationFieldset } from "./PageLocationFieldset.js";
-import { PageNicknameField } from "./PageNicknameField.js";
 import { c } from "react/compiler-runtime";
-import { useMutation, useQuery } from "@tanstack/react-query";
 import { useEffect } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useSelector } from "@xstate/store-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMutation } from "@tanstack/react-query";
 import { Button } from "@camox/ui/button";
-import { Spinner } from "@camox/ui/spinner";
-import { toast } from "@camox/ui/toaster";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@camox/ui/dialog";
 import { Label } from "@camox/ui/label";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@camox/ui/select";
 import { useForm } from "@tanstack/react-form";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@camox/ui/dialog";
+import { toast } from "@camox/ui/toaster";
+import { Spinner } from "@camox/ui/spinner";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@camox/ui/select";
 
 //#region src/features/preview/components/CreatePageModal.tsx
 const slugifyPathSegment = (nickname) => {
@@ -25,82 +27,71 @@ const slugifyPathSegment = (nickname) => {
 	return trimmedNickname.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
 };
 const CreatePageModal = () => {
-	const $ = c(59);
-	if ($[0] !== "7d9f627f2fd6df9193c55db2f9612514acd4807aab2e5cc3fbd5bdd5aaf23672") {
-		for (let $i = 0; $i < 59; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "7d9f627f2fd6df9193c55db2f9612514acd4807aab2e5cc3fbd5bdd5aaf23672";
-	}
-	const projectSlug = useProjectSlug();
+	const $ = c(56);
+	const projectUuid = useProjectUuid();
 	const open = useSelector(previewStore, _temp);
 	let t0;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t0 = pageMutations.create();
-		$[1] = t0;
-	} else t0 = $[1];
+		$[0] = t0;
+	} else t0 = $[0];
 	const createPage = useMutation(t0);
 	let t1;
-	if ($[2] !== projectSlug) {
-		t1 = projectQueries.getBySlug(projectSlug);
-		$[2] = projectSlug;
-		$[3] = t1;
-	} else t1 = $[3];
-	const { data: project } = useQuery(t1);
+	if ($[1] !== projectUuid) {
+		t1 = reads.project({ projectUuid });
+		$[1] = projectUuid;
+		$[2] = t1;
+	} else t1 = $[2];
+	const { data: project } = useReadQuery(t1);
 	let t2;
-	if ($[4] !== project?.id) {
-		t2 = pageQueries.list(project?.id ?? 0);
-		$[4] = project?.id;
-		$[5] = t2;
-	} else t2 = $[5];
+	if ($[3] !== projectUuid) {
+		t2 = reads.pageList({ projectUuid });
+		$[3] = projectUuid;
+		$[4] = t2;
+	} else t2 = $[4];
 	const t3 = !!project;
 	let t4;
-	if ($[6] !== t2 || $[7] !== t3) {
-		t4 = {
-			...t2,
-			enabled: t3
-		};
-		$[6] = t2;
-		$[7] = t3;
-		$[8] = t4;
-	} else t4 = $[8];
-	const { data: pages } = useQuery(t4);
+	if ($[5] !== t3) {
+		t4 = { enabled: t3 };
+		$[5] = t3;
+		$[6] = t4;
+	} else t4 = $[6];
+	const { data: pages } = useReadQuery(t2, t4);
 	let t5;
-	if ($[9] !== project?.id) {
-		t5 = layoutQueries.list(project?.id ?? 0);
-		$[9] = project?.id;
-		$[10] = t5;
-	} else t5 = $[10];
+	if ($[7] !== project?.id) {
+		t5 = reads.layoutList({ projectId: project?.id ?? 0 });
+		$[7] = project?.id;
+		$[8] = t5;
+	} else t5 = $[8];
 	const t6 = !!project;
 	let t7;
-	if ($[11] !== t5 || $[12] !== t6) {
-		t7 = {
-			...t5,
-			enabled: t6
-		};
-		$[11] = t5;
-		$[12] = t6;
-		$[13] = t7;
-	} else t7 = $[13];
-	const { data: allLayouts } = useQuery(t7);
+	if ($[9] !== t6) {
+		t7 = { enabled: t6 };
+		$[9] = t6;
+		$[10] = t7;
+	} else t7 = $[10];
+	const { data: allLayouts } = useReadQuery(t5, t7);
 	const camoxApp = useCamoxApp();
 	let t8;
-	if ($[14] !== allLayouts || $[15] !== camoxApp) {
+	if ($[11] !== allLayouts || $[12] !== camoxApp) {
 		t8 = allLayouts?.filter((layout) => camoxApp.getLayoutById(layout.layoutId)?._internal.kind === "curated");
-		$[14] = allLayouts;
-		$[15] = camoxApp;
-		$[16] = t8;
-	} else t8 = $[16];
+		$[11] = allLayouts;
+		$[12] = camoxApp;
+		$[13] = t8;
+	} else t8 = $[13];
 	const layouts = t8;
 	const navigate = useNavigate();
+	const localized = useLocalizedPath();
 	let t9;
-	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
 		t9 = {
 			nickname: "",
 			parentPageId: void 0,
 			pathSegment: "",
 			layoutId: ""
 		};
-		$[17] = t9;
-	} else t9 = $[17];
+		$[14] = t9;
+	} else t9 = $[14];
 	const form = useForm({
 		defaultValues: t9,
 		onSubmit: async (values) => {
@@ -119,7 +110,7 @@ const CreatePageModal = () => {
 					nickname,
 					pathSegment: values.value.pathSegment,
 					parentPageId: values.value.parentPageId,
-					layoutId: Number(values.value.layoutId)
+					layoutId: values.value.layoutId
 				});
 				toast.promise(createPagePromise, {
 					loading: "Creating page...",
@@ -130,7 +121,7 @@ const CreatePageModal = () => {
 				previewStore.send({ type: "closeCreatePageModal" });
 				form.reset();
 				await new Promise(_temp2);
-				await navigate({ to: fullPath });
+				await navigate({ to: localized(fullPath) });
 			} catch (t10) {
 				console.error("Failed to create page:", t10);
 				toast.error("Could not create page");
@@ -138,39 +129,39 @@ const CreatePageModal = () => {
 		}
 	});
 	let t11;
-	if ($[18] !== form || $[19] !== layouts) {
+	if ($[15] !== form || $[16] !== layouts) {
 		t11 = () => {
-			if (layouts && layouts.length > 0 && !form.getFieldValue("layoutId")) form.setFieldValue("layoutId", String(layouts[0].id));
+			if (layouts && layouts.length > 0 && !form.getFieldValue("layoutId")) form.setFieldValue("layoutId", layouts[0].layoutId);
 		};
-		$[18] = form;
-		$[19] = layouts;
-		$[20] = t11;
-	} else t11 = $[20];
+		$[15] = form;
+		$[16] = layouts;
+		$[17] = t11;
+	} else t11 = $[17];
 	let t12;
-	if ($[21] !== form || $[22] !== layouts) {
+	if ($[18] !== form || $[19] !== layouts) {
 		t12 = [layouts, form];
-		$[21] = form;
-		$[22] = layouts;
-		$[23] = t12;
-	} else t12 = $[23];
+		$[18] = form;
+		$[19] = layouts;
+		$[20] = t12;
+	} else t12 = $[20];
 	useEffect(t11, t12);
 	let t13;
-	if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
 		t13 = /* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: "Create page" }), /* @__PURE__ */ jsx(DialogDescription, { children: "Fill in the details to create a new page. It will be created as a draft." })] });
-		$[24] = t13;
-	} else t13 = $[24];
+		$[21] = t13;
+	} else t13 = $[21];
 	let t14;
-	if ($[25] !== form) {
+	if ($[22] !== form) {
 		t14 = (e) => {
 			e.preventDefault();
 			e.stopPropagation();
 			form.handleSubmit();
 		};
-		$[25] = form;
-		$[26] = t14;
-	} else t14 = $[26];
+		$[22] = form;
+		$[23] = t14;
+	} else t14 = $[23];
 	let t15;
-	if ($[27] !== form) {
+	if ($[24] !== form) {
 		t15 = (field) => /* @__PURE__ */ jsx(PageNicknameField, {
 			value: field.state.value,
 			onChange: (value_0) => {
@@ -180,21 +171,21 @@ const CreatePageModal = () => {
 			},
 			autoFocus: true
 		});
-		$[27] = form;
-		$[28] = t15;
-	} else t15 = $[28];
+		$[24] = form;
+		$[25] = t15;
+	} else t15 = $[25];
 	let t16;
-	if ($[29] !== form.Field || $[30] !== t15) {
+	if ($[26] !== form.Field || $[27] !== t15) {
 		t16 = /* @__PURE__ */ jsx(form.Field, {
 			name: "nickname",
 			children: t15
 		});
-		$[29] = form.Field;
-		$[30] = t15;
-		$[31] = t16;
-	} else t16 = $[31];
+		$[26] = form.Field;
+		$[27] = t15;
+		$[28] = t16;
+	} else t16 = $[28];
 	let t17;
-	if ($[32] !== form.Field || $[33] !== pages) {
+	if ($[29] !== form.Field || $[30] !== pages) {
 		t17 = (parentField) => /* @__PURE__ */ jsx(form.Field, {
 			name: "pathSegment",
 			children: (pathField) => /* @__PURE__ */ jsx(PageLocationFieldset, {
@@ -205,22 +196,22 @@ const CreatePageModal = () => {
 				pages
 			})
 		});
-		$[32] = form.Field;
-		$[33] = pages;
-		$[34] = t17;
-	} else t17 = $[34];
+		$[29] = form.Field;
+		$[30] = pages;
+		$[31] = t17;
+	} else t17 = $[31];
 	let t18;
-	if ($[35] !== form.Field || $[36] !== t17) {
+	if ($[32] !== form.Field || $[33] !== t17) {
 		t18 = /* @__PURE__ */ jsx(form.Field, {
 			name: "parentPageId",
 			children: t17
 		});
-		$[35] = form.Field;
-		$[36] = t17;
-		$[37] = t18;
-	} else t18 = $[37];
+		$[32] = form.Field;
+		$[33] = t17;
+		$[34] = t18;
+	} else t18 = $[34];
 	let t19;
-	if ($[38] !== camoxApp || $[39] !== layouts) {
+	if ($[35] !== camoxApp || $[36] !== layouts) {
 		t19 = (field_0) => /* @__PURE__ */ jsxs("div", {
 			className: "space-y-2",
 			children: [/* @__PURE__ */ jsx(Label, {
@@ -233,38 +224,38 @@ const CreatePageModal = () => {
 				},
 				disabled: layouts != null && layouts.length <= 1,
 				items: layouts?.map((t) => ({
-					value: String(t.id),
+					value: t.layoutId,
 					label: camoxApp.getLayoutById(t.layoutId)?._internal.title ?? t.layoutId
 				})),
 				children: [/* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select a layout" }) }), /* @__PURE__ */ jsx(SelectContent, { children: layouts?.map((t_0) => /* @__PURE__ */ jsx(SelectItem, {
-					value: String(t_0.id),
+					value: t_0.layoutId,
 					children: camoxApp.getLayoutById(t_0.layoutId)?._internal.title ?? t_0.layoutId
-				}, t_0.id)) })]
+				}, t_0.layoutId)) })]
 			})]
 		});
-		$[38] = camoxApp;
-		$[39] = layouts;
-		$[40] = t19;
-	} else t19 = $[40];
+		$[35] = camoxApp;
+		$[36] = layouts;
+		$[37] = t19;
+	} else t19 = $[37];
 	let t20;
-	if ($[41] !== form.Field || $[42] !== t19) {
+	if ($[38] !== form.Field || $[39] !== t19) {
 		t20 = /* @__PURE__ */ jsx(form.Field, {
 			name: "layoutId",
 			children: t19
 		});
-		$[41] = form.Field;
-		$[42] = t19;
-		$[43] = t20;
-	} else t20 = $[43];
+		$[38] = form.Field;
+		$[39] = t19;
+		$[40] = t20;
+	} else t20 = $[40];
 	let t21;
-	if ($[44] !== form.state.isSubmitting) {
+	if ($[41] !== form.state.isSubmitting) {
 		t21 = form.state.isSubmitting && /* @__PURE__ */ jsx(Spinner, {});
-		$[44] = form.state.isSubmitting;
-		$[45] = t21;
-	} else t21 = $[45];
+		$[41] = form.state.isSubmitting;
+		$[42] = t21;
+	} else t21 = $[42];
 	const t22 = form.state.isSubmitting && "...";
 	let t23;
-	if ($[46] !== form.state.isSubmitting || $[47] !== t21 || $[48] !== t22) {
+	if ($[43] !== form.state.isSubmitting || $[44] !== t21 || $[45] !== t22) {
 		t23 = /* @__PURE__ */ jsxs(Button, {
 			type: "submit",
 			disabled: form.state.isSubmitting,
@@ -274,13 +265,13 @@ const CreatePageModal = () => {
 				t22
 			]
 		});
-		$[46] = form.state.isSubmitting;
-		$[47] = t21;
-		$[48] = t22;
-		$[49] = t23;
-	} else t23 = $[49];
+		$[43] = form.state.isSubmitting;
+		$[44] = t21;
+		$[45] = t22;
+		$[46] = t23;
+	} else t23 = $[46];
 	let t24;
-	if ($[50] !== t14 || $[51] !== t16 || $[52] !== t18 || $[53] !== t20 || $[54] !== t23) {
+	if ($[47] !== t14 || $[48] !== t16 || $[49] !== t18 || $[50] !== t20 || $[51] !== t23) {
 		t24 = /* @__PURE__ */ jsxs(DialogContent, {
 			className: "flex max-h-[90vh] flex-col sm:max-w-lg",
 			children: [t13, /* @__PURE__ */ jsxs("form", {
@@ -294,24 +285,24 @@ const CreatePageModal = () => {
 				]
 			})]
 		});
-		$[50] = t14;
-		$[51] = t16;
-		$[52] = t18;
-		$[53] = t20;
-		$[54] = t23;
-		$[55] = t24;
-	} else t24 = $[55];
+		$[47] = t14;
+		$[48] = t16;
+		$[49] = t18;
+		$[50] = t20;
+		$[51] = t23;
+		$[52] = t24;
+	} else t24 = $[52];
 	let t25;
-	if ($[56] !== open || $[57] !== t24) {
+	if ($[53] !== open || $[54] !== t24) {
 		t25 = /* @__PURE__ */ jsx(Dialog, {
 			open,
 			onOpenChange: _temp3,
 			children: t24
 		});
-		$[56] = open;
-		$[57] = t24;
-		$[58] = t25;
-	} else t25 = $[58];
+		$[53] = open;
+		$[54] = t24;
+		$[55] = t25;
+	} else t25 = $[55];
 	return t25;
 };
 function _temp(state) {

package/dist/features/preview/components/DebouncedFieldEditor.js

@@ -2,45 +2,41 @@ import { useDebouncedField } from "../../../hooks/use-debounced-field.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Label } from "@camox/ui/label";
 import { Input } from "@camox/ui/input";
+import { Label } from "@camox/ui/label";
 import { Textarea } from "@camox/ui/textarea";
 
 //#region src/features/preview/components/DebouncedFieldEditor.tsx
 const DebouncedFieldEditor = (t0) => {
-	const $ = c(20);
-	if ($[0] !== "b055596bded307c924a7395888c92fcea4e52513ebc4fda5ab62fb2105997062") {
-		for (let $i = 0; $i < 20; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "b055596bded307c924a7395888c92fcea4e52513ebc4fda5ab62fb2105997062";
-	}
+	const $ = c(19);
 	const { label, placeholder, initialValue, onSave, disabled, rows } = t0;
 	const { value, setValue, onFocus, onBlur } = useDebouncedField(initialValue, onSave);
 	const inputId = React.useId();
 	let t1;
-	if ($[1] !== disabled || $[2] !== rows || $[3] !== setValue) {
+	if ($[0] !== disabled || $[1] !== rows || $[2] !== setValue) {
 		t1 = (newValue) => {
 			if (disabled) return;
 			if (rows) newValue = newValue.replace(/\n/g, " ");
 			setValue(newValue);
 		};
-		$[1] = disabled;
-		$[2] = rows;
-		$[3] = setValue;
-		$[4] = t1;
-	} else t1 = $[4];
+		$[0] = disabled;
+		$[1] = rows;
+		$[2] = setValue;
+		$[3] = t1;
+	} else t1 = $[3];
 	const handleChange = t1;
 	let t2;
-	if ($[5] !== inputId || $[6] !== label) {
+	if ($[4] !== inputId || $[5] !== label) {
 		t2 = /* @__PURE__ */ jsx(Label, {
 			htmlFor: inputId,
 			children: label
 		});
-		$[5] = inputId;
-		$[6] = label;
-		$[7] = t2;
-	} else t2 = $[7];
+		$[4] = inputId;
+		$[5] = label;
+		$[6] = t2;
+	} else t2 = $[6];
 	let t3;
-	if ($[8] !== disabled || $[9] !== handleChange || $[10] !== inputId || $[11] !== onBlur || $[12] !== onFocus || $[13] !== placeholder || $[14] !== rows || $[15] !== value) {
+	if ($[7] !== disabled || $[8] !== handleChange || $[9] !== inputId || $[10] !== onBlur || $[11] !== onFocus || $[12] !== placeholder || $[13] !== rows || $[14] !== value) {
 		t3 = rows ? /* @__PURE__ */ jsx(Textarea, {
 			id: inputId,
 			value,
@@ -60,26 +56,26 @@ const DebouncedFieldEditor = (t0) => {
 			placeholder,
 			disabled
 		});
-		$[8] = disabled;
-		$[9] = handleChange;
-		$[10] = inputId;
-		$[11] = onBlur;
-		$[12] = onFocus;
-		$[13] = placeholder;
-		$[14] = rows;
-		$[15] = value;
-		$[16] = t3;
-	} else t3 = $[16];
+		$[7] = disabled;
+		$[8] = handleChange;
+		$[9] = inputId;
+		$[10] = onBlur;
+		$[11] = onFocus;
+		$[12] = placeholder;
+		$[13] = rows;
+		$[14] = value;
+		$[15] = t3;
+	} else t3 = $[15];
 	let t4;
-	if ($[17] !== t2 || $[18] !== t3) {
+	if ($[16] !== t2 || $[17] !== t3) {
 		t4 = /* @__PURE__ */ jsxs("div", {
 			className: "space-y-2",
 			children: [t2, t3]
 		});
-		$[17] = t2;
-		$[18] = t3;
-		$[19] = t4;
-	} else t4 = $[19];
+		$[16] = t2;
+		$[17] = t3;
+		$[18] = t4;
+	} else t4 = $[18];
 	return t4;
 };
 

package/dist/features/preview/components/DerivedLayoutDialog.js

@@ -1,17 +1,19 @@
 import { useNavigate } from "../../navigation/navigation.js";
+import { useLocalizedPath } from "../../../lib/view-locale.js";
 import { routeSegments } from "../../../core/derivedRoutes.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@camox/ui/dialog";
 import { Label } from "@camox/ui/label";
-import { Input } from "@camox/ui/input";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@camox/ui/dialog";
+import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from "@camox/ui/input-group";
 
 //#region src/features/preview/components/DerivedLayoutDialog.tsx
-function DerivedLayoutDialog({ layout, projectSlug, currentParams, onClose }) {
+function DerivedLayoutDialog({ layout, projectUuid, currentParams, onClose }) {
 	const navigate = useNavigate();
+	const localized = useLocalizedPath();
 	const id = React.useId();
-	const storageKey = `camox:derived-preview:${projectSlug}:${layout._internal.id}`;
+	const storageKey = `camox:derived-preview:${projectUuid}:${layout._internal.id}`;
 	const [values, setValues] = React.useState(() => {
 		if (currentParams) return currentParams;
 		try {
@@ -23,16 +25,17 @@ function DerivedLayoutDialog({ layout, projectSlug, currentParams, onClose }) {
 	const [pending, setPending] = React.useState(false);
 	const [error, setError] = React.useState(null);
 	const segments = routeSegments(layout._internal.id);
-	const params = [...new Set(segments.filter((segment) => segment.startsWith("$")).map((segment_0) => segment_0.slice(1)))];
+	const params = [...new Set(segments.filter((segment) => segment.startsWith("$")).map((segment) => segment.slice(1)))];
 	const valid = params.every((param) => {
 		const value = values[param]?.trim();
 		return value && !value.includes("/") && value !== "." && value !== "..";
 	});
-	const path = `/${segments.map((segment_1) => {
-		if (!segment_1.startsWith("$")) return encodeURIComponent(segment_1);
-		const value_0 = values[segment_1.slice(1)]?.trim();
-		return value_0 ? encodeURIComponent(value_0) : segment_1;
-	}).join("/")}`;
+	const resolvedSegments = segments.map((segment) => {
+		if (!segment.startsWith("$")) return encodeURIComponent(segment);
+		const value = values[segment.slice(1)]?.trim();
+		return value ? encodeURIComponent(value) : segment;
+	});
+	const path = `/${resolvedSegments.join("/")}`;
 	return /* @__PURE__ */ jsx(Dialog, {
 		open: true,
 		onOpenChange: (open) => !open && onClose(),
@@ -47,7 +50,7 @@ function DerivedLayoutDialog({ layout, projectSlug, currentParams, onClose }) {
 				setPending(true);
 				setError(null);
 				try {
-					await navigate({ to: path });
+					await navigate({ to: localized(path) });
 					onClose();
 				} catch {
 					setError("Could not open this preview. Check the parameters and try again.");
@@ -57,24 +60,38 @@ function DerivedLayoutDialog({ layout, projectSlug, currentParams, onClose }) {
 			},
 			children: [
 				/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsxs(DialogTitle, { children: ["Preview ", layout._internal.title] }), /* @__PURE__ */ jsx(DialogDescription, { children: "Enter the path parameters for the page you want to preview." })] }),
-				params.map((param_0) => /* @__PURE__ */ jsxs("div", {
-					className: "space-y-2",
-					children: [/* @__PURE__ */ jsx(Label, {
-						htmlFor: `${id}-${param_0}`,
-						children: param_0
-					}), /* @__PURE__ */ jsx(Input, {
-						id: `${id}-${param_0}`,
-						required: true,
-						value: values[param_0] ?? "",
-						onChange: (event_0) => setValues((previous) => ({
-							...previous,
-							[param_0]: event_0.target.value
-						}))
-					})]
-				}, param_0)),
-				/* @__PURE__ */ jsx("p", {
-					className: "text-muted-foreground font-mono text-sm break-all",
-					children: path
+				params.map((param) => {
+					const index = segments.indexOf(`$${param}`);
+					const prefix = resolvedSegments.slice(0, index).join("/");
+					const suffix = segments.slice(index + 1).every((segment) => !segment.startsWith("$")) ? resolvedSegments.slice(index + 1).join("/") : "";
+					return /* @__PURE__ */ jsxs("div", {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ jsx(Label, {
+							htmlFor: `${id}-${param}`,
+							children: param
+						}), /* @__PURE__ */ jsxs(InputGroup, { children: [
+							/* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsxs(InputGroupText, {
+								className: "font-mono",
+								children: ["/", prefix && `${prefix}/`]
+							}) }),
+							/* @__PURE__ */ jsx(InputGroupInput, {
+								id: `${id}-${param}`,
+								required: true,
+								value: values[param] ?? "",
+								onChange: (event) => setValues((previous) => ({
+									...previous,
+									[param]: event.target.value
+								}))
+							}),
+							suffix && /* @__PURE__ */ jsx(InputGroupAddon, {
+								align: "inline-end",
+								children: /* @__PURE__ */ jsxs(InputGroupText, {
+									className: "font-mono",
+									children: ["/", suffix]
+								})
+							})
+						] })]
+					}, param);
 				}),
 				error && /* @__PURE__ */ jsx("p", {
 					role: "alert",