@burdenoff/microfe-channel 2026.830.1 → 2026.830.2

package/dist/channel/modules/channels/pages/CreateChannelPage.js

@@ -1,138 +1,166 @@
-import { useChannel as e } from "../../../providers/ChannelProvider.js";
-import { useChannels as t } from "../../../hooks/useChannels.js";
-import { PermissionGuard as n } from "../../../components/PermissionGuard.js";
-import { CHANNEL_PERMISSIONS as r } from "../../../constants/permissions.js";
-import { MarkdownEditor as i } from "../../../components/MarkdownEditor.js";
-import { useState as a } from "react";
-import { useI18n as o } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { AlertCircle as s, ArrowLeft as c, Bell as l, CheckCircle2 as u, Globe as d, Hash as f, Inbox as p, Loader2 as m, Mail as h, MessageCircle as g, MessageSquare as _, Radio as v, Save as y, Send as b, Smartphone as x, Users as S } from "lucide-react";
-import { useNavigate as C } from "react-router";
-import { jsx as w, jsxs as T } from "react/jsx-runtime";
-import { EmphasisPanel as E, GlassCard as D, OptionalFields as O, PagePurpose as k } from "@burdenoff/fe-libs/ui";
+import { useTr as e } from "../../../hooks/useTr.js";
+import { useChannel as t } from "../../../providers/ChannelProvider.js";
+import { useChannels as n } from "../../../hooks/useChannels.js";
+import { PermissionGuard as r } from "../../../components/PermissionGuard.js";
+import { CHANNEL_PERMISSIONS as i } from "../../../constants/permissions.js";
+import { MarkdownEditor as a } from "../../../components/MarkdownEditor.js";
+import { useMemo as o, useState as s } from "react";
+import { AlertCircle as c, ArrowLeft as l, Bell as u, CheckCircle2 as d, Globe as f, Hash as p, Inbox as m, Loader2 as h, Mail as g, MessageCircle as _, MessageSquare as v, Radio as y, Save as b, Send as x, Smartphone as S, Users as C } from "lucide-react";
+import { useNavigate as w } from "react-router";
+import { jsx as T, jsxs as E } from "react/jsx-runtime";
+import { EmphasisPanel as D, GlassCard as O, OptionalFields as k, PagePurpose as A } from "@burdenoff/fe-libs/ui";
 //#region src/channel/modules/channels/pages/CreateChannelPage.tsx
-var A = [
-	{
-		value: "EMAIL",
-		label: "Email",
-		description: "Send emails via various providers",
-		icon: h,
-		color: "text-accent-blue bg-accent-blue-subtle border-accent-blue-subtle",
-		adapters: [{
-			value: "AWS_SES",
-			label: "AWS SES"
-		}, {
-			value: "AZURE_ACS",
-			label: "Azure Communication Services"
-		}]
-	},
-	{
-		value: "SMS",
-		label: "SMS",
-		description: "Send text messages",
-		icon: x,
-		color: "text-status-success-text bg-status-success-bg-subtle border-status-success-bg-subtle",
-		adapters: [{
-			value: "AWS_SNS",
-			label: "AWS SNS"
-		}, {
-			value: "TWILIO_SMS",
-			label: "Twilio SMS"
-		}]
-	},
-	{
-		value: "PUSH",
-		label: "Push",
-		description: "Mobile & web push",
-		icon: l,
-		color: "text-accent-purple bg-accent-purple-subtle border-accent-purple-subtle",
-		adapters: [{
-			value: "FCM",
-			label: "Firebase Cloud Messaging"
-		}]
-	},
-	{
-		value: "INAPP",
-		label: "In-App",
-		description: "In-app notifications",
-		icon: p,
-		color: "text-accent-indigo bg-accent-indigo-subtle border-accent-indigo-subtle",
-		adapters: [{
-			value: "INAPP_NATIVE",
-			label: "Native In-App"
-		}]
-	},
-	{
-		value: "SLACK",
-		label: "Slack",
-		description: "Workspace notifications",
-		icon: f,
-		color: "text-accent-pink bg-accent-pink-subtle border-accent-pink-subtle",
-		adapters: [{
-			value: "SLACK_BOT",
-			label: "Slack Bot"
-		}]
-	},
-	{
-		value: "TEAMS",
-		label: "Teams",
-		description: "Teams notifications",
-		icon: S,
-		color: "text-accent-cyan bg-accent-cyan-subtle border-accent-cyan-subtle",
-		adapters: [{
-			value: "TEAMS_BOT",
-			label: "Teams Bot"
-		}]
-	},
-	{
-		value: "DISCORD",
-		label: "Discord",
-		description: "Server notifications",
-		icon: g,
-		color: "text-accent-violet bg-accent-violet-subtle border-accent-violet-subtle",
-		adapters: [{
-			value: "DISCORD_BOT",
-			label: "Discord Bot"
-		}]
-	},
-	{
-		value: "WHATSAPP",
-		label: "WhatsApp",
-		description: "Business messaging",
-		icon: b,
-		color: "text-accent-emerald bg-accent-emerald-subtle border-accent-emerald-subtle",
-		adapters: [{
-			value: "WHATSAPP_CLOUD",
-			label: "WhatsApp Cloud API"
-		}, {
-			value: "WHATSAPP_TWILIO",
-			label: "WhatsApp via Twilio"
-		}]
-	},
-	{
-		value: "WEBCHAT",
-		label: "Webchat",
-		description: "Chat widgets",
-		icon: _,
-		color: "text-accent-teal bg-accent-teal-subtle border-accent-teal-subtle",
-		adapters: []
-	},
-	{
-		value: "WEBHOOK",
-		label: "Webhook",
-		description: "HTTP webhooks",
-		icon: d,
-		color: "text-accent-orange bg-accent-orange-subtle border-accent-orange-subtle",
-		adapters: [{
-			value: "WEBHOOK_HTTP",
-			label: "HTTP Webhook"
-		}]
-	}
-];
 function j() {
-	let l = C(), { organizationId: d } = e(), { createChannel: f } = t(), { t: p } = o(), h = (e, t) => {
-		let n = p(e);
-		return n === e ? t : n;
-	}, [g, _] = a(!1), [b, x] = a(null), [S, j] = a({
+	let j = w(), { organizationId: M } = t(), { createChannel: N } = n(), P = e(), F = o(() => [
+		{
+			value: "EMAIL",
+			labelKey: "channel.platformLabel.email",
+			labelFallback: "Email",
+			descriptionKey: "channel.platformDescription.emailDescription",
+			descriptionFallback: "Send emails via various providers",
+			icon: g,
+			color: "text-accent-blue bg-accent-blue-subtle border-accent-blue-subtle",
+			adapters: [{
+				value: "AWS_SES",
+				labelKey: "channel.adapter.awsSes",
+				labelFallback: "AWS SES"
+			}, {
+				value: "AZURE_ACS",
+				labelKey: "channel.adapter.azureAcs",
+				labelFallback: "Azure Communication Services"
+			}]
+		},
+		{
+			value: "SMS",
+			labelKey: "channel.platformLabel.sms",
+			labelFallback: "SMS",
+			descriptionKey: "channel.platformDescription.smsDescription",
+			descriptionFallback: "Send text messages",
+			icon: S,
+			color: "text-status-success-text bg-status-success-bg-subtle border-status-success-bg-subtle",
+			adapters: [{
+				value: "AWS_SNS",
+				labelKey: "channel.adapter.awsSns",
+				labelFallback: "AWS SNS"
+			}, {
+				value: "TWILIO_SMS",
+				labelKey: "channel.adapter.twilioSms",
+				labelFallback: "Twilio SMS"
+			}]
+		},
+		{
+			value: "PUSH",
+			labelKey: "channel.platformLabel.push",
+			labelFallback: "Push",
+			descriptionKey: "channel.platformDescription.pushDescription",
+			descriptionFallback: "Mobile & web push",
+			icon: u,
+			color: "text-accent-purple bg-accent-purple-subtle border-accent-purple-subtle",
+			adapters: [{
+				value: "FCM",
+				labelKey: "channel.adapter.fcm",
+				labelFallback: "Firebase Cloud Messaging"
+			}]
+		},
+		{
+			value: "INAPP",
+			labelKey: "channel.platformLabel.inApp",
+			labelFallback: "In-App",
+			descriptionKey: "channel.platformDescription.inAppDescription",
+			descriptionFallback: "In-app notifications",
+			icon: m,
+			color: "text-accent-indigo bg-accent-indigo-subtle border-accent-indigo-subtle",
+			adapters: [{
+				value: "INAPP_NATIVE",
+				labelKey: "channel.adapter.inAppNative",
+				labelFallback: "Native In-App"
+			}]
+		},
+		{
+			value: "SLACK",
+			labelKey: "channel.platformLabel.slack",
+			labelFallback: "Slack",
+			descriptionKey: "channel.platformDescription.slackDescription",
+			descriptionFallback: "Workspace notifications",
+			icon: p,
+			color: "text-accent-pink bg-accent-pink-subtle border-accent-pink-subtle",
+			adapters: [{
+				value: "SLACK_BOT",
+				labelKey: "channel.adapter.slackBot",
+				labelFallback: "Slack Bot"
+			}]
+		},
+		{
+			value: "TEAMS",
+			labelKey: "channel.platformLabel.teams",
+			labelFallback: "Teams",
+			descriptionKey: "channel.platformDescription.teamsDescription",
+			descriptionFallback: "Teams notifications",
+			icon: C,
+			color: "text-accent-cyan bg-accent-cyan-subtle border-accent-cyan-subtle",
+			adapters: [{
+				value: "TEAMS_BOT",
+				labelKey: "channel.adapter.teamsBot",
+				labelFallback: "Teams Bot"
+			}]
+		},
+		{
+			value: "DISCORD",
+			labelKey: "channel.platformLabel.discord",
+			labelFallback: "Discord",
+			descriptionKey: "channel.platformDescription.discordDescription",
+			descriptionFallback: "Server notifications",
+			icon: _,
+			color: "text-accent-violet bg-accent-violet-subtle border-accent-violet-subtle",
+			adapters: [{
+				value: "DISCORD_BOT",
+				labelKey: "channel.adapter.discordBot",
+				labelFallback: "Discord Bot"
+			}]
+		},
+		{
+			value: "WHATSAPP",
+			labelKey: "channel.platformLabel.whatsapp",
+			labelFallback: "WhatsApp",
+			descriptionKey: "channel.platformDescription.whatsappDescription",
+			descriptionFallback: "Business messaging",
+			icon: x,
+			color: "text-accent-emerald bg-accent-emerald-subtle border-accent-emerald-subtle",
+			adapters: [{
+				value: "WHATSAPP_CLOUD",
+				labelKey: "channel.adapter.whatsappCloud",
+				labelFallback: "WhatsApp Cloud API"
+			}, {
+				value: "WHATSAPP_TWILIO",
+				labelKey: "channel.adapter.whatsappTwilio",
+				labelFallback: "WhatsApp via Twilio"
+			}]
+		},
+		{
+			value: "WEBCHAT",
+			labelKey: "channel.platformLabel.webchat",
+			labelFallback: "Webchat",
+			descriptionKey: "channel.platformDescription.webchatDescription",
+			descriptionFallback: "Chat widgets",
+			icon: v,
+			color: "text-accent-teal bg-accent-teal-subtle border-accent-teal-subtle",
+			adapters: []
+		},
+		{
+			value: "WEBHOOK",
+			labelKey: "channel.platformLabel.webhook",
+			labelFallback: "Webhook",
+			descriptionKey: "channel.platformDescription.webhookDescription",
+			descriptionFallback: "HTTP webhooks",
+			icon: f,
+			color: "text-accent-orange bg-accent-orange-subtle border-accent-orange-subtle",
+			adapters: [{
+				value: "WEBHOOK_HTTP",
+				labelKey: "channel.adapter.webhookHttp",
+				labelFallback: "HTTP Webhook"
+			}]
+		}
+	], []), [I, L] = s(!1), [R, z] = s(null), [B, V] = s({
 		name: "",
 		platform: "EMAIL",
 		description: "",
@@ -140,211 +168,214 @@ function j() {
 		status: "ACTIVE",
 		priority: 100,
 		platformConfig: ""
-	}), M = A.find((e) => e.value === S.platform)?.adapters || [], N = A.find((e) => e.value === S.platform), P = (e) => {
-		j((t) => ({
+	}), H = F.find((e) => e.value === B.platform)?.adapters || [], U = F.find((e) => e.value === B.platform), W = (e) => {
+		V((t) => ({
 			...t,
 			platform: e,
 			adapterType: ""
 		}));
 	};
-	return /* @__PURE__ */ w(n, {
-		permission: r.CHANNEL_CREATE,
-		children: /* @__PURE__ */ T("div", {
+	return /* @__PURE__ */ T(r, {
+		permission: i.CHANNEL_CREATE,
+		children: /* @__PURE__ */ E("div", {
 			className: "p-3 sm:p-6 space-y-6 max-w-5xl mx-auto",
 			children: [
-				/* @__PURE__ */ w("div", {
+				/* @__PURE__ */ T("div", {
 					className: "flex items-center justify-between",
-					children: /* @__PURE__ */ T("div", {
+					children: /* @__PURE__ */ E("div", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ w("button", {
+						children: [/* @__PURE__ */ T("button", {
 							type: "button",
-							onClick: () => l(-1),
+							onClick: () => j(-1),
 							className: "p-2 text-text-secondary hover:text-text-primary hover:bg-surface-hover rounded-lg transition-colors",
-							children: /* @__PURE__ */ w(c, { size: 20 })
-						}), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ T("h1", {
+							children: /* @__PURE__ */ T(l, { size: 20 })
+						}), /* @__PURE__ */ E("div", { children: [/* @__PURE__ */ E("h1", {
 							className: "text-xl font-bold text-text-primary flex items-center gap-2",
-							children: [/* @__PURE__ */ w(v, {
+							children: [/* @__PURE__ */ T(y, {
 								size: 22,
 								className: "text-accent-primary"
-							}), h("channel.createChannel", "Create Channel")]
-						}), /* @__PURE__ */ w("p", {
+							}), P("channel.createChannel", "Create Channel")]
+						}), /* @__PURE__ */ T("p", {
 							className: "text-sm text-text-secondary mt-0.5",
-							children: h("channel.createChannelSubtitle", "Set up a new communication channel")
+							children: P("channel.createChannelSubtitle", "Set up a new communication channel")
 						})] })]
 					})
 				}),
-				/* @__PURE__ */ w(k, {
-					icon: /* @__PURE__ */ w(v, {
+				/* @__PURE__ */ T(A, {
+					icon: /* @__PURE__ */ T(y, {
 						size: 15,
 						"aria-hidden": "true"
 					}),
-					children: h("channel.createChannelPurpose", "Set up a new way to reach people — for example a transactional email sender, an SMS gateway, a Slack workspace or a push provider. Name it, pick the platform and provider, and you will get a channel you can then authenticate and send through. Create one channel per provider account you want messages to flow through.")
+					children: P("channel.createChannelPurpose", "Set up a new way to reach people — for example a transactional email sender, an SMS gateway, a Slack workspace or a push provider. Name it, pick the platform and provider, and you will get a channel you can then authenticate and send through. Create one channel per provider account you want messages to flow through.")
 				}),
-				b && /* @__PURE__ */ T("div", {
+				R && /* @__PURE__ */ E("div", {
 					className: "flex items-center gap-3 p-3 bg-error-500/10 border border-status-error-border/30 rounded-lg",
-					children: [/* @__PURE__ */ w(s, {
+					children: [/* @__PURE__ */ T(c, {
 						size: 16,
 						className: "text-status-error-text shrink-0"
-					}), /* @__PURE__ */ w("p", {
+					}), /* @__PURE__ */ T("p", {
 						className: "text-sm text-error-400",
-						children: b
+						children: R
 					})]
 				}),
-				/* @__PURE__ */ T("form", {
+				/* @__PURE__ */ E("form", {
 					onSubmit: async (e) => {
-						if (e.preventDefault(), x(null), !S.name.trim()) {
-							x(h("channel.validation.nameRequired", "Channel name is required"));
+						if (e.preventDefault(), z(null), !B.name.trim()) {
+							z(P("channel.validation.nameRequired", "Channel name is required"));
 							return;
 						}
-						if (!d) {
-							x(h("channel.validation.organizationRequired", "Organization context is required. Please ensure an organization is selected."));
+						if (!M) {
+							z(P("channel.validation.organizationRequired", "Organization context is required. Please ensure an organization is selected."));
 							return;
 						}
 						let t;
-						if (S.platformConfig.trim()) try {
-							t = JSON.parse(S.platformConfig);
+						if (B.platformConfig.trim()) try {
+							t = JSON.parse(B.platformConfig);
 						} catch {
-							x(h("channel.validation.platformConfigJson", "Platform Config must be valid JSON"));
+							z(P("channel.validation.platformConfigJson", "Platform Config must be valid JSON"));
 							return;
 						}
-						_(!0);
+						L(!0);
 						try {
-							let e = await f({
-								name: S.name.trim(),
-								platform: S.platform,
-								organizationId: d,
-								description: S.description.trim() || void 0,
-								adapterType: S.adapterType || void 0,
-								status: S.status,
-								priority: S.priority,
+							let e = await N({
+								name: B.name.trim(),
+								platform: B.platform,
+								organizationId: M,
+								description: B.description.trim() || void 0,
+								adapterType: B.adapterType || void 0,
+								status: B.status,
+								priority: B.priority,
 								platformConfig: t
 							});
-							e ? l(`../${e.id}`) : x(h("channel.createFailed", "Failed to create channel"));
+							e ? j(`../${e.id}`) : z(P("channel.createFailed", "Failed to create channel"));
 						} catch (e) {
-							x(e instanceof Error ? e.message : h("channel.createFailed", "Failed to create channel"));
+							z(e instanceof Error ? e.message : P("channel.createFailed", "Failed to create channel"));
 						} finally {
-							_(!1);
+							L(!1);
 						}
 					},
 					className: "space-y-6",
 					children: [
-						/* @__PURE__ */ T("div", {
+						/* @__PURE__ */ E("div", {
 							className: "grid gap-5 lg:grid-cols-2",
-							children: [/* @__PURE__ */ T(E, {
+							children: [/* @__PURE__ */ E(D, {
 								className: "p-5 space-y-4",
 								children: [
-									/* @__PURE__ */ w("h2", {
+									/* @__PURE__ */ T("h2", {
 										className: "text-sm font-semibold text-text-primary uppercase tracking-wider",
-										children: h("channel.basicInformation", "Basic Information")
+										children: P("channel.basicInformation", "Basic Information")
 									}),
-									/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ T("label", {
+									/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ E("label", {
 										className: "block text-sm font-medium text-text-primary mb-1.5",
 										children: [
-											h("channel.name", "Name"),
+											P("channel.name", "Name"),
 											" ",
-											/* @__PURE__ */ w("span", {
+											/* @__PURE__ */ T("span", {
 												className: "text-status-error-text",
 												children: "*"
 											})
 										]
-									}), /* @__PURE__ */ w("input", {
-										"aria-label": h("channel.namePlaceholder", "e.g., Primary Email, SMS Alerts"),
+									}), /* @__PURE__ */ T("input", {
+										"aria-label": P("channel.namePlaceholder", "e.g., Primary Email, SMS Alerts"),
 										type: "text",
-										value: S.name,
-										onChange: (e) => j((t) => ({
+										value: B.name,
+										onChange: (e) => V((t) => ({
 											...t,
 											name: e.target.value
 										})),
 										className: "w-full px-3 py-2 text-sm bg-surface border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg/50 placeholder:text-text-secondary",
-										placeholder: h("channel.namePlaceholder", "e.g., Primary Email, SMS Alerts")
+										placeholder: P("channel.namePlaceholder", "e.g., Primary Email, SMS Alerts")
 									})] }),
-									/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("label", {
+									/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("label", {
 										htmlFor: "channel-create-description",
 										className: "block text-sm font-medium text-text-primary mb-1.5",
-										children: h("channel.description", "Description")
-									}), /* @__PURE__ */ w(i, {
+										children: P("channel.description", "Description")
+									}), /* @__PURE__ */ T(a, {
 										id: "channel-create-description",
-										value: S.description,
-										onChange: (e) => j((t) => ({
+										value: B.description,
+										onChange: (e) => V((t) => ({
 											...t,
 											description: e
 										})),
-										"aria-label": h("channel.descriptionPlaceholder", "Optional description of this channel's purpose"),
-										placeholder: h("channel.descriptionPlaceholder", "Optional description of this channel's purpose"),
+										"aria-label": P("channel.descriptionPlaceholder", "Optional description of this channel's purpose"),
+										placeholder: P("channel.descriptionPlaceholder", "Optional description of this channel's purpose"),
 										rows: 3
 									})] })
 								]
-							}), /* @__PURE__ */ T(D, {
+							}), /* @__PURE__ */ E(O, {
 								treatment: "plain",
 								className: "p-5 border-border-seam space-y-4",
 								children: [
-									/* @__PURE__ */ w("h2", {
+									/* @__PURE__ */ T("h2", {
 										className: "text-sm font-semibold text-text-primary uppercase tracking-wider",
-										children: h("channel.providerStatus", "Provider & Status")
+										children: P("channel.providerStatus", "Provider & Status")
 									}),
-									/* @__PURE__ */ T("div", { children: [
-										/* @__PURE__ */ w("label", {
+									/* @__PURE__ */ E("div", { children: [
+										/* @__PURE__ */ T("label", {
 											className: "block text-sm font-medium text-text-primary mb-1.5",
-											children: h("channel.providerAdapter", "Provider / Adapter")
+											children: P("channel.providerAdapter", "Provider / Adapter")
 										}),
-										/* @__PURE__ */ T("select", {
-											value: S.adapterType,
-											onChange: (e) => j((t) => ({
+										/* @__PURE__ */ E("select", {
+											value: B.adapterType,
+											onChange: (e) => V((t) => ({
 												...t,
 												adapterType: e.target.value
 											})),
 											className: "w-full px-3 py-2 text-sm bg-surface border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg/50 text-text-primary",
-											children: [/* @__PURE__ */ w("option", {
+											children: [/* @__PURE__ */ T("option", {
 												value: "",
-												children: h("channel.selectProvider", "Select a provider (optional)")
-											}), M.map((e) => /* @__PURE__ */ w("option", {
+												children: P("channel.selectProvider", "Select a provider (optional)")
+											}), H.map((e) => /* @__PURE__ */ T("option", {
 												value: e.value,
-												children: e.label
+												children: P(e.labelKey, e.labelFallback)
 											}, e.value))]
 										}),
-										/* @__PURE__ */ w("p", {
+										/* @__PURE__ */ T("p", {
 											className: "mt-1 text-[11px] text-text-secondary",
-											children: N ? h("channel.providersAvailableForPlatform", `${M.length} providers available for ${N.label}`) : h("channel.selectPlatformFirst", "Select a platform first")
+											children: U ? P("channel.providersAvailableForPlatform", "{{count}} providers available for {{platform}}", {
+												count: H.length,
+												platform: P(U.labelKey, U.labelFallback)
+											}) : P("channel.selectPlatformFirst", "Select a platform first")
 										})
 									] }),
-									/* @__PURE__ */ T("div", {
+									/* @__PURE__ */ E("div", {
 										className: "grid gap-4 sm:grid-cols-2",
-										children: [/* @__PURE__ */ T("div", { children: [
-											/* @__PURE__ */ w("label", {
+										children: [/* @__PURE__ */ E("div", { children: [
+											/* @__PURE__ */ T("label", {
 												className: "block text-sm font-medium text-text-primary mb-1.5",
-												children: h("channel.status", "Status")
+												children: P("channel.status", "Status")
 											}),
-											/* @__PURE__ */ T("select", {
-												value: S.status,
-												onChange: (e) => j((t) => ({
+											/* @__PURE__ */ E("select", {
+												value: B.status,
+												onChange: (e) => V((t) => ({
 													...t,
 													status: e.target.value
 												})),
 												className: "w-full px-3 py-2 text-sm bg-surface border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg/50 text-text-primary",
-												children: [/* @__PURE__ */ w("option", {
+												children: [/* @__PURE__ */ T("option", {
 													value: "ACTIVE",
-													children: h("channel.status.active", "Active")
-												}), /* @__PURE__ */ w("option", {
+													children: P("channel.statusLabel.active", "Active")
+												}), /* @__PURE__ */ T("option", {
 													value: "INACTIVE",
-													children: h("channel.status.inactive", "Inactive")
+													children: P("channel.statusLabel.inactive", "Inactive")
 												})]
 											}),
-											/* @__PURE__ */ w("p", {
+											/* @__PURE__ */ T("p", {
 												className: "mt-1 text-[11px] text-text-secondary",
-												children: S.status === "ACTIVE" ? h("channel.statusHint.active", "Ready to send immediately") : h("channel.statusHint.inactive", "Configure before activating")
+												children: B.status === "ACTIVE" ? P("channel.statusHint.active", "Ready to send immediately") : P("channel.statusHint.inactive", "Configure before activating")
 											})
-										] }), /* @__PURE__ */ T("div", { children: [
-											/* @__PURE__ */ w("label", {
+										] }), /* @__PURE__ */ E("div", { children: [
+											/* @__PURE__ */ T("label", {
 												htmlFor: "create-channel-priority",
 												className: "block text-sm font-medium text-text-primary mb-1.5",
-												children: h("channel.priority", "Priority")
+												children: P("channel.priority", "Priority")
 											}),
-											/* @__PURE__ */ w("input", {
+											/* @__PURE__ */ T("input", {
 												id: "create-channel-priority",
-												"aria-label": h("channel.priority", "Priority"),
+												"aria-label": P("channel.priority", "Priority"),
 												type: "number",
-												value: S.priority,
-												onChange: (e) => j((t) => ({
+												value: B.priority,
+												onChange: (e) => V((t) => ({
 													...t,
 													priority: parseInt(e.target.value) || 0
 												})),
@@ -352,104 +383,104 @@ function j() {
 												max: 100,
 												className: "w-full px-3 py-2 text-sm bg-surface border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg/50"
 											}),
-											/* @__PURE__ */ w("p", {
+											/* @__PURE__ */ T("p", {
 												className: "mt-1 text-[11px] text-text-secondary",
-												children: h("channel.priorityHint", "Lower = higher priority (0-100)")
+												children: P("channel.priorityHint", "Lower = higher priority (0-100)")
 											})
 										] })]
 									})
 								]
 							})]
 						}),
-						/* @__PURE__ */ T(D, {
+						/* @__PURE__ */ E(O, {
 							treatment: "plain",
 							className: "p-5 border-border-seam space-y-4",
-							children: [/* @__PURE__ */ T("h2", {
+							children: [/* @__PURE__ */ E("h2", {
 								className: "text-sm font-semibold text-text-primary uppercase tracking-wider",
 								children: [
-									h("channel.platform", "Platform"),
+									P("channel.platform", "Platform"),
 									" ",
-									/* @__PURE__ */ w("span", {
+									/* @__PURE__ */ T("span", {
 										className: "text-status-error-text",
 										children: "*"
 									})
 								]
-							}), /* @__PURE__ */ w("div", {
+							}), /* @__PURE__ */ T("div", {
 								className: "grid gap-2 grid-cols-2 sm:grid-cols-3 lg:grid-cols-5",
-								children: A.map((e) => {
-									let t = e.icon, n = S.platform === e.value;
-									return /* @__PURE__ */ T("button", {
+								children: F.map((e) => {
+									let t = e.icon, n = B.platform === e.value;
+									return /* @__PURE__ */ E("button", {
 										type: "button",
-										onClick: () => P(e.value),
+										onClick: () => W(e.value),
 										className: `relative flex flex-col items-center gap-1.5 p-3 rounded-lg border transition-all text-center ${n ? `${e.color} border-current ring-1 ring-current` : "border-border-subtle hover:bg-surface-hover text-text-secondary hover:text-text-primary"}`,
 										children: [
-											n && /* @__PURE__ */ w(u, {
+											n && /* @__PURE__ */ T(d, {
 												size: 14,
 												className: "absolute top-1.5 right-1.5 text-current"
 											}),
-											/* @__PURE__ */ w(t, { size: 20 }),
-											/* @__PURE__ */ w("span", {
+											/* @__PURE__ */ T(t, { size: 20 }),
+											/* @__PURE__ */ T("span", {
 												className: "text-xs font-semibold",
-												children: e.label
+												children: P(e.labelKey, e.labelFallback)
 											}),
-											/* @__PURE__ */ w("span", {
+											/* @__PURE__ */ T("span", {
 												className: "text-[10px] leading-tight opacity-70",
-												children: e.description
+												children: P(e.descriptionKey, e.descriptionFallback)
 											})
 										]
 									}, e.value);
 								})
 							})]
 						}),
-						/* @__PURE__ */ w(O, {
-							title: h("channel.advancedOptions", "Advanced settings"),
-							children: /* @__PURE__ */ w("div", {
+						/* @__PURE__ */ T(k, {
+							title: P("channel.advancedOptions", "Advanced settings"),
+							children: /* @__PURE__ */ T("div", {
 								className: "grid gap-4 lg:grid-cols-2",
-								children: /* @__PURE__ */ T("div", { children: [
-									/* @__PURE__ */ T("label", {
+								children: /* @__PURE__ */ E("div", { children: [
+									/* @__PURE__ */ E("label", {
 										className: "block text-sm font-medium text-text-primary mb-1.5",
 										children: [
-											h("channel.platformConfig", "Platform Config"),
+											P("channel.platformConfig", "Platform Config"),
 											" ",
-											/* @__PURE__ */ w("span", {
+											/* @__PURE__ */ T("span", {
 												className: "text-[10px] text-text-secondary",
-												children: "(JSON)"
+												children: P("channel.jsonMarker", "(JSON)")
 											})
 										]
 									}),
-									/* @__PURE__ */ w("textarea", {
-										"aria-label": h("channel.platformConfig", "Platform Config"),
-										value: S.platformConfig,
-										onChange: (e) => j((t) => ({
+									/* @__PURE__ */ T("textarea", {
+										"aria-label": P("channel.platformConfig", "Platform Config"),
+										value: B.platformConfig,
+										onChange: (e) => V((t) => ({
 											...t,
 											platformConfig: e.target.value
 										})),
 										rows: 3,
 										className: "w-full px-3 py-2 text-sm bg-surface border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg/50 resize-none font-mono placeholder:text-text-secondary",
-										placeholder: h("channel.platformConfigPlaceholder", "{\"fromEmail\": \"noreply@example.com\"}")
+										placeholder: P("channel.platformConfigPlaceholder", "{\"fromEmail\": \"noreply@example.com\"}")
 									}),
-									/* @__PURE__ */ w("p", {
+									/* @__PURE__ */ T("p", {
 										className: "mt-1 text-[11px] text-text-secondary",
-										children: h("channel.platformConfigHint", "Platform-specific configuration as JSON")
+										children: P("channel.platformConfigHint", "Platform-specific configuration as JSON")
 									})
 								] })
 							})
 						}),
-						/* @__PURE__ */ T("div", {
+						/* @__PURE__ */ E("div", {
 							className: "flex items-center justify-between pt-2",
-							children: [/* @__PURE__ */ w("button", {
+							children: [/* @__PURE__ */ T("button", {
 								type: "button",
-								onClick: () => l("/channels/list"),
+								onClick: () => j("/channels/list"),
 								className: "px-4 py-2 text-sm text-text-secondary hover:text-text-primary hover:bg-surface-hover border border-border-subtle rounded-lg transition-colors",
-								children: h("channel.cancel", "Cancel")
-							}), /* @__PURE__ */ T("button", {
+								children: P("channel.cancel", "Cancel")
+							}), /* @__PURE__ */ E("button", {
 								type: "submit",
-								disabled: g || !S.name.trim(),
+								disabled: I || !B.name.trim(),
 								className: "inline-flex items-center gap-2 px-5 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg hover:bg-action-primary-bg-hover rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
-								children: [g ? /* @__PURE__ */ w(m, {
+								children: [I ? /* @__PURE__ */ T(h, {
 									size: 16,
 									className: "animate-spin"
-								}) : /* @__PURE__ */ w(y, { size: 16 }), h("channel.createChannel", "Create Channel")]
+								}) : /* @__PURE__ */ T(b, { size: 16 }), P("channel.createChannel", "Create Channel")]
 							})]
 						})
 					]