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

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

@@ -1,26 +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'
+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

@@ -1,47 +1,93 @@
-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 { 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 { darkTheme } from '../../../theme/themes/dark.js'
 import { AppFrame } from './AppFrame.js'
 
-vi.mock('../../../bridge/react/usePlatformThemeFromBridge.js', () => ({
-  usePlatformThemeFromBridge: vi.fn(),
+vi.mock('../../../bridge/react/usePlatformBridge.js', () => ({
+  usePlatformBridge: vi.fn(() => ({
+    bridge: null,
+    error: null,
+    meta: null,
+    ready: false,
+  })),
 }))
 
-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 = ''
-})
+vi.mock('../../../bridge/react/usePlatformAppManifest.js', () => ({
+  usePlatformAppManifest: vi.fn(() => ({
+    error: null,
+    loading: false,
+    manifest: null,
+  })),
+}))
 
-describe('AppFrame', () => {
-  it('mounts menu portal, layout root, and global document styles', () => {
-    const { container } = render(
-      <AppFrame>
-        <span>App content</span>
-      </AppFrame>,
-    )
+vi.mock('../../../bridge/react/usePlatformThemeDocumentAttrs.js', () => ({
+  usePlatformThemeDocumentAttrs: vi.fn(() => ({
+    mode: '',
+    surfacePalette: '',
+  })),
+}))
 
-    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')
-  })
-})
+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')
+  })
+
+  it('keeps the iframe app root scrollable against the themed app viewport', () => {
+    const { container } = render(
+      <AppFrame>
+        <div style={{ height: '200vh' }}>Tall app content</div>
+      </AppFrame>,
+    )
+
+    const styleTags = Array.from(document.head.querySelectorAll('style'))
+    const appFrameCss = styleTags
+      .map(tag => tag.textContent ?? '')
+      .find(css => css.includes('overscroll-behavior:contain'))
+    const baseStyles = document.getElementById(PLATFORM_APP_FRAME_BASE_STYLE_ID)
+
+    expect(darkTheme.colors.appViewport).toBeTruthy()
+    expect(baseStyles?.textContent).toContain(
+      'background: var(--platform-colors-app-viewport)',
+    )
+    expect(appFrameCss).toContain('overflow:auto')
+    expect(container.textContent).toContain('Tall app content')
+  })
+})

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

@@ -1,65 +1,66 @@
-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>
-    </>
-  )
-}
+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: auto;
+  overscroll-behavior: contain;
+`
+
+/**
+ * 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>
+    </>
+  )
+}

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

@@ -1,60 +1,60 @@
-import { styled } from 'styled-components'
-import { PureAppWordmark } from '../../chrome/PureAppWordmark.js'
-import type { PlatformAppManifest } from '../../../bridge/types.js'
-
-export type { PlatformAppManifest }
-
-export interface AppHeaderProps {
-  manifest: PlatformAppManifest
-  /** Optional slot for the app's tools — the header earns its row. */
-  actions?: React.ReactNode
-}
-
-/**
- * Slim functional app header: the elegant lockup at the left (identity), the
- * app's tools at the right. A wordmark with no tools doesn't deserve a bar —
- * apps with nothing to host should render no header at all (identity already
- * lives in the shell tab).
- */
-const StyledHeader = styled.header`
-  display: flex;
-  align-items: center;
-  gap: var(--platform-spacing-md, 16px);
-  padding: 0 14px;
-  height: 36px;
-  flex: 0 0 auto;
-  border-bottom: 1px solid var(--platform-colors-divider);
-  background: var(--platform-colors-chrome-titlebar);
-`
-
-const ActionSlot = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  min-width: 0;
-  margin-left: auto;
-
-  &[data-layout='document-tools'] {
-    flex: 1;
-    justify-content: center;
-    margin-left: 0;
-  }
-`
-
-export const APP_HEADER_ACTIONS_PORTAL_ID = 'purescience-app-header-actions'
-
-export function AppHeader({
-  manifest,
-  actions,
-}: AppHeaderProps): React.ReactElement {
-  return (
-    <StyledHeader>
-      <PureAppWordmark
-        appName={manifest.navigationLabel ?? manifest.slug}
-        size="sm"
-        accentName
-      />
-      <ActionSlot id={APP_HEADER_ACTIONS_PORTAL_ID}>{actions}</ActionSlot>
-    </StyledHeader>
-  )
-}
+import { styled } from 'styled-components'
+import { PureAppWordmark } from '../../chrome/PureAppWordmark.js'
+import type { PlatformAppManifest } from '../../../bridge/types.js'
+
+export type { PlatformAppManifest }
+
+export interface AppHeaderProps {
+  manifest: PlatformAppManifest
+  /** Optional slot for the app's tools — the header earns its row. */
+  actions?: React.ReactNode
+}
+
+/**
+ * Slim functional app header: the elegant lockup at the left (identity), the
+ * app's tools at the right. A wordmark with no tools doesn't deserve a bar —
+ * apps with nothing to host should render no header at all (identity already
+ * lives in the shell tab).
+ */
+const StyledHeader = styled.header`
+  display: flex;
+  align-items: center;
+  gap: var(--platform-spacing-md, 16px);
+  padding: 0 14px;
+  height: 36px;
+  flex: 0 0 auto;
+  border-bottom: 1px solid var(--platform-colors-divider);
+  background: var(--platform-colors-app-viewport);
+`
+
+const ActionSlot = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  margin-left: auto;
+
+  &[data-layout='document-tools'] {
+    flex: 1;
+    justify-content: center;
+    margin-left: 0;
+  }
+`
+
+export const APP_HEADER_ACTIONS_PORTAL_ID = 'purescience-app-header-actions'
+
+export function AppHeader({
+  manifest,
+  actions,
+}: AppHeaderProps): React.ReactElement {
+  return (
+    <StyledHeader>
+      <PureAppWordmark
+        appName={manifest.navigationLabel ?? manifest.slug}
+        size="sm"
+        accentName
+      />
+      <ActionSlot id={APP_HEADER_ACTIONS_PORTAL_ID}>{actions}</ActionSlot>
+    </StyledHeader>
+  )
+}

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

@@ -1,37 +1,43 @@
-import type { SpacingToken } from './flex.js'
-import { styled } from 'styled-components'
-
-export interface AutoFillGridProps {
-  children: React.ReactNode
-  minColumnWidth?: number
-  gap?: SpacingToken
-}
-
-//#region styled-components
-
-const StyledGrid = styled.div<{
-  $minColumnWidth: number
-  $gap: SpacingToken
-}>`
-  display: grid;
-  grid-template-columns: repeat(
-    auto-fill,
-    minmax(${({ $minColumnWidth }) => $minColumnWidth}px, 1fr)
-  );
-  gap: ${({ $gap }) => `var(--platform-spacing-${$gap})`};
-  width: 100%;
-`
-
-//#endregion
-
-export function AutoFillGrid({
-  children,
-  minColumnWidth = 220,
-  gap = 'md',
-}: AutoFillGridProps): React.ReactElement {
-  return (
-    <StyledGrid $minColumnWidth={minColumnWidth} $gap={gap}>
-      {children}
-    </StyledGrid>
-  )
-}
+import type { SpacingToken } from './flex.js'
+import { styled } from 'styled-components'
+
+export interface AutoFillGridProps {
+  children: React.ReactNode
+  minColumnWidth?: number
+  gap?: SpacingToken
+  className?: string
+}
+
+//#region styled-components
+
+const StyledGrid = styled.div<{
+  $minColumnWidth: number
+  $gap: SpacingToken
+}>`
+  display: grid;
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(${({ $minColumnWidth }) => $minColumnWidth}px, 1fr)
+  );
+  gap: ${({ $gap }) => `var(--platform-spacing-${$gap})`};
+  width: 100%;
+`
+
+//#endregion
+
+export function AutoFillGrid({
+  children,
+  minColumnWidth = 220,
+  gap = 'md',
+  className,
+}: AutoFillGridProps): React.ReactElement {
+  return (
+    <StyledGrid
+      className={className}
+      $minColumnWidth={minColumnWidth}
+      $gap={gap}
+    >
+      {children}
+    </StyledGrid>
+  )
+}

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

@@ -1,43 +1,43 @@
-import { styled } from 'styled-components'
-
-export interface CollapsibleProps {
-  open: boolean
-  children: React.ReactNode
-  className?: string
-}
-
-//#region styled-components
-
-const StyledBody = styled.div`
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows var(--platform-transition-base);
-  min-width: 0;
-  width: auto;
-  max-width: 100%;
-  align-self: stretch;
-  box-sizing: border-box;
-
-  &[data-open='true'] {
-    grid-template-rows: 1fr;
-  }
-`
-
-const StyledInner = styled.div`
-  overflow: hidden;
-  min-width: 0;
-`
-
-//#endregion
-
-export function Collapsible({
-  open,
-  children,
-  className,
-}: CollapsibleProps): React.ReactElement {
-  return (
-    <StyledBody data-open={String(open)} className={className}>
-      <StyledInner>{children}</StyledInner>
-    </StyledBody>
-  )
-}
+import { styled } from 'styled-components'
+
+export interface CollapsibleProps {
+  open: boolean
+  children: React.ReactNode
+  className?: string
+}
+
+//#region styled-components
+
+const StyledBody = styled.div`
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--platform-transition-base);
+  min-width: 0;
+  width: auto;
+  max-width: 100%;
+  align-self: stretch;
+  box-sizing: border-box;
+
+  &[data-open='true'] {
+    grid-template-rows: 1fr;
+  }
+`
+
+const StyledInner = styled.div`
+  overflow: hidden;
+  min-width: 0;
+`
+
+//#endregion
+
+export function Collapsible({
+  open,
+  children,
+  className,
+}: CollapsibleProps): React.ReactElement {
+  return (
+    <StyledBody data-open={String(open)} className={className}>
+      <StyledInner>{children}</StyledInner>
+    </StyledBody>
+  )
+}