@burdenoff/microfe-channel 2026.625.2 → 2026.626.1

package/dist/channel/modules/channels/pages/ChannelsListPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChannelsListPage.js","names":[],"sources":["../../../../../src/channel/modules/channels/pages/ChannelsListPage.tsx"],"sourcesContent":["/**\n * Channels List Page\n *\n * Displays a list of all channels with CRUD operations\n */\n\nimport { useEffect, useMemo, useState, useRef } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { TagBadge } from '@burdenoff/fe-libs/tag';\nimport { reportShellError, subscribeShellEvent } from '../../../utils/shellBridge';\nimport {\n  Radio,\n  Plus,\n  Search,\n  Loader2,\n  AlertCircle,\n  Trash2,\n  RefreshCw,\n  Power,\n  PowerOff,\n  Eye,\n  Pencil,\n  CheckCircle2,\n  XCircle,\n  AlertTriangle,\n  HelpCircle,\n  Download,\n} from 'lucide-react';\nimport {\n  useChannels,\n  type Channel,\n  type ChannelPlatform,\n  type ChannelStatus,\n  type ConnectionHealth,\n} from '../../../hooks/useChannels';\nimport { CTAOverflowMenu, GlassCard, IllustratedEmptyState } from '@burdenoff/fe-libs/ui';\nimport { useChannel as useChannelContext } from '../../../providers/ChannelProvider';\nimport { PermissionGuard } from '../../../components/PermissionGuard';\nimport { CHANNEL_PERMISSIONS } from '../../../constants/permissions';\nimport { HEALTH_I18N, PLATFORM_I18N, STATUS_I18N, translateLabel } from '../i18n';\nimport { useExportChannels } from '../hooks/useExport';\nimport { nativeConfirm, nativeImpact, nativeNotify } from '../../../../utils/nativeBridge';\n\n// Platform display configuration\nconst PLATFORM_CONFIG: Record<ChannelPlatform, { label: string; color: string }> = {\n  EMAIL: { label: 'Email', color: 'bg-accent-blue-subtle text-accent-blue' },\n  SMS: { label: 'SMS', color: 'bg-status-success-bg-subtle text-status-success-text' },\n  PUSH: { label: 'Push', color: 'bg-accent-purple-subtle text-accent-purple' },\n  INAPP: { label: 'In-App', color: 'bg-accent-indigo-subtle text-accent-indigo' },\n  WEBHOOK: { label: 'Webhook', color: 'bg-accent-orange-subtle text-accent-orange' },\n  SLACK: { label: 'Slack', color: 'bg-accent-pink-subtle text-accent-pink' },\n  TEAMS: { label: 'Teams', color: 'bg-accent-cyan-subtle text-accent-cyan' },\n  DISCORD: { label: 'Discord', color: 'bg-accent-violet-subtle text-accent-violet' },\n  WHATSAPP: { label: 'WhatsApp', color: 'bg-accent-emerald-subtle text-accent-emerald' },\n  WEBCHAT: { label: 'Webchat', color: 'bg-accent-teal-subtle text-accent-teal' },\n};\n\n// Status display configuration\nconst STATUS_CONFIG: Record<\n  ChannelStatus,\n  { label: string; color: string; icon: typeof CheckCircle2 }\n> = {\n  ACTIVE: {\n    label: 'Active',\n    color: 'text-status-success-text bg-status-success-bg-subtle',\n    icon: CheckCircle2,\n  },\n  INACTIVE: { label: 'Inactive', color: 'text-text-secondary bg-bg-sunken', icon: PowerOff },\n  ERROR: {\n    label: 'Error',\n    color: 'text-status-error-text bg-status-error-bg-subtle',\n    icon: XCircle,\n  },\n  SUSPENDED: {\n    label: 'Suspended',\n    color: 'text-status-warning-text bg-status-warning-bg-subtle',\n    icon: AlertTriangle,\n  },\n  ARCHIVED: { label: 'Archived', color: 'text-text-secondary bg-bg-sunken', icon: PowerOff },\n};\n\n// Health display configuration\nconst HEALTH_CONFIG: Record<\n  ConnectionHealth,\n  { label: string; color: string; icon: typeof CheckCircle2 }\n> = {\n  HEALTHY: { label: 'Healthy', color: 'text-status-success-text', icon: CheckCircle2 },\n  DEGRADED: { label: 'Degraded', color: 'text-status-warning-text', icon: AlertTriangle },\n  UNHEALTHY: { label: 'Unhealthy', color: 'text-status-error-text', icon: XCircle },\n  UNKNOWN: { label: 'Unknown', color: 'text-text-secondary', icon: HelpCircle },\n};\n\nexport function ChannelsListPage() {\n  const navigate = useNavigate();\n  const { hasPermission } = usePermissions();\n  // Channel creation is an admin-only action (channel:create). Hide the\n  // affordance for users without it (per MICROFRONTEND-SPEC: {canCreateChannel && ...}).\n  const canCreate = hasPermission(CHANNEL_PERMISSIONS.CHANNEL_CREATE);\n  const canUpdate = hasPermission(CHANNEL_PERMISSIONS.CHANNEL_UPDATE);\n  const canExport = hasPermission(CHANNEL_PERMISSIONS.CHANNEL_EXPORT);\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 [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);\n  const [actionLoading, setActionLoading] = useState<string | null>(null);\n  const [selectedChannelIds, setSelectedChannelIds] = useState<Set<string>>(new Set());\n  const [bulkActionLoading, setBulkActionLoading] = useState<string | null>(null);\n\n  const { organizationId } = useChannelContext();\n  const {\n    triggerExport: exportChannels,\n    isExporting: isExportingChannels,\n    exportError: exportChannelsError,\n  } = useExportChannels(organizationId ?? undefined);\n  const [pageSize] = useState(12);\n  const [currentPage, setCurrentPage] = useState(0);\n\n  const {\n    channels,\n    isLoading,\n    error,\n    total,\n    filter,\n    updateFilter,\n    deleteChannel,\n    activateChannel,\n    deactivateChannel,\n    runHealthCheck,\n    refetch,\n  } = useChannels();\n\n  const totalPages = Math.max(1, Math.ceil(total / pageSize));\n\n  const refetchRef = useRef(refetch);\n  useEffect(() => {\n    refetchRef.current = refetch;\n  });\n\n  // Fetch the current page whenever page or page size changes\n  useEffect(() => {\n    void refetchRef.current({ offset: currentPage * pageSize, limit: pageSize });\n  }, [currentPage, pageSize]);\n\n  // Reset to page 0 when filter changes\n  useEffect(() => {\n    void Promise.resolve().then(() => setCurrentPage(0));\n  }, [filter.search, filter.platform, filter.status]);\n\n  // Cross-MFE refresh: refetch the list whenever channel/connection events\n  // are emitted by other tabs or microfrontends.\n  useEffect(() => {\n    const events = [\n      'channel.created',\n      'channel.updated',\n      'channel.deleted',\n      'connection.created',\n      'connection.updated',\n      'connection.deleted',\n    ];\n    const unsubs = events.map((name) => subscribeShellEvent(name, () => void refetch()));\n    return () => unsubs.forEach((u) => u());\n  }, [refetch]);\n\n  const handleDelete = async (id: string) => {\n    void nativeImpact('medium');\n    setActionLoading(id);\n    try {\n      await deleteChannel(id);\n      void nativeNotify('success');\n      setDeleteConfirm(null);\n    } catch (err) {\n      void nativeNotify('error');\n      reportShellError(\n        err,\n        { module: 'channel', context: { action: 'Failed to delete channel' } },\n        '[channel] Failed to delete channel'\n      );\n    } finally {\n      setActionLoading(null);\n    }\n  };\n\n  const handleToggleStatus = async (channel: Channel) => {\n    setActionLoading(channel.id);\n    try {\n      if (channel.status === 'ACTIVE') {\n        await deactivateChannel(channel.id);\n      } else {\n        await activateChannel(channel.id);\n      }\n    } catch (err) {\n      reportShellError(\n        err,\n        { module: 'channel', context: { action: 'Failed to toggle channel status' } },\n        '[channel] Failed to toggle channel status'\n      );\n    } finally {\n      setActionLoading(null);\n    }\n  };\n\n  const handleHealthCheck = async (id: string) => {\n    setActionLoading(id);\n    try {\n      await runHealthCheck(id);\n    } catch (err) {\n      reportShellError(\n        err,\n        { module: 'channel', context: { action: 'Failed to run health check' } },\n        '[channel] Failed to run health check'\n      );\n    } finally {\n      setActionLoading(null);\n    }\n  };\n\n  const selectedChannels = useMemo(\n    () => channels.filter((channel) => selectedChannelIds.has(channel.id)),\n    [channels, selectedChannelIds]\n  );\n  const selectedActiveChannels = useMemo(\n    () => selectedChannels.filter((channel) => channel.status === 'ACTIVE'),\n    [selectedChannels]\n  );\n  const selectedInactiveChannels = useMemo(\n    () => selectedChannels.filter((channel) => channel.status !== 'ACTIVE'),\n    [selectedChannels]\n  );\n  const allVisibleSelected =\n    channels.length > 0 && channels.every((channel) => selectedChannelIds.has(channel.id));\n  const partiallySelected =\n    channels.some((channel) => selectedChannelIds.has(channel.id)) && !allVisibleSelected;\n\n  const toggleChannelSelection = (channelId: string, checked: boolean) => {\n    setSelectedChannelIds((prev) => {\n      const next = new Set(prev);\n      if (checked) {\n        next.add(channelId);\n      } else {\n        next.delete(channelId);\n      }\n      return next;\n    });\n  };\n\n  const toggleAllChannels = (checked: boolean) => {\n    setSelectedChannelIds((prev) => {\n      const next = new Set(prev);\n      channels.forEach((channel) => {\n        if (checked) {\n          next.add(channel.id);\n        } else {\n          next.delete(channel.id);\n        }\n      });\n      return next;\n    });\n  };\n\n  const handleBulkDelete = async () => {\n    if (selectedChannels.length === 0) return;\n    void nativeImpact('medium');\n    const message = tr(\n      selectedChannels.length === 1\n        ? 'channel.bulkDeleteConfirmSingle'\n        : 'channel.bulkDeleteConfirmMultiple',\n      selectedChannels.length === 1\n        ? 'Delete 1 selected channel?'\n        : `Delete ${selectedChannels.length} selected channels?`\n    );\n    const native = await nativeConfirm({\n      title: 'Delete channels',\n      message,\n      okButtonTitle: 'Delete',\n      cancelButtonTitle: 'Cancel',\n    });\n    const confirmed = native === null ? window.confirm(message) : native;\n    if (!confirmed) return;\n\n    setBulkActionLoading('delete');\n    try {\n      await Promise.allSettled(selectedChannels.map((channel) => deleteChannel(channel.id)));\n      setSelectedChannelIds(new Set());\n    } finally {\n      setBulkActionLoading(null);\n    }\n  };\n\n  const handleBulkActivate = async () => {\n    if (selectedInactiveChannels.length === 0) return;\n    setBulkActionLoading('activate');\n    try {\n      await Promise.allSettled(\n        selectedInactiveChannels.map((channel) => activateChannel(channel.id))\n      );\n      setSelectedChannelIds(new Set());\n    } finally {\n      setBulkActionLoading(null);\n    }\n  };\n\n  const handleBulkDeactivate = async () => {\n    if (selectedActiveChannels.length === 0) return;\n    setBulkActionLoading('deactivate');\n    try {\n      await Promise.allSettled(\n        selectedActiveChannels.map((channel) => deactivateChannel(channel.id))\n      );\n      setSelectedChannelIds(new Set());\n    } finally {\n      setBulkActionLoading(null);\n    }\n  };\n\n  const handleBulkHealthCheck = async () => {\n    if (selectedChannels.length === 0) return;\n    setBulkActionLoading('health');\n    try {\n      await Promise.allSettled(selectedChannels.map((channel) => runHealthCheck(channel.id)));\n    } finally {\n      setBulkActionLoading(null);\n    }\n  };\n\n  const getPlatformConfig = (platform: ChannelPlatform) => {\n    const config = PLATFORM_CONFIG[platform] || {\n      label: platform,\n      color: 'bg-bg-sunken text-text-secondary',\n    };\n    return {\n      ...config,\n      label: translateLabel(platform, PLATFORM_I18N, tr),\n    };\n  };\n\n  const getStatusConfig = (status: ChannelStatus) => {\n    const config = STATUS_CONFIG[status] || STATUS_CONFIG.INACTIVE;\n    return {\n      ...config,\n      label: translateLabel(status, STATUS_I18N, tr),\n    };\n  };\n\n  const getHealthConfig = (health: ConnectionHealth) => {\n    const config = HEALTH_CONFIG[health] || HEALTH_CONFIG.UNKNOWN;\n    return {\n      ...config,\n      label: translateLabel(health, HEALTH_I18N, tr),\n    };\n  };\n\n  return (\n    <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_READ}>\n      <div className=\"space-y-4 sm:space-y-6 p-3 sm:p-6\">\n        {/* Header */}\n        <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n          <div>\n            <h1 className=\"text-xl sm:text-2xl font-bold text-text-primary\">\n              {tr('channel.channels', 'Channels')}\n            </h1>\n            <p className=\"text-sm text-text-secondary mt-1\">\n              {tr('channel.manageChannels', 'Manage your communication channels')} ({total} total)\n            </p>\n          </div>\n\n          <div className=\"flex items-center gap-2\" data-tour=\"channels-list-export-button\">\n            <CTAOverflowMenu\n              primary={\n                canCreate\n                  ? {\n                      label: tr('channel.createChannel', 'Create Channel'),\n                      icon: <Plus size={16} aria-hidden=\"true\" />,\n                      onSelect: () => navigate('/channels/create'),\n                    }\n                  : undefined\n              }\n              actions={\n                canExport\n                  ? [\n                      {\n                        label: tr('channel.export', 'Export'),\n                        icon: isExportingChannels ? (\n                          <Loader2 size={16} className=\"animate-spin\" aria-hidden=\"true\" />\n                        ) : (\n                          <Download size={16} aria-hidden=\"true\" />\n                        ),\n                        disabled: isExportingChannels,\n                        onSelect: () => void exportChannels(),\n                      },\n                    ]\n                  : []\n              }\n            />\n          </div>\n        </div>\n\n        {/* Search and Filters */}\n        <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center\">\n          <div className=\"relative flex-1\">\n            <Search\n              size={16}\n              className=\"absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary\"\n            />\n            <input\n              aria-label={tr('channel.searchChannels', 'Search channels...')}\n              type=\"text\"\n              placeholder={tr('channel.searchChannels', 'Search channels...')}\n              value={filter.search || ''}\n              onChange={(e) => updateFilter({ search: e.target.value })}\n              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-action-primary-bg\"\n            />\n          </div>\n\n          <select\n            value={filter.platform || ''}\n            onChange={(e) =>\n              updateFilter({ platform: (e.target.value as ChannelPlatform) || undefined })\n            }\n            className=\"px-3 py-2 text-sm bg-bg-surface text-text-primary border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n          >\n            <option value=\"\">{tr('channel.allPlatforms', 'All Platforms')}</option>\n            {Object.entries(PLATFORM_CONFIG).map(([key, config]) => (\n              <option key={key} value={key}>\n                {config.label}\n              </option>\n            ))}\n          </select>\n\n          <select\n            value={filter.status || ''}\n            onChange={(e) =>\n              updateFilter({ status: (e.target.value as ChannelStatus) || undefined })\n            }\n            className=\"px-3 py-2 text-sm bg-bg-surface text-text-primary border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n          >\n            <option value=\"\">{tr('channel.allStatus', 'All Status')}</option>\n            {Object.entries(STATUS_CONFIG).map(([key, config]) => (\n              <option key={key} value={key}>\n                {config.label}\n              </option>\n            ))}\n          </select>\n        </div>\n\n        {/* Export Error */}\n        {exportChannelsError && (\n          <div className=\"flex items-center gap-3 p-4 bg-status-error-bg-subtle border border-status-error-border rounded-lg\">\n            <AlertCircle size={20} className=\"text-status-error-text\" />\n            <p className=\"text-sm text-status-error-text flex-1\">{exportChannelsError}</p>\n          </div>\n        )}\n\n        {channels.length > 0 && (\n          <GlassCard\n            treatment=\"plain\"\n            className=\"flex flex-col gap-3 border-border-seam p-4 sm:flex-row sm:items-center sm:justify-between\"\n            data-tour=\"channels-list-bulk-actions\"\n          >\n            <label className=\"flex items-center gap-2 text-sm text-text-primary\">\n              <input\n                type=\"checkbox\"\n                checked={allVisibleSelected}\n                ref={(input) => {\n                  if (input) {\n                    input.indeterminate = partiallySelected && !allVisibleSelected;\n                  }\n                }}\n                onChange={(event) => toggleAllChannels(event.target.checked)}\n                aria-label=\"Select all channels\"\n                className=\"size-4 rounded border-border-subtle text-primary\"\n              />\n              <span>{tr('channel.selectAllVisible', 'Select all visible')}</span>\n            </label>\n\n            <div className=\"flex flex-wrap items-center gap-2\">\n              <span className=\"text-sm text-text-secondary\">\n                {selectedChannelIds.size} {tr('channel.selectedCountLabel', 'selected')}\n              </span>\n              {selectedChannelIds.size > 0 && (\n                <button\n                  type=\"button\"\n                  onClick={() => setSelectedChannelIds(new Set())}\n                  className=\"text-sm text-text-secondary hover:text-text-primary\"\n                >\n                  {tr('channel.clearSelection', 'Clear selection')}\n                </button>\n              )}\n              <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_EXECUTE}>\n                <button\n                  type=\"button\"\n                  onClick={handleBulkHealthCheck}\n                  disabled={selectedChannels.length === 0 || bulkActionLoading !== null}\n                  className=\"px-3 py-2 text-sm font-medium border border-border-subtle rounded-md hover:bg-bg-sunken transition-colors disabled:opacity-50\"\n                >\n                  {tr('channel.healthCheck', 'Health Check')}\n                  {selectedChannels.length > 0 ? ` (${selectedChannels.length})` : ''}\n                </button>\n              </PermissionGuard>\n              <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_UPDATE}>\n                <button\n                  type=\"button\"\n                  onClick={handleBulkActivate}\n                  disabled={selectedInactiveChannels.length === 0 || bulkActionLoading !== null}\n                  className=\"px-3 py-2 text-sm font-medium border border-status-success-border/30 text-status-success-text rounded-md hover:bg-status-success-bg-subtle transition-colors disabled:opacity-50\"\n                >\n                  {tr('channel.activateSelected', 'Activate Selected')}\n                  {selectedInactiveChannels.length > 0\n                    ? ` (${selectedInactiveChannels.length})`\n                    : ''}\n                </button>\n              </PermissionGuard>\n              <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_UPDATE}>\n                <button\n                  type=\"button\"\n                  onClick={handleBulkDeactivate}\n                  disabled={selectedActiveChannels.length === 0 || bulkActionLoading !== null}\n                  className=\"px-3 py-2 text-sm font-medium border border-status-warning-border text-status-warning-text rounded-md hover:bg-status-warning-bg-subtle transition-colors disabled:opacity-50\"\n                >\n                  {tr('channel.deactivateSelected', 'Deactivate Selected')}\n                  {selectedActiveChannels.length > 0 ? ` (${selectedActiveChannels.length})` : ''}\n                </button>\n              </PermissionGuard>\n              <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_DELETE}>\n                <button\n                  type=\"button\"\n                  onClick={handleBulkDelete}\n                  disabled={selectedChannels.length === 0 || bulkActionLoading !== null}\n                  className=\"px-3 py-2 text-sm font-medium border border-status-error-border/30 text-status-error-text rounded-md hover:bg-status-error-bg-subtle transition-colors disabled:opacity-50\"\n                >\n                  {tr('channel.deleteSelected', 'Delete Selected')}\n                  {selectedChannels.length > 0 ? ` (${selectedChannels.length})` : ''}\n                </button>\n              </PermissionGuard>\n            </div>\n          </GlassCard>\n        )}\n\n        {/* Error State */}\n        {error && (\n          <div className=\"flex items-center gap-3 p-4 bg-status-error-bg-subtle border border-status-error-border rounded-lg\">\n            <AlertCircle size={20} className=\"text-status-error-text\" />\n            <div>\n              <p className=\"text-sm font-medium text-status-error-text\">\n                {tr('channel.loadFailed', 'Failed to load channels')}\n              </p>\n              <p className=\"text-xs text-status-error-text\">{error}</p>\n            </div>\n            <button\n              type=\"button\"\n              onClick={() => refetch()}\n              className=\"ml-auto px-3 py-1 text-sm text-status-error-text hover:bg-status-error-bg-subtle rounded transition-colors\"\n            >\n              {tr('channel.retry', 'Retry')}\n            </button>\n          </div>\n        )}\n\n        {/* Loading State */}\n        {isLoading && channels.length === 0 && (\n          <div className=\"flex items-center justify-center py-12\">\n            <Loader2 size={32} className=\"animate-spin text-accent-primary\" />\n          </div>\n        )}\n\n        {/* Empty State */}\n        {!isLoading && !error && channels.length === 0 && (\n          <IllustratedEmptyState\n            illustration={\n              filter.search || filter.platform || filter.status ? 'empty-search' : 'empty-data'\n            }\n            title={tr('channel.noChannelsFound', 'No channels found')}\n            description={\n              filter.search || filter.platform || filter.status\n                ? tr('channel.adjustFilters', 'Try adjusting your filters to see more channels.')\n                : tr(\n                    'channel.createFirstChannelPrompt',\n                    'Create your first communication channel to get started.'\n                  )\n            }\n            action={\n              canCreate && !filter.search && !filter.platform && !filter.status ? (\n                <button\n                  type=\"button\"\n                  onClick={() => navigate('/channels/create')}\n                  className=\"flex items-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg hover:bg-action-primary-bg-hover rounded-lg transition-colors\"\n                >\n                  <Plus size={16} />\n                  {tr('channel.createChannel', 'Create Channel')}\n                </button>\n              ) : undefined\n            }\n          />\n        )}\n\n        {/* Channels List */}\n        {channels.length > 0 && (\n          <div className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\" data-tour=\"channels-list-grid\">\n            {channels.map((channel: Channel) => {\n              const platformConfig = getPlatformConfig(channel.platform);\n              const statusConfig = getStatusConfig(channel.status);\n              const healthConfig = getHealthConfig(channel.connectionHealth);\n              const StatusIcon = statusConfig.icon;\n              const HealthIcon = healthConfig.icon;\n              const isActionLoading = actionLoading === channel.id;\n\n              return (\n                <GlassCard\n                  key={channel.id}\n                  treatment=\"insight\"\n                  className={`p-4 transition-colors group ${selectedChannelIds.has(channel.id) ? 'ring-2 ring-action-primary-bg border-action-primary-bg/40' : 'border-border-seam'}`}\n                >\n                  {/* Header */}\n                  <div className=\"flex items-start justify-between mb-3\">\n                    <div className=\"flex items-center gap-2\">\n                      <input\n                        type=\"checkbox\"\n                        checked={selectedChannelIds.has(channel.id)}\n                        onChange={(event) =>\n                          toggleChannelSelection(channel.id, event.target.checked)\n                        }\n                        aria-label={`Select channel ${channel.name}`}\n                        className=\"size-4 rounded border-border-subtle text-primary\"\n                      />\n                      <Radio size={20} className=\"text-accent-primary\" />\n                      <span\n                        className={`px-2 py-0.5 text-xs font-semibold rounded-full ${platformConfig.color}`}\n                      >\n                        {platformConfig.label}\n                      </span>\n                    </div>\n                    <div className=\"flex items-center gap-1\">\n                      <StatusIcon size={14} className={statusConfig.color.split(' ')[0]} />\n                      <span\n                        className={`px-2 py-0.5 text-xs font-medium rounded-full ${statusConfig.color} ${\n                          channel.status === 'ACTIVE' ? 'motion-safe:animate-vc-glow-pulse' : ''\n                        }`}\n                      >\n                        {statusConfig.label}\n                      </span>\n                    </div>\n                  </div>\n\n                  {/* Content - Clickable area */}\n                  <div\n                    role=\"button\"\n                    tabIndex={0}\n                    onClick={() => navigate(`/channels/${channel.id}`)}\n                    onKeyDown={(e) => {\n                      if (e.key === 'Enter' || e.key === ' ') {\n                        e.preventDefault();\n                        navigate(`/channels/${channel.id}`);\n                      }\n                    }}\n                    className=\"cursor-pointer\"\n                  >\n                    <h3 className=\"text-sm font-semibold text-text-primary mb-1 truncate\">\n                      {channel.name}\n                    </h3>\n\n                    {channel.description && (\n                      <p className=\"text-xs text-text-secondary mb-2 line-clamp-2\">\n                        {channel.description}\n                      </p>\n                    )}\n\n                    {/* Adapter */}\n                    {channel.adapterType && (\n                      <p className=\"text-xs text-text-secondary mb-2 font-mono\">\n                        {channel.adapterType.replace(/_/g, ' ')}\n                      </p>\n                    )}\n\n                    {/* Stats Row */}\n                    <div className=\"flex items-center gap-3 text-xs text-text-secondary mb-2\">\n                      <span>\n                        {tr('channel.priority', 'Priority')}: {channel.priority}\n                      </span>\n                    </div>\n\n                    {/* Health & Connection Status */}\n                    <div className=\"flex items-center gap-3 text-xs\">\n                      <div className=\"flex items-center gap-1\">\n                        <HealthIcon size={12} className={healthConfig.color} />\n                        <span className={healthConfig.color}>{healthConfig.label}</span>\n                      </div>\n                      <span>•</span>\n                      <span\n                        className={\n                          channel.isConnected ? 'text-status-success-text' : 'text-text-secondary'\n                        }\n                      >\n                        {channel.isConnected\n                          ? tr('channel.connected', 'Connected')\n                          : tr('channel.notConnected', 'Not Connected')}\n                      </span>\n                    </div>\n                  </div>\n\n                  {/* Tags */}\n                  {channel.tagAssignments && channel.tagAssignments.length > 0 && (\n                    <div className=\"flex flex-wrap gap-1 mt-2\" aria-label=\"Channel tags\">\n                      {channel.tagAssignments.slice(0, 4).map((a) => (\n                        <TagBadge key={a.id} id={a.tagId} label={a.tagId} size=\"sm\" />\n                      ))}\n                      {channel.tagAssignments.length > 4 && (\n                        <span className=\"text-xs text-text-secondary\">\n                          +{channel.tagAssignments.length - 4}\n                        </span>\n                      )}\n                    </div>\n                  )}\n\n                  {/* Actions */}\n                  <div className=\"mt-3 pt-3 border-t border-border-subtle flex items-center justify-between opacity-0 group-hover:opacity-100 transition-opacity\">\n                    <div className=\"flex items-center gap-1\">\n                      <button\n                        type=\"button\"\n                        onClick={() => navigate(`/channels/${channel.id}`)}\n                        className=\"p-1.5 text-text-secondary hover:text-accent-primary hover:bg-accent-primary/10 rounded transition-colors cursor-pointer\"\n                        title={tr('channel.viewDetails', 'View Details')}\n                      >\n                        <Eye size={14} />\n                      </button>\n                      {canUpdate && (\n                        <button\n                          type=\"button\"\n                          onClick={() => navigate(`/channels/${channel.id}/edit`)}\n                          className=\"p-1.5 text-text-secondary hover:text-accent-primary hover:bg-accent-primary/10 rounded transition-colors cursor-pointer\"\n                          title={tr('channel.editChannel', 'Edit Channel')}\n                        >\n                          <Pencil size={14} />\n                        </button>\n                      )}\n                      <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_EXECUTE}>\n                        <button\n                          type=\"button\"\n                          onClick={() => handleHealthCheck(channel.id)}\n                          disabled={isActionLoading}\n                          className=\"p-1.5 text-text-secondary hover:text-status-info-text hover:bg-status-info-bg-subtle rounded transition-colors disabled:opacity-50 cursor-pointer disabled:cursor-not-allowed\"\n                          title={tr('channel.runHealthCheck', 'Run Health Check')}\n                        >\n                          {isActionLoading ? (\n                            <Loader2 size={14} className=\"animate-spin\" />\n                          ) : (\n                            <RefreshCw size={14} />\n                          )}\n                        </button>\n                      </PermissionGuard>\n                      <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_UPDATE}>\n                        <button\n                          type=\"button\"\n                          onClick={() => handleToggleStatus(channel)}\n                          disabled={isActionLoading}\n                          className={`p-1.5 rounded transition-colors disabled:opacity-50 cursor-pointer disabled:cursor-not-allowed ${\n                            channel.status === 'ACTIVE'\n                              ? 'text-text-secondary hover:text-status-warning-text hover:bg-status-warning-bg-subtle'\n                              : 'text-text-secondary hover:text-status-success-text hover:bg-status-success-bg-subtle'\n                          }`}\n                          title={\n                            channel.status === 'ACTIVE'\n                              ? tr('channel.deactivate', 'Deactivate')\n                              : tr('channel.activate', 'Activate')\n                          }\n                        >\n                          {channel.status === 'ACTIVE' ? (\n                            <PowerOff size={14} />\n                          ) : (\n                            <Power size={14} />\n                          )}\n                        </button>\n                      </PermissionGuard>\n                    </div>\n\n                    {/* Delete */}\n                    {deleteConfirm === channel.id ? (\n                      <div className=\"flex items-center gap-2\">\n                        <span className=\"text-xs text-text-secondary\">\n                          {tr('channel.deleteQuestion', 'Delete?')}\n                        </span>\n                        <button\n                          type=\"button\"\n                          onClick={() => handleDelete(channel.id)}\n                          disabled={isActionLoading}\n                          className=\"px-2 py-1 text-xs text-status-error-text hover:bg-status-error-bg-subtle rounded transition-colors cursor-pointer disabled:cursor-not-allowed\"\n                        >\n                          {isActionLoading ? '...' : tr('channel.yes', 'Yes')}\n                        </button>\n                        <button\n                          type=\"button\"\n                          onClick={() => setDeleteConfirm(null)}\n                          className=\"px-2 py-1 text-xs text-text-secondary hover:bg-bg-sunken rounded transition-colors cursor-pointer\"\n                        >\n                          {tr('channel.no', 'No')}\n                        </button>\n                      </div>\n                    ) : (\n                      <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_DELETE}>\n                        <button\n                          type=\"button\"\n                          onClick={() => setDeleteConfirm(channel.id)}\n                          className=\"p-1.5 text-text-secondary hover:text-status-error-text hover:bg-status-error-bg-subtle rounded transition-colors cursor-pointer\"\n                          title={tr('channel.deleteChannel', 'Delete Channel')}\n                        >\n                          <Trash2 size={14} />\n                        </button>\n                      </PermissionGuard>\n                    )}\n                  </div>\n                </GlassCard>\n              );\n            })}\n          </div>\n        )}\n\n        {/* Pagination */}\n        {total > pageSize && (\n          <div className=\"flex items-center justify-between px-1 py-2\">\n            <p className=\"text-sm text-text-secondary\">\n              {tr('channel.showing', 'Showing')}{' '}\n              <span className=\"font-medium text-text-primary\">\n                {currentPage * pageSize + 1}–{Math.min((currentPage + 1) * pageSize, total)}\n              </span>{' '}\n              {tr('channel.of', 'of')} <span className=\"font-medium text-text-primary\">{total}</span>{' '}\n              {tr('channel.channelsLower', 'channels')}\n            </p>\n            <div className=\"flex items-center gap-2\">\n              <button\n                type=\"button\"\n                onClick={() => setCurrentPage((p) => Math.max(0, p - 1))}\n                disabled={currentPage === 0}\n                className=\"px-3 py-1.5 text-sm border border-border-subtle rounded-lg hover:bg-bg-sunken transition-colors disabled:opacity-40 disabled:cursor-not-allowed\"\n              >\n                {tr('channel.previous', 'Previous')}\n              </button>\n              <span className=\"text-sm text-text-secondary\">\n                {currentPage + 1} / {totalPages}\n              </span>\n              <button\n                type=\"button\"\n                onClick={() => setCurrentPage((p) => Math.min(totalPages - 1, p + 1))}\n                disabled={currentPage >= totalPages - 1}\n                className=\"px-3 py-1.5 text-sm border border-border-subtle rounded-lg hover:bg-bg-sunken transition-colors disabled:opacity-40 disabled:cursor-not-allowed\"\n              >\n                {tr('channel.next', 'Next')}\n              </button>\n            </div>\n          </div>\n        )}\n      </div>\n    </PermissionGuard>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ChannelsListPage.js","names":[],"sources":["../../../../../src/channel/modules/channels/pages/ChannelsListPage.tsx"],"sourcesContent":["/**\n * Channels List Page\n *\n * Displays a list of all channels with CRUD operations\n */\n\nimport { useEffect, useMemo, useState, useRef } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { TagBadge } from '@burdenoff/fe-libs/tag';\nimport { reportShellError, subscribeShellEvent } from '../../../utils/shellBridge';\nimport {\n  Radio,\n  Plus,\n  Search,\n  Loader2,\n  AlertCircle,\n  Trash2,\n  RefreshCw,\n  Power,\n  PowerOff,\n  Eye,\n  Pencil,\n  CheckCircle2,\n  XCircle,\n  AlertTriangle,\n  HelpCircle,\n  Download,\n} from 'lucide-react';\nimport {\n  useChannels,\n  type Channel,\n  type ChannelPlatform,\n  type ChannelStatus,\n  type ConnectionHealth,\n} from '../../../hooks/useChannels';\nimport {\n  CTAOverflowMenu,\n  EmphasisPanel,\n  GlassCard,\n  IllustratedEmptyState,\n  PagePurpose,\n} from '@burdenoff/fe-libs/ui';\nimport { useChannel as useChannelContext } from '../../../providers/ChannelProvider';\nimport { PermissionGuard } from '../../../components/PermissionGuard';\nimport { CHANNEL_PERMISSIONS } from '../../../constants/permissions';\nimport { HEALTH_I18N, PLATFORM_I18N, STATUS_I18N, translateLabel } from '../i18n';\nimport { useExportChannels } from '../hooks/useExport';\nimport { nativeConfirm, nativeImpact, nativeNotify } from '../../../../utils/nativeBridge';\n\n// Platform display configuration\nconst PLATFORM_CONFIG: Record<ChannelPlatform, { label: string; color: string }> = {\n  EMAIL: { label: 'Email', color: 'bg-accent-blue-subtle text-accent-blue' },\n  SMS: { label: 'SMS', color: 'bg-status-success-bg-subtle text-status-success-text' },\n  PUSH: { label: 'Push', color: 'bg-accent-purple-subtle text-accent-purple' },\n  INAPP: { label: 'In-App', color: 'bg-accent-indigo-subtle text-accent-indigo' },\n  WEBHOOK: { label: 'Webhook', color: 'bg-accent-orange-subtle text-accent-orange' },\n  SLACK: { label: 'Slack', color: 'bg-accent-pink-subtle text-accent-pink' },\n  TEAMS: { label: 'Teams', color: 'bg-accent-cyan-subtle text-accent-cyan' },\n  DISCORD: { label: 'Discord', color: 'bg-accent-violet-subtle text-accent-violet' },\n  WHATSAPP: { label: 'WhatsApp', color: 'bg-accent-emerald-subtle text-accent-emerald' },\n  WEBCHAT: { label: 'Webchat', color: 'bg-accent-teal-subtle text-accent-teal' },\n};\n\n// Status display configuration\nconst STATUS_CONFIG: Record<\n  ChannelStatus,\n  { label: string; color: string; icon: typeof CheckCircle2 }\n> = {\n  ACTIVE: {\n    label: 'Active',\n    color: 'text-status-success-text bg-status-success-bg-subtle',\n    icon: CheckCircle2,\n  },\n  INACTIVE: { label: 'Inactive', color: 'text-text-secondary bg-bg-sunken', icon: PowerOff },\n  ERROR: {\n    label: 'Error',\n    color: 'text-status-error-text bg-status-error-bg-subtle',\n    icon: XCircle,\n  },\n  SUSPENDED: {\n    label: 'Suspended',\n    color: 'text-status-warning-text bg-status-warning-bg-subtle',\n    icon: AlertTriangle,\n  },\n  ARCHIVED: { label: 'Archived', color: 'text-text-secondary bg-bg-sunken', icon: PowerOff },\n};\n\n// Health display configuration\nconst HEALTH_CONFIG: Record<\n  ConnectionHealth,\n  { label: string; color: string; icon: typeof CheckCircle2 }\n> = {\n  HEALTHY: { label: 'Healthy', color: 'text-status-success-text', icon: CheckCircle2 },\n  DEGRADED: { label: 'Degraded', color: 'text-status-warning-text', icon: AlertTriangle },\n  UNHEALTHY: { label: 'Unhealthy', color: 'text-status-error-text', icon: XCircle },\n  UNKNOWN: { label: 'Unknown', color: 'text-text-secondary', icon: HelpCircle },\n};\n\nexport function ChannelsListPage() {\n  const navigate = useNavigate();\n  const { hasPermission } = usePermissions();\n  // Channel creation is an admin-only action (channel:create). Hide the\n  // affordance for users without it (per MICROFRONTEND-SPEC: {canCreateChannel && ...}).\n  const canCreate = hasPermission(CHANNEL_PERMISSIONS.CHANNEL_CREATE);\n  const canUpdate = hasPermission(CHANNEL_PERMISSIONS.CHANNEL_UPDATE);\n  const canExport = hasPermission(CHANNEL_PERMISSIONS.CHANNEL_EXPORT);\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 [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);\n  const [actionLoading, setActionLoading] = useState<string | null>(null);\n  const [selectedChannelIds, setSelectedChannelIds] = useState<Set<string>>(new Set());\n  const [bulkActionLoading, setBulkActionLoading] = useState<string | null>(null);\n\n  const { organizationId } = useChannelContext();\n  const {\n    triggerExport: exportChannels,\n    isExporting: isExportingChannels,\n    exportError: exportChannelsError,\n  } = useExportChannels(organizationId ?? undefined);\n  const [pageSize] = useState(12);\n  const [currentPage, setCurrentPage] = useState(0);\n\n  const {\n    channels,\n    isLoading,\n    error,\n    total,\n    filter,\n    updateFilter,\n    deleteChannel,\n    activateChannel,\n    deactivateChannel,\n    runHealthCheck,\n    refetch,\n  } = useChannels();\n\n  const totalPages = Math.max(1, Math.ceil(total / pageSize));\n\n  const refetchRef = useRef(refetch);\n  useEffect(() => {\n    refetchRef.current = refetch;\n  });\n\n  // Fetch the current page whenever page or page size changes\n  useEffect(() => {\n    void refetchRef.current({ offset: currentPage * pageSize, limit: pageSize });\n  }, [currentPage, pageSize]);\n\n  // Reset to page 0 when filter changes\n  useEffect(() => {\n    void Promise.resolve().then(() => setCurrentPage(0));\n  }, [filter.search, filter.platform, filter.status]);\n\n  // Cross-MFE refresh: refetch the list whenever channel/connection events\n  // are emitted by other tabs or microfrontends.\n  useEffect(() => {\n    const events = [\n      'channel.created',\n      'channel.updated',\n      'channel.deleted',\n      'connection.created',\n      'connection.updated',\n      'connection.deleted',\n    ];\n    const unsubs = events.map((name) => subscribeShellEvent(name, () => void refetch()));\n    return () => unsubs.forEach((u) => u());\n  }, [refetch]);\n\n  const handleDelete = async (id: string) => {\n    void nativeImpact('medium');\n    setActionLoading(id);\n    try {\n      await deleteChannel(id);\n      void nativeNotify('success');\n      setDeleteConfirm(null);\n    } catch (err) {\n      void nativeNotify('error');\n      reportShellError(\n        err,\n        { module: 'channel', context: { action: 'Failed to delete channel' } },\n        '[channel] Failed to delete channel'\n      );\n    } finally {\n      setActionLoading(null);\n    }\n  };\n\n  const handleToggleStatus = async (channel: Channel) => {\n    setActionLoading(channel.id);\n    try {\n      if (channel.status === 'ACTIVE') {\n        await deactivateChannel(channel.id);\n      } else {\n        await activateChannel(channel.id);\n      }\n    } catch (err) {\n      reportShellError(\n        err,\n        { module: 'channel', context: { action: 'Failed to toggle channel status' } },\n        '[channel] Failed to toggle channel status'\n      );\n    } finally {\n      setActionLoading(null);\n    }\n  };\n\n  const handleHealthCheck = async (id: string) => {\n    setActionLoading(id);\n    try {\n      await runHealthCheck(id);\n    } catch (err) {\n      reportShellError(\n        err,\n        { module: 'channel', context: { action: 'Failed to run health check' } },\n        '[channel] Failed to run health check'\n      );\n    } finally {\n      setActionLoading(null);\n    }\n  };\n\n  const selectedChannels = useMemo(\n    () => channels.filter((channel) => selectedChannelIds.has(channel.id)),\n    [channels, selectedChannelIds]\n  );\n  const selectedActiveChannels = useMemo(\n    () => selectedChannels.filter((channel) => channel.status === 'ACTIVE'),\n    [selectedChannels]\n  );\n  const selectedInactiveChannels = useMemo(\n    () => selectedChannels.filter((channel) => channel.status !== 'ACTIVE'),\n    [selectedChannels]\n  );\n  const allVisibleSelected =\n    channels.length > 0 && channels.every((channel) => selectedChannelIds.has(channel.id));\n  const partiallySelected =\n    channels.some((channel) => selectedChannelIds.has(channel.id)) && !allVisibleSelected;\n\n  const toggleChannelSelection = (channelId: string, checked: boolean) => {\n    setSelectedChannelIds((prev) => {\n      const next = new Set(prev);\n      if (checked) {\n        next.add(channelId);\n      } else {\n        next.delete(channelId);\n      }\n      return next;\n    });\n  };\n\n  const toggleAllChannels = (checked: boolean) => {\n    setSelectedChannelIds((prev) => {\n      const next = new Set(prev);\n      channels.forEach((channel) => {\n        if (checked) {\n          next.add(channel.id);\n        } else {\n          next.delete(channel.id);\n        }\n      });\n      return next;\n    });\n  };\n\n  const handleBulkDelete = async () => {\n    if (selectedChannels.length === 0) return;\n    void nativeImpact('medium');\n    const message = tr(\n      selectedChannels.length === 1\n        ? 'channel.bulkDeleteConfirmSingle'\n        : 'channel.bulkDeleteConfirmMultiple',\n      selectedChannels.length === 1\n        ? 'Delete 1 selected channel?'\n        : `Delete ${selectedChannels.length} selected channels?`\n    );\n    const native = await nativeConfirm({\n      title: 'Delete channels',\n      message,\n      okButtonTitle: 'Delete',\n      cancelButtonTitle: 'Cancel',\n    });\n    const confirmed = native === null ? window.confirm(message) : native;\n    if (!confirmed) return;\n\n    setBulkActionLoading('delete');\n    try {\n      await Promise.allSettled(selectedChannels.map((channel) => deleteChannel(channel.id)));\n      setSelectedChannelIds(new Set());\n    } finally {\n      setBulkActionLoading(null);\n    }\n  };\n\n  const handleBulkActivate = async () => {\n    if (selectedInactiveChannels.length === 0) return;\n    setBulkActionLoading('activate');\n    try {\n      await Promise.allSettled(\n        selectedInactiveChannels.map((channel) => activateChannel(channel.id))\n      );\n      setSelectedChannelIds(new Set());\n    } finally {\n      setBulkActionLoading(null);\n    }\n  };\n\n  const handleBulkDeactivate = async () => {\n    if (selectedActiveChannels.length === 0) return;\n    setBulkActionLoading('deactivate');\n    try {\n      await Promise.allSettled(\n        selectedActiveChannels.map((channel) => deactivateChannel(channel.id))\n      );\n      setSelectedChannelIds(new Set());\n    } finally {\n      setBulkActionLoading(null);\n    }\n  };\n\n  const handleBulkHealthCheck = async () => {\n    if (selectedChannels.length === 0) return;\n    setBulkActionLoading('health');\n    try {\n      await Promise.allSettled(selectedChannels.map((channel) => runHealthCheck(channel.id)));\n    } finally {\n      setBulkActionLoading(null);\n    }\n  };\n\n  const getPlatformConfig = (platform: ChannelPlatform) => {\n    const config = PLATFORM_CONFIG[platform] || {\n      label: platform,\n      color: 'bg-bg-sunken text-text-secondary',\n    };\n    return {\n      ...config,\n      label: translateLabel(platform, PLATFORM_I18N, tr),\n    };\n  };\n\n  const getStatusConfig = (status: ChannelStatus) => {\n    const config = STATUS_CONFIG[status] || STATUS_CONFIG.INACTIVE;\n    return {\n      ...config,\n      label: translateLabel(status, STATUS_I18N, tr),\n    };\n  };\n\n  const getHealthConfig = (health: ConnectionHealth) => {\n    const config = HEALTH_CONFIG[health] || HEALTH_CONFIG.UNKNOWN;\n    return {\n      ...config,\n      label: translateLabel(health, HEALTH_I18N, tr),\n    };\n  };\n\n  return (\n    <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_READ}>\n      <div className=\"space-y-4 sm:space-y-6 p-3 sm:p-6\">\n        {/* Header */}\n        <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n          <div>\n            <h1 className=\"text-xl sm:text-2xl font-bold text-text-primary\">\n              {tr('channel.channels', 'Channels')}\n            </h1>\n            <p className=\"text-sm text-text-secondary mt-1\">\n              {tr('channel.manageChannels', 'Manage your communication channels')} ({total} total)\n            </p>\n          </div>\n\n          <div className=\"flex items-center gap-2\" data-tour=\"channels-list-export-button\">\n            <CTAOverflowMenu\n              primary={\n                canCreate\n                  ? {\n                      label: tr('channel.createChannel', 'Create Channel'),\n                      icon: <Plus size={16} aria-hidden=\"true\" />,\n                      onSelect: () => navigate('/channels/create'),\n                    }\n                  : undefined\n              }\n              actions={\n                canExport\n                  ? [\n                      {\n                        label: tr('channel.export', 'Export'),\n                        icon: isExportingChannels ? (\n                          <Loader2 size={16} className=\"animate-spin\" aria-hidden=\"true\" />\n                        ) : (\n                          <Download size={16} aria-hidden=\"true\" />\n                        ),\n                        disabled: isExportingChannels,\n                        onSelect: () => void exportChannels(),\n                      },\n                    ]\n                  : []\n              }\n            />\n          </div>\n        </div>\n\n        {/* Page purpose */}\n        <PagePurpose icon={<Radio size={15} aria-hidden=\"true\" />}>\n          {tr(\n            'channel.listPurpose',\n            'Every communication channel in your organization, in one browseable grid. Filter by platform or status, select several at once to activate, deactivate, health-check or delete them in bulk, and open any card to manage its connection and delivery history. Start here when you need to find a specific channel or tidy up the ones you no longer use.'\n          )}\n        </PagePurpose>\n\n        {/* Emphasis — primary create call-to-action */}\n        {canCreate && (\n          <EmphasisPanel className=\"flex flex-col gap-3 p-5 sm:flex-row sm:items-center sm:justify-between\">\n            <div className=\"flex items-center gap-3\">\n              <span className=\"rounded-lg bg-accent-primary/10 p-2\">\n                <Plus size={18} className=\"text-accent-primary\" aria-hidden=\"true\" />\n              </span>\n              <div>\n                <p className=\"text-sm font-semibold text-text-primary\">\n                  {tr('channel.addAnotherChannel', 'Add another channel')}\n                </p>\n                <p className=\"text-sm text-text-secondary\">\n                  {tr(\n                    'channel.addAnotherChannelHint',\n                    'Connect a new platform — Email, SMS, Push, Slack and more — to start delivering messages through it.'\n                  )}\n                </p>\n              </div>\n            </div>\n            <button\n              type=\"button\"\n              onClick={() => navigate('/channels/create')}\n              className=\"inline-flex shrink-0 items-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg-hover\"\n            >\n              <Plus size={16} aria-hidden=\"true\" />\n              {tr('channel.createChannel', 'Create Channel')}\n            </button>\n          </EmphasisPanel>\n        )}\n\n        {/* Search and Filters */}\n        <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center\">\n          <div className=\"relative flex-1\">\n            <Search\n              size={16}\n              className=\"absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary\"\n            />\n            <input\n              aria-label={tr('channel.searchChannels', 'Search channels...')}\n              type=\"text\"\n              placeholder={tr('channel.searchChannels', 'Search channels...')}\n              value={filter.search || ''}\n              onChange={(e) => updateFilter({ search: e.target.value })}\n              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-action-primary-bg\"\n            />\n          </div>\n\n          <select\n            value={filter.platform || ''}\n            onChange={(e) =>\n              updateFilter({ platform: (e.target.value as ChannelPlatform) || undefined })\n            }\n            className=\"px-3 py-2 text-sm bg-bg-surface text-text-primary border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n          >\n            <option value=\"\">{tr('channel.allPlatforms', 'All Platforms')}</option>\n            {Object.entries(PLATFORM_CONFIG).map(([key, config]) => (\n              <option key={key} value={key}>\n                {config.label}\n              </option>\n            ))}\n          </select>\n\n          <select\n            value={filter.status || ''}\n            onChange={(e) =>\n              updateFilter({ status: (e.target.value as ChannelStatus) || undefined })\n            }\n            className=\"px-3 py-2 text-sm bg-bg-surface text-text-primary border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n          >\n            <option value=\"\">{tr('channel.allStatus', 'All Status')}</option>\n            {Object.entries(STATUS_CONFIG).map(([key, config]) => (\n              <option key={key} value={key}>\n                {config.label}\n              </option>\n            ))}\n          </select>\n        </div>\n\n        {/* Export Error */}\n        {exportChannelsError && (\n          <div className=\"flex items-center gap-3 p-4 bg-status-error-bg-subtle border border-status-error-border rounded-lg\">\n            <AlertCircle size={20} className=\"text-status-error-text\" />\n            <p className=\"text-sm text-status-error-text flex-1\">{exportChannelsError}</p>\n          </div>\n        )}\n\n        {channels.length > 0 && (\n          <GlassCard\n            treatment=\"plain\"\n            className=\"flex flex-col gap-3 border-border-seam p-4 sm:flex-row sm:items-center sm:justify-between\"\n            data-tour=\"channels-list-bulk-actions\"\n          >\n            <label className=\"flex items-center gap-2 text-sm text-text-primary\">\n              <input\n                type=\"checkbox\"\n                checked={allVisibleSelected}\n                ref={(input) => {\n                  if (input) {\n                    input.indeterminate = partiallySelected && !allVisibleSelected;\n                  }\n                }}\n                onChange={(event) => toggleAllChannels(event.target.checked)}\n                aria-label=\"Select all channels\"\n                className=\"size-4 rounded border-border-subtle text-primary\"\n              />\n              <span>{tr('channel.selectAllVisible', 'Select all visible')}</span>\n            </label>\n\n            <div className=\"flex flex-wrap items-center gap-2\">\n              <span className=\"text-sm text-text-secondary\">\n                {selectedChannelIds.size} {tr('channel.selectedCountLabel', 'selected')}\n              </span>\n              {selectedChannelIds.size > 0 && (\n                <button\n                  type=\"button\"\n                  onClick={() => setSelectedChannelIds(new Set())}\n                  className=\"text-sm text-text-secondary hover:text-text-primary\"\n                >\n                  {tr('channel.clearSelection', 'Clear selection')}\n                </button>\n              )}\n              <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_EXECUTE}>\n                <button\n                  type=\"button\"\n                  onClick={handleBulkHealthCheck}\n                  disabled={selectedChannels.length === 0 || bulkActionLoading !== null}\n                  className=\"px-3 py-2 text-sm font-medium border border-border-subtle rounded-md hover:bg-bg-sunken transition-colors disabled:opacity-50\"\n                >\n                  {tr('channel.healthCheck', 'Health Check')}\n                  {selectedChannels.length > 0 ? ` (${selectedChannels.length})` : ''}\n                </button>\n              </PermissionGuard>\n              <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_UPDATE}>\n                <button\n                  type=\"button\"\n                  onClick={handleBulkActivate}\n                  disabled={selectedInactiveChannels.length === 0 || bulkActionLoading !== null}\n                  className=\"px-3 py-2 text-sm font-medium border border-status-success-border/30 text-status-success-text rounded-md hover:bg-status-success-bg-subtle transition-colors disabled:opacity-50\"\n                >\n                  {tr('channel.activateSelected', 'Activate Selected')}\n                  {selectedInactiveChannels.length > 0\n                    ? ` (${selectedInactiveChannels.length})`\n                    : ''}\n                </button>\n              </PermissionGuard>\n              <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_UPDATE}>\n                <button\n                  type=\"button\"\n                  onClick={handleBulkDeactivate}\n                  disabled={selectedActiveChannels.length === 0 || bulkActionLoading !== null}\n                  className=\"px-3 py-2 text-sm font-medium border border-status-warning-border text-status-warning-text rounded-md hover:bg-status-warning-bg-subtle transition-colors disabled:opacity-50\"\n                >\n                  {tr('channel.deactivateSelected', 'Deactivate Selected')}\n                  {selectedActiveChannels.length > 0 ? ` (${selectedActiveChannels.length})` : ''}\n                </button>\n              </PermissionGuard>\n              <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_DELETE}>\n                <button\n                  type=\"button\"\n                  onClick={handleBulkDelete}\n                  disabled={selectedChannels.length === 0 || bulkActionLoading !== null}\n                  className=\"px-3 py-2 text-sm font-medium border border-status-error-border/30 text-status-error-text rounded-md hover:bg-status-error-bg-subtle transition-colors disabled:opacity-50\"\n                >\n                  {tr('channel.deleteSelected', 'Delete Selected')}\n                  {selectedChannels.length > 0 ? ` (${selectedChannels.length})` : ''}\n                </button>\n              </PermissionGuard>\n            </div>\n          </GlassCard>\n        )}\n\n        {/* Error State */}\n        {error && (\n          <div className=\"flex items-center gap-3 p-4 bg-status-error-bg-subtle border border-status-error-border rounded-lg\">\n            <AlertCircle size={20} className=\"text-status-error-text\" />\n            <div>\n              <p className=\"text-sm font-medium text-status-error-text\">\n                {tr('channel.loadFailed', 'Failed to load channels')}\n              </p>\n              <p className=\"text-xs text-status-error-text\">{error}</p>\n            </div>\n            <button\n              type=\"button\"\n              onClick={() => refetch()}\n              className=\"ml-auto px-3 py-1 text-sm text-status-error-text hover:bg-status-error-bg-subtle rounded transition-colors\"\n            >\n              {tr('channel.retry', 'Retry')}\n            </button>\n          </div>\n        )}\n\n        {/* Loading State */}\n        {isLoading && channels.length === 0 && (\n          <div className=\"flex items-center justify-center py-12\">\n            <Loader2 size={32} className=\"animate-spin text-accent-primary\" />\n          </div>\n        )}\n\n        {/* Empty State */}\n        {!isLoading && !error && channels.length === 0 && (\n          <IllustratedEmptyState\n            illustration={\n              filter.search || filter.platform || filter.status ? 'empty-search' : 'empty-data'\n            }\n            title={tr('channel.noChannelsFound', 'No channels found')}\n            description={\n              filter.search || filter.platform || filter.status\n                ? tr('channel.adjustFilters', 'Try adjusting your filters to see more channels.')\n                : tr(\n                    'channel.createFirstChannelPrompt',\n                    'Create your first communication channel to get started.'\n                  )\n            }\n            action={\n              canCreate && !filter.search && !filter.platform && !filter.status ? (\n                <button\n                  type=\"button\"\n                  onClick={() => navigate('/channels/create')}\n                  className=\"flex items-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg hover:bg-action-primary-bg-hover rounded-lg transition-colors\"\n                >\n                  <Plus size={16} />\n                  {tr('channel.createChannel', 'Create Channel')}\n                </button>\n              ) : undefined\n            }\n          />\n        )}\n\n        {/* Channels List */}\n        {channels.length > 0 && (\n          <div className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\" data-tour=\"channels-list-grid\">\n            {channels.map((channel: Channel) => {\n              const platformConfig = getPlatformConfig(channel.platform);\n              const statusConfig = getStatusConfig(channel.status);\n              const healthConfig = getHealthConfig(channel.connectionHealth);\n              const StatusIcon = statusConfig.icon;\n              const HealthIcon = healthConfig.icon;\n              const isActionLoading = actionLoading === channel.id;\n\n              return (\n                <GlassCard\n                  key={channel.id}\n                  treatment=\"insight\"\n                  className={`p-4 transition-colors group ${selectedChannelIds.has(channel.id) ? 'ring-2 ring-action-primary-bg border-action-primary-bg/40' : 'border-border-seam'}`}\n                >\n                  {/* Header */}\n                  <div className=\"flex items-start justify-between mb-3\">\n                    <div className=\"flex items-center gap-2\">\n                      <input\n                        type=\"checkbox\"\n                        checked={selectedChannelIds.has(channel.id)}\n                        onChange={(event) =>\n                          toggleChannelSelection(channel.id, event.target.checked)\n                        }\n                        aria-label={`Select channel ${channel.name}`}\n                        className=\"size-4 rounded border-border-subtle text-primary\"\n                      />\n                      <Radio size={20} className=\"text-accent-primary\" />\n                      <span\n                        className={`px-2 py-0.5 text-xs font-semibold rounded-full ${platformConfig.color}`}\n                      >\n                        {platformConfig.label}\n                      </span>\n                    </div>\n                    <div className=\"flex items-center gap-1\">\n                      <StatusIcon size={14} className={statusConfig.color.split(' ')[0]} />\n                      <span\n                        className={`px-2 py-0.5 text-xs font-medium rounded-full ${statusConfig.color} ${\n                          channel.status === 'ACTIVE' ? 'motion-safe:animate-vc-glow-pulse' : ''\n                        }`}\n                      >\n                        {statusConfig.label}\n                      </span>\n                    </div>\n                  </div>\n\n                  {/* Content - Clickable area */}\n                  <div\n                    role=\"button\"\n                    tabIndex={0}\n                    onClick={() => navigate(`/channels/${channel.id}`)}\n                    onKeyDown={(e) => {\n                      if (e.key === 'Enter' || e.key === ' ') {\n                        e.preventDefault();\n                        navigate(`/channels/${channel.id}`);\n                      }\n                    }}\n                    className=\"cursor-pointer\"\n                  >\n                    <h3 className=\"text-sm font-semibold text-text-primary mb-1 truncate\">\n                      {channel.name}\n                    </h3>\n\n                    {channel.description && (\n                      <p className=\"text-xs text-text-secondary mb-2 line-clamp-2\">\n                        {channel.description}\n                      </p>\n                    )}\n\n                    {/* Adapter */}\n                    {channel.adapterType && (\n                      <p className=\"text-xs text-text-secondary mb-2 font-mono\">\n                        {channel.adapterType.replace(/_/g, ' ')}\n                      </p>\n                    )}\n\n                    {/* Stats Row */}\n                    <div className=\"flex items-center gap-3 text-xs text-text-secondary mb-2\">\n                      <span>\n                        {tr('channel.priority', 'Priority')}: {channel.priority}\n                      </span>\n                    </div>\n\n                    {/* Health & Connection Status */}\n                    <div className=\"flex items-center gap-3 text-xs\">\n                      <div className=\"flex items-center gap-1\">\n                        <HealthIcon size={12} className={healthConfig.color} />\n                        <span className={healthConfig.color}>{healthConfig.label}</span>\n                      </div>\n                      <span>•</span>\n                      <span\n                        className={\n                          channel.isConnected ? 'text-status-success-text' : 'text-text-secondary'\n                        }\n                      >\n                        {channel.isConnected\n                          ? tr('channel.connected', 'Connected')\n                          : tr('channel.notConnected', 'Not Connected')}\n                      </span>\n                    </div>\n                  </div>\n\n                  {/* Tags */}\n                  {channel.tagAssignments && channel.tagAssignments.length > 0 && (\n                    <div className=\"flex flex-wrap gap-1 mt-2\" aria-label=\"Channel tags\">\n                      {channel.tagAssignments.slice(0, 4).map((a) => (\n                        <TagBadge key={a.id} id={a.tagId} label={a.tagId} size=\"sm\" />\n                      ))}\n                      {channel.tagAssignments.length > 4 && (\n                        <span className=\"text-xs text-text-secondary\">\n                          +{channel.tagAssignments.length - 4}\n                        </span>\n                      )}\n                    </div>\n                  )}\n\n                  {/* Actions */}\n                  <div className=\"mt-3 pt-3 border-t border-border-subtle flex items-center justify-between opacity-0 group-hover:opacity-100 transition-opacity\">\n                    <div className=\"flex items-center gap-1\">\n                      <button\n                        type=\"button\"\n                        onClick={() => navigate(`/channels/${channel.id}`)}\n                        className=\"p-1.5 text-text-secondary hover:text-accent-primary hover:bg-accent-primary/10 rounded transition-colors cursor-pointer\"\n                        title={tr('channel.viewDetails', 'View Details')}\n                      >\n                        <Eye size={14} />\n                      </button>\n                      {canUpdate && (\n                        <button\n                          type=\"button\"\n                          onClick={() => navigate(`/channels/${channel.id}/edit`)}\n                          className=\"p-1.5 text-text-secondary hover:text-accent-primary hover:bg-accent-primary/10 rounded transition-colors cursor-pointer\"\n                          title={tr('channel.editChannel', 'Edit Channel')}\n                        >\n                          <Pencil size={14} />\n                        </button>\n                      )}\n                      <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_EXECUTE}>\n                        <button\n                          type=\"button\"\n                          onClick={() => handleHealthCheck(channel.id)}\n                          disabled={isActionLoading}\n                          className=\"p-1.5 text-text-secondary hover:text-status-info-text hover:bg-status-info-bg-subtle rounded transition-colors disabled:opacity-50 cursor-pointer disabled:cursor-not-allowed\"\n                          title={tr('channel.runHealthCheck', 'Run Health Check')}\n                        >\n                          {isActionLoading ? (\n                            <Loader2 size={14} className=\"animate-spin\" />\n                          ) : (\n                            <RefreshCw size={14} />\n                          )}\n                        </button>\n                      </PermissionGuard>\n                      <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_UPDATE}>\n                        <button\n                          type=\"button\"\n                          onClick={() => handleToggleStatus(channel)}\n                          disabled={isActionLoading}\n                          className={`p-1.5 rounded transition-colors disabled:opacity-50 cursor-pointer disabled:cursor-not-allowed ${\n                            channel.status === 'ACTIVE'\n                              ? 'text-text-secondary hover:text-status-warning-text hover:bg-status-warning-bg-subtle'\n                              : 'text-text-secondary hover:text-status-success-text hover:bg-status-success-bg-subtle'\n                          }`}\n                          title={\n                            channel.status === 'ACTIVE'\n                              ? tr('channel.deactivate', 'Deactivate')\n                              : tr('channel.activate', 'Activate')\n                          }\n                        >\n                          {channel.status === 'ACTIVE' ? (\n                            <PowerOff size={14} />\n                          ) : (\n                            <Power size={14} />\n                          )}\n                        </button>\n                      </PermissionGuard>\n                    </div>\n\n                    {/* Delete */}\n                    {deleteConfirm === channel.id ? (\n                      <div className=\"flex items-center gap-2\">\n                        <span className=\"text-xs text-text-secondary\">\n                          {tr('channel.deleteQuestion', 'Delete?')}\n                        </span>\n                        <button\n                          type=\"button\"\n                          onClick={() => handleDelete(channel.id)}\n                          disabled={isActionLoading}\n                          className=\"px-2 py-1 text-xs text-status-error-text hover:bg-status-error-bg-subtle rounded transition-colors cursor-pointer disabled:cursor-not-allowed\"\n                        >\n                          {isActionLoading ? '...' : tr('channel.yes', 'Yes')}\n                        </button>\n                        <button\n                          type=\"button\"\n                          onClick={() => setDeleteConfirm(null)}\n                          className=\"px-2 py-1 text-xs text-text-secondary hover:bg-bg-sunken rounded transition-colors cursor-pointer\"\n                        >\n                          {tr('channel.no', 'No')}\n                        </button>\n                      </div>\n                    ) : (\n                      <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_DELETE}>\n                        <button\n                          type=\"button\"\n                          onClick={() => setDeleteConfirm(channel.id)}\n                          className=\"p-1.5 text-text-secondary hover:text-status-error-text hover:bg-status-error-bg-subtle rounded transition-colors cursor-pointer\"\n                          title={tr('channel.deleteChannel', 'Delete Channel')}\n                        >\n                          <Trash2 size={14} />\n                        </button>\n                      </PermissionGuard>\n                    )}\n                  </div>\n                </GlassCard>\n              );\n            })}\n          </div>\n        )}\n\n        {/* Pagination */}\n        {total > pageSize && (\n          <div className=\"flex items-center justify-between px-1 py-2\">\n            <p className=\"text-sm text-text-secondary\">\n              {tr('channel.showing', 'Showing')}{' '}\n              <span className=\"font-medium text-text-primary\">\n                {currentPage * pageSize + 1}–{Math.min((currentPage + 1) * pageSize, total)}\n              </span>{' '}\n              {tr('channel.of', 'of')} <span className=\"font-medium text-text-primary\">{total}</span>{' '}\n              {tr('channel.channelsLower', 'channels')}\n            </p>\n            <div className=\"flex items-center gap-2\">\n              <button\n                type=\"button\"\n                onClick={() => setCurrentPage((p) => Math.max(0, p - 1))}\n                disabled={currentPage === 0}\n                className=\"px-3 py-1.5 text-sm border border-border-subtle rounded-lg hover:bg-bg-sunken transition-colors disabled:opacity-40 disabled:cursor-not-allowed\"\n              >\n                {tr('channel.previous', 'Previous')}\n              </button>\n              <span className=\"text-sm text-text-secondary\">\n                {currentPage + 1} / {totalPages}\n              </span>\n              <button\n                type=\"button\"\n                onClick={() => setCurrentPage((p) => Math.min(totalPages - 1, p + 1))}\n                disabled={currentPage >= totalPages - 1}\n                className=\"px-3 py-1.5 text-sm border border-border-subtle rounded-lg hover:bg-bg-sunken transition-colors disabled:opacity-40 disabled:cursor-not-allowed\"\n              >\n                {tr('channel.next', 'Next')}\n              </button>\n            </div>\n          </div>\n        )}\n      </div>\n    </PermissionGuard>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAoDA,IAAM,IAA6E;CACjF,OAAO;EAAE,OAAO;EAAS,OAAO;EAA0C;CAC1E,KAAK;EAAE,OAAO;EAAO,OAAO;EAAwD;CACpF,MAAM;EAAE,OAAO;EAAQ,OAAO;EAA8C;CAC5E,OAAO;EAAE,OAAO;EAAU,OAAO;EAA8C;CAC/E,SAAS;EAAE,OAAO;EAAW,OAAO;EAA8C;CAClF,OAAO;EAAE,OAAO;EAAS,OAAO;EAA0C;CAC1E,OAAO;EAAE,OAAO;EAAS,OAAO;EAA0C;CAC1E,SAAS;EAAE,OAAO;EAAW,OAAO;EAA8C;CAClF,UAAU;EAAE,OAAO;EAAY,OAAO;EAAgD;CACtF,SAAS;EAAE,OAAO;EAAW,OAAO;EAA0C;CAC/E,EAGK,IAGF;CACF,QAAQ;EACN,OAAO;EACP,OAAO;EACP,MAAM;EACP;CACD,UAAU;EAAE,OAAO;EAAY,OAAO;EAAoC,MAAM;EAAU;CAC1F,OAAO;EACL,OAAO;EACP,OAAO;EACP,MAAM;EACP;CACD,WAAW;EACT,OAAO;EACP,OAAO;EACP,MAAM;EACP;CACD,UAAU;EAAE,OAAO;EAAY,OAAO;EAAoC,MAAM;EAAU;CAC3F,EAGK,IAGF;CACF,SAAS;EAAE,OAAO;EAAW,OAAO;EAA4B,MAAM;EAAc;CACpF,UAAU;EAAE,OAAO;EAAY,OAAO;EAA4B,MAAM;EAAe;CACvF,WAAW;EAAE,OAAO;EAAa,OAAO;EAA0B,MAAM;EAAS;CACjF,SAAS;EAAE,OAAO;EAAW,OAAO;EAAuB,MAAM;EAAY;CAC9E;AAED,SAAgB,IAAmB;CACjC,IAAM,IAAW,IAAa,EACxB,EAAE,qBAAkB,IAAgB,EAGpC,IAAY,EAAc,EAAoB,eAAe,EAC7D,IAAY,EAAc,EAAoB,eAAe,EAC7D,IAAY,EAAc,EAAoB,eAAe,EAC7D,EAAE,UAAM,IAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAQ,GAAE,EAAI;AACpB,SAAO,MAAU,IAAM,IAAW;IAE9B,CAAC,IAAe,KAAoB,EAAwB,KAAK,EACjE,CAAC,IAAe,KAAoB,EAAwB,KAAK,EACjE,CAAC,GAAoB,KAAyB,kBAAsB,IAAI,KAAK,CAAC,EAC9E,CAAC,GAAmB,KAAwB,EAAwB,KAAK,EAEzE,EAAE,uBAAmB,GAAmB,EACxC,EACJ,eAAe,IACf,aAAa,GACb,aAAa,MACX,GAAkB,MAAkB,KAAA,EAAU,EAC5C,CAAC,KAAY,EAAS,GAAG,EACzB,CAAC,GAAa,KAAkB,EAAS,EAAE,EAE3C,EACJ,aACA,cACA,UACA,UACA,WACA,iBACA,kBACA,oBACA,uBACA,oBACA,eACE,GAAa,EAEX,IAAa,KAAK,IAAI,GAAG,KAAK,KAAK,IAAQ,EAAS,CAAC,EAErD,KAAa,GAAO,EAAQ;AAiBlC,CAhBA,QAAgB;AACd,KAAW,UAAU;GACrB,EAGF,QAAgB;AACT,KAAW,QAAQ;GAAE,QAAQ,IAAc;GAAU,OAAO;GAAU,CAAC;IAC3E,CAAC,GAAa,EAAS,CAAC,EAG3B,QAAgB;AACT,UAAQ,SAAS,CAAC,WAAW,EAAe,EAAE,CAAC;IACnD;EAAC,EAAO;EAAQ,EAAO;EAAU,EAAO;EAAO,CAAC,EAInD,QAAgB;EASd,IAAM,IARS;GACb;GACA;GACA;GACA;GACA;GACA;GACD,CACqB,KAAK,MAAS,EAAoB,SAAY,KAAK,GAAS,CAAC,CAAC;AACpF,eAAa,EAAO,SAAS,MAAM,GAAG,CAAC;IACtC,CAAC,EAAQ,CAAC;CAEb,IAAM,KAAe,OAAO,MAAe;AAEzC,EADK,EAAa,SAAS,EAC3B,EAAiB,EAAG;AACpB,MAAI;AAGF,GAFA,MAAM,EAAc,EAAG,EAClB,EAAa,UAAU,EAC5B,EAAiB,KAAK;WACf,GAAK;AAEZ,GADK,EAAa,QAAQ,EAC1B,EACE,GACA;IAAE,QAAQ;IAAW,SAAS,EAAE,QAAQ,4BAA4B;IAAE,EACtE,qCACD;YACO;AACR,KAAiB,KAAK;;IAIpB,KAAqB,OAAO,MAAqB;AACrD,IAAiB,EAAQ,GAAG;AAC5B,MAAI;AACF,GAAI,EAAQ,WAAW,WACrB,MAAM,GAAkB,EAAQ,GAAG,GAEnC,MAAM,EAAgB,EAAQ,GAAG;WAE5B,GAAK;AACZ,KACE,GACA;IAAE,QAAQ;IAAW,SAAS,EAAE,QAAQ,mCAAmC;IAAE,EAC7E,4CACD;YACO;AACR,KAAiB,KAAK;;IAIpB,KAAoB,OAAO,MAAe;AAC9C,IAAiB,EAAG;AACpB,MAAI;AACF,SAAM,GAAe,EAAG;WACjB,GAAK;AACZ,KACE,GACA;IAAE,QAAQ;IAAW,SAAS,EAAE,QAAQ,8BAA8B;IAAE,EACxE,uCACD;YACO;AACR,KAAiB,KAAK;;IAIpB,IAAmB,QACjB,EAAS,QAAQ,MAAY,EAAmB,IAAI,EAAQ,GAAG,CAAC,EACtE,CAAC,GAAU,EAAmB,CAC/B,EACK,IAAyB,QACvB,EAAiB,QAAQ,MAAY,EAAQ,WAAW,SAAS,EACvE,CAAC,EAAiB,CACnB,EACK,IAA2B,QACzB,EAAiB,QAAQ,MAAY,EAAQ,WAAW,SAAS,EACvE,CAAC,EAAiB,CACnB,EACK,IACJ,EAAS,SAAS,KAAK,EAAS,OAAO,MAAY,EAAmB,IAAI,EAAQ,GAAG,CAAC,EAClF,KACJ,EAAS,MAAM,MAAY,EAAmB,IAAI,EAAQ,GAAG,CAAC,IAAI,CAAC,GAE/D,MAA0B,GAAmB,MAAqB;AACtE,KAAuB,MAAS;GAC9B,IAAM,IAAO,IAAI,IAAI,EAAK;AAM1B,UALI,IACF,EAAK,IAAI,EAAU,GAEnB,EAAK,OAAO,EAAU,EAEjB;IACP;IAGE,MAAqB,MAAqB;AAC9C,KAAuB,MAAS;GAC9B,IAAM,IAAO,IAAI,IAAI,EAAK;AAQ1B,UAPA,EAAS,SAAS,MAAY;AAC5B,IAAI,IACF,EAAK,IAAI,EAAQ,GAAG,GAEpB,EAAK,OAAO,EAAQ,GAAG;KAEzB,EACK;IACP;IAGE,KAAmB,YAAY;AACnC,MAAI,EAAiB,WAAW,EAAG;AAC9B,IAAa,SAAS;EAC3B,IAAM,IAAU,EACd,EAAiB,WAAW,IACxB,oCACA,qCACJ,EAAiB,WAAW,IACxB,+BACA,UAAU,EAAiB,OAAO,qBACvC,EACK,IAAS,MAAM,EAAc;GACjC,OAAO;GACP;GACA,eAAe;GACf,mBAAmB;GACpB,CAAC;AACgB,YAAW,OAAO,OAAO,QAAQ,EAAQ,GAAG,GAG9D;KAAqB,SAAS;AAC9B,OAAI;AAEF,IADA,MAAM,QAAQ,WAAW,EAAiB,KAAK,MAAY,EAAc,EAAQ,GAAG,CAAC,CAAC,EACtF,kBAAsB,IAAI,KAAK,CAAC;aACxB;AACR,MAAqB,KAAK;;;IAIxB,KAAqB,YAAY;AACjC,QAAyB,WAAW,GACxC;KAAqB,WAAW;AAChC,OAAI;AAIF,IAHA,MAAM,QAAQ,WACZ,EAAyB,KAAK,MAAY,EAAgB,EAAQ,GAAG,CAAC,CACvE,EACD,kBAAsB,IAAI,KAAK,CAAC;aACxB;AACR,MAAqB,KAAK;;;IAIxB,KAAuB,YAAY;AACnC,QAAuB,WAAW,GACtC;KAAqB,aAAa;AAClC,OAAI;AAIF,IAHA,MAAM,QAAQ,WACZ,EAAuB,KAAK,MAAY,GAAkB,EAAQ,GAAG,CAAC,CACvE,EACD,kBAAsB,IAAI,KAAK,CAAC;aACxB;AACR,MAAqB,KAAK;;;IAIxB,KAAwB,YAAY;AACpC,QAAiB,WAAW,GAChC;KAAqB,SAAS;AAC9B,OAAI;AACF,UAAM,QAAQ,WAAW,EAAiB,KAAK,MAAY,GAAe,EAAQ,GAAG,CAAC,CAAC;aAC/E;AACR,MAAqB,KAAK;;;IAIxB,MAAqB,OAKlB;EACL,GALa,EAAgB,MAAa;GAC1C,OAAO;GACP,OAAO;GACR;EAGC,OAAO,EAAe,GAAU,IAAe,EAAG;EACnD,GAGG,MAAmB,OAEhB;EACL,GAFa,EAAc,MAAW,EAAc;EAGpD,OAAO,EAAe,GAAQ,IAAa,EAAG;EAC/C,GAGG,MAAmB,OAEhB;EACL,GAFa,EAAc,MAAW,EAAc;EAGpD,OAAO,EAAe,GAAQ,IAAa,EAAG;EAC/C;AAGH,QACE,kBAAC,GAAD;EAAiB,YAAY,EAAoB;YAC/C,kBAAC,OAAD;GAAK,WAAU;aAAf;IAEE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAG,oBAAoB,WAAW;MAChC,CAAA,EACL,kBAAC,KAAD;MAAG,WAAU;gBAAb;OACG,EAAG,0BAA0B,qCAAqC;OAAC;OAAG;OAAM;OAC3E;QACA,EAAA,CAAA,EAEN,kBAAC,OAAD;MAAK,WAAU;MAA0B,aAAU;gBACjD,kBAAC,IAAD;OACE,SACE,IACI;QACE,OAAO,EAAG,yBAAyB,iBAAiB;QACpD,MAAM,kBAAC,GAAD;SAAM,MAAM;SAAI,eAAY;SAAS,CAAA;QAC3C,gBAAgB,EAAS,mBAAmB;QAC7C,GACD,KAAA;OAEN,SACE,IACI,CACE;QACE,OAAO,EAAG,kBAAkB,SAAS;QACrC,MAAM,IACJ,kBAAC,GAAD;SAAS,MAAM;SAAI,WAAU;SAAe,eAAY;SAAS,CAAA,GAEjE,kBAAC,IAAD;SAAU,MAAM;SAAI,eAAY;SAAS,CAAA;QAE3C,UAAU;QACV,gBAAgB,KAAK,IAAgB;QACtC,CACF,GACD,EAAE;OAER,CAAA;MACE,CAAA,CACF;;IAGN,kBAAC,IAAD;KAAa,MAAM,kBAAC,IAAD;MAAO,MAAM;MAAI,eAAY;MAAS,CAAA;eACtD,EACC,uBACA,2VACD;KACW,CAAA;IAGb,KACC,kBAAC,IAAD;KAAe,WAAU;eAAzB,CACE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,QAAD;OAAM,WAAU;iBACd,kBAAC,GAAD;QAAM,MAAM;QAAI,WAAU;QAAsB,eAAY;QAAS,CAAA;OAChE,CAAA,EACP,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;OAAG,WAAU;iBACV,EAAG,6BAA6B,sBAAsB;OACrD,CAAA,EACJ,kBAAC,KAAD;OAAG,WAAU;iBACV,EACC,iCACA,uGACD;OACC,CAAA,CACA,EAAA,CAAA,CACF;SACN,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAS,mBAAmB;MAC3C,WAAU;gBAHZ,CAKE,kBAAC,GAAD;OAAM,MAAM;OAAI,eAAY;OAAS,CAAA,EACpC,EAAG,yBAAyB,iBAAiB,CACvC;QACK;;IAIlB,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,IAAD;QACE,MAAM;QACN,WAAU;QACV,CAAA,EACF,kBAAC,SAAD;QACE,cAAY,EAAG,0BAA0B,qBAAqB;QAC9D,MAAK;QACL,aAAa,EAAG,0BAA0B,qBAAqB;QAC/D,OAAO,EAAO,UAAU;QACxB,WAAW,MAAM,EAAa,EAAE,QAAQ,EAAE,OAAO,OAAO,CAAC;QACzD,WAAU;QACV,CAAA,CACE;;MAEN,kBAAC,UAAD;OACE,OAAO,EAAO,YAAY;OAC1B,WAAW,MACT,EAAa,EAAE,UAAW,EAAE,OAAO,SAA6B,KAAA,GAAW,CAAC;OAE9E,WAAU;iBALZ,CAOE,kBAAC,UAAD;QAAQ,OAAM;kBAAI,EAAG,wBAAwB,gBAAgB;QAAU,CAAA,EACtE,OAAO,QAAQ,EAAgB,CAAC,KAAK,CAAC,GAAK,OAC1C,kBAAC,UAAD;QAAkB,OAAO;kBACtB,EAAO;QACD,EAFI,EAEJ,CACT,CACK;;MAET,kBAAC,UAAD;OACE,OAAO,EAAO,UAAU;OACxB,WAAW,MACT,EAAa,EAAE,QAAS,EAAE,OAAO,SAA2B,KAAA,GAAW,CAAC;OAE1E,WAAU;iBALZ,CAOE,kBAAC,UAAD;QAAQ,OAAM;kBAAI,EAAG,qBAAqB,aAAa;QAAU,CAAA,EAChE,OAAO,QAAQ,EAAc,CAAC,KAAK,CAAC,GAAK,OACxC,kBAAC,UAAD;QAAkB,OAAO;kBACtB,EAAO;QACD,EAFI,EAEJ,CACT,CACK;;MACL;;IAGL,KACC,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD;MAAa,MAAM;MAAI,WAAU;MAA2B,CAAA,EAC5D,kBAAC,KAAD;MAAG,WAAU;gBAAyC;MAAwB,CAAA,CAC1E;;IAGP,EAAS,SAAS,KACjB,kBAAC,GAAD;KACE,WAAU;KACV,WAAU;KACV,aAAU;eAHZ,CAKE,kBAAC,SAAD;MAAO,WAAU;gBAAjB,CACE,kBAAC,SAAD;OACE,MAAK;OACL,SAAS;OACT,MAAM,MAAU;AACd,QAAI,MACF,EAAM,gBAAgB,MAAqB,CAAC;;OAGhD,WAAW,MAAU,GAAkB,EAAM,OAAO,QAAQ;OAC5D,cAAW;OACX,WAAU;OACV,CAAA,EACF,kBAAC,QAAD,EAAA,UAAO,EAAG,4BAA4B,qBAAqB,EAAQ,CAAA,CAC7D;SAER,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,QAAD;QAAM,WAAU;kBAAhB;SACG,EAAmB;SAAK;SAAE,EAAG,8BAA8B,WAAW;SAClE;;OACN,EAAmB,OAAO,KACzB,kBAAC,UAAD;QACE,MAAK;QACL,eAAe,kBAAsB,IAAI,KAAK,CAAC;QAC/C,WAAU;kBAET,EAAG,0BAA0B,kBAAkB;QACzC,CAAA;OAEX,kBAAC,GAAD;QAAiB,YAAY,EAAoB;kBAC/C,kBAAC,UAAD;SACE,MAAK;SACL,SAAS;SACT,UAAU,EAAiB,WAAW,KAAK,MAAsB;SACjE,WAAU;mBAJZ,CAMG,EAAG,uBAAuB,eAAe,EACzC,EAAiB,SAAS,IAAI,KAAK,EAAiB,OAAO,KAAK,GAC1D;;QACO,CAAA;OAClB,kBAAC,GAAD;QAAiB,YAAY,EAAoB;kBAC/C,kBAAC,UAAD;SACE,MAAK;SACL,SAAS;SACT,UAAU,EAAyB,WAAW,KAAK,MAAsB;SACzE,WAAU;mBAJZ,CAMG,EAAG,4BAA4B,oBAAoB,EACnD,EAAyB,SAAS,IAC/B,KAAK,EAAyB,OAAO,KACrC,GACG;;QACO,CAAA;OAClB,kBAAC,GAAD;QAAiB,YAAY,EAAoB;kBAC/C,kBAAC,UAAD;SACE,MAAK;SACL,SAAS;SACT,UAAU,EAAuB,WAAW,KAAK,MAAsB;SACvE,WAAU;mBAJZ,CAMG,EAAG,8BAA8B,sBAAsB,EACvD,EAAuB,SAAS,IAAI,KAAK,EAAuB,OAAO,KAAK,GACtE;;QACO,CAAA;OAClB,kBAAC,GAAD;QAAiB,YAAY,EAAoB;kBAC/C,kBAAC,UAAD;SACE,MAAK;SACL,SAAS;SACT,UAAU,EAAiB,WAAW,KAAK,MAAsB;SACjE,WAAU;mBAJZ,CAMG,EAAG,0BAA0B,kBAAkB,EAC/C,EAAiB,SAAS,IAAI,KAAK,EAAiB,OAAO,KAAK,GAC1D;;QACO,CAAA;OACd;QACI;;IAIb,KACC,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,GAAD;OAAa,MAAM;OAAI,WAAU;OAA2B,CAAA;MAC5D,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;OAAG,WAAU;iBACV,EAAG,sBAAsB,0BAA0B;OAClD,CAAA,EACJ,kBAAC,KAAD;OAAG,WAAU;iBAAkC;OAAU,CAAA,CACrD,EAAA,CAAA;MACN,kBAAC,UAAD;OACE,MAAK;OACL,eAAe,GAAS;OACxB,WAAU;iBAET,EAAG,iBAAiB,QAAQ;OACtB,CAAA;MACL;;IAIP,KAAa,EAAS,WAAW,KAChC,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD;MAAS,MAAM;MAAI,WAAU;MAAqC,CAAA;KAC9D,CAAA;IAIP,CAAC,KAAa,CAAC,KAAS,EAAS,WAAW,KAC3C,kBAAC,IAAD;KACE,cACE,EAAO,UAAU,EAAO,YAAY,EAAO,SAAS,iBAAiB;KAEvE,OAAO,EAAG,2BAA2B,oBAAoB;KACzD,aACE,EAAO,UAAU,EAAO,YAAY,EAAO,SACvC,EAAG,yBAAyB,mDAAmD,GAC/E,EACE,oCACA,0DACD;KAEP,QACE,KAAa,CAAC,EAAO,UAAU,CAAC,EAAO,YAAY,CAAC,EAAO,SACzD,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAS,mBAAmB;MAC3C,WAAU;gBAHZ,CAKE,kBAAC,GAAD,EAAM,MAAM,IAAM,CAAA,EACjB,EAAG,yBAAyB,iBAAiB,CACvC;UACP,KAAA;KAEN,CAAA;IAIH,EAAS,SAAS,KACjB,kBAAC,OAAD;KAAK,WAAU;KAA2C,aAAU;eACjE,EAAS,KAAK,MAAqB;MAClC,IAAM,IAAiB,GAAkB,EAAQ,SAAS,EACpD,IAAe,GAAgB,EAAQ,OAAO,EAC9C,IAAe,GAAgB,EAAQ,iBAAiB,EACxD,IAAa,EAAa,MAC1B,IAAa,EAAa,MAC1B,IAAkB,OAAkB,EAAQ;AAElD,aACE,kBAAC,GAAD;OAEE,WAAU;OACV,WAAW,+BAA+B,EAAmB,IAAI,EAAQ,GAAG,GAAG,8DAA8D;iBAH/I;QAME,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,OAAD;UAAK,WAAU;oBAAf;WACE,kBAAC,SAAD;YACE,MAAK;YACL,SAAS,EAAmB,IAAI,EAAQ,GAAG;YAC3C,WAAW,MACT,GAAuB,EAAQ,IAAI,EAAM,OAAO,QAAQ;YAE1D,cAAY,kBAAkB,EAAQ;YACtC,WAAU;YACV,CAAA;WACF,kBAAC,IAAD;YAAO,MAAM;YAAI,WAAU;YAAwB,CAAA;WACnD,kBAAC,QAAD;YACE,WAAW,kDAAkD,EAAe;sBAE3E,EAAe;YACX,CAAA;WACH;aACN,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,GAAD;WAAY,MAAM;WAAI,WAAW,EAAa,MAAM,MAAM,IAAI,CAAC;WAAM,CAAA,EACrE,kBAAC,QAAD;WACE,WAAW,gDAAgD,EAAa,MAAM,GAC5E,EAAQ,WAAW,WAAW,sCAAsC;qBAGrE,EAAa;WACT,CAAA,CACH;YACF;;QAGN,kBAAC,OAAD;SACE,MAAK;SACL,UAAU;SACV,eAAe,EAAS,aAAa,EAAQ,KAAK;SAClD,YAAY,MAAM;AAChB,WAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,gBAAgB,EAClB,EAAS,aAAa,EAAQ,KAAK;;SAGvC,WAAU;mBAVZ;UAYE,kBAAC,MAAD;WAAI,WAAU;qBACX,EAAQ;WACN,CAAA;UAEJ,EAAQ,eACP,kBAAC,KAAD;WAAG,WAAU;qBACV,EAAQ;WACP,CAAA;UAIL,EAAQ,eACP,kBAAC,KAAD;WAAG,WAAU;qBACV,EAAQ,YAAY,QAAQ,MAAM,IAAI;WACrC,CAAA;UAIN,kBAAC,OAAD;WAAK,WAAU;qBACb,kBAAC,QAAD,EAAA,UAAA;YACG,EAAG,oBAAoB,WAAW;YAAC;YAAG,EAAQ;YAC1C,EAAA,CAAA;WACH,CAAA;UAGN,kBAAC,OAAD;WAAK,WAAU;qBAAf;YACE,kBAAC,OAAD;aAAK,WAAU;uBAAf,CACE,kBAAC,GAAD;cAAY,MAAM;cAAI,WAAW,EAAa;cAAS,CAAA,EACvD,kBAAC,QAAD;cAAM,WAAW,EAAa;wBAAQ,EAAa;cAAa,CAAA,CAC5D;;YACN,kBAAC,QAAD,EAAA,UAAM,KAAQ,CAAA;YACd,kBAAC,QAAD;aACE,WACE,EAAQ,cAAc,6BAA6B;uBAGpD,EAAQ,cACL,EAAG,qBAAqB,YAAY,GACpC,EAAG,wBAAwB,gBAAgB;aAC1C,CAAA;YACH;;UACF;;QAGL,EAAQ,kBAAkB,EAAQ,eAAe,SAAS,KACzD,kBAAC,OAAD;SAAK,WAAU;SAA4B,cAAW;mBAAtD,CACG,EAAQ,eAAe,MAAM,GAAG,EAAE,CAAC,KAAK,MACvC,kBAAC,IAAD;UAAqB,IAAI,EAAE;UAAO,OAAO,EAAE;UAAO,MAAK;UAAO,EAA/C,EAAE,GAA6C,CAC9D,EACD,EAAQ,eAAe,SAAS,KAC/B,kBAAC,QAAD;UAAM,WAAU;oBAAhB,CAA8C,KAC1C,EAAQ,eAAe,SAAS,EAC7B;YAEL;;QAIR,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,OAAD;UAAK,WAAU;oBAAf;WACE,kBAAC,UAAD;YACE,MAAK;YACL,eAAe,EAAS,aAAa,EAAQ,KAAK;YAClD,WAAU;YACV,OAAO,EAAG,uBAAuB,eAAe;sBAEhD,kBAAC,IAAD,EAAK,MAAM,IAAM,CAAA;YACV,CAAA;WACR,KACC,kBAAC,UAAD;YACE,MAAK;YACL,eAAe,EAAS,aAAa,EAAQ,GAAG,OAAO;YACvD,WAAU;YACV,OAAO,EAAG,uBAAuB,eAAe;sBAEhD,kBAAC,IAAD,EAAQ,MAAM,IAAM,CAAA;YACb,CAAA;WAEX,kBAAC,GAAD;YAAiB,YAAY,EAAoB;sBAC/C,kBAAC,UAAD;aACE,MAAK;aACL,eAAe,GAAkB,EAAQ,GAAG;aAC5C,UAAU;aACV,WAAU;aACV,OAAO,EAAG,0BAA0B,mBAAmB;uBAEtD,IACC,kBAAC,GAAD;cAAS,MAAM;cAAI,WAAU;cAAiB,CAAA,GAE9C,kBAAC,IAAD,EAAW,MAAM,IAAM,CAAA;aAElB,CAAA;YACO,CAAA;WAClB,kBAAC,GAAD;YAAiB,YAAY,EAAoB;sBAC/C,kBAAC,UAAD;aACE,MAAK;aACL,eAAe,GAAmB,EAAQ;aAC1C,UAAU;aACV,WAAW,kGACT,EAAQ,WAAW,WACf,yFACA;aAEN,OACE,EAAQ,WAAW,WACf,EAAG,sBAAsB,aAAa,GACtC,EAAG,oBAAoB,WAAW;uBAGvC,EAAQ,WAAW,WAClB,kBAAC,GAAD,EAAU,MAAM,IAAM,CAAA,GAEtB,kBAAC,IAAD,EAAO,MAAM,IAAM,CAAA;aAEd,CAAA;YACO,CAAA;WACd;aAGL,OAAkB,EAAQ,KACzB,kBAAC,OAAD;UAAK,WAAU;oBAAf;WACE,kBAAC,QAAD;YAAM,WAAU;sBACb,EAAG,0BAA0B,UAAU;YACnC,CAAA;WACP,kBAAC,UAAD;YACE,MAAK;YACL,eAAe,GAAa,EAAQ,GAAG;YACvC,UAAU;YACV,WAAU;sBAET,IAAkB,QAAQ,EAAG,eAAe,MAAM;YAC5C,CAAA;WACT,kBAAC,UAAD;YACE,MAAK;YACL,eAAe,EAAiB,KAAK;YACrC,WAAU;sBAET,EAAG,cAAc,KAAK;YAChB,CAAA;WACL;cAEN,kBAAC,GAAD;UAAiB,YAAY,EAAoB;oBAC/C,kBAAC,UAAD;WACE,MAAK;WACL,eAAe,EAAiB,EAAQ,GAAG;WAC3C,WAAU;WACV,OAAO,EAAG,yBAAyB,iBAAiB;qBAEpD,kBAAC,IAAD,EAAQ,MAAM,IAAM,CAAA;WACb,CAAA;UACO,CAAA,CAEhB;;QACI;SAzML,EAAQ,GAyMH;OAEd;KACE,CAAA;IAIP,IAAQ,KACP,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,KAAD;MAAG,WAAU;gBAAb;OACG,EAAG,mBAAmB,UAAU;OAAE;OACnC,kBAAC,QAAD;QAAM,WAAU;kBAAhB;SACG,IAAc,IAAW;SAAE;SAAE,KAAK,KAAK,IAAc,KAAK,GAAU,EAAM;SACtE;;OAAC;OACP,EAAG,cAAc,KAAK;OAAC;OAAC,kBAAC,QAAD;QAAM,WAAU;kBAAiC;QAAa,CAAA;OAAC;OACvF,EAAG,yBAAyB,WAAW;OACtC;SACJ,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,UAAD;QACE,MAAK;QACL,eAAe,GAAgB,MAAM,KAAK,IAAI,GAAG,IAAI,EAAE,CAAC;QACxD,UAAU,MAAgB;QAC1B,WAAU;kBAET,EAAG,oBAAoB,WAAW;QAC5B,CAAA;OACT,kBAAC,QAAD;QAAM,WAAU;kBAAhB;SACG,IAAc;SAAE;SAAI;SAChB;;OACP,kBAAC,UAAD;QACE,MAAK;QACL,eAAe,GAAgB,MAAM,KAAK,IAAI,IAAa,GAAG,IAAI,EAAE,CAAC;QACrE,UAAU,KAAe,IAAa;QACtC,WAAU;kBAET,EAAG,gBAAgB,OAAO;QACpB,CAAA;OACL;QACF;;IAEJ;;EACU,CAAA"}