loopable-cli 0.2.1 → 0.3.0

package/.output/server/_ssr/loops-DHPjzG-t.mjs

@@ -0,0 +1,217 @@
+import { i as __toESM } from "../_runtime.mjs";
+import { K as require_jsx_runtime, a as MenuPortal, i as MenuPositioner, n as MenuTrigger, o as MenuPopup, q as require_react, r as MenuRoot, s as MenuItem, t as Separator } from "../_libs/@base-ui/react+[...].mjs";
+import { f as Link, m as useRouter } from "../_libs/@tanstack/react-router+[...].mjs";
+import { d as destinationLabel, l as connectorWorkflow, s as connectorManifest } from "./connections-Cqvb6Gw2.mjs";
+import { n as agentManifest } from "./agents-B_qo1gpL.mjs";
+import { B as ArrowUp, C as Ellipsis, N as CircleAlert, V as ArrowDown, i as Trash2, l as Plus } from "../_libs/lucide-react.mjs";
+import { n as toast } from "../_libs/sonner.mjs";
+import { P as cn, _ as Badge, b as removeLoop, s as Route$11, v as Button$1, w as toggleLoop, x as reorderLoop } from "./router-DdwREiOf.mjs";
+import { t as ConnectorIcon } from "./connector-icon-DrhVbhs6.mjs";
+import { a as List, o as PageHeader, t as Empty } from "./page-DZVxKvdn.mjs";
+import { t as Switch$1 } from "./switch-odxNO_S4.mjs";
+import { n as AlertDescription, r as AlertTitle, t as Alert } from "./alert-C2WBWfzo.mjs";
+import { n as useLiveRefresh } from "./use-live-tasks-BzhTkEOL.mjs";
+import { n as issuesFor, t as gapsFor } from "./gaps-CcvHiLcj.mjs";
+//#region node_modules/.nitro/vite/services/ssr/assets/loops-DHPjzG-t.js
+var import_react = /* @__PURE__ */ __toESM(require_react());
+var import_jsx_runtime = require_jsx_runtime();
+function DropdownMenu({ ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuRoot, {
+		"data-slot": "dropdown-menu",
+		...props
+	});
+}
+function DropdownMenuTrigger({ ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuTrigger, {
+		"data-slot": "dropdown-menu-trigger",
+		...props
+	});
+}
+function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuPositioner, {
+		className: "isolate z-50 outline-none",
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuPopup, {
+			"data-slot": "dropdown-menu-content",
+			className: cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className),
+			...props
+		})
+	}) });
+}
+function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuItem, {
+		"data-slot": "dropdown-menu-item",
+		"data-inset": inset,
+		"data-variant": variant,
+		className: cn("group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive", className),
+		...props
+	});
+}
+function DropdownMenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Separator, {
+		"data-slot": "dropdown-menu-separator",
+		className: cn("-mx-1 my-1 h-px bg-border", className),
+		...props
+	});
+}
+function LoopsPage() {
+	const { loops, readiness } = Route$11.useLoaderData();
+	useLiveRefresh();
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-6",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageHeader, {
+				title: "Loops",
+				description: "When two loops match the same thing, the higher one runs.",
+				actions: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button$1, {
+					nativeButton: false,
+					render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, { to: "/loops/new" }),
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Plus, {}), "New loop"]
+				})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Gaps, {
+				readiness,
+				loops
+			}),
+			loops.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Empty, {
+				action: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
+					variant: "outline",
+					nativeButton: false,
+					render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, { to: "/loops/new" }),
+					children: "New loop"
+				}),
+				children: "No loops yet."
+			}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(List, { children: loops.map((loop, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoopRow, {
+				loop,
+				readiness,
+				position: index + 1,
+				first: index === 0,
+				last: index === loops.length - 1
+			}, loop.id)) })
+		]
+	});
+}
+/** What still stands between these loops and running. */
+function Gaps({ readiness, loops }) {
+	const missing = gapsFor(readiness, loops);
+	if (missing.length === 0) return null;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Alert, { children: [
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CircleAlert, {}),
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertTitle, { children: "Nothing will run yet" }),
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertDescription, {
+			className: "flex flex-col gap-0.5",
+			children: missing.map((line) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: line }, line))
+		})
+	] });
+}
+/** Where this loop answers and with what, in a few words. */
+function summaryOf(loop) {
+	if (!connectorWorkflow(loop.connectorId, loop.workflowId)) return "Workflow no longer offered";
+	const agent = loop.agentId ? agentManifest(loop.agentId) : void 0;
+	return [destinationLabel(loop.actionConnectorId, loop.actionId), agent?.name ?? "Default agent"].join(" · ");
+}
+function LoopRow({ loop, readiness, position, first, last }) {
+	const router = useRouter();
+	const manifest = connectorManifest(loop.connectorId);
+	const issues = issuesFor(readiness, loop);
+	const [busy, setBusy] = (0, import_react.useState)(false);
+	const run = async (work, message) => {
+		setBusy(true);
+		try {
+			await work();
+			await router.invalidate();
+			if (message) toast.success(message);
+		} catch (error) {
+			toast.error(error instanceof Error ? error.message : String(error));
+		} finally {
+			setBusy(false);
+		}
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex items-center gap-3 px-4 py-3",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "w-4 shrink-0 text-center text-xs text-muted-foreground tabular-nums",
+				children: position
+			}),
+			manifest ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConnectorIcon, {
+				icon: manifest.icon,
+				accent: manifest.accent,
+				className: loop.enabled ? "size-8" : "size-8 opacity-50"
+			}) : null,
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Link, {
+				to: "/loops/$loopId",
+				params: { loopId: loop.id },
+				className: "group min-w-0 flex-1",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "truncate text-sm font-medium group-hover:underline",
+						children: loop.name
+					}), loop.enabled ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, {
+						variant: "secondary",
+						children: "Off"
+					})]
+				}), issues.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
+					className: "mt-0.5 flex items-center gap-1 truncate text-xs text-amber-700 dark:text-amber-500",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CircleAlert, { className: "size-3 shrink-0" }), issues[0]]
+				}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+					className: "mt-0.5 truncate text-xs text-muted-foreground",
+					children: summaryOf(loop)
+				})]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Switch$1, {
+				checked: loop.enabled,
+				"aria-label": loop.enabled ? "Turn off" : "Turn on",
+				disabled: busy,
+				onCheckedChange: (enabled) => run(() => toggleLoop({ data: {
+					id: loop.id,
+					enabled
+				} }), enabled ? `${loop.name} is on` : `${loop.name} is off`)
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DropdownMenu, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownMenuTrigger, {
+				render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
+					variant: "ghost",
+					size: "icon-sm",
+					"aria-label": "More",
+					disabled: busy
+				}),
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ellipsis, {})
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DropdownMenuContent, {
+				align: "end",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DropdownMenuItem, {
+						disabled: first,
+						onClick: () => run(() => reorderLoop({ data: {
+							id: loop.id,
+							direction: "up"
+						} })),
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowUp, {}), "Move up"]
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DropdownMenuItem, {
+						disabled: last,
+						onClick: () => run(() => reorderLoop({ data: {
+							id: loop.id,
+							direction: "down"
+						} })),
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowDown, {}), "Move down"]
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownMenuSeparator, {}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DropdownMenuItem, {
+						variant: "destructive",
+						onClick: () => {
+							if (!window.confirm(`Delete ${loop.name}? Its runs are deleted with it.`)) return;
+							run(() => removeLoop({ data: { id: loop.id } }), `Deleted ${loop.name}`);
+						},
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Trash2, {}), "Delete"]
+					})
+				]
+			})] })
+		]
+	});
+}
+//#endregion
+export { LoopsPage as component };

package/.output/server/_ssr/new-ChKBdcXJ.mjs

@@ -0,0 +1,245 @@
+import { K as require_jsx_runtime } from "../_libs/@base-ui/react+[...].mjs";
+import { f as Link, p as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
+import { l as connectorWorkflow, n as allTriggers, r as allWorkflows, s as connectorManifest } from "./connections-Cqvb6Gw2.mjs";
+import { f as PencilLine } from "../_libs/lucide-react.mjs";
+import { a as Route$9 } from "./router-DdwREiOf.mjs";
+import { t as ConnectorIcon } from "./connector-icon-DrhVbhs6.mjs";
+import { n as Field, o as PageHeader } from "./page-DZVxKvdn.mjs";
+import { a as SelectValue, i as SelectTrigger, n as SelectContent, r as SelectItem, t as Select$1 } from "./select-BtndHhHb.mjs";
+import { t as LoopForm } from "./loop-form-DWwOR05R.mjs";
+//#region node_modules/.nitro/vite/services/ssr/assets/new-ChKBdcXJ.js
+var import_jsx_runtime = require_jsx_runtime();
+/**
+* One of a connector's workflows, as a loop nobody has saved yet.
+*
+* Nothing here touches the database, which is the point: choosing a workflow
+* used to create the loop, so a look around the page left a live loop behind,
+* enabled and with none of its questions answered. Now choosing only fills a
+* form in, and the loop begins at Save.
+*
+* Deliberately client-safe, so the form can be filled in without a round trip
+* and without anything on the server having to remember a half-made loop.
+*/
+function draftForWorkflow(connectorId, workflowId) {
+	const workflow = connectorWorkflow(connectorId, workflowId);
+	if (!workflow) throw new Error(`Unknown workflow: ${workflowId}`);
+	return {
+		id: null,
+		name: workflow.name,
+		connectorId,
+		workflowId,
+		prompt: workflow.prompt,
+		guidance: null,
+		agentId: null,
+		settings: {},
+		actionConnectorId: workflow.actionConnectorId ?? connectorId,
+		actionId: workflow.actionId,
+		actionTarget: workflow.actionTarget ?? {},
+		pollEveryMs: workflow.pollEveryMs ?? null,
+		enabled: true
+	};
+}
+/** The trigger a custom loop starts on before anything is picked. */
+var CUSTOM_DEFAULT = {
+	connector: "slack",
+	workflow: "slack.ask"
+};
+function NewLoopPage() {
+	const { connector, workflow, custom } = Route$9.useSearch();
+	const chosen = connector && workflow && connectorWorkflow(connector, workflow) ? {
+		connector,
+		workflow
+	} : null;
+	if (custom) {
+		const start = chosen ?? CUSTOM_DEFAULT;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomLoop, {
+			connectorId: start.connector,
+			workflowId: start.workflow
+		});
+	}
+	return chosen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShapeLoop, {
+		connectorId: chosen.connector,
+		workflowId: chosen.workflow
+	}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChooseWorkflow, {});
+}
+/**
+* The second step, and the one that makes a loop. Nothing is written down
+* until the form is saved.
+*/
+function ShapeLoop({ connectorId, workflowId }) {
+	const workflow = connectorWorkflow(connectorId, workflowId);
+	const connector = connectorManifest(connectorId);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-8",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageHeader, {
+			back: {
+				to: "/loops/new",
+				label: "New loop"
+			},
+			icon: connector ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConnectorIcon, {
+				icon: connector.icon,
+				accent: connector.accent
+			}) : null,
+			title: workflow.name,
+			description: workflow.summary
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoopForm, { loop: draftForWorkflow(connectorId, workflowId) })]
+	});
+}
+/**
+* A loop with your own prompt. Underneath it is still one of the workflows,
+* since a workflow is what knows how to watch for something and read the
+* answer, but it starts with an empty prompt and a trigger you pick.
+*/
+function CustomLoop({ connectorId, workflowId }) {
+	const navigate = useNavigate();
+	const draft = {
+		...draftForWorkflow(connectorId, workflowId),
+		name: "Custom loop",
+		prompt: ""
+	};
+	const picker = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
+		label: "Starts when",
+		htmlFor: "custom-trigger",
+		className: "sm:max-w-sm",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Select$1, {
+			value: `${connectorId}::${workflowId}`,
+			onValueChange: (value) => {
+				if (!value) return;
+				const [connector, workflow] = value.split("::");
+				navigate({
+					to: "/loops/new",
+					search: {
+						custom: true,
+						connector,
+						workflow
+					},
+					replace: true
+				});
+			},
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectTrigger, {
+				id: "custom-trigger",
+				className: "w-full",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectValue, { children: () => {
+					return connectorWorkflow(connectorId, workflowId)?.when ?? workflowId;
+				} })
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectContent, { children: allTriggers().map(({ connector, trigger }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItem, {
+				value: `${connector.id}::${trigger.id}`,
+				children: trigger.when
+			}, `${connector.id}::${trigger.id}`)) })]
+		})
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-8",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageHeader, {
+			back: {
+				to: "/loops/new",
+				label: "New loop"
+			},
+			icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomIcon, {}),
+			title: "Custom loop",
+			description: "Pick what starts it, then say what the agent should do."
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoopForm, {
+			loop: draft,
+			trigger: picker
+		}, workflowId)]
+	});
+}
+function CustomIcon() {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+		className: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PencilLine, { className: "size-5" })
+	});
+}
+/** How many loops already use a workflow, said as a sentence rather than a count. */
+function inUse(loops, workflowId) {
+	const count = loops.filter((loop) => loop.workflowId === workflowId).length;
+	if (count === 0) return null;
+	return count === 1 ? "You have 1 loop like this" : `You have ${count} loops like this`;
+}
+function ChoiceCard({ icon, title, summary, note, ...link }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Link, {
+		to: "/loops/new",
+		search: link.search,
+		className: "flex items-start gap-3 rounded-xl bg-card p-4 ring-1 ring-foreground/10 transition-colors hover:bg-muted/50",
+		children: [icon, /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "min-w-0 flex-1",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+					className: "text-sm font-medium",
+					children: title
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+					className: "mt-1 text-xs text-muted-foreground",
+					children: summary
+				}),
+				note ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+					className: "mt-2 text-xs text-muted-foreground",
+					children: note
+				}) : null
+			]
+		})]
+	});
+}
+function workflowCard(connector, workflow, loops) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChoiceCard, {
+		icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConnectorIcon, {
+			icon: connector.icon,
+			accent: connector.accent,
+			className: "size-8"
+		}),
+		title: workflow.name,
+		summary: workflow.summary,
+		note: inUse(loops, workflow.id),
+		search: {
+			connector: connector.id,
+			workflow: workflow.id
+		}
+	}, workflow.id);
+}
+/**
+* Every loop is one of the workflows a connector offers, or a custom one
+* built on a workflow's trigger. Custom and Schedule come first: they are the
+* two not tied to something arriving from a service.
+*/
+function ChooseWorkflow() {
+	const { loops } = Route$9.useLoaderData();
+	const all = allWorkflows();
+	const scheduled = all.filter(({ connector }) => connector.id === "schedule");
+	const rest = all.filter(({ connector }) => connector.id !== "schedule");
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-6",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageHeader, {
+				back: {
+					to: "/loops",
+					label: "Loops"
+				},
+				title: "New loop"
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "grid gap-3 sm:grid-cols-2",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChoiceCard, {
+					icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PencilLine, { className: "size-4" })
+					}),
+					title: "Custom loop",
+					summary: "Pick a trigger and write your own prompt.",
+					search: { custom: true }
+				}), scheduled.map(({ connector, workflow }) => workflowCard(connector, workflow, loops))]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col gap-3",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
+					className: "text-sm font-medium text-muted-foreground",
+					children: "From a connector"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "grid gap-3 sm:grid-cols-2",
+					children: rest.map(({ connector, workflow }) => workflowCard(connector, workflow, loops))
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { NewLoopPage as component };

package/.output/server/_ssr/page-DZVxKvdn.mjs

@@ -0,0 +1,120 @@
+import "../_runtime.mjs";
+import { K as require_jsx_runtime, q as require_react } from "../_libs/@base-ui/react+[...].mjs";
+import { f as Link } from "../_libs/@tanstack/react-router+[...].mjs";
+import { I as ChevronLeft } from "../_libs/lucide-react.mjs";
+import { P as cn } from "./router-DdwREiOf.mjs";
+require_react();
+var import_jsx_runtime = require_jsx_runtime();
+function Label({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
+		"data-slot": "label",
+		className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
+		...props
+	});
+}
+/**
+* The top of every page: where it sits, what it is called, and what can be
+* done from here. One shape everywhere, so pages differ in what they show
+* rather than in how far the title is from the edge.
+*/
+function PageHeader({ title, description, back, icon, actions, children }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", {
+		className: "flex flex-col gap-3",
+		children: [back ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Link, {
+			to: back.to,
+			params: back.params,
+			search: back.search,
+			className: "-ml-1 flex w-fit items-center gap-0.5 text-sm text-muted-foreground hover:text-foreground",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronLeft, { className: "size-4" }), back.label]
+		}) : null, /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "flex flex-wrap items-start gap-3",
+			children: [
+				icon,
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "min-w-0 flex-1 basis-56",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", {
+							className: "text-xl font-semibold tracking-tight",
+							children: title
+						}),
+						description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+							className: "mt-1 text-sm text-muted-foreground",
+							children: description
+						}) : null,
+						children
+					]
+				}),
+				actions ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "flex shrink-0 items-center gap-2",
+					children: actions
+				}) : null
+			]
+		})]
+	});
+}
+/** A labelled control, with at most one short line of help under it. */
+function Field({ label, htmlFor, hint, className, children }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: cn("flex flex-col gap-1.5", className),
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, {
+				htmlFor,
+				children: label
+			}),
+			children,
+			hint ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+				className: "text-xs text-muted-foreground",
+				children: hint
+			}) : null
+		]
+	});
+}
+/**
+* One titled block of a form or a detail page. Title on the left and fields
+* on the right on a wide screen, stacked on a narrow one.
+*/
+function Section({ title, description, children, className }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
+		className: cn("grid gap-4 border-t py-6 first:border-t-0 first:pt-0 md:grid-cols-[11rem_1fr] md:gap-8", className),
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
+			className: "text-sm font-medium",
+			children: title
+		}), description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+			className: "mt-1 text-xs text-muted-foreground",
+			children: description
+		}) : null] }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "flex min-w-0 flex-col gap-4",
+			children
+		})]
+	});
+}
+/** A list of rows inside one bordered box, rather than a stack of cards. */
+function List({ className, children }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: cn("divide-y overflow-hidden rounded-xl bg-card ring-1 ring-foreground/10", className),
+		children
+	});
+}
+/** What a list says when it has nothing in it. */
+function Empty({ children, action }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col items-center gap-3 rounded-xl border border-dashed px-6 py-10 text-center text-sm text-muted-foreground",
+		children: [children, action]
+	});
+}
+/** Tabs that are links, so a tab can be bookmarked and shared. */
+function LinkTabs({ items }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", {
+		className: "flex gap-4 border-b",
+		children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, {
+			to: item.to,
+			params: item.params,
+			search: item.search,
+			replace: true,
+			className: cn("-mb-px flex items-center gap-1.5 border-b-2 pb-2 text-sm transition-colors", item.active ? "border-foreground font-medium text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"),
+			children: item.label
+		}, index))
+	});
+}
+//#endregion
+export { List as a, LinkTabs as i, Field as n, PageHeader as o, Label as r, Section as s, Empty as t };