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

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

@@ -0,0 +1,362 @@
+import type { KeyboardEvent, ReactElement } from 'react'
+import { useMemo } from 'react'
+import { styled } from 'styled-components'
+import { EntityPortrait } from './EntityPortrait.js'
+
+export type RelationshipMapNodeKind = 'person' | 'org'
+
+export interface RelationshipMapNode {
+  id: string
+  label: string
+  kind: RelationshipMapNodeKind
+  imageUrl?: string
+  active?: boolean
+}
+
+export interface RelationshipMapEdge {
+  id: string
+  from: string
+  to: string
+  label: string
+  title?: string
+}
+
+export interface RelationshipMapProps {
+  nodes: RelationshipMapNode[]
+  edges: RelationshipMapEdge[]
+  onSelectNode?: (id: string) => void
+  className?: string
+}
+
+interface PositionedNode extends RelationshipMapNode {
+  x: number
+  y: number
+  degree: number
+}
+
+const WIDTH = 720
+const HEIGHT = 360
+const CENTER_X = WIDTH / 2
+const CENTER_Y = HEIGHT / 2
+
+const Wrap = styled.div`
+  display: grid;
+  gap: 14px;
+`
+
+const GraphFrame = styled.div`
+  overflow: hidden;
+  border: 1px solid var(--platform-colors-border);
+  background: color-mix(
+    in srgb,
+    var(--platform-colors-surface) 84%,
+    transparent
+  );
+`
+
+const GraphSvg = styled.svg`
+  display: block;
+  width: 100%;
+  min-height: 280px;
+`
+
+const EdgeLine = styled.line<{ $active?: boolean }>`
+  stroke: ${({ $active }) =>
+    $active
+      ? 'var(--platform-colors-text)'
+      : 'var(--platform-colors-border)'};
+  stroke-width: ${({ $active }) => ($active ? 2 : 1.2)};
+  opacity: ${({ $active }) => ($active ? 0.54 : 0.82)};
+`
+
+const EdgeLabel = styled.text`
+  fill: var(--platform-colors-text-tertiary);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  text-anchor: middle;
+  text-transform: uppercase;
+`
+
+const NodeGroup = styled.g<{ $interactive: boolean }>`
+  cursor: ${({ $interactive }) => ($interactive ? 'pointer' : 'default')};
+  outline: none;
+
+  &:focus-visible .node-shape {
+    stroke: var(--platform-colors-text);
+    stroke-width: 2.5;
+  }
+`
+
+const NodeShape = styled.circle<{
+  $kind: RelationshipMapNodeKind
+  $active?: boolean
+}>`
+  fill: ${({ $active }) =>
+    $active
+      ? 'var(--platform-colors-text)'
+      : 'var(--platform-colors-surface)'};
+  stroke: ${({ $active, $kind }) =>
+    $active
+      ? 'var(--platform-colors-text)'
+      : $kind === 'org'
+      ? 'var(--platform-colors-text-secondary)'
+      : 'var(--platform-colors-border)'};
+  stroke-width: ${({ $active }) => ($active ? 2 : 1.4)};
+`
+
+const NodeTextWrap = styled.div<{ $active?: boolean }>`
+  display: grid;
+  gap: 5px;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+  color: ${({ $active }) =>
+    $active
+      ? 'var(--platform-colors-text-inverse)'
+      : 'var(--platform-colors-text)'};
+  font-size: 13px;
+  font-weight: 720;
+  line-height: 1.18;
+  overflow-wrap: anywhere;
+  text-align: center;
+`
+
+const NodeLabel = styled.span`
+  max-width: 100%;
+`
+
+const KindText = styled.text<{ $active?: boolean }>`
+  fill: ${({ $active }) =>
+    $active
+      ? 'var(--platform-colors-text)'
+      : 'var(--platform-colors-text-tertiary)'};
+  font-size: 10px;
+  font-weight: 760;
+  letter-spacing: 0.06em;
+  text-anchor: middle;
+  text-transform: uppercase;
+`
+
+const Empty = styled.div`
+  padding: 42px 24px;
+  color: var(--platform-colors-text-secondary);
+  font-size: 14px;
+  line-height: 1.5;
+  text-align: center;
+`
+
+const Ledger = styled.div`
+  display: grid;
+  gap: 0;
+`
+
+const LedgerRow = styled.div`
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  gap: 10px;
+  align-items: baseline;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--platform-colors-border);
+  color: var(--platform-colors-text-secondary);
+  font-size: 13px;
+  line-height: 1.45;
+
+  &:last-child {
+    border-bottom: 0;
+  }
+
+  strong {
+    min-width: 0;
+    color: var(--platform-colors-text);
+    font-weight: 680;
+    overflow-wrap: anywhere;
+  }
+`
+
+const RelationLabel = styled.span`
+  color: var(--platform-colors-text-tertiary);
+  font-size: 10px;
+  font-weight: 760;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  white-space: nowrap;
+`
+
+export function RelationshipMap({
+  nodes,
+  edges,
+  onSelectNode,
+  className,
+}: RelationshipMapProps): ReactElement {
+  const positioned = useMemo(() => layoutNodes(nodes, edges), [nodes, edges])
+  const nodeMap = new Map(positioned.map(node => [node.id, node]))
+  const activeId = positioned.find(node => node.active)?.id
+
+  if (!nodes.length) {
+    return (
+      <Wrap className={className}>
+        <GraphFrame>
+          <Empty>No relationship map yet.</Empty>
+        </GraphFrame>
+      </Wrap>
+    )
+  }
+
+  return (
+    <Wrap className={className}>
+      <GraphFrame>
+        <GraphSvg viewBox={`0 0 ${WIDTH} ${HEIGHT}`} role="img">
+          <title>Relationship map</title>
+          {edges.map(edge => {
+            const from = nodeMap.get(edge.from)
+            const to = nodeMap.get(edge.to)
+            if (!from || !to) return null
+            const active = edge.from === activeId || edge.to === activeId
+            const midX = (from.x + to.x) / 2
+            const midY = (from.y + to.y) / 2
+            return (
+              <g key={edge.id}>
+                <EdgeLine
+                  x1={from.x}
+                  y1={from.y}
+                  x2={to.x}
+                  y2={to.y}
+                  $active={active}
+                />
+                {active ? (
+                  <EdgeLabel x={midX} y={midY - 7}>
+                    {edge.label}
+                  </EdgeLabel>
+                ) : null}
+              </g>
+            )
+          })}
+          {positioned.map(node => {
+            const radius = nodeRadius(node)
+            return (
+              <NodeGroup
+                key={node.id}
+                role="button"
+                tabIndex={onSelectNode ? 0 : -1}
+                aria-label={`${node.kind}: ${node.label}`}
+                $interactive={Boolean(onSelectNode)}
+                onClick={() => onSelectNode?.(node.id)}
+                onKeyDown={event => handleNodeKey(event, node.id, onSelectNode)}
+              >
+                <NodeShape
+                  className="node-shape"
+                  cx={node.x}
+                  cy={node.y}
+                  r={radius}
+                  $kind={node.kind}
+                  $active={node.active}
+                />
+                <foreignObject
+                  x={node.x - radius + 9}
+                  y={node.y - radius + 12}
+                  width={(radius - 9) * 2}
+                  height={(radius - 8) * 2}
+                >
+                  <NodeTextWrap $active={node.active}>
+                    {node.imageUrl ? (
+                      <EntityPortrait
+                        name={node.label}
+                        imageUrl={node.imageUrl}
+                        kind={node.kind}
+                      />
+                    ) : null}
+                    <NodeLabel>{node.label}</NodeLabel>
+                  </NodeTextWrap>
+                </foreignObject>
+                <KindText
+                  x={node.x}
+                  y={node.y + radius + 16}
+                  $active={node.active}
+                >
+                  {node.kind}
+                </KindText>
+              </NodeGroup>
+            )
+          })}
+        </GraphSvg>
+      </GraphFrame>
+      {edges.length ? (
+        <Ledger>
+          {edges.map(edge => (
+            <LedgerRow key={edge.id} title={edge.title}>
+              <strong>{nodeMap.get(edge.from)?.label ?? 'Someone'}</strong>
+              <RelationLabel>{edge.label}</RelationLabel>
+              <strong>{nodeMap.get(edge.to)?.label ?? 'someone'}</strong>
+            </LedgerRow>
+          ))}
+        </Ledger>
+      ) : null}
+    </Wrap>
+  )
+}
+
+function layoutNodes(
+  nodes: RelationshipMapNode[],
+  edges: RelationshipMapEdge[],
+): PositionedNode[] {
+  const degree = new Map(nodes.map(node => [node.id, 0]))
+  for (const edge of edges) {
+    degree.set(edge.from, (degree.get(edge.from) ?? 0) + 1)
+    degree.set(edge.to, (degree.get(edge.to) ?? 0) + 1)
+  }
+
+  const sorted = [...nodes].sort((a, b) => {
+    if (a.active) return -1
+    if (b.active) return 1
+    return (degree.get(b.id) ?? 0) - (degree.get(a.id) ?? 0)
+  })
+  const active = sorted.find(node => node.active)
+  const outer = active
+    ? sorted.filter(node => node.id !== active.id)
+    : sorted
+  const ringRadiusX = outer.length > 5 ? 245 : 215
+  const ringRadiusY = outer.length > 5 ? 116 : 104
+
+  const placed: PositionedNode[] = active
+    ? [
+        {
+          ...active,
+          x: CENTER_X,
+          y: CENTER_Y,
+          degree: degree.get(active.id) ?? 0,
+        },
+      ]
+    : []
+
+  outer.forEach((node, index) => {
+    const angle =
+      outer.length === 1
+        ? -Math.PI / 2
+        : -Math.PI / 2 + (index / outer.length) * Math.PI * 2
+    placed.push({
+      ...node,
+      x: CENTER_X + Math.cos(angle) * ringRadiusX,
+      y: CENTER_Y + Math.sin(angle) * ringRadiusY,
+      degree: degree.get(node.id) ?? 0,
+    })
+  })
+
+  return placed
+}
+
+function nodeRadius(node: PositionedNode): number {
+  if (node.active) return 62
+  return Math.min(54, 40 + node.degree * 4)
+}
+
+function handleNodeKey(
+  event: KeyboardEvent<SVGGElement>,
+  id: string,
+  onSelectNode: RelationshipMapProps['onSelectNode'],
+): void {
+  if (!onSelectNode) return
+  if (event.key !== 'Enter' && event.key !== ' ') return
+  event.preventDefault()
+  onSelectNode(id)
+}

package/src/components/common/people/index.ts

@@ -0,0 +1,40 @@
+export {
+  AutoUpdateReviewList,
+  type AutoUpdateReviewCandidate,
+  type AutoUpdateReviewListProps,
+} from './AutoUpdateReviewList.js'
+export { EntityPortrait, type EntityPortraitProps } from './EntityPortrait.js'
+export {
+  EntityList,
+  type EntityListItem,
+  type EntityListProps,
+} from './EntityList.js'
+export {
+  LinkedDossierList,
+  type LinkedDossierListItem,
+  type LinkedDossierListProps,
+} from './LinkedDossierList.js'
+export {
+  OpportunityList,
+  type OpportunityListProps,
+  type RelationshipOpportunity,
+  type RelationshipOpportunityKind,
+} from './OpportunityList.js'
+export {
+  PeopleSourceList,
+  type PeopleSourceListItem,
+  type PeopleSourceListProps,
+} from './PeopleSourceList.js'
+export {
+  RelationshipDossier,
+  type RelationshipDossierProps,
+  type RelationshipDossierSection,
+  type RelationshipDossierStat,
+} from './RelationshipDossier.js'
+export {
+  RelationshipMap,
+  type RelationshipMapEdge,
+  type RelationshipMapNode,
+  type RelationshipMapNodeKind,
+  type RelationshipMapProps,
+} from './RelationshipMap.js'

package/src/components/common/preview/FileAudioPreview.tsx

@@ -0,0 +1,89 @@
+import { styled } from 'styled-components'
+import { FlexCol } from '../containers/flex.js'
+import { Text } from '../typography/Text.js'
+import {
+  previewFrameCss,
+  previewViewportFrameCss,
+  StyledPreviewStatus,
+} from './previewLayout.js'
+
+export interface FileAudioPreviewProps {
+  src: string | null
+  title?: string
+  loading?: boolean
+  error?: string | null
+  fillViewport?: boolean
+}
+
+//#region styled-components
+
+const StyledAudioPreview = styled(FlexCol)<{ $fillViewport?: boolean }>`
+  ${({ $fillViewport }) =>
+    $fillViewport ? previewViewportFrameCss : previewFrameCss}
+  gap: var(--platform-spacing-sm);
+  padding: ${({ $fillViewport }) =>
+    $fillViewport ? '0' : 'var(--platform-spacing-md)'};
+  flex: ${({ $fillViewport }) => ($fillViewport ? '1' : '0 1 auto')};
+  min-height: ${({ $fillViewport }) => ($fillViewport ? '0' : 'auto')};
+  align-items: center;
+  justify-content: center;
+  border: ${({ $fillViewport }) =>
+    $fillViewport ? '0' : '1px solid var(--platform-colors-border)'};
+  background: var(--platform-colors-app-viewport);
+
+  audio {
+    width: 100%;
+    max-width: ${({ $fillViewport }) => ($fillViewport ? '640px' : '100%')};
+  }
+`
+
+//#endregion
+
+export function FileAudioPreview({
+  src,
+  title = '',
+  loading = false,
+  error = null,
+  fillViewport = false,
+}: FileAudioPreviewProps): React.ReactElement {
+  if (loading) {
+    return (
+      <StyledPreviewStatus>
+        <Text size="sm" tone="secondary">
+          Loading preview…
+        </Text>
+      </StyledPreviewStatus>
+    )
+  }
+
+  if (error) {
+    return (
+      <StyledPreviewStatus>
+        <Text size="sm" tone="danger">
+          {error}
+        </Text>
+      </StyledPreviewStatus>
+    )
+  }
+
+  if (!src) {
+    return (
+      <StyledPreviewStatus>
+        <Text size="sm" tone="secondary">
+          No audio preview available.
+        </Text>
+      </StyledPreviewStatus>
+    )
+  }
+
+  return (
+    <StyledAudioPreview $fillViewport={fillViewport}>
+      {fillViewport ? null : (
+        <Text size="sm" tone="secondary">
+          {title || 'Audio'}
+        </Text>
+      )}
+      <audio src={src} controls preload="metadata" title={title} />
+    </StyledAudioPreview>
+  )
+}

package/src/components/common/preview/FileImagePreview.tsx

@@ -0,0 +1,88 @@
+import { styled } from 'styled-components'
+import { FlexCol } from '../containers/flex.js'
+import { Text } from '../typography/Text.js'
+import {
+  previewFrameCss,
+  previewViewportFrameCss,
+  StyledPreviewStatus,
+} from './previewLayout.js'
+
+export interface FileImagePreviewProps {
+  src: string | null
+  alt?: string
+  loading?: boolean
+  error?: string | null
+  fillViewport?: boolean
+}
+
+//#region styled-components
+
+const StyledImagePreview = styled(FlexCol)<{ $fillViewport?: boolean }>`
+  ${({ $fillViewport }) =>
+    $fillViewport ? previewViewportFrameCss : previewFrameCss}
+  align-items: center;
+  justify-content: ${({ $fillViewport }) =>
+    $fillViewport ? 'flex-start' : 'center'};
+  min-height: ${({ $fillViewport }) => ($fillViewport ? '0' : '120px')};
+  max-height: ${({ $fillViewport }) => ($fillViewport ? 'none' : '280px')};
+  flex: ${({ $fillViewport }) => ($fillViewport ? '1' : '0 1 auto')};
+  overflow: ${({ $fillViewport }) => ($fillViewport ? 'auto' : 'hidden')};
+  border: ${({ $fillViewport }) =>
+    $fillViewport ? '0' : '1px solid var(--platform-colors-border)'};
+  background: var(--platform-colors-app-viewport);
+
+  img {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+    max-height: ${({ $fillViewport }) => ($fillViewport ? 'none' : '280px')};
+    object-fit: contain;
+  }
+`
+
+//#endregion
+
+export function FileImagePreview({
+  src,
+  alt = '',
+  loading = false,
+  error = null,
+  fillViewport = false,
+}: FileImagePreviewProps): React.ReactElement {
+  if (loading) {
+    return (
+      <StyledPreviewStatus>
+        <Text size="sm" tone="secondary">
+          Loading preview…
+        </Text>
+      </StyledPreviewStatus>
+    )
+  }
+
+  if (error) {
+    return (
+      <StyledPreviewStatus>
+        <Text size="sm" tone="danger">
+          {error}
+        </Text>
+      </StyledPreviewStatus>
+    )
+  }
+
+  if (!src) {
+    return (
+      <StyledPreviewStatus>
+        <Text size="sm" tone="secondary">
+          No image preview available.
+        </Text>
+      </StyledPreviewStatus>
+    )
+  }
+
+  return (
+    <StyledImagePreview $fillViewport={fillViewport}>
+      <img src={src} alt={alt} />
+    </StyledImagePreview>
+  )
+}

package/src/components/common/preview/FilePdfPreview.tsx

@@ -0,0 +1,87 @@
+import { styled } from 'styled-components'
+import { FlexCol } from '../containers/flex.js'
+import { Text } from '../typography/Text.js'
+import {
+  previewFrameCss,
+  previewViewportFrameCss,
+  StyledPreviewStatus,
+} from './previewLayout.js'
+
+export interface FilePdfPreviewProps {
+  src: string | null
+  title?: string
+  loading?: boolean
+  error?: string | null
+  /** When true, iframe fills the host (PDF resource tab). */
+  fillViewport?: boolean
+}
+
+//#region styled-components
+
+const StyledPdfPreview = styled(FlexCol)<{ $fillViewport?: boolean }>`
+  ${({ $fillViewport }) =>
+    $fillViewport ? previewViewportFrameCss : previewFrameCss}
+  min-height: ${({ $fillViewport }) => ($fillViewport ? '0' : '240px')};
+  max-height: ${({ $fillViewport }) => ($fillViewport ? 'none' : '360px')};
+  flex: ${({ $fillViewport }) => ($fillViewport ? '1' : '0 1 auto')};
+  overflow: hidden;
+  border: ${({ $fillViewport }) =>
+    $fillViewport ? '0' : '1px solid var(--platform-colors-border)'};
+  background: var(--platform-colors-app-viewport);
+
+  iframe {
+    display: block;
+    width: 100%;
+    height: ${({ $fillViewport }) => ($fillViewport ? '100%' : '360px')};
+    min-height: ${({ $fillViewport }) => ($fillViewport ? '0' : '240px')};
+    flex: ${({ $fillViewport }) => ($fillViewport ? '1' : '0 0 auto')};
+    border: 0;
+    background: var(--platform-colors-app-viewport);
+  }
+`
+
+//#endregion
+
+export function FilePdfPreview({
+  src,
+  title = '',
+  loading = false,
+  error = null,
+  fillViewport = false,
+}: FilePdfPreviewProps): React.ReactElement {
+  if (loading) {
+    return (
+      <StyledPreviewStatus>
+        <Text size="sm" tone="secondary">
+          Loading preview…
+        </Text>
+      </StyledPreviewStatus>
+    )
+  }
+
+  if (error) {
+    return (
+      <StyledPreviewStatus>
+        <Text size="sm" tone="danger">
+          {error}
+        </Text>
+      </StyledPreviewStatus>
+    )
+  }
+
+  if (!src) {
+    return (
+      <StyledPreviewStatus>
+        <Text size="sm" tone="secondary">
+          No PDF preview available.
+        </Text>
+      </StyledPreviewStatus>
+    )
+  }
+
+  return (
+    <StyledPdfPreview $fillViewport={fillViewport}>
+      <iframe src={src} title={title || 'PDF preview'} />
+    </StyledPdfPreview>
+  )
+}