This directory contains shared types, utilities, and constants used across both backend and frontend code.

shared/
├── types.ts      # Shared TypeScript types and interfaces
└── README.md     # This file

Configuration options for initializing Molstar viewer instances:

interface MolstarAppConfig {
  layoutIsExpanded?: boolean;
  layoutShowControls?: boolean;
  layoutShowRemoteState?: boolean;
  layoutShowSequence?: boolean;
  layoutShowLog?: boolean;
  layoutShowLeftPanel?: boolean;
  collapseLeftPanel?: boolean;
  collapseRightPanel?: boolean;
  viewportShowExpand?: boolean;
  viewportShowControls?: boolean;
  viewportShowSettings?: boolean;
  viewportShowSelectionMode?: boolean;
  viewportShowAnimation?: boolean;
  viewportShowTrajectoryControls?: boolean;
  pdbProvider?: "pdbe" | "rcsb";
  emdbProvider?: "pdbe" | "rcsb";
  pixelScale?: number;
  pickScale?: number;
  transparency?: string;
  preferWebgl1?: boolean;
  allowMajorPerformanceCaveat?: boolean;
  powerPreference?: "high-performance" | "low-power" | "default";
}

Options for loading molecular structures:

interface StructureLoadOptions {
  url: string;
  format: string;
  isBinary?: boolean;
  label?: string;
}

Options for loading volume/density data:

interface VolumeLoadOptions {
  url: string;
  format: string;
  isBinary?: boolean;
  isovalues?: Array<{
    type: "relative" | "absolute";
    value: number;
    color: number;
    alpha?: number;
    volumeIndex?: number;
  }>;
}

Metadata for each Molstar application:

interface AppMetadata {
  name: string;
  description: string;
  path: string;
  icon: string;
}

Array of all available Molstar applications:

const MOLSTAR_APPS: AppMetadata[] = [
  {
    name: "Viewer",
    description: "Standard Mol* viewer for visualizing molecular structures",
    path: "/viewer",
    icon: "🧬",
  },
  {
    name: "Docking Viewer",
    description: "Specialized viewer for molecular docking results",
    path: "/docking-viewer",
    icon: "🔬",
  },
  {
    name: "Mesoscale Explorer",
    description: "Explore mesoscale biological structures",
    path: "/mesoscale-explorer",
    icon: "🔭",
  },
  {
    name: "MVS Stories",
    description: "Interactive molecular visualization stories",
    path: "/mvs-stories",
    icon: "📖",
  },
];

Import shared types in both backend and frontend code:

import type { MolstarAppConfig, StructureLoadOptions } from "../shared/types.ts";
import { MOLSTAR_APPS } from "../shared/types.ts";

• Code in shared/ must work in both server (Deno) and browser environments
• Do NOT use Deno-specific APIs (like Deno.env) in shared code
• Use ESM imports with .ts extensions for Val Town compatibility
• All types should be exported for use in other parts of the application