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

package/src/components/data/dataTable.ts

@@ -0,0 +1,99 @@
+import { csvParse, tsvParse } from 'd3'
+import type {
+  DataCellValue,
+  DataChartTable,
+  DataChartType,
+  DataColumnInfo,
+} from './DataChart.js'
+
+export type DataFormat = 'csv' | 'tsv' | 'json'
+
+function coerceValue(value: unknown): DataCellValue {
+  if (value === null || value === undefined || value === '') return null
+  if (typeof value === 'number' || typeof value === 'boolean') return value
+  const text = String(value).trim()
+  if (!text) return null
+  if (/^(true|false)$/i.test(text)) return text.toLowerCase() === 'true'
+  const numeric = Number(text.replace(/,/g, ''))
+  if (!Number.isNaN(numeric) && /^-?[\d,.]+$/.test(text) && /\d/.test(text))
+    return numeric
+  return text
+}
+
+function inferColumnType(values: DataCellValue[]): DataColumnInfo['type'] {
+  const present = values.filter(value => value !== null)
+  if (present.length === 0) return 'empty'
+  if (present.every(value => typeof value === 'number')) return 'number'
+  if (present.every(value => typeof value === 'boolean')) return 'boolean'
+  return 'text'
+}
+
+function normalizeRows(rows: Record<string, unknown>[]): DataChartTable {
+  const columnNames = Array.from(
+    rows.reduce((names, row) => {
+      Object.keys(row).forEach(name => names.add(name))
+      return names
+    }, new Set<string>()),
+  )
+  const normalizedRows = rows.map(row =>
+    Object.fromEntries(columnNames.map(name => [name, coerceValue(row[name])])),
+  )
+  const columns = columnNames.map(name => ({
+    name,
+    type: inferColumnType(normalizedRows.map(row => row[name])),
+  }))
+  return { columns, rows: normalizedRows }
+}
+
+export function parseDataTable(text: string, format: DataFormat): DataChartTable {
+  const trimmed = text.trim()
+  if (!trimmed) return { columns: [], rows: [] }
+
+  if (format === 'json') {
+    const parsed = JSON.parse(trimmed) as unknown
+    const rows = Array.isArray(parsed)
+      ? parsed
+      : parsed &&
+        typeof parsed === 'object' &&
+        Array.isArray((parsed as { rows?: unknown }).rows)
+      ? (parsed as { rows: unknown[] }).rows
+      : []
+    return normalizeRows(
+      rows.filter(row => row && typeof row === 'object') as Record<
+        string,
+        unknown
+      >[],
+    )
+  }
+
+  const parsed = format === 'tsv' ? tsvParse(trimmed) : csvParse(trimmed)
+  return normalizeRows(parsed as Array<Record<string, unknown>>)
+}
+
+export function guessDataFormat(nameOrPath: string, text: string): DataFormat {
+  const lower = nameOrPath.toLowerCase()
+  if (lower.endsWith('.json')) return 'json'
+  if (lower.endsWith('.tsv')) return 'tsv'
+  if (text.trim().startsWith('[') || text.trim().startsWith('{')) return 'json'
+  return 'csv'
+}
+
+export function summarizeDataTable(table: DataChartTable): string {
+  const numericCount = table.columns.filter(
+    column => column.type === 'number',
+  ).length
+  return `${table.rows.length} rows · ${table.columns.length} columns · ${numericCount} numeric`
+}
+
+export function defaultChartTypeForTable(table: DataChartTable): DataChartType {
+  const numericCount = table.columns.filter(
+    column => column.type === 'number',
+  ).length
+  const categoricalCount = table.columns.filter(
+    column => column.type !== 'number' && column.type !== 'empty',
+  ).length
+  if (numericCount >= 2 && categoricalCount >= 1) return 'bar'
+  if (numericCount >= 1 && table.rows.length <= 8) return 'lollipop'
+  if (numericCount >= 1) return 'line'
+  return 'bar'
+}

package/src/components/editor/EditorCommentPromptDialog.tsx

@@ -0,0 +1,124 @@
+import { useEffect, useRef, type ChangeEvent } from 'react'
+import { styled } from 'styled-components'
+import type { EditorCommentPromptProps } from '@purescience/platform-editor'
+import { Button } from '../common/buttons/Button.js'
+import { FlexRow } from '../common/containers/flex.js'
+import { TextAreaField } from '../common/inputs/TextAreaField.js'
+
+export function EditorCommentPromptDialog({
+  open,
+  value,
+  commentType,
+  commentTypeOptions,
+  onChange,
+  onCommentTypeChange,
+  onConfirm,
+  onCancel,
+  confirmDisabled = false,
+}: EditorCommentPromptProps): React.ReactElement {
+  const popoverRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!open) return
+    const onPointerDown = (event: PointerEvent): void => {
+      if (popoverRef.current?.contains(event.target as Node)) return
+      onCancel()
+    }
+    const onKeyDown = (event: KeyboardEvent): void => {
+      if (event.key === 'Escape') onCancel()
+      if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+        if (!confirmDisabled) onConfirm()
+      }
+    }
+    document.addEventListener('pointerdown', onPointerDown)
+    document.addEventListener('keydown', onKeyDown)
+    return () => {
+      document.removeEventListener('pointerdown', onPointerDown)
+      document.removeEventListener('keydown', onKeyDown)
+    }
+  }, [confirmDisabled, onCancel, onConfirm, open])
+
+  if (!open) return <></>
+
+  return (
+    <StyledPopover ref={popoverRef} role="dialog" aria-label="Add comment">
+      <StyledHeader>Add comment</StyledHeader>
+      <StyledBody>
+        <CommentTypeList aria-label="Comment type">
+          {commentTypeOptions.map(option => (
+            <Button
+              key={option.value}
+              variant={option.value === commentType ? 'primary' : 'subtle'}
+              type="button"
+              onClick={() => onCommentTypeChange(option.value)}
+            >
+              {option.label}
+            </Button>
+          ))}
+        </CommentTypeList>
+        <TextAreaField
+          value={value}
+          rows={3}
+          autoFocus
+          placeholder="Add a note for this selection…"
+          onChange={(event: ChangeEvent<HTMLTextAreaElement>) =>
+            onChange(event.target.value)
+          }
+        />
+        <FlexRow $gap="sm" $justify="end">
+          <Button variant="subtle" type="button" onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button
+            variant="primary"
+            type="button"
+            disabled={confirmDisabled}
+            onClick={onConfirm}
+          >
+            Add comment
+          </Button>
+        </FlexRow>
+      </StyledBody>
+    </StyledPopover>
+  )
+}
+
+const StyledPopover = styled.div`
+  position: fixed;
+  top: 46px;
+  left: 50%;
+  z-index: 1000;
+  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;
+  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);
+`
+
+const StyledHeader = styled.div`
+  padding: 10px 12px 0;
+  color: var(--platform-colors-text-secondary);
+  font-size: 12px;
+  font-weight: 650;
+`
+
+const StyledBody = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 10px 12px 12px;
+`
+
+const CommentTypeList = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+
+  button {
+    min-height: 28px;
+    padding: 0 9px;
+    font-size: 11px;
+  }
+`

package/src/components/editor/EditorLinkPromptDialog.tsx

@@ -0,0 +1,65 @@
+import type { KeyboardEvent } from 'react'
+import { styled } from 'styled-components'
+import type { EditorLinkPromptProps } from '@purescience/platform-editor'
+import { Button } from '../common/buttons/Button.js'
+import { FlexRow } from '../common/containers/flex.js'
+import { BareInput } from '../common/inputs/BareInput.js'
+import { Modal } from '../common/overlays/Modal.js'
+
+export function EditorLinkPromptDialog({
+  open,
+  value,
+  onChange,
+  onConfirm,
+  onCancel,
+}: EditorLinkPromptProps): React.ReactElement {
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>): void => {
+    if (event.key === 'Enter') onConfirm()
+    if (event.key === 'Escape') onCancel()
+  }
+
+  return (
+    <Modal open={open} onClose={onCancel} title="Insert link" size="md">
+      <StyledBody>
+        <StyledLinkInput
+          autoFocus
+          value={value}
+          placeholder="Paste URL…"
+          onChange={event => onChange(event.target.value)}
+          onKeyDown={handleKeyDown}
+        />
+        <FlexRow $gap="sm">
+          <Button variant="primary" type="button" onClick={onConfirm}>
+            Apply
+          </Button>
+          <Button variant="subtle" type="button" onClick={onCancel}>
+            Cancel
+          </Button>
+        </FlexRow>
+      </StyledBody>
+    </Modal>
+  )
+}
+
+const StyledBody = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--platform-spacing-md);
+`
+
+const StyledLinkInput = styled(BareInput)`
+  width: 100%;
+  height: 32px;
+  padding: 0 var(--platform-spacing-sm);
+  border: 1px solid var(--platform-colors-border);
+  border-radius: 4px;
+  background: var(--platform-colors-surface);
+  color: var(--platform-colors-text);
+  font-size: var(--platform-typography-font-size-sm);
+
+  &:focus {
+    border-color: var(--platform-colors-accent);
+    box-shadow: 0 0 0 2px rgb(from var(--platform-colors-accent) r g b / 18%);
+    outline: none;
+  }
+`