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

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

@@ -1,312 +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>
-          )),
-        )}
-    </>
-  )
-}
+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(--slides-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-slides-structured-evidence={metric.id}
+              data-slides-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-slides-structured-evidence={chart.id}
+          data-slides-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-slides-structured-evidence={table.id}
+          data-slides-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-slides-structured-evidence={record.id}
+      data-slides-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-slides-structured-evidence={record.id}
+              data-slides-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

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