@burdenoff/microfe-vibecontrols 2026.511.1

package/dist/components/templates/TemplateCard.js

@@ -0,0 +1,81 @@
+import { useI18n as e } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Copy as t, FileCode as n, Layers as r, Tag as i } from "lucide-react";
+import { motion as a } from "framer-motion";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/templates/TemplateCard.tsx
+var c = {
+	SERVICE: "bg-action-primary-bg/10 text-action-primary-bg",
+	FRONTEND: "bg-status-info-bg text-status-info-text",
+	LIBRARY: "bg-status-warning-bg text-status-warning-text",
+	INFRASTRUCTURE: "bg-status-success-bg text-status-success-text",
+	STARTER: "bg-bg-sunken text-text-secondary"
+}, l = ({ template: l, onOpen: u, className: d = "" }) => {
+	let { t: f } = e(), p = (e, t) => {
+		let n = f(e);
+		return n === e ? t : n;
+	};
+	return /* @__PURE__ */ s(a.div, {
+		whileHover: {
+			y: -2,
+			transition: {
+				duration: .15,
+				ease: [
+					.4,
+					0,
+					.2,
+					1
+				]
+			}
+		},
+		whileTap: { scale: .98 },
+		className: `bg-bg-surface border border-border-default rounded-lg p-4 hover:border-border-strong hover:shadow-md transition-all cursor-pointer ${d}`,
+		onClick: () => u?.(l),
+		children: [
+			/* @__PURE__ */ s("div", {
+				className: "flex items-start gap-2 sm:gap-3",
+				children: [/* @__PURE__ */ o("div", {
+					className: "flex-shrink-0 w-8 h-8 sm:w-10 sm:h-10 rounded-lg bg-action-primary-bg/10 flex items-center justify-center",
+					children: /* @__PURE__ */ o(n, { className: "w-4 h-4 sm:w-5 sm:h-5 text-action-primary-bg" })
+				}), /* @__PURE__ */ s("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ o("h3", {
+						className: "font-semibold text-text-primary truncate text-sm sm:text-base",
+						children: l.name
+					}), /* @__PURE__ */ s("div", {
+						className: "flex items-center gap-2 mt-0.5 flex-wrap",
+						children: [l.category && /* @__PURE__ */ s("span", {
+							className: `inline-flex items-center gap-1 px-1.5 py-0.5 text-xs rounded ${c[l.category] || "bg-bg-sunken text-text-secondary"}`,
+							children: [/* @__PURE__ */ o(r, { className: "w-3 h-3" }), p(`template.category.${l.category.toLowerCase()}`, l.category)]
+						}), /* @__PURE__ */ s("span", {
+							className: "inline-flex items-center gap-1 text-xs text-text-muted",
+							children: [
+								/* @__PURE__ */ o(t, { className: "w-3 h-3" }),
+								l.cloneCount,
+								" ",
+								p("template.clones", "clones")
+							]
+						})]
+					})]
+				})]
+			}),
+			l.description && /* @__PURE__ */ o("p", {
+				className: "mt-2 text-sm text-text-secondary line-clamp-2",
+				children: l.description
+			}),
+			l.tags.length > 0 && /* @__PURE__ */ s("div", {
+				className: "mt-3 flex flex-wrap gap-1",
+				children: [l.tags.slice(0, 3).map((e) => /* @__PURE__ */ s("span", {
+					className: "inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-bg-sunken text-text-secondary rounded",
+					children: [/* @__PURE__ */ o(i, { className: "w-3 h-3" }), e]
+				}, e)), l.tags.length > 3 && /* @__PURE__ */ s("span", {
+					className: "px-2 py-0.5 text-xs bg-bg-sunken text-text-secondary rounded",
+					children: ["+", l.tags.length - 3]
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { l as TemplateCard };
+
+//# sourceMappingURL=TemplateCard.js.map

package/dist/components/templates/TemplateCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateCard.js","names":[],"sources":["../../../src/components/templates/TemplateCard.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { motion } from 'framer-motion';\nimport { FileCode, Tag, Copy, Layers } from 'lucide-react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\nexport interface TemplateCardData {\n  id: string;\n  name: string;\n  description: string | null;\n  category: string | null;\n  cloneCount: number;\n  tags: string[];\n  createdAt: string;\n  updatedAt: string;\n}\n\nexport interface TemplateCardProps {\n  template: TemplateCardData;\n  onOpen?: (template: TemplateCardData) => void;\n  className?: string;\n}\n\nconst categoryStyles: Record<string, string> = {\n  SERVICE: 'bg-action-primary-bg/10 text-action-primary-bg',\n  FRONTEND: 'bg-status-info-bg text-status-info-text',\n  LIBRARY: 'bg-status-warning-bg text-status-warning-text',\n  INFRASTRUCTURE: 'bg-status-success-bg text-status-success-text',\n  STARTER: 'bg-bg-sunken text-text-secondary',\n};\n\nexport const TemplateCard: FC<TemplateCardProps> = ({ template, onOpen, className = '' }) => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string) => {\n    const v = t(key);\n    return v === key ? fallback : v;\n  };\n\n  return (\n    <motion.div\n      whileHover={{ y: -2, transition: { duration: 0.15, ease: [0.4, 0, 0.2, 1] } }}\n      whileTap={{ scale: 0.98 }}\n      className={`bg-bg-surface border border-border-default rounded-lg p-4 hover:border-border-strong hover:shadow-md transition-all cursor-pointer ${className}`}\n      onClick={() => onOpen?.(template)}\n    >\n      <div className=\"flex items-start gap-2 sm:gap-3\">\n        <div className=\"flex-shrink-0 w-8 h-8 sm:w-10 sm:h-10 rounded-lg bg-action-primary-bg/10 flex items-center justify-center\">\n          <FileCode className=\"w-4 h-4 sm:w-5 sm:h-5 text-action-primary-bg\" />\n        </div>\n        <div className=\"min-w-0 flex-1\">\n          <h3 className=\"font-semibold text-text-primary truncate text-sm sm:text-base\">\n            {template.name}\n          </h3>\n          <div className=\"flex items-center gap-2 mt-0.5 flex-wrap\">\n            {template.category && (\n              <span\n                className={`inline-flex items-center gap-1 px-1.5 py-0.5 text-xs rounded ${categoryStyles[template.category] || 'bg-bg-sunken text-text-secondary'}`}\n              >\n                <Layers className=\"w-3 h-3\" />\n                {tr(`template.category.${template.category.toLowerCase()}`, template.category)}\n              </span>\n            )}\n            <span className=\"inline-flex items-center gap-1 text-xs text-text-muted\">\n              <Copy className=\"w-3 h-3\" />\n              {template.cloneCount} {tr('template.clones', 'clones')}\n            </span>\n          </div>\n        </div>\n      </div>\n\n      {template.description && (\n        <p className=\"mt-2 text-sm text-text-secondary line-clamp-2\">{template.description}</p>\n      )}\n\n      {template.tags.length > 0 && (\n        <div className=\"mt-3 flex flex-wrap gap-1\">\n          {template.tags.slice(0, 3).map((tag) => (\n            <span\n              key={tag}\n              className=\"inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-bg-sunken text-text-secondary rounded\"\n            >\n              <Tag className=\"w-3 h-3\" />\n              {tag}\n            </span>\n          ))}\n          {template.tags.length > 3 && (\n            <span className=\"px-2 py-0.5 text-xs bg-bg-sunken text-text-secondary rounded\">\n              +{template.tags.length - 3}\n            </span>\n          )}\n        </div>\n      )}\n    </motion.div>\n  );\n};\n"],"mappings":";;;;;AAsBA,IAAM,IAAyC;CAC7C,SAAS;CACT,UAAU;CACV,SAAS;CACT,gBAAgB;CAChB,SAAS;CACV,EAEY,KAAuC,EAAE,aAAU,WAAQ,eAAY,SAAS;CAC3F,IAAM,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAAqB;EAC5C,IAAM,IAAI,EAAE,EAAI;AAChB,SAAO,MAAM,IAAM,IAAW;;AAGhC,QACE,kBAAC,EAAO,KAAR;EACE,YAAY;GAAE,GAAG;GAAI,YAAY;IAAE,UAAU;IAAM,MAAM;KAAC;KAAK;KAAG;KAAK;KAAE;IAAE;GAAE;EAC7E,UAAU,EAAE,OAAO,KAAM;EACzB,WAAW,sIAAsI;EACjJ,eAAe,IAAS,EAAS;YAJnC;GAME,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD,EAAU,WAAU,gDAAiD,CAAA;KACjE,CAAA,EACN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAS;MACP,CAAA,EACL,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACG,EAAS,YACR,kBAAC,QAAD;OACE,WAAW,gEAAgE,EAAe,EAAS,aAAa;iBADlH,CAGE,kBAAC,GAAD,EAAQ,WAAU,WAAY,CAAA,EAC7B,EAAG,qBAAqB,EAAS,SAAS,aAAa,IAAI,EAAS,SAAS,CACzE;UAET,kBAAC,QAAD;OAAM,WAAU;iBAAhB;QACE,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA;QAC3B,EAAS;QAAW;QAAE,EAAG,mBAAmB,SAAS;QACjD;SACH;QACF;OACF;;GAEL,EAAS,eACR,kBAAC,KAAD;IAAG,WAAU;cAAiD,EAAS;IAAgB,CAAA;GAGxF,EAAS,KAAK,SAAS,KACtB,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,EAAS,KAAK,MAAM,GAAG,EAAE,CAAC,KAAK,MAC9B,kBAAC,QAAD;KAEE,WAAU;eAFZ,CAIE,kBAAC,GAAD,EAAK,WAAU,WAAY,CAAA,EAC1B,EACI;OALA,EAKA,CACP,EACD,EAAS,KAAK,SAAS,KACtB,kBAAC,QAAD;KAAM,WAAU;eAAhB,CAA+E,KAC3E,EAAS,KAAK,SAAS,EACpB;OAEL;;GAEG"}

package/dist/components/templates/index.d.ts

@@ -0,0 +1,3 @@
+export { TemplateCard } from './TemplateCard';
+export type { TemplateCardData, TemplateCardProps } from './TemplateCard';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/templates/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/templates/index.js

@@ -0,0 +1 @@
+import "./TemplateCard.js";

package/dist/components/tunnels/DomainVerificationBadge.d.ts

@@ -0,0 +1,6 @@
+import { TunnelDomainVerificationStatus } from '../../generated/wspace-types';
+
+export declare function DomainVerificationBadge({ status, }: {
+    status: TunnelDomainVerificationStatus | string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DomainVerificationBadge.d.ts.map

package/dist/components/tunnels/DomainVerificationBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DomainVerificationBadge.d.ts","sourceRoot":"","sources":["../../../src/components/tunnels/DomainVerificationBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,0BAA0B,CAAC;AAU/E,wBAAgB,uBAAuB,CAAC,EACtC,MAAM,GACP,EAAE;IACD,MAAM,EAAE,8BAA8B,GAAG,MAAM,CAAC;CACjD,2CASA"}

package/dist/components/tunnels/DomainVerificationBadge.js

@@ -0,0 +1,19 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/tunnels/DomainVerificationBadge.tsx
+var t = {
+	PENDING: "bg-status-warning-bg text-status-warning-fg",
+	VERIFYING: "bg-status-warning-bg text-status-warning-fg",
+	VERIFIED: "bg-status-success-bg text-status-success-fg",
+	FAILED: "bg-status-error-bg text-status-error-fg",
+	EXPIRED: "bg-bg-sunken text-text-muted"
+};
+function n({ status: n }) {
+	return /* @__PURE__ */ e("span", {
+		className: `inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${t[n] ?? "bg-bg-sunken text-text-secondary"}`,
+		children: n
+	});
+}
+//#endregion
+export { n as DomainVerificationBadge };
+
+//# sourceMappingURL=DomainVerificationBadge.js.map

package/dist/components/tunnels/DomainVerificationBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DomainVerificationBadge.js","names":[],"sources":["../../../src/components/tunnels/DomainVerificationBadge.tsx"],"sourcesContent":["import type { TunnelDomainVerificationStatus } from '@/generated/wspace-types';\n\nconst STYLES: Record<string, string> = {\n  PENDING: 'bg-status-warning-bg text-status-warning-fg',\n  VERIFYING: 'bg-status-warning-bg text-status-warning-fg',\n  VERIFIED: 'bg-status-success-bg text-status-success-fg',\n  FAILED: 'bg-status-error-bg text-status-error-fg',\n  EXPIRED: 'bg-bg-sunken text-text-muted',\n};\n\nexport function DomainVerificationBadge({\n  status,\n}: {\n  status: TunnelDomainVerificationStatus | string;\n}) {\n  const style = STYLES[status] ?? 'bg-bg-sunken text-text-secondary';\n  return (\n    <span\n      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${style}`}\n    >\n      {status}\n    </span>\n  );\n}\n"],"mappings":";;AAEA,IAAM,IAAiC;CACrC,SAAS;CACT,WAAW;CACX,UAAU;CACV,QAAQ;CACR,SAAS;CACV;AAED,SAAgB,EAAwB,EACtC,aAGC;AAED,QACE,kBAAC,QAAD;EACE,WAAW,yEAHD,EAAO,MAAW;YAK3B;EACI,CAAA"}

package/dist/components/tunnels/ProviderBadge.d.ts

@@ -0,0 +1,6 @@
+import { TunnelProviderKey } from '../../generated/wspace-types';
+
+export declare function ProviderBadge({ providerKey }: {
+    providerKey: TunnelProviderKey | string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProviderBadge.d.ts.map

package/dist/components/tunnels/ProviderBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProviderBadge.d.ts","sourceRoot":"","sources":["../../../src/components/tunnels/ProviderBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAOlE,wBAAgB,aAAa,CAAC,EAAE,WAAW,EAAE,EAAE;IAAE,WAAW,EAAE,iBAAiB,GAAG,MAAM,CAAA;CAAE,2CAMzF"}

package/dist/components/tunnels/ProviderBadge.js

@@ -0,0 +1,16 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/tunnels/ProviderBadge.tsx
+var t = {
+	VIBETUNNELS: "VibeTunnels",
+	CLOUDFLARE: "Cloudflare"
+};
+function n({ providerKey: n }) {
+	return /* @__PURE__ */ e("span", {
+		className: "inline-flex items-center rounded-full bg-status-info-bg px-2 py-0.5 text-xs font-medium text-status-info-fg",
+		children: t[n] ?? n
+	});
+}
+//#endregion
+export { n as ProviderBadge };
+
+//# sourceMappingURL=ProviderBadge.js.map

package/dist/components/tunnels/ProviderBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProviderBadge.js","names":[],"sources":["../../../src/components/tunnels/ProviderBadge.tsx"],"sourcesContent":["import type { TunnelProviderKey } from '@/generated/wspace-types';\n\nconst LABELS: Record<string, string> = {\n  VIBETUNNELS: 'VibeTunnels',\n  CLOUDFLARE: 'Cloudflare',\n};\n\nexport function ProviderBadge({ providerKey }: { providerKey: TunnelProviderKey | string }) {\n  return (\n    <span className=\"inline-flex items-center rounded-full bg-status-info-bg px-2 py-0.5 text-xs font-medium text-status-info-fg\">\n      {LABELS[providerKey] ?? providerKey}\n    </span>\n  );\n}\n"],"mappings":";;AAEA,IAAM,IAAiC;CACrC,aAAa;CACb,YAAY;CACb;AAED,SAAgB,EAAc,EAAE,kBAA4D;AAC1F,QACE,kBAAC,QAAD;EAAM,WAAU;YACb,EAAO,MAAgB;EACnB,CAAA"}

package/dist/components/tunnels/TunnelCard.d.ts

@@ -0,0 +1,13 @@
+import { ListTunnelsQuery } from '../../generated/wspace-operations';
+
+type TunnelRow = NonNullable<ListTunnelsQuery['tunnels']>['items'][number];
+interface TunnelCardProps {
+    tunnel: TunnelRow;
+    onOpen: (id: string) => void;
+    onStart: (id: string) => void;
+    onStop: (id: string) => void;
+    onDelete: (id: string, name: string) => void;
+}
+export declare function TunnelCard({ tunnel, onOpen, onStart, onStop, onDelete }: TunnelCardProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TunnelCard.d.ts.map

package/dist/components/tunnels/TunnelCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TunnelCard.d.ts","sourceRoot":"","sources":["../../../src/components/tunnels/TunnelCard.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAKtE,KAAK,SAAS,GAAG,WAAW,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC;AAE3E,UAAU,eAAe;IACvB,MAAM,EAAE,SAAS,CAAC;IAClB,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7B,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,eAAe,2CAwFxF"}

package/dist/components/tunnels/TunnelCard.js

@@ -0,0 +1,98 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { TunnelStatus as t } from "../../generated/wspace-types.js";
+import { TunnelStatusBadge as n } from "./TunnelStatusBadge.js";
+import { ProviderBadge as r } from "./ProviderBadge.js";
+import { ExternalLink as i, Play as a, Square as o, Trash2 as s } from "lucide-react";
+import { motion as c } from "framer-motion";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/tunnels/TunnelCard.tsx
+function d({ tunnel: d, onOpen: f, onStart: p, onStop: m, onDelete: h }) {
+	let g = e(), _ = d.status !== t.Active, v = d.status === t.Active, y = d.primaryDomain?.hostname, b = y ? `${d.protocol.toLowerCase() === "tcp" ? "tcp" : "https"}://${y}` : null;
+	return /* @__PURE__ */ u(c.div, {
+		initial: {
+			opacity: 0,
+			y: 4
+		},
+		animate: {
+			opacity: 1,
+			y: 0
+		},
+		className: "rounded-lg border border-border-subtle bg-bg-surface p-4 hover:border-border-default transition-colors",
+		children: [/* @__PURE__ */ u("div", {
+			className: "flex items-start justify-between gap-4",
+			children: [/* @__PURE__ */ u("button", {
+				type: "button",
+				onClick: () => f(d.id),
+				className: "flex-1 text-left min-w-0",
+				children: [
+					/* @__PURE__ */ u("div", {
+						className: "flex items-center gap-2 mb-1",
+						children: [
+							/* @__PURE__ */ l("h3", {
+								className: "text-base font-semibold text-text-primary truncate",
+								children: d.name
+							}),
+							/* @__PURE__ */ l(n, { status: d.status }),
+							/* @__PURE__ */ l(r, { providerKey: d.providerKey })
+						]
+					}),
+					b ? /* @__PURE__ */ l("p", {
+						className: "text-sm text-text-secondary truncate",
+						children: b
+					}) : /* @__PURE__ */ l("p", {
+						className: "text-sm text-text-muted",
+						children: g("vibecontrols.tunnels.noDomain", "No domain attached")
+					}),
+					/* @__PURE__ */ u("p", {
+						className: "text-xs text-text-muted mt-1",
+						children: [
+							d.protocol,
+							":",
+							d.localPort,
+							" on ",
+							d.localHost
+						]
+					})
+				]
+			}), /* @__PURE__ */ u("div", {
+				className: "flex items-center gap-2 flex-shrink-0",
+				children: [
+					b && /* @__PURE__ */ u("a", {
+						href: b,
+						target: "_blank",
+						rel: "noreferrer",
+						className: "inline-flex items-center rounded-md border border-border-default px-3 py-1.5 text-xs text-text-primary hover:bg-bg-elevated",
+						onClick: (e) => e.stopPropagation(),
+						children: [/* @__PURE__ */ l(i, { className: "w-3.5 h-3.5 mr-1" }), g("vibecontrols.tunnels.open", "Open")]
+					}),
+					_ && /* @__PURE__ */ u("button", {
+						type: "button",
+						onClick: () => p(d.id),
+						className: "inline-flex items-center rounded-md bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-fg hover:bg-action-primary-bg-hover",
+						children: [/* @__PURE__ */ l(a, { className: "w-3.5 h-3.5 mr-1" }), g("vibecontrols.tunnels.start", "Start")]
+					}),
+					v && /* @__PURE__ */ u("button", {
+						type: "button",
+						onClick: () => m(d.id),
+						className: "inline-flex items-center rounded-md border border-border-default px-3 py-1.5 text-xs text-text-primary hover:bg-bg-elevated",
+						children: [/* @__PURE__ */ l(o, { className: "w-3.5 h-3.5 mr-1" }), g("vibecontrols.tunnels.stop", "Stop")]
+					}),
+					/* @__PURE__ */ l("button", {
+						type: "button",
+						onClick: () => h(d.id, d.name),
+						className: "inline-flex items-center rounded-md border border-border-default px-2 py-1.5 text-xs text-status-error-fg hover:bg-status-error-bg",
+						"aria-label": "Delete tunnel",
+						children: /* @__PURE__ */ l(s, { className: "w-3.5 h-3.5" })
+					})
+				]
+			})]
+		}), d.lastError && /* @__PURE__ */ l("div", {
+			className: "mt-3 rounded-md bg-status-error-bg px-3 py-2 text-xs text-status-error-fg",
+			children: d.lastError
+		})]
+	});
+}
+//#endregion
+export { d as TunnelCard };
+
+//# sourceMappingURL=TunnelCard.js.map

package/dist/components/tunnels/TunnelCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TunnelCard.js","names":[],"sources":["../../../src/components/tunnels/TunnelCard.tsx"],"sourcesContent":["import { motion } from 'framer-motion';\nimport { Play, Square, Trash2, ExternalLink } from 'lucide-react';\nimport { useTr } from '../../shared/hooks/useTr';\n\nimport type { ListTunnelsQuery } from '@/generated/wspace-operations';\nimport { TunnelStatus } from '@/generated/wspace-types';\nimport { TunnelStatusBadge } from './TunnelStatusBadge';\nimport { ProviderBadge } from './ProviderBadge';\n\ntype TunnelRow = NonNullable<ListTunnelsQuery['tunnels']>['items'][number];\n\ninterface TunnelCardProps {\n  tunnel: TunnelRow;\n  onOpen: (id: string) => void;\n  onStart: (id: string) => void;\n  onStop: (id: string) => void;\n  onDelete: (id: string, name: string) => void;\n}\n\nexport function TunnelCard({ tunnel, onOpen, onStart, onStop, onDelete }: TunnelCardProps) {\n  const tr = useTr();\n  const canStart = tunnel.status !== TunnelStatus.Active;\n  const canStop = tunnel.status === TunnelStatus.Active;\n  const hostname = tunnel.primaryDomain?.hostname;\n  const publicUrl = hostname\n    ? `${tunnel.protocol.toLowerCase() === 'tcp' ? 'tcp' : 'https'}://${hostname}`\n    : null;\n\n  return (\n    <motion.div\n      initial={{ opacity: 0, y: 4 }}\n      animate={{ opacity: 1, y: 0 }}\n      className=\"rounded-lg border border-border-subtle bg-bg-surface p-4 hover:border-border-default transition-colors\"\n    >\n      <div className=\"flex items-start justify-between gap-4\">\n        <button\n          type=\"button\"\n          onClick={() => onOpen(tunnel.id)}\n          className=\"flex-1 text-left min-w-0\"\n        >\n          <div className=\"flex items-center gap-2 mb-1\">\n            <h3 className=\"text-base font-semibold text-text-primary truncate\">{tunnel.name}</h3>\n            <TunnelStatusBadge status={tunnel.status} />\n            <ProviderBadge providerKey={tunnel.providerKey} />\n          </div>\n          {publicUrl ? (\n            <p className=\"text-sm text-text-secondary truncate\">{publicUrl}</p>\n          ) : (\n            <p className=\"text-sm text-text-muted\">\n              {tr('vibecontrols.tunnels.noDomain', 'No domain attached')}\n            </p>\n          )}\n          <p className=\"text-xs text-text-muted mt-1\">\n            {tunnel.protocol}:{tunnel.localPort} on {tunnel.localHost}\n          </p>\n        </button>\n\n        <div className=\"flex items-center gap-2 flex-shrink-0\">\n          {publicUrl && (\n            <a\n              href={publicUrl}\n              target=\"_blank\"\n              rel=\"noreferrer\"\n              className=\"inline-flex items-center rounded-md border border-border-default px-3 py-1.5 text-xs text-text-primary hover:bg-bg-elevated\"\n              onClick={(e) => e.stopPropagation()}\n            >\n              <ExternalLink className=\"w-3.5 h-3.5 mr-1\" />\n              {tr('vibecontrols.tunnels.open', 'Open')}\n            </a>\n          )}\n          {canStart && (\n            <button\n              type=\"button\"\n              onClick={() => onStart(tunnel.id)}\n              className=\"inline-flex items-center rounded-md bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-fg hover:bg-action-primary-bg-hover\"\n            >\n              <Play className=\"w-3.5 h-3.5 mr-1\" />\n              {tr('vibecontrols.tunnels.start', 'Start')}\n            </button>\n          )}\n          {canStop && (\n            <button\n              type=\"button\"\n              onClick={() => onStop(tunnel.id)}\n              className=\"inline-flex items-center rounded-md border border-border-default px-3 py-1.5 text-xs text-text-primary hover:bg-bg-elevated\"\n            >\n              <Square className=\"w-3.5 h-3.5 mr-1\" />\n              {tr('vibecontrols.tunnels.stop', 'Stop')}\n            </button>\n          )}\n          <button\n            type=\"button\"\n            onClick={() => onDelete(tunnel.id, tunnel.name)}\n            className=\"inline-flex items-center rounded-md border border-border-default px-2 py-1.5 text-xs text-status-error-fg hover:bg-status-error-bg\"\n            aria-label=\"Delete tunnel\"\n          >\n            <Trash2 className=\"w-3.5 h-3.5\" />\n          </button>\n        </div>\n      </div>\n      {tunnel.lastError && (\n        <div className=\"mt-3 rounded-md bg-status-error-bg px-3 py-2 text-xs text-status-error-fg\">\n          {tunnel.lastError}\n        </div>\n      )}\n    </motion.div>\n  );\n}\n"],"mappings":";;;;;;;;AAmBA,SAAgB,EAAW,EAAE,WAAQ,WAAQ,YAAS,WAAQ,eAA6B;CACzF,IAAM,IAAK,GAAO,EACZ,IAAW,EAAO,WAAW,EAAa,QAC1C,IAAU,EAAO,WAAW,EAAa,QACzC,IAAW,EAAO,eAAe,UACjC,IAAY,IACd,GAAG,EAAO,SAAS,aAAa,KAAK,QAAQ,QAAQ,QAAQ,KAAK,MAClE;AAEJ,QACE,kBAAC,EAAO,KAAR;EACE,SAAS;GAAE,SAAS;GAAG,GAAG;GAAG;EAC7B,SAAS;GAAE,SAAS;GAAG,GAAG;GAAG;EAC7B,WAAU;YAHZ,CAKE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,UAAD;IACE,MAAK;IACL,eAAe,EAAO,EAAO,GAAG;IAChC,WAAU;cAHZ;KAKE,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,MAAD;QAAI,WAAU;kBAAsD,EAAO;QAAU,CAAA;OACrF,kBAAC,GAAD,EAAmB,QAAQ,EAAO,QAAU,CAAA;OAC5C,kBAAC,GAAD,EAAe,aAAa,EAAO,aAAe,CAAA;OAC9C;;KACL,IACC,kBAAC,KAAD;MAAG,WAAU;gBAAwC;MAAc,CAAA,GAEnE,kBAAC,KAAD;MAAG,WAAU;gBACV,EAAG,iCAAiC,qBAAqB;MACxD,CAAA;KAEN,kBAAC,KAAD;MAAG,WAAU;gBAAb;OACG,EAAO;OAAS;OAAE,EAAO;OAAU;OAAK,EAAO;OAC9C;;KACG;OAET,kBAAC,OAAD;IAAK,WAAU;cAAf;KACG,KACC,kBAAC,KAAD;MACE,MAAM;MACN,QAAO;MACP,KAAI;MACJ,WAAU;MACV,UAAU,MAAM,EAAE,iBAAiB;gBALrC,CAOE,kBAAC,GAAD,EAAc,WAAU,oBAAqB,CAAA,EAC5C,EAAG,6BAA6B,OAAO,CACtC;;KAEL,KACC,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAQ,EAAO,GAAG;MACjC,WAAU;gBAHZ,CAKE,kBAAC,GAAD,EAAM,WAAU,oBAAqB,CAAA,EACpC,EAAG,8BAA8B,QAAQ,CACnC;;KAEV,KACC,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAO,EAAO,GAAG;MAChC,WAAU;gBAHZ,CAKE,kBAAC,GAAD,EAAQ,WAAU,oBAAqB,CAAA,EACtC,EAAG,6BAA6B,OAAO,CACjC;;KAEX,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAS,EAAO,IAAI,EAAO,KAAK;MAC/C,WAAU;MACV,cAAW;gBAEX,kBAAC,GAAD,EAAQ,WAAU,eAAgB,CAAA;MAC3B,CAAA;KACL;MACF;MACL,EAAO,aACN,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAO;GACJ,CAAA,CAEG"}

package/dist/components/tunnels/TunnelCreateWizard.d.ts

@@ -0,0 +1,2 @@
+export declare function TunnelCreateWizard(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TunnelCreateWizard.d.ts.map

package/dist/components/tunnels/TunnelCreateWizard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TunnelCreateWizard.d.ts","sourceRoot":"","sources":["../../../src/components/tunnels/TunnelCreateWizard.tsx"],"names":[],"mappings":"AAoEA,wBAAgB,kBAAkB,4CA+cjC"}