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

package/src/components/data/dataTable.ts

@@ -1,99 +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'
-}
+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

@@ -1,124 +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;
-  }
-`
+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

@@ -1,65 +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;
-  }
-`
+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;
+  }
+`