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

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

@@ -0,0 +1,529 @@
+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

package/src/components/common/connections/index.ts

@@ -0,0 +1,26 @@
+export {
+  ConnectionButtonRow,
+  ConnectionDetailHeader,
+  ConnectionDetailMeta,
+  ConnectionDetailTitleGroup,
+  ConnectionFieldGrid,
+  ConnectionOptionCard,
+  ConnectionOptionGrid,
+  ConnectionPanel,
+  ConnectionPanelText,
+  ConnectionPanelTitle,
+  ConnectionPrimaryButton,
+  ConnectionSavedCard,
+  ConnectionSavedList,
+  ConnectionSetupGrid,
+  ConnectionSetupPage,
+  ConnectionStepList,
+  ConnectionTestResult,
+  type ConnectionOptionCardProps,
+  type ConnectionOptionTone,
+  type ConnectionSavedCardProps,
+  type ConnectionSetupPageProps,
+  type ConnectionStep,
+  type ConnectionTestResultProps,
+  type ConnectionTestTone,
+} from './ConnectionSetup.js'

package/src/components/common/containers/AppFrame.test.tsx

@@ -0,0 +1,47 @@
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { MENU_PORTAL_ID } from '../dropdown/menuPortalConstants.js'
+import { PLATFORM_APP_FRAME_BASE_STYLE_ID } from '../../../theme/utils/appFrameDocumentStyles.js'
+import { AppFrame } from './AppFrame.js'
+
+vi.mock('../../../bridge/react/usePlatformThemeFromBridge.js', () => ({
+  usePlatformThemeFromBridge: vi.fn(),
+}))
+
+function render(ui: React.ReactElement): {
+  container: HTMLDivElement
+  root: Root
+} {
+  const container = document.createElement('div')
+  document.body.appendChild(container)
+  const root = createRoot(container)
+  act(() => {
+    root.render(ui)
+  })
+  return { container, root }
+}
+
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('AppFrame', () => {
+  it('mounts menu portal, layout root, and global document styles', () => {
+    const { container } = render(
+      <AppFrame>
+        <span>App content</span>
+      </AppFrame>,
+    )
+
+    expect(document.getElementById(MENU_PORTAL_ID)).not.toBeNull()
+    const baseStyles = document.getElementById(PLATFORM_APP_FRAME_BASE_STYLE_ID)
+    expect(baseStyles).not.toBeNull()
+    expect(baseStyles?.textContent).toContain('box-sizing: border-box')
+    expect(baseStyles?.textContent).toContain('scrollbar-color')
+    expect(
+      document.getElementById('platform-font-schibsted-grotesk'),
+    ).not.toBeNull()
+    expect(container.textContent).toContain('App content')
+  })
+})

package/src/components/common/containers/AppFrame.tsx

@@ -0,0 +1,65 @@
+import { useEffect, type ComponentPropsWithoutRef, type ReactNode } from 'react'
+import { styled } from 'styled-components'
+import { usePlatformBridge } from '../../../bridge/react/usePlatformBridge.js'
+import { usePlatformAppManifest } from '../../../bridge/react/usePlatformAppManifest.js'
+import { usePlatformThemeDocumentAttrs } from '../../../bridge/react/usePlatformThemeDocumentAttrs.js'
+import { usePlatformThemeFromBridge } from '../../../bridge/react/usePlatformThemeFromBridge.js'
+import { injectAppFrameDocumentStyles } from '../../../theme/utils/appFrameDocumentStyles.js'
+import { MenuPortalLayer } from '../dropdown/MenuPortalLayer.js'
+import { AppHeader } from './AppHeader.js'
+
+export interface AppFrameProps
+  extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+  children: ReactNode
+  /** Subscribe to shell-injected theme CSS (default true). */
+  themeFromBridge?: boolean
+  /** Optional actions rendered in the app header's action slot. */
+  headerActions?: ReactNode
+}
+
+const StyledRoot = styled.div`
+  display: flex;
+  flex-direction: column;
+  /* width: 100%; */
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+`
+
+/**
+ * Shell iframe app root.
+ * Mount once per app: menu portal, theme bridge subscription, global document styles, 100% layout slot.
+ */
+export function AppFrame({
+  children,
+  className,
+  themeFromBridge = true,
+  headerActions,
+  ...rest
+}: AppFrameProps): React.ReactElement {
+  const { meta, ready } = usePlatformBridge()
+  const { manifest } = usePlatformAppManifest(meta?.appSlug ?? null, ready)
+
+  useEffect(() => {
+    injectAppFrameDocumentStyles()
+  }, [])
+
+  usePlatformThemeFromBridge(themeFromBridge)
+  const themeAttrs = usePlatformThemeDocumentAttrs(themeFromBridge)
+
+  return (
+    <>
+      <MenuPortalLayer />
+      <StyledRoot
+        className={className}
+        data-platform-theme={themeAttrs.mode || undefined}
+        data-platform-surface-palette={themeAttrs.surfacePalette || undefined}
+        {...rest}
+      >
+        {manifest && <AppHeader manifest={manifest} actions={headerActions} />}
+        {children}
+      </StyledRoot>
+    </>
+  )
+}