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

package/src/components/common/desk/ActionReader.tsx

@@ -0,0 +1,270 @@
+import type { ReactNode } from 'react'
+import { styled } from 'styled-components'
+import { Button } from '../buttons/Button.js'
+
+export interface ActionReaderAction {
+  label: string
+  onClick: () => void
+  variant?: 'primary' | 'subtle' | 'ghost'
+  disabled?: boolean
+}
+
+export interface ActionReaderProps {
+  kicker?: ReactNode
+  title: ReactNode
+  subtitle?: ReactNode
+  mainTitle?: ReactNode
+  main?: ReactNode
+  rationale?: ReactNode
+  original?: ReactNode
+  actions?: readonly ActionReaderAction[]
+  secondaryActions?: readonly ActionReaderAction[]
+  onClose?: () => void
+}
+
+const ReaderRoot = styled.div`
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: clamp(34px, 5vw, 72px) clamp(34px, 7vw, 128px) 56px;
+`
+
+const ReaderPage = styled.article`
+  display: grid;
+  grid-template-columns: minmax(0, 760px) minmax(220px, 280px);
+  gap: clamp(34px, 5vw, 72px);
+  align-items: start;
+  width: min(1180px, 100%);
+  margin: 0;
+
+  @media (max-width: 860px) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+`
+
+const MainColumn = styled.div`
+  display: grid;
+  gap: 30px;
+  min-width: 0;
+`
+
+const Header = styled.header`
+  display: block;
+`
+
+const HeaderCopy = styled.div`
+  display: grid;
+  gap: 10px;
+  min-width: 0;
+`
+
+const Kicker = styled.div`
+  color: var(--action-reader-faint, var(--platform-colors-text-tertiary));
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+`
+
+const Title = styled.h1`
+  margin: 0;
+  color: var(--action-reader-ink, var(--platform-colors-text));
+  font-size: clamp(34px, 4vw, 52px);
+  line-height: 1.12;
+  letter-spacing: 0;
+`
+
+const Subtitle = styled.p`
+  max-width: 70ch;
+  margin: 0;
+  color: var(--action-reader-muted, var(--platform-colors-text-secondary));
+  font-size: 16px;
+  line-height: 1.55;
+`
+
+const CloseButton = styled.button`
+  justify-self: end;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--action-reader-faint, var(--platform-colors-text-tertiary));
+  font: inherit;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--action-reader-ink, var(--platform-colors-text));
+  }
+`
+
+const MainPanel = styled.section`
+  display: grid;
+  gap: 16px;
+  max-width: 76ch;
+  padding: 0 0 0 22px;
+  border-left: 2px solid rgb(46 51 56 / 18%);
+`
+
+const PanelTitle = styled.h2`
+  margin: 0;
+  color: var(--action-reader-ink, var(--platform-colors-text));
+  font-size: 18px;
+  line-height: 1.3;
+`
+
+const MainBody = styled.div`
+  color: var(--action-reader-ink, var(--platform-colors-text));
+  font-size: 18px;
+  line-height: 1.7;
+  white-space: pre-wrap;
+`
+
+const Rationale = styled.aside`
+  padding: 14px 0 0;
+  border-top: 1px solid
+    var(--action-reader-border, var(--platform-colors-border));
+  color: var(--action-reader-muted, var(--platform-colors-text-secondary));
+  font-size: 13px;
+  line-height: 1.65;
+`
+
+const ButtonRow = styled.div`
+  display: flex;
+  align-items: stretch;
+  flex-direction: column;
+  gap: 9px;
+`
+
+const ActionStack = styled.div`
+  display: grid;
+  gap: 9px;
+`
+
+const DecisionRail = styled.aside`
+  position: sticky;
+  top: 28px;
+  display: grid;
+  gap: 22px;
+  min-width: 0;
+  padding-left: 24px;
+  border-left: 1px solid
+    var(--action-reader-border, var(--platform-colors-border));
+
+  @media (max-width: 860px) {
+    position: static;
+    padding: 22px 0 0;
+    border-top: 1px solid
+      var(--action-reader-border, var(--platform-colors-border));
+    border-left: 0;
+  }
+`
+
+const Original = styled.details`
+  max-width: 76ch;
+  color: var(--action-reader-muted, var(--platform-colors-text-secondary));
+  font-size: 13px;
+  line-height: 1.6;
+
+  summary {
+    color: var(--action-reader-faint, var(--platform-colors-text-tertiary));
+    cursor: pointer;
+    font-weight: 700;
+  }
+`
+
+const RailSection = styled.div`
+  display: grid;
+  gap: 10px;
+`
+
+const RailLabel = styled.div`
+  color: var(--action-reader-faint, var(--platform-colors-text-tertiary));
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+`
+
+function renderActions(actions: readonly ActionReaderAction[] | undefined) {
+  if (!actions?.length) return null
+  return (
+    <ButtonRow>
+      {actions.map(action => (
+        <Button
+          key={action.label}
+          type="button"
+          size="sm"
+          variant={action.variant ?? 'subtle'}
+          disabled={action.disabled}
+          onClick={action.onClick}
+        >
+          {action.label}
+        </Button>
+      ))}
+    </ButtonRow>
+  )
+}
+
+export function ActionReader({
+  kicker,
+  title,
+  subtitle,
+  mainTitle,
+  main,
+  rationale,
+  original,
+  actions,
+  secondaryActions,
+  onClose,
+}: ActionReaderProps): React.ReactElement {
+  return (
+    <ReaderRoot>
+      <ReaderPage>
+        <MainColumn>
+          <Header>
+            <HeaderCopy>
+              {kicker ? <Kicker>{kicker}</Kicker> : null}
+              <Title>{title}</Title>
+              {subtitle ? <Subtitle>{subtitle}</Subtitle> : null}
+            </HeaderCopy>
+          </Header>
+          {main || mainTitle ? (
+            <MainPanel>
+              {mainTitle ? <PanelTitle>{mainTitle}</PanelTitle> : null}
+              {main ? <MainBody>{main}</MainBody> : null}
+            </MainPanel>
+          ) : null}
+          {original ? (
+            <Original>
+              <summary>show original mail</summary>
+              {original}
+            </Original>
+          ) : null}
+        </MainColumn>
+        <DecisionRail>
+          {onClose ? (
+            <CloseButton type="button" onClick={onClose}>
+              esc
+            </CloseButton>
+          ) : null}
+          {rationale ? (
+            <RailSection>
+              <RailLabel>Why</RailLabel>
+              <Rationale>{rationale}</Rationale>
+            </RailSection>
+          ) : null}
+          <RailSection>
+            <RailLabel>Decision</RailLabel>
+            <ActionStack>
+              {renderActions(actions)}
+              {renderActions(secondaryActions)}
+            </ActionStack>
+          </RailSection>
+        </DecisionRail>
+      </ReaderPage>
+    </ReaderRoot>
+  )
+}

package/src/components/common/desk/ActivityLedger.tsx

@@ -0,0 +1,143 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react'
+import { styled } from 'styled-components'
+
+export type ActivityLedgerTone = 'ready' | 'waiting' | 'filed' | 'neutral'
+
+export interface ActivityLedgerItem {
+  id: string
+  title: ReactNode
+  detail?: ReactNode
+  meta?: ReactNode
+  tone?: ActivityLedgerTone
+  onOpen?: () => void
+}
+
+export interface ActivityLedgerProps {
+  title?: ReactNode
+  empty?: ReactNode
+  items: readonly ActivityLedgerItem[]
+  className?: string
+}
+
+const LedgerRoot = styled.section`
+  width: min(920px, calc(100% - 48px));
+  margin: 0 auto;
+  padding: 34px 0 56px;
+`
+
+const LedgerTitle = styled.h2`
+  margin: 0 0 18px;
+  color: var(--activity-ledger-ink, var(--platform-colors-text));
+  font-size: 22px;
+  line-height: 1.2;
+  letter-spacing: 0;
+`
+
+const LedgerList = styled.div`
+  display: grid;
+  gap: 0;
+  border-top: 1px solid
+    var(--activity-ledger-border, var(--platform-colors-border));
+`
+
+const LedgerRow = styled.button<{ $tone: ActivityLedgerTone }>`
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 20px;
+  width: 100%;
+  padding: 15px 0;
+  border: 0;
+  border-bottom: 1px solid
+    var(--activity-ledger-border, var(--platform-colors-border));
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+
+  &:hover {
+    background: rgb(255 255 255 / 38%);
+  }
+
+  &:disabled {
+    cursor: default;
+  }
+`
+
+const RowCopy = styled.div`
+  display: grid;
+  gap: 5px;
+  min-width: 0;
+`
+
+const RowTitle = styled.strong`
+  color: var(--activity-ledger-ink, var(--platform-colors-text));
+  font-size: 15px;
+  line-height: 1.35;
+`
+
+const RowDetail = styled.div`
+  color: var(--activity-ledger-muted, var(--platform-colors-text-secondary));
+  font-size: 13px;
+  line-height: 1.45;
+`
+
+const RowMeta = styled.div<{ $tone: ActivityLedgerTone }>`
+  align-self: start;
+  color: ${({ $tone }) =>
+    $tone === 'ready'
+      ? 'var(--platform-colors-semantic-green-text, #3f7c52)'
+      : $tone === 'waiting'
+      ? 'var(--platform-colors-semantic-orange-text, #8a6012)'
+      : 'var(--activity-ledger-faint, var(--platform-colors-text-tertiary))'};
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  white-space: nowrap;
+`
+
+const Empty = styled.div`
+  padding: 30px 0;
+  color: var(--activity-ledger-muted, var(--platform-colors-text-secondary));
+  font-size: 14px;
+`
+
+function rowButtonProps(
+  item: ActivityLedgerItem,
+): ButtonHTMLAttributes<HTMLButtonElement> {
+  return item.onOpen
+    ? { onClick: item.onOpen }
+    : { disabled: true, 'aria-disabled': true }
+}
+
+export function ActivityLedger({
+  title,
+  empty = 'Nothing handled yet.',
+  items,
+  className,
+}: ActivityLedgerProps): React.ReactElement {
+  return (
+    <LedgerRoot className={className}>
+      {title ? <LedgerTitle>{title}</LedgerTitle> : null}
+      {items.length ? (
+        <LedgerList>
+          {items.map(item => {
+            const tone = item.tone ?? 'neutral'
+            return (
+              <LedgerRow key={item.id} $tone={tone} {...rowButtonProps(item)}>
+                <RowCopy>
+                  <RowTitle>{item.title}</RowTitle>
+                  {item.detail ? <RowDetail>{item.detail}</RowDetail> : null}
+                </RowCopy>
+                {item.meta ? <RowMeta $tone={tone}>{item.meta}</RowMeta> : null}
+              </LedgerRow>
+            )
+          })}
+        </LedgerList>
+      ) : (
+        <Empty>{empty}</Empty>
+      )}
+    </LedgerRoot>
+  )
+}

package/src/components/common/desk/CreationDesk.tsx

@@ -0,0 +1,139 @@
+import type { ReactElement, ReactNode } from 'react'
+import { styled } from 'styled-components'
+import { BareTextarea } from '../inputs/BareTextarea.js'
+
+export interface CreationDeskProps {
+  title: ReactNode
+  note?: ReactNode
+  children: ReactNode
+  maxWidth?: string
+  className?: string
+}
+
+const DeskScroll = styled.div`
+  min-height: 0;
+  overflow-y: auto;
+  padding: 36px clamp(24px, 6vw, 96px) 60px;
+`
+
+const DeskColumn = styled.div<{ $maxWidth: string }>`
+  display: grid;
+  gap: 26px;
+  width: 100%;
+  max-width: ${({ $maxWidth }) => $maxWidth};
+  margin: 0 auto;
+`
+
+const DeskTitle = styled.h2`
+  margin: 0;
+  font-size: 17px;
+  font-weight: 700;
+`
+
+const DeskIntro = styled.p`
+  margin: 4px 0 0;
+  font-size: 13px;
+  opacity: 0.65;
+`
+
+export const CreationDeskSection = styled.section`
+  display: grid;
+  gap: 12px;
+`
+
+export const CreationDeskSectionLabel = styled.div`
+  color: rgb(104 112 123);
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+`
+
+export const CreationDeskRow = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+`
+
+export const CreationDeskNote = styled.div`
+  color: rgb(104 112 123);
+  font-size: 12px;
+  line-height: 1.45;
+  opacity: 0.68;
+`
+
+export const CreationDeskTextarea = styled(BareTextarea)`
+  width: 100%;
+  min-height: 140px;
+  padding: 14px 16px;
+  border: 1px solid rgb(127 127 127 / 24%);
+  border-radius: 8px;
+  background: rgb(255 255 255 / 55%);
+  color: inherit;
+  font: inherit;
+  font-size: 14px;
+  line-height: 1.6;
+  resize: vertical;
+`
+
+export const CreationDeskFieldBox = styled.div`
+  display: grid;
+  gap: 12px;
+  padding: 14px 16px;
+  border: 1px solid rgb(127 127 127 / 24%);
+  border-radius: 8px;
+  background: rgb(255 255 255 / 55%);
+`
+
+export const CreationDeskFieldTextarea = styled(BareTextarea)`
+  width: 100%;
+  min-height: 92px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 14px;
+  line-height: 1.6;
+  outline: 0;
+  resize: vertical;
+`
+
+export const CreationDeskSourceCard = styled.div`
+  display: grid;
+  gap: 8px;
+  padding: 14px 16px;
+  border: 1px solid rgb(127 127 127 / 20%);
+  border-radius: 8px;
+  background: rgb(255 255 255 / 45%);
+  font-size: 13px;
+`
+
+export const CreationDeskSourceHead = styled.div`
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  font-weight: 650;
+`
+
+export function CreationDesk({
+  title,
+  note,
+  children,
+  maxWidth = '760px',
+  className,
+}: CreationDeskProps): ReactElement {
+  return (
+    <DeskScroll className={className}>
+      <DeskColumn $maxWidth={maxWidth}>
+        <div>
+          <DeskTitle>{title}</DeskTitle>
+          {note ? <DeskIntro>{note}</DeskIntro> : null}
+        </div>
+        {children}
+      </DeskColumn>
+    </DeskScroll>
+  )
+}

package/src/components/common/desk/DailyBrief.tsx

@@ -0,0 +1,160 @@
+import { type ReactNode, useState } from 'react'
+import { styled } from 'styled-components'
+import {
+  MentionButton,
+  MentionHoverCard,
+  MentionHoverLine,
+  MentionHoverTitle,
+  MentionWrap,
+} from '../narrative/NarrativeMention.js'
+
+export type DailyBriefSpan =
+  | { kind: 'text'; text: string }
+  | {
+      kind: 'mention'
+      label: string
+      id: string
+      title?: string
+      detail?: string
+      meta?: string
+    }
+
+export interface DailyBriefProps {
+  title: string
+  writtenAt: string
+  author?: string
+  spans: readonly DailyBriefSpan[]
+  emptyText?: string
+  actions?: ReactNode
+  onMentionSelect?: (id: string) => void
+}
+
+const Surface = styled.article`
+  width: 100%;
+  max-width: 760px;
+  margin: 0 auto;
+  padding: 36px 44px 38px;
+  border: 1px solid rgba(217, 222, 229, 0.72);
+  border-radius: 4px;
+  background: var(--daily-brief-paper, #fffefa);
+  box-shadow: 0 18px 54px rgba(38, 46, 55, 0.055);
+  color: var(--daily-brief-ink, inherit);
+`
+
+const Kicker = styled.div`
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 16px;
+  color: var(--daily-brief-faint, #9aa2ad);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+`
+
+const Meta = styled.span`
+  white-space: nowrap;
+`
+
+const Body = styled.p`
+  margin: 20px 0 0;
+  color: var(--daily-brief-ink, inherit);
+  font-size: clamp(24px, 3vw, 34px);
+  font-weight: 400;
+  line-height: 1.48;
+  letter-spacing: 0;
+`
+
+const Empty = styled.p`
+  margin: 20px 0 0;
+  color: var(--daily-brief-muted, #737b86);
+  font-size: 18px;
+  line-height: 1.55;
+`
+
+const Footer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 22px;
+  color: var(--daily-brief-muted, #737b86);
+`
+
+function formatBriefDate(iso: string): string {
+  const date = new Date(iso)
+  if (Number.isNaN(date.getTime())) return iso
+  return date.toLocaleDateString(undefined, {
+    weekday: 'short',
+    month: 'short',
+    day: 'numeric',
+  })
+}
+
+function DailyBriefMention({
+  span,
+  onSelect,
+}: {
+  span: Extract<DailyBriefSpan, { kind: 'mention' }>
+  onSelect?: (id: string) => void
+}): React.ReactElement {
+  const [open, setOpen] = useState(false)
+  return (
+    <MentionWrap
+      onMouseEnter={() => setOpen(true)}
+      onMouseLeave={() => setOpen(false)}
+    >
+      <MentionButton type="button" onClick={() => onSelect?.(span.id)}>
+        {span.label}
+      </MentionButton>
+      {open ? (
+        <MentionHoverCard>
+          <MentionHoverTitle>{span.title ?? span.label}</MentionHoverTitle>
+          {span.detail ? (
+            <MentionHoverLine>{span.detail}</MentionHoverLine>
+          ) : null}
+          {span.meta ? <MentionHoverLine>{span.meta}</MentionHoverLine> : null}
+        </MentionHoverCard>
+      ) : null}
+    </MentionWrap>
+  )
+}
+
+export function DailyBrief({
+  title,
+  writtenAt,
+  author,
+  spans,
+  emptyText = 'Nothing needs your attention right now.',
+  actions,
+  onMentionSelect,
+}: DailyBriefProps): React.ReactElement {
+  return (
+    <Surface>
+      <Kicker>
+        <span>{title}</span>
+        <Meta>
+          {formatBriefDate(writtenAt)}
+          {author ? ` · ${author}` : ''}
+        </Meta>
+      </Kicker>
+      {spans.length ? (
+        <Body>
+          {spans.map((span, index) =>
+            span.kind === 'text' ? (
+              <span key={`text-${index}`}>{span.text}</span>
+            ) : (
+              <DailyBriefMention
+                key={`mention-${span.id}-${index}`}
+                span={span}
+                onSelect={onMentionSelect}
+              />
+            ),
+          )}
+        </Body>
+      ) : (
+        <Empty>{emptyText}</Empty>
+      )}
+      {actions ? <Footer>{actions}</Footer> : null}
+    </Surface>
+  )
+}