react-msaview 8.1.0 → 8.3.0

package/src/components/tree/renderTreeCanvas.ts

@@ -6,6 +6,7 @@ import {
   highlightLabelHeight,
   highlightRowFill,
 } from '../msa/renderHighlights.ts'
+import { referenceColor } from '../overlayColors.ts'
 import { bracketBarWidth, bracketGap } from './cladeBrackets.ts'
 
 import type { HierarchyNode } from '../../hierarchy.ts'
@@ -64,6 +65,13 @@ function forEachNodeInBlock(
   }
 }
 
+// withId gives an unnamed node its path, node-0-1-1, as its name
+function cladeName(node: HierarchyNode, unnamed: string) {
+  const { id, name } = node.data
+  const label = name === id ? unnamed : name
+  return node.value === undefined ? label : `${label} (${node.value} tips)`
+}
+
 // Calculate node x-coordinate for both phylogram (with branch lengths) and
 // cladogram (topology only) modes. tipX is the pixel x the tips sit at.
 // For cladograms: x = (maxDepthToLeaf - nodeDepthToLeaf) / maxDepthToLeaf * tipX
@@ -182,7 +190,7 @@ function renderCollapsedTriangles({
   const by = blockSizeYOverride ?? blockSize
   const halfHeight = Math.max(2, rowHeight * 0.42)
   forEachNodeInBlock(hierarchy, offsetY, by, blockPad(model), node => {
-    const { id, name } = node.data
+    const { id } = node.data
     if (collapsedSet.has(id)) {
       const apexX = getNodeX(node, showBranchLen, tipX, maxDepthToLeaf)
       const y = node.x!
@@ -212,7 +220,6 @@ function renderCollapsedTriangles({
         // the whole triangle is a click/hover target that opens the
         // branch menu (Expand this node); the apex bubble's own click entry is
         // skipped for collapsed nodes so this descriptive label wins
-        const label = name === id ? 'Collapsed clade' : name
         clickMap?.insert({
           minX: apexX + ml,
           maxX: baseX + ml,
@@ -220,7 +227,7 @@ function renderCollapsedTriangles({
           maxY: y + halfHeight,
           branch: true,
           id,
-          name: count === undefined ? label : `${label} (${count} tips)`,
+          name: cladeName(node, 'Collapsed clade'),
         })
       }
     }
@@ -266,7 +273,7 @@ function renderNodeBubbles({
     }
     const { data } = node
     const y = node.x!
-    const { id, name } = data
+    const { id } = data
     if (node.height >= 1 && inYBlock(y, offsetY, by, blockPad(model))) {
       const isCollapsed = collapsedSet.has(id)
       if (draw) {
@@ -290,7 +297,7 @@ function renderNodeBubbles({
           maxY: y - radius + d,
           branch: true,
           id,
-          name,
+          name: cladeName(node, 'Clade'),
         })
       }
     }
@@ -572,9 +579,9 @@ function renderCladeBrackets({
   ctx.strokeStyle = theme.palette.text.primary
 }
 
-// the `rowTint` encoding and the row sets of `highlights`, washed across the
-// tree area under the labels, with each set's label in the gutter at its first
-// row
+// the `rowTint` encoding, the reference row and the row sets of `highlights`,
+// washed across the tree area under the labels, with each set's label in the
+// gutter at its first row
 function renderRowHighlights({
   ctx,
   model,
@@ -591,6 +598,7 @@ function renderRowHighlights({
   const {
     resolvedHighlights,
     rowTints,
+    referenceRowIndex,
     rowHeight,
     treeAreaWidth,
     marginLeft,
@@ -616,6 +624,10 @@ function renderRowHighlights({
       }
     }
   }
+  if (referenceRowIndex !== undefined) {
+    ctx.fillStyle = referenceColor
+    fillRow(referenceRowIndex)
+  }
   for (const { rowIndices, label, color } of resolvedHighlights) {
     ctx.fillStyle = color ?? highlightRowFill
     for (const index of rowIndices) {

package/src/components/tree/renderTreeMouseover.ts

@@ -0,0 +1,41 @@
+import { treeHoverColor } from '../overlayColors.ts'
+
+import type { MsaViewModel } from '../../model.ts'
+
+export function renderTreeMouseover({
+  ctx,
+  model,
+}: {
+  ctx: CanvasRenderingContext2D
+  model: MsaViewModel
+}) {
+  const {
+    rowHeight,
+    treeAreaWidth: width,
+    height,
+    scrollY,
+    mouseRow,
+    referenceRowIndex,
+    hoveredRowIndices,
+    highResScaleFactor,
+  } = model
+  ctx.resetTransform()
+  ctx.clearRect(0, 0, width * highResScaleFactor, height * highResScaleFactor)
+  ctx.scale(highResScaleFactor, highResScaleFactor)
+
+  const rowBand = (index: number) => {
+    ctx.fillRect(0, index * rowHeight + scrollY, width, rowHeight)
+  }
+
+  ctx.fillStyle = treeHoverColor
+  for (const index of hoveredRowIndices) {
+    rowBand(index)
+  }
+  if (
+    mouseRow !== undefined &&
+    mouseRow !== referenceRowIndex &&
+    !hoveredRowIndices.includes(mouseRow)
+  ) {
+    rowBand(mouseRow)
+  }
+}

package/src/components/tree/useTreeHover.ts

@@ -1,21 +1,16 @@
 import { useState } from 'react'
 
+import { useHoverAnchor } from '../useHoverAnchor.ts'
 import { ClickMapIndex } from './clickMap.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 import type { ClickEntry } from './clickMap.ts'
 import type React from 'react'
 
-export interface TreeHoverTarget extends ClickEntry {
-  clientX: number
-  clientY: number
-}
-
 /**
  * Owns hit-testing for one tree block: the spatial index the render pass fills
- * in, the entry currently under the pointer, and the model hover state that the
- * MSA panel mirrors. The index is a render artifact rather than display state, so
- * it lives in a ref; everything the component draws comes back as plain state.
+ * in, the entry under the pointer with its tooltip anchor, and the model hover
+ * state that the MSA panel mirrors.
  */
 export function useTreeHover({
   model,
@@ -25,10 +20,10 @@ export function useTreeHover({
   offsetY: number
 }) {
   const [clickMap] = useState(() => new ClickMapIndex())
-  const [hovered, setHovered] = useState<TreeHoverTarget>()
+  const { anchor, hoverAt, clearAnchor } = useHoverAnchor<ClickEntry>()
 
   // leaf labels win over the branch/bubble targets they overlap, so a click on a
-  // name opens the node menu rather than the branch menu
+  // name opens the leaf's menu
   function hitTest(event: React.MouseEvent) {
     const x = event.nativeEvent.offsetX
     const y = event.nativeEvent.offsetY + offsetY
@@ -43,11 +38,7 @@ export function useTreeHover({
 
   function onMouseMove(event: React.MouseEvent) {
     const entry = hitTest(event)
-    setHovered(
-      entry
-        ? { ...entry, clientX: event.clientX, clientY: event.clientY }
-        : undefined,
-    )
+    hoverAt(event, entry)
     // hovering an internal node highlights every tip below it; hovering a leaf
     // label additionally drives the single-row highlight
     model.setHoveredTreeNode(entry?.id)
@@ -58,10 +49,10 @@ export function useTreeHover({
   }
 
   function onMouseLeave() {
-    setHovered(undefined)
+    clearAnchor()
     model.setHoveredTreeNode(undefined)
     model.setMousePos(undefined, undefined)
   }
 
-  return { clickMap, hovered, hitTest, onMouseMove, onMouseLeave }
+  return { clickMap, anchor, hitTest, onMouseMove, onMouseLeave }
 }

package/src/components/useHoverAnchor.ts

@@ -0,0 +1,31 @@
+import { useState } from 'react'
+
+export interface HoverAnchor<T> {
+  clientPoint: { x: number; y: number }
+  value: T
+}
+
+/**
+ * The thing under the pointer and the point a tooltip about it hangs from,
+ * 15px below the cursor so the tooltip clears it.
+ */
+export function useHoverAnchor<T>() {
+  const [anchor, setAnchor] = useState<HoverAnchor<T>>()
+
+  function hoverAt(
+    event: { clientX: number; clientY: number },
+    value: T | undefined,
+  ) {
+    setAnchor(
+      value === undefined
+        ? undefined
+        : { value, clientPoint: { x: event.clientX, y: event.clientY + 15 } },
+    )
+  }
+
+  function clearAnchor() {
+    setAnchor(undefined)
+  }
+
+  return { anchor, hoverAt, clearAnchor }
+}

package/src/constants.ts

@@ -1,3 +1,5 @@
+import type { TreeOrder } from './types.ts'
+
 // Main model defaults
 export const defaultRowHeight = 16
 export const defaultColWidth = 12
@@ -75,6 +77,13 @@ export const defaultLabelsAlignRight = false
 export const defaultTreeAreaWidth = 400
 export const defaultTreeWidth = 300
 export const defaultShowBranchLen = true
+export const treeOrders = [
+  'branchLength',
+  'input',
+  'ladderize',
+  'ladderizeReverse',
+] as const satisfies readonly TreeOrder[]
+export const defaultTreeOrder: TreeOrder = 'branchLength'
 export const defaultDrawTree = true
 export const defaultDrawNodeBubbles = true
 export const defaultDrawNodeLabels = false
@@ -98,9 +107,11 @@ export const cladeHighlightColor = '#fff3c4'
 export const cladeHighlightAlpha = 0.6
 
 // The largest inline document the snapshot carries. A larger pasted or
-// locally-opened file stays in the live model and out of the snapshot, keeping
-// shared URLs sendable. `unshareableData` warns using the same number.
-export const maxInlineSnapshotBytes = 50_000
+// locally-opened file stays in the live model and out of the snapshot, and
+// `unshareableData` warns using the same number. The demo app gzips the
+// snapshot into `?data=`, where 15 kB of the hosted protein alignments encodes
+// to 6,300-7,600 characters, under the 8,192 gmod.org accepts.
+export const maxInlineSnapshotBytes = 15_000
 
 // Height of the band the `rowPanels` headers draw in, above the strips in the
 // top area beside the tree ruler and the minimap. A panel wider than the band

package/src/expandSpec.ts

@@ -0,0 +1,196 @@
+import type { ColumnTrackSpec, Highlight, Region } from './types.ts'
+
+/**
+ * `row: null` opts one entry out of the spec's `query` row, back to alignment
+ * columns.
+ */
+type RowChoice = { row?: string | null }
+
+export type HighlightShorthand =
+  | number
+  | string
+  | (Omit<Highlight, 'row'> & RowChoice)
+
+export type RegionShorthand = string | (Omit<Region, 'row'> & RowChoice)
+
+export type ColumnTrackShorthand = Omit<
+  ColumnTrackSpec,
+  'id' | 'kind' | 'row'
+> &
+  RowChoice & {
+    id?: string
+    kind?: ColumnTrackSpec['kind']
+    /** the 1-based position `values` or `data` begins at */
+    start?: number
+  }
+
+/**
+ * The short forms a hand-written or generated link can use. Every long form
+ * passes through unchanged, so a snapshot is also a valid spec.
+ */
+export interface MsaSpec {
+  /**
+   * The row the spec is about: sets `relativeTo`, and is the `row` of every
+   * highlight, region and column track that names none
+   */
+  query?: string
+  /** a url, or the alignment itself when it spans more than one line */
+  msa?: string
+  /** a url, or a newick string when it starts with "(" */
+  tree?: string
+  highlights?: HighlightShorthand[]
+  region?: RegionShorthand
+  columnTracks?: ColumnTrackShorthand[]
+  [key: string]: unknown
+}
+
+/**
+ * The label a single-residue shorthand highlight gets, filled in from the
+ * sequence when drawn: `175` on a row reading R there becomes "R175".
+ */
+export const residueLabel = '{residue}{position}'
+
+const span = /^(\d+)(?:-(\d+))?(?:\s+(.+))?$/
+
+function parseSpan(text: string, what: string) {
+  const match = span.exec(text.trim())
+  if (!match) {
+    throw new Error(
+      `${what} "${text}" is not "start", "start-end" or either followed by a label`,
+    )
+  }
+  const a = Number(match[1])
+  const b = match[2] === undefined ? a : Number(match[2])
+  return { start: Math.min(a, b), end: Math.max(a, b), label: match[3] }
+}
+
+function withRow<T extends RowChoice>(entry: T, query?: string) {
+  const { row, ...rest } = entry
+  const resolved = row === undefined ? query : (row ?? undefined)
+  return resolved === undefined ? rest : { ...rest, row: resolved }
+}
+
+function expandHighlight(entry: HighlightShorthand, query?: string) {
+  if (typeof entry === 'object') {
+    return (
+      entry.rows
+        ? entry
+        : withRow(entry, entry.start === undefined ? undefined : query)
+    ) as Highlight
+  }
+  const { start, end, label } = parseSpan(String(entry), 'highlight')
+  const single = start === end && query !== undefined
+  return {
+    ...(query === undefined ? {} : { row: query }),
+    start,
+    end,
+    ...(label ? { label } : single ? { label: residueLabel } : {}),
+  }
+}
+
+function expandRegion(region: RegionShorthand, query?: string) {
+  if (typeof region === 'string') {
+    const { start, end } = parseSpan(region, 'region')
+    const parsed: Omit<Region, 'row'> & RowChoice = { start, end }
+    return withRow(parsed, query) as Region
+  }
+  return withRow(region, query) as Region
+}
+
+function slug(name: string) {
+  return name
+    .toLowerCase()
+    .replaceAll(/[^a-z0-9]+/g, '-')
+    .replaceAll(/^-|-$/g, '')
+}
+
+function kindOf(track: ColumnTrackShorthand) {
+  if (track.kind) {
+    return track.kind
+  }
+  if (track.values) {
+    return 'bar'
+  }
+  if (track.data !== undefined) {
+    return 'text'
+  }
+  if (track.arcs) {
+    return 'arc'
+  }
+  throw new Error(
+    `column track "${track.name}" has no values, data or arcs to take its kind from`,
+  )
+}
+
+function expandTrack(
+  track: ColumnTrackShorthand,
+  query: string | undefined,
+  ids: Set<string>,
+): ColumnTrackSpec {
+  const { start, ...rest } = track
+  const pad = start && start > 1 ? start - 1 : 0
+  let id = track.id ?? (slug(track.name) || 'track')
+  for (let n = 2; !track.id && ids.has(id); n++) {
+    id = `${slug(track.name) || 'track'}-${n}`
+  }
+  ids.add(id)
+  return {
+    ...(withRow(rest, query) as Omit<ColumnTrackSpec, 'id' | 'kind'>),
+    id,
+    kind: kindOf(track),
+    ...(pad && track.values
+      ? { values: [...Array<number>(pad).fill(0), ...track.values] }
+      : {}),
+    ...(pad && track.data !== undefined
+      ? { data: ' '.repeat(pad) + track.data }
+      : {}),
+  }
+}
+
+function isInlineMsa(msa: string) {
+  return msa.includes('\n')
+}
+
+function isInlineTree(tree: string) {
+  return tree.trimStart().startsWith('(')
+}
+
+function uri(location: string) {
+  return { uri: location, locationType: 'UriLocation' as const }
+}
+
+/**
+ * Expand the short forms of an MsaView spec into the snapshot the model takes.
+ * Idempotent, and a no-op on a spec that uses none of them.
+ */
+export function expandSpec(spec: MsaSpec): Record<string, unknown> {
+  const { query, msa, tree, highlights, region, columnTracks, ...rest } = spec
+  const data = {
+    ...(rest.data as Record<string, unknown> | undefined),
+    ...(msa !== undefined && isInlineMsa(msa) ? { msa } : {}),
+    ...(tree !== undefined && isInlineTree(tree) ? { tree } : {}),
+  }
+  const ids = new Set(
+    (columnTracks ?? []).map(t => t.id).filter(id => id !== undefined),
+  )
+  return {
+    ...rest,
+    ...(msa !== undefined && !isInlineMsa(msa)
+      ? { msaFilehandle: uri(msa) }
+      : {}),
+    ...(tree !== undefined && !isInlineTree(tree)
+      ? { treeFilehandle: uri(tree) }
+      : {}),
+    ...(Object.keys(data).length > 0 ? { data } : {}),
+    ...(query !== undefined && rest.relativeTo === undefined
+      ? { relativeTo: query }
+      : {}),
+    ...(highlights
+      ? { highlights: highlights.map(h => expandHighlight(h, query)) }
+      : {}),
+    ...(region === undefined ? {} : { region: expandRegion(region, query) }),
+    ...(columnTracks
+      ? { columnTracks: columnTracks.map(t => expandTrack(t, query, ids)) }
+      : {}),
+  }
+}

package/src/exportFileName.ts

@@ -1,12 +1,13 @@
 import type { FileLocation } from '@jbrowse/core/util/types'
 
 /**
- * The name to save an export under: the loaded alignment's file name with the
- * extension swapped, or a plain default when the alignment was pasted in.
+ * The name to save an export under: the loaded file's name with the extension
+ * swapped, or `fallback` when the data was pasted in.
  */
 export function exportFileName(
   location: FileLocation | undefined,
   extension: string,
+  fallback = 'image',
 ) {
   const loc = location as
     | { uri?: string; localPath?: string; name?: string }
@@ -17,5 +18,5 @@ export function exportFileName(
     ?.split(/[/\\]/)
     .pop()
     ?.replace(/\.[^.]*$/, '')
-  return `${base || 'image'}.${extension}`
+  return `${base || fallback}.${extension}`
 }

package/src/hierarchy.ts

@@ -25,16 +25,16 @@ export interface HierarchyNode<T = NodeWithIds> extends CoreHierarchyNode<T> {
   parent: HierarchyNode<T> | null
   x?: number
   y?: number
-  // the span of `x` over this node's subtree, set by clusterLayout. Leaves are
-  // laid out in order, so a subtree occupies one contiguous run of rows and a
-  // renderer can skip the whole thing when the run misses its block.
+  // the span of `x` over this node's subtree. Leaves are laid out in order, so
+  // a subtree occupies one contiguous run of rows and a renderer can skip the
+  // whole thing when the run misses its block.
   xMin?: number
   xMax?: number
   len?: number
   depthToLeaf?: number
   _children?: HierarchyNode<T>[] | null
   // pixel x-position of the farthest tip of a collapsed subtree, where the base
-  // of the collapsed-clade triangle goes. Set in the model's hierarchy getter.
+  // of the collapsed-clade triangle goes
   collapsedTipXFar?: number
 }
 
@@ -111,6 +111,153 @@ export function clusterLayout<T>(
   }
 }
 
+export interface TreeScale {
+  readonly rowHeight: number
+  readonly treeWidth: number
+}
+
+interface LayoutFrame {
+  scale: TreeScale
+  rootToTipLength: number
+}
+
+/**
+ * A node of `layoutTree`: its source node's fields plus its place in unit
+ * space, rows down and branch length across. The pixel getters multiply by the
+ * scale on every read, so a zoom leaves the nodes valid, and an observer
+ * reading `x` observes whatever the scale reads.
+ */
+export class LaidOutNode<T> implements HierarchyNode<T> {
+  data: T
+  depth: number
+  height: number
+  value?: number
+  children: LaidOutNode<T>[] | null
+  depthToLeaf = 0
+  row = 0
+  rowMin = 0
+  rowMax = 0
+  depthFraction = 0
+  branchLength = 0
+  collapsedBranchLength?: number
+
+  constructor(
+    source: HierarchyNode<T>,
+    readonly parent: LaidOutNode<T> | null,
+    private readonly frame: LayoutFrame,
+  ) {
+    this.data = source.data
+    this.depth = source.depth
+    this.height = source.height
+    this.value = source.value
+    this.children = source.children ? [] : null
+  }
+
+  private get pxPerBranchLength() {
+    const { scale, rootToTipLength } = this.frame
+    return rootToTipLength ? scale.treeWidth / rootToTipLength : 0
+  }
+
+  get x() {
+    return this.row * this.frame.scale.rowHeight
+  }
+
+  get xMin() {
+    return this.rowMin * this.frame.scale.rowHeight
+  }
+
+  get xMax() {
+    return this.rowMax * this.frame.scale.rowHeight
+  }
+
+  get y() {
+    return this.depthFraction * this.frame.scale.treeWidth
+  }
+
+  get len() {
+    return this.branchLength * this.pxPerBranchLength
+  }
+
+  get collapsedTipXFar() {
+    return this.collapsedBranchLength === undefined
+      ? undefined
+      : this.collapsedBranchLength * this.pxPerBranchLength
+  }
+}
+
+/**
+ * The layout `clusterLayout` and `setBrLength` write, on new nodes: tips one
+ * row apart, a parent at the mean of its children, and branch length measured
+ * from the root, whose own branch is not drawn. A collapsed node records the
+ * farthest tip of its hidden subtree, where the base of its triangle goes.
+ */
+export function layoutTree<T extends { length?: number }>(
+  root: HierarchyNode<T>,
+  scale: TreeScale,
+) {
+  const frame: LayoutFrame = { scale, rootToTipLength: 0 }
+  const nodes: LaidOutNode<T>[] = []
+  const leafNodes: LaidOutNode<T>[] = []
+  const rootHeight = root.height
+  const stack: { source: HierarchyNode<T>; parent: LaidOutNode<T> | null }[] = [
+    { source: root, parent: null },
+  ]
+  while (stack.length > 0) {
+    const { source, parent } = stack.pop()!
+    const node = new LaidOutNode(source, parent, frame)
+    nodes.push(node)
+    node.depthFraction =
+      rootHeight === 0 ? 1 : (source.depth - root.depth) / rootHeight
+    if (parent) {
+      parent.children!.push(node)
+      node.branchLength =
+        parent.branchLength + Math.max(source.data.length || 0, 0)
+      frame.rootToTipLength = Math.max(frame.rootToTipLength, node.branchLength)
+    }
+    if (source._children) {
+      node.collapsedBranchLength =
+        node.branchLength + collapsedSubtreeMaxLength(source)
+    }
+    if (source.children) {
+      for (let i = source.children.length - 1; i >= 0; i--) {
+        stack.push({ source: source.children[i]!, parent: node })
+      }
+    } else {
+      node.row = leafNodes.length + 0.5
+      node.depthToLeaf = source.depthToLeaf ?? 0
+      leafNodes.push(node)
+    }
+  }
+
+  for (let i = nodes.length - 1; i >= 0; i--) {
+    const node = nodes[i]!
+    if (node.children) {
+      let sum = 0
+      let min = Infinity
+      let max = -Infinity
+      let depthToLeaf = 0
+      for (const child of node.children) {
+        sum += child.row
+        min = Math.min(min, child.rowMin)
+        max = Math.max(max, child.rowMax)
+        depthToLeaf = Math.max(depthToLeaf, 1 + child.depthToLeaf)
+      }
+      node.row = sum / node.children.length
+      node.rowMin = min
+      node.rowMax = max
+      node.depthToLeaf = depthToLeaf
+    } else {
+      node.rowMin = node.row
+      node.rowMax = node.row
+    }
+  }
+  return {
+    root: nodes[0]!,
+    leaves: leafNodes,
+    rootToTipLength: frame.rootToTipLength,
+  }
+}
+
 export function collapse<T>(node: HierarchyNode<T>) {
   if (node.children) {
     // memoize the real subtree depth onto the node before detaching its

package/src/index.ts

@@ -18,6 +18,14 @@ export {
 // the row count above which calculateNeighborJoiningTreeFromMSA throws, for
 // hosts gating their own menu item
 export { maxNeighborJoiningRows } from './constants.ts'
+// the short forms a link or a script can write a view in; see docs/layers.md
+export { expandSpec, residueLabel } from './expandSpec.ts'
+export type {
+  ColumnTrackShorthand,
+  HighlightShorthand,
+  MsaSpec,
+  RegionShorthand,
+} from './expandSpec.ts'
 export { default as MSAView } from './components/Loading.tsx'
 export { default as MSAViewer } from './components/MSAViewer.tsx'
 export type { MSAViewerProps } from './components/MSAViewer.tsx'
@@ -28,7 +36,7 @@ export type { MsaSvgFigure } from './useMsaSvgFigure.ts'
 export type { MountedViewer } from './mount.tsx'
 export { type MsaViewModel, default as MSAModelF } from './model.ts'
 export type { MSAFormat, MSAParserType } from 'msa-parsers'
-export type { HierarchyNode } from './hierarchy.ts'
+export type { HierarchyNode, LaidOutNode, TreeScale } from './hierarchy.ts'
 // InterProScanResults is the EBI wire format that setDomains still accepts;
 // Annotation is the source-agnostic shape everything else is written against
 export type { InterProScanResults } from 'msa-parsers'
@@ -78,6 +86,8 @@ export type {
   TextTrackModel,
   TidyDomainAnnotation,
   TrackKind,
+  TreeOrder,
+  TreeRoot,
   UnshareableData,
   Viewport,
 } from './types.ts'