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

package/src/theme/utils/appFrameDocumentStyles.mjs

@@ -1,89 +1,89 @@
-/** Injected once per iframe document by AppFrame / applyThemeFromHost. */
-import { injectPlatformFontStylesheet } from '../platformFont.mjs'
-
-export const PLATFORM_APP_FRAME_BASE_STYLE_ID = 'platform-app-frame-base'
-
-export const APP_FRAME_DOCUMENT_STYLES_CSS = `
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  html,
-  body,
-  #root {
-    height: 100%;
-    width: 100%;
-    margin: 0;
-  }
-
-  body {
-    overflow: hidden;
-    font-family: var(--platform-typography-font-family, system-ui, sans-serif);
-    font-size: var(--platform-typography-font-size-base);
-    line-height: var(--platform-typography-line-height-base);
-    color: var(--platform-colors-text);
-    background: var(--platform-colors-app-viewport);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  ::selection {
-    background: var(--platform-colors-selection);
-  }
-
-  button {
-    font: inherit;
-    color: inherit;
-    cursor: pointer;
-    border: none;
-    background: none;
-  }
-
-  a {
-    color: var(--platform-colors-accent);
-    text-decoration: none;
-  }
-
-  a:hover {
-    text-decoration: underline;
-  }
-
-  * {
-    scrollbar-width: thin;
-    scrollbar-color: var(--platform-colors-border) transparent;
-  }
-
-  *::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-
-  *::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  *::-webkit-scrollbar-thumb {
-    background-color: var(--platform-colors-border);
-    border-radius: 999px;
-  }
-
-  *::-webkit-scrollbar-thumb:hover {
-    background-color: var(--platform-colors-border-strong);
-  }
-`
-
-/**
- * @param {Document} [doc]
- */
-export function injectAppFrameDocumentStyles(doc = document) {
-  if (doc.getElementById(PLATFORM_APP_FRAME_BASE_STYLE_ID)) return
-
-  injectPlatformFontStylesheet(doc)
-
-  const el = doc.createElement('style')
-  el.id = PLATFORM_APP_FRAME_BASE_STYLE_ID
-  el.textContent = APP_FRAME_DOCUMENT_STYLES_CSS
-  doc.head.appendChild(el)
-}
+/** Injected once per iframe document by AppFrame / applyThemeFromHost. */
+import { injectPlatformFontStylesheet } from '../platformFont.mjs'
+
+export const PLATFORM_APP_FRAME_BASE_STYLE_ID = 'platform-app-frame-base'
+
+export const APP_FRAME_DOCUMENT_STYLES_CSS = `
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  html,
+  body,
+  #root {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+  }
+
+  body {
+    overflow: hidden;
+    font-family: var(--platform-typography-font-family, system-ui, sans-serif);
+    font-size: var(--platform-typography-font-size-base);
+    line-height: var(--platform-typography-line-height-base);
+    color: var(--platform-colors-text);
+    background: var(--platform-colors-app-viewport);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  ::selection {
+    background: var(--platform-colors-selection);
+  }
+
+  button {
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+    border: none;
+    background: none;
+  }
+
+  a {
+    color: var(--platform-colors-accent);
+    text-decoration: none;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--platform-colors-border) transparent;
+  }
+
+  *::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background-color: var(--platform-colors-border);
+    border-radius: 999px;
+  }
+
+  *::-webkit-scrollbar-thumb:hover {
+    background-color: var(--platform-colors-border-strong);
+  }
+`
+
+/**
+ * @param {Document} [doc]
+ */
+export function injectAppFrameDocumentStyles(doc = document) {
+  if (doc.getElementById(PLATFORM_APP_FRAME_BASE_STYLE_ID)) return
+
+  injectPlatformFontStylesheet(doc)
+
+  const el = doc.createElement('style')
+  el.id = PLATFORM_APP_FRAME_BASE_STYLE_ID
+  el.textContent = APP_FRAME_DOCUMENT_STYLES_CSS
+  doc.head.appendChild(el)
+}

package/src/theme/utils/appFrameDocumentStyles.ts

@@ -1,5 +1,5 @@
-export {
-  APP_FRAME_DOCUMENT_STYLES_CSS,
-  PLATFORM_APP_FRAME_BASE_STYLE_ID,
-  injectAppFrameDocumentStyles,
-} from './appFrameDocumentStyles.mjs'
+export {
+  APP_FRAME_DOCUMENT_STYLES_CSS,
+  PLATFORM_APP_FRAME_BASE_STYLE_ID,
+  injectAppFrameDocumentStyles,
+} from './appFrameDocumentStyles.mjs'

package/src/theme/utils/applyTheme.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest'
+import { syncPlatformThemeDocumentAttrs } from './applyTheme.js'
+
+describe('syncPlatformThemeDocumentAttrs', () => {
+  it('sets mode and palette on documentElement', () => {
+    const doc = document.implementation.createHTMLDocument('test')
+    syncPlatformThemeDocumentAttrs(doc, 'dark', 'sepia')
+    expect(doc.documentElement.dataset.platformTheme).toBe('dark')
+    expect(doc.documentElement.dataset.platformSurfacePalette).toBe('sepia')
+  })
+
+  it('clears palette when default or empty', () => {
+    const doc = document.implementation.createHTMLDocument('test')
+    doc.documentElement.dataset.platformSurfacePalette = 'ink'
+    syncPlatformThemeDocumentAttrs(doc, 'light', 'default')
+    expect(doc.documentElement.dataset.platformTheme).toBe('light')
+    expect(doc.documentElement.dataset.platformSurfacePalette).toBeUndefined()
+  })
+})

package/src/theme/utils/applyTheme.ts

@@ -1,50 +1,59 @@
-import { normalizeSurfacePaletteId } from '../buildThemeBridgePayload.js'
-import { PlatformTheme } from '../tokens.js'
-import {
-  PLATFORM_THEME_PREFIX,
-  themeToCssVars,
-  themeToRootCssBlock,
-} from './cssVariables.js'
-
-const ROOT_STYLE_ID = 'platform-theme-vars'
-
-/** Apply theme CSS variables to a document (shell root or plugin iframe). */
-export function applyThemeToDocument(
-  doc: Document,
-  theme: PlatformTheme,
-  options?: {
-    selector?: string
-    styleId?: string
-    surfacePaletteId?: string | null
-  },
-): void {
-  const selector = options?.selector ?? ':root'
-  const styleId = options?.styleId ?? ROOT_STYLE_ID
-  const css = themeToRootCssBlock(theme, selector, PLATFORM_THEME_PREFIX)
-
-  let el = doc.getElementById(styleId)
-  if (!el) {
-    el = doc.createElement('style')
-    el.id = styleId
-    doc.head.appendChild(el)
-  }
-  el.textContent = css
-
-  const root = doc.documentElement
-  root.dataset.platformTheme = theme.mode
-
-  const paletteId = normalizeSurfacePaletteId(options?.surfacePaletteId)
-  if (paletteId) {
-    root.dataset.platformSurfacePalette = paletteId
-  } else {
-    delete root.dataset.platformSurfacePalette
-  }
-}
-
-/** Serialized vars only (e.g. inline style on a host element). */
-export function themeToInlineStyle(
-  theme: PlatformTheme,
-  prefix = PLATFORM_THEME_PREFIX,
-): string {
-  return themeToCssVars(theme, prefix).replace(/\n/g, ' ')
-}
+import { normalizeSurfacePaletteId } from '../buildThemeBridgePayload.js'
+import type { PlatformTheme, PlatformThemeMode } from '../tokens.js'
+import {
+  PLATFORM_THEME_PREFIX,
+  themeToCssVars,
+  themeToRootCssBlock,
+} from './cssVariables.js'
+
+const DEFAULT_IFRAME_THEME_STYLE_ID = 'platform-theme-vars-embedded'
+
+/** `data-platform-*` on `<html>` for selectors (e.g. PureAppWordmark). */
+export function syncPlatformThemeDocumentAttrs(
+  doc: Document,
+  mode: PlatformThemeMode,
+  surfacePaletteId?: string | null,
+): void {
+  const root = doc.documentElement
+  root.dataset.platformTheme = mode
+
+  const paletteId = normalizeSurfacePaletteId(surfacePaletteId)
+  if (paletteId) {
+    root.dataset.platformSurfacePalette = paletteId
+  } else {
+    delete root.dataset.platformSurfacePalette
+  }
+}
+
+/** Inject theme CSS variables into a plugin iframe document (same-origin). */
+export function applyThemeToDocument(
+  doc: Document,
+  theme: PlatformTheme,
+  options?: {
+    selector?: string
+    styleId?: string
+    surfacePaletteId?: string | null
+  },
+): void {
+  const selector = options?.selector ?? ':root'
+  const styleId = options?.styleId ?? DEFAULT_IFRAME_THEME_STYLE_ID
+  const css = themeToRootCssBlock(theme, selector, PLATFORM_THEME_PREFIX)
+
+  let el = doc.getElementById(styleId)
+  if (!el) {
+    el = doc.createElement('style')
+    el.id = styleId
+    doc.head.appendChild(el)
+  }
+  el.textContent = css
+
+  syncPlatformThemeDocumentAttrs(doc, theme.mode, options?.surfacePaletteId)
+}
+
+/** Serialized vars only (e.g. inline style on a host element). */
+export function themeToInlineStyle(
+  theme: PlatformTheme,
+  prefix = PLATFORM_THEME_PREFIX,
+): string {
+  return themeToCssVars(theme, prefix).replace(/\n/g, ' ')
+}

package/src/theme/utils/cssVariables.ts

@@ -1,49 +1,49 @@
-import { PlatformTheme } from '../tokens.js'
-
-export const PLATFORM_THEME_PREFIX = 'platform'
-
-/** "accentMuted" → "accent-muted" */
-export function camelToCssVarKey(segment: string): string {
-  return segment.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)
-}
-
-/**
- * Flatten a theme object into CSS custom property declarations.
- *
- * @example
- * themeToCssVars(darkTheme)
- * // "--platform-colors-bg: #0f1419;\n--platform-spacing-md: 16px;"
- */
-export function themeToCssVars(
-  theme: PlatformTheme,
-  prefix = PLATFORM_THEME_PREFIX,
-): string {
-  const lines: string[] = []
-
-  function walk(obj: Record<string, unknown>, path: string[]): void {
-    for (const [key, value] of Object.entries(obj)) {
-      const varPath = [...path, camelToCssVarKey(key)]
-      if (
-        value !== null &&
-        typeof value === 'object' &&
-        !Array.isArray(value)
-      ) {
-        walk(value as Record<string, unknown>, varPath)
-      } else {
-        lines.push(`--${prefix}-${varPath.join('-')}: ${value};`)
-      }
-    }
-  }
-
-  walk(theme as unknown as Record<string, unknown>, [])
-  return lines.join('\n')
-}
-
-/** Full `:root { … }` block for document or iframe injection. */
-export function themeToRootCssBlock(
-  theme: PlatformTheme,
-  selector = ':root',
-  prefix = PLATFORM_THEME_PREFIX,
-): string {
-  return `${selector} {\n${themeToCssVars(theme, prefix)}\n}`
-}
+import { PlatformTheme } from '../tokens.js'
+
+export const PLATFORM_THEME_PREFIX = 'platform'
+
+/** "accentMuted" → "accent-muted" */
+export function camelToCssVarKey(segment: string): string {
+  return segment.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)
+}
+
+/**
+ * Flatten a theme object into CSS custom property declarations.
+ *
+ * @example
+ * themeToCssVars(darkTheme)
+ * // "--platform-colors-bg: #0f1419;\n--platform-spacing-md: 16px;"
+ */
+export function themeToCssVars(
+  theme: PlatformTheme,
+  prefix = PLATFORM_THEME_PREFIX,
+): string {
+  const lines: string[] = []
+
+  function walk(obj: Record<string, unknown>, path: string[]): void {
+    for (const [key, value] of Object.entries(obj)) {
+      const varPath = [...path, camelToCssVarKey(key)]
+      if (
+        value !== null &&
+        typeof value === 'object' &&
+        !Array.isArray(value)
+      ) {
+        walk(value as Record<string, unknown>, varPath)
+      } else {
+        lines.push(`--${prefix}-${varPath.join('-')}: ${value};`)
+      }
+    }
+  }
+
+  walk(theme as unknown as Record<string, unknown>, [])
+  return lines.join('\n')
+}
+
+/** Full `:root { … }` block for document or iframe injection. */
+export function themeToRootCssBlock(
+  theme: PlatformTheme,
+  selector = ':root',
+  prefix = PLATFORM_THEME_PREFIX,
+): string {
+  return `${selector} {\n${themeToCssVars(theme, prefix)}\n}`
+}

package/src/theme/utils/useInjectThemeIntoIframe.ts

@@ -1,40 +1,40 @@
-import { useEffect, type RefObject } from 'react'
-import { applyThemeToDocument } from './applyTheme.js'
-import type { PlatformTheme } from '../tokens.js'
-
-const IFRAME_THEME_STYLE_ID = 'platform-theme-vars-embedded'
-
-/**
- * Mirrors the active shell theme into an embedded app iframe via CSS variables.
- * Works only when parent and iframe are same-origin (e.g. module entrypoints).
- * Dev-url plugins on another port are cross-origin — use bridge `theme.changed`
- * and `applyThemeFromHost` / `usePlatformThemeFromBridge` instead.
- */
-export function useInjectThemeIntoIframe(
-  iframeRef: RefObject<HTMLIFrameElement | null>,
-  theme: PlatformTheme,
-  enabled: boolean,
-): void {
-  useEffect(() => {
-    if (!enabled) return
-
-    const iframe = iframeRef.current
-    if (!iframe) return
-
-    const apply = (): void => {
-      const doc = iframe.contentDocument
-      if (!doc) return
-      applyThemeToDocument(doc, theme, {
-        selector: ':root',
-        styleId: IFRAME_THEME_STYLE_ID,
-      })
-    }
-
-    iframe.addEventListener('load', apply)
-    apply()
-
-    return () => {
-      iframe.removeEventListener('load', apply)
-    }
-  }, [iframeRef, theme, enabled])
-}
+import { useEffect, type RefObject } from 'react'
+import { applyThemeToDocument } from './applyTheme.js'
+import type { PlatformTheme } from '../tokens.js'
+
+const IFRAME_THEME_STYLE_ID = 'platform-theme-vars-embedded'
+
+/**
+ * Mirrors the active shell theme into an embedded app iframe via CSS variables.
+ * Works only when parent and iframe are same-origin (e.g. module entrypoints).
+ * Dev-url plugins on another port are cross-origin — use bridge `theme.changed`
+ * and `applyThemeFromHost` / `usePlatformThemeFromBridge` instead.
+ */
+export function useInjectThemeIntoIframe(
+  iframeRef: RefObject<HTMLIFrameElement | null>,
+  theme: PlatformTheme,
+  enabled: boolean,
+): void {
+  useEffect(() => {
+    if (!enabled) return
+
+    const iframe = iframeRef.current
+    if (!iframe) return
+
+    const apply = (): void => {
+      const doc = iframe.contentDocument
+      if (!doc) return
+      applyThemeToDocument(doc, theme, {
+        selector: ':root',
+        styleId: IFRAME_THEME_STYLE_ID,
+      })
+    }
+
+    iframe.addEventListener('load', apply)
+    apply()
+
+    return () => {
+      iframe.removeEventListener('load', apply)
+    }
+  }, [iframeRef, theme, enabled])
+}