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

package/src/components/common/overlays/Modal.tsx

@@ -0,0 +1,285 @@
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
+} from 'react'
+import { createPortal } from 'react-dom'
+import { keyframes, styled } from 'styled-components'
+import { zi } from '../../../theme/themeVars.js'
+import { ModalChromeHeader } from './ModalChromeHeader.js'
+
+export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen'
+
+export interface ModalProps {
+  open: boolean
+  onClose: () => void
+  children: ReactNode
+  title?: string
+  size?: ModalSize
+  closeOnEscape?: boolean
+  closeOnBackdropClick?: boolean
+  initialFocusRef?: React.RefObject<HTMLElement | null>
+  /** Shell titlebar with close + maximize (fullscreen is handled internally). */
+  chrome?: boolean
+  chromeTrailing?: React.ReactNode
+  bodyClassName?: string
+}
+
+const FOCUSABLE_SELECTOR = [
+  'a[href]',
+  'button:not([disabled])',
+  'textarea:not([disabled])',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+].join(',')
+
+const sizeWidths = {
+  sm: '42dvw',
+  md: '50dvw',
+  lg: '68dvw',
+  xl: 'min(1120px, calc(100vw - var(--platform-spacing-xl)))',
+} as const
+
+function firstFocusable(root: HTMLElement | null): HTMLElement | null {
+  if (!root) return null
+  return root.querySelector<HTMLElement>(FOCUSABLE_SELECTOR)
+}
+
+function trapFocus(
+  event: KeyboardEvent<HTMLDivElement>,
+  root: HTMLElement | null,
+): void {
+  if (!root) return
+  const focusables = Array.from(
+    root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),
+  )
+  if (focusables.length === 0) {
+    event.preventDefault()
+    root.focus()
+    return
+  }
+  const first = focusables[0]
+  const last = focusables[focusables.length - 1]
+  const active = document.activeElement as HTMLElement | null
+
+  if (event.shiftKey && active === first) {
+    event.preventDefault()
+    last.focus()
+  } else if (!event.shiftKey && active === last) {
+    event.preventDefault()
+    first.focus()
+  }
+}
+
+//#region styled-components
+
+const fadeIn = keyframes`
+  from { opacity: 0; }
+  to { opacity: 1; }
+`
+
+const StyledBackdrop = styled.div<{ $fullscreen: boolean }>`
+  position: fixed;
+  inset: 0;
+  z-index: ${zi.appModal};
+  display: flex;
+  align-items: ${({ $fullscreen }) => ($fullscreen ? 'stretch' : 'center')};
+  justify-content: ${({ $fullscreen }) => ($fullscreen ? 'stretch' : 'center')};
+  padding: ${({ $fullscreen }) =>
+    $fullscreen ? '0' : 'var(--platform-spacing-md)'};
+  animation: ${fadeIn} var(--platform-transition-fast);
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+`
+
+const StyledDialog = styled.div<{ $size: ModalSize; $chrome: boolean }>`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+  max-width: ${({ $size }) =>
+    $size === 'fullscreen' ? 'none' : sizeWidths[$size]};
+  height: ${({ $size, $chrome }) => {
+    if ($size === 'fullscreen') return '100%'
+    if ($chrome && $size === 'xl') {
+      return 'min(720px, calc(100vh - var(--platform-spacing-xl)))'
+    }
+    return 'auto'
+  }};
+  min-height: ${({ $size, $chrome }) => {
+    if ($size === 'fullscreen') return '100%'
+    if ($chrome && $size === 'xl') {
+      return 'min(460px, calc(100vh - var(--platform-spacing-xl)))'
+    }
+    return `min(calc(${sizeWidths[$size]} / 1.3), calc(100vh - var(--platform-spacing-xl)))`
+  }};
+  max-height: ${({ $size, $chrome }) => {
+    if ($size === 'fullscreen') return 'none'
+    if ($chrome && $size === 'xl') return 'none'
+    return 'calc(100vh - var(--platform-spacing-xl))'
+  }};
+  overflow: hidden;
+  padding: 0;
+  --platform-modal-inset: var(--platform-spacing-lg);
+  background: var(--platform-colors-elevated);
+  color: var(--platform-colors-text);
+  border: 1px solid var(--platform-colors-border);
+  border-radius: 1rem;
+  box-shadow: var(--platform-shadow-md);
+  animation: ${fadeIn} var(--platform-transition-fast);
+
+  &:focus {
+    outline: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+`
+
+const StyledTitle = styled.h2`
+  flex: 0 0 auto;
+  margin: 0;
+  padding: var(--platform-modal-inset);
+  font-size: var(--platform-typography-font-size-lg);
+  font-weight: var(--platform-typography-font-weight-bold);
+  line-height: var(--platform-typography-line-height-tight);
+`
+
+const StyledBody = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  & > *:only-child {
+    flex: 1 1 auto;
+    min-height: 0;
+    min-width: 0;
+  }
+
+  &:not(.asset-library-modal-body) > *:only-child:not(:has([role='tablist'])) {
+    padding: var(--platform-modal-inset);
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  &.asset-library-modal-body {
+    overflow: hidden;
+  }
+`
+
+//#endregion
+
+export function Modal({
+  open,
+  onClose,
+  children,
+  title,
+  size = 'md',
+  closeOnEscape = true,
+  closeOnBackdropClick,
+  initialFocusRef,
+  chrome = false,
+  chromeTrailing,
+  bodyClassName,
+}: ModalProps): React.ReactElement | null {
+  const dialogRef = useRef<HTMLDivElement | null>(null)
+  const previouslyFocusedRef = useRef<HTMLElement | null>(null)
+  const titleId = useId()
+  const [maximized, setMaximized] = useState(false)
+  const layoutSize: ModalSize = chrome && maximized ? 'fullscreen' : size
+  const fullscreen = layoutSize === 'fullscreen'
+  const resolvedCloseOnBackdropClick = closeOnBackdropClick ?? !fullscreen
+
+  useEffect(() => {
+    if (!open) setMaximized(false)
+  }, [open])
+
+  useEffect(() => {
+    if (!open) return
+    previouslyFocusedRef.current = document.activeElement as HTMLElement | null
+    return () => {
+      previouslyFocusedRef.current?.focus?.()
+    }
+  }, [open])
+
+  useEffect(() => {
+    if (!open) return
+    const target =
+      initialFocusRef?.current ??
+      firstFocusable(dialogRef.current) ??
+      dialogRef.current
+    target?.focus()
+  }, [open, initialFocusRef])
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'Escape' && closeOnEscape) {
+        event.stopPropagation()
+        onClose()
+        return
+      }
+      if (event.key === 'Tab') {
+        trapFocus(event, dialogRef.current)
+      }
+    },
+    [closeOnEscape, onClose],
+  )
+
+  const handleBackdropClick = useCallback(
+    (event: MouseEvent<HTMLDivElement>) => {
+      if (
+        event.target === event.currentTarget &&
+        resolvedCloseOnBackdropClick
+      ) {
+        onClose()
+      }
+    },
+    [resolvedCloseOnBackdropClick, onClose],
+  )
+
+  if (!open) return null
+
+  return createPortal(
+    <StyledBackdrop $fullscreen={fullscreen} onMouseDown={handleBackdropClick}>
+      <StyledDialog
+        ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={title ? titleId : undefined}
+        tabIndex={-1}
+        $size={layoutSize}
+        $chrome={chrome}
+        onKeyDown={handleKeyDown}
+      >
+        {chrome ? (
+          <ModalChromeHeader
+            title={title}
+            titleId={titleId}
+            onClose={onClose}
+            onMaximize={() => setMaximized(current => !current)}
+            maximized={maximized}
+            trailing={chromeTrailing}
+          />
+        ) : title ? (
+          <StyledTitle id={titleId}>{title}</StyledTitle>
+        ) : null}
+        <StyledBody className={bodyClassName}>
+          {children}
+        </StyledBody>
+      </StyledDialog>
+    </StyledBackdrop>,
+    document.body,
+  )
+}

package/src/components/common/overlays/ModalChromeHeader.tsx

@@ -0,0 +1,105 @@
+import { Square, X } from 'lucide-react'
+import { styled } from 'styled-components'
+import { PlatformIcon } from '../../chrome/PlatformIcon.js'
+import {
+  OverlayActionCapsule,
+  OverlayActionCapsuleCloseButton,
+  OverlayActionCapsuleIconButton,
+} from '../../chrome/OverlayActionCapsule.js'
+
+export interface ModalChromeHeaderProps {
+  title?: string
+  titleId?: string
+  onClose: () => void
+  onMaximize?: () => void
+  maximized?: boolean
+  trailing?: React.ReactNode
+}
+
+//#region styled-components
+
+const StyledHeader = styled.header`
+  display: flex;
+  align-items: stretch;
+  flex-shrink: 0;
+  width: 100%;
+  height: 30px;
+  box-sizing: border-box;
+  border-radius: 1rem;
+`
+
+const StyledTitleRegion = styled.div`
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+`
+
+const StyledTitle = styled.h2`
+  margin: 0;
+  padding: 0 var(--platform-modal-inset, var(--platform-spacing-md));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--platform-typography-font-size-lg);
+  font-weight: var(--platform-typography-font-weight-medium);
+  line-height: 1;
+  color: var(--platform-colors-text);
+`
+
+const StyledTrailing = styled.div`
+  display: flex;
+  align-items: stretch;
+  flex: 0 0 auto;
+  flex-shrink: 0;
+  height: 100%;
+  padding: 0 var(--platform-spacing-xs);
+`
+
+const StyledChromeCapsule = styled(OverlayActionCapsule)`
+  gap: 0.125em;
+  padding: 0.125em;
+`
+
+//#endregion
+
+export function ModalChromeHeader({
+  title,
+  titleId,
+  onClose,
+  onMaximize,
+  maximized = false,
+  trailing,
+}: ModalChromeHeaderProps): React.ReactElement {
+  const maximizeLabel = maximized ? 'Restore' : 'Maximize'
+
+  return (
+    <StyledHeader>
+      <StyledTitleRegion>
+        {title ? <StyledTitle id={titleId}>{title}</StyledTitle> : null}
+      </StyledTitleRegion>
+      <StyledTrailing>
+        <StyledChromeCapsule>
+          {trailing}
+          {onMaximize ? (
+            <OverlayActionCapsuleIconButton
+              aria-label={maximizeLabel}
+              title={maximizeLabel}
+              onClick={onMaximize}
+            >
+              <PlatformIcon icon={Square} size={12} strokeWidth={1.75} />
+            </OverlayActionCapsuleIconButton>
+          ) : null}
+          <OverlayActionCapsuleCloseButton
+            aria-label="Close"
+            title="Close"
+            onClick={onClose}
+          >
+            <PlatformIcon icon={X} size={14} strokeWidth={2} />
+          </OverlayActionCapsuleCloseButton>
+        </StyledChromeCapsule>
+      </StyledTrailing>
+    </StyledHeader>
+  )
+}

package/src/components/common/overlays/ObjectActionStrip.tsx

@@ -0,0 +1,80 @@
+import type {
+  ButtonHTMLAttributes,
+  MouseEventHandler,
+  PointerEventHandler,
+  ReactElement,
+  ReactNode,
+} from 'react'
+import { styled } from 'styled-components'
+
+export interface ObjectActionStripProps {
+  children: ReactNode
+  className?: string
+  onClick?: MouseEventHandler<HTMLDivElement>
+  onPointerDown?: PointerEventHandler<HTMLDivElement>
+}
+
+const Strip = styled.div`
+  display: flex;
+  gap: 3px;
+  align-items: center;
+  padding: 3px 4px;
+  border: 1px solid rgb(35 40 45 / 12%);
+  border-radius: 999px;
+  background: rgb(255 255 255 / 72%);
+  color: rgb(35 40 45 / 68%);
+  box-shadow: 0 6px 18px rgb(20 26 33 / 6%);
+  backdrop-filter: blur(6px);
+`
+
+const Action = styled.button`
+  appearance: none;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 650;
+  line-height: 1;
+  padding: 5px 7px;
+  cursor: pointer;
+
+  &:hover:not(:disabled) {
+    background: rgb(35 40 45 / 8%);
+  }
+
+  &:focus-visible {
+    outline: 1px solid rgb(35 40 45 / 50%);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+  }
+`
+
+export function ObjectActionStrip({
+  children,
+  className,
+  onClick,
+  onPointerDown,
+}: ObjectActionStripProps): ReactElement {
+  return (
+    <Strip
+      className={className}
+      onClick={onClick}
+      onPointerDown={onPointerDown}
+    >
+      {children}
+    </Strip>
+  )
+}
+
+export function ObjectActionButton({
+  type = 'button',
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement>): ReactElement {
+  return <Action type={type} {...props} />
+}

package/src/components/common/people/AutoUpdateReviewList.tsx

@@ -0,0 +1,182 @@
+import { styled } from 'styled-components'
+import { Button } from '../buttons/Button.js'
+
+export interface AutoUpdateReviewCandidate {
+  id: string
+  kind: string
+  title: string
+  body: string
+  sourceUrl?: string
+}
+
+export interface AutoUpdateReviewListProps<
+  TCandidate extends AutoUpdateReviewCandidate = AutoUpdateReviewCandidate,
+> {
+  message?: string | null
+  caveats?: string[]
+  candidates: TCandidate[]
+  onApprove: (candidate: TCandidate) => void
+  onApproveCaveat: (body: string) => void
+  onDismissCaveat: () => void
+  onDismiss: (candidateId: string) => void
+}
+
+const Stack = styled.div`
+  display: grid;
+  gap: 12px;
+`
+
+const Card = styled.div`
+  display: grid;
+  gap: 10px;
+  padding: 14px 16px;
+  border-radius: 8px;
+  background: color-mix(
+    in srgb,
+    var(--platform-colors-accent-muted) 46%,
+    var(--platform-colors-surface)
+  );
+`
+
+const Head = styled.div`
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 14px;
+`
+
+const TitleBlock = styled.div`
+  display: grid;
+  gap: 5px;
+  min-width: 0;
+`
+
+const Badge = styled.span`
+  width: fit-content;
+  padding: 2px 7px;
+  border: 1px solid var(--platform-colors-border);
+  border-radius: var(--platform-radius-full);
+  background: var(--platform-colors-surface);
+  color: var(--platform-colors-text);
+  font-size: 10px;
+  font-weight: 760;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+`
+
+const Type = styled.span`
+  color: var(--platform-colors-text-tertiary);
+  font-size: 10px;
+  font-weight: 760;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+`
+
+const Title = styled.div`
+  color: var(--platform-colors-text);
+  font-size: 15px;
+  font-weight: 720;
+`
+
+const Body = styled.div`
+  color: var(--platform-colors-text-secondary);
+  font-size: 14px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+`
+
+const Meta = styled.span`
+  color: var(--platform-colors-text-secondary);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+`
+
+const ActionRow = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+`
+
+const HelperText = styled.div`
+  color: var(--platform-colors-text-secondary);
+  font-size: 12px;
+  line-height: 1.45;
+`
+
+export function AutoUpdateReviewList<
+  TCandidate extends AutoUpdateReviewCandidate = AutoUpdateReviewCandidate,
+>({
+  message,
+  caveats = [],
+  candidates,
+  onApprove,
+  onApproveCaveat,
+  onDismissCaveat,
+  onDismiss,
+}: AutoUpdateReviewListProps<TCandidate>): React.ReactElement | null {
+  if (!message && !caveats.length && !candidates.length) return null
+
+  return (
+    <Stack>
+      {message ? <HelperText>{message}</HelperText> : null}
+      {caveats.length ? (
+        <Card>
+          <Head>
+            <TitleBlock>
+              <Badge>Needs review</Badge>
+              <Type>disambiguation</Type>
+              <Title>Check before adding</Title>
+            </TitleBlock>
+            <ActionRow>
+              <Button
+                variant="primary"
+                size="sm"
+                onClick={() => onApproveCaveat(caveats.join('\n'))}
+              >
+                Add note
+              </Button>
+              <Button variant="subtle" size="sm" onClick={onDismissCaveat}>
+                Dismiss
+              </Button>
+            </ActionRow>
+          </Head>
+          <Body>{caveats.join('\n')}</Body>
+        </Card>
+      ) : null}
+      {candidates.length ? (
+        <Stack>
+          {candidates.map(candidate => (
+            <Card key={candidate.id}>
+              <Head>
+                <TitleBlock>
+                  <Badge>Needs action</Badge>
+                  <Type>{candidate.kind}</Type>
+                  <Title>{candidate.title}</Title>
+                </TitleBlock>
+                <ActionRow>
+                  <Button
+                    variant="primary"
+                    size="sm"
+                    onClick={() => onApprove(candidate)}
+                  >
+                    Add
+                  </Button>
+                  <Button
+                    variant="subtle"
+                    size="sm"
+                    onClick={() => onDismiss(candidate.id)}
+                  >
+                    Dismiss
+                  </Button>
+                </ActionRow>
+              </Head>
+              <Body>{candidate.body}</Body>
+              {candidate.sourceUrl ? <Meta>{candidate.sourceUrl}</Meta> : null}
+            </Card>
+          ))}
+        </Stack>
+      ) : null}
+    </Stack>
+  )
+}