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

package/src/index.ts

@@ -0,0 +1,209 @@
+export type { PlatformTheme, PlatformThemeMode } from './theme/tokens.js'
+export type { PlatformThemeShared } from './theme/themes/shared.js'
+export {
+  createPlatformTheme,
+  platformThemeShared,
+} from './theme/themes/shared.js'
+export { neutral, status } from './theme/themes/palette.js'
+export { zi } from './theme/themeVars.js'
+export { darkTheme } from './theme/themes/dark.js'
+export { lightTheme } from './theme/themes/light.js'
+export {
+  PLATFORM_THEME_PREFIX,
+  camelToCssVarKey,
+  themeToCssVars,
+  themeToRootCssBlock,
+} from './theme/utils/cssVariables.js'
+export {
+  applyThemeToDocument,
+  themeToInlineStyle,
+} from './theme/utils/applyTheme.js'
+export {
+  composePlatformTheme,
+  type PlatformThemeComposition,
+} from './theme/composePlatformTheme.js'
+export { buildThemeBridgePayload } from './theme/buildThemeBridgePayload.js'
+export {
+  SURFACE_PALETTES,
+  SURFACE_PALETTE_DEFAULT_ID,
+  surfacePaletteById,
+  surfacePaletteSwatches,
+  applySurfacePaletteToTheme,
+  type SurfacePalette,
+} from './theme/surfacePalettes.js'
+export {
+  CanvasElementFrame,
+  type CanvasElementDropSide,
+  type CanvasElementFrameProps,
+  type CanvasElementPlacement,
+} from './components/common/canvas/index.js'
+export { surfaceRoleSelectors } from './theme/surfaceRoleSelectors.js'
+export { reportsShellChromeSelectors } from './theme/reportsShellChromeSelectors.js'
+export { applyAppAccentToTheme, appAccentForSlug } from './theme/appAccents.js'
+export { GlobalStyles } from './theme/utils/GlobalStyles.js'
+export {
+  buildPureRenderHtmlDocument,
+  buildBookPureRenderRequest,
+  buildWriterPureRenderRequest,
+  buildPureRenderStylesheet,
+  compilePrintTheme,
+  normalizePureRenderHtml,
+  themeToPureRenderTokenCss,
+  DEFAULT_PURE_RENDER_THEME,
+  type PrintStyleProfile,
+  type PureRenderMetadata,
+  type PureRenderProfile,
+  type PureRenderRequest,
+  type PureRenderTheme,
+} from './bridge/pureRender/index.js'
+export {
+  ThemeProvider,
+  usePlatformTheme,
+  type PlatformThemeContextValue,
+} from './theme/ThemeProvider.js'
+export { useInjectThemeIntoIframe } from './theme/utils/useInjectThemeIntoIframe.js'
+export {
+  OverlayActionCapsule,
+  OverlayActionCapsuleButton,
+  OverlayActionCapsuleCloseButton,
+  OverlayActionCapsuleIconButton,
+  PlatformIcon,
+  PureAppWordmark,
+  ShellWindowControls,
+  ThemeModeButton,
+  type OverlayActionCapsuleButtonProps,
+  type OverlayActionCapsuleCloseButtonProps,
+  type OverlayActionCapsuleIconButtonProps,
+  type OverlayActionCapsuleProps,
+  type PlatformIconProps,
+  type PureAppWordmarkProps,
+  type ShellWindowControlsProps,
+} from './chrome/index.js'
+export {
+  arrIf,
+  callOn,
+  camelCaseToCapital,
+  filterEntries,
+  get,
+  isFunction,
+  isPlainObject,
+  mapEntries,
+  normalizeExtension,
+  safeParse,
+  slugToTitle,
+  snakeCaseToHuman,
+  switchOn,
+  toCamelCase,
+  toHumanReadable,
+} from './utils/generalUtils.js'
+export {
+  extensionIconMap,
+  type ExtensionIconMap,
+} from './utils/extensionIconMap.js'
+export {
+  DocumentEditor,
+  buildExtensions,
+  useEditorExtensions,
+  resolveEditorContent,
+  type BuildExtensionsOptions,
+  type DocumentEditorHandle,
+  type DocumentEditorProps,
+  type EditorFeatures,
+  type EditorInputFormat,
+} from './editor/index.js'
+export {
+  AppFrame,
+  type AppFrameProps,
+} from './components/common/containers/AppFrame.js'
+export {
+  AppHeader,
+  type AppHeaderProps,
+  type PlatformAppManifest,
+} from './components/common/containers/AppHeader.js'
+export {
+  ConnectionButtonRow,
+  ConnectionFieldGrid,
+  ConnectionOptionCard,
+  ConnectionOptionGrid,
+  ConnectionPanel,
+  ConnectionPanelText,
+  ConnectionPanelTitle,
+  ConnectionPrimaryButton,
+  ConnectionSavedCard,
+  ConnectionSavedList,
+  ConnectionSetupGrid,
+  ConnectionSetupPage,
+  ConnectionStepList,
+  type ConnectionOptionCardProps,
+  type ConnectionOptionTone,
+  type ConnectionSavedCardProps,
+  type ConnectionSetupPageProps,
+  type ConnectionStep,
+} from './components/common/connections/index.js'
+export {
+  ActionReader,
+  ActivityLedger,
+  CreationDesk,
+  CreationDeskFieldBox,
+  CreationDeskFieldTextarea,
+  CreationDeskNote,
+  CreationDeskRow,
+  CreationDeskSection,
+  CreationDeskSectionLabel,
+  CreationDeskSourceCard,
+  CreationDeskSourceHead,
+  CreationDeskTextarea,
+  DailyBrief,
+  DeskCard,
+  type ActionReaderAction,
+  type ActionReaderProps,
+  type ActivityLedgerItem,
+  type ActivityLedgerProps,
+  type ActivityLedgerTone,
+  type CreationDeskProps,
+  type DailyBriefProps,
+  type DailyBriefSpan,
+  type DeskCardProps,
+  type DeskCardTone,
+} from './components/common/desk/index.js'
+export {
+  ContextSelector,
+  type ContextOption,
+  type ContextSelection,
+  type ContextSelectorProps,
+  type ContextSourceKind,
+} from './components/common/context/index.js'
+export {
+  Badge,
+  CapabilityPills,
+  EmptyState,
+  InfoHint,
+  InlineBanner,
+  PlatformChip,
+  QuietPill,
+  WorkProgressPanel,
+  type BadgeProps,
+  type BadgeTone,
+  type CapabilityPillsProps,
+  type EmptyStateAction,
+  type EmptyStateProps,
+  type EmptyStateTone,
+  type EmptyStateVariant,
+  type InfoHintProps,
+  type InlineBannerProps,
+  type InlineBannerVariant,
+  type PlatformChipProps,
+  type PlatformChipTone,
+  type QuietPillProps,
+  type QuietPillTone,
+  type WorkProgressMetric,
+  type WorkProgressPanelProps,
+} from './components/common/feedback/index.js'
+export {
+  EvidenceDossier,
+  type EvidenceDossierProps,
+  type EvidenceFinding,
+  type EvidenceSource,
+  type EvidenceStrength,
+} from './components/common/research/index.js'
+export * from '@ant-design/icons'

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,113 @@
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react'
+import { ThemeProvider as StyledThemeProvider } from 'styled-components'
+import {
+  composePlatformTheme,
+  type PlatformThemeComposition,
+} from './composePlatformTheme.js'
+import { darkTheme } from './themes/dark.js'
+import { lightTheme } from './themes/light.js'
+import { PlatformTheme, PlatformThemeMode } from './tokens.js'
+import { injectPlatformFontStylesheet } from './platformFont.js'
+import { applyThemeToDocument } from './utils/applyTheme.js'
+import { MenuPortalLayer } from '../components/common/dropdown/MenuPortalLayer.js'
+import { GlobalStyles } from './utils/GlobalStyles.js'
+
+const STORAGE_KEY = 'platform-theme-mode'
+
+export interface PlatformThemeContextValue {
+  mode: PlatformThemeMode
+  theme: PlatformTheme
+  setMode: (mode: PlatformThemeMode) => void
+  toggleMode: () => void
+}
+
+const PlatformThemeContext = createContext<PlatformThemeContextValue | null>(
+  null,
+)
+
+function readStoredMode(): PlatformThemeMode {
+  if (typeof window === 'undefined') return 'dark'
+  const stored = window.localStorage.getItem(STORAGE_KEY)
+  return stored === 'light' || stored === 'dark' ? stored : 'dark'
+}
+
+function themeForMode(mode: PlatformThemeMode): PlatformTheme {
+  return mode === 'light' ? lightTheme : darkTheme
+}
+
+export interface ThemeProviderProps {
+  children: ReactNode
+  defaultMode?: PlatformThemeMode
+  /** Shell: active app accent + surface palette for the whole desktop window. */
+  composition?: PlatformThemeComposition
+}
+
+export function ThemeProvider({
+  children,
+  defaultMode,
+  composition,
+}: ThemeProviderProps): React.ReactElement {
+  const [mode, setModeState] = useState<PlatformThemeMode>(
+    () => defaultMode ?? readStoredMode(),
+  )
+
+  const baseTheme = useMemo(() => themeForMode(mode), [mode])
+  const theme = useMemo(
+    () => composePlatformTheme(baseTheme, composition),
+    [baseTheme, composition?.appSlug, composition?.surfacePaletteId],
+  )
+
+  useEffect(() => {
+    injectPlatformFontStylesheet()
+  }, [])
+
+  useEffect(() => {
+    applyThemeToDocument(document, theme, {
+      surfacePaletteId: composition?.surfacePaletteId,
+    })
+  }, [composition?.surfacePaletteId, theme])
+
+  const setMode = (next: PlatformThemeMode): void => {
+    setModeState(next)
+    window.localStorage.setItem(STORAGE_KEY, next)
+  }
+
+  const toggleMode = (): void => {
+    setMode(mode === 'dark' ? 'light' : 'dark')
+  }
+
+  const value = useMemo(
+    (): PlatformThemeContextValue => ({
+      mode,
+      theme,
+      setMode,
+      toggleMode,
+    }),
+    [mode, theme],
+  )
+
+  return (
+    <PlatformThemeContext.Provider value={value}>
+      <StyledThemeProvider theme={theme}>
+        <GlobalStyles />
+        <MenuPortalLayer />
+        {children}
+      </StyledThemeProvider>
+    </PlatformThemeContext.Provider>
+  )
+}
+
+export function usePlatformTheme(): PlatformThemeContextValue {
+  const ctx = useContext(PlatformThemeContext)
+  if (!ctx) {
+    throw new Error('usePlatformTheme must be used within ThemeProvider')
+  }
+  return ctx
+}

package/src/theme/appAccents.ts

@@ -0,0 +1,87 @@
+import type { PlatformTheme } from './tokens.js'
+
+/**
+ * Per-app accent identity, owned centrally by the shared UI (not by each app).
+ *
+ * The brand system assigns every app one hue ~28–32° apart so the suite reads
+ * as a family; opening a different app should feel like being "somewhere else".
+ * The shell derives each app's accent from this map and injects it into that
+ * app's theme bridge payload, so no app ships its own brand CSS.
+ */
+
+/** App slug → accent hue in degrees (PURE_BRAND_SYSTEM §2.2). */
+export const APP_ACCENT_HUES: Record<string, number> = {
+  purefiles: 70,
+  files: 70,
+  writer: 212,
+  paper: 200,
+  book: 150,
+  chat: 232,
+  tasks: 8,
+  review: 265,
+  knowledge: 38,
+  slides: 295,
+  mail: 232,
+  chart: 200,
+  reports: 325,
+  vibes: 348,
+  today: 38,
+  calendar: 175,
+  pages: 265,
+}
+
+/**
+ * Pale hues (~30–180°) need a darker accent text so it stays AA-legible on
+ * light tints — the one per-app variable besides hue (PURE_BRAND_SYSTEM §2.2).
+ */
+function accentTextLightness(hue: number): number {
+  return hue >= 30 && hue <= 180 ? 31 : 42
+}
+
+export interface DerivedAppAccent {
+  accent: string
+  accentHover: string
+  accentMuted: string
+  accentText: string
+}
+
+/** Derive the accent token set from a single hue. */
+export function deriveAppAccent(hue: number): DerivedAppAccent {
+  return {
+    accent: `hsl(${hue}, 50%, 49%)`,
+    accentHover: `hsl(${hue}, 50%, 42%)`,
+    accentMuted: `hsl(${hue}, 42%, 95%)`,
+    accentText: `hsl(${hue}, 48%, ${accentTextLightness(hue)}%)`,
+  }
+}
+
+export function appAccentForSlug(
+  slug: string | null | undefined,
+): DerivedAppAccent | null {
+  if (!slug) return null
+  const hue = APP_ACCENT_HUES[slug]
+  return typeof hue === 'number' ? deriveAppAccent(hue) : null
+}
+
+/**
+ * Overlay an app's accent hue onto the platform theme. Applies in both modes —
+ * the accent is the app's identity, used structurally (active tab, selection,
+ * focus, links), never as a data-label fill.
+ */
+export function applyAppAccentToTheme(
+  theme: PlatformTheme,
+  slug: string | null | undefined,
+): PlatformTheme {
+  const accent = appAccentForSlug(slug)
+  if (!accent) return theme
+  return {
+    ...theme,
+    colors: {
+      ...theme.colors,
+      accent: accent.accent,
+      accentHover: accent.accentHover,
+      accentMuted: accent.accentMuted,
+      focus: accent.accent,
+    },
+  }
+}

package/src/theme/buildThemeBridgePayload.ts

@@ -0,0 +1,23 @@
+import type { PlatformThemeBridgePayload } from '../bridge/types.js'
+import { themeToRootCssBlock } from './utils/cssVariables.js'
+import type { PlatformTheme } from './tokens.js'
+import { SURFACE_PALETTE_DEFAULT_ID } from './surfacePalettes.js'
+
+export function normalizeSurfacePaletteId(
+  paletteId: string | null | undefined,
+): string | null {
+  if (!paletteId || paletteId === SURFACE_PALETTE_DEFAULT_ID) return null
+  return paletteId
+}
+
+export function buildThemeBridgePayload(
+  theme: PlatformTheme,
+  surfacePaletteId?: string | null,
+): PlatformThemeBridgePayload {
+  const normalizedPaletteId = normalizeSurfacePaletteId(surfacePaletteId)
+  return {
+    mode: theme.mode,
+    surfacePaletteId: normalizedPaletteId,
+    css: themeToRootCssBlock(theme),
+  }
+}

package/src/theme/composePlatformTheme.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest'
+import { composePlatformTheme } from './composePlatformTheme.js'
+import { darkTheme } from './themes/dark.js'
+import { lightTheme } from './themes/light.js'
+
+describe('composePlatformTheme', () => {
+  it('applies writer accent and ink surface palette in light mode', () => {
+    const theme = composePlatformTheme(lightTheme, {
+      appSlug: 'writer',
+      surfacePaletteId: 'ink',
+    })
+    expect(theme.colors.appViewport).toBe('#f5f3ef')
+    expect(theme.colors.text).toBe('#2e3338')
+    expect(theme.colors.accent).toBe('#525a65')
+  })
+
+  it('applies surface palette roles in dark mode', () => {
+    const theme = composePlatformTheme(darkTheme, {
+      appSlug: 'writer',
+      surfacePaletteId: 'sepia',
+    })
+    expect(theme.colors.appViewport).toBe('#1a1814')
+    expect(theme.colors.text).toBe('#ece6dc')
+    expect(theme.colors.surface).toBe('#242019')
+  })
+
+  it('returns base theme when composition is empty', () => {
+    expect(composePlatformTheme(lightTheme)).toBe(lightTheme)
+  })
+})

package/src/theme/composePlatformTheme.ts

@@ -0,0 +1,23 @@
+import { applyAppAccentToTheme } from './appAccents.js'
+import { applySurfacePaletteToTheme } from './surfacePalettes.js'
+import type { PlatformTheme } from './tokens.js'
+
+export interface PlatformThemeComposition {
+  appSlug?: string | null
+  surfacePaletteId?: string | null
+}
+
+/** Accent + optional surface palette on top of a base light/dark theme. */
+export function composePlatformTheme(
+  base: PlatformTheme,
+  composition?: PlatformThemeComposition,
+): PlatformTheme {
+  let theme = base
+  if (composition?.appSlug) {
+    theme = applyAppAccentToTheme(theme, composition.appSlug)
+  }
+  if (composition?.surfacePaletteId) {
+    theme = applySurfacePaletteToTheme(theme, composition.surfacePaletteId)
+  }
+  return theme
+}

package/src/theme/platformFont.d.mts

@@ -0,0 +1,7 @@
+export declare const PLATFORM_FONT_FAMILY: '"Schibsted Grotesk", sans-serif'
+
+export declare const PLATFORM_FONT_STYLESHEET_ID: 'platform-font-schibsted-grotesk'
+
+export declare const PLATFORM_FONT_STYLESHEET_URL: string
+
+export function injectPlatformFontStylesheet(doc?: Document): void

package/src/theme/platformFont.mjs

@@ -0,0 +1,20 @@
+/** Shared platform UI font — loaded in shell ThemeProvider and AppFrame iframe apps. */
+export const PLATFORM_FONT_FAMILY = '"Schibsted Grotesk", sans-serif'
+
+export const PLATFORM_FONT_STYLESHEET_ID = 'platform-font-schibsted-grotesk'
+
+export const PLATFORM_FONT_STYLESHEET_URL =
+  'https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400..900;1,400..900&display=swap'
+
+/**
+ * @param {Document} [doc]
+ */
+export function injectPlatformFontStylesheet(doc = document) {
+  if (doc.getElementById(PLATFORM_FONT_STYLESHEET_ID)) return
+
+  const link = doc.createElement('link')
+  link.id = PLATFORM_FONT_STYLESHEET_ID
+  link.rel = 'stylesheet'
+  link.href = PLATFORM_FONT_STYLESHEET_URL
+  doc.head.appendChild(link)
+}

package/src/theme/platformFont.ts

@@ -0,0 +1,6 @@
+export {
+  PLATFORM_FONT_FAMILY,
+  PLATFORM_FONT_STYLESHEET_ID,
+  PLATFORM_FONT_STYLESHEET_URL,
+  injectPlatformFontStylesheet,
+} from './platformFont.mjs'

package/src/theme/reportsShellChromeSelectors.ts

@@ -0,0 +1,136 @@
+import { css } from 'styled-components'
+
+/** Reports builder chrome — designed vars, palette + dark via data attrs. */
+export const reportsShellChromeSelectors = css`
+  :not([data-platform-surface-palette]) &,
+  [data-platform-surface-palette='ink'] & {
+    --text: #2e3338;
+    --muted: #737b86;
+    --faint: #9aa2ad;
+    --accent: #525a65;
+    --bg: #f2f4f7;
+    --surface: #ffffff;
+    --surface-soft: #f7f8fa;
+    --border: #d9dee5;
+    --soft-border: #e7ebf0;
+    --report-desk: #f5f3ef;
+  }
+
+  [data-platform-surface-palette='sepia'] & {
+    --text: #3a342c;
+    --muted: #7d7468;
+    --faint: #a89e90;
+    --accent: #6b5d49;
+    --bg: #f2f0eb;
+    --surface: #fffdf6;
+    --surface-soft: #f4efe6;
+    --border: #d9dee5;
+    --soft-border: #e7ebf0;
+    --report-desk: #f4efe6;
+  }
+
+  [data-platform-surface-palette='slate'] & {
+    --text: #2b323c;
+    --muted: #6e7a88;
+    --faint: #97a2af;
+    --accent: #4d6378;
+    --bg: #eef1f4;
+    --surface: #fdfeff;
+    --surface-soft: #f7f8fa;
+    --border: #d9dee5;
+    --soft-border: #e7ebf0;
+    --report-desk: #eef1f4;
+  }
+
+  [data-platform-surface-palette='forest'] & {
+    --text: #2d352f;
+    --muted: #6f7b72;
+    --faint: #98a39b;
+    --accent: #4e6b58;
+    --bg: #eff2ee;
+    --surface: #fdfffd;
+    --surface-soft: #f7f8fa;
+    --border: #d9dee5;
+    --soft-border: #e7ebf0;
+    --report-desk: #eff2ee;
+  }
+
+  [data-platform-surface-palette='plum'] & {
+    --text: #342e38;
+    --muted: #7a7280;
+    --faint: #a59dab;
+    --accent: #66506e;
+    --bg: #f3f0f4;
+    --surface: #fffdff;
+    --surface-soft: #f7f8fa;
+    --border: #d9dee5;
+    --soft-border: #e7ebf0;
+    --report-desk: #f3f0f4;
+  }
+
+  [data-platform-theme='dark']:not([data-platform-surface-palette]) &,
+  [data-platform-theme='dark'][data-platform-surface-palette='ink'] & {
+    --text: #e8eaed;
+    --muted: #9aa2ad;
+    --faint: #6e7681;
+    --accent: #8a929d;
+    --bg: #141618;
+    --surface: #1c1f23;
+    --surface-soft: #20242a;
+    --border: #2a2f36;
+    --soft-border: #252a31;
+    --report-desk: #141618;
+  }
+
+  [data-platform-theme='dark'][data-platform-surface-palette='sepia'] & {
+    --text: #ece6dc;
+    --muted: #a89e90;
+    --faint: #7d7468;
+    --accent: #9a8468;
+    --bg: #1a1814;
+    --surface: #242019;
+    --surface-soft: #242019;
+    --border: #2a2f36;
+    --soft-border: #252a31;
+    --report-desk: #1a1814;
+  }
+
+  [data-platform-theme='dark'][data-platform-surface-palette='slate'] & {
+    --text: #e3e8ef;
+    --muted: #97a2af;
+    --faint: #6e7a88;
+    --accent: #7a94ad;
+    --bg: #13171c;
+    --surface: #1a2028;
+    --surface-soft: #1a2028;
+    --border: #2a2f36;
+    --soft-border: #252a31;
+    --report-desk: #13171c;
+  }
+
+  [data-platform-theme='dark'][data-platform-surface-palette='forest'] & {
+    --text: #e2ebe4;
+    --muted: #98a39b;
+    --faint: #6f7b72;
+    --accent: #6d9479;
+    --bg: #141916;
+    --surface: #1b221d;
+    --surface-soft: #1b221d;
+    --border: #2a2f36;
+    --soft-border: #252a31;
+    --report-desk: #141916;
+  }
+
+  [data-platform-theme='dark'][data-platform-surface-palette='plum'] & {
+    --text: #ebe6ef;
+    --muted: #a59dab;
+    --faint: #7a7280;
+    --accent: #8f74a0;
+    --bg: #17141a;
+    --surface: #201c24;
+    --surface-soft: #201c24;
+    --border: #2a2f36;
+    --soft-border: #252a31;
+    --report-desk: #17141a;
+  }
+`

package/src/theme/styled.d.ts

@@ -0,0 +1,5 @@
+import type { PlatformTheme } from './tokens.ts'
+
+declare module 'styled-components' {
+  export interface DefaultTheme extends PlatformTheme {}
+}