@puredesktop/puredesktop-ui-bridge 1.0.0-beta.1 → 1.0.0-beta.2

package/src/components/common/connections/ConnectionSetup.tsx

@@ -1,529 +1,534 @@
-import type { ReactNode } from 'react'
-import { styled } from 'styled-components'
-import { Button } from '../buttons/Button.js'
-
-export type ConnectionOptionTone = 'ready' | 'planned' | 'connected'
-
-export interface ConnectionOptionCardProps {
-  title: string
-  description: string
-  meta?: string
-  badge?: string
-  selected?: boolean
-  disabled?: boolean
-  tone?: ConnectionOptionTone
-  onSelect?: () => void
-}
-
-export interface ConnectionStep {
-  title: string
-  detail: ReactNode
-}
-
-export type ConnectionTestTone = 'idle' | 'success' | 'warning' | 'error'
-
-export interface ConnectionTestResultProps {
-  title: string
-  message: ReactNode
-  tone?: ConnectionTestTone
-  nextSteps?: readonly ReactNode[]
-}
-
-export interface ConnectionSavedCardProps {
-  title: string
-  description: string
-  meta?: string
-  actionLabel?: string
-  onAction?: () => void
-}
-
-export interface ConnectionSetupPageProps {
-  title: string
-  description: string
-  controls?: ReactNode
-  children: ReactNode
-}
-
-const PageRoot = styled.section`
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  padding: clamp(16px, 3vw, 30px);
-`
-
-const PageInner = styled.div`
-  display: grid;
-  gap: 16px;
-  max-width: 980px;
-  margin: 0 auto;
-`
-
-const PageHeader = styled.header`
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 24px;
-  min-width: 0;
-`
-
-const HeaderText = styled.div`
-  display: grid;
-  gap: 6px;
-  max-width: 560px;
-`
-
-const Title = styled.h1`
-  margin: 0;
-  color: var(--connection-ink, var(--platform-colors-text));
-  font-size: clamp(22px, 3vw, 30px);
-  line-height: 1.15;
-  letter-spacing: 0;
-`
-
-const Description = styled.p`
-  max-width: 60ch;
-  margin: 0;
-  color: var(--connection-muted, var(--platform-colors-text-secondary));
-  font-size: 14px;
-  line-height: 1.5;
-`
-
-export const ConnectionSetupGrid = styled.div`
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
-  gap: 14px;
-  align-items: start;
-
-  @media (max-width: 900px) {
-    grid-template-columns: 1fr;
-  }
-`
-
-export const ConnectionOptionGrid = styled.div`
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
-  gap: 10px;
-`
-
-export const ConnectionSavedList = styled.div`
-  display: grid;
-  gap: 12px;
-`
-
-export const ConnectionDetailHeader = styled.header`
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 14px;
-`
-
-export const ConnectionDetailTitleGroup = styled.div`
-  display: grid;
-  gap: 5px;
-  min-width: 0;
-`
-
-export const ConnectionDetailMeta = styled.span`
-  color: var(--connection-faint, var(--platform-colors-text-tertiary));
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-`
-
-const OptionButton = styled.button<{
-  $selected: boolean
-  $tone: ConnectionOptionTone
-}>`
-  display: grid;
-  gap: 8px;
-  min-height: 118px;
-  padding: 14px;
-  border: 1px solid
-    ${({ $selected }) =>
-      $selected
-        ? 'var(--connection-accent, var(--platform-colors-accent))'
-        : 'var(--connection-border, var(--platform-colors-border))'};
-  border-radius: 8px;
-  background: ${({ $selected }) =>
-    $selected
-      ? 'rgb(from var(--connection-accent, var(--platform-colors-accent)) r g b / 8%)'
-      : 'rgb(255 255 255 / 66%)'};
-  color: var(--connection-ink, var(--platform-colors-text));
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-  box-shadow: ${({ $selected }) =>
-    $selected ? '0 18px 44px rgb(31 38 52 / 8%)' : 'none'};
-
-  &:hover {
-    border-color: var(--connection-accent, var(--platform-colors-accent));
-    background: rgb(255 255 255 / 86%);
-  }
-
-  &:disabled {
-    cursor: default;
-    opacity: 0.58;
-  }
-`
-
-const OptionTop = styled.div`
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-`
-
-const OptionTitle = styled.strong`
-  color: inherit;
-  font-size: 15px;
-  line-height: 1.24;
-`
-
-const OptionBadge = styled.span<{ $tone: ConnectionOptionTone }>`
-  flex: 0 0 auto;
-  padding: 3px 8px;
-  border: 1px solid var(--connection-border, var(--platform-colors-border));
-  border-radius: 999px;
-  color: ${({ $tone }) =>
-    $tone === 'connected'
-      ? 'var(--platform-colors-semantic-green-text, #3f6d4c)'
-      : 'var(--connection-muted, var(--platform-colors-text-secondary))'};
-  font-size: 11px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-`
-
-const OptionDescription = styled.p`
-  margin: 0;
-  color: var(--connection-muted, var(--platform-colors-text-secondary));
-  font-size: 12px;
-  line-height: 1.45;
-`
-
-const OptionMeta = styled.span`
-  align-self: end;
-  color: var(--connection-faint, var(--platform-colors-text-tertiary));
-  font-size: 12px;
-  font-weight: 600;
-`
-
-const SavedCardRoot = styled.div`
-  display: grid;
-  gap: 12px;
-  min-width: 0;
-  padding: 16px;
-  border: 1px solid var(--connection-border, var(--platform-colors-border));
-  border-radius: 8px;
-  background: rgb(255 255 255 / 58%);
-`
-
-const SavedCardTop = styled.div`
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 14px;
-`
-
-const SavedCardText = styled.div`
-  display: grid;
-  gap: 4px;
-  min-width: 0;
-`
-
-const SavedCardTitle = styled.strong`
-  color: var(--connection-ink, var(--platform-colors-text));
-  font-size: 16px;
-  line-height: 1.28;
-`
-
-const SavedCardDescription = styled.span`
-  color: var(--connection-muted, var(--platform-colors-text-secondary));
-  font-size: 13px;
-  line-height: 1.5;
-  overflow-wrap: anywhere;
-`
-
-const SavedCardMeta = styled.span`
-  color: var(--connection-faint, var(--platform-colors-text-tertiary));
-  font-size: 12px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-`
-
-export const ConnectionPanel = styled.div`
-  display: grid;
-  gap: 14px;
-  min-width: 0;
-  padding: 16px;
-  border: 1px solid var(--connection-border, var(--platform-colors-border));
-  border-radius: 8px;
-  background: rgb(255 255 255 / 72%);
-  box-shadow: 0 18px 48px rgb(31 38 52 / 6%);
-`
-
-export const ConnectionPanelTitle = styled.h2`
-  margin: 0;
-  color: var(--connection-ink, var(--platform-colors-text));
-  font-size: 18px;
-  line-height: 1.18;
-  letter-spacing: 0;
-`
-
-export const ConnectionPanelText = styled.p`
-  margin: 0;
-  color: var(--connection-muted, var(--platform-colors-text-secondary));
-  font-size: 13px;
-  line-height: 1.5;
-`
-
-export const ConnectionFieldGrid = styled.div`
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
-
-  @media (max-width: 620px) {
-    grid-template-columns: 1fr;
-  }
-`
-
-export const ConnectionButtonRow = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 10px;
-  flex-wrap: wrap;
-`
-
-const TestResultRoot = styled.div<{ $tone: ConnectionTestTone }>`
-  display: grid;
-  gap: 8px;
-  padding: 12px;
-  border: 1px solid
-    ${({ $tone }) =>
-      $tone === 'success'
-        ? 'var(--platform-colors-semantic-green-border, var(--connection-border, var(--platform-colors-border)))'
-        : $tone === 'error'
-        ? 'var(--platform-colors-semantic-red-border, var(--connection-border, var(--platform-colors-border)))'
-        : 'var(--connection-border, var(--platform-colors-border))'};
-  border-radius: 8px;
-  background: rgb(255 255 255 / 54%);
-`
-
-const TestResultTitle = styled.strong<{ $tone: ConnectionTestTone }>`
-  color: ${({ $tone }) =>
-    $tone === 'success'
-      ? 'var(--platform-colors-semantic-green-text, #3f6d4c)'
-      : $tone === 'error'
-      ? 'var(--platform-colors-semantic-red-text, #8a4b3d)'
-      : 'var(--connection-ink, var(--platform-colors-text))'};
-  font-size: 13px;
-  line-height: 1.35;
-`
-
-const TestResultMessage = styled.div`
-  color: var(--connection-muted, var(--platform-colors-text-secondary));
-  font-size: 12px;
-  line-height: 1.5;
-
-  a {
-    color: var(--connection-accent, var(--platform-colors-accent));
-    font-weight: 700;
-    text-decoration: none;
-  }
-
-  a:hover {
-    text-decoration: underline;
-    text-underline-offset: 2px;
-  }
-`
-
-const TestResultList = styled.ul`
-  display: grid;
-  gap: 5px;
-  margin: 0;
-  padding-left: 18px;
-  color: var(--connection-muted, var(--platform-colors-text-secondary));
-  font-size: 12px;
-  line-height: 1.45;
-`
-
-const StepList = styled.ol`
-  display: grid;
-  gap: 10px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-`
-
-const StepItem = styled.li`
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  gap: 10px;
-  padding: 10px 0;
-  border-top: 1px solid var(--connection-border, var(--platform-colors-border));
-
-  &:first-child {
-    border-top: 0;
-  }
-`
-
-const StepNumber = styled.span`
-  display: inline-grid;
-  place-items: center;
-  width: 24px;
-  height: 24px;
-  border: 1px solid var(--connection-border, var(--platform-colors-border));
-  border-radius: 999px;
-  color: var(--connection-muted, var(--platform-colors-text-secondary));
-  font-size: 12px;
-  font-weight: 800;
-`
-
-const StepCopy = styled.div`
-  display: grid;
-  gap: 3px;
-`
-
-const StepTitle = styled.strong`
-  color: var(--connection-ink, var(--platform-colors-text));
-  font-size: 13px;
-`
-
-const StepDetail = styled.span`
-  color: var(--connection-muted, var(--platform-colors-text-secondary));
-  font-size: 12px;
-  line-height: 1.5;
-
-  a {
-    color: var(--connection-accent, var(--platform-colors-accent));
-    font-weight: 700;
-    text-decoration: none;
-  }
-
-  a:hover {
-    text-decoration: underline;
-    text-underline-offset: 2px;
-  }
-`
-
-export function ConnectionSetupPage({
-  title,
-  description,
-  controls,
-  children,
-}: ConnectionSetupPageProps): React.ReactElement {
-  return (
-    <PageRoot>
-      <PageInner>
-        <PageHeader>
-          <HeaderText>
-            <Title>{title}</Title>
-            <Description>{description}</Description>
-          </HeaderText>
-          {controls ? <div>{controls}</div> : null}
-        </PageHeader>
-        {children}
-      </PageInner>
-    </PageRoot>
-  )
-}
-
-export function ConnectionOptionCard({
-  title,
-  description,
-  meta,
-  badge,
-  selected = false,
-  disabled = false,
-  tone = 'ready',
-  onSelect,
-}: ConnectionOptionCardProps): React.ReactElement {
-  return (
-    <OptionButton
-      type="button"
-      $selected={selected}
-      $tone={tone}
-      disabled={disabled}
-      aria-pressed={selected}
-      onClick={onSelect}
-    >
-      <OptionTop>
-        <OptionTitle>{title}</OptionTitle>
-        {badge ? <OptionBadge $tone={tone}>{badge}</OptionBadge> : null}
-      </OptionTop>
-      <OptionDescription>{description}</OptionDescription>
-      {meta ? <OptionMeta>{meta}</OptionMeta> : null}
-    </OptionButton>
-  )
-}
-
-export function ConnectionStepList({
-  steps,
-}: {
-  steps: readonly ConnectionStep[]
-}): React.ReactElement {
-  return (
-    <StepList>
-      {steps.map((step, index) => (
-        <StepItem key={`${step.title}:${index}`}>
-          <StepNumber>{index + 1}</StepNumber>
-          <StepCopy>
-            <StepTitle>{step.title}</StepTitle>
-            <StepDetail>{step.detail}</StepDetail>
-          </StepCopy>
-        </StepItem>
-      ))}
-    </StepList>
-  )
-}
-
-export function ConnectionTestResult({
-  title,
-  message,
-  tone = 'idle',
-  nextSteps,
-}: ConnectionTestResultProps): React.ReactElement {
-  return (
-    <TestResultRoot $tone={tone}>
-      <TestResultTitle $tone={tone}>{title}</TestResultTitle>
-      <TestResultMessage>{message}</TestResultMessage>
-      {nextSteps?.length ? (
-        <TestResultList>
-          {nextSteps.map((step, index) => (
-            <li key={index}>{step}</li>
-          ))}
-        </TestResultList>
-      ) : null}
-    </TestResultRoot>
-  )
-}
-
-export function ConnectionSavedCard({
-  title,
-  description,
-  meta,
-  actionLabel,
-  onAction,
-}: ConnectionSavedCardProps): React.ReactElement {
-  return (
-    <SavedCardRoot>
-      <SavedCardTop>
-        <SavedCardText>
-          <SavedCardTitle>{title}</SavedCardTitle>
-          <SavedCardDescription>{description}</SavedCardDescription>
-        </SavedCardText>
-        {actionLabel && onAction ? (
-          <Button type="button" size="sm" variant="subtle" onClick={onAction}>
-            {actionLabel}
-          </Button>
-        ) : null}
-      </SavedCardTop>
-      {meta ? <SavedCardMeta>{meta}</SavedCardMeta> : null}
-    </SavedCardRoot>
-  )
-}
-
-export const ConnectionPrimaryButton = Button
+import type { ReactNode } from 'react'
+import { styled } from 'styled-components'
+import { Button } from '../buttons/Button.js'
+
+export type ConnectionOptionTone = 'ready' | 'planned' | 'connected'
+
+export interface ConnectionOptionCardProps {
+  title: string
+  description: string
+  meta?: string
+  badge?: string
+  selected?: boolean
+  disabled?: boolean
+  tone?: ConnectionOptionTone
+  onSelect?: () => void
+}
+
+export interface ConnectionStep {
+  title: string
+  detail: ReactNode
+}
+
+export type ConnectionTestTone = 'idle' | 'success' | 'warning' | 'error'
+
+export interface ConnectionTestResultProps {
+  title: string
+  message: ReactNode
+  tone?: ConnectionTestTone
+  nextSteps?: readonly ReactNode[]
+}
+
+export interface ConnectionSavedCardProps {
+  title: string
+  description: string
+  meta?: string
+  actionLabel?: string
+  onAction?: () => void
+}
+
+export interface ConnectionSetupPageProps {
+  title: string
+  description: string
+  controls?: ReactNode
+  children: ReactNode
+}
+
+const PageRoot = styled.section`
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: clamp(16px, 3vw, 28px);
+`
+
+const PageInner = styled.div`
+  display: grid;
+  gap: 16px;
+  max-width: 980px;
+  margin: 0 auto;
+`
+
+const PageHeader = styled.header`
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 24px;
+  min-width: 0;
+`
+
+const HeaderText = styled.div`
+  display: grid;
+  gap: 6px;
+  max-width: 560px;
+`
+
+const Title = styled.h1`
+  margin: 0;
+  color: var(--connection-ink, var(--platform-colors-text));
+  font-size: var(--connection-title-size, 22px);
+  font-weight: var(--platform-typography-font-weight-bold, 700);
+  line-height: 1.2;
+  letter-spacing: 0;
+`
+
+const Description = styled.p`
+  max-width: 60ch;
+  margin: 0;
+  color: var(--connection-muted, var(--platform-colors-text-secondary));
+  font-size: var(--platform-typography-font-size-sm, 13px);
+  line-height: 1.45;
+`
+
+export const ConnectionSetupGrid = styled.div`
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
+  gap: 14px;
+  align-items: start;
+
+  @media (max-width: 900px) {
+    grid-template-columns: 1fr;
+  }
+`
+
+export const ConnectionOptionGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
+  gap: 10px;
+`
+
+export const ConnectionSavedList = styled.div`
+  display: grid;
+  gap: 12px;
+`
+
+export const ConnectionDetailHeader = styled.header`
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 14px;
+`
+
+export const ConnectionDetailTitleGroup = styled.div`
+  display: grid;
+  gap: 5px;
+  min-width: 0;
+`
+
+export const ConnectionDetailMeta = styled.span`
+  color: var(--connection-faint, var(--platform-colors-text-tertiary));
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+`
+
+const OptionButton = styled.button<{
+  $selected: boolean
+  $tone: ConnectionOptionTone
+}>`
+  display: grid;
+  gap: 8px;
+  min-height: 112px;
+  padding: 12px;
+  border: 1px solid
+    ${({ $selected }) =>
+      $selected
+        ? 'var(--connection-accent, var(--platform-colors-accent))'
+        : 'var(--connection-border, var(--platform-colors-border))'};
+  border-radius: 8px;
+  background: ${({ $selected }) =>
+    $selected
+      ? 'rgb(from var(--connection-accent, var(--platform-colors-accent)) r g b / 8%)'
+      : 'var(--connection-surface, var(--platform-colors-surface))'};
+  color: var(--connection-ink, var(--platform-colors-text));
+  font: inherit;
+  font-size: var(--platform-typography-font-size-sm, 13px);
+  text-align: left;
+  cursor: pointer;
+  box-shadow: ${({ $selected }) =>
+    $selected ? '0 18px 44px rgb(31 38 52 / 8%)' : 'none'};
+
+  &:hover {
+    border-color: var(--connection-accent, var(--platform-colors-accent));
+    background: var(
+      --connection-surface-hover,
+      var(--platform-colors-surface-hover)
+    );
+  }
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.58;
+  }
+`
+
+const OptionTop = styled.div`
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+`
+
+const OptionTitle = styled.strong`
+  color: inherit;
+  font-size: 14px;
+  line-height: 1.25;
+`
+
+const OptionBadge = styled.span<{ $tone: ConnectionOptionTone }>`
+  flex: 0 0 auto;
+  padding: 3px 8px;
+  border: 1px solid var(--connection-border, var(--platform-colors-border));
+  border-radius: 999px;
+  color: ${({ $tone }) =>
+    $tone === 'connected'
+      ? 'var(--platform-colors-semantic-green-text, #3f6d4c)'
+      : 'var(--connection-muted, var(--platform-colors-text-secondary))'};
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+`
+
+const OptionDescription = styled.p`
+  margin: 0;
+  color: var(--connection-muted, var(--platform-colors-text-secondary));
+  font-size: var(--platform-typography-font-size-sm, 13px);
+  line-height: 1.4;
+`
+
+const OptionMeta = styled.span`
+  align-self: end;
+  color: var(--connection-faint, var(--platform-colors-text-tertiary));
+  font-size: 12px;
+  font-weight: 600;
+`
+
+const SavedCardRoot = styled.div`
+  display: grid;
+  gap: 12px;
+  min-width: 0;
+  padding: 16px;
+  border: 1px solid var(--connection-border, var(--platform-colors-border));
+  border-radius: 8px;
+  background: var(--connection-surface, var(--platform-colors-surface));
+`
+
+const SavedCardTop = styled.div`
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 14px;
+`
+
+const SavedCardText = styled.div`
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+`
+
+const SavedCardTitle = styled.strong`
+  color: var(--connection-ink, var(--platform-colors-text));
+  font-size: 16px;
+  line-height: 1.28;
+`
+
+const SavedCardDescription = styled.span`
+  color: var(--connection-muted, var(--platform-colors-text-secondary));
+  font-size: 13px;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+`
+
+const SavedCardMeta = styled.span`
+  color: var(--connection-faint, var(--platform-colors-text-tertiary));
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+`
+
+export const ConnectionPanel = styled.div`
+  display: grid;
+  gap: 14px;
+  min-width: 0;
+  padding: 16px;
+  border: 1px solid var(--connection-border, var(--platform-colors-border));
+  border-radius: 8px;
+  background: var(--connection-surface, var(--platform-colors-surface));
+  box-shadow: var(--platform-shadow-sm, 0 1px 2px rgb(31 38 52 / 6%));
+`
+
+export const ConnectionPanelTitle = styled.h2`
+  margin: 0;
+  color: var(--connection-ink, var(--platform-colors-text));
+  font-size: 18px;
+  line-height: 1.18;
+  letter-spacing: 0;
+`
+
+export const ConnectionPanelText = styled.p`
+  margin: 0;
+  color: var(--connection-muted, var(--platform-colors-text-secondary));
+  font-size: 13px;
+  line-height: 1.5;
+`
+
+export const ConnectionFieldGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+
+  @media (max-width: 620px) {
+    grid-template-columns: 1fr;
+  }
+`
+
+export const ConnectionButtonRow = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  flex-wrap: wrap;
+`
+
+const TestResultRoot = styled.div<{ $tone: ConnectionTestTone }>`
+  display: grid;
+  gap: 8px;
+  padding: 12px;
+  border: 1px solid
+    ${({ $tone }) =>
+      $tone === 'success'
+        ? 'var(--platform-colors-semantic-green-border, var(--connection-border, var(--platform-colors-border)))'
+        : $tone === 'error'
+        ? 'var(--platform-colors-semantic-red-border, var(--connection-border, var(--platform-colors-border)))'
+        : 'var(--connection-border, var(--platform-colors-border))'};
+  border-radius: 8px;
+  background: var(--connection-surface, var(--platform-colors-surface));
+`
+
+const TestResultTitle = styled.strong<{ $tone: ConnectionTestTone }>`
+  color: ${({ $tone }) =>
+    $tone === 'success'
+      ? 'var(--platform-colors-semantic-green-text, #3f6d4c)'
+      : $tone === 'error'
+      ? 'var(--platform-colors-semantic-red-text, #8a4b3d)'
+      : 'var(--connection-ink, var(--platform-colors-text))'};
+  font-size: 13px;
+  line-height: 1.35;
+`
+
+const TestResultMessage = styled.div`
+  color: var(--connection-muted, var(--platform-colors-text-secondary));
+  font-size: 12px;
+  line-height: 1.5;
+
+  a {
+    color: var(--connection-accent, var(--platform-colors-accent));
+    font-weight: 700;
+    text-decoration: none;
+  }
+
+  a:hover {
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+`
+
+const TestResultList = styled.ul`
+  display: grid;
+  gap: 5px;
+  margin: 0;
+  padding-left: 18px;
+  color: var(--connection-muted, var(--platform-colors-text-secondary));
+  font-size: 12px;
+  line-height: 1.45;
+`
+
+const StepList = styled.ol`
+  display: grid;
+  gap: 10px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+`
+
+const StepItem = styled.li`
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 10px;
+  padding: 10px 0;
+  border-top: 1px solid var(--connection-border, var(--platform-colors-border));
+
+  &:first-child {
+    border-top: 0;
+  }
+`
+
+const StepNumber = styled.span`
+  display: inline-grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  border: 1px solid var(--connection-border, var(--platform-colors-border));
+  border-radius: 999px;
+  color: var(--connection-muted, var(--platform-colors-text-secondary));
+  font-size: 12px;
+  font-weight: 800;
+`
+
+const StepCopy = styled.div`
+  display: grid;
+  gap: 3px;
+`
+
+const StepTitle = styled.strong`
+  color: var(--connection-ink, var(--platform-colors-text));
+  font-size: 13px;
+`
+
+const StepDetail = styled.span`
+  color: var(--connection-muted, var(--platform-colors-text-secondary));
+  font-size: 12px;
+  line-height: 1.5;
+
+  a {
+    color: var(--connection-accent, var(--platform-colors-accent));
+    font-weight: 700;
+    text-decoration: none;
+  }
+
+  a:hover {
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+`
+
+export function ConnectionSetupPage({
+  title,
+  description,
+  controls,
+  children,
+}: ConnectionSetupPageProps): React.ReactElement {
+  return (
+    <PageRoot>
+      <PageInner>
+        <PageHeader>
+          <HeaderText>
+            <Title>{title}</Title>
+            <Description>{description}</Description>
+          </HeaderText>
+          {controls ? <div>{controls}</div> : null}
+        </PageHeader>
+        {children}
+      </PageInner>
+    </PageRoot>
+  )
+}
+
+export function ConnectionOptionCard({
+  title,
+  description,
+  meta,
+  badge,
+  selected = false,
+  disabled = false,
+  tone = 'ready',
+  onSelect,
+}: ConnectionOptionCardProps): React.ReactElement {
+  return (
+    <OptionButton
+      type="button"
+      $selected={selected}
+      $tone={tone}
+      disabled={disabled}
+      aria-pressed={selected}
+      onClick={onSelect}
+    >
+      <OptionTop>
+        <OptionTitle>{title}</OptionTitle>
+        {badge ? <OptionBadge $tone={tone}>{badge}</OptionBadge> : null}
+      </OptionTop>
+      <OptionDescription>{description}</OptionDescription>
+      {meta ? <OptionMeta>{meta}</OptionMeta> : null}
+    </OptionButton>
+  )
+}
+
+export function ConnectionStepList({
+  steps,
+}: {
+  steps: readonly ConnectionStep[]
+}): React.ReactElement {
+  return (
+    <StepList>
+      {steps.map((step, index) => (
+        <StepItem key={`${step.title}:${index}`}>
+          <StepNumber>{index + 1}</StepNumber>
+          <StepCopy>
+            <StepTitle>{step.title}</StepTitle>
+            <StepDetail>{step.detail}</StepDetail>
+          </StepCopy>
+        </StepItem>
+      ))}
+    </StepList>
+  )
+}
+
+export function ConnectionTestResult({
+  title,
+  message,
+  tone = 'idle',
+  nextSteps,
+}: ConnectionTestResultProps): React.ReactElement {
+  return (
+    <TestResultRoot $tone={tone}>
+      <TestResultTitle $tone={tone}>{title}</TestResultTitle>
+      <TestResultMessage>{message}</TestResultMessage>
+      {nextSteps?.length ? (
+        <TestResultList>
+          {nextSteps.map((step, index) => (
+            <li key={index}>{step}</li>
+          ))}
+        </TestResultList>
+      ) : null}
+    </TestResultRoot>
+  )
+}
+
+export function ConnectionSavedCard({
+  title,
+  description,
+  meta,
+  actionLabel,
+  onAction,
+}: ConnectionSavedCardProps): React.ReactElement {
+  return (
+    <SavedCardRoot>
+      <SavedCardTop>
+        <SavedCardText>
+          <SavedCardTitle>{title}</SavedCardTitle>
+          <SavedCardDescription>{description}</SavedCardDescription>
+        </SavedCardText>
+        {actionLabel && onAction ? (
+          <Button type="button" size="sm" variant="subtle" onClick={onAction}>
+            {actionLabel}
+          </Button>
+        ) : null}
+      </SavedCardTop>
+      {meta ? <SavedCardMeta>{meta}</SavedCardMeta> : null}
+    </SavedCardRoot>
+  )
+}
+
+export const ConnectionPrimaryButton = Button