@burdenoff/microfe-channel 2026.608.1 → 2026.624.1

package/dist/channel/components/AdapterCredentialsForm.js

@@ -27,7 +27,7 @@ function m({ adapterType: s, credentials: m, onChange: h, onValidationChange: g,
 		s,
 		g
 	]), !s) return /* @__PURE__ */ f("div", {
-		className: "text-center py-6 text-muted-foreground",
+		className: "text-center py-6 text-text-secondary",
 		children: /* @__PURE__ */ f("p", {
 			className: "text-sm",
 			children: b("channel.selectAdapterType", "Select an adapter type to configure credentials")
@@ -69,11 +69,11 @@ function m({ adapterType: s, credentials: m, onChange: h, onValidationChange: g,
 			[e]: !t[e]
 		}));
 	}, k = (e) => {
-		let t = m[e.key], n = C[e.key] && e.required && !t, r = `w-full px-3 py-2 text-sm bg-surface border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-primary disabled:opacity-50 disabled:cursor-not-allowed ${n ? "border-status-error-border" : "border-border"}`, i = `adapter-cred-${e.key}`;
+		let t = m[e.key], n = C[e.key] && e.required && !t, r = `w-full px-3 py-2 text-sm bg-surface border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-primary disabled:opacity-50 disabled:cursor-not-allowed ${n ? "border-status-error-border" : "border-border-subtle"}`, i = `adapter-cred-${e.key}`;
 		return /* @__PURE__ */ p("div", { children: [
 			/* @__PURE__ */ p("label", {
 				htmlFor: i,
-				className: "block text-sm font-medium text-foreground mb-1.5",
+				className: "block text-sm font-medium text-text-primary mb-1.5",
 				children: [e.displayName, e.required && /* @__PURE__ */ f("span", {
 					className: "text-status-error-text ml-1",
 					children: "*"
@@ -106,7 +106,7 @@ function m({ adapterType: s, credentials: m, onChange: h, onValidationChange: g,
 					type: "button",
 					onClick: () => O(e.key),
 					"aria-label": x[e.key] ? `Hide ${e.displayName}` : `Show ${e.displayName}`,
-					className: "absolute right-2 top-1/2 -translate-y-1/2 p-1 text-muted-foreground hover:text-foreground",
+					className: "absolute right-2 top-1/2 -translate-y-1/2 p-1 text-text-secondary hover:text-text-primary",
 					tabIndex: -1,
 					children: x[e.key] ? /* @__PURE__ */ f(u, { size: 16 }) : /* @__PURE__ */ f(l, { size: 16 })
 				})]
@@ -140,9 +140,9 @@ function m({ adapterType: s, credentials: m, onChange: h, onValidationChange: g,
 					checked: t ?? e.defaultValue ?? !1,
 					onChange: (t) => E(e.key, t.target.checked),
 					disabled: _,
-					className: "size-4 rounded border-border text-accent-primary focus:ring-accent-primary"
+					className: "size-4 rounded border-border-subtle text-accent-primary focus:ring-accent-primary"
 				}), /* @__PURE__ */ f("span", {
-					className: "text-sm text-muted-foreground",
+					className: "text-sm text-text-secondary",
 					children: e.description
 				})]
 			}),
@@ -167,7 +167,7 @@ function m({ adapterType: s, credentials: m, onChange: h, onValidationChange: g,
 				}, e.value))]
 			}),
 			e.type !== "boolean" && /* @__PURE__ */ f("p", {
-				className: "mt-1 text-xs text-muted-foreground",
+				className: "mt-1 text-xs text-text-secondary",
 				children: e.description
 			}),
 			n && /* @__PURE__ */ f("p", {
@@ -181,10 +181,10 @@ function m({ adapterType: s, credentials: m, onChange: h, onValidationChange: g,
 		children: [/* @__PURE__ */ p("div", {
 			className: "flex items-start justify-between",
 			children: [/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("h3", {
-				className: "text-sm font-semibold text-foreground",
+				className: "text-sm font-semibold text-text-primary",
 				children: T.displayName
 			}), /* @__PURE__ */ f("p", {
-				className: "text-xs text-muted-foreground mt-0.5",
+				className: "text-xs text-text-secondary mt-0.5",
 				children: T.description
 			})] }), T.docUrl && /* @__PURE__ */ p("a", {
 				href: T.docUrl,
@@ -199,9 +199,9 @@ function m({ adapterType: s, credentials: m, onChange: h, onValidationChange: g,
 				className: "space-y-4",
 				children: T.credentials.map(k)
 			}), v && T.platformMetadata && T.platformMetadata.length > 0 && /* @__PURE__ */ f(d, { children: /* @__PURE__ */ p("div", {
-				className: "border-t border-border pt-4 mt-4",
+				className: "border-t border-border-subtle pt-4 mt-4",
 				children: [/* @__PURE__ */ f("p", {
-					className: "text-xs font-medium text-muted-foreground mb-3",
+					className: "text-xs font-medium text-text-secondary mb-3",
 					children: b("channel.optionalSettings", "Optional Settings")
 				}), /* @__PURE__ */ f("div", {
 					className: "space-y-4",

package/dist/channel/components/AdapterCredentialsForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdapterCredentialsForm.js","names":[],"sources":["../../../src/channel/components/AdapterCredentialsForm.tsx"],"sourcesContent":["/**\n * Adapter Credentials Form\n *\n * Dynamic form that renders credential fields based on the selected adapter type.\n * Field names match exactly what the backend adapters expect.\n */\n\nimport { useState, useEffect } from 'react';\nimport { ExternalLink, Eye, EyeOff, AlertCircle, CheckCircle2 } from 'lucide-react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport type { AdapterType } from '../hooks/useChannels';\nimport {\n  getAdapterCredentialSchema,\n  getDefaultCredentials,\n  validateCredentials,\n  type CredentialField,\n} from '../config/adapterCredentials';\n\ninterface AdapterCredentialsFormProps {\n  adapterType: AdapterType | undefined;\n  credentials: Record<string, unknown>;\n  onChange: (credentials: Record<string, unknown>) => void;\n  onValidationChange?: (isValid: boolean, errors: string[]) => void;\n  disabled?: boolean;\n  showPlatformMetadata?: boolean;\n}\n\nexport function AdapterCredentialsForm({\n  adapterType,\n  credentials,\n  onChange,\n  onValidationChange,\n  disabled = false,\n  showPlatformMetadata = true,\n}: AdapterCredentialsFormProps) {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const value = t(key);\n    return value === key ? fallback : value;\n  };\n  const [showPasswords, setShowPasswords] = useState<Record<string, boolean>>({});\n  const [touched, setTouched] = useState<Record<string, boolean>>({});\n\n  const schema = getAdapterCredentialSchema(adapterType);\n\n  // Initialize with default values when adapter type changes\n  useEffect(() => {\n    if (adapterType) {\n      const defaults = getDefaultCredentials(adapterType);\n      const merged = { ...defaults, ...credentials };\n      if (JSON.stringify(merged) !== JSON.stringify(credentials)) {\n        onChange(merged);\n      }\n    }\n  }, [adapterType]);\n\n  // Validate on change\n  useEffect(() => {\n    if (onValidationChange && adapterType) {\n      const { valid, errors } = validateCredentials(adapterType, credentials);\n      onValidationChange(valid, errors);\n    }\n  }, [credentials, adapterType, onValidationChange]);\n\n  if (!adapterType) {\n    return (\n      <div className=\"text-center py-6 text-muted-foreground\">\n        <p className=\"text-sm\">\n          {tr('channel.selectAdapterType', 'Select an adapter type to configure credentials')}\n        </p>\n      </div>\n    );\n  }\n\n  if (!schema) {\n    return (\n      <div className=\"p-4 bg-status-warning-bg-subtle border border-warning-300 rounded-lg\">\n        <div className=\"flex items-start gap-2\">\n          <AlertCircle size={16} className=\"text-status-warning-text mt-0.5\" />\n          <div>\n            <p className=\"text-sm font-medium text-warning-700\">\n              {tr('channel.noCredentialSchema', 'No credential schema defined for')} {adapterType}\n            </p>\n            <p className=\"text-xs text-warning-600 mt-1\">\n              {tr(\n                'channel.enterCredentialsAsJson',\n                'You can still enter credentials as JSON in the raw format below.'\n              )}\n            </p>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  const handleFieldChange = (key: string, value: unknown) => {\n    onChange({ ...credentials, [key]: value });\n  };\n\n  const handleFieldBlur = (key: string) => {\n    setTouched((prev) => ({ ...prev, [key]: true }));\n  };\n\n  const togglePasswordVisibility = (key: string) => {\n    setShowPasswords((prev) => ({ ...prev, [key]: !prev[key] }));\n  };\n\n  const renderField = (field: CredentialField) => {\n    const value = credentials[field.key];\n    const fieldError = touched[field.key] && field.required && !value;\n\n    const commonInputClasses = `w-full px-3 py-2 text-sm bg-surface border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-primary disabled:opacity-50 disabled:cursor-not-allowed ${\n      fieldError ? 'border-status-error-border' : 'border-border'\n    }`;\n\n    const fieldId = `adapter-cred-${field.key}`;\n    return (\n      <div key={field.key}>\n        <label htmlFor={fieldId} className=\"block text-sm font-medium text-foreground mb-1.5\">\n          {field.displayName}\n          {field.required && <span className=\"text-status-error-text ml-1\">*</span>}\n        </label>\n\n        {field.type === 'text' && (\n          <input\n            id={fieldId}\n            aria-label={field.displayName}\n            type=\"text\"\n            value={(value as string) || ''}\n            onChange={(e) => handleFieldChange(field.key, e.target.value)}\n            onBlur={() => handleFieldBlur(field.key)}\n            disabled={disabled}\n            placeholder={field.placeholder}\n            className={commonInputClasses}\n          />\n        )}\n\n        {field.type === 'password' && (\n          <div className=\"relative\">\n            <input\n              id={fieldId}\n              aria-label={field.displayName}\n              type={showPasswords[field.key] ? 'text' : 'password'}\n              value={(value as string) || ''}\n              onChange={(e) => handleFieldChange(field.key, e.target.value)}\n              onBlur={() => handleFieldBlur(field.key)}\n              disabled={disabled}\n              placeholder={field.placeholder}\n              className={`${commonInputClasses} pr-10`}\n            />\n            <button\n              type=\"button\"\n              onClick={() => togglePasswordVisibility(field.key)}\n              aria-label={\n                showPasswords[field.key] ? `Hide ${field.displayName}` : `Show ${field.displayName}`\n              }\n              className=\"absolute right-2 top-1/2 -translate-y-1/2 p-1 text-muted-foreground hover:text-foreground\"\n              tabIndex={-1}\n            >\n              {showPasswords[field.key] ? <EyeOff size={16} /> : <Eye size={16} />}\n            </button>\n          </div>\n        )}\n\n        {field.type === 'textarea' && (\n          <textarea\n            id={fieldId}\n            aria-label={field.displayName}\n            value={(value as string) || ''}\n            onChange={(e) => handleFieldChange(field.key, e.target.value)}\n            onBlur={() => handleFieldBlur(field.key)}\n            disabled={disabled}\n            placeholder={field.placeholder}\n            rows={4}\n            className={`${commonInputClasses} resize-none font-mono text-xs`}\n          />\n        )}\n\n        {field.type === 'number' && (\n          <input\n            id={fieldId}\n            aria-label={field.displayName}\n            type=\"number\"\n            value={(value as number) ?? field.defaultValue ?? ''}\n            onChange={(e) =>\n              handleFieldChange(field.key, e.target.value ? Number(e.target.value) : undefined)\n            }\n            onBlur={() => handleFieldBlur(field.key)}\n            disabled={disabled}\n            placeholder={field.placeholder}\n            className={commonInputClasses}\n          />\n        )}\n\n        {field.type === 'boolean' && (\n          <label className=\"flex items-center gap-2 cursor-pointer\">\n            <input\n              type=\"checkbox\"\n              checked={(value as boolean) ?? field.defaultValue ?? false}\n              onChange={(e) => handleFieldChange(field.key, e.target.checked)}\n              disabled={disabled}\n              className=\"size-4 rounded border-border text-accent-primary focus:ring-accent-primary\"\n            />\n            <span className=\"text-sm text-muted-foreground\">{field.description}</span>\n          </label>\n        )}\n\n        {field.type === 'select' && field.options && (\n          <select\n            id={fieldId}\n            aria-label={field.displayName}\n            value={(value as string) ?? field.defaultValue ?? ''}\n            onChange={(e) => handleFieldChange(field.key, e.target.value)}\n            onBlur={() => handleFieldBlur(field.key)}\n            disabled={disabled}\n            className={`${commonInputClasses} bg-bg-surface`}\n          >\n            <option value=\"\">\n              {tr('channel.select', 'Select')} {field.displayName.toLowerCase()}\n            </option>\n            {field.options.map((opt) => (\n              <option key={opt.value} value={opt.value}>\n                {opt.label}\n              </option>\n            ))}\n          </select>\n        )}\n\n        {field.type !== 'boolean' && (\n          <p className=\"mt-1 text-xs text-muted-foreground\">{field.description}</p>\n        )}\n\n        {fieldError && (\n          <p className=\"mt-1 text-xs text-status-error-text\">\n            {tr('channel.fieldRequired', 'This field is required')}\n          </p>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div className=\"space-y-5\">\n      {/* Header with adapter info */}\n      <div className=\"flex items-start justify-between\">\n        <div>\n          <h3 className=\"text-sm font-semibold text-foreground\">{schema.displayName}</h3>\n          <p className=\"text-xs text-muted-foreground mt-0.5\">{schema.description}</p>\n        </div>\n        {schema.docUrl && (\n          <a\n            href={schema.docUrl}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className=\"flex items-center gap-1 text-xs text-accent-primary hover:text-accent-primary-hover\"\n          >\n            <span>{tr('channel.docs', 'Docs')}</span>\n            <ExternalLink size={12} />\n          </a>\n        )}\n      </div>\n\n      {/* Credential fields */}\n      <div className=\"space-y-4\">\n        {schema.credentials.length > 0 && (\n          <div className=\"space-y-4\">{schema.credentials.map(renderField)}</div>\n        )}\n\n        {/* Platform metadata fields (optional settings) */}\n        {showPlatformMetadata && schema.platformMetadata && schema.platformMetadata.length > 0 && (\n          <>\n            <div className=\"border-t border-border pt-4 mt-4\">\n              <p className=\"text-xs font-medium text-muted-foreground mb-3\">\n                {tr('channel.optionalSettings', 'Optional Settings')}\n              </p>\n              <div className=\"space-y-4\">{schema.platformMetadata.map(renderField)}</div>\n            </div>\n          </>\n        )}\n      </div>\n    </div>\n  );\n}\n\n/**\n * Compact validation status indicator\n */\nexport function CredentialValidationStatus({\n  adapterType,\n  credentials,\n}: {\n  adapterType: AdapterType | undefined;\n  credentials: Record<string, unknown>;\n}) {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const value = t(key);\n    return value === key ? fallback : value;\n  };\n\n  if (!adapterType) return null;\n\n  const { valid, errors } = validateCredentials(adapterType, credentials);\n\n  if (valid) {\n    return (\n      <div className=\"flex items-center gap-1.5 text-status-success-text\">\n        <CheckCircle2 size={14} />\n        <span className=\"text-xs\">\n          {tr('channel.allRequiredFieldsFilled', 'All required fields filled')}\n        </span>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex items-center gap-1.5 text-status-warning-text\">\n      <AlertCircle size={14} />\n      <span className=\"text-xs\">\n        {errors.length} {tr('channel.fieldsNeedAttention', 'field(s) need attention')}\n      </span>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"AdapterCredentialsForm.js","names":[],"sources":["../../../src/channel/components/AdapterCredentialsForm.tsx"],"sourcesContent":["/**\n * Adapter Credentials Form\n *\n * Dynamic form that renders credential fields based on the selected adapter type.\n * Field names match exactly what the backend adapters expect.\n */\n\nimport { useState, useEffect } from 'react';\nimport { ExternalLink, Eye, EyeOff, AlertCircle, CheckCircle2 } from 'lucide-react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport type { AdapterType } from '../hooks/useChannels';\nimport {\n  getAdapterCredentialSchema,\n  getDefaultCredentials,\n  validateCredentials,\n  type CredentialField,\n} from '../config/adapterCredentials';\n\ninterface AdapterCredentialsFormProps {\n  adapterType: AdapterType | undefined;\n  credentials: Record<string, unknown>;\n  onChange: (credentials: Record<string, unknown>) => void;\n  onValidationChange?: (isValid: boolean, errors: string[]) => void;\n  disabled?: boolean;\n  showPlatformMetadata?: boolean;\n}\n\nexport function AdapterCredentialsForm({\n  adapterType,\n  credentials,\n  onChange,\n  onValidationChange,\n  disabled = false,\n  showPlatformMetadata = true,\n}: AdapterCredentialsFormProps) {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const value = t(key);\n    return value === key ? fallback : value;\n  };\n  const [showPasswords, setShowPasswords] = useState<Record<string, boolean>>({});\n  const [touched, setTouched] = useState<Record<string, boolean>>({});\n\n  const schema = getAdapterCredentialSchema(adapterType);\n\n  // Initialize with default values when adapter type changes\n  useEffect(() => {\n    if (adapterType) {\n      const defaults = getDefaultCredentials(adapterType);\n      const merged = { ...defaults, ...credentials };\n      if (JSON.stringify(merged) !== JSON.stringify(credentials)) {\n        onChange(merged);\n      }\n    }\n  }, [adapterType]);\n\n  // Validate on change\n  useEffect(() => {\n    if (onValidationChange && adapterType) {\n      const { valid, errors } = validateCredentials(adapterType, credentials);\n      onValidationChange(valid, errors);\n    }\n  }, [credentials, adapterType, onValidationChange]);\n\n  if (!adapterType) {\n    return (\n      <div className=\"text-center py-6 text-text-secondary\">\n        <p className=\"text-sm\">\n          {tr('channel.selectAdapterType', 'Select an adapter type to configure credentials')}\n        </p>\n      </div>\n    );\n  }\n\n  if (!schema) {\n    return (\n      <div className=\"p-4 bg-status-warning-bg-subtle border border-warning-300 rounded-lg\">\n        <div className=\"flex items-start gap-2\">\n          <AlertCircle size={16} className=\"text-status-warning-text mt-0.5\" />\n          <div>\n            <p className=\"text-sm font-medium text-warning-700\">\n              {tr('channel.noCredentialSchema', 'No credential schema defined for')} {adapterType}\n            </p>\n            <p className=\"text-xs text-warning-600 mt-1\">\n              {tr(\n                'channel.enterCredentialsAsJson',\n                'You can still enter credentials as JSON in the raw format below.'\n              )}\n            </p>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  const handleFieldChange = (key: string, value: unknown) => {\n    onChange({ ...credentials, [key]: value });\n  };\n\n  const handleFieldBlur = (key: string) => {\n    setTouched((prev) => ({ ...prev, [key]: true }));\n  };\n\n  const togglePasswordVisibility = (key: string) => {\n    setShowPasswords((prev) => ({ ...prev, [key]: !prev[key] }));\n  };\n\n  const renderField = (field: CredentialField) => {\n    const value = credentials[field.key];\n    const fieldError = touched[field.key] && field.required && !value;\n\n    const commonInputClasses = `w-full px-3 py-2 text-sm bg-surface border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-primary disabled:opacity-50 disabled:cursor-not-allowed ${\n      fieldError ? 'border-status-error-border' : 'border-border-subtle'\n    }`;\n\n    const fieldId = `adapter-cred-${field.key}`;\n    return (\n      <div key={field.key}>\n        <label htmlFor={fieldId} className=\"block text-sm font-medium text-text-primary mb-1.5\">\n          {field.displayName}\n          {field.required && <span className=\"text-status-error-text ml-1\">*</span>}\n        </label>\n\n        {field.type === 'text' && (\n          <input\n            id={fieldId}\n            aria-label={field.displayName}\n            type=\"text\"\n            value={(value as string) || ''}\n            onChange={(e) => handleFieldChange(field.key, e.target.value)}\n            onBlur={() => handleFieldBlur(field.key)}\n            disabled={disabled}\n            placeholder={field.placeholder}\n            className={commonInputClasses}\n          />\n        )}\n\n        {field.type === 'password' && (\n          <div className=\"relative\">\n            <input\n              id={fieldId}\n              aria-label={field.displayName}\n              type={showPasswords[field.key] ? 'text' : 'password'}\n              value={(value as string) || ''}\n              onChange={(e) => handleFieldChange(field.key, e.target.value)}\n              onBlur={() => handleFieldBlur(field.key)}\n              disabled={disabled}\n              placeholder={field.placeholder}\n              className={`${commonInputClasses} pr-10`}\n            />\n            <button\n              type=\"button\"\n              onClick={() => togglePasswordVisibility(field.key)}\n              aria-label={\n                showPasswords[field.key] ? `Hide ${field.displayName}` : `Show ${field.displayName}`\n              }\n              className=\"absolute right-2 top-1/2 -translate-y-1/2 p-1 text-text-secondary hover:text-text-primary\"\n              tabIndex={-1}\n            >\n              {showPasswords[field.key] ? <EyeOff size={16} /> : <Eye size={16} />}\n            </button>\n          </div>\n        )}\n\n        {field.type === 'textarea' && (\n          <textarea\n            id={fieldId}\n            aria-label={field.displayName}\n            value={(value as string) || ''}\n            onChange={(e) => handleFieldChange(field.key, e.target.value)}\n            onBlur={() => handleFieldBlur(field.key)}\n            disabled={disabled}\n            placeholder={field.placeholder}\n            rows={4}\n            className={`${commonInputClasses} resize-none font-mono text-xs`}\n          />\n        )}\n\n        {field.type === 'number' && (\n          <input\n            id={fieldId}\n            aria-label={field.displayName}\n            type=\"number\"\n            value={(value as number) ?? field.defaultValue ?? ''}\n            onChange={(e) =>\n              handleFieldChange(field.key, e.target.value ? Number(e.target.value) : undefined)\n            }\n            onBlur={() => handleFieldBlur(field.key)}\n            disabled={disabled}\n            placeholder={field.placeholder}\n            className={commonInputClasses}\n          />\n        )}\n\n        {field.type === 'boolean' && (\n          <label className=\"flex items-center gap-2 cursor-pointer\">\n            <input\n              type=\"checkbox\"\n              checked={(value as boolean) ?? field.defaultValue ?? false}\n              onChange={(e) => handleFieldChange(field.key, e.target.checked)}\n              disabled={disabled}\n              className=\"size-4 rounded border-border-subtle text-accent-primary focus:ring-accent-primary\"\n            />\n            <span className=\"text-sm text-text-secondary\">{field.description}</span>\n          </label>\n        )}\n\n        {field.type === 'select' && field.options && (\n          <select\n            id={fieldId}\n            aria-label={field.displayName}\n            value={(value as string) ?? field.defaultValue ?? ''}\n            onChange={(e) => handleFieldChange(field.key, e.target.value)}\n            onBlur={() => handleFieldBlur(field.key)}\n            disabled={disabled}\n            className={`${commonInputClasses} bg-bg-surface`}\n          >\n            <option value=\"\">\n              {tr('channel.select', 'Select')} {field.displayName.toLowerCase()}\n            </option>\n            {field.options.map((opt) => (\n              <option key={opt.value} value={opt.value}>\n                {opt.label}\n              </option>\n            ))}\n          </select>\n        )}\n\n        {field.type !== 'boolean' && (\n          <p className=\"mt-1 text-xs text-text-secondary\">{field.description}</p>\n        )}\n\n        {fieldError && (\n          <p className=\"mt-1 text-xs text-status-error-text\">\n            {tr('channel.fieldRequired', 'This field is required')}\n          </p>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div className=\"space-y-5\">\n      {/* Header with adapter info */}\n      <div className=\"flex items-start justify-between\">\n        <div>\n          <h3 className=\"text-sm font-semibold text-text-primary\">{schema.displayName}</h3>\n          <p className=\"text-xs text-text-secondary mt-0.5\">{schema.description}</p>\n        </div>\n        {schema.docUrl && (\n          <a\n            href={schema.docUrl}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className=\"flex items-center gap-1 text-xs text-accent-primary hover:text-accent-primary-hover\"\n          >\n            <span>{tr('channel.docs', 'Docs')}</span>\n            <ExternalLink size={12} />\n          </a>\n        )}\n      </div>\n\n      {/* Credential fields */}\n      <div className=\"space-y-4\">\n        {schema.credentials.length > 0 && (\n          <div className=\"space-y-4\">{schema.credentials.map(renderField)}</div>\n        )}\n\n        {/* Platform metadata fields (optional settings) */}\n        {showPlatformMetadata && schema.platformMetadata && schema.platformMetadata.length > 0 && (\n          <>\n            <div className=\"border-t border-border-subtle pt-4 mt-4\">\n              <p className=\"text-xs font-medium text-text-secondary mb-3\">\n                {tr('channel.optionalSettings', 'Optional Settings')}\n              </p>\n              <div className=\"space-y-4\">{schema.platformMetadata.map(renderField)}</div>\n            </div>\n          </>\n        )}\n      </div>\n    </div>\n  );\n}\n\n/**\n * Compact validation status indicator\n */\nexport function CredentialValidationStatus({\n  adapterType,\n  credentials,\n}: {\n  adapterType: AdapterType | undefined;\n  credentials: Record<string, unknown>;\n}) {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const value = t(key);\n    return value === key ? fallback : value;\n  };\n\n  if (!adapterType) return null;\n\n  const { valid, errors } = validateCredentials(adapterType, credentials);\n\n  if (valid) {\n    return (\n      <div className=\"flex items-center gap-1.5 text-status-success-text\">\n        <CheckCircle2 size={14} />\n        <span className=\"text-xs\">\n          {tr('channel.allRequiredFieldsFilled', 'All required fields filled')}\n        </span>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex items-center gap-1.5 text-status-warning-text\">\n      <AlertCircle size={14} />\n      <span className=\"text-xs\">\n        {errors.length} {tr('channel.fieldsNeedAttention', 'field(s) need attention')}\n      </span>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AA2BA,SAAgB,EAAuB,EACrC,gBACA,gBACA,aACA,uBACA,cAAW,IACX,0BAAuB,MACO;CAC9B,IAAM,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAQ,EAAE,EAAI;AACpB,SAAO,MAAU,IAAM,IAAW;IAE9B,CAAC,GAAe,KAAoB,EAAkC,EAAE,CAAC,EACzE,CAAC,GAAS,KAAc,EAAkC,EAAE,CAAC,EAE7D,IAAS,EAA2B,EAAY;AAqBtD,KAlBA,QAAgB;AACd,MAAI,GAAa;GAEf,IAAM,IAAS;IAAE,GADA,EAAsB,EAAY;IACrB,GAAG;IAAa;AAC9C,GAAI,KAAK,UAAU,EAAO,KAAK,KAAK,UAAU,EAAY,IACxD,EAAS,EAAO;;IAGnB,CAAC,EAAY,CAAC,EAGjB,QAAgB;AACd,MAAI,KAAsB,GAAa;GACrC,IAAM,EAAE,UAAO,cAAW,EAAoB,GAAa,EAAY;AACvE,KAAmB,GAAO,EAAO;;IAElC;EAAC;EAAa;EAAa;EAAmB,CAAC,EAE9C,CAAC,EACH,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,KAAD;GAAG,WAAU;aACV,EAAG,6BAA6B,kDAAkD;GACjF,CAAA;EACA,CAAA;AAIV,KAAI,CAAC,EACH,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD;IAAa,MAAM;IAAI,WAAU;IAAoC,CAAA,EACrE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;IAAG,WAAU;cAAb;KACG,EAAG,8BAA8B,mCAAmC;KAAC;KAAE;KACtE;OACJ,kBAAC,KAAD;IAAG,WAAU;cACV,EACC,kCACA,mEACD;IACC,CAAA,CACA,EAAA,CAAA,CACF;;EACF,CAAA;CAIV,IAAM,KAAqB,GAAa,MAAmB;AACzD,IAAS;GAAE,GAAG;IAAc,IAAM;GAAO,CAAC;IAGtC,KAAmB,MAAgB;AACvC,KAAY,OAAU;GAAE,GAAG;IAAO,IAAM;GAAM,EAAE;IAG5C,KAA4B,MAAgB;AAChD,KAAkB,OAAU;GAAE,GAAG;IAAO,IAAM,CAAC,EAAK;GAAM,EAAE;IAGxD,KAAe,MAA2B;EAC9C,IAAM,IAAQ,EAAY,EAAM,MAC1B,IAAa,EAAQ,EAAM,QAAQ,EAAM,YAAY,CAAC,GAEtD,IAAqB,mKACzB,IAAa,+BAA+B,0BAGxC,IAAU,gBAAgB,EAAM;AACtC,SACE,kBAAC,OAAD,EAAA,UAAA;GACE,kBAAC,SAAD;IAAO,SAAS;IAAS,WAAU;cAAnC,CACG,EAAM,aACN,EAAM,YAAY,kBAAC,QAAD;KAAM,WAAU;eAA8B;KAAQ,CAAA,CACnE;;GAEP,EAAM,SAAS,UACd,kBAAC,SAAD;IACE,IAAI;IACJ,cAAY,EAAM;IAClB,MAAK;IACL,OAAQ,KAAoB;IAC5B,WAAW,MAAM,EAAkB,EAAM,KAAK,EAAE,OAAO,MAAM;IAC7D,cAAc,EAAgB,EAAM,IAAI;IAC9B;IACV,aAAa,EAAM;IACnB,WAAW;IACX,CAAA;GAGH,EAAM,SAAS,cACd,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,SAAD;KACE,IAAI;KACJ,cAAY,EAAM;KAClB,MAAM,EAAc,EAAM,OAAO,SAAS;KAC1C,OAAQ,KAAoB;KAC5B,WAAW,MAAM,EAAkB,EAAM,KAAK,EAAE,OAAO,MAAM;KAC7D,cAAc,EAAgB,EAAM,IAAI;KAC9B;KACV,aAAa,EAAM;KACnB,WAAW,GAAG,EAAmB;KACjC,CAAA,EACF,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAyB,EAAM,IAAI;KAClD,cACE,EAAc,EAAM,OAAO,QAAQ,EAAM,gBAAgB,QAAQ,EAAM;KAEzE,WAAU;KACV,UAAU;eAET,EAAc,EAAM,OAAO,kBAAC,GAAD,EAAQ,MAAM,IAAM,CAAA,GAAG,kBAAC,GAAD,EAAK,MAAM,IAAM,CAAA;KAC7D,CAAA,CACL;;GAGP,EAAM,SAAS,cACd,kBAAC,YAAD;IACE,IAAI;IACJ,cAAY,EAAM;IAClB,OAAQ,KAAoB;IAC5B,WAAW,MAAM,EAAkB,EAAM,KAAK,EAAE,OAAO,MAAM;IAC7D,cAAc,EAAgB,EAAM,IAAI;IAC9B;IACV,aAAa,EAAM;IACnB,MAAM;IACN,WAAW,GAAG,EAAmB;IACjC,CAAA;GAGH,EAAM,SAAS,YACd,kBAAC,SAAD;IACE,IAAI;IACJ,cAAY,EAAM;IAClB,MAAK;IACL,OAAQ,KAAoB,EAAM,gBAAgB;IAClD,WAAW,MACT,EAAkB,EAAM,KAAK,EAAE,OAAO,QAAQ,OAAO,EAAE,OAAO,MAAM,GAAG,KAAA,EAAU;IAEnF,cAAc,EAAgB,EAAM,IAAI;IAC9B;IACV,aAAa,EAAM;IACnB,WAAW;IACX,CAAA;GAGH,EAAM,SAAS,aACd,kBAAC,SAAD;IAAO,WAAU;cAAjB,CACE,kBAAC,SAAD;KACE,MAAK;KACL,SAAU,KAAqB,EAAM,gBAAgB;KACrD,WAAW,MAAM,EAAkB,EAAM,KAAK,EAAE,OAAO,QAAQ;KACrD;KACV,WAAU;KACV,CAAA,EACF,kBAAC,QAAD;KAAM,WAAU;eAA+B,EAAM;KAAmB,CAAA,CAClE;;GAGT,EAAM,SAAS,YAAY,EAAM,WAChC,kBAAC,UAAD;IACE,IAAI;IACJ,cAAY,EAAM;IAClB,OAAQ,KAAoB,EAAM,gBAAgB;IAClD,WAAW,MAAM,EAAkB,EAAM,KAAK,EAAE,OAAO,MAAM;IAC7D,cAAc,EAAgB,EAAM,IAAI;IAC9B;IACV,WAAW,GAAG,EAAmB;cAPnC,CASE,kBAAC,UAAD;KAAQ,OAAM;eAAd;MACG,EAAG,kBAAkB,SAAS;MAAC;MAAE,EAAM,YAAY,aAAa;MAC1D;QACR,EAAM,QAAQ,KAAK,MAClB,kBAAC,UAAD;KAAwB,OAAO,EAAI;eAChC,EAAI;KACE,EAFI,EAAI,MAER,CACT,CACK;;GAGV,EAAM,SAAS,aACd,kBAAC,KAAD;IAAG,WAAU;cAAoC,EAAM;IAAgB,CAAA;GAGxE,KACC,kBAAC,KAAD;IAAG,WAAU;cACV,EAAG,yBAAyB,yBAAyB;IACpD,CAAA;GAEF,EAAA,EAxHI,EAAM,IAwHV;;AAIV,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CAEE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;IAAI,WAAU;cAA2C,EAAO;IAAiB,CAAA,EACjF,kBAAC,KAAD;IAAG,WAAU;cAAsC,EAAO;IAAgB,CAAA,CACtE,EAAA,CAAA,EACL,EAAO,UACN,kBAAC,KAAD;IACE,MAAM,EAAO;IACb,QAAO;IACP,KAAI;IACJ,WAAU;cAJZ,CAME,kBAAC,QAAD,EAAA,UAAO,EAAG,gBAAgB,OAAO,EAAQ,CAAA,EACzC,kBAAC,GAAD,EAAc,MAAM,IAAM,CAAA,CACxB;MAEF;MAGN,kBAAC,OAAD;GAAK,WAAU;aAAf,CACG,EAAO,YAAY,SAAS,KAC3B,kBAAC,OAAD;IAAK,WAAU;cAAa,EAAO,YAAY,IAAI,EAAY;IAAO,CAAA,EAIvE,KAAwB,EAAO,oBAAoB,EAAO,iBAAiB,SAAS,KACnF,kBAAA,GAAA,EAAA,UACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,KAAD;KAAG,WAAU;eACV,EAAG,4BAA4B,oBAAoB;KAClD,CAAA,EACJ,kBAAC,OAAD;KAAK,WAAU;eAAa,EAAO,iBAAiB,IAAI,EAAY;KAAO,CAAA,CACvE;OACL,CAAA,CAED;KACF;;;AAOV,SAAgB,EAA2B,EACzC,gBACA,kBAIC;CACD,IAAM,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAQ,EAAE,EAAI;AACpB,SAAO,MAAU,IAAM,IAAW;;AAGpC,KAAI,CAAC,EAAa,QAAO;CAEzB,IAAM,EAAE,UAAO,cAAW,EAAoB,GAAa,EAAY;AAavE,QAXI,IAEA,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD,EAAc,MAAM,IAAM,CAAA,EAC1B,kBAAC,QAAD;GAAM,WAAU;aACb,EAAG,mCAAmC,6BAA6B;GAC/D,CAAA,CACH;MAKR,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD,EAAa,MAAM,IAAM,CAAA,EACzB,kBAAC,QAAD;GAAM,WAAU;aAAhB;IACG,EAAO;IAAO;IAAE,EAAG,+BAA+B,0BAA0B;IACxE;KACH"}

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

@@ -64,7 +64,7 @@ var E = {
 	INACTIVE: {
 		label: "Inactive",
 		dotColor: "bg-text-tertiary",
-		textColor: "text-muted-foreground",
+		textColor: "text-text-secondary",
 		icon: b
 	},
 	ERROR: {
@@ -82,7 +82,7 @@ var E = {
 	ARCHIVED: {
 		label: "Archived",
 		dotColor: "bg-text-tertiary",
-		textColor: "text-muted-foreground",
+		textColor: "text-text-secondary",
 		icon: b
 	}
 }, O = {
@@ -103,7 +103,7 @@ var E = {
 	},
 	UNKNOWN: {
 		label: "Unknown",
-		color: "text-muted-foreground",
+		color: "text-text-secondary",
 		icon: _
 	}
 };
@@ -121,7 +121,7 @@ function ge(e) {
 }
 function k({ icon: e, iconClass: t, value: n, label: r, sub: i }) {
 	return /* @__PURE__ */ T("div", {
-		className: "p-4 bg-surface border border-border rounded-lg",
+		className: "p-4 bg-surface border border-border-subtle rounded-lg",
 		children: [/* @__PURE__ */ T("div", {
 			className: "flex items-center gap-3",
 			children: [/* @__PURE__ */ w("div", {
@@ -131,14 +131,14 @@ function k({ icon: e, iconClass: t, value: n, label: r, sub: i }) {
 					className: t
 				})
 			}), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
-				className: "text-2xl font-bold text-foreground leading-tight",
+				className: "text-2xl font-bold text-text-primary leading-tight",
 				children: n
 			}), /* @__PURE__ */ w("p", {
-				className: "text-xs text-muted-foreground",
+				className: "text-xs text-text-secondary",
 				children: r
 			})] })]
 		}), i && /* @__PURE__ */ w("p", {
-			className: "text-[11px] text-muted-foreground mt-2 pl-11",
+			className: "text-[11px] text-text-secondary mt-2 pl-11",
 			children: i
 		})]
 	});
@@ -247,10 +247,10 @@ function A() {
 								className: "text-accent-primary"
 							})
 						}), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("h1", {
-							className: "text-xl font-bold text-foreground",
+							className: "text-xl font-bold text-text-primary",
 							children: A("channel.channelDashboard", "Channel Dashboard")
 						}), /* @__PURE__ */ w("p", {
-							className: "text-sm text-muted-foreground",
+							className: "text-sm text-text-secondary",
 							children: A("channel.dashboardSubtitle", "Manage and monitor your communication channels")
 						})] })]
 					}), /* @__PURE__ */ T("div", {
@@ -258,7 +258,7 @@ function A() {
 						children: [/* @__PURE__ */ T("button", {
 							type: "button",
 							onClick: () => Y(),
-							className: "inline-flex items-center gap-1.5 px-3 py-2 text-sm text-muted-foreground hover:text-foreground border border-border rounded-lg hover:hover:bg-action-primary-bg/10 transition-colors",
+							className: "inline-flex items-center gap-1.5 px-3 py-2 text-sm text-text-secondary hover:text-text-primary border border-border-subtle rounded-lg hover:hover:bg-action-primary-bg/10 transition-colors",
 							children: [/* @__PURE__ */ w(S, { size: 14 }), A("channel.refresh", "Refresh")]
 						}), _ && /* @__PURE__ */ T("button", {
 							type: "button",
@@ -336,20 +336,20 @@ function A() {
 							className: "relative flex-1",
 							children: [/* @__PURE__ */ w(de, {
 								size: 14,
-								className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+								className: "absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary"
 							}), /* @__PURE__ */ w("input", {
 								type: "text",
 								"aria-label": A("channel.searchChannels", "Search channels..."),
 								placeholder: A("channel.searchChannels", "Search channels..."),
 								value: U.search || "",
 								onChange: (e) => W({ search: e.target.value }),
-								className: "w-full pl-9 pr-4 py-2 text-sm bg-surface border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500/50 placeholder:text-muted-foreground"
+								className: "w-full pl-9 pr-4 py-2 text-sm bg-surface border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500/50 placeholder:text-text-secondary"
 							})]
 						}),
 						/* @__PURE__ */ T("select", {
 							value: U.platform || "",
 							onChange: (e) => W({ platform: e.target.value || void 0 }),
-							className: "px-3 py-2 text-sm bg-surface border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500/50 text-foreground",
+							className: "px-3 py-2 text-sm bg-surface border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500/50 text-text-primary",
 							children: [/* @__PURE__ */ w("option", {
 								value: "",
 								children: A("channel.allPlatforms", "All Platforms")
@@ -361,7 +361,7 @@ function A() {
 						/* @__PURE__ */ T("select", {
 							value: U.status || "",
 							onChange: (e) => W({ status: e.target.value || void 0 }),
-							className: "px-3 py-2 text-sm bg-surface border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500/50 text-foreground",
+							className: "px-3 py-2 text-sm bg-surface border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500/50 text-text-primary",
 							children: [/* @__PURE__ */ w("option", {
 								value: "",
 								children: A("channel.allStatus", "All Status")
@@ -415,11 +415,11 @@ function A() {
 							})
 						}),
 						/* @__PURE__ */ w("h3", {
-							className: "text-lg font-semibold text-foreground mb-1",
+							className: "text-lg font-semibold text-text-primary mb-1",
 							children: U.search || U.platform || U.status ? A("channel.noChannelsMatchFilter", "No channels match your filters") : A("channel.noChannels", "No channels yet")
 						}),
 						/* @__PURE__ */ w("p", {
-							className: "text-sm text-muted-foreground max-w-sm mb-5",
+							className: "text-sm text-text-secondary max-w-sm mb-5",
 							children: U.search || U.platform || U.status ? A("channel.adjustFilters", "Try adjusting your search or filters.") : A("channel.createFirstChannel", "Create your first communication channel to start sending messages across Email, SMS, Push, Slack and more.")
 						}),
 						_ && !(U.search || U.platform || U.status) && /* @__PURE__ */ T("button", {
@@ -431,45 +431,45 @@ function A() {
 					]
 				}),
 				z.length > 0 && /* @__PURE__ */ T("div", {
-					className: "border border-border rounded-lg overflow-hidden",
+					className: "border border-border-subtle rounded-lg overflow-hidden",
 					"data-tour": "channels-dashboard-table",
 					children: [/* @__PURE__ */ w("div", {
 						className: "overflow-x-auto min-w-full",
 						children: /* @__PURE__ */ T("table", {
 							className: "w-full text-sm min-w-[800px]",
 							children: [/* @__PURE__ */ w("thead", { children: /* @__PURE__ */ T("tr", {
-								className: "hover:bg-action-primary-bg/10/50 border-b border-border",
+								className: "hover:bg-action-primary-bg/10/50 border-b border-border-subtle",
 								children: [
 									/* @__PURE__ */ w("th", {
-										className: "text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										className: "text-left px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wider",
 										children: A("channel.channel", "Channel")
 									}),
 									/* @__PURE__ */ w("th", {
-										className: "text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										className: "text-left px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wider",
 										children: A("channel.platform", "Platform")
 									}),
 									/* @__PURE__ */ w("th", {
-										className: "text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										className: "text-left px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wider",
 										children: A("channel.status", "Status")
 									}),
 									/* @__PURE__ */ w("th", {
-										className: "text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										className: "text-left px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wider",
 										children: A("channel.health", "Health")
 									}),
 									/* @__PURE__ */ w("th", {
-										className: "text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										className: "text-left px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wider",
 										children: A("channel.connection", "Connection")
 									}),
 									/* @__PURE__ */ w("th", {
-										className: "text-right px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										className: "text-right px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wider",
 										children: A("channel.msgs24h", "Msgs 24h")
 									}),
 									/* @__PURE__ */ w("th", {
-										className: "text-right px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										className: "text-right px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wider",
 										children: A("channel.updated", "Updated")
 									}),
 									/* @__PURE__ */ w("th", {
-										className: "text-right px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										className: "text-right px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wider",
 										children: A("channel.actions", "Actions")
 									})
 								]
@@ -487,10 +487,10 @@ function A() {
 													onClick: () => m(`/channels/${e.id}`),
 													className: "text-left group/name",
 													children: [/* @__PURE__ */ w("p", {
-														className: "font-medium text-foreground group-hover/name:text-accent-primary transition-colors truncate max-w-[200px]",
+														className: "font-medium text-text-primary group-hover/name:text-accent-primary transition-colors truncate max-w-[200px]",
 														children: e.name
 													}), e.description && /* @__PURE__ */ w("p", {
-														className: "text-xs text-muted-foreground truncate max-w-[200px]",
+														className: "text-xs text-text-secondary truncate max-w-[200px]",
 														children: e.description
 													})]
 												})
@@ -501,7 +501,7 @@ function A() {
 													className: `inline-flex items-center px-2 py-0.5 text-[11px] font-semibold rounded-full ${I(e.platform).color}`,
 													children: I(e.platform).label
 												}), e.adapterType && /* @__PURE__ */ w("p", {
-													className: "text-[10px] text-muted-foreground mt-0.5 font-mono",
+													className: "text-[10px] text-text-secondary mt-0.5 font-mono",
 													children: e.adapterType.replace(/_/g, " ")
 												})]
 											}),
@@ -528,21 +528,21 @@ function A() {
 											/* @__PURE__ */ w("td", {
 												className: "px-4 py-3",
 												children: /* @__PURE__ */ w("span", {
-													className: `text-xs ${e.isConnected ? "text-status-success-text" : "text-muted-foreground"}`,
+													className: `text-xs ${e.isConnected ? "text-status-success-text" : "text-text-secondary"}`,
 													children: e.isConnected ? A("channel.connected", "Connected") : A("channel.disconnected", "Disconnected")
 												})
 											}),
 											/* @__PURE__ */ w("td", {
 												className: "px-4 py-3 text-right",
 												children: /* @__PURE__ */ w("span", {
-													className: "text-xs text-foreground tabular-nums",
+													className: "text-xs text-text-primary tabular-nums",
 													children: (e.messageCount24h ?? 0).toLocaleString()
 												})
 											}),
 											/* @__PURE__ */ w("td", {
 												className: "px-4 py-3 text-right",
 												children: /* @__PURE__ */ w("span", {
-													className: "text-xs text-muted-foreground whitespace-nowrap",
+													className: "text-xs text-text-secondary whitespace-nowrap",
 													children: ge(e.updatedAt)
 												})
 											}),
@@ -554,7 +554,7 @@ function A() {
 														/* @__PURE__ */ w("button", {
 															type: "button",
 															onClick: () => m(`/channels/${e.id}`),
-															className: "p-1.5 text-muted-foreground hover:text-accent-primary hover:bg-accent-primary/10 rounded transition-colors",
+															className: "p-1.5 text-text-secondary hover:text-accent-primary hover:bg-accent-primary/10 rounded transition-colors",
 															title: A("channel.view", "View"),
 															children: /* @__PURE__ */ w(se, { size: 14 })
 														}),
@@ -564,7 +564,7 @@ function A() {
 																type: "button",
 																onClick: () => be(e.id),
 																disabled: t,
-																className: "p-1.5 text-muted-foreground hover:text-accent-blue hover:bg-accent-blue-subtle rounded transition-colors disabled:opacity-40",
+																className: "p-1.5 text-text-secondary hover:text-accent-blue hover:bg-accent-blue-subtle rounded transition-colors disabled:opacity-40",
 																title: A("channel.healthCheck", "Health Check"),
 																children: t ? /* @__PURE__ */ w(v, {
 																	size: 14,
@@ -578,7 +578,7 @@ function A() {
 																type: "button",
 																onClick: () => ye(e),
 																disabled: t,
-																className: `p-1.5 rounded transition-colors disabled:opacity-40 ${e.status === "ACTIVE" ? "text-muted-foreground hover:text-status-warning-text hover:bg-status-warning-bg-subtle" : "text-muted-foreground hover:text-status-success-text hover:bg-status-success-bg-subtle"}`,
+																className: `p-1.5 rounded transition-colors disabled:opacity-40 ${e.status === "ACTIVE" ? "text-text-secondary hover:text-status-warning-text hover:bg-status-warning-bg-subtle" : "text-text-secondary hover:text-status-success-text hover:bg-status-success-bg-subtle"}`,
 																title: e.status === "ACTIVE" ? A("channel.deactivate", "Deactivate") : A("channel.activate", "Activate"),
 																children: e.status === "ACTIVE" ? /* @__PURE__ */ w(b, { size: 14 }) : /* @__PURE__ */ w(ue, { size: 14 })
 															})
@@ -594,7 +594,7 @@ function A() {
 															}), /* @__PURE__ */ w("button", {
 																type: "button",
 																onClick: () => M(null),
-																className: "px-1.5 py-0.5 text-[11px] text-muted-foreground hover:hover:bg-action-primary-bg/10 rounded transition-colors",
+																className: "px-1.5 py-0.5 text-[11px] text-text-secondary hover:hover:bg-action-primary-bg/10 rounded transition-colors",
 																children: A("channel.no", "No")
 															})]
 														}) : /* @__PURE__ */ w(s, {
@@ -602,7 +602,7 @@ function A() {
 															children: /* @__PURE__ */ w("button", {
 																type: "button",
 																onClick: () => M(e.id),
-																className: "p-1.5 text-muted-foreground hover:text-status-error-text hover:bg-status-error-bg-subtle rounded transition-colors",
+																className: "p-1.5 text-text-secondary hover:text-status-error-text hover:bg-status-error-bg-subtle rounded transition-colors",
 																title: A("channel.delete", "Delete"),
 																children: /* @__PURE__ */ w(pe, { size: 14 })
 															})
@@ -616,14 +616,14 @@ function A() {
 							})]
 						})
 					}), /* @__PURE__ */ T("div", {
-						className: "px-4 py-2.5 border-t border-border flex items-center justify-between",
+						className: "px-4 py-2.5 border-t border-border-subtle flex items-center justify-between",
 						children: [/* @__PURE__ */ T("p", {
-							className: "text-xs text-muted-foreground",
+							className: "text-xs text-text-secondary",
 							children: [
 								A("channel.showing", "Showing"),
 								" ",
 								/* @__PURE__ */ T("span", {
-									className: "font-medium text-foreground",
+									className: "font-medium text-text-primary",
 									children: [
 										H === 0 ? 0 : P * 10 + 1,
 										"–",
@@ -634,7 +634,7 @@ function A() {
 								A("channel.of", "of"),
 								" ",
 								/* @__PURE__ */ w("span", {
-									className: "font-medium text-foreground",
+									className: "font-medium text-text-primary",
 									children: H
 								}),
 								" ",
@@ -647,11 +647,11 @@ function A() {
 									type: "button",
 									onClick: () => F((e) => Math.max(0, e - 1)),
 									disabled: P === 0,
-									className: "px-2.5 py-1 text-xs border border-border rounded hover:bg-muted transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
+									className: "px-2.5 py-1 text-xs border border-border-subtle rounded hover:bg-bg-sunken transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
 									children: A("channel.previous", "Prev")
 								}),
 								/* @__PURE__ */ T("span", {
-									className: "text-xs text-muted-foreground",
+									className: "text-xs text-text-secondary",
 									children: [
 										P + 1,
 										" / ",
@@ -662,7 +662,7 @@ function A() {
 									type: "button",
 									onClick: () => F((e) => Math.min(X - 1, e + 1)),
 									disabled: P >= X - 1,
-									className: "px-2.5 py-1 text-xs border border-border rounded hover:bg-muted transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
+									className: "px-2.5 py-1 text-xs border border-border-subtle rounded hover:bg-bg-sunken transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
 									children: A("channel.next", "Next")
 								})
 							]
@@ -676,17 +676,17 @@ function A() {
 						/* @__PURE__ */ T("button", {
 							type: "button",
 							onClick: () => m("/channels/?tab=all"),
-							className: "flex items-center gap-3 p-3 bg-surface border border-border rounded-lg hover:hover:bg-action-primary-bg/10 transition-colors text-left",
+							className: "flex items-center gap-3 p-3 bg-surface border border-border-subtle rounded-lg hover:hover:bg-action-primary-bg/10 transition-colors text-left",
 							children: [/* @__PURE__ */ w(x, {
 								size: 16,
 								className: "text-accent-primary shrink-0"
 							}), /* @__PURE__ */ T("div", {
 								className: "min-w-0",
 								children: [/* @__PURE__ */ w("p", {
-									className: "text-sm font-medium text-foreground",
+									className: "text-sm font-medium text-text-primary",
 									children: A("channel.allChannels", "All Channels")
 								}), /* @__PURE__ */ w("p", {
-									className: "text-xs text-muted-foreground truncate",
+									className: "text-xs text-text-secondary truncate",
 									children: A("channel.browseChannels", "Browse and manage channel cards")
 								})]
 							})]
@@ -694,17 +694,17 @@ function A() {
 						/* @__PURE__ */ T("button", {
 							type: "button",
 							onClick: () => m("/channels/?tab=connections"),
-							className: "flex items-center gap-3 p-3 bg-surface border border-border rounded-lg hover:hover:bg-action-primary-bg/10 transition-colors text-left",
+							className: "flex items-center gap-3 p-3 bg-surface border border-border-subtle rounded-lg hover:hover:bg-action-primary-bg/10 transition-colors text-left",
 							children: [/* @__PURE__ */ w(h, {
 								size: 16,
 								className: "text-accent-blue shrink-0"
 							}), /* @__PURE__ */ T("div", {
 								className: "min-w-0",
 								children: [/* @__PURE__ */ w("p", {
-									className: "text-sm font-medium text-foreground",
+									className: "text-sm font-medium text-text-primary",
 									children: A("channel.connections", "Connections")
 								}), /* @__PURE__ */ w("p", {
-									className: "text-xs text-muted-foreground truncate",
+									className: "text-xs text-text-secondary truncate",
 									children: A("channel.connectionsSubtitle", "OAuth, API keys & credentials")
 								})]
 							})]
@@ -712,17 +712,17 @@ function A() {
 						/* @__PURE__ */ T("button", {
 							type: "button",
 							onClick: () => m("/channels/?tab=send"),
-							className: "flex items-center gap-3 p-3 bg-surface border border-border rounded-lg hover:hover:bg-action-primary-bg/10 transition-colors text-left",
+							className: "flex items-center gap-3 p-3 bg-surface border border-border-subtle rounded-lg hover:hover:bg-action-primary-bg/10 transition-colors text-left",
 							children: [/* @__PURE__ */ w(oe, {
 								size: 16,
 								className: "text-accent-violet shrink-0"
 							}), /* @__PURE__ */ T("div", {
 								className: "min-w-0",
 								children: [/* @__PURE__ */ w("p", {
-									className: "text-sm font-medium text-foreground",
+									className: "text-sm font-medium text-text-primary",
 									children: A("channel.sendMessage", "Send Message")
 								}), /* @__PURE__ */ w("p", {
-									className: "text-xs text-muted-foreground truncate",
+									className: "text-xs text-text-secondary truncate",
 									children: A("channel.sendMessageSubtitle", "Send a test or one-off notification")
 								})]
 							})]