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

package/src/index.ts

@@ -1,209 +1,231 @@
-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'
+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 {
+  PURE_APP_AGENT_CONNECTOR_HANDLES,
+  PURE_APP_AGENT_CONNECTORS,
+  findPureAppAgentConnector,
+  type PureAppAgentConnector,
+} from './agents/appAgentConnectors.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 {
+  OpenReviewCard,
+  OpenReviewCardIcon,
+  type OpenReviewCardProps,
+} from './components/common/cards/index.js'
+export {
+  NavigationCardList,
+  NavigationCardRow,
+  PathBreadcrumbs,
+  UnderlineTabs,
+  type NavigationCardRowProps,
+  type PathBreadcrumbItem,
+  type PathBreadcrumbsProps,
+  type UnderlineTabItem,
+  type UnderlineTabsProps,
+} from './components/common/navigation/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

@@ -1,113 +1,115 @@
-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
-}
+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 { syncPlatformThemeDocumentAttrs } 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(() => {
+    syncPlatformThemeDocumentAttrs(
+      document,
+      mode,
+      composition?.surfacePaletteId,
+    )
+  }, [composition?.surfacePaletteId, mode])
+
+  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
+}