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

package/src/components/common/evidence/StructuredEvidenceView.test.tsx

@@ -0,0 +1,77 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import {
+  StructuredClaimProofCaveatView,
+  StructuredFigureCallouts,
+  StructuredMetricEvidenceView,
+} from './StructuredEvidenceView.js'
+
+describe('StructuredEvidenceView', () => {
+  it('renders metric, chart, and table evidence with stable data attributes', () => {
+    const html = renderToStaticMarkup(
+      <StructuredMetricEvidenceView
+        records={[
+          {
+            id: 'metric_one',
+            kind: 'metric',
+            value: '88%',
+            phrase: '88% automated',
+          },
+          {
+            id: 'chart_one',
+            kind: 'chart',
+            series: [{ label: 'Chart 3', value: 88, unit: '%' }],
+          },
+          {
+            id: 'table_one',
+            kind: 'table',
+            columns: ['Evidence', 'Value'],
+            rows: [{ cells: ['Chart 3', '88%'] }],
+          },
+        ]}
+      />,
+    )
+
+    expect(html).toContain('data-slides2-structured-evidence="metric_one"')
+    expect(html).toContain('data-slides2-evidence-kind="chart"')
+    expect(html).toContain('<th>Evidence</th>')
+  })
+
+  it('renders claim/proof/caveat and figure callouts', () => {
+    const html = renderToStaticMarkup(
+      <>
+        <StructuredClaimProofCaveatView
+          record={{
+            id: 'cpc_one',
+            kind: 'claim-proof-caveat',
+            claim: 'Automation is inspectable.',
+            proof: 'Chart 3',
+            caveat: 'Review remains human.',
+          }}
+        />
+        <StructuredFigureCallouts
+          records={[
+            {
+              id: 'figure_one',
+              kind: 'annotated-figure',
+              regions: [
+                {
+                  label: 'Figure B2',
+                  x: 0.1,
+                  y: 0.1,
+                  w: 0.3,
+                  h: 0.2,
+                  callout: 'Review boundary',
+                },
+              ],
+            },
+          ]}
+        />
+      </>,
+    )
+
+    expect(html).toContain('data-slides2-structured-evidence="cpc_one"')
+    expect(html).toContain('Review remains human.')
+    expect(html).toContain('Figure B2')
+  })
+})

package/src/components/common/evidence/StructuredEvidenceView.tsx

@@ -0,0 +1,312 @@
+import type { ReactElement } from 'react'
+import { styled } from 'styled-components'
+
+export interface StructuredMetricEvidence {
+  id: string
+  kind: 'metric'
+  value: string
+  unit?: string
+  phrase: string
+}
+
+export interface StructuredTableEvidence {
+  id: string
+  kind: 'table'
+  columns: string[]
+  rows: Array<{ cells: string[] }>
+}
+
+export interface StructuredChartEvidence {
+  id: string
+  kind: 'chart'
+  series: Array<{ label: string; value: number; unit?: string }>
+}
+
+export interface StructuredAnnotatedFigureEvidence {
+  id: string
+  kind: 'annotated-figure'
+  regions: Array<{
+    label: string
+    x: number
+    y: number
+    w: number
+    h: number
+    callout: string
+  }>
+}
+
+export interface StructuredClaimProofCaveatEvidence {
+  id: string
+  kind: 'claim-proof-caveat'
+  claim: string
+  proof: string
+  caveat?: string
+}
+
+export type StructuredEvidenceViewRecord =
+  | StructuredMetricEvidence
+  | StructuredTableEvidence
+  | StructuredChartEvidence
+  | StructuredAnnotatedFigureEvidence
+  | StructuredClaimProofCaveatEvidence
+
+const EvidencePanel = styled.div`
+  display: grid;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  gap: 10px;
+  align-content: stretch;
+  overflow: hidden;
+`
+
+const MetricGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 10px;
+`
+
+const MetricCard = styled.div`
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+  padding: 10px 12px;
+  border: 1px solid currentColor;
+  border-radius: 6px;
+  background: color-mix(in srgb, currentColor 7%, transparent);
+`
+
+const MetricValue = styled.div`
+  font-size: 1.45em;
+  font-weight: 780;
+  line-height: 1;
+`
+
+const EvidenceCaption = styled.div`
+  font-size: 0.52em;
+  font-weight: 620;
+  line-height: 1.25;
+  opacity: 0.78;
+`
+
+const ChartRows = styled.div`
+  display: grid;
+  gap: 5px;
+`
+
+const ChartRow = styled.div`
+  display: grid;
+  grid-template-columns: minmax(72px, 0.8fr) minmax(60px, 1.4fr) auto;
+  gap: 8px;
+  align-items: center;
+  font-size: 0.58em;
+  line-height: 1.1;
+`
+
+const ChartTrack = styled.div`
+  height: 8px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: color-mix(in srgb, currentColor 16%, transparent);
+`
+
+const ChartBar = styled.div<{ $pct: number }>`
+  width: ${({ $pct }) => `${Math.max(4, Math.min(100, $pct))}%`};
+  height: 100%;
+  border-radius: inherit;
+  background: currentColor;
+`
+
+const EvidenceTable = styled.table`
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.52em;
+  line-height: 1.18;
+
+  th,
+  td {
+    padding: 5px 6px;
+    border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
+    text-align: left;
+    vertical-align: top;
+  }
+
+  th {
+    font-weight: 760;
+  }
+`
+
+const ClaimProofCaveat = styled.div`
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+  height: 100%;
+`
+
+const ClaimProofCell = styled.div`
+  display: grid;
+  align-content: start;
+  gap: 6px;
+  min-width: 0;
+  padding: 10px;
+  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
+  border-radius: 6px;
+  background: color-mix(in srgb, currentColor 6%, transparent);
+  font-size: 0.56em;
+  line-height: 1.2;
+`
+
+const FigureCallout = styled.div<{
+  $x: number
+  $y: number
+  $w: number
+  $h: number
+}>`
+  position: absolute;
+  left: ${({ $x }) => `${$x * 100}%`};
+  top: ${({ $y }) => `${$y * 100}%`};
+  width: ${({ $w }) => `${$w * 100}%`};
+  min-height: ${({ $h }) => `${$h * 100}%`};
+  padding: 5px 7px;
+  border: 1px solid currentColor;
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--slides2-panel, #ffffff) 82%, transparent);
+  color: inherit;
+  font-size: 10px;
+  font-weight: 720;
+  line-height: 1.2;
+`
+
+export function StructuredMetricEvidenceView({
+  records,
+}: {
+  records: StructuredEvidenceViewRecord[]
+}): ReactElement {
+  const metrics = records.filter(record => record.kind === 'metric')
+  const chart = records.find(record => record.kind === 'chart')
+  const table = records.find(record => record.kind === 'table')
+  const chartMax =
+    chart?.series.reduce((max, series) => Math.max(max, series.value), 0) ?? 0
+  return (
+    <EvidencePanel>
+      {metrics.length ? (
+        <MetricGrid>
+          {metrics.slice(0, 4).map(metric => (
+            <MetricCard
+              key={metric.id}
+              data-slides2-structured-evidence={metric.id}
+              data-slides2-evidence-kind={metric.kind}
+            >
+              <MetricValue>
+                {metric.value}
+                {metric.unit && !metric.value.endsWith(metric.unit)
+                  ? ` ${metric.unit}`
+                  : ''}
+              </MetricValue>
+              <EvidenceCaption>{metric.phrase}</EvidenceCaption>
+            </MetricCard>
+          ))}
+        </MetricGrid>
+      ) : null}
+      {chart ? (
+        <ChartRows
+          data-slides2-structured-evidence={chart.id}
+          data-slides2-evidence-kind={chart.kind}
+        >
+          {chart.series.slice(0, 5).map(series => (
+            <ChartRow key={`${chart.id}:${series.label}`}>
+              <span>{series.label}</span>
+              <ChartTrack>
+                <ChartBar
+                  $pct={chartMax > 0 ? (series.value / chartMax) * 100 : 0}
+                />
+              </ChartTrack>
+              <strong>
+                {series.value}
+                {series.unit ?? ''}
+              </strong>
+            </ChartRow>
+          ))}
+        </ChartRows>
+      ) : null}
+      {table ? (
+        <EvidenceTable
+          data-slides2-structured-evidence={table.id}
+          data-slides2-evidence-kind={table.kind}
+        >
+          <thead>
+            <tr>
+              {table.columns.map(column => (
+                <th key={column}>{column}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {table.rows.slice(0, 4).map((row, index) => (
+              <tr key={`${table.id}:${index}`}>
+                {row.cells.map((cell, cellIndex) => (
+                  <td key={`${table.id}:${index}:${cellIndex}`}>{cell}</td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </EvidenceTable>
+      ) : null}
+    </EvidencePanel>
+  )
+}
+
+export function StructuredClaimProofCaveatView({
+  record,
+}: {
+  record?: StructuredClaimProofCaveatEvidence
+}): ReactElement | null {
+  if (!record) return null
+  return (
+    <ClaimProofCaveat
+      data-slides2-structured-evidence={record.id}
+      data-slides2-evidence-kind={record.kind}
+    >
+      <ClaimProofCell>
+        <strong>Claim</strong>
+        <span>{record.claim}</span>
+      </ClaimProofCell>
+      <ClaimProofCell>
+        <strong>Proof</strong>
+        <span>{record.proof}</span>
+      </ClaimProofCell>
+      <ClaimProofCell>
+        <strong>Caveat</strong>
+        <span>{record.caveat ?? 'No caveat supplied.'}</span>
+      </ClaimProofCell>
+    </ClaimProofCaveat>
+  )
+}
+
+export function StructuredFigureCallouts({
+  records,
+}: {
+  records: StructuredEvidenceViewRecord[]
+}): ReactElement {
+  return (
+    <>
+      {records
+        .filter(record => record.kind === 'annotated-figure')
+        .flatMap(record =>
+          record.regions.map(region => (
+            <FigureCallout
+              key={`${record.id}:${region.label}`}
+              data-slides2-structured-evidence={record.id}
+              data-slides2-evidence-kind={record.kind}
+              $x={region.x}
+              $y={region.y}
+              $w={region.w}
+              $h={region.h}
+            >
+              {region.label}: {region.callout}
+            </FigureCallout>
+          )),
+        )}
+    </>
+  )
+}

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

@@ -0,0 +1,13 @@
+export {
+  StructuredClaimProofCaveatView,
+  StructuredFigureCallouts,
+  StructuredMetricEvidenceView,
+} from './StructuredEvidenceView.js'
+export type {
+  StructuredAnnotatedFigureEvidence,
+  StructuredChartEvidence,
+  StructuredClaimProofCaveatEvidence,
+  StructuredEvidenceViewRecord,
+  StructuredMetricEvidence,
+  StructuredTableEvidence,
+} from './StructuredEvidenceView.js'

package/src/components/common/feedback/Badge.tsx

@@ -0,0 +1,33 @@
+import { styled } from 'styled-components'
+
+export type BadgeTone = 'accent' | 'neutral'
+
+export interface BadgeProps {
+  tone?: BadgeTone
+  children: React.ReactNode
+}
+
+//#region styled-components
+
+const StyledBadge = styled.span<{ $tone: BadgeTone }>`
+  padding: 2px var(--platform-spacing-sm);
+  border-radius: var(--platform-radius-full);
+  font-size: var(--platform-typography-font-size-sm);
+  background: ${({ $tone }) =>
+    $tone === 'accent'
+      ? 'var(--platform-colors-accent-muted)'
+      : 'var(--platform-colors-surface-hover)'};
+  color: ${({ $tone }) =>
+    $tone === 'accent'
+      ? 'var(--platform-colors-accent)'
+      : 'var(--platform-colors-text-secondary)'};
+`
+
+//#endregion
+
+export function Badge({
+  tone = 'accent',
+  children,
+}: BadgeProps): React.ReactElement {
+  return <StyledBadge $tone={tone}>{children}</StyledBadge>
+}

package/src/components/common/feedback/CapabilityPills.tsx

@@ -0,0 +1,36 @@
+import { styled } from 'styled-components'
+
+export interface CapabilityPillsProps {
+  items: string[]
+}
+
+//#region styled-components
+
+const StyledList = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--platform-spacing-xs);
+  min-width: 0;
+`
+
+const StyledPill = styled.span`
+  padding: 2px var(--platform-spacing-sm);
+  border-radius: var(--platform-radius-full);
+  background: var(--platform-colors-surface-active);
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-sm);
+`
+
+//#endregion
+
+export function CapabilityPills({
+  items,
+}: CapabilityPillsProps): React.ReactElement {
+  return (
+    <StyledList>
+      {items.map(item => (
+        <StyledPill key={item}>{item}</StyledPill>
+      ))}
+    </StyledList>
+  )
+}

package/src/components/common/feedback/EmptyState.tsx

@@ -0,0 +1,132 @@
+import type { ReactNode } from 'react'
+import { styled } from 'styled-components'
+import { Button } from '../buttons/Button.js'
+import { FlexCol } from '../containers/flex.js'
+import { Heading } from '../typography/Heading.js'
+import { Kicker } from '../typography/Kicker.js'
+import { Text } from '../typography/Text.js'
+
+export type EmptyStateTone = 'neutral' | 'error'
+export type EmptyStateVariant = 'centered' | 'inline'
+
+export interface EmptyStateAction {
+  label: string
+  onClick: () => void
+}
+
+export interface EmptyStateProps {
+  title: string
+  message?: string
+  kicker?: string
+  tone?: EmptyStateTone
+  variant?: EmptyStateVariant
+  action?: EmptyStateAction
+  actions?: ReactNode
+}
+
+//#region styled-components
+
+const StyledInlineRoot = styled.div`
+  display: grid;
+  place-items: start;
+  gap: var(--platform-spacing-sm);
+  width: auto;
+  max-width: 100%;
+  align-self: stretch;
+  box-sizing: border-box;
+  padding: var(--platform-spacing-lg);
+  border: 1px dashed var(--platform-colors-border);
+  border-radius: var(--platform-radius-md);
+  background: var(--platform-colors-surface-hover);
+`
+
+const StyledInlineTitle = styled.h3`
+  margin: 0;
+  font-size: var(--platform-typography-font-size-xl);
+  font-weight: var(--platform-typography-font-weight-medium);
+  line-height: var(--platform-typography-line-height-tight);
+  letter-spacing: 0;
+`
+
+const StyledInlineDescription = styled.p`
+  max-width: 42rem;
+  margin: 0;
+  color: var(--platform-colors-text-secondary);
+  line-height: var(--platform-typography-line-height-base);
+`
+
+const StyledInlineActions = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--platform-spacing-sm);
+  margin-top: var(--platform-spacing-xs);
+`
+
+//#endregion
+
+export function EmptyState({
+  title,
+  message,
+  kicker,
+  tone = 'neutral',
+  variant = 'centered',
+  action,
+  actions,
+}: EmptyStateProps): React.ReactElement {
+  if (variant === 'inline') {
+    return (
+      <StyledInlineRoot>
+        {kicker ? <Kicker>{kicker}</Kicker> : null}
+        <StyledInlineTitle>{title}</StyledInlineTitle>
+        {message ? (
+          <StyledInlineDescription>{message}</StyledInlineDescription>
+        ) : null}
+        {actions ? (
+          <StyledInlineActions>{actions}</StyledInlineActions>
+        ) : action ? (
+          <StyledInlineActions>
+            <Button variant="subtle" size="sm" onClick={action.onClick}>
+              {action.label}
+            </Button>
+          </StyledInlineActions>
+        ) : null}
+      </StyledInlineRoot>
+    )
+  }
+
+  return (
+    <FlexCol
+      $align="center"
+      $justify="center"
+      $gap="md"
+      $flex="1"
+      $width="100%"
+      style={{
+        padding: 'var(--platform-spacing-xxl)',
+        textAlign: 'center',
+      }}
+    >
+      <Heading level={2} weight="medium">
+        {title}
+      </Heading>
+      {message ? (
+        <FlexCol $align="center" style={{ maxWidth: '36rem' }}>
+          <Text
+            as="p"
+            tone={tone === 'error' ? 'danger' : 'secondary'}
+            align="center"
+          >
+            {message}
+          </Text>
+        </FlexCol>
+      ) : null}
+      {actions ? (
+        <FlexCol $align="center">{actions}</FlexCol>
+      ) : action ? (
+        <Button variant="subtle" size="sm" onClick={action.onClick}>
+          {action.label}
+        </Button>
+      ) : null}
+    </FlexCol>
+  )
+}

package/src/components/common/feedback/InfoHint.tsx

@@ -0,0 +1,67 @@
+import type { ReactNode } from 'react'
+import { styled } from 'styled-components'
+
+export interface InfoHintProps {
+  label: string
+  align?: 'left' | 'right'
+  children: ReactNode
+}
+
+const StyledWrap = styled.span`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+
+  &:hover > div,
+  &:focus-within > div {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0);
+  }
+`
+
+const StyledButton = styled.button`
+  width: 26px;
+  height: 26px;
+  border: 1px solid var(--platform-colors-border, #e1e6ed);
+  border-radius: var(--platform-radius-full, 999px);
+  background: rgb(255 255 255 / 84%);
+  color: var(--platform-colors-text-secondary, #6d7680);
+  font-size: 12px;
+  font-weight: 900;
+  cursor: help;
+`
+
+const StyledPopover = styled.div<{ $align: 'left' | 'right' }>`
+  position: absolute;
+  z-index: 20;
+  top: calc(100% + 8px);
+  left: ${({ $align }) => ($align === 'right' ? 'auto' : '0')};
+  right: ${({ $align }) => ($align === 'right' ? '0' : 'auto')};
+  width: min(330px, calc(100vw - 72px));
+  border: 1px solid rgb(217 222 229 / 94%);
+  border-radius: var(--platform-radius-md, 8px);
+  background: rgb(255 255 255 / 98%);
+  box-shadow: 0 18px 44px rgb(38 46 55 / 16%);
+  padding: 12px 14px;
+  color: var(--platform-colors-text, #2e3338);
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-4px);
+  transition: opacity 120ms ease, transform 120ms ease;
+`
+
+export function InfoHint({
+  label,
+  align = 'left',
+  children,
+}: InfoHintProps): React.ReactElement {
+  return (
+    <StyledWrap>
+      <StyledButton type="button" aria-label={label}>
+        i
+      </StyledButton>
+      <StyledPopover $align={align}>{children}</StyledPopover>
+    </StyledWrap>
+  )
+}