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

package/src/components/chrome/PureAppWordmark.tsx

@@ -0,0 +1,89 @@
+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>
+  )
+}

package/src/components/chrome/ShellWindowControls.tsx

@@ -0,0 +1,51 @@
+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>
+  )
+}

package/src/components/chrome/ThemeModeButton.tsx

@@ -0,0 +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>
+  )
+}

package/src/components/chrome/Titlebar.tsx

@@ -0,0 +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>
+  )
+}

package/src/components/chrome/WorkspaceTabStrip.tsx

@@ -0,0 +1,300 @@
+import { useRef, useState } from 'react'
+import { styled } from 'styled-components'
+import type { WorkspaceTabStripProps } from './workspaceTabTypes.js'
+import { PureAppWordmark } from './PureAppWordmark.js'
+import { X } from 'lucide-react'
+
+//#region styled-components
+
+const StyledStrip = styled.div`
+  display: flex;
+  align-items: flex-end;
+  min-height: 36px;
+  width: 100%;
+  min-width: 0;
+  background: var(--platform-colors-chrome-tab-strip);
+  border-bottom: 1px solid var(--platform-colors-border);
+  -webkit-app-region: no-drag;
+  user-select: none;
+`
+
+const StyledScroll = styled.div`
+  display: flex;
+  align-items: flex-end;
+  flex: 1;
+  min-width: 0;
+  gap: 2px;
+  padding: 5px 8px 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+`
+
+const StyledTab = styled.button<{
+  $dropBefore?: boolean
+  $dropAfter?: boolean
+}>`
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  height: 31px;
+  max-width: 260px;
+  margin-bottom: -1px;
+  padding: 0 8px 0 9px;
+  border: 1px solid transparent;
+  border-bottom-color: transparent;
+  border-radius: 11px 11px 0 0;
+  font-size: var(--platform-typography-font-size-xs, 13px);
+  font-weight: 500;
+  color: var(--platform-colors-text-secondary);
+  background: transparent;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background 150ms ease, border-color 150ms ease, color 150ms ease,
+    box-shadow 150ms ease;
+
+  &[data-active='true'] {
+    border-color: var(--platform-colors-border);
+    border-bottom-color: var(--platform-colors-surface);
+    background: var(--platform-colors-surface);
+    color: var(--platform-colors-text);
+    box-shadow: 0 -1px 0 rgb(255 255 255 / 70%);
+  }
+
+  &:hover:not([data-active='true']) {
+    border-color: var(--platform-colors-border-soft);
+    background: var(--platform-colors-surface-hover);
+    color: var(--platform-colors-text);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--platform-colors-focus-ring);
+    outline-offset: 2px;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 4px;
+    bottom: 2px;
+    left: -2px;
+    width: 2px;
+    border-radius: 1px;
+    background: ${({ $dropBefore }) =>
+      $dropBefore ? 'var(--platform-colors-accent)' : 'transparent'};
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 4px;
+    bottom: 2px;
+    right: -2px;
+    width: 2px;
+    border-radius: 1px;
+    background: ${({ $dropAfter }) =>
+      $dropAfter ? 'var(--platform-colors-accent)' : 'transparent'};
+  }
+`
+
+const StyledKind = styled.span`
+  font-size: var(--platform-typography-font-size-xs, 11px);
+  font-weight: 600;
+  opacity: 0.85;
+  flex-shrink: 0;
+`
+
+const StyledLabel = styled.span`
+  display: inline-flex;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const StyledTabWordmark = styled(PureAppWordmark)`
+  min-width: 0;
+  overflow: hidden;
+
+  > span:last-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`
+
+/**
+ * The canonical lockup at tab scale: "pure word", lowercase, one size.
+ * The prefix is the quiet family constant — light weight, muted grey,
+ * never resized (a size jump breaks the lockup's line). The app word
+ * carries identity: medium weight, accent only when active.
+ */
+const StyledWordPrefix = styled.span`
+  font-weight: 300;
+  text-transform: lowercase;
+  color: var(--platform-colors-text-secondary);
+  letter-spacing: 0.01em;
+`
+
+const StyledWord = styled.span<{ $active: boolean }>`
+  font-weight: ${({ $active }) => ($active ? 600 : 500)};
+  text-transform: lowercase;
+  color: ${({ $active }) =>
+    $active ? 'var(--platform-colors-accent)' : 'inherit'};
+`
+
+const StyledDocName = styled.span`
+  margin-left: 0.4em;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 300;
+  color: var(--platform-colors-text-disabled);
+`
+
+const StyledClose = styled(X)`
+  cursor: pointer;
+  opacity: 0.7;
+
+  width: 12px !important;
+  height: 12px !important;
+
+  &:hover {
+    opacity: 1;
+    color: var(--platform-colors-text);
+  }
+`
+
+const StyledTrailing = styled.div`
+  align-self: center;
+  display: flex;
+  justify-content: center;
+  padding-inline: var(--platform-spacing-sm);
+  align-items: center;
+`
+
+//#endregion
+
+export function WorkspaceTabStrip({
+  tabs,
+  activeTabId,
+  onSelect,
+  onClose,
+  trailing,
+  onReorder,
+  'aria-label': ariaLabel = 'Open workspace tabs',
+}: WorkspaceTabStripProps): React.ReactElement {
+  const draggingIdRef = useRef<string | null>(null)
+  const [dropTarget, setDropTarget] = useState<{
+    tabId: string
+    after: boolean
+  } | null>(null)
+
+  const finishDrag = (): void => {
+    draggingIdRef.current = null
+    setDropTarget(null)
+  }
+
+  return (
+    <StyledStrip>
+      <StyledScroll role="tablist" aria-label={ariaLabel}>
+        {tabs.map((tab, index) => {
+          const active = tab.id === activeTabId
+          const closable = !tab.pinned && onClose
+          return (
+            <StyledTab
+              key={tab.id}
+              type="button"
+              role="tab"
+              tabIndex={active ? 0 : -1}
+              aria-selected={active}
+              data-active={active}
+              title={tab.label}
+              draggable={Boolean(onReorder)}
+              $dropBefore={dropTarget?.tabId === tab.id && !dropTarget.after}
+              $dropAfter={dropTarget?.tabId === tab.id && dropTarget.after}
+              onDragStart={event => {
+                draggingIdRef.current = tab.id
+                event.dataTransfer.effectAllowed = 'move'
+                event.dataTransfer.setData('text/plain', tab.id)
+              }}
+              onDragOver={event => {
+                if (!onReorder || !draggingIdRef.current) return
+                if (draggingIdRef.current === tab.id) return
+                event.preventDefault()
+                event.dataTransfer.dropEffect = 'move'
+                const rect = event.currentTarget.getBoundingClientRect()
+                const after = event.clientX > rect.left + rect.width / 2
+                setDropTarget(current =>
+                  current?.tabId === tab.id && current.after === after
+                    ? current
+                    : { tabId: tab.id, after },
+                )
+              }}
+              onDragLeave={() => {
+                setDropTarget(current =>
+                  current?.tabId === tab.id ? null : current,
+                )
+              }}
+              onDrop={event => {
+                const draggedId = draggingIdRef.current
+                if (!onReorder || !draggedId || draggedId === tab.id) {
+                  finishDrag()
+                  return
+                }
+                event.preventDefault()
+                const rect = event.currentTarget.getBoundingClientRect()
+                const after = event.clientX > rect.left + rect.width / 2
+                const beforeTabId = after ? tabs[index + 1]?.id ?? null : tab.id
+                if (beforeTabId !== draggedId) {
+                  onReorder(draggedId, beforeTabId)
+                }
+                finishDrag()
+              }}
+              onDragEnd={finishDrag}
+              onClick={() => onSelect(tab.id)}
+              onKeyDown={event => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                  event.preventDefault()
+                  onSelect(tab.id)
+                }
+              }}
+            >
+              {!tab.brand && tab.kindLabel ? (
+                <StyledKind aria-hidden="true">{tab.kindLabel}</StyledKind>
+              ) : null}
+              <StyledLabel>
+                {tab.brand ? (
+                  <>
+                    <StyledWordPrefix>pure</StyledWordPrefix>{' '}
+                    <StyledWord $active={active}>
+                      {tab.appName ?? tab.label.replace(/^pure\s*/i, '')}
+                    </StyledWord>
+                    {tab.documentName ? (
+                      <StyledDocName>{tab.documentName}</StyledDocName>
+                    ) : null}
+                  </>
+                ) : (
+                  tab.label
+                )}
+              </StyledLabel>
+              {closable ? (
+                <StyledClose
+                  type="button"
+                  aria-label={`Close ${tab.label}`}
+                  onClick={event => {
+                    event.stopPropagation()
+                    onClose(tab.id)
+                  }}
+                ></StyledClose>
+              ) : null}
+            </StyledTab>
+          )
+        })}
+      </StyledScroll>
+      {trailing ? <StyledTrailing>{trailing}</StyledTrailing> : null}
+    </StyledStrip>
+  )
+}

package/src/components/chrome/index.ts

@@ -0,0 +1,31 @@
+export { PlatformIcon, type PlatformIconProps } from './PlatformIcon.js'
+export { PanelTabStrip, type PanelTabStripProps } from './PanelTabStrip.js'
+export {
+  OverlayActionCapsule,
+  OverlayActionCapsuleButton,
+  OverlayActionCapsuleCloseButton,
+  OverlayActionCapsuleIconButton,
+  StyledOverlayActionCapsule,
+  StyledOverlayActionCapsuleButton,
+  StyledOverlayActionCapsuleCloseButton,
+  StyledOverlayActionCapsuleIconButton,
+  type OverlayActionCapsuleButtonProps,
+  type OverlayActionCapsuleCloseButtonProps,
+  type OverlayActionCapsuleIconButtonProps,
+  type OverlayActionCapsuleProps,
+} from './OverlayActionCapsule.js'
+export {
+  ShellWindowControls,
+  type ShellWindowControlsProps,
+} from './ShellWindowControls.js'
+export { ThemeModeButton } from './ThemeModeButton.js'
+export { Titlebar, type TitlebarProps } from './Titlebar.js'
+export { WorkspaceTabStrip } from './WorkspaceTabStrip.js'
+export type {
+  WorkspaceTabItem,
+  WorkspaceTabStripProps,
+} from './workspaceTabTypes.js'
+export {
+  PureAppWordmark,
+  type PureAppWordmarkProps,
+} from './PureAppWordmark.js'

package/src/components/chrome/workspaceTabTypes.ts

@@ -0,0 +1,29 @@
+/** Presentation model for shell workspace tabs (prop-driven strip). */
+export interface WorkspaceTabItem {
+  id: string
+  label: string
+  /** Optional short app name shown before the label (e.g. "Writer"). */
+  kindLabel?: string
+  /** Product name rendered by the shared chrome wordmark (e.g. "files"). */
+  appName?: string
+  /** Document/resource name shown beside the wordmark in a lighter weight. */
+  documentName?: string
+  /** Optional app identity mark used by the shell tab strip. */
+  brand?: {
+    letter: string
+    label?: string
+  }
+  pinned?: boolean
+}
+
+export interface WorkspaceTabStripProps {
+  tabs: readonly WorkspaceTabItem[]
+  activeTabId: string
+  onSelect: (tabId: string) => void
+  onClose?: (tabId: string) => void
+  /** Optional trailing control (e.g. catalog "+"). */
+  trailing?: React.ReactNode
+  /** Enables drag-reorder. Move `tabId` before `beforeTabId` (null = end). */
+  onReorder?: (tabId: string, beforeTabId: string | null) => void
+  'aria-label'?: string
+}