@burdenoff/microfe-vibecontrols 2026.601.10 → 2026.601.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,36 +1,38 @@
1
1
  import { useCreateTunnelMutation as e, useListAgentsQuery as t, useListTunnelProvidersQuery as n } from "../../generated/wspace-operations.js";
2
2
  import { useTr as r } from "../../shared/hooks/useTr.js";
3
- import { QuotaExhaustedDialog as i } from "../shared/QuotaExhaustedDialog.js";
4
- import { getQuotaDialogContent as a, isQuotaExhaustedError as o, markQuotaHandledLocally as s } from "../../utils/quotaUtils.js";
5
- import { PageHeader as ee } from "../shared/PageHeader.js";
6
- import { LoadingState as c } from "../shared/LoadingState.js";
7
- import { ErrorState as l } from "../shared/ErrorState.js";
8
- import { TunnelEnvironment as u, TunnelProtocol as d, TunnelProviderKey as f } from "../../generated/wspace-types.js";
9
- import { EntityTagPicker as p } from "../shared/EntityTagPicker.js";
10
- import { useDraftEntityTags as m } from "../../hooks/useDraftEntityTags.js";
11
- import { LINK_TO_VIBE_DEFAULT as te, LinkToVibePanel as ne, linkToVibeInput as re } from "../shared/LinkToVibePanel.js";
3
+ import { QuotaExhaustedDialog as ee } from "../shared/QuotaExhaustedDialog.js";
4
+ import { getQuotaDialogContent as i, isQuotaExhaustedError as a, markQuotaHandledLocally as o } from "../../utils/quotaUtils.js";
5
+ import { useVibeControls as s } from "../../providers/VibeControlsProvider.js";
6
+ import { PageHeader as c } from "../shared/PageHeader.js";
7
+ import { LoadingState as te } from "../shared/LoadingState.js";
8
+ import { ErrorState as ne } from "../shared/ErrorState.js";
9
+ import { TunnelEnvironment as l, TunnelProtocol as u, TunnelProviderKey as d } from "../../generated/wspace-types.js";
10
+ import { EntityTagPicker as f } from "../shared/EntityTagPicker.js";
11
+ import { useDraftEntityTags as p } from "../../hooks/useDraftEntityTags.js";
12
+ import { LINK_TO_VIBE_DEFAULT as re, LinkToVibePanel as ie, linkToVibeInput as ae } from "../shared/LinkToVibePanel.js";
12
13
  import "../shared/index.js";
13
- import { useCallback as h, useMemo as g, useState as _ } from "react";
14
- import { useNavigate as v } from "react-router-dom";
15
- import { AnimatePresence as y, motion as b } from "framer-motion";
16
- import { Fragment as ie, jsx as x, jsxs as S } from "react/jsx-runtime";
17
- import { Stepper as C } from "@burdenoff/fe-libs/ui";
14
+ import { useCallback as m, useMemo as h, useState as g } from "react";
15
+ import { useNavigate as oe } from "react-router-dom";
16
+ import { AnimatePresence as se, motion as _ } from "framer-motion";
17
+ import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
18
+ import { Stepper as x } from "@burdenoff/fe-libs/ui";
19
+ import { useEventBus as S } from "@burdenoff/fe-libs/shared/events";
18
20
  //#region src/components/tunnels/TunnelCreateWizard.tsx
19
- var w = /^[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?$/, T = {
20
- providerKey: f.Vibetunnels,
21
+ var C = /^[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?$/, w = {
22
+ providerKey: d.Vibetunnels,
21
23
  agentId: "",
22
24
  name: "",
23
25
  description: "",
24
- protocol: d.Http,
26
+ protocol: u.Http,
25
27
  localHost: "127.0.0.1",
26
28
  localPort: 3e3,
27
29
  hostnameKind: "managed",
28
30
  subdomain: "",
29
- environment: u.Prod,
31
+ environment: l.Prod,
30
32
  customDomain: "",
31
33
  basicAuthUser: "",
32
34
  basicAuthPassword: ""
33
- }, E = [
35
+ }, T = [
34
36
  {
35
37
  id: "provider",
36
38
  label: "Provider"
@@ -52,99 +54,102 @@ var w = /^[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?$/, T = {
52
54
  label: "Review"
53
55
  }
54
56
  ];
55
- function D() {
56
- let D = r(), A = v(), [j, M] = _(0), [N, P] = _(T), [F, I] = _(null), [L, R] = _(!1), [z, B] = _(!1), [V, H] = _(te), { setDraftTagIds: U, flushTags: W } = m("VIBECONTROLS_TUNNEL"), { data: G, loading: K, error: q } = n(), { data: J } = t({ variables: { pagination: { limit: 100 } } }), [ae, { loading: Y }] = e(), X = h((e, t) => {
57
- P((n) => ({
57
+ function E() {
58
+ let E = r(), k = oe(), A = S(), { workspaceId: j } = s(), [M, N] = g(0), [P, F] = g(w), [I, L] = g(null), [R, z] = g(!1), [B, V] = g(!1), [H, U] = g(re), { setDraftTagIds: W, flushTags: G } = p("VIBECONTROLS_TUNNEL"), { data: K, loading: ce, error: q } = n(), { data: le } = t({ variables: { pagination: { limit: 100 } } }), [ue, { loading: J }] = e(), Y = m((e, t) => {
59
+ F((n) => ({
58
60
  ...n,
59
61
  [e]: t
60
62
  }));
61
- }, []), oe = h((e) => {
62
- P((t) => ({
63
+ }, []), X = m((e) => {
64
+ F((t) => ({
63
65
  ...t,
64
66
  providerKey: e,
65
- hostnameKind: e === f.Cloudflare ? "auto" : "managed"
67
+ hostnameKind: e === d.Cloudflare ? "auto" : "managed"
66
68
  }));
67
- }, []), Z = g(() => [...G?.tunnelProviders ?? []].sort((e, t) => {
69
+ }, []), Z = h(() => [...K?.tunnelProviders ?? []].sort((e, t) => {
68
70
  let n = (e) => e === "VIBETUNNELS" ? 0 : e === "CLOUDFLARE" ? 1 : 2, r = n(e.key) - n(t.key);
69
71
  return r === 0 ? e.key.localeCompare(t.key) : r;
70
- }), [G]), Q = g(() => Z.find((e) => e.key === N.providerKey), [Z, N.providerKey])?.capabilities, $ = N.providerKey === f.Cloudflare, se = g(() => {
71
- if (!Q) return [d.Http];
72
+ }), [K]), Q = h(() => Z.find((e) => e.key === P.providerKey), [Z, P.providerKey])?.capabilities, $ = P.providerKey === d.Cloudflare, de = h(() => {
73
+ if (!Q) return [u.Http];
72
74
  let e = [];
73
- return Q.supportsHttp && e.push(d.Http), Q.supportsHttps && e.push(d.Https), Q.supportsTcp && e.push(d.Tcp), e;
74
- }, [Q]), ce = g(() => j === 0 ? !!(N.providerKey && N.agentId && N.name.trim()) : j === 1 ? N.localPort > 0 && N.localPort < 65536 : j === 2 ? N.hostnameKind === "managed" ? !!(N.subdomain && w.test(N.subdomain)) : N.hostnameKind === "custom" ? N.customDomain.trim().includes(".") : $ : !0, [
75
- j,
76
- N,
75
+ return Q.supportsHttp && e.push(u.Http), Q.supportsHttps && e.push(u.Https), Q.supportsTcp && e.push(u.Tcp), e;
76
+ }, [Q]), fe = h(() => M === 0 ? !!(P.providerKey && P.agentId && P.name.trim()) : M === 1 ? P.localPort > 0 && P.localPort < 65536 : M === 2 ? P.hostnameKind === "managed" ? !!(P.subdomain && C.test(P.subdomain)) : P.hostnameKind === "custom" ? P.customDomain.trim().includes(".") : $ : !0, [
77
+ M,
78
+ P,
77
79
  $
78
- ]), le = () => M((e) => Math.min(e + 1, E.length - 1)), ue = () => M((e) => Math.max(e - 1, 0)), de = async () => {
79
- I(null);
80
+ ]), pe = () => N((e) => Math.min(e + 1, T.length - 1)), me = () => N((e) => Math.max(e - 1, 0)), he = async () => {
81
+ L(null);
80
82
  try {
81
- let e = await ae({ variables: { input: {
82
- agentId: N.agentId,
83
- name: N.name,
84
- description: N.description || void 0,
85
- providerKey: N.providerKey,
86
- protocol: N.protocol,
87
- localHost: N.localHost,
88
- localPort: N.localPort,
89
- environment: N.environment,
90
- basicAuthUser: N.basicAuthUser || void 0,
91
- basicAuthPassword: N.basicAuthPassword || void 0,
92
- managedSubdomain: N.hostnameKind === "managed" ? N.subdomain : void 0,
93
- ...re(V)
83
+ let e = await ue({ variables: { input: {
84
+ agentId: P.agentId,
85
+ name: P.name,
86
+ description: P.description || void 0,
87
+ providerKey: P.providerKey,
88
+ protocol: P.protocol,
89
+ localHost: P.localHost,
90
+ localPort: P.localPort,
91
+ environment: P.environment,
92
+ basicAuthUser: P.basicAuthUser || void 0,
93
+ basicAuthPassword: P.basicAuthPassword || void 0,
94
+ managedSubdomain: P.hostnameKind === "managed" ? P.subdomain : void 0,
95
+ ...ae(H)
94
96
  } } });
95
97
  if (e.error) {
96
- if (o(e.error)) {
97
- s(), B(!0);
98
+ if (a(e.error)) {
99
+ o(), V(!0), A.emitCustom("vibecontrols.quota.tunnel_limit_hit", { workspaceId: j ?? void 0 });
98
100
  return;
99
101
  }
100
- I(e.error.message);
102
+ L(e.error.message);
101
103
  return;
102
104
  }
103
105
  let t = e.data?.createTunnel.id;
104
106
  if (t) {
105
- R(!0);
107
+ A.emitCustom("vibecontrols.tunnel.created", {
108
+ workspaceId: j ?? void 0,
109
+ tunnelId: t
110
+ }), z(!0);
106
111
  try {
107
- await W(t);
112
+ await G(t);
108
113
  } finally {
109
- R(!1);
114
+ z(!1);
110
115
  }
111
- A(`/vibecontrols/tunnels/${t}`);
116
+ k(`/vibecontrols/tunnels/${t}`);
112
117
  }
113
118
  } catch (e) {
114
- if (o(e)) {
115
- I(null), s(), B(!0);
119
+ if (a(e)) {
120
+ L(null), o(), V(!0), A.emitCustom("vibecontrols.quota.tunnel_limit_hit", { workspaceId: j ?? void 0 });
116
121
  return;
117
122
  }
118
- I(e instanceof Error ? e.message : String(e));
123
+ L(e instanceof Error ? e.message : String(e));
119
124
  }
120
125
  };
121
- return K ? /* @__PURE__ */ x(c, { message: "Loading providers" }) : q ? /* @__PURE__ */ x(l, {
126
+ return ce ? /* @__PURE__ */ y(te, { message: "Loading providers" }) : q ? /* @__PURE__ */ y(ne, {
122
127
  title: "Failed to load providers",
123
128
  message: q.message,
124
129
  onRetry: () => window.location.reload()
125
- }) : /* @__PURE__ */ S("div", {
130
+ }) : /* @__PURE__ */ b("div", {
126
131
  className: "p-6 max-w-3xl mx-auto",
127
132
  children: [
128
- /* @__PURE__ */ x(ee, {
133
+ /* @__PURE__ */ y(c, {
129
134
  breadcrumb: [{
130
135
  label: "Tunnels",
131
136
  path: "/vibecontrols/tunnels"
132
137
  }, { label: "New tunnel" }],
133
- title: D("vibecontrols.tunnels.createTitle", "Create tunnel"),
134
- description: D("vibecontrols.tunnels.createDescription", "Expose a local service through a managed tunnel.")
138
+ title: E("vibecontrols.tunnels.createTitle", "Create tunnel"),
139
+ description: E("vibecontrols.tunnels.createDescription", "Expose a local service through a managed tunnel.")
135
140
  }),
136
- /* @__PURE__ */ x(C, {
141
+ /* @__PURE__ */ y(x, {
137
142
  className: "mb-6",
138
- active: j,
139
- onStepClick: (e) => e <= j && M(e),
140
- steps: E.map((e) => ({
143
+ active: M,
144
+ onStepClick: (e) => e <= M && N(e),
145
+ steps: T.map((e) => ({
141
146
  key: e.id,
142
147
  label: e.label
143
148
  }))
144
149
  }),
145
- /* @__PURE__ */ x(y, {
150
+ /* @__PURE__ */ y(se, {
146
151
  mode: "wait",
147
- children: /* @__PURE__ */ S(b.div, {
152
+ children: /* @__PURE__ */ b(_.div, {
148
153
  initial: {
149
154
  opacity: 0,
150
155
  x: 6
@@ -160,109 +165,109 @@ function D() {
160
165
  transition: { duration: .15 },
161
166
  className: "rounded-lg border border-border-subtle bg-bg-surface p-6",
162
167
  children: [
163
- j === 0 && /* @__PURE__ */ S("div", {
168
+ M === 0 && /* @__PURE__ */ b("div", {
164
169
  className: "space-y-4",
165
170
  children: [
166
- /* @__PURE__ */ x("h3", {
171
+ /* @__PURE__ */ y("h3", {
167
172
  className: "text-sm font-semibold text-text-primary",
168
173
  children: "Provider"
169
174
  }),
170
- /* @__PURE__ */ x("div", {
175
+ /* @__PURE__ */ y("div", {
171
176
  className: "grid gap-3 sm:grid-cols-2",
172
- children: Z.map((e) => /* @__PURE__ */ S("button", {
177
+ children: Z.map((e) => /* @__PURE__ */ b("button", {
173
178
  type: "button",
174
- onClick: () => oe(e.key),
175
- className: `rounded-lg border p-4 text-left transition-colors ${N.providerKey === e.key ? "border-action-primary-bg bg-bg-sunken" : "border-border-subtle hover:border-border-default"}`,
179
+ onClick: () => X(e.key),
180
+ className: `rounded-lg border p-4 text-left transition-colors ${P.providerKey === e.key ? "border-action-primary-bg bg-bg-sunken" : "border-border-subtle hover:border-border-default"}`,
176
181
  children: [
177
- /* @__PURE__ */ x("div", {
182
+ /* @__PURE__ */ y("div", {
178
183
  className: "font-semibold text-text-primary",
179
184
  children: e.displayName
180
185
  }),
181
- /* @__PURE__ */ x("div", {
186
+ /* @__PURE__ */ y("div", {
182
187
  className: "text-xs text-text-muted mt-1",
183
188
  children: e.key
184
189
  }),
185
- e.description && /* @__PURE__ */ x("div", {
190
+ e.description && /* @__PURE__ */ y("div", {
186
191
  className: "text-xs text-text-secondary mt-2",
187
192
  children: e.description
188
193
  })
189
194
  ]
190
195
  }, e.id))
191
196
  }),
192
- /* @__PURE__ */ x(O, {
197
+ /* @__PURE__ */ y(D, {
193
198
  label: "Agent",
194
- children: /* @__PURE__ */ S("select", {
195
- value: N.agentId,
196
- onChange: (e) => X("agentId", e.target.value),
199
+ children: /* @__PURE__ */ b("select", {
200
+ value: P.agentId,
201
+ onChange: (e) => Y("agentId", e.target.value),
197
202
  className: "w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary",
198
- children: [/* @__PURE__ */ x("option", {
203
+ children: [/* @__PURE__ */ y("option", {
199
204
  value: "",
200
205
  children: "Select agent"
201
- }), (J?.vibecontrolsAgents ?? []).map((e) => /* @__PURE__ */ x("option", {
206
+ }), (le?.vibecontrolsAgents ?? []).map((e) => /* @__PURE__ */ y("option", {
202
207
  value: e.id,
203
208
  children: e.name
204
209
  }, e.id))]
205
210
  })
206
211
  }),
207
- /* @__PURE__ */ x(O, {
212
+ /* @__PURE__ */ y(D, {
208
213
  label: "Name",
209
- children: /* @__PURE__ */ x("input", {
214
+ children: /* @__PURE__ */ y("input", {
210
215
  "aria-label": "My dev tunnel",
211
216
  type: "text",
212
- value: N.name,
213
- onChange: (e) => X("name", e.target.value),
217
+ value: P.name,
218
+ onChange: (e) => Y("name", e.target.value),
214
219
  placeholder: "My dev tunnel",
215
220
  className: "w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-muted"
216
221
  })
217
222
  }),
218
- /* @__PURE__ */ x(O, {
223
+ /* @__PURE__ */ y(D, {
219
224
  label: "Description (optional)",
220
- children: /* @__PURE__ */ x("input", {
225
+ children: /* @__PURE__ */ y("input", {
221
226
  "aria-label": "control",
222
227
  type: "text",
223
- value: N.description,
224
- onChange: (e) => X("description", e.target.value),
228
+ value: P.description,
229
+ onChange: (e) => Y("description", e.target.value),
225
230
  className: "w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-muted"
226
231
  })
227
232
  })
228
233
  ]
229
234
  }),
230
- j === 1 && /* @__PURE__ */ S("div", {
235
+ M === 1 && /* @__PURE__ */ b("div", {
231
236
  className: "space-y-4",
232
237
  children: [
233
- /* @__PURE__ */ x("h3", {
238
+ /* @__PURE__ */ y("h3", {
234
239
  className: "text-sm font-semibold text-text-primary",
235
240
  children: "Protocol & target"
236
241
  }),
237
- /* @__PURE__ */ x(O, {
242
+ /* @__PURE__ */ y(D, {
238
243
  label: "Protocol",
239
- children: /* @__PURE__ */ x("div", {
244
+ children: /* @__PURE__ */ y("div", {
240
245
  className: "flex gap-2",
241
- children: se.map((e) => /* @__PURE__ */ x("button", {
246
+ children: de.map((e) => /* @__PURE__ */ y("button", {
242
247
  type: "button",
243
- onClick: () => X("protocol", e),
244
- className: `rounded-md border px-4 py-2 text-sm ${N.protocol === e ? "border-action-primary-bg bg-bg-sunken text-text-primary" : "border-border-subtle text-text-secondary hover:border-border-default"}`,
248
+ onClick: () => Y("protocol", e),
249
+ className: `rounded-md border px-4 py-2 text-sm ${P.protocol === e ? "border-action-primary-bg bg-bg-sunken text-text-primary" : "border-border-subtle text-text-secondary hover:border-border-default"}`,
245
250
  children: e
246
251
  }, e))
247
252
  })
248
253
  }),
249
- /* @__PURE__ */ x(O, {
254
+ /* @__PURE__ */ y(D, {
250
255
  label: "Local host",
251
- children: /* @__PURE__ */ x("input", {
256
+ children: /* @__PURE__ */ y("input", {
252
257
  "aria-label": "control",
253
258
  type: "text",
254
- value: N.localHost,
255
- onChange: (e) => X("localHost", e.target.value),
259
+ value: P.localHost,
260
+ onChange: (e) => Y("localHost", e.target.value),
256
261
  className: "w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary"
257
262
  })
258
263
  }),
259
- /* @__PURE__ */ x(O, {
264
+ /* @__PURE__ */ y(D, {
260
265
  label: "Local port",
261
- children: /* @__PURE__ */ x("input", {
266
+ children: /* @__PURE__ */ y("input", {
262
267
  "aria-label": "control",
263
268
  type: "number",
264
- value: N.localPort,
265
- onChange: (e) => X("localPort", parseInt(e.target.value, 10) || 0),
269
+ value: P.localPort,
270
+ onChange: (e) => Y("localPort", parseInt(e.target.value, 10) || 0),
266
271
  min: 1,
267
272
  max: 65535,
268
273
  className: "w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary"
@@ -270,278 +275,278 @@ function D() {
270
275
  })
271
276
  ]
272
277
  }),
273
- j === 2 && /* @__PURE__ */ S("div", {
278
+ M === 2 && /* @__PURE__ */ b("div", {
274
279
  className: "space-y-4",
275
280
  children: [
276
- /* @__PURE__ */ x("h3", {
281
+ /* @__PURE__ */ y("h3", {
277
282
  className: "text-sm font-semibold text-text-primary",
278
283
  children: "Hostname"
279
284
  }),
280
- /* @__PURE__ */ S("div", {
285
+ /* @__PURE__ */ b("div", {
281
286
  className: "flex gap-2",
282
287
  children: [
283
- Q?.supportsManagedSubdomains && /* @__PURE__ */ x(k, {
284
- active: N.hostnameKind === "managed",
285
- onClick: () => X("hostnameKind", "managed"),
288
+ Q?.supportsManagedSubdomains && /* @__PURE__ */ y(O, {
289
+ active: P.hostnameKind === "managed",
290
+ onClick: () => Y("hostnameKind", "managed"),
286
291
  label: "Managed subdomain",
287
292
  hint: "*.vibetunnels.com"
288
293
  }),
289
- Q?.supportsCustomDomains && /* @__PURE__ */ x(k, {
290
- active: N.hostnameKind === "custom",
291
- onClick: () => X("hostnameKind", "custom"),
294
+ Q?.supportsCustomDomains && /* @__PURE__ */ y(O, {
295
+ active: P.hostnameKind === "custom",
296
+ onClick: () => Y("hostnameKind", "custom"),
292
297
  label: "Custom domain",
293
298
  hint: "TXT verification"
294
299
  }),
295
- $ && /* @__PURE__ */ x(k, {
296
- active: N.hostnameKind === "auto",
297
- onClick: () => X("hostnameKind", "auto"),
300
+ $ && /* @__PURE__ */ y(O, {
301
+ active: P.hostnameKind === "auto",
302
+ onClick: () => Y("hostnameKind", "auto"),
298
303
  label: "Auto",
299
304
  hint: "assigned by Cloudflare"
300
305
  })
301
306
  ]
302
307
  }),
303
- N.hostnameKind === "managed" && /* @__PURE__ */ S(ie, { children: [
304
- /* @__PURE__ */ x(O, {
308
+ P.hostnameKind === "managed" && /* @__PURE__ */ b(v, { children: [
309
+ /* @__PURE__ */ y(D, {
305
310
  label: "Environment",
306
- children: /* @__PURE__ */ S("div", {
311
+ children: /* @__PURE__ */ b("div", {
307
312
  className: "flex gap-2",
308
- children: [/* @__PURE__ */ x("button", {
313
+ children: [/* @__PURE__ */ y("button", {
309
314
  type: "button",
310
- onClick: () => X("environment", u.Prod),
311
- className: `rounded-md border px-4 py-2 text-sm ${N.environment === u.Prod ? "border-action-primary-bg bg-bg-sunken text-text-primary" : "border-border-subtle text-text-secondary hover:border-border-default"}`,
315
+ onClick: () => Y("environment", l.Prod),
316
+ className: `rounded-md border px-4 py-2 text-sm ${P.environment === l.Prod ? "border-action-primary-bg bg-bg-sunken text-text-primary" : "border-border-subtle text-text-secondary hover:border-border-default"}`,
312
317
  children: "Prod (vibetunnels.com)"
313
- }), /* @__PURE__ */ x("button", {
318
+ }), /* @__PURE__ */ y("button", {
314
319
  type: "button",
315
- onClick: () => X("environment", u.Alpha),
316
- className: `rounded-md border px-4 py-2 text-sm ${N.environment === u.Alpha ? "border-action-primary-bg bg-bg-sunken text-text-primary" : "border-border-subtle text-text-secondary hover:border-border-default"}`,
320
+ onClick: () => Y("environment", l.Alpha),
321
+ className: `rounded-md border px-4 py-2 text-sm ${P.environment === l.Alpha ? "border-action-primary-bg bg-bg-sunken text-text-primary" : "border-border-subtle text-text-secondary hover:border-border-default"}`,
317
322
  children: "Alpha"
318
323
  })]
319
324
  })
320
325
  }),
321
- /* @__PURE__ */ x(O, {
326
+ /* @__PURE__ */ y(D, {
322
327
  label: "Subdomain label",
323
- children: /* @__PURE__ */ x("input", {
328
+ children: /* @__PURE__ */ y("input", {
324
329
  "aria-label": "demo",
325
330
  type: "text",
326
- value: N.subdomain,
327
- onChange: (e) => X("subdomain", e.target.value.toLowerCase()),
331
+ value: P.subdomain,
332
+ onChange: (e) => Y("subdomain", e.target.value.toLowerCase()),
328
333
  placeholder: "demo",
329
334
  className: "w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary"
330
335
  })
331
336
  }),
332
- N.subdomain && /* @__PURE__ */ S("p", {
337
+ P.subdomain && /* @__PURE__ */ b("p", {
333
338
  className: "text-xs text-text-secondary",
334
339
  children: [
335
340
  "Will be reserved as",
336
341
  " ",
337
- /* @__PURE__ */ S("span", {
342
+ /* @__PURE__ */ b("span", {
338
343
  className: "font-mono text-text-primary",
339
- children: [N.subdomain, N.environment === u.Alpha ? ".alpha.vibetunnels.com" : ".vibetunnels.com"]
344
+ children: [P.subdomain, P.environment === l.Alpha ? ".alpha.vibetunnels.com" : ".vibetunnels.com"]
340
345
  })
341
346
  ]
342
347
  })
343
348
  ] }),
344
- N.hostnameKind === "custom" && /* @__PURE__ */ S(O, {
349
+ P.hostnameKind === "custom" && /* @__PURE__ */ b(D, {
345
350
  label: "Custom domain",
346
- children: [/* @__PURE__ */ x("input", {
351
+ children: [/* @__PURE__ */ y("input", {
347
352
  "aria-label": "preview.example.com",
348
353
  type: "text",
349
- value: N.customDomain,
350
- onChange: (e) => X("customDomain", e.target.value.toLowerCase()),
354
+ value: P.customDomain,
355
+ onChange: (e) => Y("customDomain", e.target.value.toLowerCase()),
351
356
  placeholder: "preview.example.com",
352
357
  className: "w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary"
353
- }), /* @__PURE__ */ x("p", {
358
+ }), /* @__PURE__ */ y("p", {
354
359
  className: "text-xs text-text-muted mt-2",
355
360
  children: "Custom domains are registered on create but must be verified via a TXT record before they can be attached. You'll see the verification challenge in the Domains tab after creation."
356
361
  })]
357
362
  })
358
363
  ]
359
364
  }),
360
- j === 3 && /* @__PURE__ */ S("div", {
365
+ M === 3 && /* @__PURE__ */ b("div", {
361
366
  className: "space-y-4",
362
367
  children: [
363
- /* @__PURE__ */ x("h3", {
368
+ /* @__PURE__ */ y("h3", {
364
369
  className: "text-sm font-semibold text-text-primary",
365
370
  children: "Policies (optional)"
366
371
  }),
367
- /* @__PURE__ */ x(O, {
372
+ /* @__PURE__ */ y(D, {
368
373
  label: "Basic auth user",
369
- children: /* @__PURE__ */ x("input", {
374
+ children: /* @__PURE__ */ y("input", {
370
375
  "aria-label": "control",
371
376
  type: "text",
372
- value: N.basicAuthUser,
373
- onChange: (e) => X("basicAuthUser", e.target.value),
377
+ value: P.basicAuthUser,
378
+ onChange: (e) => Y("basicAuthUser", e.target.value),
374
379
  className: "w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary"
375
380
  })
376
381
  }),
377
- /* @__PURE__ */ x(O, {
382
+ /* @__PURE__ */ y(D, {
378
383
  label: "Basic auth password",
379
- children: /* @__PURE__ */ x("input", {
384
+ children: /* @__PURE__ */ y("input", {
380
385
  "aria-label": "control",
381
386
  type: "password",
382
- value: N.basicAuthPassword,
383
- onChange: (e) => X("basicAuthPassword", e.target.value),
387
+ value: P.basicAuthPassword,
388
+ onChange: (e) => Y("basicAuthPassword", e.target.value),
384
389
  className: "w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary"
385
390
  })
386
391
  }),
387
- /* @__PURE__ */ x(ne, {
388
- value: V,
389
- onChange: H,
390
- disabled: Y
392
+ /* @__PURE__ */ y(ie, {
393
+ value: H,
394
+ onChange: U,
395
+ disabled: J
391
396
  })
392
397
  ]
393
398
  }),
394
- j === 4 && /* @__PURE__ */ S("div", {
399
+ M === 4 && /* @__PURE__ */ b("div", {
395
400
  className: "space-y-3",
396
401
  children: [
397
- /* @__PURE__ */ x("h3", {
402
+ /* @__PURE__ */ y("h3", {
398
403
  className: "text-sm font-semibold text-text-primary",
399
- children: D("vibecontrols.tunnels.review", "Review")
404
+ children: E("vibecontrols.tunnels.review", "Review")
400
405
  }),
401
- /* @__PURE__ */ S("dl", {
406
+ /* @__PURE__ */ b("dl", {
402
407
  className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-sm",
403
408
  children: [
404
- /* @__PURE__ */ x("dt", {
409
+ /* @__PURE__ */ y("dt", {
405
410
  className: "text-text-muted",
406
411
  children: "Provider"
407
412
  }),
408
- /* @__PURE__ */ x("dd", {
413
+ /* @__PURE__ */ y("dd", {
409
414
  className: "text-text-primary",
410
- children: N.providerKey
415
+ children: P.providerKey
411
416
  }),
412
- /* @__PURE__ */ x("dt", {
417
+ /* @__PURE__ */ y("dt", {
413
418
  className: "text-text-muted",
414
419
  children: "Name"
415
420
  }),
416
- /* @__PURE__ */ x("dd", {
421
+ /* @__PURE__ */ y("dd", {
417
422
  className: "text-text-primary",
418
- children: N.name
423
+ children: P.name
419
424
  }),
420
- /* @__PURE__ */ x("dt", {
425
+ /* @__PURE__ */ y("dt", {
421
426
  className: "text-text-muted",
422
427
  children: "Agent"
423
428
  }),
424
- /* @__PURE__ */ x("dd", {
429
+ /* @__PURE__ */ y("dd", {
425
430
  className: "text-text-primary font-mono",
426
- children: N.agentId
431
+ children: P.agentId
427
432
  }),
428
- /* @__PURE__ */ x("dt", {
433
+ /* @__PURE__ */ y("dt", {
429
434
  className: "text-text-muted",
430
435
  children: "Protocol"
431
436
  }),
432
- /* @__PURE__ */ x("dd", {
437
+ /* @__PURE__ */ y("dd", {
433
438
  className: "text-text-primary",
434
- children: N.protocol
439
+ children: P.protocol
435
440
  }),
436
- /* @__PURE__ */ x("dt", {
441
+ /* @__PURE__ */ y("dt", {
437
442
  className: "text-text-muted",
438
443
  children: "Target"
439
444
  }),
440
- /* @__PURE__ */ S("dd", {
445
+ /* @__PURE__ */ b("dd", {
441
446
  className: "text-text-primary font-mono",
442
447
  children: [
443
- N.localHost,
448
+ P.localHost,
444
449
  ":",
445
- N.localPort
450
+ P.localPort
446
451
  ]
447
452
  }),
448
- /* @__PURE__ */ x("dt", {
453
+ /* @__PURE__ */ y("dt", {
449
454
  className: "text-text-muted",
450
455
  children: "Hostname"
451
456
  }),
452
- /* @__PURE__ */ x("dd", {
457
+ /* @__PURE__ */ y("dd", {
453
458
  className: "text-text-primary",
454
- children: N.hostnameKind === "managed" ? `${N.subdomain}.${N.environment === "ALPHA" ? "alpha." : ""}vibetunnels.com` : N.hostnameKind === "custom" ? N.customDomain : "auto-assigned"
459
+ children: P.hostnameKind === "managed" ? `${P.subdomain}.${P.environment === "ALPHA" ? "alpha." : ""}vibetunnels.com` : P.hostnameKind === "custom" ? P.customDomain : "auto-assigned"
455
460
  }),
456
- /* @__PURE__ */ x("dt", {
461
+ /* @__PURE__ */ y("dt", {
457
462
  className: "text-text-muted",
458
463
  children: "Basic auth"
459
464
  }),
460
- /* @__PURE__ */ x("dd", {
465
+ /* @__PURE__ */ y("dd", {
461
466
  className: "text-text-primary",
462
- children: N.basicAuthUser ? "yes" : "no"
467
+ children: P.basicAuthUser ? "yes" : "no"
463
468
  })
464
469
  ]
465
470
  }),
466
- /* @__PURE__ */ S("div", {
471
+ /* @__PURE__ */ b("div", {
467
472
  className: "border-t border-border-subtle pt-3",
468
- children: [/* @__PURE__ */ x("h4", {
473
+ children: [/* @__PURE__ */ y("h4", {
469
474
  className: "mb-2 text-sm font-medium text-text-secondary",
470
- children: D("vibecontrols.tunnels.tags", "Tags")
471
- }), /* @__PURE__ */ x(p, {
475
+ children: E("vibecontrols.tunnels.tags", "Tags")
476
+ }), /* @__PURE__ */ y(f, {
472
477
  entityType: "VIBECONTROLS_TUNNEL",
473
- onDraftChange: U
478
+ onDraftChange: W
474
479
  })]
475
480
  }),
476
- F && /* @__PURE__ */ x("div", {
481
+ I && /* @__PURE__ */ y("div", {
477
482
  className: "rounded-md bg-status-error-bg p-3 text-sm text-status-error-fg",
478
- children: F
483
+ children: I
479
484
  })
480
485
  ]
481
486
  })
482
487
  ]
483
- }, j)
488
+ }, M)
484
489
  }),
485
- /* @__PURE__ */ S("div", {
490
+ /* @__PURE__ */ b("div", {
486
491
  className: "flex items-center justify-between mt-4",
487
- children: [/* @__PURE__ */ x("button", {
492
+ children: [/* @__PURE__ */ y("button", {
488
493
  type: "button",
489
- disabled: j === 0,
490
- onClick: ue,
494
+ disabled: M === 0,
495
+ onClick: me,
491
496
  className: "rounded-md border border-border-default px-4 py-2 text-sm text-text-primary hover:bg-bg-elevated disabled:opacity-50",
492
- children: D("vibecontrols.tunnels.back", "Back")
493
- }), j < E.length - 1 ? /* @__PURE__ */ x("button", {
497
+ children: E("vibecontrols.tunnels.back", "Back")
498
+ }), M < T.length - 1 ? /* @__PURE__ */ y("button", {
494
499
  type: "button",
495
- disabled: !ce,
496
- onClick: le,
500
+ disabled: !fe,
501
+ onClick: pe,
497
502
  className: "rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-fg hover:bg-action-primary-bg-hover disabled:opacity-50",
498
- children: D("vibecontrols.tunnels.next", "Next")
499
- }) : /* @__PURE__ */ x("button", {
503
+ children: E("vibecontrols.tunnels.next", "Next")
504
+ }) : /* @__PURE__ */ y("button", {
500
505
  type: "button",
501
- disabled: Y || L,
502
- onClick: () => void de(),
506
+ disabled: J || R,
507
+ onClick: () => void he(),
503
508
  className: "rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-fg hover:bg-action-primary-bg-hover disabled:opacity-50",
504
- children: Y ? D("vibecontrols.tunnels.creating", "Creating...") : D("vibecontrols.tunnels.createTunnel", "Create tunnel")
509
+ children: J ? E("vibecontrols.tunnels.creating", "Creating...") : E("vibecontrols.tunnels.createTunnel", "Create tunnel")
505
510
  })]
506
511
  }),
507
- /* @__PURE__ */ x(i, {
508
- isOpen: z,
509
- onClose: () => B(!1),
512
+ /* @__PURE__ */ y(ee, {
513
+ isOpen: B,
514
+ onClose: () => V(!1),
510
515
  onConfirm: () => {
511
- B(!1), A("/billing/plans");
516
+ V(!1), k("/billing/plans");
512
517
  },
513
- ...a("tunnel-subdomain")
518
+ ...i("tunnel-subdomain")
514
519
  })
515
520
  ]
516
521
  });
517
522
  }
518
- function O({ label: e, children: t }) {
519
- return /* @__PURE__ */ S("label", {
523
+ function D({ label: e, children: t }) {
524
+ return /* @__PURE__ */ b("label", {
520
525
  className: "block",
521
- children: [/* @__PURE__ */ x("span", {
526
+ children: [/* @__PURE__ */ y("span", {
522
527
  className: "text-xs font-medium text-text-secondary",
523
528
  children: e
524
- }), /* @__PURE__ */ x("div", {
529
+ }), /* @__PURE__ */ y("div", {
525
530
  className: "mt-1",
526
531
  children: t
527
532
  })]
528
533
  });
529
534
  }
530
- function k({ active: e, onClick: t, label: n, hint: r }) {
531
- return /* @__PURE__ */ S("button", {
535
+ function O({ active: e, onClick: t, label: n, hint: r }) {
536
+ return /* @__PURE__ */ b("button", {
532
537
  type: "button",
533
538
  onClick: t,
534
539
  className: `flex-1 rounded-md border p-3 text-left transition-colors ${e ? "border-action-primary-bg bg-bg-sunken" : "border-border-subtle hover:border-border-default"}`,
535
- children: [/* @__PURE__ */ x("div", {
540
+ children: [/* @__PURE__ */ y("div", {
536
541
  className: "text-sm font-medium text-text-primary",
537
542
  children: n
538
- }), /* @__PURE__ */ x("div", {
543
+ }), /* @__PURE__ */ y("div", {
539
544
  className: "text-xs text-text-muted mt-0.5",
540
545
  children: r
541
546
  })]
542
547
  });
543
548
  }
544
549
  //#endregion
545
- export { D as TunnelCreateWizard };
550
+ export { E as TunnelCreateWizard };
546
551
 
547
552
  //# sourceMappingURL=TunnelCreateWizard.js.map