@puredesktop/puredesktop-ui-bridge 2.1.4 → 2.1.7

package/src/components/data/DataChart.tsx

@@ -53,11 +53,11 @@ export interface DataChartBlock {
   chartType?: DataChartType
 }
 
-const INK = '#2e3338'
-const MUTED = '#757e8a'
-const FAINT = '#a5adb8'
-const GRID = '#e5e9ee'
-const AXIS = '#8d96a2'
+const INK = '#1c1a17'
+const MUTED = '#6b665e'
+const FAINT = '#a8a299'
+const GRID = '#e7e4dd'
+const AXIS = '#8f897f'
 
 function valueLabel(value: DataCellValue): string {
   return value === null ? '' : String(value)
@@ -166,10 +166,14 @@ function chartRowsForView({
     const existing = groups.get(label)
     if (existing) {
       hasRepeatedGroup = true
-      for (const key of yKeys) existing[key] = numeric(existing[key]) + numeric(row[key])
+      for (const key of yKeys)
+        existing[key] = numeric(existing[key]) + numeric(row[key])
       continue
     }
-    const groupedRow: Record<string, DataCellValue> = { ...row, [groupKey]: label }
+    const groupedRow: Record<string, DataCellValue> = {
+      ...row,
+      [groupKey]: label,
+    }
     for (const key of yKeys) groupedRow[key] = numeric(row[key])
     groups.set(label, groupedRow)
   }
@@ -280,19 +284,22 @@ export function DataChart({ block, view, table, palette }: DataChartProps) {
     histogramDomain[0] === histogramDomain[1]
       ? 1
       : (histogramDomain[1] - histogramDomain[0]) / histogramBinCount
-  const histogramBins = Array.from({ length: histogramBinCount }, (_, index) => {
-    const start = (histogramDomain[0] ?? 0) + histogramStep * index
-    const end =
-      index === histogramBinCount - 1
-        ? histogramDomain[1] ?? start
-        : start + histogramStep
-    const count = histogramValues.filter(value =>
-      index === histogramBinCount - 1
-        ? value >= start && value <= end
-        : value >= start && value < end,
-    ).length
-    return { start, end, count }
-  })
+  const histogramBins = Array.from(
+    { length: histogramBinCount },
+    (_, index) => {
+      const start = (histogramDomain[0] ?? 0) + histogramStep * index
+      const end =
+        index === histogramBinCount - 1
+          ? histogramDomain[1] ?? start
+          : start + histogramStep
+      const count = histogramValues.filter(value =>
+        index === histogramBinCount - 1
+          ? value >= start && value <= end
+          : value >= start && value < end,
+      ).length
+      return { start, end, count }
+    },
+  )
   const histogramY = scaleLinear()
     .domain([0, max(histogramBins, bin => bin.count) ?? 1])
     .nice()
@@ -317,8 +324,7 @@ export function DataChart({ block, view, table, palette }: DataChartProps) {
     ): item is {
       label: string
       stats: NonNullable<ReturnType<typeof quartiles>>
-    } =>
-      item.stats !== null,
+    } => item.stats !== null,
   )
   const boxY = scaleLinear()
     .domain([
@@ -380,7 +386,7 @@ export function DataChart({ block, view, table, palette }: DataChartProps) {
         x={margin.left}
         y={26}
         fill={INK}
-        fontFamily="Source Sans 3, system-ui, sans-serif"
+        fontFamily="Archivo, system-ui, sans-serif"
         fontSize="18"
         fontWeight="700"
       >
@@ -390,7 +396,7 @@ export function DataChart({ block, view, table, palette }: DataChartProps) {
         x={margin.left}
         y={44}
         fill={MUTED}
-        fontFamily="Source Sans 3, system-ui, sans-serif"
+        fontFamily="Archivo, system-ui, sans-serif"
         fontSize="11"
         fontWeight="600"
       >
@@ -400,7 +406,12 @@ export function DataChart({ block, view, table, palette }: DataChartProps) {
         {showInlineLegend ? (
           <g transform={`translate(${Math.max(0, innerWidth - 168)},-30)`}>
             {yKeys.slice(0, 4).map((key, index) => (
-              <g key={key} transform={`translate(${(index % 2) * 84},${Math.floor(index / 2) * 16})`}>
+              <g
+                key={key}
+                transform={`translate(${(index % 2) * 84},${
+                  Math.floor(index / 2) * 16
+                })`}
+              >
                 <line
                   x1={0}
                   x2={14}
@@ -414,7 +425,7 @@ export function DataChart({ block, view, table, palette }: DataChartProps) {
                   x={20}
                   y={4}
                   fill={MUTED}
-                  fontFamily="Source Sans 3, system-ui, sans-serif"
+                  fontFamily="Archivo, system-ui, sans-serif"
                   fontSize="10"
                   fontWeight="700"
                 >
@@ -440,7 +451,7 @@ export function DataChart({ block, view, table, palette }: DataChartProps) {
               textAnchor="middle"
               y={-4}
               fill={INK}
-              fontFamily="Source Sans 3, system-ui, sans-serif"
+              fontFamily="Archivo, system-ui, sans-serif"
               fontSize="22"
               fontWeight="800"
             >
@@ -450,7 +461,7 @@ export function DataChart({ block, view, table, palette }: DataChartProps) {
               textAnchor="middle"
               y={17}
               fill={MUTED}
-              fontFamily="Source Sans 3, system-ui, sans-serif"
+              fontFamily="Archivo, system-ui, sans-serif"
               fontSize="11"
               fontWeight="700"
             >
@@ -475,7 +486,7 @@ export function DataChart({ block, view, table, palette }: DataChartProps) {
                     x={16}
                     y={4}
                     fill={INK}
-                    fontFamily="Source Sans 3, system-ui, sans-serif"
+                    fontFamily="Archivo, system-ui, sans-serif"
                     fontSize="12"
                     fontWeight="700"
                   >
@@ -486,7 +497,7 @@ export function DataChart({ block, view, table, palette }: DataChartProps) {
                     y={4}
                     textAnchor="end"
                     fill={MUTED}
-                    fontFamily="Source Sans 3, system-ui, sans-serif"
+                    fontFamily="Archivo, system-ui, sans-serif"
                     fontSize="11"
                     fontWeight="700"
                   >
@@ -515,7 +526,7 @@ export function DataChart({ block, view, table, palette }: DataChartProps) {
                   y={4}
                   textAnchor="end"
                   fill={MUTED}
-                  fontFamily="Source Sans 3, system-ui, sans-serif"
+                  fontFamily="Archivo, system-ui, sans-serif"
                   fontSize="11"
                   fontWeight="600"
                 >
@@ -550,7 +561,7 @@ export function DataChart({ block, view, table, palette }: DataChartProps) {
                     x={0}
                     y={rowY + 4}
                     fill={INK}
-                    fontFamily="Source Sans 3, system-ui, sans-serif"
+                    fontFamily="Archivo, system-ui, sans-serif"
                     fontSize="12"
                     fontWeight="700"
                   >
@@ -576,7 +587,7 @@ export function DataChart({ block, view, table, palette }: DataChartProps) {
                     x={180 + lollipopX(value)}
                     y={rowY + 4}
                     fill={MUTED}
-                    fontFamily="Source Sans 3, system-ui, sans-serif"
+                    fontFamily="Archivo, system-ui, sans-serif"
                     fontSize="11"
                     fontWeight="700"
                   >
@@ -598,7 +609,7 @@ export function DataChart({ block, view, table, palette }: DataChartProps) {
                     x={0}
                     y={rowY + 4}
                     fill={INK}
-                    fontFamily="Source Sans 3, system-ui, sans-serif"
+                    fontFamily="Archivo, system-ui, sans-serif"
                     fontSize="11"
                     fontWeight="700"
                   >
@@ -617,7 +628,7 @@ export function DataChart({ block, view, table, palette }: DataChartProps) {
                     x={Math.min(innerWidth - 28, 188 + barWidth)}
                     y={rowY + 4}
                     fill={MUTED}
-                    fontFamily="Source Sans 3, system-ui, sans-serif"
+                    fontFamily="Archivo, system-ui, sans-serif"
                     fontSize="10"
                     fontWeight="700"
                   >
@@ -646,7 +657,7 @@ export function DataChart({ block, view, table, palette }: DataChartProps) {
                     y={innerHeight + 24}
                     textAnchor="middle"
                     fill={FAINT}
-                    fontFamily="Source Sans 3, system-ui, sans-serif"
+                    fontFamily="Archivo, system-ui, sans-serif"
                     fontSize="10"
                     fontWeight="700"
                   >
@@ -675,7 +686,10 @@ export function DataChart({ block, view, table, palette }: DataChartProps) {
                     x={x}
                     y={boxY(item.stats.q3)}
                     width={boxX.bandwidth()}
-                    height={Math.max(2, boxY(item.stats.q1) - boxY(item.stats.q3))}
+                    height={Math.max(
+                      2,
+                      boxY(item.stats.q1) - boxY(item.stats.q3),
+                    )}
                     rx={5}
                     fill={color}
                     opacity={0.22}
@@ -695,7 +709,7 @@ export function DataChart({ block, view, table, palette }: DataChartProps) {
                     y={innerHeight + 24}
                     textAnchor="middle"
                     fill={FAINT}
-                    fontFamily="Source Sans 3, system-ui, sans-serif"
+                    fontFamily="Archivo, system-ui, sans-serif"
                     fontSize="10"
                     fontWeight="700"
                   >
@@ -708,8 +722,10 @@ export function DataChart({ block, view, table, palette }: DataChartProps) {
         {chartType === 'heatmap'
           ? heatmapRows.flatMap(rowLabel =>
               heatmapColumns.map(columnLabel => {
-                const value = heatmapValues.get(`${columnLabel}::${rowLabel}`) ?? 0
-                const opacity = heatmapMax > 0 ? 0.12 + (value / heatmapMax) * 0.72 : 0.12
+                const value =
+                  heatmapValues.get(`${columnLabel}::${rowLabel}`) ?? 0
+                const opacity =
+                  heatmapMax > 0 ? 0.12 + (value / heatmapMax) * 0.72 : 0.12
                 return (
                   <g key={`${columnLabel}-${rowLabel}`}>
                     <rect
@@ -723,11 +739,18 @@ export function DataChart({ block, view, table, palette }: DataChartProps) {
                     />
                     {heatmapX.bandwidth() > 46 && heatmapY.bandwidth() > 24 ? (
                       <text
-                        x={(heatmapX(columnLabel) ?? 0) + heatmapX.bandwidth() / 2}
-                        y={(heatmapY(rowLabel) ?? 0) + heatmapY.bandwidth() / 2 + 4}
+                        x={
+                          (heatmapX(columnLabel) ?? 0) +
+                          heatmapX.bandwidth() / 2
+                        }
+                        y={
+                          (heatmapY(rowLabel) ?? 0) +
+                          heatmapY.bandwidth() / 2 +
+                          4
+                        }
                         textAnchor="middle"
                         fill={INK}
-                        fontFamily="Source Sans 3, system-ui, sans-serif"
+                        fontFamily="Archivo, system-ui, sans-serif"
                         fontSize="10"
                         fontWeight="700"
                       >
@@ -747,7 +770,7 @@ export function DataChart({ block, view, table, palette }: DataChartProps) {
                 y={innerHeight + 24}
                 textAnchor="middle"
                 fill={FAINT}
-                fontFamily="Source Sans 3, system-ui, sans-serif"
+                fontFamily="Archivo, system-ui, sans-serif"
                 fontSize="10"
                 fontWeight="700"
               >
@@ -763,7 +786,7 @@ export function DataChart({ block, view, table, palette }: DataChartProps) {
                 y={(heatmapY(rowLabel) ?? 0) + heatmapY.bandwidth() / 2 + 4}
                 textAnchor="end"
                 fill={MUTED}
-                fontFamily="Source Sans 3, system-ui, sans-serif"
+                fontFamily="Archivo, system-ui, sans-serif"
                 fontSize="10"
                 fontWeight="700"
               >
@@ -826,56 +849,58 @@ export function DataChart({ block, view, table, palette }: DataChartProps) {
             chartType === 'heatmap' ||
             chartType === 'stackedBar'
           ? null
-          : (chartType === 'bubble' ? yKeys.slice(0, 1) : yKeys).map((key, index) => {
-              const path = line<Record<string, DataCellValue>>()
-                .x((_, rowIndex) => pointX(String(rowIndex)) ?? 0)
-                .y(row => y(numeric(row[key])))(rows)
-              const areaPath = area<Record<string, DataCellValue>>()
-                .x((_, rowIndex) => pointX(String(rowIndex)) ?? 0)
-                .y0(zeroY)
-                .y1(row => y(numeric(row[key])))(rows)
-              const color = colors[index % colors.length]
-              return (
-                <g key={key}>
-                  {chartType === 'area' ? (
-                    <path d={areaPath ?? ''} fill={color} opacity={0.18} />
-                  ) : null}
-                  {chartType !== 'scatter' && chartType !== 'bubble' ? (
-                    <path
-                      d={path ?? ''}
-                      fill="none"
-                      stroke={color}
-                      strokeWidth={2.2}
-                    />
-                  ) : null}
-                  {rows.map((row, rowIndex) => (
-                    <g key={`${key}-${rowIndex}-${valueLabel(row[xKey])}`}>
-                      <circle
-                        cx={pointX(String(rowIndex)) ?? 0}
-                        cy={y(numeric(row[key]))}
-                        r={
-                          chartType === 'bubble'
-                            ? bubbleSize(numeric(row[bubbleKey]))
-                            : chartType === 'scatter'
-                            ? 4
-                            : rowIndex === rows.length - 1
-                            ? 3.8
-                            : 2.7
-                        }
-                        fill={chartType === 'area' ? '#fff' : color}
+          : (chartType === 'bubble' ? yKeys.slice(0, 1) : yKeys).map(
+              (key, index) => {
+                const path = line<Record<string, DataCellValue>>()
+                  .x((_, rowIndex) => pointX(String(rowIndex)) ?? 0)
+                  .y(row => y(numeric(row[key])))(rows)
+                const areaPath = area<Record<string, DataCellValue>>()
+                  .x((_, rowIndex) => pointX(String(rowIndex)) ?? 0)
+                  .y0(zeroY)
+                  .y1(row => y(numeric(row[key])))(rows)
+                const color = colors[index % colors.length]
+                return (
+                  <g key={key}>
+                    {chartType === 'area' ? (
+                      <path d={areaPath ?? ''} fill={color} opacity={0.18} />
+                    ) : null}
+                    {chartType !== 'scatter' && chartType !== 'bubble' ? (
+                      <path
+                        d={path ?? ''}
+                        fill="none"
                         stroke={color}
-                        strokeWidth={chartType === 'area' ? 1.8 : 0}
-                        opacity={
-                          chartType === 'line' && rowIndex !== rows.length - 1
-                            ? 0.82
-                            : 1
-                        }
+                        strokeWidth={2.2}
                       />
-                    </g>
-                  ))}
-                </g>
-              )
-            })}
+                    ) : null}
+                    {rows.map((row, rowIndex) => (
+                      <g key={`${key}-${rowIndex}-${valueLabel(row[xKey])}`}>
+                        <circle
+                          cx={pointX(String(rowIndex)) ?? 0}
+                          cy={y(numeric(row[key]))}
+                          r={
+                            chartType === 'bubble'
+                              ? bubbleSize(numeric(row[bubbleKey]))
+                              : chartType === 'scatter'
+                              ? 4
+                              : rowIndex === rows.length - 1
+                              ? 3.8
+                              : 2.7
+                          }
+                          fill={chartType === 'area' ? '#fff' : color}
+                          stroke={color}
+                          strokeWidth={chartType === 'area' ? 1.8 : 0}
+                          opacity={
+                            chartType === 'line' && rowIndex !== rows.length - 1
+                              ? 0.82
+                              : 1
+                          }
+                        />
+                      </g>
+                    ))}
+                  </g>
+                )
+              },
+            )}
         {chartType !== 'donut' &&
         chartType !== 'lollipop' &&
         chartType !== 'horizontalBar' &&
@@ -898,7 +923,7 @@ export function DataChart({ block, view, table, palette }: DataChartProps) {
                   y={innerHeight + 25}
                   textAnchor="middle"
                   fill={FAINT}
-                  fontFamily="Source Sans 3, system-ui, sans-serif"
+                  fontFamily="Archivo, system-ui, sans-serif"
                   fontSize="11"
                   fontWeight="600"
                 >

package/src/components/data/dataTable.ts

@@ -45,7 +45,10 @@ function normalizeRows(rows: Record<string, unknown>[]): DataChartTable {
   return { columns, rows: normalizedRows }
 }
 
-export function parseDataTable(text: string, format: DataFormat): DataChartTable {
+export function parseDataTable(
+  text: string,
+  format: DataFormat,
+): DataChartTable {
   const trimmed = text.trim()
   if (!trimmed) return { columns: [], rows: [] }
 

package/src/components/editor/DocumentAppChrome.tsx

@@ -0,0 +1,172 @@
+import { useEffect, useState, type ReactElement, type ReactNode } from 'react'
+import { styled } from 'styled-components'
+import { Button } from '../common/buttons/Button.js'
+import { APP_HEADER_ACTIONS_PORTAL_ID } from '../common/containers/AppHeader.js'
+import { ToolbarActionDivider } from '../../editor/index.js'
+
+export function useDocumentAppHeaderActionsHost(): HTMLElement | null {
+  const [host, setHost] = useState<HTMLElement | null>(null)
+
+  useEffect(() => {
+    let timeout = 0
+    const syncHeaderActionsHost = (): void => {
+      const nextHost = document.getElementById(APP_HEADER_ACTIONS_PORTAL_ID)
+      if (nextHost) nextHost.dataset.layout = 'document-tools'
+      setHost(nextHost)
+      if (!nextHost) timeout = window.setTimeout(syncHeaderActionsHost, 100)
+    }
+    syncHeaderActionsHost()
+    return () => {
+      window.clearTimeout(timeout)
+      const currentHost = document.getElementById(APP_HEADER_ACTIONS_PORTAL_ID)
+      if (currentHost?.dataset.layout === 'document-tools')
+        delete currentHost.dataset.layout
+    }
+  }, [])
+
+  return host
+}
+
+export const DocumentAppHeaderBar = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  min-height: 34px;
+  overflow: hidden;
+  background: var(--pure-chrome-wordmark-bar, #fbfbfc);
+`
+
+export const DocumentAppHeaderDivider = styled(ToolbarActionDivider)`
+  flex: 0 0 auto;
+`
+
+export const DocumentAppTitleTab = styled.button`
+  position: relative;
+  display: inline-flex;
+  flex: 0 1 clamp(220px, 28vw, 420px);
+  align-self: stretch;
+  align-items: center;
+  gap: 14px;
+  min-width: 180px;
+  overflow: hidden;
+  color: var(--pure-chrome-ink, var(--platform-colors-text));
+  font-family: var(--platform-typography-font-family-serif, Georgia, serif);
+  font-size: 16.5px;
+  font-weight: 500;
+  line-height: 1.2;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  cursor: default;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+`
+
+export const DocumentAppViewTabButton = styled(Button).attrs({
+  variant: 'text' as const,
+  size: 'sm' as const,
+})`
+  color: var(--pure-chrome-tertiary, #8a857c);
+  font-size: 13px;
+  font-weight: 400;
+
+  &:hover:not(:disabled) {
+    color: var(--pure-chrome-ink, #1c1a17);
+    text-decoration: none;
+  }
+`
+
+export const DocumentAppTitleText = styled.span`
+  position: relative;
+  display: inline-flex;
+  align-self: stretch;
+  align-items: center;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &::after {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 1px;
+    background: var(--pure-chrome-accent-green, #1f9d57);
+    content: '';
+  }
+`
+
+export const DocumentAppTitleMeta = styled.span`
+  flex: 0 0 auto;
+  color: var(--pure-chrome-faint, var(--platform-colors-text-tertiary));
+  font-family: var(
+    --platform-typography-font-family-mono,
+    'JetBrains Mono',
+    monospace
+  );
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.2;
+`
+
+export const DocumentAppViewTabs = styled.div`
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 16px;
+  min-width: 0;
+`
+
+export const DocumentAppActions = styled.div`
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 14px;
+  min-width: 0;
+  overflow: hidden;
+`
+
+export const DocumentAppActionGroup = styled.div`
+  display: inline-flex;
+  flex: 0 1 auto;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+`
+
+export const DocumentAppSaveStatus = styled.span`
+  flex: 0 0 auto;
+  color: var(--pure-chrome-faint, var(--platform-colors-text-tertiary));
+  font-family: var(
+    --platform-typography-font-family-mono,
+    'JetBrains Mono',
+    monospace
+  );
+  font-size: 12px;
+  line-height: 1.2;
+  white-space: nowrap;
+`
+
+export function DocumentAppHeaderTitle({
+  title,
+  meta,
+}: {
+  title: ReactNode
+  meta?: ReactNode
+}): ReactElement {
+  return (
+    <DocumentAppTitleTab
+      type="button"
+      aria-selected="true"
+      title={typeof title === 'string' ? title : undefined}
+    >
+      <DocumentAppTitleText>{title}</DocumentAppTitleText>
+      {meta ? <DocumentAppTitleMeta>{meta}</DocumentAppTitleMeta> : null}
+    </DocumentAppTitleTab>
+  )
+}

package/src/components/editor/EditorCommentPromptDialog.tsx

@@ -91,7 +91,7 @@ const StyledPopover = styled.div`
   width: min(360px, calc(100vw - 32px));
   transform: translateX(-50%);
   border: 1px solid rgb(from var(--platform-colors-border) r g b / 0.92);
-  border-radius: 10px;
+  border-radius: var(--platform-radius-md, 0px);
   background: var(--platform-colors-surface);
   box-shadow: 0 18px 44px rgb(from var(--platform-colors-text) r g b / 0.16);
   color: var(--platform-colors-text);

package/src/components/editor/EditorLinkPromptDialog.tsx

@@ -52,7 +52,7 @@ const StyledLinkInput = styled(BareInput)`
   height: 32px;
   padding: 0 var(--platform-spacing-sm);
   border: 1px solid var(--platform-colors-border);
-  border-radius: 4px;
+  border-radius: var(--platform-radius-sm, 0px);
   background: var(--platform-colors-surface);
   color: var(--platform-colors-text);
   font-size: var(--platform-typography-font-size-sm);

package/src/components/print-design/PrintDesignPanel.test.tsx

@@ -118,13 +118,15 @@ describe('PrintDesignPanel', () => {
 
     expect(container.textContent).toContain('Design - PDF Typesetter')
     expect(container.textContent).toContain('Export PDF')
-    expect(container.querySelector('[aria-label="Print design"]')).not.toBeNull()
+    expect(
+      container.querySelector('[aria-label="Print design"]'),
+    ).not.toBeNull()
     expect(
       container.querySelector('[aria-label="Close print design"]'),
     ).not.toBeNull()
-    expect(container.textContent?.match(/Design - PDF Typesetter/g)).toHaveLength(
-      1,
-    )
+    expect(
+      container.textContent?.match(/Design - PDF Typesetter/g),
+    ).toHaveLength(1)
     expect(document.head.textContent).toMatch(/width:\s*100vw/)
     expect(document.head.textContent).toMatch(/height:\s*100vh/)
     expect(document.head.textContent).toMatch(/border-radius:\s*0/)
@@ -808,9 +810,9 @@ describe('PrintDesignPanel', () => {
           measure: '32rem',
           lead: 1.6,
           fonts: expect.objectContaining({
-            display: '"Source Sans 3", system-ui, sans-serif',
+            display: '"Archivo", system-ui, sans-serif',
             serif: '"Source Serif 4", Georgia, serif',
-            sans: '"Source Sans 3", system-ui, sans-serif',
+            sans: '"Archivo", system-ui, sans-serif',
           }),
         }),
         setting: expect.objectContaining({