@overvis/hmi-workspace-ui 0.1.0 → 0.1.1

package/dist/page-DpdkOGGb.js

@@ -0,0 +1,449 @@
+import { t as e } from "./rolldown-runtime-CGnMp29N.js";
+import { Bn as t, Kn as n, Lt as r, Qn as i, Wn as a, ii as o, zn as s } from "./quick-report-DEqqwQxR.js";
+import { f as c, h as l, m as u, n as d } from "./i18n-Dt6xbSK6.js";
+import { $ as f, B as p, H as m, K as h, Nt as g, R as _, U as v, V as y, X as b, Y as x, jt as S, xt as C } from "./alert-dialog-B60PF7S9.js";
+import { G as w, V as T } from "./spinner-BRcNKwjH.js";
+import { b as E } from "./panel-BCwBlB_h.js";
+import { r as D, t as O } from "./query-gate-DqmHsZ07.js";
+import { i as k, n as A, t as ee } from "./display-DSyEwQt8.js";
+import { t as te } from "./breadcrumbs-D2u8KZQo.js";
+import { a as ne, i as re, n as ie, r as j, t as M } from "./presence-code-cT6wxlTg.js";
+import { a as N, c as P, d as F, i as I, l as L, n as R, o as z, r as B, s as V, t as H, u as U } from "./catalog-list-LXuRix0-.js";
+import { t as W } from "./wireguard-docs-CC8XKBR7.js";
+import { useState as G } from "react";
+import { Fragment as K, jsx as q, jsxs as J } from "react/jsx-runtime";
+import { BookOpenIcon as Y, CableIcon as ae, PencilIcon as oe, PlusIcon as se, Trash2Icon as ce } from "lucide-react";
+import { formatAppDateTime as le, resolveLocalized as ue } from "@overvis/hmi-shared";
+import { useNavigate as de } from "@tanstack/react-router";
+import { endpointCreateFormSchema as fe, endpointCreateFormToInput as pe, endpointDefaultPort as me } from "@overvis/hmi-shared/endpoint";
+// src/workspace/setup/endpoints/form-problem.ts
+function X({ problem: e }) {
+	switch (e) {
+		case "name_required": return c("error_field_required");
+		case "hostname_invalid": return c("error_endpoint_hostname_invalid");
+		case "pin_invalid": return c("error_endpoint_pin_invalid");
+		case "public_key_invalid": return c("error_endpoint_public_key_invalid");
+		case "port_invalid": return c("error_endpoint_port_invalid");
+	}
+}
+// src/workspace/setup/endpoints/connection-indicator.tsx
+function he(e) {
+	if (e === void 0) return c("endpoint_status_state_unknown");
+	if (e == null) return c("endpoint_status_state_disconnected");
+	switch (e) {
+		case "connecting": return c("endpoint_status_state_connecting");
+		case "connected": return c("endpoint_status_state_connected");
+		case "disconnected": return c("endpoint_status_state_disconnected");
+		case "error": return c("endpoint_status_state_error");
+	}
+}
+function Z(e) {
+	return e === "connected" ? "bg-emerald-500" : e === "error" ? "bg-destructive" : e === "connecting" ? "bg-amber-500" : "bg-muted-foreground/40";
+}
+function ge({ endpointId: e }) {
+	l();
+	let t = k(e), n = t === void 0 ? void 0 : t?.state ?? null, r = he(n);
+	return /* @__PURE__ */ q("span", {
+		className: "inline-flex size-5 shrink-0 items-center justify-center",
+		title: r,
+		"aria-label": r,
+		role: "img",
+		children: /* @__PURE__ */ q("span", { className: g("size-2.5 rounded-full", Z(n)) })
+	});
+}
+// src/workspace/setup/endpoints/enabled-switch.tsx
+function _e({ workspaceId: e, endpoint: t, compact: n = !1, className: i }) {
+	let o = u(), s = d(), { enable: c, disable: l } = r(e), p = (e) => ({
+		onSuccess: () => {
+			s.success(e);
+		},
+		onError: (e) => {
+			s.error(a(e));
+		}
+	}), m = t.disabledSince == null, h = l.isPending || c.isPending;
+	return /* @__PURE__ */ J("div", {
+		className: i,
+		onClick: (e) => {
+			e.stopPropagation();
+		},
+		onKeyDown: (e) => {
+			e.stopPropagation();
+		},
+		children: [/* @__PURE__ */ J("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ q(f, {
+				checked: m,
+				disabled: h,
+				size: "sm",
+				"aria-label": o("endpoint_enabled_label"),
+				onCheckedChange: (e) => {
+					e ? c.mutate({
+						id: t.id,
+						baseRevision: t.revision
+					}, p(o("endpoint_enable_toast"))) : l.mutate({
+						id: t.id,
+						baseRevision: t.revision
+					}, p(o("endpoint_disable_toast")));
+				}
+			}), n ? null : /* @__PURE__ */ q("span", {
+				className: "text-sm text-muted-foreground",
+				children: o("endpoint_enabled_label")
+			})]
+		}), !n && t.disabledSince != null ? /* @__PURE__ */ q("p", {
+			className: "mt-1 text-xs text-muted-foreground",
+			children: o("endpoint_disabled_since", { since: le(t.disabledSince) })
+		}) : null]
+	});
+}
+function ve({ endpoint: e }) {
+	let t = u();
+	return e.disabledSince == null ? null : /* @__PURE__ */ q("span", {
+		className: "\n        inline-flex shrink-0 items-center rounded-md bg-muted px-1.5 py-0.5 text-xs font-medium\n        text-muted-foreground\n      ",
+		children: t("endpoint_disabled_badge")
+	});
+}
+// src/workspace/setup/endpoints/page.tsx
+var ye = /* @__PURE__ */ e({
+	CreateEndpointForm: () => $,
+	SetupEndpointsPage: () => Q
+});
+function Q({ workspaceId: e }) {
+	let t = u(), n = d(), r = l(), i = de(), s = o.endpoint.list.useQuery({ workspaceId: e }), { open: c } = W(), [f, m] = G(null);
+	return /* @__PURE__ */ J(L, { children: [
+		/* @__PURE__ */ q(E, {
+			icon: /* @__PURE__ */ q(ae, {}),
+			breadcrumbs: /* @__PURE__ */ q(te, { workspaceId: e }),
+			title: t("setup_endpoints_title"),
+			description: t("setup_endpoints_description"),
+			actions: /* @__PURE__ */ J(S, {
+				type: "button",
+				size: "sm",
+				onClick: () => {
+					i({
+						to: "/workspace/$workspaceId/setup/endpoints/new",
+						params: { workspaceId: e }
+					});
+				},
+				children: [/* @__PURE__ */ q(se, { "data-icon": "inline-start" }), t("endpoint_create_action")]
+			})
+		}),
+		/* @__PURE__ */ q(R, { children: /* @__PURE__ */ q(D, {
+			query: s,
+			loading: /* @__PURE__ */ J("div", {
+				className: "space-y-2",
+				children: [/* @__PURE__ */ q(C, { className: "h-10 w-full" }), /* @__PURE__ */ q(C, { className: "h-10 w-4/5" })]
+			}),
+			error: (e) => /* @__PURE__ */ q(O, { message: a(e) }),
+			isEmpty: (e) => e.endpoints.length === 0,
+			empty: /* @__PURE__ */ q(B, { children: t("setup_endpoints_empty") }),
+			children: ({ endpoints: n }) => /* @__PURE__ */ q(N, { children: n.map((n) => /* @__PURE__ */ J(U, {
+				"data-context-endpoint-id": n.id,
+				children: [
+					/* @__PURE__ */ q(ge, { endpointId: n.id }),
+					/* @__PURE__ */ J(P, {
+						to: "/workspace/$workspaceId/setup/endpoints/$endpointId/status",
+						params: {
+							workspaceId: e,
+							endpointId: n.id
+						},
+						children: [/* @__PURE__ */ J("div", {
+							className: "flex min-w-0 items-center gap-2",
+							children: [/* @__PURE__ */ q(V, { children: ue(n.name, r) }), /* @__PURE__ */ q(ve, { endpoint: n })]
+						}), /* @__PURE__ */ q(z, { children: n.kind === "pin" ? ee(n) : n.kind === "wireguard" ? A(n.port) : `${t("endpoint_list_host")}: ${n.hostname ?? "—"}:${String(n.port)}` })]
+					}),
+					/* @__PURE__ */ J(H, { children: [/* @__PURE__ */ q(_e, {
+						workspaceId: e,
+						endpoint: n,
+						compact: !0
+					}), /* @__PURE__ */ J(I, { children: [
+						n.kind === "wireguard" ? /* @__PURE__ */ q(F, {
+							"aria-label": t("endpoint_docs_action"),
+							onClick: () => {
+								c(n.id);
+							},
+							children: /* @__PURE__ */ q(Y, {})
+						}) : null,
+						/* @__PURE__ */ q(F, {
+							"aria-label": t("endpoint_edit_action"),
+							onClick: () => {
+								i({
+									to: "/workspace/$workspaceId/setup/endpoints/$endpointId",
+									params: {
+										workspaceId: e,
+										endpointId: n.id
+									}
+								});
+							},
+							children: /* @__PURE__ */ q(oe, {})
+						}),
+						/* @__PURE__ */ q(F, {
+							tone: "destructive",
+							"aria-label": t("endpoint_delete_action"),
+							onClick: () => {
+								m(n);
+							},
+							children: /* @__PURE__ */ q(ce, {})
+						})
+					] })] })
+				]
+			}, n.id)) })
+		}) }),
+		/* @__PURE__ */ q(_, {
+			open: f != null,
+			onOpenChange: (e) => {
+				e || m(null);
+			},
+			children: /* @__PURE__ */ q(p, { children: f ? /* @__PURE__ */ q(be, {
+				workspaceId: e,
+				endpointId: f.id,
+				baseRevision: f.revision,
+				onCancel: () => {
+					m(null);
+				},
+				onDeleted: () => {
+					m(null), n.success(t("endpoint_delete_toast"));
+				}
+			}) : null })
+		})
+	] });
+}
+function $({ workspaceId: e, onCancel: a, onCreated: o }) {
+	let l = u(), f = d(), { open: p } = W(), g = r(e).create, _ = ne(), [C, E] = G(null), D = {
+		kind: "pin",
+		name: l("endpoint_default_name"),
+		hostname: "",
+		pinCode: "",
+		publicKey: "",
+		port: String(me),
+		authorizationCode: ""
+	}, O = n({
+		defaultValues: D,
+		validators: s({
+			schema: fe,
+			submit: async (n) => {
+				let r = pe(n, {
+					workspaceId: e,
+					defaultName: c("endpoint_default_name")
+				});
+				if (!r.ok) return t(r, X);
+				let i = r.input;
+				if (i.kind === "pin") {
+					if (C == null) {
+						let t = await _.begin({
+							workspaceId: e,
+							pinCode: i.pinCode
+						});
+						if (t === "closed") return null;
+						if (t != null) return E({
+							...t,
+							pinCode: i.pinCode
+						}), null;
+					} else {
+						let e = M(n.authorizationCode);
+						if (!e.ok) return { fields: { authorizationCode: () => c("endpoint_presence_code_invalid") } };
+						i = {
+							...i,
+							pinCode: C.pinCode,
+							challengeId: C.challengeId,
+							...e.code == null ? {} : { authorizationCode: e.code }
+						};
+					}
+				}
+				let a;
+				try {
+					a = await g.mutateAsync(i);
+				} catch (e) {
+					throw C != null && !re(e) && (_.cancel(C.challengeId), E(null), O.setFieldValue("authorizationCode", "")), e;
+				}
+				return C != null && _.settle(C.challengeId), f.success(l("endpoint_create_toast")), queueMicrotask(() => {
+					o({
+						id: a.id,
+						kind: a.kind
+					}), a.kind === "wireguard" && p(a.id);
+				}), null;
+			},
+			mapError: (e, t) => j(e, t, C?.codeDisplayed ?? !0)
+		}),
+		onSubmitInvalid: i
+	});
+	return /* @__PURE__ */ q(O.AppForm, { children: /* @__PURE__ */ J(O.FormRoot, {
+		layout: "dialog",
+		children: [
+			/* @__PURE__ */ J(v, { children: [/* @__PURE__ */ q(h, { children: l(C == null ? "endpoint_create_title" : "endpoint_presence_title") }), C == null ? /* @__PURE__ */ q(O.Subscribe, {
+				selector: (e) => e.values.kind,
+				children: (e) => /* @__PURE__ */ q(y, { children: l(e === "pin" ? "endpoint_create_description_pin" : e === "wireguard" ? "endpoint_create_description_wireguard" : "endpoint_create_description") })
+			}) : /* @__PURE__ */ q(y, { children: l("endpoint_presence_button") })] }),
+			/* @__PURE__ */ J(T, { children: [C == null ? null : /* @__PURE__ */ J(K, { children: [
+				/* @__PURE__ */ q(O.Subscribe, {
+					selector: (e) => e.isSubmitting,
+					children: (e) => /* @__PURE__ */ q(ie, {
+						challengeId: C.challengeId,
+						paused: e,
+						onDone: () => {
+							O.setFieldValue("authorizationCode", ""), O.handleSubmit();
+						}
+					})
+				}),
+				/* @__PURE__ */ q("p", {
+					className: "text-sm",
+					children: C.codeDisplayed ? l("endpoint_presence_or_code") : l("endpoint_presence_button_only")
+				}),
+				C.codeDisplayed ? /* @__PURE__ */ q(O.AppField, {
+					name: "authorizationCode",
+					children: (e) => /* @__PURE__ */ q(e.TextField, {
+						label: l("endpoint_presence_code_label"),
+						id: "endpoint-authorization-code",
+						autoComplete: "off",
+						spellCheck: !1,
+						inputMode: "numeric",
+						autoFocus: !0
+					})
+				}) : null
+			] }), C == null ? /* @__PURE__ */ q(O.Subscribe, {
+				selector: (e) => e.isSubmitting,
+				children: (e) => /* @__PURE__ */ J(w, {
+					disabled: e,
+					className: "contents",
+					children: [
+						/* @__PURE__ */ q(O.AppField, {
+							name: "kind",
+							children: (e) => /* @__PURE__ */ J("div", {
+								className: "space-y-2",
+								children: [/* @__PURE__ */ q("p", {
+									className: "text-sm font-medium",
+									children: l("endpoint_field_kind")
+								}), /* @__PURE__ */ J(x, {
+									variant: "outline",
+									size: "sm",
+									spacing: 0,
+									value: [e.state.value],
+									onValueChange: (t) => {
+										let n = t[0];
+										(n === "direct" || n === "pin" || n === "wireguard") && e.handleChange(n);
+									},
+									className: "w-full",
+									children: [
+										/* @__PURE__ */ q(b, {
+											value: "pin",
+											className: "flex-1",
+											children: l("endpoint_kind_pin")
+										}),
+										/* @__PURE__ */ q(b, {
+											value: "wireguard",
+											className: "flex-1",
+											children: l("endpoint_kind_wireguard")
+										}),
+										/* @__PURE__ */ q(b, {
+											value: "direct",
+											className: "flex-1",
+											children: l("endpoint_kind_direct")
+										})
+									]
+								})]
+							})
+						}),
+						/* @__PURE__ */ q(O.AppField, {
+							name: "name",
+							children: (e) => /* @__PURE__ */ q(e.TextField, {
+								label: l("endpoint_field_name"),
+								id: "endpoint-name",
+								autoFocus: !0
+							})
+						}),
+						/* @__PURE__ */ q(O.Subscribe, {
+							selector: (e) => e.values.kind,
+							children: (e) => e === "pin" ? /* @__PURE__ */ q(O.AppField, {
+								name: "pinCode",
+								children: (e) => /* @__PURE__ */ q(e.TextField, {
+									label: l("endpoint_field_pin_code"),
+									id: "endpoint-pin",
+									autoComplete: "off",
+									spellCheck: !1
+								})
+							}) : e === "wireguard" ? /* @__PURE__ */ J("div", {
+								className: "\n                            grid grid-cols-1 gap-4\n                            sm:grid-cols-[minmax(0,1fr)_6.5rem]\n                          ",
+								children: [/* @__PURE__ */ q(O.AppField, {
+									name: "publicKey",
+									children: (e) => /* @__PURE__ */ q(e.TextField, {
+										label: l("endpoint_field_public_key"),
+										id: "endpoint-public-key",
+										autoComplete: "off",
+										spellCheck: !1
+									})
+								}), /* @__PURE__ */ q(O.AppField, {
+									name: "port",
+									children: (e) => /* @__PURE__ */ q(e.TextField, {
+										label: l("endpoint_field_port"),
+										id: "endpoint-port",
+										type: "number",
+										inputMode: "numeric"
+									})
+								})]
+							}) : /* @__PURE__ */ J("div", {
+								className: "\n                            grid grid-cols-1 gap-4\n                            sm:grid-cols-[minmax(0,1fr)_6.5rem]\n                          ",
+								children: [/* @__PURE__ */ q(O.AppField, {
+									name: "hostname",
+									children: (e) => /* @__PURE__ */ q(e.TextField, {
+										label: l("endpoint_field_hostname"),
+										id: "endpoint-hostname",
+										autoComplete: "off",
+										spellCheck: !1
+									})
+								}), /* @__PURE__ */ q(O.AppField, {
+									name: "port",
+									children: (e) => /* @__PURE__ */ q(e.TextField, {
+										label: l("endpoint_field_port"),
+										id: "endpoint-port",
+										type: "number",
+										inputMode: "numeric"
+									})
+								})]
+							})
+						})
+					]
+				})
+			}) : null] }),
+			/* @__PURE__ */ J(m, { children: [/* @__PURE__ */ q(S, {
+				type: "button",
+				variant: "outline",
+				onClick: () => {
+					a();
+				},
+				children: l("action_cancel")
+			}), /* @__PURE__ */ q(O.SubmitButton, {
+				label: C == null ? l("endpoint_create_submit") : C.codeDisplayed ? l("endpoint_presence_submit") : l("endpoint_presence_waiting"),
+				pendingLabel: l("action_creating"),
+				disabled: C != null && !C.codeDisplayed
+			})] })
+		]
+	}) });
+}
+function be({ workspaceId: e, endpointId: t, baseRevision: a, onCancel: o, onDeleted: c }) {
+	let l = u(), d = r(e).remove, f = n({
+		defaultValues: {},
+		validators: s({ submit: async () => (await d.mutateAsync({
+			id: t,
+			baseRevision: a
+		}), null) }),
+		onSubmitInvalid: i,
+		onSubmit: () => {
+			c();
+		}
+	});
+	return /* @__PURE__ */ q(f.AppForm, { children: /* @__PURE__ */ J(f.FormRoot, {
+		layout: "dialog",
+		children: [/* @__PURE__ */ J(v, { children: [/* @__PURE__ */ q(h, { children: l("endpoint_delete_confirm_title") }), /* @__PURE__ */ q(y, { children: l("endpoint_delete_confirm_description") })] }), /* @__PURE__ */ J(m, { children: [/* @__PURE__ */ q(S, {
+			type: "button",
+			variant: "outline",
+			onClick: () => {
+				o();
+			},
+			children: l("action_cancel")
+		}), /* @__PURE__ */ q(f.SubmitButton, {
+			label: l("endpoint_delete_confirm_submit"),
+			pendingLabel: l("action_deleting"),
+			variant: "destructive"
+		})] })]
+	}) });
+}
+export { X as i, Q as n, ye as r, $ as t };