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

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

@@ -0,0 +1,122 @@
+import type { ReactElement, ReactNode } from 'react'
+import { styled } from 'styled-components'
+import { QuietPill } from '../feedback/QuietPill.js'
+import { EntityPortrait } from './EntityPortrait.js'
+
+export interface EntityListItem {
+  id: string
+  kind: 'person' | 'org'
+  title: string
+  meta?: string
+  imageUrl?: string
+  badge?: ReactNode
+}
+
+export interface EntityListProps {
+  items: EntityListItem[]
+  activeId?: string
+  emptyMessage: string
+  onSelect: (item: EntityListItem) => void
+}
+
+const List = styled.div`
+  display: grid;
+  gap: 6px;
+`
+
+const Row = styled.button<{ $active?: boolean }>`
+  display: grid;
+  gap: 3px;
+  width: 100%;
+  padding: 10px 0 10px 12px;
+  border: 0;
+  border-left: 2px solid
+    ${({ $active }) =>
+      $active ? 'var(--platform-colors-text)' : 'transparent'};
+  border-radius: 0;
+  background: ${({ $active }) =>
+    $active
+      ? 'color-mix(in srgb, var(--platform-colors-surface-hover) 62%, transparent)'
+      : 'transparent'};
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--platform-colors-surface-hover);
+  }
+`
+
+const Top = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  min-width: 0;
+`
+
+const Identity = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  min-width: 0;
+`
+
+const Title = styled.span`
+  min-width: 0;
+  overflow: hidden;
+  color: var(--platform-colors-text);
+  font-size: 15px;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const Meta = styled.span`
+  color: var(--platform-colors-text-secondary);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+`
+
+const Empty = styled.div`
+  color: var(--platform-colors-text-secondary);
+  font-size: 14px;
+  line-height: 1.5;
+`
+
+export function EntityList({
+  items,
+  activeId,
+  emptyMessage,
+  onSelect,
+}: EntityListProps): ReactElement {
+  if (!items.length) return <Empty>{emptyMessage}</Empty>
+
+  return (
+    <List>
+      {items.map(item => (
+        <Row
+          key={`${item.kind}:${item.id}`}
+          type="button"
+          $active={activeId === item.id}
+          onClick={() => onSelect(item)}
+        >
+          <Top>
+            <Identity>
+              <EntityPortrait
+                name={item.title}
+                imageUrl={item.imageUrl}
+                kind={item.kind}
+              />
+              <Title>{item.title}</Title>
+            </Identity>
+            {item.badge ??
+              (item.kind === 'org' ? <QuietPill>org</QuietPill> : null)}
+          </Top>
+          {item.meta ? <Meta>{item.meta}</Meta> : null}
+        </Row>
+      ))}
+    </List>
+  )
+}

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

@@ -0,0 +1,64 @@
+import type { ReactElement } from 'react'
+import { styled } from 'styled-components'
+
+export interface EntityPortraitProps {
+  name: string
+  imageUrl?: string
+  kind?: 'person' | 'org'
+  size?: 'sm' | 'lg'
+  className?: string
+}
+
+const Wrap = styled.div<{ $size: 'sm' | 'lg' }>`
+  display: inline-grid;
+  place-items: center;
+  width: ${({ $size }) => ($size === 'lg' ? '72px' : '28px')};
+  height: ${({ $size }) => ($size === 'lg' ? '72px' : '28px')};
+  overflow: hidden;
+  border: 1px solid var(--platform-colors-border);
+  border-radius: ${({ $size }) => ($size === 'lg' ? '18px' : '8px')};
+  background: color-mix(
+    in srgb,
+    var(--platform-colors-surface-hover) 74%,
+    transparent
+  );
+  color: var(--platform-colors-text-secondary);
+  font-size: ${({ $size }) => ($size === 'lg' ? '24px' : '11px')};
+  font-weight: 760;
+  letter-spacing: 0.01em;
+`
+
+const Image = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+`
+
+export function EntityPortrait({
+  name,
+  imageUrl,
+  kind = 'person',
+  size = 'sm',
+  className,
+}: EntityPortraitProps): ReactElement {
+  return (
+    <Wrap
+      className={className}
+      $size={size}
+      aria-label={`${kind} image for ${name}`}
+    >
+      {imageUrl ? (
+        <Image src={imageUrl} alt="" loading="lazy" referrerPolicy="no-referrer" />
+      ) : (
+        initials(name)
+      )}
+    </Wrap>
+  )
+}
+
+function initials(name: string): string {
+  const parts = name.trim().split(/\s+/).filter(Boolean)
+  if (!parts.length) return '?'
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase()
+  return `${parts[0][0] ?? ''}${parts[parts.length - 1][0] ?? ''}`.toUpperCase()
+}

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

@@ -0,0 +1,99 @@
+import type { ReactElement } from 'react'
+import { styled } from 'styled-components'
+
+export interface LinkedDossierListItem {
+  id: string
+  title: string
+  summary?: string
+  appSlug: string
+  updatedAt?: string
+}
+
+export interface LinkedDossierListProps {
+  dossiers: LinkedDossierListItem[]
+  emptyMessage?: string
+}
+
+const List = styled.div`
+  display: grid;
+  gap: 0;
+`
+
+const Item = styled.div`
+  display: grid;
+  gap: 5px;
+  padding: 13px 0;
+  border-bottom: 1px solid var(--platform-colors-border);
+
+  &:last-child {
+    border-bottom: 0;
+  }
+`
+
+const Head = styled.div`
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 16px;
+`
+
+const Title = styled.div`
+  min-width: 0;
+  color: var(--platform-colors-text);
+  font-size: 15px;
+  font-weight: 720;
+  line-height: 1.35;
+`
+
+const Summary = styled.div`
+  color: var(--platform-colors-text-secondary);
+  font-size: 13px;
+  line-height: 1.5;
+`
+
+const Meta = styled.div`
+  color: var(--platform-colors-text-tertiary);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  white-space: nowrap;
+`
+
+const Empty = styled.div`
+  color: var(--platform-colors-text-secondary);
+  font-size: 14px;
+  line-height: 1.5;
+`
+
+export function LinkedDossierList({
+  dossiers,
+  emptyMessage = 'No linked dossiers yet.',
+}: LinkedDossierListProps): ReactElement {
+  if (!dossiers.length) return <Empty>{emptyMessage}</Empty>
+
+  return (
+    <List>
+      {dossiers.map(dossier => (
+        <Item key={`${dossier.appSlug}:${dossier.id}`}>
+          <Head>
+            <Title>{dossier.title}</Title>
+            <Meta>{dossier.appSlug}</Meta>
+          </Head>
+          {dossier.summary ? <Summary>{dossier.summary}</Summary> : null}
+          {dossier.updatedAt ? <Meta>{formatDate(dossier.updatedAt)}</Meta> : null}
+        </Item>
+      ))}
+    </List>
+  )
+}
+
+function formatDate(iso: string): string {
+  const date = new Date(iso)
+  if (Number.isNaN(date.getTime())) return ''
+  return date.toLocaleDateString(undefined, {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  })
+}

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

@@ -0,0 +1,94 @@
+import type { ReactElement } from 'react'
+import { styled } from 'styled-components'
+
+export type RelationshipOpportunityKind =
+  | 'follow-up'
+  | 'strengthen'
+  | 'focus'
+  | 'timing'
+  | 'context'
+
+export interface RelationshipOpportunity {
+  id: string
+  kind: RelationshipOpportunityKind
+  title: string
+  body: string
+}
+
+export interface OpportunityListProps {
+  opportunities: RelationshipOpportunity[]
+  emptyMessage?: string
+}
+
+const List = styled.div`
+  display: grid;
+  gap: 0;
+`
+
+const Item = styled.div`
+  display: grid;
+  gap: 5px;
+  padding: 13px 0;
+  border-bottom: 1px solid var(--platform-colors-border);
+
+  &:last-child {
+    border-bottom: 0;
+  }
+`
+
+const Head = styled.div`
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 16px;
+`
+
+const Title = styled.div`
+  min-width: 0;
+  color: var(--platform-colors-text);
+  font-size: 15px;
+  font-weight: 720;
+  line-height: 1.35;
+`
+
+const Kind = styled.div`
+  color: var(--platform-colors-text-tertiary);
+  font-size: 10px;
+  font-weight: 760;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  white-space: nowrap;
+`
+
+const Body = styled.div`
+  color: var(--platform-colors-text-secondary);
+  font-size: 13px;
+  line-height: 1.55;
+`
+
+const Empty = styled.div`
+  color: var(--platform-colors-text-secondary);
+  font-size: 14px;
+  line-height: 1.5;
+`
+
+export function OpportunityList({
+  opportunities,
+  emptyMessage = 'No relationship opportunities yet.',
+}: OpportunityListProps): ReactElement {
+  if (!opportunities.length) return <Empty>{emptyMessage}</Empty>
+
+  return (
+    <List>
+      {opportunities.map(opportunity => (
+        <Item key={opportunity.id}>
+          <Head>
+            <Title>{opportunity.title}</Title>
+            <Kind>{opportunity.kind}</Kind>
+          </Head>
+          <Body>{opportunity.body}</Body>
+        </Item>
+      ))}
+    </List>
+  )
+}

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

@@ -0,0 +1,145 @@
+import { styled } from 'styled-components'
+import { Button } from '../buttons/Button.js'
+import { QuietAction } from '../buttons/QuietAction.js'
+
+export interface PeopleSourceListItem {
+  id: string
+  kind: string
+  title: string
+  oneLine: string
+  url?: string
+}
+
+export interface PeopleSourceListProps {
+  sources: PeopleSourceListItem[]
+  emptyMessage: string
+  onAbsorb: (sourceId: string, scope: 'selected' | 'all') => void
+  onDelete: (sourceId: string) => void
+}
+
+const List = styled.div`
+  display: grid;
+`
+
+const Card = styled.div`
+  display: grid;
+  gap: 8px;
+  padding: 12px 0;
+  border-bottom: 1px solid var(--platform-colors-border);
+
+  &:last-child {
+    border-bottom: 0;
+  }
+`
+
+const Head = styled.div`
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 14px;
+`
+
+const Title = styled.div`
+  color: var(--platform-colors-text);
+  font-size: 15px;
+  font-weight: 720;
+`
+
+const Meta = styled.div`
+  color: var(--platform-colors-text-secondary);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+`
+
+const MetaRow = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+  align-items: center;
+`
+
+const TimeSensitive = styled.span`
+  color: var(--platform-colors-text);
+  font-size: 10px;
+  font-weight: 760;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+`
+
+const Body = styled.div`
+  color: var(--platform-colors-text-secondary);
+  font-size: 14px;
+  line-height: 1.6;
+`
+
+const SourceLink = styled.a`
+  color: var(--platform-colors-text-secondary);
+  font-size: 12px;
+  text-decoration: underline;
+  text-decoration-color: var(--platform-colors-border);
+  text-underline-offset: 3px;
+
+  &:hover {
+    color: var(--platform-colors-text);
+  }
+`
+
+const ActionRow = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+`
+
+export function PeopleSourceList({
+  sources,
+  emptyMessage,
+  onAbsorb,
+  onDelete,
+}: PeopleSourceListProps): React.ReactElement {
+  if (!sources.length) return <Meta>{emptyMessage}</Meta>
+  return (
+    <List>
+      {sources.map(source => (
+        <Card key={source.id}>
+          <Head>
+            <div>
+              <Title>{source.title}</Title>
+              <MetaRow>
+                <Meta>{source.kind}</Meta>
+                {source.kind === 'event' ? (
+                  <TimeSensitive>time-sensitive</TimeSensitive>
+                ) : null}
+              </MetaRow>
+            </div>
+            <QuietAction onClick={() => onDelete(source.id)}>
+              delete
+            </QuietAction>
+          </Head>
+          <Body>{source.oneLine}</Body>
+          {source.url ? (
+            <SourceLink href={source.url} target="_blank" rel="noreferrer">
+              open source
+            </SourceLink>
+          ) : null}
+          <ActionRow>
+            <Button
+              variant="subtle"
+              size="sm"
+              onClick={() => onAbsorb(source.id, 'selected')}
+            >
+              Review here
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => onAbsorb(source.id, 'all')}
+            >
+              Scan everyone
+            </Button>
+          </ActionRow>
+        </Card>
+      ))}
+    </List>
+  )
+}

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

@@ -0,0 +1,168 @@
+import type { ReactNode } from 'react'
+import { styled } from 'styled-components'
+
+export interface RelationshipDossierStat {
+  label: string
+  value: string | number
+}
+
+export interface RelationshipDossierSection {
+  id: string
+  title: string
+  action?: ReactNode
+  children: ReactNode
+}
+
+export interface RelationshipDossierProps {
+  kicker: string
+  title: string
+  subtitle?: string
+  meta?: ReactNode
+  stats?: RelationshipDossierStat[]
+  children?: ReactNode
+  sections?: RelationshipDossierSection[]
+  actions?: ReactNode
+  className?: string
+}
+
+const Article = styled.article`
+  width: 100%;
+  max-width: 900px;
+  margin: 0;
+  padding: 18px 26px 58px;
+
+  @media (max-width: 760px) {
+    padding: 20px 18px 34px;
+  }
+`
+
+const Kicker = styled.div`
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 16px;
+  color: var(--platform-colors-text-tertiary);
+  font-size: 11px;
+  font-weight: 750;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+`
+
+const Title = styled.h1`
+  margin: 14px 0 0;
+  color: var(--platform-colors-text);
+  font-size: clamp(32px, 5vw, 58px);
+  font-weight: 760;
+  line-height: 1;
+  letter-spacing: 0;
+  overflow-wrap: anywhere;
+`
+
+const Subtitle = styled.p`
+  max-width: 62ch;
+  margin: 18px 0 0;
+  color: var(--platform-colors-text-secondary);
+  font-size: 17px;
+  line-height: 1.55;
+`
+
+const StatGrid = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 22px;
+  margin-top: 24px;
+  padding-top: 14px;
+  border-top: 1px solid var(--platform-colors-border);
+`
+
+const Stat = styled.div`
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+`
+
+const StatValue = styled.div`
+  color: var(--platform-colors-text);
+  font-size: 14px;
+  font-weight: 760;
+`
+
+const StatLabel = styled.div`
+  color: var(--platform-colors-text-tertiary);
+  font-size: 10px;
+  font-weight: 750;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+`
+
+const Body = styled.div`
+  margin-top: 30px;
+`
+
+const Section = styled.section`
+  margin-top: 30px;
+  padding-top: 20px;
+  border-top: 1px solid
+    color-mix(in srgb, var(--platform-colors-border) 72%, transparent);
+`
+
+const SectionHead = styled.div`
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 14px;
+`
+
+const SectionTitle = styled.h2`
+  margin: 0;
+  color: var(--platform-colors-text-tertiary);
+  font-size: 11px;
+  font-weight: 750;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+`
+
+export function RelationshipDossier({
+  kicker,
+  title,
+  subtitle,
+  meta,
+  stats,
+  children,
+  sections,
+  actions,
+  className,
+}: RelationshipDossierProps): React.ReactElement {
+  return (
+    <Article className={className}>
+      <Kicker>
+        <span>{kicker}</span>
+        {actions}
+      </Kicker>
+      <Title>{title}</Title>
+      {subtitle ? <Subtitle>{subtitle}</Subtitle> : null}
+      {meta}
+      {stats?.length ? (
+        <StatGrid>
+          {stats.map(stat => (
+            <Stat key={stat.label}>
+              <StatValue>{stat.value}</StatValue>
+              <StatLabel>{stat.label}</StatLabel>
+            </Stat>
+          ))}
+        </StatGrid>
+      ) : null}
+      {children ? <Body>{children}</Body> : null}
+      {sections?.map(section => (
+        <Section key={section.id}>
+          <SectionHead>
+            <SectionTitle>{section.title}</SectionTitle>
+            {section.action}
+          </SectionHead>
+          {section.children}
+        </Section>
+      ))}
+    </Article>
+  )
+}