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

package/src/components/chrome/PlatformIcon.tsx

@@ -1,27 +1,27 @@
-import type { LucideIcon } from 'lucide-react'
-
-export interface PlatformIconProps {
-  icon: LucideIcon
-  /** Pixel size (width and height). */
-  size?: number
-  strokeWidth?: number
-  className?: string
-}
-
-/** Lucide wrapper — uses `currentColor` from parent. */
-export function PlatformIcon({
-  icon: Icon,
-  size = 16,
-  strokeWidth = 1.75,
-  className,
-}: PlatformIconProps): React.ReactElement {
-  return (
-    <Icon
-      size={size}
-      strokeWidth={strokeWidth}
-      className={className}
-      aria-hidden
-      focusable={false}
-    />
-  )
-}
+import type { LucideIcon } from 'lucide-react'
+
+export interface PlatformIconProps {
+  icon: LucideIcon
+  /** Pixel size (width and height). */
+  size?: number
+  strokeWidth?: number
+  className?: string
+}
+
+/** Lucide wrapper — uses `currentColor` from parent. */
+export function PlatformIcon({
+  icon: Icon,
+  size = 16,
+  strokeWidth = 1.75,
+  className,
+}: PlatformIconProps): React.ReactElement {
+  return (
+    <Icon
+      size={size}
+      strokeWidth={strokeWidth}
+      className={className}
+      aria-hidden
+      focusable={false}
+    />
+  )
+}

package/src/components/chrome/PureAppWordmark.tsx

@@ -1,89 +1,94 @@
-import type React from 'react'
-import { styled } from 'styled-components'
-
-export interface PureAppWordmarkProps
-  extends React.HTMLAttributes<HTMLSpanElement> {
-  appName: string
-  prefix?: string
-  size?: 'sm' | 'md' | 'lg' | 'xl' | 'display'
-  /** Set the app word in the app's accent colour (in-app identity moments). */
-  accentName?: boolean
-}
-
-const sizeStyles = {
-  sm: { fontSize: '14px', fontWeight: 500 },
-  md: { fontSize: '20px', fontWeight: 500 },
-  lg: { fontSize: '28px', fontWeight: 600 },
-  xl: { fontSize: '44px', fontWeight: 600 },
-  display: { fontSize: '64px', fontWeight: 600 },
-} as const
-
-const StyledWordmark = styled.span<{
-  $size: keyof typeof sizeStyles
-}>`
-  --wm-font: 'Geist', system-ui, sans-serif;
-  --wm-prefix: #8a8f98;
-  --wm-name: #2e3338;
-
-  display: inline;
-  min-width: 0;
-  font-family: var(--wm-font);
-  font-size: ${({ $size }) => sizeStyles[$size].fontSize};
-  font-weight: ${({ $size }) => sizeStyles[$size].fontWeight};
-  line-height: 1.1;
-  letter-spacing: 0;
-  text-transform: lowercase;
-  white-space: nowrap;
-
-  html[data-platform-theme='dark'] & {
-    --wm-prefix: #7c828b;
-    --wm-name: #f4f4f2;
-  }
-`
-
-/**
- * The lockup contrast comes from weight and colour, never size: a light grey
- * "pure" beside the app word, both on one line at one size.
- */
-const StyledPrefix = styled.span`
-  color: var(--wm-prefix);
-  font-weight: 300;
-  letter-spacing: 0.01em;
-`
-
-const StyledName = styled.span<{ $accent: boolean }>`
-  min-width: 0;
-  overflow: hidden;
-  color: ${({ $accent }) =>
-    $accent
-      ? 'var(--platform-colors-accent, var(--wm-name))'
-      : 'var(--wm-name)'};
-  text-overflow: ellipsis;
-`
-
-function normalizeWordmarkPart(value: string): string {
-  return value
-    .trim()
-    .replace(/^(?:(?:pure|ps)[.\s_-]*)+/i, '')
-    .toLowerCase()
-}
-
-export function PureAppWordmark({
-  appName,
-  prefix = 'pure',
-  size = 'md',
-  accentName = false,
-  ...wordmarkProps
-}: PureAppWordmarkProps): React.ReactElement {
-  const normalizedPrefix = normalizeWordmarkPart(prefix) || 'pure'
-  const normalizedName = normalizeWordmarkPart(appName)
-
-  return (
-    <StyledWordmark {...wordmarkProps} $size={size}>
-      <StyledPrefix>{normalizedPrefix}</StyledPrefix>{' '}
-      <StyledName $accent={accentName}>
-        {normalizedName}
-      </StyledName>
-    </StyledWordmark>
-  )
-}
+import type React from 'react'
+import { styled } from 'styled-components'
+
+export interface PureAppWordmarkProps
+  extends React.HTMLAttributes<HTMLSpanElement> {
+  appName: string
+  prefix?: string
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'display'
+  /** Set the app word in the app's accent colour (in-app identity moments). */
+  accentName?: boolean
+}
+
+const sizeStyles = {
+  sm: { fontSize: '14px', fontWeight: 500 },
+  md: { fontSize: '20px', fontWeight: 500 },
+  lg: { fontSize: '28px', fontWeight: 600 },
+  xl: { fontSize: '44px', fontWeight: 600 },
+  display: { fontSize: '64px', fontWeight: 600 },
+} as const
+
+const StyledWordmark = styled.span<{
+  $size: keyof typeof sizeStyles
+}>`
+  --wm-font: 'Geist', system-ui, sans-serif;
+  --wm-prefix: #68717c;
+  --wm-name: #2e3338;
+
+  display: inline;
+  min-width: 0;
+  font-family: var(--wm-font);
+  font-size: ${({ $size }) => sizeStyles[$size].fontSize};
+  font-weight: ${({ $size }) => sizeStyles[$size].fontWeight};
+  line-height: 1.1;
+  letter-spacing: 0;
+  text-transform: lowercase;
+  white-space: nowrap;
+
+  html[data-platform-theme='dark'] & {
+    --wm-prefix: #858c96;
+    --wm-name: #f4f4f2;
+  }
+`
+
+/**
+ * The lockup contrast comes from weight and colour, never size: a light grey
+ * "pure" beside the app word, both on one line at one size.
+ */
+const StyledPrefix = styled.span`
+  color: var(--wm-prefix);
+  font-weight: 300;
+  letter-spacing: 0.01em;
+`
+
+const StyledName = styled.span<{ $accent: boolean }>`
+  min-width: 0;
+  overflow: hidden;
+  color: ${({ $accent }) =>
+    $accent
+      ? 'color-mix(in srgb, var(--platform-colors-accent, var(--wm-name)) 54%, var(--wm-name) 46%)'
+      : 'var(--wm-name)'};
+  text-overflow: ellipsis;
+
+  html[data-platform-theme='dark'] & {
+    color: ${({ $accent }) =>
+      $accent
+        ? 'color-mix(in srgb, var(--platform-colors-accent, var(--wm-name)) 46%, var(--platform-colors-text, #f4f4f2) 54%)'
+        : 'var(--wm-name)'};
+  }
+`
+
+function normalizeWordmarkPart(value: string): string {
+  return value
+    .trim()
+    .replace(/^(?:(?:pure|ps)[.\s_-]*)+/i, '')
+    .toLowerCase()
+}
+
+export function PureAppWordmark({
+  appName,
+  prefix = 'pure',
+  size = 'md',
+  accentName = false,
+  ...wordmarkProps
+}: PureAppWordmarkProps): React.ReactElement {
+  const normalizedPrefix = normalizeWordmarkPart(prefix) || 'pure'
+  const normalizedName = normalizeWordmarkPart(appName)
+
+  return (
+    <StyledWordmark {...wordmarkProps} $size={size}>
+      <StyledPrefix>{normalizedPrefix}</StyledPrefix>{' '}
+      <StyledName $accent={accentName}>{normalizedName}</StyledName>
+    </StyledWordmark>
+  )
+}

package/src/components/chrome/ShellWindowControls.tsx

@@ -1,51 +1,58 @@
-import { Minus, Square, X } from 'lucide-react'
-import { styled } from 'styled-components'
-import { PlatformIcon } from './PlatformIcon.js'
-import {
-  OverlayActionCapsule,
-  OverlayActionCapsuleCloseButton,
-  OverlayActionCapsuleIconButton,
-} from './OverlayActionCapsule.js'
-
-export interface ShellWindowControlsProps {
-  onMinimize: () => void
-  onMaximize: () => void
-  onClose: () => void
-}
-
-const StyledTitlebarCapsule = styled(OverlayActionCapsule)`
-  gap: 0.125em;
-  padding: 0.125em;
-`
-
-export function ShellWindowControls({
-  onMinimize,
-  onMaximize,
-  onClose,
-}: ShellWindowControlsProps): React.ReactElement {
-  return (
-    <StyledTitlebarCapsule>
-      <OverlayActionCapsuleIconButton
-        aria-label="Minimize"
-        title="Minimize"
-        onClick={onMinimize}
-      >
-        <PlatformIcon icon={Minus} size={14} strokeWidth={2} />
-      </OverlayActionCapsuleIconButton>
-      <OverlayActionCapsuleIconButton
-        aria-label="Maximize"
-        title="Maximize"
-        onClick={onMaximize}
-      >
-        <PlatformIcon icon={Square} size={12} strokeWidth={1.75} />
-      </OverlayActionCapsuleIconButton>
-      <OverlayActionCapsuleCloseButton
-        aria-label="Close"
-        title="Close"
-        onClick={onClose}
-      >
-        <PlatformIcon icon={X} size={14} strokeWidth={2} />
-      </OverlayActionCapsuleCloseButton>
-    </StyledTitlebarCapsule>
-  )
-}
+import { Minus, Square, X } from 'lucide-react'
+import { styled } from 'styled-components'
+import { PlatformIcon } from './PlatformIcon.js'
+import {
+  OverlayActionCapsule,
+  OverlayActionCapsuleCloseButton,
+  OverlayActionCapsuleIconButton,
+} from './OverlayActionCapsule.js'
+
+export interface ShellWindowControlsProps {
+  onMinimize: () => void
+  onMaximize: () => void
+  onClose: () => void
+}
+
+const StyledTitlebarCapsule = styled(OverlayActionCapsule)`
+  gap: 0.125em;
+  padding: 0.125em;
+  background-color: transparent;
+  box-shadow: none;
+  border-color: transparent;
+`
+
+export function ShellWindowControls({
+  onMinimize,
+  onMaximize,
+  onClose,
+}: ShellWindowControlsProps): React.ReactElement {
+  return (
+    <StyledTitlebarCapsule>
+      <OverlayActionCapsuleIconButton
+        aria-label="Minimize"
+        title="Minimize"
+        onClick={onMinimize}
+      >
+        <PlatformIcon icon={Minus} size={14} strokeWidth={2} />
+      </OverlayActionCapsuleIconButton>
+      <OverlayActionCapsuleIconButton
+        aria-label="Maximize"
+        title="Maximize"
+        onClick={onMaximize}
+      >
+        <PlatformIcon icon={Square} size={12} strokeWidth={1.75} />
+      </OverlayActionCapsuleIconButton>
+      <OverlayActionCapsuleCloseButton
+        style={{
+          backgroundColor: 'transparent',
+          color: 'var(--platform-colors-text',
+        }}
+        aria-label="Close"
+        title="Close"
+        onClick={onClose}
+      >
+        <PlatformIcon icon={X} size={14} strokeWidth={2} />
+      </OverlayActionCapsuleCloseButton>
+    </StyledTitlebarCapsule>
+  )
+}

package/src/components/chrome/ThemeModeButton.tsx

@@ -1,16 +1,16 @@
-import { Moon, Sun } from 'lucide-react'
-import { IconButton } from '../common/buttons/IconButton.js'
-import { usePlatformTheme } from '../../theme/ThemeProvider.js'
-import { PlatformIcon } from './PlatformIcon.js'
-
-export function ThemeModeButton(): React.ReactElement {
-  const { mode, toggleMode } = usePlatformTheme()
-  const isDark = mode === 'dark'
-  const label = isDark ? 'Switch to light theme' : 'Switch to dark theme'
-
-  return (
-    <IconButton size="sm" title={label} aria-label={label} onClick={toggleMode}>
-      <PlatformIcon icon={isDark ? Sun : Moon} size={16} strokeWidth={1.75} />
-    </IconButton>
-  )
-}
+import { Moon, Sun } from 'lucide-react'
+import { IconButton } from '../common/buttons/IconButton.js'
+import { usePlatformTheme } from '../../theme/ThemeProvider.js'
+import { PlatformIcon } from './PlatformIcon.js'
+
+export function ThemeModeButton(): React.ReactElement {
+  const { mode, toggleMode } = usePlatformTheme()
+  const isDark = mode === 'dark'
+  const label = isDark ? 'Switch to light theme' : 'Switch to dark theme'
+
+  return (
+    <IconButton size="sm" title={label} aria-label={label} onClick={toggleMode}>
+      <PlatformIcon icon={isDark ? Sun : Moon} size={16} strokeWidth={1.75} />
+    </IconButton>
+  )
+}

package/src/components/chrome/Titlebar.tsx

@@ -1,79 +1,79 @@
-import { styled } from 'styled-components'
-import { zi } from '../../theme/themeVars.js'
-
-export interface TitlebarProps {
-  leading?: React.ReactNode
-  trailing?: React.ReactNode
-  /** Second row — workspace tab strip (shell). */
-  tabStrip?: React.ReactNode
-  /**
-   * Second row fallback when `tabStrip` is omitted (legacy: full-width menu bar).
-   * Shell phase 4 moves menus into `leading` and uses `tabStrip` instead.
-   */
-  menubar?: React.ReactNode
-}
-
-//#region styled-components
-
-const StyledChrome = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  flex-shrink: 0;
-  -webkit-app-region: drag;
-  user-select: none;
-`
-
-const StyledRow = styled.header`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: 30px;
-  box-sizing: border-box;
-  background: var(--platform-colors-chrome-titlebar);
-  border-bottom: 1px solid var(--platform-colors-border);
-  padding: 0 2px 0 0;
-`
-
-const StyledLeading = styled.div`
-  display: flex;
-  align-items: center;
-  gap: var(--platform-spacing-sm);
-  min-width: 0;
-  -webkit-app-region: no-drag;
-`
-
-const StyledTrailing = styled.div`
-  display: flex;
-  align-items: stretch;
-  gap: var(--platform-spacing-sm);
-  flex-shrink: 0;
-  height: 100%;
-  -webkit-app-region: no-drag;
-`
-
-const StyledSecondRow = styled.div`
-  width: 100%;
-  min-width: 0;
-`
-
-//#endregion
-
-export function Titlebar({
-  leading,
-  trailing,
-  tabStrip,
-  menubar,
-}: TitlebarProps): React.ReactElement {
-  const secondRow = tabStrip ?? menubar
-  return (
-    <StyledChrome>
-      <StyledRow>
-        {leading ? <StyledLeading>{leading}</StyledLeading> : null}
-        {trailing ? <StyledTrailing>{trailing}</StyledTrailing> : null}
-      </StyledRow>
-      {secondRow ? <StyledSecondRow>{secondRow}</StyledSecondRow> : null}
-    </StyledChrome>
-  )
-}
+import { styled } from 'styled-components'
+import { zi } from '../../theme/themeVars.js'
+
+export interface TitlebarProps {
+  leading?: React.ReactNode
+  trailing?: React.ReactNode
+  /** Second row — workspace tab strip (shell). */
+  tabStrip?: React.ReactNode
+  /**
+   * Second row fallback when `tabStrip` is omitted (legacy: full-width menu bar).
+   * Shell phase 4 moves menus into `leading` and uses `tabStrip` instead.
+   */
+  menubar?: React.ReactNode
+}
+
+//#region styled-components
+
+const StyledChrome = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  flex-shrink: 0;
+  -webkit-app-region: drag;
+  user-select: none;
+`
+
+const StyledRow = styled.header`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 30px;
+  box-sizing: border-box;
+  background: var(--platform-colors-chrome-titlebar);
+  border-bottom: 1px solid var(--platform-colors-border);
+  padding: 0 2px 0 0;
+`
+
+const StyledLeading = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--platform-spacing-sm);
+  min-width: 0;
+  -webkit-app-region: no-drag;
+`
+
+const StyledTrailing = styled.div`
+  display: flex;
+  align-items: stretch;
+  gap: var(--platform-spacing-sm);
+  flex-shrink: 0;
+  height: 100%;
+  -webkit-app-region: no-drag;
+`
+
+const StyledSecondRow = styled.div`
+  width: 100%;
+  min-width: 0;
+`
+
+//#endregion
+
+export function Titlebar({
+  leading,
+  trailing,
+  tabStrip,
+  menubar,
+}: TitlebarProps): React.ReactElement {
+  const secondRow = tabStrip ?? menubar
+  return (
+    <StyledChrome>
+      <StyledRow>
+        {leading ? <StyledLeading>{leading}</StyledLeading> : null}
+        {trailing ? <StyledTrailing>{trailing}</StyledTrailing> : null}
+      </StyledRow>
+      {secondRow ? <StyledSecondRow>{secondRow}</StyledSecondRow> : null}
+    </StyledChrome>
+  )
+}