Merge pull request #1231 from quantified-uncertainty/project-in-editors

Project in editors and remove warnings

.github/CODEOWNERS

@@ -0,0 +1,31 @@
+# CODEOWNERS file
+#
+# This file is used to describe who owns what in this repository.
+#
+# For documentation on this file, see https://help.github.com/articles/about-codeowners/
+# Mentioned users will get code review requests.
+#
+# IMPORTANT NOTE: in order to actually get pinged, commit access is required.
+# This also holds true for GitHub teams.
+
+# Rescript 
+*.res @berekuk @OAGr
+*.resi @berekuk @OAGr
+
+# Typescript 
+*.tsx @Hazelfire @berekuk @OAGr 
+*.ts @Hazelfire @berekuk @OAGr
+
+# Javascript
+*.js @Hazelfire @berekuk @OAGr
+
+# Any opsy files
+.github/** @quinn-dougherty @berekuk @OAGr
+*.json @quinn-dougherty @Hazelfire @berekuk @OAGr
+*.y*ml @quinn-dougherty @berekuk @OAGr
+*.config.js @Hazelfire @berekuk @OAGr
+vercel.json @OAGr @berekuk @Hazelfire
+
+# Documentation
+*.md @quinn-dougherty @OAGr @Hazelfire
+*.mdx @quinn-dougherty @OAGr @Hazelfire

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: true
+contact_links:
+  - name: Ideas and feature requests - Squiggle Discussions on GitHub
+    url: https://github.com/quantified-uncertainty/squiggle/discussions
+    about: Please propose and discuss new features here. Remember to search for your idea before posting a new topic! Where would you like to see Squiggle go over the next few months, several months, or few years?

.github/ISSUE_TEMPLATE/ops-testing.md

@@ -0,0 +1,13 @@
+---
+name: Operations and testing
+about: Have a testing-related task? Developer friction when contributing to squiggle? Etc.
+labels: "ops & testing"
+---
+
+# Description:
+
+# The OS and version, yarn version, etc. in which this came up
+
+<!-- delete this section if testing task or otherwise not applicable -->
+
+# Desired behavior

.github/ISSUE_TEMPLATE/pl.md

@@ -0,0 +1,13 @@
+---
+name: Regarding the programming language (the `squiggle-lang` package)
+about: Anything concerning distributions/numerics, as well as the interpreter, parser, syntax, semantics
+labels: "programming language"
+---
+
+<!-- mark one with an x -->
+
+- \_ Is refactor
+- \_ Is new feature
+- \_ Concerns documentation
+
+# Description of suggestion or shortcoming:

.github/ISSUE_TEMPLATE/user-bug.md

@@ -0,0 +1,17 @@
+---
+name: Bug reports for Squiggle users
+about: Rendering oddly? Is there a mathematical correctness problem?
+labels: "bug"
+---
+
+# Description:
+
+# Steps to reproduce:
+
+1.
+2.
+3.
+
+# Expected behavior:
+
+# What I got instead:

.github/dependabot.yml

@@ -0,0 +1,24 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "weekly"
+    commit-message:
+      prefix: "⬆️"
+    open-pull-requests-limit: 100
+    labels:
+      - "dependencies"
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+    commit-message:
+      prefix: "⬆️"
+    labels:
+      - "dependencies"

.github/workflows/ci-cachix.yml

@@ -0,0 +1,87 @@
+name: Nix build
+
+on:
+  push:
+    branches:
+      - master
+      - develop
+  pull_request:
+    branches:
+      - master
+      - develop
+      - reducer-dev
+      - epic-reducer-project
+
+jobs:
+  flake-lints:
+    name: All lint
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - name: Install nix
+        uses: cachix/install-nix-action@v17
+        with:
+          nix_path: nixpkgs=channel:nixos-22.05
+      - name: Use cachix
+        uses: cachix/cachix-action@v10
+        with:
+          name: quantified-uncertainty
+          authToken: "${{ secrets.CACHIX_AUTH_TOKEN }}"
+
+      - name: Check that lang lints
+        run: nix build .#lang-lint
+      - name: Check that components lints
+        run: nix build .#components-lint
+      - name: Check that website lints
+        run: nix build .#docusaurus-lint
+      - name: Check that vscode extension lints
+        run: nix build .#vscode-lint
+      - name: Check that cli lints
+        run: nix build .#cli-lint
+
+  flake-packages:
+    name: Builds, tests, and bundles
+    runs-on: ubuntu-latest
+    needs: flake-lints
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - name: Install nix
+        uses: cachix/install-nix-action@v17
+        with:
+          nix_path: nixpkgs=channel:nixos-22.05
+      - name: Use cachix
+        uses: cachix/cachix-action@v10
+        with:
+          name: quantified-uncertainty
+          authToken: "${{ secrets.CACHIX_AUTH_TOKEN }}"
+
+      - name: Check all lang tests
+        run: nix build .#lang-test
+      - name: Check that lang bundles
+        run: nix build .#lang-bundle
+      - name: Check that components builds
+        run: nix build .#components
+      - name: Check that components bundles
+        run: nix build .#components-bundle
+
+  flake-devshells:
+    name: Development shell environment
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - name: Install nix
+        uses: cachix/install-nix-action@v17
+        with:
+          nix_path: nixpkgs=channel:nixos-22.05
+      - name: Use cachix
+        uses: cachix/cachix-action@v10
+        with:
+          name: quantified-uncertainty
+          authToken: "${{ secrets.CACHIX_AUTH_TOKEN }}"
+      - name: Build js devshell
+        run: nix develop .#js --profile just-js
+      - name: Build js & wasm devshell
+        run: nix develop --profile full-shell

.github/workflows/ci.yml

@@ -0,0 +1,48 @@
+name: Squiggle packages checks
+
+on:
+  push:
+    branches:
+      - master
+      - develop
+  pull_request:
+    branches:
+      - master
+      - develop
+
+env:
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+  TURBO_TEAM: quantified-uncertainty
+
+jobs:
+  build-test-lint:
+    name: Build, test, lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: 'yarn'
+      - name: Install dependencies
+        run: yarn --frozen-lockfile
+      - name: Turbo run
+        run: npx turbo run build test lint bundle
+
+  coverage:
+    name: Coverage
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 2
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16
+          cache: 'yarn'
+      - name: Install dependencies
+        run: yarn
+      - name: Coverage
+        run: npx turbo run coverage

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,68 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  schedule:
+    - cron: "42 19 * * 0"
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: ["javascript"]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        # Learn more about CodeQL language support at https://git.io/codeql-language-support
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v2
+        with:
+          languages: ${{ matrix.language }}
+          # If you wish to specify custom queries, you can do so here or in a config file.
+          # By default, queries listed here will override any specified in a config file.
+          # Prefix the list here with "+" to use these queries and those in the config file.
+          # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+      # If this step fails, then you should remove it and run the build manually (see below)
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v2
+      - name: Install dependencies
+        run: yarn
+      - name: Build rescript
+        run: cd packages/squiggle-lang && yarn build
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 https://git.io/JvXDl
+
+      # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+      #    and modify them (or add more) to build your code if your project
+      #    uses a compiled language
+
+      #- run: |
+      #   make bootstrap
+      #   make release
+
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v2

.github/workflows/lang-jest.yml

@@ -1,19 +0,0 @@
-name: Squiggle Lang Jest Tests
-
-on: [push]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    defaults:
-      run:
-        shell: bash
-        working-directory: packages/squiggle-lang
-    steps:
-    - uses: actions/checkout@v2
-    - name: Install Packages
-      run: yarn 
-    - name: Build rescript
-      run: yarn run build
-    - name: Run tests
-      run: yarn test

.github/workflows/release-please.yml

@@ -0,0 +1,141 @@
+name: Run Release Please
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  pre_check:
+    name: Precheck for skipping redundant jobs
+    runs-on: ubuntu-latest
+    outputs:
+      should_skip_lang: ${{ steps.skip_lang_check.outputs.should_skip }}
+      should_skip_components: ${{ steps.skip_components_check.outputs.should_skip }}
+      should_skip_website: ${{ steps.skip_website_check.outputs.should_skip }}
+      should_skip_vscodeext: ${{ steps.skip_vscodeext_check.outputs.should_skip }}
+      should_skip_cli: ${{ steps.skip_cli_check.outputs.should_skip }}
+    steps:
+      - id: skip_lang_check
+        name: Check if the changes are about squiggle-lang src files
+        uses: fkirc/skip-duplicate-actions@v5.2.0
+        with:
+          paths: '["packages/squiggle-lang/**"]'
+      - id: skip_components_check
+        name: Check if the changes are about components src files
+        uses: fkirc/skip-duplicate-actions@v5.2.0
+        with:
+          paths: '["packages/components/**"]'
+      - id: skip_website_check
+        name: Check if the changes are about website src files
+        uses: fkirc/skip-duplicate-actions@v5.2.0
+        with:
+          paths: '["packages/website/**"]'
+      - id: skip_vscodeext_check
+        name: Check if the changes are about vscode extension src files
+        uses: fkirc/skip-duplicate-actions@v5.2.0
+        with:
+          paths: '["packages/vscode-ext/**"]'
+      - id: skip_cli_check
+        name: Check if the changes are about cli src files
+        uses: fkirc/skip-duplicate-actions@v5.2.0
+        with:
+          paths: '["packages/cli/**"]'
+
+  relplz-lang:
+    name: for squiggle-lang
+    runs-on: ubuntu-latest
+    needs: pre_check
+    if: ${{ needs.pre_check.outputs.should_skip_lang != 'true' }}
+    steps:
+      - name: Release please (squiggle-lang)
+        uses: google-github-actions/release-please-action@v3
+        id: release
+        with:
+          token: ${{secrets.GITHUB_TOKEN}}
+          command: manifest-pr
+          path: packages/squiggle-lang
+          # bump-patch-for-minor-pre-major: true
+          skip-github-release: true
+      - name: Publish- Checkout source
+        uses: actions/checkout@v3
+        # these if statements ensure that a publication only occurs when
+        # a new release is created:
+        if: ${{ steps.release.outputs.release_created }}
+      - name: Publish- Install dependencies
+        run: yarn
+        if: ${{ steps.release.outputs.release_created }}
+      - name: Publish
+        run: cd packages/squiggle-lang && yarn publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+        if: ${{ steps.release.outputs.release_created }}
+
+  relplz-components:
+    name: for components
+    runs-on: ubuntu-latest
+    needs: pre_check
+    if: ${{ needs.pre_check.outputs.should_skip_components != 'true' }}
+    steps:
+      - name: Release please (components)
+        uses: google-github-actions/release-please-action@v3
+        with:
+          token: ${{secrets.GITHUB_TOKEN}}
+          command: manifest-pr
+          path: packages/components
+          # bump-patch-for-minor-pre-major: true
+          skip-github-release: true
+      - name: Publish- Checkout source
+        uses: actions/checkout@v3
+        # these if statements ensure that a publication only occurs when
+        # a new release is created:
+        if: ${{ steps.release.outputs.release_created }}
+      - name: Publish- Install dependencies
+        run: yarn
+        if: ${{ steps.release.outputs.release_created }}
+      - name: Publish
+        run: cd packages/components && yarn publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+  relplz-website:
+    name: for website
+    runs-on: ubuntu-latest
+    needs: pre_check
+    if: ${{ needs.pre_check.outputs.should_skip_website != 'true' }}
+    steps:
+      - name: Release please (website)
+        uses: google-github-actions/release-please-action@v3
+        with:
+          token: ${{secrets.GITHUB_TOKEN}}
+          command: manifest-pr
+          path: packages/website
+          # bump-patch-for-minor-pre-major: true
+          skip-github-release: true
+  relplz-vscodeext:
+    name: for vscode-ext
+    runs-on: ubuntu-latest
+    needs: pre_check
+    if: ${{ needs.pre_check.outputs.should_skip_vscodeext != 'true' }}
+    steps:
+      - name: Release please (vscode-ext)
+        uses: google-github-actions/release-please-action@v3
+        with:
+          token: ${{secrets.GITHUB_TOKEN}}
+          command: manifest-pr
+          path: packages/vscode-ext
+          # bump-patch-for-minor-pre-major: true
+          skip-github-release: true
+  relplz-cl:
+    name: for cli
+    runs-on: ubuntu-latest
+    needs: pre_check
+    if: ${{ needs.pre_check.outputs.should_skip_cli != 'true' }}
+    steps:
+      - name: Release please (cli)
+        uses: google-github-actions/release-please-action@v3
+        with:
+          token: ${{secrets.GITHUB_TOKEN}}
+          command: manifest-pr
+          path: packages/cli
+          bump-patch-for-minor-pre-major: true
+          skip-github-release: true

.gitignore

@@ -1,4 +1,15 @@
 node_modules
+yarn-error.log
 .cache
 .merlin
 .parcel-cache
+.DS_Store
+**/.sync.ffs_db
+.direnv
+.log
+
+.vscode
+todo.txt
+result
+shell.nix
+.turbo

.prettierignore

@@ -0,0 +1,16 @@
+.direnv
+*.bs.js
+*.gen.tsx
+packages/components/storybook-static
+node_modules
+packages/*/node_modules
+packages/website/.docusaurus
+packages/squiggle-lang/lib
+packages/squiggle-lang/coverage/
+packages/squiggle-lang/.cache/
+packages/website/build/
+packages/squiggle-lang/src/rescript/Reducer/Reducer_Peggy/Reducer_Peggy_GeneratedParser.js
+packages/vscode-ext/media/vendor/
+packages/squiggle-lang/.nyc_output/
+packages/*/dist
+result

.release-please-manifest.json

@@ -0,0 +1,7 @@
+{
+  "packages/cli": "0.0.3",
+  "packages/components": "0.4.1",
+  "packages/squiggle-lang": "0.4.1",
+  "packages/vscode-ext": "0.4.1",
+  "packages/website": "0.0.0"
+}

CHANGELOG.md

@@ -0,0 +1 @@
+See the [Changelog.mdx page](./packages/website/docs/Changelog.mdx) for the changelog.

CONTRIBUTING.md

@@ -0,0 +1,144 @@
+_The current document was written quickly and not exhaustively, yet, it's unfinished. [Template here](https://mozillascience.github.io/working-open-workshop/contributing/)_
+
+# Contributing to Squiggle
+
+We welcome contributions from developers, especially people in react/typescript, rescript, and interpreters/parsers. We also are keen to hear issues filed by users!
+
+Squiggle is currently pre-alpha.
+
+# Quick links
+
+- [Roadmap to the alpha](https://github.com/orgs/quantified-uncertainty/projects/1)
+- The team presently communicates via the **EA Forecasting and Epistemics** slack (channels `#squiggle` and `#squiggle-ops`), you can track down an invite by reaching out to Ozzie Gooen
+- [Squiggle documentation](https://www.squiggle-language.com/docs/Language)
+- [Rescript documentation](https://rescript-lang.org/docs/manual/latest/introduction)
+- You can email `quinn@quantifieduncertainty.org` if you need assistance in onboarding or if you have questions
+
+# Bug reports
+
+Anyone (with a github account) can file an issue at any time. Please allow Slava, Sam, and Ozzie to triage, but otherwise just follow the suggestions in the issue templates.
+
+# Project structure
+
+Squiggle is a **monorepo** with three **packages**.
+
+- **components** is where we improve reactive interfacing with Squiggle
+- **squiggle-lang** is where the magic happens: probability distributions, the interpreter, etc.
+- **website** is the site `squiggle-language.com`
+
+# Deployment ops
+
+We use Vercel, and it should only concern Slava, Sam, and Ozzie.
+
+# Development environment, building, testing, dev server
+
+You need `yarn`.
+
+Being a monorepo, where packages are connected by dependency, it's important to follow `README.md`s closely. Each package has it's own `README.md`, which is where the bulk of information is.
+
+We aspire for `ci.yaml` and `README.md`s to be in one-to-one correspondence.
+
+## If you're on NixOS
+
+You can't run `yarn` outside of a FHS shell. Additionally, you need to `patchelf` some things. A script does everything for you.
+
+```sh
+./nixos.sh
+```
+
+Reasons for this are comments in the script. Then, you should be able to do all the package-level `yarn run` commands/scripts.
+
+# Try not to push directly to develop
+
+If you absolutely must, please prefix your commit message with `hotfix: `.
+
+# Pull request protocol
+
+Please work against `develop` branch. **Do not** work against `master`.
+
+- For rescript code: Slava and Ozzie are reviewers
+- For js or typescript code: Sam and Ozzie are reviewers
+- For ops code (i.e. yaml, package.json): Slava and Sam are reviewers
+
+Autopings are set up: if you are not autopinged, you are welcome to comment, but please do not use the formal review feature, send approvals, rejections, or merges.
+
+# Code Quality
+
+- Aim for at least 8/10\* quality in `/packages/squiggle-lang`, and 7/10 quality in `/packages/components`.
+- If you submit a PR that is under a 7, for some reason, describe the reasoning for this in the PR.
+
+* This quality score is subjective.
+
+# Rescript Style
+
+**Use `->` instead of `|>`**  
+Note: Our codebase used to use `|>`, so there's a lot of that in the system. We'll gradually change it.
+
+**Use `x -> y -> z` instead of `let foo = y(x); let bar = z(foo)`**
+
+**Don't use anonymous functions with over three lines**  
+Bad:
+
+```rescript
+  foo
+  -> E.O.fmap(r => {
+    let a = 34;
+    let b = 35;
+    let c = 48;
+    r + a + b + c
+  }
+```
+
+Good:
+
+```rescript
+  let addingFn = (r => {
+    let a = 34;
+    let b = 35;
+    let c = 48;
+    r + a + b + c
+  }
+  foo -> addingFn
+```
+
+**Write out types for everything, even if there's an interface file**  
+We'll try this for one month (ending May 5, 2022), then revisit.
+
+**Use the Rescript optional default syntax**  
+Rescript is clever about function inputs. There's custom syntax for default and optional arguments. In the cases where this applies, use it.
+
+From https://rescript-lang.org/docs/manual/latest/function:
+
+```rescript
+// radius can be omitted
+let drawCircle = (~color, ~radius=?, ()) => {
+  setColor(color)
+  switch radius {
+  | None => startAt(1, 1)
+  | Some(r_) => startAt(r_, r_)
+  }
+}
+```
+
+**Use named arguments**  
+If a function is called externally (in a different file), and has either:
+
+1. Two arguments of the same type
+2. Three paramaters or more.
+
+**Module naming: Use x_y as module names**  
+For example: `Myname_Myproject_Add.res`. Rescript/Ocaml both require files to have unique names, so long names are needed to keep different parts separate from each other.
+
+See [this page](https://dev.to/yawaramin/a-modular-ocaml-project-structure-1ikd) for more information. (Though note that they use two underscores, and we do one. We might refactor that later.
+
+**Module naming: Don't rename modules**
+We have some of this in the Reducer code, but generally discourage it.
+
+**Use interface files (.resi) for files with very public interfaces**
+
+### Recommended Rescript resources
+
+- https://dev.to/yawaramin/a-modular-ocaml-project-structure-1ikd
+- https://github.com/avohq/reasonml-code-style-guide
+- https://cs.brown.edu/courses/cs017/content/docs/reasonml-style.pdf
+- https://github.com/ostera/reason-design-patterns/

README.md

@@ -1,14 +1,76 @@
 # Squiggle
 
-This is an experiment DSL/language for making probabilistic estimates.
+[![Packages check](https://github.com/quantified-uncertainty/squiggle/actions/workflows/ci.yml/badge.svg)](https://github.com/quantified-uncertainty/squiggle/actions/workflows/ci.yml)
+[![npm version - lang](https://badge.fury.io/js/@quri%2Fsquiggle-lang.svg)](https://www.npmjs.com/package/@quri/squiggle-lang)
+[![npm version - components](https://badge.fury.io/js/@quri%2Fsquiggle-components.svg)](https://www.npmjs.com/package/@quri/squiggle-components)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/quantified-uncertainty/squiggle/blob/develop/LICENSE)
+[![codecov](https://codecov.io/gh/quantified-uncertainty/squiggle/branch/develop/graph/badge.svg?token=QRLBL5CQ7C)](https://codecov.io/gh/quantified-uncertainty/squiggle)
 
-## DistPlus 
-We have a custom library called DistPlus to handle distributions with additional metadata. This helps handle mixed distributions (continuous + discrete), a cache for a cdf, possible unit types (specific times are supported), and limited domains.
+_An estimation language_.
 
-## Running packages in the monorepo
-This application uses `lerna` to manage dependencies between packages. To install
-dependencies of all packages, run:
+## Get started
 
+- [Gallery](https://www.squiggle-language.com/docs/Discussions/Gallery)
+- [Squiggle playground](https://squiggle-language.com/playground)
+- [Language basics](https://www.squiggle-language.com/docs/Guides/Language)
+- [Squiggle functions source of truth](https://www.squiggle-language.com/docs/Guides/Functions)
+- [Known bugs](https://www.squiggle-language.com/docs/Discussions/Bugs)
+- [Original lesswrong sequence](https://www.lesswrong.com/s/rDe8QE5NvXcZYzgZ3)
+- [Author your squiggle models as Observable notebooks](https://observablehq.com/@hazelfire/squiggle)
+- [Use squiggle in VS Code](https://marketplace.visualstudio.com/items?itemName=QURI.vscode-squiggle)
+
+## Our deployments
+
+- **website/docs prod**: https://squiggle-language.com
+- **website/docs staging**: https://preview.squiggle-language.com
+- **components storybook prod**: https://components.squiggle-language.com
+- **components storybook staging**: https://preview-components.squiggle-language.com
+- **legacy (2020) playground**: https://playground.squiggle-language.com
+
+## Packages
+
+This monorepo has several packages that can be used for various purposes. All
+the packages can be found in `packages`.
+
+- `@quri/squiggle-lang` in `packages/squiggle-lang` contains the core language, particularly
+  an interface to parse squiggle expressions and return descriptions of distributions
+  or results.
+- `@quri/squiggle-components` in `packages/components` contains React components that
+  can be passed squiggle strings as props, and return a presentation of the result
+  of the calculation.
+- `packages/website` is the main descriptive website for squiggle,
+  it is hosted at `squiggle-language.com`.
+- `packages/vscode-ext` is the VS Code extension for writing estimation functions.
+- `packages/cli` is an experimental way of using imports in squiggle, which is also on [npm](https://www.npmjs.com/package/squiggle-cli-experimental).
+
+# Develop
+
+For any project in the repo, begin by running `yarn` in the top level
+
+```sh
+yarn
 ```
-lerna bootstrap
+
+Then use `turbo` to build the specific packages or the entire monorepo:
+
+```sh
+turbo run build
 ```
+
+Or:
+
+```sh
+turbo run build --filter=@quri/squiggle-components
+```
+
+You can also run specific npm scripts for the package you're working on. See `packages/*/README.md` for the details.
+
+# NixOS users
+
+This repository requires the use of bundled binaries from node_modules, which
+are not linked statically. The easiest way to get them working is to enable
+[nix-ld](https://github.com/Mic92/nix-ld).
+
+# Contributing
+
+See `CONTRIBUTING.md`.

examples/decay.squiggle

@@ -0,0 +1,20 @@
+# The following code was provided by Nuño Sempere, it comes directly from the post https://www.lesswrong.com/s/rDe8QE5NvXcZYzgZ3/p/j8o6sgRerE3tqNWdj
+## Initial setup
+yearly_probability_max = 0.95
+yearly_probability_min = 0.66
+period_probability_function(epsilon, yearly_probability) = 1 - (1 - yearly_probability) ^ (1 / epsilon)
+probability_decayed(t, time_periods, period_probability) = 1 - (1 - period_probability) ^ (time_periods - t)
+
+## Monthly decomposition
+months_in_a_year=12
+
+monthly_probability_min = period_probability_function(months_in_a_year, yearly_probability_min)
+monthly_probability_max = period_probability_function(months_in_a_year, yearly_probability_max)
+
+probability_decayed_monthly_min(t) = probability_decayed(t, months_in_a_year, monthly_probability_min)
+probability_decayed_monthly_max(t) = probability_decayed(t, months_in_a_year, monthly_probability_max)
+probability_decayed_monthly(t) = probability_decayed_monthly_min(t) to probability_decayed_monthly_max(t)
+
+probability_decayed_monthly
+## probability_decayed_monthly(6)
+## mean(probability_decayed_monthly(6))

examples/givedirectly.squiggle

@@ -0,0 +1,38 @@
+# This is a cost effectiveness analysis of givedirectly, originally done by givewell, and translated into Squiggle by Sam Nolan
+donation_size = 10000
+proportion_of_funding_available = beta(10, 2)
+total_funding_available = donation_size * proportion_of_funding_available
+household_size = 3.7 to 5.7
+size_of_transfer = 800 to 1200
+size_of_transfer_per_person = size_of_transfer / household_size
+
+portion_invested = 0.3 to 0.5
+amount_invested = portion_invested * size_of_transfer_per_person
+amount_consumed = (1 - portion_invested) * size_of_transfer_per_person
+return_on_investment = 0.08 to 0.12
+increase_in_consumption_from_investments = return_on_investment * amount_invested
+baseline_consumption = 200 to 350
+log_increase_in_consumption = log(amount_consumed + baseline_consumption) + log(baseline_consumption)
+log_increase_in_consumption_from_investment = log(increase_in_consumption_from_investments + baseline_consumption) + log(baseline_consumption)
+investment_duration = 8 to 12
+discount_rate = beta(1.004, 20)
+
+present_value_excluding_last_year = log_increase_in_consumption_from_investment * (1 - (1 + discount_rate) ^ (-investment_duration)) / (log(1 + discount_rate))
+
+percent_of_investment_returned = 0.15 to 0.25
+
+pv_consumption_last_year = (log(baseline_consumption + amount_invested * (return_on_investment + percent_of_investment_returned)) - log(baseline_consumption)) / (1 + discount_rate)^investment_duration
+
+total_pv_of_cash_transfer = pv_consumption_last_year + present_value_excluding_last_year + log_increase_in_consumption
+
+discount_negative_spoiler = 0.03 to 0.07
+
+value_discounting_spoiler = discount_negative_spoiler * total_pv_of_cash_transfer
+
+consumption_increase_per_household = value_discounting_spoiler * household_size
+
+amount_of_transfers_made = total_funding_available / size_of_transfer
+
+total_increase_in_ln_consumption = amount_of_transfers_made * consumption_increase_per_household
+
+total_increase_in_ln_consumption

examples/wholenumberassignmentevaluation.squiggle

@@ -0,0 +1,3 @@
+xY1 = 99
+aBa3 = xY1 * 2 + 1
+aBa3 * xY1 + aBa3

flake.lock

@@ -0,0 +1,79 @@
+{
+  "nodes": {
+    "flake-utils": {
+      "locked": {
+        "lastModified": 1659877975,
+        "narHash": "sha256-zllb8aq3YO3h8B/U0/J1WBgAL8EX5yWf5pMj3G0NAmc=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "c0e246b9b83f637f4681389ecabcb2681b4f3af0",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
+    "flake-utils_2": {
+      "locked": {
+        "lastModified": 1659877975,
+        "narHash": "sha256-zllb8aq3YO3h8B/U0/J1WBgAL8EX5yWf5pMj3G0NAmc=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "c0e246b9b83f637f4681389ecabcb2681b4f3af0",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
+    "gentype": {
+      "inputs": {
+        "flake-utils": "flake-utils_2",
+        "nixpkgs": [
+          "nixpkgs"
+        ]
+      },
+      "locked": {
+        "lastModified": 1661855866,
+        "narHash": "sha256-+q0OOTyaq8eOn9BOWdPOCtSDOISW4A59v3mq3JOZyug=",
+        "owner": "rescript-association",
+        "repo": "genType",
+        "rev": "6b5f164b4f6ced456019b7579a0ab7e0a86518ad",
+        "type": "github"
+      },
+      "original": {
+        "owner": "rescript-association",
+        "repo": "genType",
+        "type": "github"
+      }
+    },
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1661617163,
+        "narHash": "sha256-NN9Ky47j8ohgPhA9JZyfkYIbbAo6RJkGz+7h8/exVpE=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "0ba2543f8c855d7be8e90ef6c8dc89c1617e8a08",
+        "type": "github"
+      },
+      "original": {
+        "id": "nixpkgs",
+        "ref": "nixos-22.05",
+        "type": "indirect"
+      }
+    },
+    "root": {
+      "inputs": {
+        "flake-utils": "flake-utils",
+        "gentype": "gentype",
+        "nixpkgs": "nixpkgs"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,99 @@
+{
+  description = "Squiggle packages";
+
+  inputs = {
+    nixpkgs.url = "nixpkgs/nixos-22.05";
+    gentype = {
+      url = "github:rescript-association/genType";
+      inputs.nixpkgs.follows = "nixpkgs";
+    };
+    flake-utils.url = "github:numtide/flake-utils";
+  };
+
+  outputs = { self, nixpkgs, gentype, flake-utils }:
+    let
+      version = builtins.substring 0 8 self.lastModifiedDate;
+      overlays = [
+        (final: prev: {
+          # set the node version here
+          nodejs = prev.nodejs-18_x;
+          # The override is the only way to get it into mkYarnModules
+        })
+      ];
+
+      commonFn = pkgs: {
+        buildInputs = with pkgs; [ nodejs yarn ];
+        prettier = with pkgs.nodePackages; [ prettier ];
+        which = [ pkgs.which ];
+      };
+      gentypeOutputFn = pkgs: gentype.outputs.packages.${pkgs.system}.default;
+      langFn = { pkgs, ... }:
+        # Probably doesn't work on i686-linux
+        import ./nix/squiggle-lang.nix {
+          inherit pkgs commonFn gentypeOutputFn;
+        };
+      componentsFn = { pkgs, ... }:
+        import ./nix/squiggle-components.nix { inherit pkgs commonFn langFn; };
+      websiteFn = { pkgs, ... }:
+        import ./nix/squiggle-website.nix {
+          inherit pkgs commonFn langFn componentsFn;
+        };
+      vscodeextFn = { pkgs, ... }:
+        import ./nix/squiggle-vscode.nix {
+          inherit pkgs commonFn langFn componentsFn;
+        };
+      cliFn = { pkgs, ... }:
+        import ./nix/squiggle-cli.nix {
+          inherit pkgs commonFn;
+        };
+
+      # local machines
+      localFlakeOutputs = { pkgs, ... }:
+        let
+          lang = langFn pkgs;
+          components = componentsFn pkgs;
+          website = websiteFn pkgs;
+          vscodeext = vscodeextFn pkgs;
+          cli = cliFn pkgs;
+        in {
+          # validating
+          checks = flake-utils.lib.flattenTree {
+            lang-lint = lang.lint;
+            lang-test = lang.test;
+            components-lint = components.lint;
+            docusaurus-lint = website.lint;
+            cli-lint = cli.lint;
+          };
+          # building
+          packages = flake-utils.lib.flattenTree {
+            default = components.build;
+            lang = lang.build;
+            lang-bundle = lang.bundle;
+            lang-test = lang.test;
+            components = components.build;
+            components-bundle = components.bundle;
+
+            # Lint
+            lang-lint = lang.lint;
+            components-lint = components.lint;
+            docusaurus-lint = website.lint;
+            vscode-lint = vscodeext.lint;
+            cli-lint = cli.lint;
+          };
+
+          # developing
+          devShells = let shellNix = import ./nix/shell.nix { inherit pkgs; };
+          in flake-utils.lib.flattenTree {
+            default = shellNix.all;
+            js = shellNix.just-js;
+          };
+        };
+    in flake-utils.lib.eachDefaultSystem (system:
+      let
+        pkgs = import nixpkgs {
+          inherit system;
+          overlays = overlays;
+        };
+
+      in localFlakeOutputs pkgs);
+}

lerna.json

@@ -1,8 +0,0 @@
-{
-  "packages": [
-    "packages/*"
-  ],
-  "npmClient": "yarn",
-  "useWorkspaces": true,
-  "version": "0.0.0"
-}

nix/README.md

@@ -0,0 +1 @@
+Visit `quantified-uncertainty.cachix.org` for information about how to add our binary cache to your local dev environment.

nix/shell.nix

@@ -0,0 +1,25 @@
+{ pkgs }:
+with pkgs;
+let
+  js = [ yarn nodejs nodePackages.ts-node ];
+  rust = [
+    wasm-pack
+    cargo
+    rustup
+    pkg-config
+    libressl
+    rustfmt
+    wasmtime
+    binaryen
+    wasm-bindgen-cli
+  ];
+in {
+  all = mkShell {
+    name = "squiggle_yarn-wasm-devshell";
+    buildInputs = builtins.concatLists [ js rust [ nixfmt ] ];
+  };
+  just-js = mkShell {
+    name = "squiggle_yarn-devshell";
+    buildInputs = js ++ [ nixfmt ];
+  };
+}

nix/squiggle-cli.nix

@@ -0,0 +1,13 @@
+{ pkgs, commonFn }:
+
+rec {
+  common = commonFn pkgs;
+
+  lint = pkgs.stdenv.mkDerivation {
+    name = "squiggle-cli-lint";
+    buildInputs = common.buildInputs ++ common.prettier;
+    src = ../packages/cli;
+    buildPhase = "prettier --check .";
+    installPhase = "mkdir -p $out";
+  };
+}

nix/squiggle-components.nix

@@ -0,0 +1,75 @@
+{ pkgs, commonFn, langFn }:
+
+rec {
+  common = commonFn pkgs;
+  lang = langFn pkgs;
+  componentsPackageJson = let
+    raw = pkgs.lib.importJSON ../packages/components/package.json;
+    modified =
+      pkgs.lib.recursiveUpdate raw { dependencies.react-dom = "^18.2.0"; };
+    packageJsonString = builtins.toJSON modified;
+  in pkgs.writeText "packages/components/patched-package.json"
+  packageJsonString;
+  yarn-source = pkgs.mkYarnPackage {
+    name = "squiggle-components_yarnsource";
+    buildInputs = common.buildInputs;
+    src = ../packages/components;
+    packageJSON = componentsPackageJson;
+    yarnLock = ../yarn.lock;
+    packageResolutions."@quri/squiggle-lang" = lang.build;
+  };
+  lint = pkgs.stdenv.mkDerivation {
+    name = "squiggle-components-lint";
+    src = ../packages/components;
+    buildInputs = common.buildInputs ++ common.prettier;
+    buildPhase = "yarn lint";
+    installPhase = "mkdir -p $out";
+  };
+  build = pkgs.stdenv.mkDerivation {
+    name = "squiggle-components-build";
+    src = yarn-source + "/libexec/@quri/squiggle-components";
+    buildInputs = common.buildInputs;
+    buildPhase = ''
+      cp -r node_modules/@quri/squiggle-lang deps/@quri
+      pushd deps/@quri/squiggle-components
+
+      yarn --offline build:cjs
+      yarn --offline build:css
+      popd
+    '';
+    installPhase = ''
+      mkdir -p $out
+
+      # annoying hack because permissions on transitive dependencies later on
+      mv deps/@quri/squiggle-components/node_modules deps/@quri/squiggle-components/NODE_MODULES
+      mv node_modules deps/@quri/squiggle-components
+
+      # patching .gitignore so flake keeps build artefacts
+      sed -i /dist/d deps/@quri/squiggle-components/.gitignore
+      cp -r deps/@quri/squiggle-components/. $out
+    '';
+  };
+  bundle = pkgs.stdenv.mkDerivation {
+    name = "squiggle-components-bundle";
+    src = yarn-source + "/libexec/@quri/squiggle-components";
+    buildInputs = common.buildInputs;
+    buildPhase = ''
+      cp -r node_modules/@quri/squiggle-lang deps/@quri
+      pushd deps/@quri/squiggle-components
+
+      yarn --offline bundle
+      popd
+    '';
+    installPhase = ''
+      mkdir -p $out
+
+      # annoying hack because permissions on transitive dependencies later on
+      mv deps/@quri/squiggle-components/node_modules deps/@quri/squiggle-components/NODE_MODULES
+      mv node_modules deps/@quri/squiggle-components
+
+      # patching .gitignore so flake keeps build artefacts
+      sed -i /dist/d deps/@quri/squiggle-components/.gitignore
+      cp -r deps/@quri/squiggle-components/. $out
+    '';
+  };
+}

nix/squiggle-lang.nix

@@ -0,0 +1,116 @@
+{ pkgs, commonFn, gentypeOutputFn }:
+
+rec {
+  common = commonFn pkgs;
+  langPackageJson = let
+    raw = pkgs.lib.importJSON ../packages/squiggle-lang/package.json;
+    modified = pkgs.lib.recursiveUpdate raw {
+      devDependencies."@types/lodash" = "^4.14.167";
+    };
+    packageJsonString = builtins.toJSON modified;
+  in pkgs.writeText "packages/squiggle-lang/patched-package.json"
+  packageJsonString;
+  yarn-source = pkgs.mkYarnPackage {
+    name = "squiggle-lang_yarnsource";
+    src = ../packages/squiggle-lang;
+    packageJSON = langPackageJson;
+    yarnLock = ../yarn.lock;
+    pkgConfig = {
+      rescript = {
+        buildInputs = common.which
+          ++ (if pkgs.system != "i686-linux" then [ pkgs.gcc_multi ] else [ ]);
+        postInstall = ''
+          echo "PATCHELF'ING RESCRIPT EXECUTABLES (INCL NINJA)"
+          # Patching interpreter for linux/*.exe's
+          THE_LD=$(patchelf --print-interpreter $(which mkdir))
+          patchelf --set-interpreter $THE_LD linux/*.exe && echo "- patched interpreter for linux/*.exe's"
+
+          # Replacing needed shared library for linux/ninja.exe
+          THE_SO=$(find /nix/store/*/lib64 -name libstdc++.so.6 | head -n 1)
+          patchelf --replace-needed libstdc++.so.6 $THE_SO linux/ninja.exe && echo "- replaced needed for linux/ninja.exe"
+        '';
+      };
+      gentype = {
+        postInstall = ''
+          mv gentype.exe ELFLESS-gentype.exe
+          cp ${gentypeOutputFn pkgs}/src/GenType.exe gentype.exe
+        '';
+      };
+    };
+  };
+  lint = pkgs.stdenv.mkDerivation {
+    name = "squiggle-lang-lint";
+    src = yarn-source + "/libexec/@quri/squiggle-lang/deps/@quri/squiggle-lang";
+    buildInputs = common.buildInputs ++ common.prettier;
+    buildPhase = ''
+      yarn lint:prettier
+      yarn lint:rescript
+    '';
+    installPhase = "mkdir -p $out";
+  };
+  build = pkgs.stdenv.mkDerivation {
+    name = "squiggle-lang-build";
+    # `peggy` is in the `node_modules` that's adjacent to `deps`.
+    src = yarn-source + "/libexec/@quri/squiggle-lang";
+    buildInputs = common.buildInputs;
+    buildPhase = ''
+      # so that the path to ppx doesn't need to be patched.
+      mv node_modules deps
+
+      pushd deps/@quri/squiggle-lang
+      yarn --offline build:peggy
+      yarn --offline build:rescript
+      yarn --offline build:typescript
+
+      # custom gitignore so that the flake keeps build artefacts
+      mv .gitignore GITIGNORE
+      sed -i /Reducer_Peggy_GeneratedParser.js/d GITIGNORE
+      sed -i /ReducerProject_IncludeParser.js/d GITIGNORE
+      sed -i /\*.bs.js/d GITIGNORE
+      sed -i /\*.gen.ts/d GITIGNORE
+      sed -i /\*.gen.tsx/d GITIGNORE
+      sed -i /\*.gen.js/d GITIGNORE
+      sed -i /helpers.js/d GITIGNORE
+
+      popd
+    '';
+    installPhase = ''
+      mkdir -p $out
+      # mkdir -p $out/node_modules
+      mv deps/@quri/squiggle-lang/GITIGNORE deps/@quri/squiggle-lang/.gitignore
+
+      # annoying hack because permissions on transitive dependencies later on
+      mv deps/@quri/squiggle-lang/node_modules deps/@quri/squiggle-lang/NODE_MODULES
+      mv deps/node_modules deps/@quri/squiggle-lang
+
+      # the proper install phase
+      cp -r deps/@quri/squiggle-lang/. $out
+    '';
+  };
+  test = pkgs.stdenv.mkDerivation {
+    name = "squiggle-lang-test";
+    src = build;
+    buildInputs = common.buildInputs;
+    buildPhase = ''
+      yarn --offline test
+    '';
+    installPhase = ''
+      mkdir -p $out
+      cp -r . $out
+    '';
+  };
+  bundle = pkgs.stdenv.mkDerivation {
+    name = "squiggle-lang-bundle";
+    src = test;
+    buildInputs = common.buildInputs;
+    buildPhase = ''
+      yarn --offline bundle
+    '';
+    installPhase = ''
+      mkdir -p $out
+      cp -r dist $out
+      cp *.json $out/dist
+    '';
+  };
+
+}

nix/squiggle-vscode.nix

@@ -0,0 +1,24 @@
+{ pkgs, commonFn, langFn, componentsFn }:
+
+rec {
+  common = commonFn pkgs;
+  lang = langFn pkgs;
+  components = componentsFn pkgs;
+
+  yarn-source = pkgs.mkYarnPackage {
+    name = "squiggle-vscodeext_yarnsource";
+    src = ../packages/vscode-ext;
+    packageJson = ../packages/vscode-ext/package.json;
+    yarnLock = ../yarn.lock;
+    packageResolutions."@quri/squiggle-lang" = lang.build;
+    packageResolutions."@quri/squiggle-components" = components.build;
+  };
+  lint = pkgs.stdenv.mkDerivation {
+    name = "squiggle-vscode-lint";
+    buildInputs = common.buildInputs ++ common.prettier;
+    src =
+      ../packages/vscode-ext; # yarn-source + "/libexec/vscode-squiggle/deps/vscode-squiggle";
+    buildPhase = "prettier --check .";
+    installPhase = "mkdir -p $out";
+  };
+}

nix/squiggle-website.nix

@@ -0,0 +1,30 @@
+{ pkgs, commonFn, langFn, componentsFn }:
+
+rec {
+  common = commonFn pkgs;
+  lang = langFn pkgs;
+  components = componentsFn pkgs;
+  websitePackageJson = let
+    raw = pkgs.lib.importJSON ../packages/website/package.json;
+    modified = pkgs.lib.recursiveUpdate raw {
+      dependencies.postcss-import = "^14.1.0";
+      dependencies.tailwindcss = "^3.1.8";
+    };
+    packageJsonString = builtins.toJSON modified;
+  in pkgs.writeText "packages/website/patched-package.json" packageJsonString;
+  yarn-source = pkgs.mkYarnPackage {
+    name = "squiggle-website_yarnsource";
+    src = ../packages/website;
+    packageJSON = websitePackageJson;
+    yarnLock = ../yarn.lock;
+    packageResolutions."@quri/squiggle-lang" = lang.build;
+    packageResolutions."@quri/squiggle-components" = components.build;
+  };
+  lint = pkgs.stdenv.mkDerivation {
+    name = "squiggle-website-lint";
+    buildInputs = common.buildInputs ++ common.prettier;
+    src = ../packages/website;
+    buildPhase = "yarn lint";
+    installPhase = "mkdir -p $out";
+  };
+}

package.json

@@ -1,8 +1,19 @@
 {
   "private": true,
-  "devDependencies": {
-    "lerna": "^4.0.0"
-  },
   "name": "squiggle",
-  "workspaces": ["packages/*"]
+  "scripts": {
+    "nodeclean": "rm -r node_modules && rm -r packages/*/node_modules"
+  },
+  "devDependencies": {
+    "prettier": "^2.7.1",
+    "turbo": "^1.5.5"
+  },
+  "workspaces": [
+    "packages/*"
+  ],
+  "resolutions": {
+    "@types/react": "^18.0.1",
+    "react": "^18.0.0"
+  },
+  "packageManager": "yarn@1.22.17"
 }

packages/cli/.gitignore

@@ -0,0 +1,4 @@
+## Artifacts
+*.swp
+/node_modules/
+yarn-error.log

packages/cli/README.md

@@ -0,0 +1,49 @@
+## Squiggle CLI
+
+This package can be used to incorporate a very simple `import` system into Squiggle.
+
+To use, write special files with a `.squiggleU` file type. In these files, you can write lines like,
+
+```
+@import(models/gdp_over_time.squiggle, gdpOverTime)
+gdpOverTime(2.5)
+```
+
+The imports will be replaced with the contents of the file in `models/gdp_over_time.squiggle` upon compilation. The `.squiggleU` file will be converted into a `.squiggle` file with the `import` statement having this replacement.
+
+## Running
+
+### `npx squiggle-cli-experimental compile`
+
+Runs compilation in the current directory and all of its subdirectories.
+
+### `npx squiggle-cli-experimental watch`
+
+Watches `.squiggleU` files in the current directory (and subdirectories) and rebuilds them when they are saved. Note that this will _not_ rebuild files when their dependencies are changed, just when they are changed directly.
+
+## Further instructions
+
+The above requires having node, npm and npx. To install the first two, see [here](https://nodejs.org/en/), to install npx, run:
+
+```
+npm install -g npx
+```
+
+Alternatively, you can run the following without the need for npx:
+
+```
+npm install squiggle-cli-experimental
+node node_modules/squiggle-cli-experimental/index.js compile
+```
+
+or you can add a script to your `package.json`, like:
+
+```
+ ...
+ scripts: {
+  "compile": "squiggle-cli-experimental compile"
+ }
+ ...
+```
+
+This can be run with `npm run compile`. `npm` knows how to reach into the node_modules directly, so it's not necessary to specify that.

packages/cli/index.js

@@ -0,0 +1,96 @@
+#!/usr/bin/env node
+
+import fs from "fs";
+import path from "path";
+import indentString from "indent-string";
+import chokidar from "chokidar";
+import chalk from "chalk";
+import { Command } from "commander";
+import glob from "glob";
+
+const processFile = (fileName, seen = []) => {
+  const normalizedFileName = path.resolve(fileName);
+  if (seen.includes(normalizedFileName)) {
+    throw new Error(`Recursive dependency for file ${fileName}`);
+  }
+
+  const fileContents = fs.readFileSync(fileName, "utf-8");
+  if (!fileName.endsWith(".squiggleU")) {
+    return fileContents;
+  }
+
+  const regex = /\@import\(\s*([^)]+?)\s*\)/g;
+  const matches = Array.from(fileContents.matchAll(regex)).map((r) =>
+    r[1].split(/\s*,\s*/)
+  );
+  const newContent = fileContents.replaceAll(regex, "");
+  const appendings = [];
+
+  matches.forEach((r) => {
+    const importFileName = r[0];
+    const rename = r[1];
+    const item = fs.statSync(importFileName);
+    if (item.isFile()) {
+      const data = processFile(importFileName, [...seen, normalizedFileName]);
+      if (data) {
+        const importString = `${rename} = {\n${indentString(data, 2)}\n}\n`;
+        appendings.push(importString);
+      }
+    } else {
+      console.log(
+        chalk.red(`Import Error`) +
+          `: ` +
+          chalk.cyan(importFileName) +
+          ` not found in file ` +
+          chalk.cyan(fileName) +
+          `. Make sure the @import file names all exist in this repo.`
+      );
+    }
+  });
+  const imports = appendings.join("\n");
+
+  const newerContent = imports.concat(newContent);
+  return newerContent;
+};
+
+const run = (fileName) => {
+  const content = processFile(fileName);
+  const parsedPath = path.parse(path.resolve(fileName));
+  const newFilename = `${parsedPath.dir}/${parsedPath.name}.squiggle`;
+  fs.writeFileSync(newFilename, content);
+  console.log(chalk.cyan(`Updated ${fileName} -> ${newFilename}`));
+};
+
+const compile = () => {
+  glob("**/*.squiggleU", (_err, files) => {
+    files.forEach(run);
+  });
+};
+
+const watch = () => {
+  chokidar
+    .watch("**.squiggleU")
+    .on("ready", () => console.log(chalk.green("Ready!")))
+    .on("change", (event, _) => {
+      run(event);
+    });
+};
+
+const program = new Command();
+
+program
+  .name("squiggle-utils")
+  .description("CLI to transform squiggle files with @imports")
+  .version("0.0.1");
+
+program
+  .command("watch")
+  .description("watch files and compile on the fly")
+  .action(watch);
+
+program
+  .command("compile")
+  .description("compile all .squiggleU files into .squiggle files")
+  .action(compile);
+
+program.parse();

packages/cli/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "squiggle-cli-experimental",
+  "version": "0.0.3",
+  "main": "index.js",
+  "homepage": "https://squiggle-language.com",
+  "author": "Quantified Uncertainty Research Institute",
+  "bin": "index.js",
+  "type": "module",
+  "scripts": {
+    "start": "node .",
+    "lint": "prettier --check .",
+    "format": "prettier --write ."
+  },
+  "license": "MIT",
+  "dependencies": {
+    "chalk": "^5.1.0",
+    "chokidar": "^3.5.3",
+    "commander": "^9.4.1",
+    "fs": "^0.0.1-security",
+    "glob": "^8.0.3",
+    "indent-string": "^5.0.0"
+  }
+}

packages/components/.gitignore

@@ -0,0 +1,25 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+storybook-static
+dist

packages/components/.npmignore

@@ -0,0 +1,9 @@
+node_modules
+storybook-static
+public
+build
+.storybook
+.direnv
+.envrc
+webpack.config.js
+index.html

packages/components/.prettierignore

@@ -0,0 +1,4 @@
+dist/
+storybook-static
+src/styles/base.css
+src/styles/forms.css

packages/components/.prettierrc.json

@@ -0,0 +1 @@
+{}

packages/components/.storybook/main.js

@@ -0,0 +1,37 @@
+//const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const custom = require("../webpack.config.js");
+
+module.exports = {
+  webpackFinal: async (config) => {
+    config.resolve.alias = custom.resolve.alias;
+    return {
+      ...config,
+      module: {
+        ...config.module,
+        rules: config.module.rules.concat(
+          custom.module.rules.filter((x) => x.loader === "ts-loader")
+        ),
+      },
+    };
+  },
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/preset-create-react-app",
+  ],
+  framework: "@storybook/react",
+  core: {
+    builder: "webpack5",
+  },
+  typescript: {
+    check: false,
+    checkOptions: {},
+    reactDocgen: "react-docgen-typescript",
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: (prop) =>
+        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
+    },
+  },
+};

packages/components/.storybook/preview.js

@@ -0,0 +1,21 @@
+import "../src/styles/main.css";
+import "!style-loader!css-loader!postcss-loader!../src/styles/main.css";
+import { SquiggleContainer } from "../src/components/SquiggleContainer";
+
+export const decorators = [
+  (Story) => (
+    <SquiggleContainer>
+      <Story />
+    </SquiggleContainer>
+  ),
+];
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

packages/components/README.md

@@ -0,0 +1,81 @@
+[![npm version](https://badge.fury.io/js/@quri%2Fsquiggle-components.svg)](https://www.npmjs.com/package/@quri/squiggle-components)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/quantified-uncertainty/squiggle/blob/develop/LICENSE)
+
+# Squiggle components
+
+This package contains the react components for squiggle. These can be used either as a library or hosted as a [storybook](https://storybook.js.org/).
+
+The `@quri/squiggle-components` package offers several components and utilities for people who want to embed Squiggle components into websites.
+
+# Usage in a `react` project
+
+For example, in a fresh `create-react-app` project
+
+```sh
+yarn add @quri/squiggle-components
+```
+
+Add to `App.js`:
+
+```jsx
+import { SquiggleEditor } from "@quri/squiggle-components";
+<SquiggleEditor
+  defaultCode="x = beta($alpha, 10); x + $shift"
+  jsImports={{ alpha: 3, shift: 20 }}
+/>;
+```
+
+# Usage in a Nextjs project
+
+For now, `squiggle-components` requires the `window` property, so using the package in nextjs requires dynamic loading:
+
+```
+
+import React from "react";
+import { SquiggleChart } from "@quri/squiggle-components";
+
+import dynamic from "next/dynamic";
+
+const SquiggleChart = dynamic(
+  () => import("@quri/squiggle-components").then((mod) => mod.SquiggleChart),
+  {
+    loading: () => <p>Loading...</p>,
+    ssr: false,
+  }
+);
+
+export function DynamicSquiggleChart({ squiggleString }) {
+  if (squiggleString == "") {
+    return null;
+  } else {
+    return (
+        <SquiggleChart
+          defaultCode={squiggleString}
+          width={445}
+          height={200}
+          showSummary={true}
+        />
+    );
+  }
+}
+
+```
+
+# Build storybook for development
+
+We assume that you had run `yarn` at monorepo level, installing dependencies.
+
+You need to _prepare_ by building and bundling `squiggle-lang`
+
+```sh
+cd ../squiggle-lang
+yarn build
+```
+
+If you've otherwise done this recently you can skip those.
+
+Run a development server
+
+```sh
+yarn start
+```

packages/components/jest.config.js

@@ -0,0 +1,6 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  preset: "ts-jest",
+  setupFilesAfterEnv: ["<rootDir>/test/setup.js"],
+  testEnvironment: "jsdom",
+};

packages/components/package.json

@@ -0,0 +1,125 @@
+{
+  "name": "@quri/squiggle-components",
+  "version": "0.5.0",
+  "license": "MIT",
+  "dependencies": {
+    "@floating-ui/react-dom": "^1.0.0",
+    "@floating-ui/react-dom-interactions": "^0.10.1",
+    "@headlessui/react": "^1.7.3",
+    "@heroicons/react": "^1.0.6",
+    "@hookform/resolvers": "^2.9.8",
+    "@quri/squiggle-lang": "^0.5.0",
+    "@react-hook/size": "^2.1.2",
+    "@types/uuid": "^8.3.4",
+    "clsx": "^1.2.1",
+    "framer-motion": "^7.5.3",
+    "lodash": "^4.17.21",
+    "react": "^18.1.0",
+    "react-ace": "^10.1.0",
+    "react-hook-form": "^7.37.0",
+    "react-use": "^17.4.0",
+    "react-vega": "^7.6.0",
+    "uuid": "^9.0.0",
+    "vega": "^5.22.1",
+    "vega-embed": "^6.21.0",
+    "vega-lite": "^5.5.0",
+    "vscode-uri": "^3.0.6",
+    "yup": "^0.32.11"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
+    "@storybook/addon-actions": "^6.5.12",
+    "@storybook/addon-essentials": "^6.5.12",
+    "@storybook/addon-links": "^6.5.12",
+    "@storybook/builder-webpack5": "^6.5.12",
+    "@storybook/manager-webpack5": "^6.5.12",
+    "@storybook/node-logger": "^6.5.9",
+    "@storybook/preset-create-react-app": "^4.1.2",
+    "@storybook/react": "^6.5.12",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^27.5.0",
+    "@types/lodash": "^4.14.186",
+    "@types/node": "^18.8.3",
+    "@types/react": "^18.0.21",
+    "@types/styled-components": "^5.1.26",
+    "@types/uuid": "^8.3.4",
+    "@types/webpack": "^5.28.0",
+    "canvas": "^2.10.1",
+    "cross-env": "^7.0.3",
+    "jest": "^29.0.3",
+    "jest-environment-jsdom": "^29.1.2",
+    "jsdom": "^20.0.1",
+    "mini-css-extract-plugin": "^2.6.1",
+    "postcss-cli": "^10.0.0",
+    "postcss-import": "^15.0.0",
+    "postcss-loader": "^7.0.1",
+    "postcss-nesting": "^10.2.0",
+    "react": "^18.1.0",
+    "react-scripts": "^5.0.1",
+    "style-loader": "^3.3.1",
+    "tailwindcss": "^3.1.8",
+    "ts-jest": "^29.0.3",
+    "ts-loader": "^9.4.1",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
+    "typescript": "^4.8.4",
+    "web-vitals": "^3.0.3",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17 || ^18",
+    "react-dom": "^16.8.0 || ^17 || ^18"
+  },
+  "scripts": {
+    "start": "cross-env REACT_APP_FAST_REFRESH=false && start-storybook -p 6006 -s public",
+    "build:cjs": "rm -rf dist/src && rm -f dist/tsconfig.tsbuildinfo && tsc -b",
+    "build:css": "postcss ./src/styles/main.css -o ./dist/main.css",
+    "build:storybook": "build-storybook -s public",
+    "build": "yarn run build:cjs && yarn run build:css && yarn run build:storybook",
+    "bundle": "webpack",
+    "all": "yarn bundle && yarn build",
+    "lint": "prettier --check .",
+    "format": "prettier --write .",
+    "prepack": "yarn run build:cjs && yarn run bundle",
+    "test": "jest",
+    "test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
+    "test:profile": "node --cpu-prof node_modules/.bin/jest --runInBand"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "**/*.stories.*"
+        ],
+        "rules": {
+          "import/no-anonymous-default-export": "off"
+        }
+      }
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "resolutions": {
+    "@types/react": "17.0.43"
+  },
+  "source": "./src/index.ts",
+  "main": "./dist/src/index.js",
+  "types": "./dist/src/index.d.ts"
+}

packages/components/postcss.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  plugins: {
+    "postcss-import": {},
+    "tailwindcss/nesting": {},
+    tailwindcss: {},
+    autoprefixer: {},
+    cssnano: {},
+  },
+};

packages/components/public/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Squiggle components" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <title>Squiggle Components</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

packages/components/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

packages/components/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

packages/components/src/components/Alert.tsx

@@ -0,0 +1,86 @@
+import * as React from "react";
+import {
+  XCircleIcon,
+  InformationCircleIcon,
+  CheckCircleIcon,
+} from "@heroicons/react/solid";
+import clsx from "clsx";
+
+export const Alert: React.FC<{
+  heading: string;
+  backgroundColor: string;
+  headingColor: string;
+  bodyColor: string;
+  icon: (props: React.ComponentProps<"svg">) => JSX.Element;
+  iconColor: string;
+  children?: React.ReactNode;
+}> = ({
+  heading = "Error",
+  backgroundColor,
+  headingColor,
+  bodyColor,
+  icon: Icon,
+  iconColor,
+  children,
+}) => {
+  return (
+    <div className={clsx("rounded-md p-4", backgroundColor)} role="status">
+      <div className="flex">
+        <Icon
+          className={clsx("h-5 w-5 flex-shrink-0", iconColor)}
+          aria-hidden="true"
+        />
+        <div className="ml-3 grow">
+          <header className={clsx("text-sm font-medium", headingColor)}>
+            {heading}
+          </header>
+          {children && React.Children.count(children) ? (
+            <div className={clsx("mt-2 text-sm", bodyColor)}>{children}</div>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const ErrorAlert: React.FC<{
+  heading: string;
+  children?: React.ReactNode;
+}> = (props) => (
+  <Alert
+    {...props}
+    backgroundColor="bg-red-100"
+    headingColor="text-red-800"
+    bodyColor="text-red-700"
+    icon={XCircleIcon}
+    iconColor="text-red-400"
+  />
+);
+
+export const MessageAlert: React.FC<{
+  heading: string;
+  children?: React.ReactNode;
+}> = (props) => (
+  <Alert
+    {...props}
+    backgroundColor="bg-slate-100"
+    headingColor="text-slate-700"
+    bodyColor="text-slate-700"
+    icon={InformationCircleIcon}
+    iconColor="text-slate-400"
+  />
+);
+
+export const SuccessAlert: React.FC<{
+  heading: string;
+  children?: React.ReactNode;
+}> = (props) => (
+  <Alert
+    {...props}
+    backgroundColor="bg-green-50"
+    headingColor="text-green-800"
+    bodyColor="text-green-700"
+    icon={CheckCircleIcon}
+    iconColor="text-green-400"
+  />
+);

packages/components/src/components/CodeEditor.tsx

@@ -0,0 +1,76 @@
+import _ from "lodash";
+import React, { FC, useMemo, useRef } from "react";
+import AceEditor from "react-ace";
+
+import "ace-builds/src-noconflict/mode-golang";
+import "ace-builds/src-noconflict/theme-github";
+
+import { SqLocation } from "@quri/squiggle-lang";
+
+interface CodeEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit?: () => void;
+  oneLine?: boolean;
+  width?: number;
+  height: number;
+  showGutter?: boolean;
+  errorLocations?: SqLocation[];
+}
+
+export const CodeEditor: FC<CodeEditorProps> = ({
+  value,
+  onChange,
+  onSubmit,
+  height,
+  oneLine = false,
+  showGutter = false,
+  errorLocations = [],
+}) => {
+  const lineCount = value.split("\n").length;
+  const id = useMemo(() => _.uniqueId(), []);
+
+  // this is necessary because AceEditor binds commands on mount, see https://github.com/securingsincity/react-ace/issues/684
+  const onSubmitRef = useRef<typeof onSubmit | null>(null);
+  onSubmitRef.current = onSubmit;
+
+  const editorEl = useRef<AceEditor | null>(null);
+
+  return (
+    <AceEditor
+      ref={editorEl}
+      value={value}
+      mode="golang"
+      theme="github"
+      width="100%"
+      fontSize={14}
+      height={String(height) + "px"}
+      minLines={oneLine ? lineCount : undefined}
+      maxLines={oneLine ? lineCount : undefined}
+      showGutter={showGutter}
+      highlightActiveLine={false}
+      showPrintMargin={false}
+      onChange={onChange}
+      name={id}
+      editorProps={{
+        $blockScrolling: true,
+      }}
+      setOptions={{}}
+      commands={[
+        {
+          name: "submit",
+          bindKey: { mac: "Cmd-Enter", win: "Ctrl-Enter" },
+          exec: () => onSubmitRef.current?.(),
+        },
+      ]}
+      markers={errorLocations?.map((location) => ({
+        startRow: location.start.line - 1,
+        startCol: location.start.column - 1,
+        endRow: location.end.line - 1,
+        endCol: location.end.column - 1,
+        className: "ace-error-marker",
+        type: "text",
+      }))}
+    />
+  );
+};

packages/components/src/components/DistributionChart.tsx

@@ -0,0 +1,222 @@
+import * as React from "react";
+import {
+  SqDistribution,
+  result,
+  SqDistributionError,
+  resultMap,
+  SqRecord,
+  environment,
+  SqDistributionTag,
+} from "@quri/squiggle-lang";
+import { Vega } from "react-vega";
+import { ErrorAlert } from "./Alert";
+import { useSize } from "react-use";
+
+import {
+  buildVegaSpec,
+  DistributionChartSpecOptions,
+} from "../lib/distributionSpecBuilder";
+import { NumberShower } from "./NumberShower";
+import { Plot, parsePlot } from "../lib/plotParser";
+import { flattenResult } from "../lib/utility";
+import { hasMassBelowZero } from "../lib/distributionUtils";
+
+export type DistributionPlottingSettings = {
+  /** Whether to show a summary of means, stdev, percentiles etc */
+  showSummary: boolean;
+  actions?: boolean;
+} & DistributionChartSpecOptions;
+
+export type DistributionChartProps = {
+  plot: Plot;
+  environment: environment;
+  width?: number;
+  height: number;
+  xAxisType?: "number" | "dateTime";
+} & DistributionPlottingSettings;
+
+export function defaultPlot(distribution: SqDistribution): Plot {
+  return { distributions: [{ name: "default", distribution }] };
+}
+
+export function makePlot(record: SqRecord): Plot | void {
+  const plotResult = parsePlot(record);
+  if (plotResult.tag === "Ok") {
+    return plotResult.value;
+  }
+}
+
+export const DistributionChart: React.FC<DistributionChartProps> = (props) => {
+  const {
+    plot,
+    environment,
+    height,
+    showSummary,
+    width,
+    logX,
+    actions = false,
+  } = props;
+  const [sized] = useSize((size) => {
+    const shapes = flattenResult(
+      plot.distributions.map((x) =>
+        resultMap(x.distribution.pointSet(environment), (pointSet) => ({
+          name: x.name,
+          // color: x.color, // not supported yet
+          ...pointSet.asShape(),
+        }))
+      )
+    );
+
+    if (shapes.tag === "Error") {
+      return (
+        <ErrorAlert heading="Distribution Error">
+          {shapes.value.toString()}
+        </ErrorAlert>
+      );
+    }
+
+    // if this is a sample set, include the samples
+    const samples: number[] = [];
+    for (const { distribution } of plot?.distributions) {
+      if (distribution.tag === SqDistributionTag.SampleSet) {
+        samples.push(...distribution.value());
+      }
+    }
+
+    const domain = shapes.value.flatMap((shape) =>
+      shape.discrete.concat(shape.continuous)
+    );
+
+    const spec = buildVegaSpec({
+      ...props,
+      minX: props.minX ?? Math.min(...domain.map((x) => x.x)),
+      maxX: props.minX ?? Math.max(...domain.map((x) => x.x)),
+      maxY: Math.max(...domain.map((x) => x.y)),
+    });
+
+    // I think size.width is sometimes not finite due to the component not being in a visible context
+    // This occurs during testing
+    let widthProp = width
+      ? width
+      : Number.isFinite(size.width)
+      ? size.width
+      : 400;
+    if (widthProp < 20) {
+      console.warn(
+        `Width of Distribution is set to ${widthProp}, which is too small`
+      );
+      widthProp = 20;
+    }
+
+    const vegaData = { data: shapes.value, samples };
+
+    return (
+      <div style={{ width: widthProp }}>
+        {logX && shapes.value.some(hasMassBelowZero) ? (
+          <ErrorAlert heading="Log Domain Error">
+            Cannot graph distribution with negative values on logarithmic scale.
+          </ErrorAlert>
+        ) : (
+          <Vega
+            spec={spec}
+            data={vegaData}
+            width={widthProp - 10}
+            height={height}
+            actions={actions}
+          />
+        )}
+        <div className="flex justify-center">
+          {showSummary && plot.distributions.length === 1 && (
+            <SummaryTable
+              distribution={plot.distributions[0].distribution}
+              environment={environment}
+            />
+          )}
+        </div>
+      </div>
+    );
+  });
+  return sized;
+};
+
+const TableHeadCell: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => (
+  <th className="border border-slate-200 bg-slate-50 py-1 px-2 text-slate-500 font-semibold">
+    {children}
+  </th>
+);
+
+const Cell: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <td className="border border-slate-200 py-1 px-2 text-slate-900">
+    {children}
+  </td>
+);
+
+type SummaryTableProps = {
+  distribution: SqDistribution;
+  environment: environment;
+};
+
+const SummaryTable: React.FC<SummaryTableProps> = ({
+  distribution,
+  environment,
+}) => {
+  const mean = distribution.mean(environment);
+  const stdev = distribution.stdev(environment);
+  const p5 = distribution.inv(environment, 0.05);
+  const p10 = distribution.inv(environment, 0.1);
+  const p25 = distribution.inv(environment, 0.25);
+  const p50 = distribution.inv(environment, 0.5);
+  const p75 = distribution.inv(environment, 0.75);
+  const p90 = distribution.inv(environment, 0.9);
+  const p95 = distribution.inv(environment, 0.95);
+
+  const hasResult = (x: result<number, SqDistributionError>): boolean =>
+    x.tag === "Ok";
+
+  const unwrapResult = (
+    x: result<number, SqDistributionError>
+  ): React.ReactNode => {
+    if (x.tag === "Ok") {
+      return <NumberShower number={x.value} />;
+    } else {
+      return (
+        <ErrorAlert heading="Distribution Error">
+          {x.value.toString()}
+        </ErrorAlert>
+      );
+    }
+  };
+
+  return (
+    <table className="border border-collapse border-slate-400">
+      <thead className="bg-slate-50">
+        <tr>
+          <TableHeadCell>{"Mean"}</TableHeadCell>
+          {hasResult(stdev) && <TableHeadCell>{"Stdev"}</TableHeadCell>}
+          <TableHeadCell>{"5%"}</TableHeadCell>
+          <TableHeadCell>{"10%"}</TableHeadCell>
+          <TableHeadCell>{"25%"}</TableHeadCell>
+          <TableHeadCell>{"50%"}</TableHeadCell>
+          <TableHeadCell>{"75%"}</TableHeadCell>
+          <TableHeadCell>{"90%"}</TableHeadCell>
+          <TableHeadCell>{"95%"}</TableHeadCell>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <Cell>{unwrapResult(mean)}</Cell>
+          {hasResult(stdev) && <Cell>{unwrapResult(stdev)}</Cell>}
+          <Cell>{unwrapResult(p5)}</Cell>
+          <Cell>{unwrapResult(p10)}</Cell>
+          <Cell>{unwrapResult(p25)}</Cell>
+          <Cell>{unwrapResult(p50)}</Cell>
+          <Cell>{unwrapResult(p75)}</Cell>
+          <Cell>{unwrapResult(p90)}</Cell>
+          <Cell>{unwrapResult(p95)}</Cell>
+        </tr>
+      </tbody>
+    </table>
+  );
+};

packages/components/src/components/DistributionVegaScales.ts

@@ -0,0 +1,80 @@
+import type { LogScale, LinearScale, PowScale } from "vega";
+export let linearXScale: LinearScale = {
+  name: "xscale",
+  type: "linear",
+  range: "width",
+  zero: false,
+  nice: false,
+  domain: {
+    fields: [
+      {
+        data: "con",
+        field: "x",
+      },
+      {
+        data: "dis",
+        field: "x",
+      },
+    ],
+  },
+};
+export let linearYScale: LinearScale = {
+  name: "yscale",
+  type: "linear",
+  range: "height",
+  zero: true,
+  domain: {
+    fields: [
+      {
+        data: "con",
+        field: "y",
+      },
+      {
+        data: "dis",
+        field: "y",
+      },
+    ],
+  },
+};
+
+export let logXScale: LogScale = {
+  name: "xscale",
+  type: "log",
+  range: "width",
+  zero: false,
+  base: 10,
+  nice: false,
+  domain: {
+    fields: [
+      {
+        data: "con",
+        field: "x",
+      },
+      {
+        data: "dis",
+        field: "x",
+      },
+    ],
+  },
+};
+
+export let expYScale: PowScale = {
+  name: "yscale",
+  type: "pow",
+  exponent: 0.1,
+  range: "height",
+  zero: true,
+  nice: false,
+  domain: {
+    fields: [
+      {
+        data: "con",
+        field: "y",
+      },
+      {
+        data: "dis",
+        field: "y",
+      },
+    ],
+  },
+};

packages/components/src/components/FunctionChart.tsx

@@ -0,0 +1,107 @@
+import * as React from "react";
+import {
+  SqLambda,
+  environment,
+  SqValueTag,
+  SqError,
+} from "@quri/squiggle-lang";
+import { FunctionChart1Dist } from "./FunctionChart1Dist";
+import { FunctionChart1Number } from "./FunctionChart1Number";
+import { DistributionPlottingSettings } from "./DistributionChart";
+import { MessageAlert } from "./Alert";
+import { SquiggleErrorAlert } from "./SquiggleErrorAlert";
+
+export type FunctionChartSettings = {
+  start: number;
+  stop: number;
+  count: number;
+};
+
+interface FunctionChartProps {
+  fn: SqLambda;
+  chartSettings: FunctionChartSettings;
+  distributionPlotSettings: DistributionPlottingSettings;
+  environment: environment;
+  height: number;
+}
+
+const FunctionCallErrorAlert = ({ error }: { error: SqError }) => {
+  const [expanded, setExpanded] = React.useState(false);
+  if (expanded) {
+  }
+  return (
+    <MessageAlert heading="Function Display Failed">
+      <div className="space-y-2">
+        <span
+          className="underline decoration-dashed cursor-pointer"
+          onClick={() => setExpanded(!expanded)}
+        >
+          {expanded ? "Hide" : "Show"} error details
+        </span>
+        {expanded ? <SquiggleErrorAlert error={error} /> : null}
+      </div>
+    </MessageAlert>
+  );
+};
+
+export const FunctionChart: React.FC<FunctionChartProps> = ({
+  fn,
+  chartSettings,
+  environment,
+  distributionPlotSettings,
+  height,
+}) => {
+  console.log(fn.parameters().length);
+  if (fn.parameters().length !== 1) {
+    return (
+      <MessageAlert heading="Function Display Not Supported">
+        Only functions with one parameter are displayed.
+      </MessageAlert>
+    );
+  }
+  const result1 = fn.call([chartSettings.start]);
+  const result2 = fn.call([chartSettings.stop]);
+  const getValidResult = () => {
+    if (result1.tag === "Ok") {
+      return result1;
+    } else if (result2.tag === "Ok") {
+      return result2;
+    } else {
+      return result1;
+    }
+  };
+  const validResult = getValidResult();
+
+  if (validResult.tag === "Error") {
+    return <FunctionCallErrorAlert error={validResult.value} />;
+  }
+
+  switch (validResult.value.tag) {
+    case SqValueTag.Distribution:
+      return (
+        <FunctionChart1Dist
+          fn={fn}
+          chartSettings={chartSettings}
+          environment={environment}
+          height={height}
+          distributionPlotSettings={distributionPlotSettings}
+        />
+      );
+    case SqValueTag.Number:
+      return (
+        <FunctionChart1Number
+          fn={fn}
+          chartSettings={chartSettings}
+          environment={environment}
+          height={height}
+        />
+      );
+    default:
+      return (
+        <MessageAlert heading="Function Display Not Supported">
+          There is no function visualization for this type of output:{" "}
+          <span className="font-bold">{validResult.value.tag}</span>
+        </MessageAlert>
+      );
+  }
+};

packages/components/src/components/FunctionChart1Dist.tsx

@@ -0,0 +1,225 @@
+import * as React from "react";
+import _ from "lodash";
+import type { Spec } from "vega";
+import {
+  SqDistribution,
+  result,
+  SqLambda,
+  environment,
+  SqError,
+  SqValue,
+  SqValueTag,
+} from "@quri/squiggle-lang";
+import { createClassFromSpec } from "react-vega";
+import * as percentilesSpec from "../vega-specs/spec-percentiles.json";
+import {
+  DistributionChart,
+  DistributionPlottingSettings,
+  defaultPlot,
+} from "./DistributionChart";
+import { NumberShower } from "./NumberShower";
+import { ErrorAlert } from "./Alert";
+
+let SquigglePercentilesChart = createClassFromSpec({
+  spec: percentilesSpec as Spec,
+});
+
+const _rangeByCount = (start: number, stop: number, count: number) => {
+  const step = (stop - start) / (count - 1);
+  const items = _.range(start, stop, step);
+  const result = items.concat([stop]);
+  return result;
+};
+
+function unwrap<a, b>(x: result<a, b>): a {
+  if (x.tag === "Ok") {
+    return x.value;
+  } else {
+    throw Error("FAILURE TO UNWRAP");
+  }
+}
+export type FunctionChartSettings = {
+  start: number;
+  stop: number;
+  count: number;
+};
+
+interface FunctionChart1DistProps {
+  fn: SqLambda;
+  chartSettings: FunctionChartSettings;
+  distributionPlotSettings: DistributionPlottingSettings;
+  environment: environment;
+  height: number;
+}
+
+type percentiles = {
+  x: number;
+  p1: number;
+  p5: number;
+  p10: number;
+  p20: number;
+  p30: number;
+  p40: number;
+  p50: number;
+  p60: number;
+  p70: number;
+  p80: number;
+  p90: number;
+  p95: number;
+  p99: number;
+}[];
+
+type errors = _.Dictionary<
+  {
+    x: number;
+    value: string;
+  }[]
+>;
+
+type point = { x: number; value: result<SqDistribution, string> };
+
+let getPercentiles = ({
+  chartSettings,
+  fn,
+  environment,
+}: {
+  chartSettings: FunctionChartSettings;
+  fn: SqLambda;
+  environment: environment;
+}) => {
+  let chartPointsToRender = _rangeByCount(
+    chartSettings.start,
+    chartSettings.stop,
+    chartSettings.count
+  );
+
+  let chartPointsData: point[] = chartPointsToRender.map((x) => {
+    let result = fn.call([x]);
+    if (result.tag === "Ok") {
+      if (result.value.tag === SqValueTag.Distribution) {
+        return { x, value: { tag: "Ok", value: result.value.value } };
+      } else {
+        return {
+          x,
+          value: {
+            tag: "Error",
+            value:
+              "Cannot currently render functions that don't return distributions",
+          },
+        };
+      }
+    } else {
+      return {
+        x,
+        value: { tag: "Error", value: result.value.toString() },
+      };
+    }
+  });
+
+  let initialPartition: [
+    { x: number; value: SqDistribution }[],
+    { x: number; value: string }[]
+  ] = [[], []];
+
+  let [functionImage, errors] = chartPointsData.reduce((acc, current) => {
+    if (current.value.tag === "Ok") {
+      acc[0].push({ x: current.x, value: current.value.value });
+    } else {
+      acc[1].push({ x: current.x, value: current.value.value });
+    }
+    return acc;
+  }, initialPartition);
+
+  let groupedErrors: errors = _.groupBy(errors, (x) => x.value);
+
+  let percentiles: percentiles = functionImage.map(({ x, value }) => {
+    const res = {
+      x: x,
+      p1: unwrap(value.inv(environment, 0.01)),
+      p5: unwrap(value.inv(environment, 0.05)),
+      p10: unwrap(value.inv(environment, 0.1)),
+      p20: unwrap(value.inv(environment, 0.2)),
+      p30: unwrap(value.inv(environment, 0.3)),
+      p40: unwrap(value.inv(environment, 0.4)),
+      p50: unwrap(value.inv(environment, 0.5)),
+      p60: unwrap(value.inv(environment, 0.6)),
+      p70: unwrap(value.inv(environment, 0.7)),
+      p80: unwrap(value.inv(environment, 0.8)),
+      p90: unwrap(value.inv(environment, 0.9)),
+      p95: unwrap(value.inv(environment, 0.95)),
+      p99: unwrap(value.inv(environment, 0.99)),
+    };
+    return res;
+  });
+
+  return { percentiles, errors: groupedErrors };
+};
+
+export const FunctionChart1Dist: React.FC<FunctionChart1DistProps> = ({
+  fn,
+  chartSettings,
+  environment,
+  distributionPlotSettings,
+  height,
+}) => {
+  let [mouseOverlay, setMouseOverlay] = React.useState(0);
+  function handleHover(_name: string, value: unknown) {
+    setMouseOverlay(value as number);
+  }
+  function handleOut() {
+    setMouseOverlay(NaN);
+  }
+  const signalListeners = { mousemove: handleHover, mouseout: handleOut };
+
+  //TODO: This custom error handling is a bit hacky and should be improved.
+  let mouseItem: result<SqValue, SqError> = !!mouseOverlay
+    ? fn.call([mouseOverlay])
+    : {
+        tag: "Error",
+        value: SqError.createOtherError(
+          "Hover x-coordinate returned NaN. Expected a number."
+        ),
+      };
+  let showChart =
+    mouseItem.tag === "Ok" &&
+    mouseItem.value.tag === SqValueTag.Distribution ? (
+      <DistributionChart
+        plot={defaultPlot(mouseItem.value.value)}
+        environment={environment}
+        width={400}
+        height={50}
+        {...distributionPlotSettings}
+      />
+    ) : null;
+
+  let getPercentilesMemoized = React.useMemo(
+    () => getPercentiles({ chartSettings, fn, environment }),
+    [environment, fn]
+  );
+
+  return (
+    <>
+      <SquigglePercentilesChart
+        data={{ facet: getPercentilesMemoized.percentiles }}
+        height={height}
+        actions={false}
+        signalListeners={signalListeners}
+      />
+      {showChart}
+      {_.entries(getPercentilesMemoized.errors).map(
+        ([errorName, errorPoints]) => (
+          <ErrorAlert key={errorName} heading={errorName}>
+            Values:{" "}
+            {errorPoints
+              .map((r, i) => <NumberShower key={i} number={r.x} />)
+              .reduce((a, b) => (
+                <>
+                  {a}, {b}
+                </>
+              ))}
+          </ErrorAlert>
+        )
+      )}
+    </>
+  );
+};

packages/components/src/components/FunctionChart1Number.tsx

@@ -0,0 +1,119 @@
+import * as React from "react";
+import _ from "lodash";
+import type { Spec } from "vega";
+import { result, SqLambda, environment, SqValueTag } from "@quri/squiggle-lang";
+import { createClassFromSpec } from "react-vega";
+import * as lineChartSpec from "../vega-specs/spec-line-chart.json";
+import { ErrorAlert } from "./Alert";
+import { squiggleValueTag } from "@quri/squiggle-lang/src/rescript/ForTS/ForTS_SquiggleValue/ForTS_SquiggleValue_tag";
+
+let SquiggleLineChart = createClassFromSpec({
+  spec: lineChartSpec as Spec,
+});
+
+const _rangeByCount = (start: number, stop: number, count: number) => {
+  const step = (stop - start) / (count - 1);
+  const items = _.range(start, stop, step);
+  const result = items.concat([stop]);
+  return result;
+};
+
+export type FunctionChartSettings = {
+  start: number;
+  stop: number;
+  count: number;
+};
+
+interface FunctionChart1NumberProps {
+  fn: SqLambda;
+  chartSettings: FunctionChartSettings;
+  environment: environment;
+  height: number;
+}
+
+type point = { x: number; value: result<number, string> };
+
+let getFunctionImage = ({
+  chartSettings,
+  fn,
+  environment,
+}: {
+  chartSettings: FunctionChartSettings;
+  fn: SqLambda;
+  environment: environment;
+}) => {
+  let chartPointsToRender = _rangeByCount(
+    chartSettings.start,
+    chartSettings.stop,
+    chartSettings.count
+  );
+
+  let chartPointsData: point[] = chartPointsToRender.map((x) => {
+    let result = fn.call([x]);
+    if (result.tag === "Ok") {
+      if (result.value.tag === SqValueTag.Number) {
+        return { x, value: { tag: "Ok", value: result.value.value } };
+      } else {
+        return {
+          x,
+          value: {
+            tag: "Error",
+            value: "This component expected number outputs",
+          },
+        };
+      }
+    } else {
+      return {
+        x,
+        value: { tag: "Error", value: result.value.toString() },
+      };
+    }
+  });
+
+  let initialPartition: [
+    { x: number; value: number }[],
+    { x: number; value: string }[]
+  ] = [[], []];
+
+  let [functionImage, errors] = chartPointsData.reduce((acc, current) => {
+    if (current.value.tag === "Ok") {
+      acc[0].push({ x: current.x, value: current.value.value });
+    } else {
+      acc[1].push({ x: current.x, value: current.value.value });
+    }
+    return acc;
+  }, initialPartition);
+
+  return { errors, functionImage };
+};
+
+export const FunctionChart1Number: React.FC<FunctionChart1NumberProps> = ({
+  fn,
+  chartSettings,
+  environment,
+  height,
+}: FunctionChart1NumberProps) => {
+  let getFunctionImageMemoized = React.useMemo(
+    () => getFunctionImage({ chartSettings, fn, environment }),
+    [environment, fn]
+  );
+
+  let data = getFunctionImageMemoized.functionImage.map(({ x, value }) => ({
+    x,
+    y: value,
+  }));
+  return (
+    <>
+      <SquiggleLineChart
+        data={{ facet: data }}
+        height={height}
+        actions={false}
+      />
+      {getFunctionImageMemoized.errors.map(({ x, value }) => (
+        <ErrorAlert key={x} heading={value}>
+          Error at point ${x}
+        </ErrorAlert>
+      ))}
+    </>
+  );
+};

packages/components/src/components/JsonEditor.tsx

@@ -0,0 +1,49 @@
+import _ from "lodash";
+import React, { FC } from "react";
+import AceEditor from "react-ace";
+
+import "ace-builds/src-noconflict/mode-json";
+import "ace-builds/src-noconflict/theme-github";
+
+interface CodeEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  oneLine?: boolean;
+  width?: number;
+  height: number;
+  showGutter?: boolean;
+}
+
+export const JsonEditor: FC<CodeEditorProps> = ({
+  value,
+  onChange,
+  oneLine = false,
+  showGutter = false,
+  height,
+}) => {
+  const lineCount = value.split("\n").length;
+  const id = _.uniqueId();
+  return (
+    <AceEditor
+      value={value}
+      mode="json"
+      theme="github"
+      width={"100%"}
+      height={String(height) + "px"}
+      minLines={oneLine ? lineCount : undefined}
+      maxLines={oneLine ? lineCount : undefined}
+      showGutter={showGutter}
+      highlightActiveLine={false}
+      showPrintMargin={false}
+      onChange={onChange}
+      name={id}
+      editorProps={{
+        $blockScrolling: true,
+      }}
+      setOptions={{
+        enableBasicAutocompletion: false,
+        enableLiveAutocompletion: false,
+      }}
+    />
+  );
+};

packages/components/src/components/NumberShower.tsx

@@ -0,0 +1,95 @@
+import * as React from "react";
+
+const orderOfMagnitudeNum = (n: number) => {
+  return Math.pow(10, n);
+};
+
+// 105 -> 3
+const orderOfMagnitude = (n: number) => {
+  return Math.floor(Math.log(n) / Math.LN10 + 0.000000001);
+};
+
+function withXSigFigs(number: number, sigFigs: number) {
+  const withPrecision = number.toPrecision(sigFigs);
+  const formatted = Number(withPrecision);
+  return `${formatted}`;
+}
+
+class NumberShowerBuilder {
+  number: number;
+  precision: number;
+
+  constructor(number: number, precision = 2) {
+    this.number = number;
+    this.precision = precision;
+  }
+
+  convert() {
+    const number = Math.abs(this.number);
+    const response = this.evaluate(number);
+    if (this.number < 0) {
+      response.value = "-" + response.value;
+    }
+    return response;
+  }
+
+  metricSystem(number: number, order: number) {
+    const newNumber = number / orderOfMagnitudeNum(order);
+    const precision = this.precision;
+    return `${withXSigFigs(newNumber, precision)}`;
+  }
+
+  evaluate(number: number) {
+    if (number === 0) {
+      return { value: this.metricSystem(0, 0) };
+    }
+
+    const order = orderOfMagnitude(number);
+    if (order < -2) {
+      return { value: this.metricSystem(number, order), power: order };
+    } else if (order < 4) {
+      return { value: this.metricSystem(number, 0) };
+    } else if (order < 6) {
+      return { value: this.metricSystem(number, 3), symbol: "K" };
+    } else if (order < 9) {
+      return { value: this.metricSystem(number, 6), symbol: "M" };
+    } else if (order < 12) {
+      return { value: this.metricSystem(number, 9), symbol: "B" };
+    } else if (order < 15) {
+      return { value: this.metricSystem(number, 12), symbol: "T" };
+    } else {
+      return { value: this.metricSystem(number, order), power: order };
+    }
+  }
+}
+
+export function numberShow(number: number, precision = 2) {
+  const ns = new NumberShowerBuilder(number, precision);
+  return ns.convert();
+}
+
+export interface NumberShowerProps {
+  number: number;
+  precision?: number;
+}
+
+export const NumberShower: React.FC<NumberShowerProps> = ({
+  number,
+  precision = 2,
+}) => {
+  const numberWithPresentation = numberShow(number, precision);
+  return (
+    <span>
+      {numberWithPresentation.value}
+      {numberWithPresentation.symbol}
+      {numberWithPresentation.power ? (
+        <span>
+          {"\u00b7" /* dot symbol */}10
+          <span style={{ fontSize: "0.6em", verticalAlign: "super" }}>
+            {numberWithPresentation.power}
+          </span>
+        </span>
+      ) : null}
+    </span>
+  );
+};

packages/components/src/components/SquiggleChart.tsx

@@ -0,0 +1,158 @@
+import * as React from "react";
+import {
+  SqValue,
+  environment,
+  SqProject,
+  defaultEnvironment,
+} from "@quri/squiggle-lang";
+import { useSquiggle } from "../lib/hooks";
+import { SquiggleViewer } from "./SquiggleViewer";
+import { JsImports } from "../lib/jsImports";
+import { getValueToRender } from "../lib/utility";
+
+export type SquiggleChartProps = {
+  /** The input string for squiggle */
+  code: string;
+  /** Allows to re-run the code if code hasn't changed */
+  executionId?: number;
+  /** If the output requires monte carlo sampling, the amount of samples */
+  sampleCount?: number;
+  /** If the result is a function, where the function domain starts */
+  diagramStart?: number;
+  /** If the result is a function, where the function domain ends */
+  diagramStop?: number;
+  /** If the result is a function, the amount of stops sampled */
+  diagramCount?: number;
+  /** When the squiggle code gets reevaluated */
+  onChange?(expr: SqValue | undefined, sourceName: string): void;
+  /** CSS width of the element */
+  width?: number;
+  height?: number;
+  /** JS imported parameters */
+  jsImports?: JsImports;
+  /** Whether to show a summary of the distribution */
+  showSummary?: boolean;
+  /** Set the x scale to be logarithmic by deault */
+  logX?: boolean;
+  /** Set the y scale to be exponential by deault */
+  expY?: boolean;
+  /** How to format numbers on the x axis */
+  tickFormat?: string;
+  /** Title of the graphed distribution */
+  title?: string;
+  /** Color of the graphed distribution */
+  color?: string;
+  /** Specify the lower bound of the x scale */
+  minX?: number;
+  /** Specify the upper bound of the x scale */
+  maxX?: number;
+  /** Whether the x-axis should be dates or numbers */
+  xAxisType?: "number" | "dateTime";
+  /** Whether to show vega actions to the user, so they can copy the chart spec */
+  distributionChartActions?: boolean;
+  enableLocalSettings?: boolean;
+} & (StandaloneExecutionProps | ProjectExecutionProps);
+
+// Props needed for a standalone execution
+type StandaloneExecutionProps = {
+  project?: undefined;
+  continues?: undefined;
+  /** The amount of points returned to draw the distribution, not needed if using a project */
+  environment?: environment;
+};
+
+// Props needed when executing inside a project.
+type ProjectExecutionProps = {
+  environment?: undefined;
+  /** The project that this execution is part of */
+  project: SqProject;
+  /** What other squiggle sources from the project to continue. Default [] */
+  continues?: string[];
+};
+const defaultOnChange = () => {};
+const defaultImports: JsImports = {};
+
+export const splitSquiggleChartSettings = (props: SquiggleChartProps) => {
+  const {
+    showSummary = false,
+    logX = false,
+    expY = false,
+    diagramStart = 0,
+    diagramStop = 10,
+    diagramCount = 20,
+    tickFormat,
+    minX,
+    maxX,
+    color,
+    title,
+    xAxisType = "number",
+    distributionChartActions,
+  } = props;
+
+  const distributionPlotSettings = {
+    showSummary,
+    logX,
+    expY,
+    format: tickFormat,
+    minX,
+    maxX,
+    color,
+    title,
+    xAxisType,
+    actions: distributionChartActions,
+  };
+
+  const chartSettings = {
+    start: diagramStart,
+    stop: diagramStop,
+    count: diagramCount,
+  };
+
+  return { distributionPlotSettings, chartSettings };
+};
+
+export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
+  (props) => {
+    const { distributionPlotSettings, chartSettings } =
+      splitSquiggleChartSettings(props);
+
+    const {
+      code,
+      jsImports = defaultImports,
+      onChange = defaultOnChange, // defaultOnChange must be constant, don't move its definition here
+      executionId = 0,
+      width,
+      height = 200,
+      enableLocalSettings = false,
+      continues,
+      project,
+      environment,
+    } = props;
+
+    const resultAndBindings = useSquiggle({
+      environment,
+      continues,
+      project,
+      code,
+      jsImports,
+      onChange,
+      executionId,
+    });
+
+    const valueToRender = getValueToRender(resultAndBindings);
+
+    return (
+      <SquiggleViewer
+        result={valueToRender}
+        width={width}
+        height={height}
+        distributionPlotSettings={distributionPlotSettings}
+        chartSettings={chartSettings}
+        environment={
+          project ? project.getEnvironment() : environment ?? defaultEnvironment
+        }
+        enableLocalSettings={enableLocalSettings}
+      />
+    );
+  }
+);

packages/components/src/components/SquiggleContainer.tsx

@@ -0,0 +1,26 @@
+import React, { useContext } from "react";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+type SquiggleContextShape = {
+  containerized: boolean;
+};
+const SquiggleContext = React.createContext<SquiggleContextShape>({
+  containerized: false,
+});
+
+export const SquiggleContainer: React.FC<Props> = ({ children }) => {
+  const context = useContext(SquiggleContext);
+
+  if (context.containerized) {
+    return <>{children}</>;
+  } else {
+    return (
+      <SquiggleContext.Provider value={{ containerized: true }}>
+        <div className="squiggle">{children}</div>
+      </SquiggleContext.Provider>
+    );
+  }
+};

packages/components/src/components/SquiggleEditor.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import { CodeEditor } from "./CodeEditor";
+import { SquiggleContainer } from "./SquiggleContainer";
+import {
+  splitSquiggleChartSettings,
+  SquiggleChartProps,
+} from "./SquiggleChart";
+import { useMaybeControlledValue, useSquiggle } from "../lib/hooks";
+import { JsImports } from "../lib/jsImports";
+import { defaultEnvironment, SqLocation, SqProject } from "@quri/squiggle-lang";
+import { SquiggleViewer } from "./SquiggleViewer";
+import { getErrorLocations, getValueToRender } from "../lib/utility";
+
+const WrappedCodeEditor: React.FC<{
+  code: string;
+  setCode: (code: string) => void;
+  errorLocations?: SqLocation[];
+}> = ({ code, setCode, errorLocations }) => (
+  <div className="border border-grey-200 p-2 m-4" data-testid="squiggle-editor">
+    <CodeEditor
+      value={code}
+      onChange={setCode}
+      oneLine={true}
+      showGutter={false}
+      height={20}
+      errorLocations={errorLocations}
+    />
+  </div>
+);
+
+export type SquiggleEditorProps = SquiggleChartProps & {
+  defaultCode?: string;
+  onCodeChange?: (code: string) => void;
+};
+
+const defaultOnChange = () => {};
+const defaultImports: JsImports = {};
+
+export const SquiggleEditor: React.FC<SquiggleEditorProps> = (props) => {
+  const [code, setCode] = useMaybeControlledValue({
+    value: props.code,
+    defaultValue: props.defaultCode ?? "",
+    onChange: props.onCodeChange,
+  });
+
+  const { distributionPlotSettings, chartSettings } =
+    splitSquiggleChartSettings(props);
+
+  const {
+    environment,
+    jsImports = defaultImports,
+    onChange = defaultOnChange, // defaultOnChange must be constant, don't move its definition here
+    executionId = 0,
+    width,
+    height = 200,
+    enableLocalSettings = false,
+    continues,
+    project,
+  } = props;
+
+  const resultAndBindings = useSquiggle({
+    environment,
+    continues,
+    code,
+    project,
+    jsImports,
+    onChange,
+    executionId,
+  });
+
+  const valueToRender = getValueToRender(resultAndBindings);
+  const errorLocations = getErrorLocations(resultAndBindings.result);
+
+  return (
+    <SquiggleContainer>
+      <WrappedCodeEditor
+        code={code}
+        setCode={setCode}
+        errorLocations={errorLocations}
+      />
+      <SquiggleViewer
+        result={valueToRender}
+        width={width}
+        height={height}
+        distributionPlotSettings={distributionPlotSettings}
+        chartSettings={chartSettings}
+        environment={environment ?? defaultEnvironment}
+        enableLocalSettings={enableLocalSettings}
+      />
+    </SquiggleContainer>
+  );
+};

packages/components/src/components/SquiggleErrorAlert.tsx

@@ -0,0 +1,44 @@
+import { SqError, SqFrame } from "@quri/squiggle-lang";
+import React from "react";
+import { ErrorAlert } from "./Alert";
+
+type Props = {
+  error: SqError;
+};
+
+const StackTraceFrame: React.FC<{ frame: SqFrame }> = ({ frame }) => {
+  const location = frame.location();
+  return (
+    <div>
+      {frame.name()}
+      {location
+        ? ` at line ${location.start.line}, column ${location.start.column}`
+        : ""}
+    </div>
+  );
+};
+
+const StackTrace: React.FC<Props> = ({ error }) => {
+  const frames = error.getFrameArray();
+  return frames.length ? (
+    <div>
+      <div className="font-medium">Stack trace:</div>
+      <div className="ml-4">
+        {frames.map((frame, i) => (
+          <StackTraceFrame frame={frame} key={i} />
+        ))}
+      </div>
+    </div>
+  ) : null;
+};
+
+export const SquiggleErrorAlert: React.FC<Props> = ({ error }) => {
+  return (
+    <ErrorAlert heading="Error">
+      <div className="space-y-4">
+        <div>{error.toString()}</div>
+        <StackTrace error={error} />
+      </div>
+    </ErrorAlert>
+  );
+};

packages/components/src/components/SquigglePlayground.tsx

@@ -0,0 +1,450 @@
+import React, {
+  FC,
+  useState,
+  useEffect,
+  useMemo,
+  useRef,
+  useCallback,
+} from "react";
+import { useForm, UseFormRegister, useWatch } from "react-hook-form";
+import * as yup from "yup";
+import {
+  useMaybeControlledValue,
+  useRunnerState,
+  useSquiggle,
+} from "../lib/hooks";
+import { yupResolver } from "@hookform/resolvers/yup";
+import {
+  ChartSquareBarIcon,
+  CheckCircleIcon,
+  ClipboardCopyIcon,
+  CodeIcon,
+  CogIcon,
+  CurrencyDollarIcon,
+  EyeIcon,
+  PauseIcon,
+  PlayIcon,
+  RefreshIcon,
+} from "@heroicons/react/solid";
+import clsx from "clsx";
+
+import { environment, SqProject } from "@quri/squiggle-lang";
+
+import { SquiggleChartProps } from "./SquiggleChart";
+import { CodeEditor } from "./CodeEditor";
+import { JsonEditor } from "./JsonEditor";
+import { ErrorAlert, SuccessAlert } from "./Alert";
+import { SquiggleContainer } from "./SquiggleContainer";
+import { Toggle } from "./ui/Toggle";
+import { StyledTab } from "./ui/StyledTab";
+import { InputItem } from "./ui/InputItem";
+import { Text } from "./ui/Text";
+import { ViewSettings, viewSettingsSchema } from "./ViewSettings";
+import { HeadedSection } from "./ui/HeadedSection";
+import { defaultTickFormat } from "../lib/distributionSpecBuilder";
+import { Button } from "./ui/Button";
+import { JsImports } from "../lib/jsImports";
+import { getErrorLocations, getValueToRender } from "../lib/utility";
+import { SquiggleViewer } from "./SquiggleViewer";
+
+type PlaygroundProps = SquiggleChartProps & {
+  /** The initial squiggle string to put in the playground */
+  defaultCode?: string;
+  onCodeChange?(expr: string): void;
+  /* When settings change */
+  onSettingsChange?(settings: any): void;
+  /** Should we show the editor? */
+  showEditor?: boolean;
+  /** Useful for playground on squiggle website, where we update the anchor link based on current code and settings */
+  showShareButton?: boolean;
+};
+
+const schema = yup
+  .object({})
+  .shape({
+    sampleCount: yup
+      .number()
+      .required()
+      .positive()
+      .integer()
+      .default(1000)
+      .min(10)
+      .max(1000000),
+    xyPointLength: yup
+      .number()
+      .required()
+      .positive()
+      .integer()
+      .default(1000)
+      .min(10)
+      .max(10000),
+  })
+  .concat(viewSettingsSchema);
+
+type FormFields = yup.InferType<typeof schema>;
+
+const SamplingSettings: React.FC<{ register: UseFormRegister<FormFields> }> = ({
+  register,
+}) => (
+  <div className="space-y-6 p-3 max-w-xl">
+    <div>
+      <InputItem
+        name="sampleCount"
+        type="number"
+        label="Sample Count"
+        register={register}
+      />
+      <div className="mt-2">
+        <Text>
+          How many samples to use for Monte Carlo simulations. This can
+          occasionally be overridden by specific Squiggle programs.
+        </Text>
+      </div>
+    </div>
+    <div>
+      <InputItem
+        name="xyPointLength"
+        type="number"
+        register={register}
+        label="Coordinate Count (For PointSet Shapes)"
+      />
+      <div className="mt-2">
+        <Text>
+          When distributions are converted into PointSet shapes, we need to know
+          how many coordinates to use.
+        </Text>
+      </div>
+    </div>
+  </div>
+);
+
+const InputVariablesSettings: React.FC<{
+  initialImports: JsImports;
+  setImports: (imports: JsImports) => void;
+}> = ({ initialImports, setImports }) => {
+  const [importString, setImportString] = useState(() =>
+    JSON.stringify(initialImports)
+  );
+  const [importsAreValid, setImportsAreValid] = useState(true);
+
+  const onChange = (value: string) => {
+    setImportString(value);
+    let imports = {};
+    try {
+      imports = JSON.parse(value);
+      setImportsAreValid(true);
+    } catch (e) {
+      setImportsAreValid(false);
+    }
+    setImports(imports);
+  };
+
+  return (
+    <div className="p-3 max-w-3xl">
+      <HeadedSection title="Import Variables from JSON">
+        <div className="space-y-6">
+          <Text>
+            You can import variables from JSON into your Squiggle code.
+            Variables are accessed with dollar signs. For example, "timeNow"
+            would be accessed as "$timeNow".
+          </Text>
+          <div className="border border-slate-200 mt-6 mb-2">
+            <JsonEditor
+              value={importString}
+              onChange={onChange}
+              oneLine={false}
+              showGutter={true}
+              height={150}
+            />
+          </div>
+          <div className="p-1 pt-2">
+            {importsAreValid ? (
+              <SuccessAlert heading="Valid JSON" />
+            ) : (
+              <ErrorAlert heading="Invalid JSON">
+                You must use valid JSON in this editor.
+              </ErrorAlert>
+            )}
+          </div>
+        </div>
+      </HeadedSection>
+    </div>
+  );
+};
+
+const RunControls: React.FC<{
+  autorunMode: boolean;
+  isRunning: boolean;
+  isStale: boolean;
+  onAutorunModeChange: (value: boolean) => void;
+  run: () => void;
+}> = ({ autorunMode, isRunning, isStale, onAutorunModeChange, run }) => {
+  const CurrentPlayIcon = isRunning ? RefreshIcon : PlayIcon;
+
+  return (
+    <div className="flex space-x-1 items-center" data-testid="autorun-controls">
+      {autorunMode ? null : (
+        <button onClick={run}>
+          <CurrentPlayIcon
+            className={clsx(
+              "w-8 h-8",
+              isRunning && "animate-spin",
+              isStale ? "text-indigo-500" : "text-gray-400"
+            )}
+          />
+        </button>
+      )}
+      <Toggle
+        texts={["Autorun", "Paused"]}
+        icons={[CheckCircleIcon, PauseIcon]}
+        status={autorunMode}
+        onChange={onAutorunModeChange}
+        spinIcon={autorunMode && isRunning}
+      />
+    </div>
+  );
+};
+
+const ShareButton: React.FC = () => {
+  const [isCopied, setIsCopied] = useState(false);
+  const copy = () => {
+    navigator.clipboard.writeText((window.top || window).location.href);
+    setIsCopied(true);
+    setTimeout(() => setIsCopied(false), 1000);
+  };
+  return (
+    <div className="w-36">
+      <Button onClick={copy} wide>
+        {isCopied ? (
+          "Copied to clipboard!"
+        ) : (
+          <div className="flex items-center space-x-1">
+            <ClipboardCopyIcon className="w-4 h-4" />
+            <span>Copy share link</span>
+          </div>
+        )}
+      </Button>
+    </div>
+  );
+};
+
+type PlaygroundContextShape = {
+  getLeftPanelElement: () => HTMLDivElement | undefined;
+};
+export const PlaygroundContext = React.createContext<PlaygroundContextShape>({
+  getLeftPanelElement: () => undefined,
+});
+
+export const SquigglePlayground: FC<PlaygroundProps> = ({
+  defaultCode = "",
+  height = 500,
+  showSummary = true,
+  logX = false,
+  expY = false,
+  title,
+  minX,
+  maxX,
+  tickFormat = defaultTickFormat,
+  distributionChartActions,
+  code: controlledCode,
+  onCodeChange,
+  onSettingsChange,
+  showEditor = true,
+  showShareButton = false,
+  continues,
+  project,
+}) => {
+  const [code, setCode] = useMaybeControlledValue({
+    value: controlledCode,
+    defaultValue: defaultCode,
+    onChange: onCodeChange,
+  });
+
+  const [imports, setImports] = useState<JsImports>({});
+
+  const { register, control } = useForm({
+    resolver: yupResolver(schema),
+    defaultValues: {
+      sampleCount: 1000,
+      xyPointLength: 1000,
+      chartHeight: 150,
+      logX,
+      expY,
+      title,
+      minX,
+      maxX,
+      tickFormat,
+      distributionChartActions,
+      showSummary,
+      showEditor,
+      diagramStart: 0,
+      diagramStop: 10,
+      diagramCount: 20,
+    },
+  });
+  const vars = useWatch({
+    control,
+  });
+
+  useEffect(() => {
+    onSettingsChange?.(vars);
+  }, [vars, onSettingsChange]);
+
+  const environment: environment = useMemo(
+    () => ({
+      sampleCount: Number(vars.sampleCount),
+      xyPointLength: Number(vars.xyPointLength),
+    }),
+    [vars.sampleCount, vars.xyPointLength]
+  );
+
+  const {
+    run,
+    autorunMode,
+    setAutorunMode,
+    isRunning,
+    renderedCode,
+    executionId,
+  } = useRunnerState(code);
+
+  const resultAndBindings = useSquiggle({
+    environment,
+    continues,
+    code: renderedCode,
+    project,
+    jsImports: imports,
+    executionId,
+  });
+
+  const valueToRender = getValueToRender(resultAndBindings);
+
+  const squiggleChart =
+    renderedCode === "" ? null : (
+      <div className="relative">
+        {isRunning ? (
+          <div className="absolute inset-0 bg-white opacity-0 animate-semi-appear" />
+        ) : null}
+        <SquiggleViewer
+          result={valueToRender}
+          environment={environment}
+          height={vars.chartHeight || 150}
+          distributionPlotSettings={{
+            showSummary: vars.showSummary ?? false,
+            logX: vars.logX ?? false,
+            expY: vars.expY ?? false,
+            format: vars.tickFormat,
+            minX: vars.minX,
+            maxX: vars.maxX,
+            title: vars.title,
+            actions: vars.distributionChartActions,
+          }}
+          chartSettings={{
+            start: vars.diagramStart ?? 0,
+            stop: vars.diagramStop ?? 10,
+            count: vars.diagramCount ?? 20,
+          }}
+          enableLocalSettings={true}
+        />
+      </div>
+    );
+
+  const errorLocations = getErrorLocations(resultAndBindings.result);
+
+  const firstTab = vars.showEditor ? (
+    <div className="border border-slate-200" data-testid="squiggle-editor">
+      <CodeEditor
+        errorLocations={errorLocations}
+        value={code}
+        onChange={setCode}
+        onSubmit={run}
+        oneLine={false}
+        showGutter={true}
+        height={height - 1}
+      />
+    </div>
+  ) : (
+    squiggleChart
+  );
+
+  const tabs = (
+    <StyledTab.Panels>
+      <StyledTab.Panel>{firstTab}</StyledTab.Panel>
+      <StyledTab.Panel>
+        <SamplingSettings register={register} />
+      </StyledTab.Panel>
+      <StyledTab.Panel>
+        <ViewSettings
+          register={
+            // This is dangerous, but doesn't cause any problems.
+            // I tried to make `ViewSettings` generic (to allow it to accept any extension of a settings schema), but it didn't work.
+            register as unknown as UseFormRegister<
+              yup.InferType<typeof viewSettingsSchema>
+            >
+          }
+        />
+      </StyledTab.Panel>
+      <StyledTab.Panel>
+        <InputVariablesSettings
+          initialImports={imports}
+          setImports={setImports}
+        />
+      </StyledTab.Panel>
+    </StyledTab.Panels>
+  );
+
+  const leftPanelRef = useRef<HTMLDivElement | null>(null);
+
+  const withEditor = (
+    <div className="flex mt-2">
+      <div
+        className="w-1/2 relative"
+        style={{ minHeight: height }}
+        ref={leftPanelRef}
+      >
+        {tabs}
+      </div>
+      <div className="w-1/2 p-2 pl-4" data-testid="playground-result">
+        {squiggleChart}
+      </div>
+    </div>
+  );
+
+  const withoutEditor = <div className="mt-3">{tabs}</div>;
+
+  const getLeftPanelElement = useCallback(() => {
+    return leftPanelRef.current ?? undefined;
+  }, []);
+
+  return (
+    <SquiggleContainer>
+      <PlaygroundContext.Provider value={{ getLeftPanelElement }}>
+        <StyledTab.Group>
+          <div className="pb-4">
+            <div className="flex justify-between items-center">
+              <StyledTab.List>
+                <StyledTab
+                  name={vars.showEditor ? "Code" : "Display"}
+                  icon={vars.showEditor ? CodeIcon : EyeIcon}
+                />
+                <StyledTab name="Sampling Settings" icon={CogIcon} />
+                <StyledTab name="View Settings" icon={ChartSquareBarIcon} />
+                <StyledTab name="Input Variables" icon={CurrencyDollarIcon} />
+              </StyledTab.List>
+              <div className="flex space-x-2 items-center">
+                <RunControls
+                  autorunMode={autorunMode}
+                  isStale={renderedCode !== code}
+                  run={run}
+                  isRunning={isRunning}
+                  onAutorunModeChange={setAutorunMode}
+                />
+                {showShareButton && <ShareButton />}
+              </div>
+            </div>
+            {vars.showEditor ? withEditor : withoutEditor}
+          </div>
+        </StyledTab.Group>
+      </PlaygroundContext.Provider>
+    </SquiggleContainer>
+  );
+};

packages/components/src/components/SquiggleViewer/ExpressionViewer.tsx

@@ -0,0 +1,310 @@
+import React, { useContext } from "react";
+import { SqDistributionTag, SqValue, SqValueTag } from "@quri/squiggle-lang";
+import { NumberShower } from "../NumberShower";
+import { DistributionChart, defaultPlot, makePlot } from "../DistributionChart";
+import { FunctionChart } from "../FunctionChart";
+import clsx from "clsx";
+import { VariableBox } from "./VariableBox";
+import { ItemSettingsMenu } from "./ItemSettingsMenu";
+import { hasMassBelowZero } from "../../lib/distributionUtils";
+import { MergedItemSettings } from "./utils";
+import { ViewerContext } from "./ViewerContext";
+
+/*
+// DISABLED FOR 0.4 branch, for now
+function getRange<a>(x: declaration<a>) {
+  const first = x.args[0];
+  switch (first.tag) {
+    case "Float": {
+      return { floats: { min: first.value.min, max: first.value.max } };
+    }
+    case "Date": {
+      return { time: { min: first.value.min, max: first.value.max } };
+    }
+  }
+}
+
+function getChartSettings<a>(x: declaration<a>): FunctionChartSettings {
+  const range = getRange(x);
+  const min = range.floats ? range.floats.min : 0;
+  const max = range.floats ? range.floats.max : 10;
+  return {
+    start: min,
+    stop: max,
+    count: 20,
+  };
+}
+*/
+
+const VariableList: React.FC<{
+  value: SqValue;
+  heading: string;
+  children: (settings: MergedItemSettings) => React.ReactNode;
+}> = ({ value, heading, children }) => (
+  <VariableBox value={value} heading={heading}>
+    {(settings) => (
+      <div
+        className={clsx(
+          "space-y-3",
+          value.location.path.items.length ? "pt-1 mt-1" : null
+        )}
+      >
+        {children(settings)}
+      </div>
+    )}
+  </VariableBox>
+);
+
+export interface Props {
+  /** The output of squiggle's run */
+  value: SqValue;
+  width?: number;
+}
+
+export const ExpressionViewer: React.FC<Props> = ({ value, width }) => {
+  const { getMergedSettings } = useContext(ViewerContext);
+
+  switch (value.tag) {
+    case SqValueTag.Number:
+      return (
+        <VariableBox value={value} heading="Number">
+          {() => (
+            <div className="font-semibold text-slate-600">
+              <NumberShower precision={3} number={value.value} />
+            </div>
+          )}
+        </VariableBox>
+      );
+    case SqValueTag.Distribution: {
+      const distType = value.value.tag;
+      return (
+        <VariableBox
+          value={value}
+          heading={`Distribution (${distType})\n${
+            distType === SqDistributionTag.Symbolic
+              ? value.value.toString()
+              : ""
+          }`}
+          renderSettingsMenu={({ onChange }) => {
+            const shape = value.value.pointSet(
+              getMergedSettings(value.location).environment
+            );
+            return (
+              <ItemSettingsMenu
+                value={value}
+                onChange={onChange}
+                disableLogX={
+                  shape.tag === "Ok" && hasMassBelowZero(shape.value.asShape())
+                }
+                withFunctionSettings={false}
+              />
+            );
+          }}
+        >
+          {(settings) => {
+            return (
+              <DistributionChart
+                plot={defaultPlot(value.value)}
+                environment={settings.environment}
+                {...settings.distributionPlotSettings}
+                height={settings.height}
+                width={width}
+              />
+            );
+          }}
+        </VariableBox>
+      );
+    }
+    case SqValueTag.String:
+      return (
+        <VariableBox value={value} heading="String">
+          {() => (
+            <>
+              <span className="text-slate-400">"</span>
+              <span className="text-slate-600 font-semibold font-mono">
+                {value.value}
+              </span>
+              <span className="text-slate-400">"</span>
+            </>
+          )}
+        </VariableBox>
+      );
+    case SqValueTag.Bool:
+      return (
+        <VariableBox value={value} heading="Boolean">
+          {() => value.value.toString()}
+        </VariableBox>
+      );
+    case SqValueTag.Date:
+      return (
+        <VariableBox value={value} heading="Date">
+          {() => value.value.toDateString()}
+        </VariableBox>
+      );
+    case SqValueTag.Void:
+      return (
+        <VariableBox value={value} heading="Void">
+          {() => "Void"}
+        </VariableBox>
+      );
+    case SqValueTag.TimeDuration: {
+      return (
+        <VariableBox value={value} heading="Time Duration">
+          {() => <NumberShower precision={3} number={value.value} />}
+        </VariableBox>
+      );
+    }
+    case SqValueTag.Lambda:
+      return (
+        <VariableBox
+          value={value}
+          heading="Function"
+          renderSettingsMenu={({ onChange }) => {
+            return (
+              <ItemSettingsMenu
+                value={value}
+                onChange={onChange}
+                withFunctionSettings={true}
+              />
+            );
+          }}
+        >
+          {(settings) => (
+            <>
+              <div className="text-amber-700 bg-amber-100 rounded-md font-mono p-1 pl-2 mb-3 mt-1 text-sm">{`function(${value.value
+                .parameters()
+                .join(",")})`}</div>
+              <FunctionChart
+                fn={value.value}
+                chartSettings={settings.chartSettings}
+                distributionPlotSettings={settings.distributionPlotSettings}
+                height={settings.height}
+                environment={{
+                  sampleCount: settings.environment.sampleCount / 10,
+                  xyPointLength: settings.environment.xyPointLength / 10,
+                }}
+              />
+            </>
+          )}
+        </VariableBox>
+      );
+    case SqValueTag.Declaration: {
+      return (
+        <VariableBox
+          value={value}
+          heading="Function Declaration"
+          renderSettingsMenu={({ onChange }) => {
+            return (
+              <ItemSettingsMenu
+                onChange={onChange}
+                value={value}
+                withFunctionSettings={true}
+              />
+            );
+          }}
+        >
+          {(settings) => (
+            <div>NOT IMPLEMENTED IN 0.4 YET</div>
+            // <FunctionChart
+            //   fn={expression.value.fn}
+            //   chartSettings={getChartSettings(expression.value)}
+            //   distributionPlotSettings={settings.distributionPlotSettings}
+            //   height={settings.height}
+            //   environment={{
+            //     sampleCount: settings.environment.sampleCount / 10,
+            //     xyPointLength: settings.environment.xyPointLength / 10,
+            //   }}
+            // />
+          )}
+        </VariableBox>
+      );
+    }
+    case SqValueTag.Record:
+      const plot = makePlot(value.value);
+      if (plot) {
+        return (
+          <VariableBox
+            value={value}
+            heading="Plot"
+            renderSettingsMenu={({ onChange }) => {
+              let disableLogX = plot.distributions.some((x) => {
+                let pointSet = x.distribution.pointSet(
+                  getMergedSettings(value.location).environment
+                );
+                return (
+                  pointSet.tag === "Ok" &&
+                  hasMassBelowZero(pointSet.value.asShape())
+                );
+              });
+              return (
+                <ItemSettingsMenu
+                  value={value}
+                  onChange={onChange}
+                  disableLogX={disableLogX}
+                  withFunctionSettings={false}
+                />
+              );
+            }}
+          >
+            {(settings) => {
+              return (
+                <DistributionChart
+                  plot={plot}
+                  environment={settings.environment}
+                  {...settings.distributionPlotSettings}
+                  height={settings.height}
+                  width={width}
+                />
+              );
+            }}
+          </VariableBox>
+        );
+      } else {
+        return (
+          <VariableList value={value} heading="Record">
+            {(_) =>
+              value.value
+                .entries()
+                .map(([key, r]) => (
+                  <ExpressionViewer
+                    key={key}
+                    value={r}
+                    width={width !== undefined ? width - 20 : width}
+                  />
+                ))
+            }
+          </VariableList>
+        );
+      }
+    case SqValueTag.Array:
+      return (
+        <VariableList value={value} heading="Array">
+          {(_) =>
+            value.value
+              .getValues()
+              .map((r, i) => (
+                <ExpressionViewer
+                  key={i}
+                  value={r}
+                  width={width !== undefined ? width - 20 : width}
+                />
+              ))
+          }
+        </VariableList>
+      );
+    default: {
+      return (
+        <VariableList value={value} heading="Error">
+          {() => (
+            <div>
+              <span>No display for type: </span>{" "}
+              <span className="font-semibold text-slate-600">
+                {(value as { tag: string }).tag}
+              </span>
+            </div>
+          )}
+        </VariableList>
+      );
+    }
+  }
+};

packages/components/src/components/SquiggleViewer/ItemSettingsMenu.tsx

@@ -0,0 +1,164 @@
+import { CogIcon } from "@heroicons/react/solid";
+import React, { useContext, useRef, useState, useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { Modal } from "../ui/Modal";
+import { ViewSettings, viewSettingsSchema } from "../ViewSettings";
+import { ViewerContext } from "./ViewerContext";
+import { defaultTickFormat } from "../../lib/distributionSpecBuilder";
+import { PlaygroundContext } from "../SquigglePlayground";
+import { SqValue } from "@quri/squiggle-lang";
+import { locationAsString } from "./utils";
+
+type Props = {
+  value: SqValue;
+  onChange: () => void;
+  disableLogX?: boolean;
+  withFunctionSettings: boolean;
+};
+
+const ItemSettingsModal: React.FC<
+  Props & { close: () => void; resetScroll: () => void }
+> = ({
+  value,
+  onChange,
+  disableLogX,
+  withFunctionSettings,
+  close,
+  resetScroll,
+}) => {
+  const { setSettings, getSettings, getMergedSettings } =
+    useContext(ViewerContext);
+
+  const mergedSettings = getMergedSettings(value.location);
+
+  const { register, watch } = useForm({
+    resolver: yupResolver(viewSettingsSchema),
+    defaultValues: {
+      // this is a mess and should be fixed
+      showEditor: true, // doesn't matter
+      chartHeight: mergedSettings.height,
+      showSummary: mergedSettings.distributionPlotSettings.showSummary,
+      logX: mergedSettings.distributionPlotSettings.logX,
+      expY: mergedSettings.distributionPlotSettings.expY,
+      tickFormat:
+        mergedSettings.distributionPlotSettings.format || defaultTickFormat,
+      title: mergedSettings.distributionPlotSettings.title,
+      minX: mergedSettings.distributionPlotSettings.minX,
+      maxX: mergedSettings.distributionPlotSettings.maxX,
+      distributionChartActions: mergedSettings.distributionPlotSettings.actions,
+      diagramStart: mergedSettings.chartSettings.start,
+      diagramStop: mergedSettings.chartSettings.stop,
+      diagramCount: mergedSettings.chartSettings.count,
+    },
+  });
+  useEffect(() => {
+    const subscription = watch((vars) => {
+      const settings = getSettings(value.location); // get the latest version
+      setSettings(value.location, {
+        ...settings,
+        distributionPlotSettings: {
+          showSummary: vars.showSummary,
+          logX: vars.logX,
+          expY: vars.expY,
+          format: vars.tickFormat,
+          title: vars.title,
+          minX: vars.minX,
+          maxX: vars.maxX,
+          actions: vars.distributionChartActions,
+        },
+        chartSettings: {
+          start: vars.diagramStart,
+          stop: vars.diagramStop,
+          count: vars.diagramCount,
+        },
+      });
+      onChange();
+    });
+    return () => subscription.unsubscribe();
+  }, [getSettings, setSettings, onChange, value.location, watch]);
+
+  const { getLeftPanelElement } = useContext(PlaygroundContext);
+
+  return (
+    <Modal container={getLeftPanelElement()} close={close}>
+      <Modal.Header>
+        Chart settings
+        {value.location.path.items.length ? (
+          <>
+            {" for "}
+            <span
+              title="Scroll to item"
+              className="cursor-pointer"
+              onClick={resetScroll}
+            >
+              {locationAsString(value.location)}
+            </span>{" "}
+          </>
+        ) : (
+          ""
+        )}
+      </Modal.Header>
+      <Modal.Body>
+        <ViewSettings
+          register={register}
+          withShowEditorSetting={false}
+          withFunctionSettings={withFunctionSettings}
+          disableLogXSetting={disableLogX}
+        />
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+export const ItemSettingsMenu: React.FC<Props> = (props) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { enableLocalSettings, setSettings, getSettings } =
+    useContext(ViewerContext);
+
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  if (!enableLocalSettings) {
+    return null;
+  }
+  const settings = getSettings(props.value.location);
+
+  const resetScroll = () => {
+    if (!ref.current) return;
+    window.scroll({
+      top: ref.current.getBoundingClientRect().y + window.scrollY,
+      behavior: "smooth",
+    });
+  };
+
+  return (
+    <div className="flex gap-2" ref={ref}>
+      <CogIcon
+        className="h-5 w-5 cursor-pointer text-slate-400 hover:text-slate-500"
+        onClick={() => setIsOpen(!isOpen)}
+      />
+      {settings.distributionPlotSettings || settings.chartSettings ? (
+        <button
+          onClick={() => {
+            setSettings(props.value.location, {
+              ...settings,
+              distributionPlotSettings: undefined,
+              chartSettings: undefined,
+            });
+            props.onChange();
+          }}
+          className="text-xs px-1 py-0.5 rounded bg-slate-300"
+        >
+          Reset settings
+        </button>
+      ) : null}
+      {isOpen ? (
+        <ItemSettingsModal
+          {...props}
+          close={() => setIsOpen(false)}
+          resetScroll={resetScroll}
+        />
+      ) : null}
+    </div>
+  );
+};

packages/components/src/components/SquiggleViewer/VariableBox.tsx

@@ -0,0 +1,82 @@
+import { SqValue } from "@quri/squiggle-lang";
+import React, { useContext, useReducer } from "react";
+import { Tooltip } from "../ui/Tooltip";
+import { LocalItemSettings, MergedItemSettings } from "./utils";
+import { ViewerContext } from "./ViewerContext";
+
+type SettingsMenuParams = {
+  onChange: () => void; // used to notify VariableBox that settings have changed, so that VariableBox could re-render itself
+};
+
+type VariableBoxProps = {
+  value: SqValue;
+  heading: string;
+  renderSettingsMenu?: (params: SettingsMenuParams) => React.ReactNode;
+  children: (settings: MergedItemSettings) => React.ReactNode;
+};
+
+export const VariableBox: React.FC<VariableBoxProps> = ({
+  value: { location },
+  heading = "Error",
+  renderSettingsMenu,
+  children,
+}) => {
+  const { setSettings, getSettings, getMergedSettings } =
+    useContext(ViewerContext);
+
+  // Since ViewerContext doesn't keep the actual settings, VariableBox won't rerender when setSettings is called.
+  // So we use `forceUpdate` to force rerendering.
+  const [_, forceUpdate] = useReducer((x) => x + 1, 0);
+
+  const settings = getSettings(location);
+
+  const setSettingsAndUpdate = (newSettings: LocalItemSettings) => {
+    setSettings(location, newSettings);
+    forceUpdate();
+  };
+
+  const toggleCollapsed = () => {
+    setSettingsAndUpdate({ ...settings, collapsed: !settings.collapsed });
+  };
+
+  const isTopLevel = location.path.items.length === 0;
+  const name = isTopLevel
+    ? { result: "Result", bindings: "Bindings" }[location.path.root]
+    : location.path.items[location.path.items.length - 1];
+
+  return (
+    <div role={isTopLevel ? "status" : undefined}>
+      <header className="inline-flex space-x-1">
+        <Tooltip text={heading}>
+          <span
+            className="text-slate-500 font-mono text-sm cursor-pointer"
+            onClick={toggleCollapsed}
+          >
+            {name}:
+          </span>
+        </Tooltip>
+        {settings.collapsed ? (
+          <span
+            className="rounded p-0.5 bg-slate-200 text-slate-500 font-mono text-xs cursor-pointer"
+            onClick={toggleCollapsed}
+          >
+            ...
+          </span>
+        ) : renderSettingsMenu ? (
+          renderSettingsMenu({ onChange: forceUpdate })
+        ) : null}
+      </header>
+      {settings.collapsed ? null : (
+        <div className="flex w-full">
+          {location.path.items.length ? (
+            <div
+              className="shrink-0 border-l-2 border-slate-200 hover:border-indigo-600 w-4 cursor-pointer"
+              onClick={toggleCollapsed}
+            ></div>
+          ) : null}
+          <div className="grow">{children(getMergedSettings(location))}</div>
+        </div>
+      )}
+    </div>
+  );
+};

packages/components/src/components/SquiggleViewer/ViewerContext.ts

@@ -0,0 +1,35 @@
+import { defaultEnvironment, SqValueLocation } from "@quri/squiggle-lang";
+import React from "react";
+import { LocalItemSettings, MergedItemSettings } from "./utils";
+
+type ViewerContextShape = {
+  // Note that we don't store settings themselves in the context (that would cause rerenders of the entire tree on each settings update).
+  // Instead, we keep settings in local state and notify the global context via setSettings to pass them down the component tree again if it got rebuilt from scratch.
+  // See ./SquiggleViewer.tsx and ./VariableBox.tsx for other implementation details on this.
+  getSettings(location: SqValueLocation): LocalItemSettings;
+  getMergedSettings(location: SqValueLocation): MergedItemSettings;
+  setSettings(location: SqValueLocation, value: LocalItemSettings): void;
+  enableLocalSettings: boolean; // show local settings icon in the UI
+};
+
+export const ViewerContext = React.createContext<ViewerContextShape>({
+  getSettings: () => ({ collapsed: false }),
+  getMergedSettings: () => ({
+    collapsed: false,
+    // copy-pasted from SquiggleChart
+    chartSettings: {
+      start: 0,
+      stop: 10,
+      count: 100,
+    },
+    distributionPlotSettings: {
+      showSummary: false,
+      logX: false,
+      expY: false,
+    },
+    environment: defaultEnvironment,
+    height: 150,
+  }),
+  setSettings() {},
+  enableLocalSettings: false,
+});

packages/components/src/components/SquiggleViewer/index.tsx

@@ -0,0 +1,99 @@
+import React, { useCallback, useRef } from "react";
+import { environment, SqValueLocation } from "@quri/squiggle-lang";
+import { DistributionPlottingSettings } from "../DistributionChart";
+import { FunctionChartSettings } from "../FunctionChart";
+import { ExpressionViewer } from "./ExpressionViewer";
+import { ViewerContext } from "./ViewerContext";
+import {
+  LocalItemSettings,
+  locationAsString,
+  MergedItemSettings,
+} from "./utils";
+import { useSquiggle } from "../../lib/hooks";
+import { SquiggleErrorAlert } from "../SquiggleErrorAlert";
+
+type Props = {
+  /** The output of squiggle's run */
+  result: ReturnType<typeof useSquiggle>["result"];
+  width?: number;
+  height: number;
+  distributionPlotSettings: DistributionPlottingSettings;
+  /** Settings for displaying functions */
+  chartSettings: FunctionChartSettings;
+  /** Environment for further function executions */
+  environment: environment;
+  enableLocalSettings?: boolean;
+};
+
+type Settings = {
+  [k: string]: LocalItemSettings;
+};
+
+const defaultSettings: LocalItemSettings = { collapsed: false };
+
+export const SquiggleViewer: React.FC<Props> = ({
+  result,
+  width,
+  height,
+  distributionPlotSettings,
+  chartSettings,
+  environment,
+  enableLocalSettings = false,
+}) => {
+  // can't store settings in the state because we don't want to rerender the entire tree on every change
+  const settingsRef = useRef<Settings>({});
+
+  const getSettings = useCallback(
+    (location: SqValueLocation) => {
+      return settingsRef.current[locationAsString(location)] || defaultSettings;
+    },
+    [settingsRef]
+  );
+
+  const setSettings = useCallback(
+    (location: SqValueLocation, value: LocalItemSettings) => {
+      settingsRef.current[locationAsString(location)] = value;
+    },
+    [settingsRef]
+  );
+
+  const getMergedSettings = useCallback(
+    (location: SqValueLocation) => {
+      const localSettings = getSettings(location);
+      const result: MergedItemSettings = {
+        distributionPlotSettings: {
+          ...distributionPlotSettings,
+          ...(localSettings.distributionPlotSettings || {}),
+        },
+        chartSettings: {
+          ...chartSettings,
+          ...(localSettings.chartSettings || {}),
+        },
+        environment: {
+          ...environment,
+          ...(localSettings.environment || {}),
+        },
+        height: localSettings.height || height,
+      };
+      return result;
+    },
+    [distributionPlotSettings, chartSettings, environment, height, getSettings]
+  );
+
+  return (
+    <ViewerContext.Provider
+      value={{
+        getSettings,
+        setSettings,
+        getMergedSettings,
+        enableLocalSettings,
+      }}
+    >
+      {result.tag === "Ok" ? (
+        <ExpressionViewer value={result.value} width={width} />
+      ) : (
+        <SquiggleErrorAlert error={result.value} />
+      )}
+    </ViewerContext.Provider>
+  );
+};

packages/components/src/components/SquiggleViewer/utils.ts

@@ -0,0 +1,21 @@
+import { DistributionPlottingSettings } from "../DistributionChart";
+import { FunctionChartSettings } from "../FunctionChart";
+import { environment, SqValueLocation } from "@quri/squiggle-lang";
+
+export type LocalItemSettings = {
+  collapsed: boolean;
+  distributionPlotSettings?: Partial<DistributionPlottingSettings>;
+  chartSettings?: Partial<FunctionChartSettings>;
+  height?: number;
+  environment?: Partial<environment>;
+};
+
+export type MergedItemSettings = {
+  distributionPlotSettings: DistributionPlottingSettings;
+  chartSettings: FunctionChartSettings;
+  height: number;
+  environment: environment;
+};
+
+export const locationAsString = (location: SqValueLocation) =>
+  location.path.items.join(".");

packages/components/src/components/ViewSettings.tsx

@@ -0,0 +1,153 @@
+import React from "react";
+import * as yup from "yup";
+import { UseFormRegister } from "react-hook-form";
+import { InputItem } from "./ui/InputItem";
+import { Checkbox } from "./ui/Checkbox";
+import { HeadedSection } from "./ui/HeadedSection";
+import { Text } from "./ui/Text";
+import { defaultTickFormat } from "../lib/distributionSpecBuilder";
+
+export const viewSettingsSchema = yup.object({}).shape({
+  chartHeight: yup.number().required().positive().integer().default(350),
+  showSummary: yup.boolean().required(),
+  showEditor: yup.boolean().required(),
+  logX: yup.boolean().required(),
+  expY: yup.boolean().required(),
+  tickFormat: yup.string().default(defaultTickFormat),
+  title: yup.string(),
+  minX: yup.number(),
+  maxX: yup.number(),
+  distributionChartActions: yup.boolean(),
+  diagramStart: yup.number().required().positive().integer().default(0).min(0),
+  diagramStop: yup.number().required().positive().integer().default(10).min(0),
+  diagramCount: yup.number().required().positive().integer().default(20).min(2),
+});
+
+type FormFields = yup.InferType<typeof viewSettingsSchema>;
+
+// This component is used in two places: for global settings in SquigglePlayground, and for item-specific settings in modal dialogs.
+export const ViewSettings: React.FC<{
+  withShowEditorSetting?: boolean;
+  withFunctionSettings?: boolean;
+  disableLogXSetting?: boolean;
+  register: UseFormRegister<FormFields>;
+}> = ({
+  withShowEditorSetting = true,
+  withFunctionSettings = true,
+  disableLogXSetting,
+  register,
+}) => {
+  return (
+    <div className="space-y-6 p-3 divide-y divide-gray-200 max-w-xl">
+      <HeadedSection title="General Display Settings">
+        <div className="space-y-4">
+          {withShowEditorSetting ? (
+            <Checkbox
+              name="showEditor"
+              register={register}
+              label="Show code editor on left"
+            />
+          ) : null}
+          <InputItem
+            name="chartHeight"
+            type="number"
+            register={register}
+            label="Chart Height (in pixels)"
+          />
+        </div>
+      </HeadedSection>
+
+      <div className="pt-8">
+        <HeadedSection title="Distribution Display Settings">
+          <div className="space-y-2">
+            <Checkbox
+              register={register}
+              name="logX"
+              label="Show x scale logarithmically"
+              disabled={disableLogXSetting}
+              tooltip={
+                disableLogXSetting
+                  ? "Your distribution has mass lower than or equal to 0. Log only works on strictly positive values."
+                  : undefined
+              }
+            />
+            <Checkbox
+              register={register}
+              name="expY"
+              label="Show y scale exponentially"
+            />
+            <Checkbox
+              register={register}
+              name="distributionChartActions"
+              label="Show vega chart controls"
+            />
+            <Checkbox
+              register={register}
+              name="showSummary"
+              label="Show summary statistics"
+            />
+            <InputItem
+              name="minX"
+              type="number"
+              register={register}
+              label="Min X Value"
+            />
+            <InputItem
+              name="maxX"
+              type="number"
+              register={register}
+              label="Max X Value"
+            />
+            <InputItem
+              name="title"
+              type="text"
+              register={register}
+              label="Title"
+            />
+            <InputItem
+              name="tickFormat"
+              type="text"
+              register={register}
+              label="Tick Format"
+            />
+          </div>
+        </HeadedSection>
+      </div>
+
+      {withFunctionSettings ? (
+        <div className="pt-8">
+          <HeadedSection title="Function Display Settings">
+            <div className="space-y-6">
+              <Text>
+                When displaying functions of single variables that return
+                numbers or distributions, we need to use defaults for the
+                x-axis. We need to select a minimum and maximum value of x to
+                sample, and a number n of the number of points to sample.
+              </Text>
+              <div className="space-y-4">
+                <InputItem
+                  type="number"
+                  name="diagramStart"
+                  register={register}
+                  label="Min X Value"
+                />
+                <InputItem
+                  type="number"
+                  name="diagramStop"
+                  register={register}
+                  label="Max X Value"
+                />
+                <InputItem
+                  type="number"
+                  name="diagramCount"
+                  register={register}
+                  label="Points between X min and X max to sample"
+                />
+              </div>
+            </div>
+          </HeadedSection>
+        </div>
+      ) : null}
+    </div>
+  );
+};

packages/components/src/components/ui/Button.tsx

@@ -0,0 +1,22 @@
+import clsx from "clsx";
+import React from "react";
+
+type Props = {
+  onClick: () => void;
+  children: React.ReactNode;
+  wide?: boolean; // stretch the button horizontally
+};
+
+export const Button: React.FC<Props> = ({ onClick, wide, children }) => {
+  return (
+    <button
+      className={clsx(
+        "rounded-md py-1.5 px-2 bg-slate-500 text-white text-xs font-semibold flex items-center justify-center space-x-1",
+        wide && "w-full"
+      )}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+};

packages/components/src/components/ui/Checkbox.tsx

@@ -0,0 +1,37 @@
+import clsx from "clsx";
+import React from "react";
+import { Path, UseFormRegister, FieldValues } from "react-hook-form";
+
+export function Checkbox<T extends FieldValues>({
+  name,
+  label,
+  register,
+  disabled,
+  tooltip,
+}: {
+  name: Path<T>;
+  label: string;
+  register: UseFormRegister<T>;
+  disabled?: boolean;
+  tooltip?: string;
+}) {
+  return (
+    <label className="flex items-center" title={tooltip}>
+      <input
+        type="checkbox"
+        disabled={disabled}
+        {...register(name)}
+        className="form-checkbox focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+      />
+      {/* Clicking on the div makes the checkbox lose focus while mouse button is pressed, leading to annoying blinking; I couldn't figure out how to fix this. */}
+      <div
+        className={clsx(
+          "ml-3 text-sm font-medium",
+          disabled ? "text-gray-400" : "text-gray-700"
+        )}
+      >
+        {label}
+      </div>
+    </label>
+  );
+}

packages/components/src/components/ui/HeadedSection.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+export const HeadedSection: React.FC<{
+  title: string;
+  children: React.ReactNode;
+}> = ({ title, children }) => (
+  <div>
+    <header className="text-lg leading-6 font-medium text-gray-900">
+      {title}
+    </header>
+    <div className="mt-4">{children}</div>
+  </div>
+);

packages/components/src/components/ui/InputItem.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Path, UseFormRegister, FieldValues } from "react-hook-form";
+
+export function InputItem<T extends FieldValues>({
+  name,
+  label,
+  type,
+  register,
+}: {
+  name: Path<T>;
+  label: string;
+  type: "number" | "text" | "color";
+  register: UseFormRegister<T>;
+}) {
+  return (
+    <label className="block">
+      <div className="text-sm font-medium text-gray-600 mb-1">{label}</div>
+      <input
+        type={type}
+        {...register(name, { valueAsNumber: type === "number" })}
+        className="form-input max-w-lg block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md"
+      />
+    </label>
+  );
+}

packages/components/src/components/ui/Modal.tsx

@@ -0,0 +1,184 @@
+import { motion } from "framer-motion";
+import React, { useContext } from "react";
+import * as ReactDOM from "react-dom";
+import { XIcon } from "@heroicons/react/solid";
+import clsx from "clsx";
+import { useWindowScroll, useWindowSize } from "react-use";
+
+type ModalContextShape = {
+  close: () => void;
+};
+const ModalContext = React.createContext<ModalContextShape>({
+  close: () => undefined,
+});
+
+const Overlay: React.FC = () => {
+  const { close } = useContext(ModalContext);
+  return (
+    <motion.div
+      className="absolute inset-0 -z-10 bg-black"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 0.1 }}
+      onClick={close}
+    />
+  );
+};
+
+const ModalHeader: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
+  const { close } = useContext(ModalContext);
+  return (
+    <header className="px-5 py-3 border-b border-gray-200 font-bold flex items-center justify-between">
+      <div>{children}</div>
+      <button
+        className="px-1 bg-transparent cursor-pointer text-gray-700 hover:text-accent-500"
+        type="button"
+        onClick={close}
+      >
+        <XIcon className="h-5 w-5 cursor-pointer text-slate-400 hover:text-slate-500" />
+      </button>
+    </header>
+  );
+};
+
+// TODO - get rid of forwardRef, support `focus` and `{...hotkeys}` via smart props
+const ModalBody = React.forwardRef<
+  HTMLDivElement,
+  JSX.IntrinsicElements["div"]
+>(function ModalBody(props, ref) {
+  return <div ref={ref} className="px-5 py-3 overflow-auto" {...props} />;
+});
+
+const ModalFooter: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <div className="px-5 py-3 border-t border-gray-200">{children}</div>
+);
+
+const ModalWindow: React.FC<{
+  children: React.ReactNode;
+  container?: HTMLElement;
+}> = ({ children, container }) => {
+  // This component works in two possible modes:
+  // 1. container mode - the modal is rendered inside a container element
+  // 2. centered mode - the modal is rendered in the middle of the screen
+  // The mode is determined by the presence of the `container` prop and by whether the available space is large enough to fit the modal.
+
+  // Necessary for container mode - need to reposition the modal on scroll and resize events.
+  useWindowSize();
+  useWindowScroll();
+
+  let position:
+    | {
+        left: number;
+        top: number;
+        maxWidth: number;
+        maxHeight: number;
+        transform: string;
+      }
+    | undefined;
+
+  // If available space in `visibleRect` is smaller than these, fallback to positioning in the middle of the screen.
+  const minWidth = 384;
+  const minHeight = 300;
+  const offset = 8;
+  const naturalWidth = 576; // maximum possible width; modal tries to take this much space, but can be smaller
+
+  if (container) {
+    const { clientWidth: screenWidth, clientHeight: screenHeight } =
+      document.documentElement;
+    const rect = container?.getBoundingClientRect();
+
+    const visibleRect = {
+      left: Math.max(rect.left, 0),
+      right: Math.min(rect.right, screenWidth),
+      top: Math.max(rect.top, 0),
+      bottom: Math.min(rect.bottom, screenHeight),
+    };
+    const maxWidth = visibleRect.right - visibleRect.left - 2 * offset;
+    const maxHeight = visibleRect.bottom - visibleRect.top - 2 * offset;
+
+    const center = {
+      left: visibleRect.left + (visibleRect.right - visibleRect.left) / 2,
+      top: visibleRect.top + (visibleRect.bottom - visibleRect.top) / 2,
+    };
+    position = {
+      left: center.left,
+      top: center.top,
+      transform: "translate(-50%, -50%)",
+      maxWidth,
+      maxHeight,
+    };
+    if (maxWidth < minWidth || maxHeight < minHeight) {
+      position = undefined; // modal is hard to fit in the container, fallback to positioning it in the middle of the screen
+    }
+  }
+  return (
+    <div
+      className={clsx(
+        "bg-white rounded-md shadow-toast flex flex-col overflow-auto border",
+        position ? "fixed" : null
+      )}
+      style={{
+        width: naturalWidth,
+        ...(position ?? {
+          maxHeight: "calc(100% - 20px)",
+          maxWidth: "calc(100% - 20px)",
+          width: naturalWidth,
+        }),
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+type ModalType = React.FC<{
+  children: React.ReactNode;
+  container?: HTMLElement; // if specified, modal will be positioned over the visible part of the container, if it's not too small
+  close: () => void;
+}> & {
+  Body: typeof ModalBody;
+  Footer: typeof ModalFooter;
+  Header: typeof ModalHeader;
+};
+
+export const Modal: ModalType = ({ children, container, close }) => {
+  const [el] = React.useState(() => document.createElement("div"));
+
+  React.useEffect(() => {
+    document.body.appendChild(el);
+    return () => {
+      document.body.removeChild(el);
+    };
+  }, [el]);
+
+  React.useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        close();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [close]);
+
+  const modal = (
+    <ModalContext.Provider value={{ close }}>
+      <div className="squiggle">
+        <div className="fixed inset-0 z-40 flex justify-center items-center">
+          <Overlay />
+          <ModalWindow container={container}>{children}</ModalWindow>
+        </div>
+      </div>
+    </ModalContext.Provider>
+  );
+
+  return ReactDOM.createPortal(modal, container || el);
+};
+
+Modal.Body = ModalBody;
+Modal.Footer = ModalFooter;
+Modal.Header = ModalHeader;

packages/components/src/components/ui/StyledTab.tsx

@@ -0,0 +1,60 @@
+import React, { Fragment } from "react";
+import { Tab } from "@headlessui/react";
+import clsx from "clsx";
+
+type StyledTabProps = {
+  name: string;
+  icon: (props: React.ComponentProps<"svg">) => JSX.Element;
+};
+
+type StyledTabType = React.FC<StyledTabProps> & {
+  List: React.FC<{ children: React.ReactNode }>;
+  Group: typeof Tab.Group;
+  Panels: typeof Tab.Panels;
+  Panel: typeof Tab.Panel;
+};
+
+export const StyledTab: StyledTabType = ({ name, icon: Icon }) => {
+  return (
+    <Tab as={Fragment}>
+      {({ selected }) => (
+        <button className="group flex rounded-md focus:outline-none focus-visible:ring-offset-gray-100">
+          <span
+            className={clsx(
+              "p-1 pl-2.5 pr-3.5 rounded-md flex items-center text-sm font-medium",
+              selected && "bg-white shadow-sm ring-1 ring-black ring-opacity-5"
+            )}
+          >
+            <Icon
+              className={clsx(
+                "-ml-0.5 mr-2 h-4 w-4",
+                selected
+                  ? "text-slate-500"
+                  : "text-gray-400 group-hover:text-gray-900"
+              )}
+            />
+            <span
+              className={clsx(
+                selected
+                  ? "text-gray-900"
+                  : "text-gray-600 group-hover:text-gray-900"
+              )}
+            >
+              {name}
+            </span>
+          </span>
+        </button>
+      )}
+    </Tab>
+  );
+};
+
+StyledTab.List = ({ children }) => (
+  <Tab.List className="flex w-fit p-0.5 rounded-md bg-slate-100 hover:bg-slate-200">
+    {children}
+  </Tab.List>
+);
+
+StyledTab.Group = Tab.Group;
+StyledTab.Panels = Tab.Panels;
+StyledTab.Panel = Tab.Panel;

packages/components/src/components/ui/Text.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export const Text: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <p className="text-sm text-gray-500">{children}</p>
+);

packages/components/src/components/ui/Toggle.tsx

@@ -0,0 +1,47 @@
+import { RefreshIcon } from "@heroicons/react/solid";
+import clsx from "clsx";
+import React from "react";
+
+type IconType = (props: React.ComponentProps<"svg">) => JSX.Element;
+
+type Props = {
+  status: boolean;
+  onChange: (status: boolean) => void;
+  texts: [string, string];
+  icons: [IconType, IconType];
+  spinIcon?: boolean;
+};
+
+export const Toggle: React.FC<Props> = ({
+  status,
+  onChange,
+  texts: [onText, offText],
+  icons: [OnIcon, OffIcon],
+  spinIcon,
+}) => {
+  const CurrentIcon = status ? OnIcon : OffIcon;
+  return (
+    <button
+      className={clsx(
+        "rounded-md py-0.5 bg-slate-500 text-white text-xs font-semibold flex items-center space-x-1",
+        status ? "bg-slate-500" : "bg-gray-400",
+        status ? "pl-1 pr-3" : "pl-3 pr-1",
+        !status && "flex-row-reverse space-x-reverse"
+      )}
+      onClick={() => onChange(!status)}
+    >
+      <div className="relative w-6 h-6" key={String(spinIcon)}>
+        <CurrentIcon
+          className={clsx(
+            "w-6 h-6 absolute opacity-100",
+            spinIcon && "animate-hide"
+          )}
+        />
+        {spinIcon && (
+          <RefreshIcon className="w-6 h-6 absolute opacity-0 animate-appear-and-spin" />
+        )}
+      </div>
+      <span>{status ? onText : offText}</span>
+    </button>
+  );
+};

packages/components/src/components/ui/Tooltip.tsx

@@ -0,0 +1,64 @@
+import React, { cloneElement, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import {
+  flip,
+  shift,
+  useDismiss,
+  useFloating,
+  useHover,
+  useInteractions,
+  useRole,
+} from "@floating-ui/react-dom-interactions";
+
+interface Props {
+  text: string;
+  children: JSX.Element;
+}
+
+export const Tooltip: React.FC<Props> = ({ text, children }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { x, y, reference, floating, strategy, context } = useFloating({
+    placement: "top",
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    middleware: [shift(), flip()],
+  });
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    useHover(context),
+    useRole(context, { role: "tooltip" }),
+    useDismiss(context),
+  ]);
+
+  return (
+    <>
+      {cloneElement(
+        children,
+        getReferenceProps({ ref: reference, ...children.props })
+      )}
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.15 }}
+            {...getFloatingProps({
+              ref: floating,
+              className:
+                "text-xs p-2 border border-gray-300 rounded bg-white z-10",
+              style: {
+                position: strategy,
+                top: y ?? 0,
+                left: x ?? 0,
+              },
+            })}
+          >
+            <div className="font-mono whitespace-pre">{text}</div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </>
+  );
+};

packages/components/src/index.ts

@@ -0,0 +1,5 @@
+export { SqProject } from "@quri/squiggle-lang/";
+export { SquiggleChart } from "./components/SquiggleChart";
+export { SquiggleEditor } from "./components/SquiggleEditor";
+export { SquigglePlayground } from "./components/SquigglePlayground";
+export { SquiggleContainer } from "./components/SquiggleContainer";

packages/components/src/lib/distributionSpecBuilder.ts

@@ -0,0 +1,398 @@
+import { VisualizationSpec } from "react-vega";
+import type { LogScale, LinearScale, PowScale, TimeScale } from "vega";
+
+export type DistributionChartSpecOptions = {
+  /** Set the x scale to be logarithmic by deault */
+  logX: boolean;
+  /** Set the y scale to be exponential by deault */
+  expY: boolean;
+  /** The minimum x coordinate shown on the chart */
+  minX?: number;
+  /** The maximum x coordinate shown on the chart */
+  maxX?: number;
+  /** The title of the chart */
+  title?: string;
+  /** The formatting of the ticks */
+  format?: string;
+  /** Whether the x-axis should be dates or numbers */
+  xAxisType?: "number" | "dateTime";
+};
+
+/** X Scales */
+export const linearXScale: LinearScale = {
+  name: "xscale",
+  clamp: true,
+  type: "linear",
+  range: "width",
+  zero: false,
+  nice: false,
+};
+
+export const logXScale: LogScale = {
+  name: "xscale",
+  type: "log",
+  range: "width",
+  zero: false,
+  base: 10,
+  nice: false,
+  clamp: true,
+};
+
+export const timeXScale: TimeScale = {
+  name: "xscale",
+  clamp: true,
+  type: "time",
+  range: "width",
+  nice: false,
+};
+
+/** Y Scales */
+export const linearYScale: LinearScale = {
+  name: "yscale",
+  type: "linear",
+  range: "height",
+  zero: true,
+};
+
+export const expYScale: PowScale = {
+  name: "yscale",
+  type: "pow",
+  exponent: 0.1,
+  range: "height",
+  zero: true,
+  nice: false,
+};
+
+export const defaultTickFormat = ".9~s";
+export const timeTickFormat = "%b %d, %Y %H:%M";
+const width = 500;
+
+export function buildVegaSpec(
+  specOptions: DistributionChartSpecOptions & { maxY: number }
+): VisualizationSpec {
+  const {
+    title,
+    minX,
+    maxX,
+    logX,
+    expY,
+    xAxisType = "number",
+    maxY,
+  } = specOptions;
+
+  const dateTime = xAxisType === "dateTime";
+
+  // some fallbacks
+  const format = specOptions?.format
+    ? specOptions.format
+    : dateTime
+    ? timeTickFormat
+    : defaultTickFormat;
+
+  let xScale = dateTime ? timeXScale : logX ? logXScale : linearXScale;
+
+  xScale = {
+    ...xScale,
+    domain: [minX ?? 0, maxX ?? 1],
+    domainMin: minX,
+    domainMax: maxX,
+  };
+
+  let yScale = expY ? expYScale : linearYScale;
+  yScale = { ...yScale, domain: [0, maxY ?? 1], domainMin: 0, domainMax: maxY };
+
+  const spec: VisualizationSpec = {
+    $schema: "https://vega.github.io/schema/vega/v5.json",
+    description: "Squiggle plot chart",
+    width: width,
+    height: 100,
+    padding: 5,
+    data: [{ name: "data" }, { name: "domain" }, { name: "samples" }],
+    signals: [
+      {
+        name: "hover",
+        value: null,
+        on: [
+          { events: "mouseover", update: "datum" },
+          { events: "mouseout", update: "null" },
+        ],
+      },
+      {
+        name: "position",
+        value: "[0, 0]",
+        on: [
+          { events: "mousemove", update: "xy() " },
+          { events: "mouseout", update: "null" },
+        ],
+      },
+      {
+        name: "position_scaled",
+        value: null,
+        update: "isArray(position) ? invert('xscale', position[0]) : ''",
+      },
+    ],
+    scales: [
+      xScale,
+      yScale,
+      {
+        name: "color",
+        type: "ordinal",
+        domain: {
+          data: "data",
+          field: "name",
+        },
+        range: { scheme: "blues" },
+      },
+    ],
+    axes: [
+      {
+        orient: "bottom",
+        scale: "xscale",
+        labelColor: "#727d93",
+        tickColor: "#fff",
+        tickOpacity: 0.0,
+        domainColor: "#fff",
+        domainOpacity: 0.0,
+        format: format,
+        tickCount: dateTime ? 3 : 10,
+        labelOverlap: "greedy",
+      },
+    ],
+    marks: [
+      {
+        name: "all_distributions",
+        type: "group",
+        from: {
+          facet: {
+            name: "distribution_facet",
+            data: "data",
+            groupby: ["name"],
+          },
+        },
+        marks: [
+          {
+            name: "continuous_distribution",
+            type: "group",
+            from: {
+              facet: {
+                name: "continuous_facet",
+                data: "distribution_facet",
+                field: "continuous",
+              },
+            },
+            encode: {
+              update: {},
+            },
+            marks: [
+              {
+                name: "continuous_area",
+                type: "area",
+                from: {
+                  data: "continuous_facet",
+                },
+                encode: {
+                  update: {
+                    interpolate: { value: "linear" },
+                    x: {
+                      scale: "xscale",
+                      field: "x",
+                    },
+                    y: {
+                      scale: "yscale",
+                      field: "y",
+                    },
+                    fill: {
+                      scale: "color",
+                      field: { parent: "name" },
+                    },
+                    y2: {
+                      scale: "yscale",
+                      value: 0,
+                    },
+                    fillOpacity: {
+                      value: 1,
+                    },
+                  },
+                },
+              },
+            ],
+          },
+          {
+            name: "discrete_distribution",
+            type: "group",
+            from: {
+              facet: {
+                name: "discrete_facet",
+                data: "distribution_facet",
+                field: "discrete",
+              },
+            },
+            marks: [
+              {
+                type: "rect",
+                from: {
+                  data: "discrete_facet",
+                },
+                encode: {
+                  enter: {
+                    width: {
+                      value: 1,
+                    },
+                  },
+                  update: {
+                    x: {
+                      scale: "xscale",
+                      field: "x",
+                    },
+                    y: {
+                      scale: "yscale",
+                      field: "y",
+                    },
+                    y2: {
+                      scale: "yscale",
+                      value: 0,
+                    },
+                    fill: {
+                      scale: "color",
+                      field: { parent: "name" },
+                    },
+                  },
+                },
+              },
+              {
+                type: "symbol",
+                from: {
+                  data: "discrete_facet",
+                },
+                encode: {
+                  enter: {
+                    shape: {
+                      value: "circle",
+                    },
+                    size: [{ value: 100 }],
+                    tooltip: {
+                      signal: dateTime
+                        ? "{ probability: datum.y, value: datetime(datum.x) }"
+                        : "{ probability: datum.y, value: datum.x }",
+                    },
+                  },
+                  update: {
+                    x: {
+                      scale: "xscale",
+                      field: "x",
+                      offset: 0.5, // if this is not included, the circles are slightly left of center.
+                    },
+                    y: {
+                      scale: "yscale",
+                      field: "y",
+                    },
+                    fill: {
+                      scale: "color",
+                      field: { parent: "name" },
+                    },
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      },
+
+      {
+        name: "sampleset",
+        type: "rect",
+        from: { data: "samples" },
+        encode: {
+          enter: {
+            x: { scale: "xscale", field: "data" },
+            width: { value: 0.1 },
+
+            y: { value: 25, offset: { signal: "height" } },
+            height: { value: 5 },
+          },
+        },
+      },
+      {
+        type: "text",
+        name: "announcer",
+        interactive: false,
+        encode: {
+          enter: {
+            x: { signal: String(width), offset: 1 }, // vega would prefer its internal ` "width" ` variable, but that breaks the squiggle playground. Just setting it to the same var as used elsewhere in the spec achieves the same result.
+            fill: { value: "black" },
+            fontSize: { value: 20 },
+            align: { value: "right" },
+          },
+          update: {
+            text: {
+              signal: dateTime
+                ? "position_scaled ? utcyear(position_scaled) + '-' + utcmonth(position_scaled) + '-' + utcdate(position_scaled) + 'T' + utchours(position_scaled)+':' +utcminutes(position_scaled) : ''"
+                : "position_scaled ? format(position_scaled, ',.4r')  : ''",
+            },
+          },
+        },
+      },
+      {
+        type: "rule",
+        interactive: false,
+        encode: {
+          enter: {
+            x: { value: 0 },
+            y: { scale: "yscale", value: 0 },
+
+            y2: {
+              signal: "height",
+              offset: 2,
+            },
+            strokeDash: { value: [5, 5] },
+          },
+
+          update: {
+            x: {
+              signal:
+                "position ? position[0] < 0 ? null : position[0] > width ? null : position[0]: null",
+            },
+
+            opacity: {
+              signal:
+                "position ? position[0] < 0 ? 0 : position[0] > width ? 0 : 1 : 0",
+            },
+          },
+        },
+      },
+    ],
+    legends: [
+      {
+        fill: "color",
+        orient: "top",
+        labelFontSize: 12,
+        encode: {
+          symbols: {
+            update: {
+              fill: [
+                { test: "length(domain('color')) == 1", value: "transparent" },
+                { scale: "color", field: "value" },
+              ],
+            },
+          },
+          labels: {
+            interactive: true,
+            update: {
+              fill: [
+                { test: "length(domain('color')) == 1", value: "transparent" },
+                { value: "black" },
+              ],
+            },
+          },
+        },
+      },
+    ],
+    ...(title && {
+      title: {
+        text: title,
+      },
+    }),
+  };
+
+  return spec;
+}

packages/components/src/lib/distributionUtils.ts

@@ -0,0 +1,5 @@
+import { SqShape } from "@quri/squiggle-lang";
+
+export const hasMassBelowZero = (shape: SqShape) =>
+  shape.continuous.some((x) => x.x <= 0) ||
+  shape.discrete.some((x) => x.x <= 0);

packages/components/src/lib/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useMaybeControlledValue } from "./useMaybeControlledValue";
+export { useSquiggle } from "./useSquiggle";
+export { useRunnerState } from "./useRunnerState";

packages/components/src/lib/hooks/useMaybeControlledValue.ts

@@ -0,0 +1,22 @@
+import { useState } from "react";
+
+type ControlledValueArgs<T> = {
+  value?: T;
+  defaultValue: T;
+  onChange?: (x: T) => void;
+};
+
+export function useMaybeControlledValue<T>(
+  args: ControlledValueArgs<T>
+): [T, (x: T) => void] {
+  let [uncontrolledValue, setUncontrolledValue] = useState(args.defaultValue);
+  let value = args.value ?? uncontrolledValue;
+  let onChange = (newValue: T) => {
+    if (args.value === undefined) {
+      // uncontrolled mode
+      setUncontrolledValue(newValue);
+    }
+    args.onChange?.(newValue);
+  };
+  return [value, onChange];
+}

packages/components/src/lib/hooks/useRunnerState.ts

@@ -0,0 +1,100 @@
+import { useLayoutEffect, useReducer } from "react";
+
+type State = {
+  autorunMode: boolean;
+  renderedCode: string;
+  // "prepared" is for rendering a spinner; "run" for executing squiggle code; then it gets back to "none" on the next render
+  runningState: "none" | "prepared" | "run";
+  executionId: number;
+};
+
+const buildInitialState = (code: string): State => ({
+  autorunMode: true,
+  renderedCode: "",
+  runningState: "none",
+  executionId: 1,
+});
+
+type Action =
+  | {
+      type: "SET_AUTORUN_MODE";
+      value: boolean;
+      code: string;
+    }
+  | {
+      type: "PREPARE_RUN";
+    }
+  | {
+      type: "RUN";
+      code: string;
+    }
+  | {
+      type: "STOP_RUN";
+    };
+
+const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "SET_AUTORUN_MODE":
+      return {
+        ...state,
+        autorunMode: action.value,
+      };
+    case "PREPARE_RUN":
+      return {
+        ...state,
+        runningState: "prepared",
+      };
+    case "RUN":
+      return {
+        ...state,
+        runningState: "run",
+        renderedCode: action.code,
+        executionId: state.executionId + 1,
+      };
+    case "STOP_RUN":
+      return {
+        ...state,
+        runningState: "none",
+      };
+  }
+};
+
+export const useRunnerState = (code: string) => {
+  const [state, dispatch] = useReducer(reducer, buildInitialState(code));
+
+  useLayoutEffect(() => {
+    if (state.runningState === "prepared") {
+      // this is necessary for async playground loading - otherwise it executes the code synchronously on the initial load
+      // (it's surprising that this is necessary, but empirically it _is_ necessary, both with `useEffect` and `useLayoutEffect`)
+      setTimeout(() => {
+        dispatch({ type: "RUN", code });
+      }, 0);
+    } else if (state.runningState === "run") {
+      dispatch({ type: "STOP_RUN" });
+    }
+  }, [state.runningState, code]);
+
+  const run = () => {
+    // The rest will be handled by dispatches above on following renders, but we need to update the spinner first.
+    dispatch({ type: "PREPARE_RUN" });
+  };
+
+  if (
+    state.autorunMode &&
+    state.renderedCode !== code &&
+    state.runningState === "none"
+  ) {
+    run();
+  }
+
+  return {
+    run,
+    autorunMode: state.autorunMode,
+    renderedCode: state.renderedCode,
+    isRunning: state.runningState !== "none",
+    executionId: state.executionId,
+    setAutorunMode: (newValue: boolean) => {
+      dispatch({ type: "SET_AUTORUN_MODE", value: newValue, code });
+    },
+  };
+};

packages/components/src/lib/hooks/useSquiggle.ts

@@ -0,0 +1,97 @@
+import {
+  result,
+  SqError,
+  SqProject,
+  SqRecord,
+  SqValue,
+  environment,
+} from "@quri/squiggle-lang";
+import { useEffect, useMemo } from "react";
+import { JsImports, jsImportsToSquiggleCode } from "../jsImports";
+import * as uuid from "uuid";
+
+type SquiggleArgs = {
+  environment?: environment;
+  code: string;
+  executionId?: number;
+  jsImports?: JsImports;
+  project?: SqProject;
+  continues?: string[];
+  onChange?: (expr: SqValue | undefined, sourceName: string) => void;
+};
+
+export type ResultAndBindings = {
+  result: result<SqValue, SqError>;
+  bindings: SqRecord;
+};
+
+const importSourceName = (sourceName: string) => "imports-" + sourceName;
+const defaultContinues = [];
+
+export const useSquiggle = (args: SquiggleArgs): ResultAndBindings => {
+  const project = useMemo(() => {
+    if (args.project) {
+      return args.project;
+    } else {
+      const p = SqProject.create();
+      if (args.environment) {
+        p.setEnvironment(args.environment);
+      }
+      return p;
+    }
+  }, [args.project, args.environment]);
+
+  const sourceName = useMemo(() => uuid.v4(), []);
+
+  const env = project.getEnvironment();
+  const continues = args.continues || defaultContinues;
+
+  const result = useMemo(
+    () => {
+      project.setSource(sourceName, args.code);
+      let fullContinues = continues;
+      if (args.jsImports && Object.keys(args.jsImports).length) {
+        const importsSource = jsImportsToSquiggleCode(args.jsImports);
+        project.setSource(importSourceName(sourceName), importsSource);
+        fullContinues = continues.concat(importSourceName(sourceName));
+      }
+      project.setContinues(sourceName, fullContinues);
+      project.run(sourceName);
+      const result = project.getResult(sourceName);
+      const bindings = project.getBindings(sourceName);
+      return { result, bindings };
+    },
+    // This complains about executionId not being used inside the function body.
+    // This is on purpose, as executionId simply allows you to run the squiggle
+    // code again
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      args.code,
+      args.jsImports,
+      args.executionId,
+      sourceName,
+      continues,
+      project,
+      env,
+    ]
+  );
+
+  const { onChange } = args;
+
+  useEffect(() => {
+    onChange?.(
+      result.result.tag === "Ok" ? result.result.value : undefined,
+      sourceName
+    );
+  }, [result, onChange, sourceName]);
+
+  useEffect(() => {
+    return () => {
+      project.removeSource(sourceName);
+      if (project.getSource(importSourceName(sourceName)))
+        project.removeSource(importSourceName(sourceName));
+    };
+  }, [project, sourceName]);
+
+  return result;
+};

packages/components/src/lib/jsImports.ts

@@ -0,0 +1,51 @@
+type JsImportsValue =
+  | number
+  | string
+  | JsImportsValue[]
+  | {
+      [k: string]: JsImportsValue;
+    };
+
+export type JsImports = {
+  [k: string]: JsImportsValue;
+};
+
+const quote = (arg: string) => `"${arg.replace(new RegExp('"', "g"), '\\"')}"`;
+
+const jsImportsValueToSquiggleCode = (v: JsImportsValue): string => {
+  if (typeof v === "number") {
+    return String(v);
+  } else if (typeof v === "string") {
+    return quote(v);
+  } else if (v instanceof Array) {
+    return "[" + v.map((x) => jsImportsValueToSquiggleCode(x)) + "]";
+  } else {
+    if (Object.keys(v).length) {
+      return (
+        "{" +
+        Object.entries(v)
+          .map(([k, v]) => `${quote(k)}:${jsImportsValueToSquiggleCode(v)},`)
+          .join("") +
+        "}"
+      );
+    } else {
+      return "0"; // squiggle doesn't support empty `{}`
+    }
+  }
+};
+
+export const jsImportsToSquiggleCode = (v: JsImports) => {
+  const validId = new RegExp("[a-zA-Z][[a-zA-Z0-9]*");
+  let result = Object.entries(v)
+    .map(([k, v]) => {
+      if (!k.match(validId)) {
+        return ""; // skipping without warnings; can be improved
+      }
+      return `$${k} = ${jsImportsValueToSquiggleCode(v)}\n`;
+    })
+    .join("");
+  if (!result) {
+    result = "$__no_valid_imports__ = 1"; // without this generated squiggle code can be invalid
+  }
+  return result;
+};

packages/components/src/lib/plotParser.ts

@@ -0,0 +1,83 @@
+import * as yup from "yup";
+import {
+  SqValue,
+  SqValueTag,
+  SqDistribution,
+  result,
+  SqRecord,
+} from "@quri/squiggle-lang";
+
+export type LabeledDistribution = {
+  name: string;
+  distribution: SqDistribution;
+  color?: string;
+};
+
+export type Plot = {
+  distributions: LabeledDistribution[];
+};
+
+function error<a, b>(err: b): result<a, b> {
+  return { tag: "Error", value: err };
+}
+
+function ok<a, b>(x: a): result<a, b> {
+  return { tag: "Ok", value: x };
+}
+
+const schema = yup
+  .object()
+  .noUnknown()
+  .strict()
+  .shape({
+    distributions: yup
+      .array()
+      .required()
+      .of(
+        yup.object().required().shape({
+          name: yup.string().required(),
+          distribution: yup.mixed().required(),
+        })
+      ),
+  });
+
+type JsonObject =
+  | string
+  | { [key: string]: JsonObject }
+  | JsonObject[]
+  | SqDistribution;
+
+function toJson(val: SqValue): JsonObject {
+  if (val.tag === SqValueTag.String) {
+    return val.value;
+  } else if (val.tag === SqValueTag.Record) {
+    return toJsonRecord(val.value);
+  } else if (val.tag === SqValueTag.Array) {
+    return val.value.getValues().map(toJson);
+  } else if (val.tag === SqValueTag.Distribution) {
+    return val.value;
+  } else {
+    throw new Error("Could not parse object of type " + val.tag);
+  }
+}
+
+function toJsonRecord(val: SqRecord): JsonObject {
+  let recordObject: JsonObject = {};
+  val.entries().forEach(([key, value]) => (recordObject[key] = toJson(value)));
+  return recordObject;
+}
+
+export function parsePlot(record: SqRecord): result<Plot, string> {
+  try {
+    const plotRecord = schema.validateSync(toJsonRecord(record));
+    if (plotRecord.distributions) {
+      return ok({ distributions: plotRecord.distributions.map((x) => x) });
+    } else {
+      // I have no idea why yup's typings thinks this is possible
+      return error("no distributions field. Should never get here");
+    }
+  } catch (e) {
+    const message = e instanceof Error ? e.message : "Unknown error";
+    return error(message);
+  }
+}

packages/components/src/lib/utility.ts

@@ -0,0 +1,53 @@
+import { result, resultMap, SqValueTag } from "@quri/squiggle-lang";
+import { ResultAndBindings } from "./hooks/useSquiggle";
+
+export function flattenResult<a, b>(x: result<a, b>[]): result<a[], b> {
+  if (x.length === 0) {
+    return { tag: "Ok", value: [] };
+  } else {
+    if (x[0].tag === "Error") {
+      return x[0];
+    } else {
+      let rest = flattenResult(x.splice(1));
+      if (rest.tag === "Error") {
+        return rest;
+      } else {
+        return { tag: "Ok", value: [x[0].value].concat(rest.value) };
+      }
+    }
+  }
+}
+
+export function resultBind<a, b, c>(
+  x: result<a, b>,
+  fn: (y: a) => result<c, b>
+): result<c, b> {
+  if (x.tag === "Ok") {
+    return fn(x.value);
+  } else {
+    return x;
+  }
+}
+
+export function all(arr: boolean[]): boolean {
+  return arr.reduce((x, y) => x && y, true);
+}
+
+export function some(arr: boolean[]): boolean {
+  return arr.reduce((x, y) => x || y, false);
+}
+
+export function getValueToRender({ result, bindings }: ResultAndBindings) {
+  return resultMap(result, (value) =>
+    value.tag === SqValueTag.Void ? bindings.asValue() : value
+  );
+}
+
+export function getErrorLocations(result: ResultAndBindings["result"]) {
+  if (result.tag === "Error") {
+    const location = result.value.location();
+    return location ? [location] : [];
+  } else {
+    return [];
+  }
+}

packages/components/src/stories/Introduction.stories.mdx

@@ -0,0 +1,6 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Squiggle/Introduction" />
+
+This is the component library for Squiggle. These are React
+components, and can be used in any application that you see fit.

packages/components/src/stories/NumberShower.stories.mdx

@@ -0,0 +1,60 @@
+import { NumberShower } from "../components/NumberShower";
+import { Canvas, Meta, Story, Props } from "@storybook/addon-docs";
+
+<Meta title="Squiggle/NumberShower" component={NumberShower} />
+
+# Number Shower
+
+The number shower is a simple component to display a number.
+
+It uses the symbols "K", "M", "B", and "T", to represent thousands, millions, billions, and trillions. Outside of that range, it uses scientific notation.
+
+<Canvas>
+  <Story
+    name="Ten Thousand"
+    args={{
+      number: 10000,
+      precision: 2,
+    }}
+  >
+    {(args) => <NumberShower {...args} />}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Ten Billion"
+    args={{
+      number: 10000000000,
+      precision: 2,
+    }}
+  >
+    {(args) => <NumberShower {...args} />}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="1.2*10^15"
+    args={{
+      number: 1200000000000000,
+      precision: 2,
+    }}
+  >
+    {(args) => <NumberShower {...args} />}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="1.35*10^-13"
+    args={{
+      number: 0.000000000000135,
+      precision: 2,
+    }}
+  >
+    {(args) => <NumberShower {...args} />}
+  </Story>
+</Canvas>
+
+<Props of={NumberShower} />

packages/components/src/stories/SquiggleChart.stories.mdx

@@ -0,0 +1,254 @@
+import { SquiggleChart } from "../components/SquiggleChart";
+import { Canvas, Meta, Story, Props } from "@storybook/addon-docs";
+
+<Meta title="Squiggle/SquiggleChart" component={SquiggleChart} />
+
+export const Template = (props) => <SquiggleChart {...props} />;
+/* 
+  We have to hardcode a width here, because otherwise some interaction with
+  Storybook creates an infinite loop with the internal width
+*/
+const width = 600;
+
+# Squiggle Chart
+
+Squiggle chart evaluates squiggle expressions, and then returns a graph representing
+the result of a squiggle expression.
+
+A squiggle expression can have three different types of returns. A distribution,
+a constant, and a function.
+
+A distribution means that the result forms a probability distribution. This
+could be continuous, discrete or mixed.
+
+## Distributions
+
+### Continuous Distributions (Symbolic)
+
+<Canvas>
+  <Story
+    name="Continuous Symbolic"
+    args={{
+      code: "normal(5,2)",
+      width,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Continuous Distributions (PointSet)
+
+<Canvas>
+  <Story
+    name="Continuous Pointset"
+    args={{
+      code: "PointSet.fromDist(normal(5,2))",
+      width,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Continuous Distributions (SampleSet)
+
+<Canvas>
+  <Story
+    name="Continuous SampleSet"
+    args={{
+      code: "SampleSet.fromDist(normal(5,2))",
+      width,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Discrete Distributions
+
+<Canvas>
+  <Story
+    name="Discrete"
+    args={{
+      code: "mx(0, 1, 3, 5, 8, 10, [0.1, 0.8, 0.5, 0.3, 0.2, 0.1])",
+      width,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Date Distribution
+
+<Canvas>
+  <Story
+    name="Date Distribution"
+    args={{
+      code: "mx(1661819770311, 1661829770311, 1661839770311)",
+      width,
+      xAxisType: "dateTime",
+      width,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Mixed distributions
+
+<Canvas>
+  <Story
+    name="Mixed"
+    args={{
+      code: "mx(0, 1, 3, 5, 8, normal(8, 1), [0.1, 0.3, 0.4, 0.35, 0.2, 0.8])",
+      width,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Multiple plots
+
+<Canvas>
+  <Story
+    name="Multiple plots"
+    args={{
+      code: `
+{
+  distributions: [
+    {
+      name: "one",
+      distribution: mx(0.5, normal(0,1))
+    },
+    {
+      name: "two",
+      distribution: mx(2, normal(5, 2)),
+    }
+  ]
+}
+`,
+      width,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Constants
+
+A constant is a simple number as a result. This has special formatting rules
+to allow large and small numbers being printed cleanly.
+
+<Canvas>
+  <Story
+    name="Constant"
+    args={{
+      code: "500000000",
+      width,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Arrays
+
+<Canvas>
+  <Story
+    name="Array"
+    args={{
+      code: "[normal(5,2), normal(10,1), normal(40,2), 400000]",
+      width,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Errors
+
+<Canvas>
+  <Story
+    name="Error"
+    args={{
+      code: "f(x) = normal(",
+      width,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Booleans
+
+<Canvas>
+  <Story
+    name="Boolean"
+    args={{
+      code: "3 == 3",
+      width,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Functions (Distribution Output)
+
+<Canvas>
+  <Story
+    name="Function to Distribution"
+    args={{
+      code: "foo(t) = normal(t,2)*normal(5,3); foo",
+      width,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Functions (Number Output)
+
+<Canvas>
+  <Story
+    name="Function to Number"
+    args={{
+      code: "foo(t) = t^2; foo",
+      width,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Records
+
+<Canvas>
+  <Story
+    name="Record"
+    args={{
+      code: "{foo: 35 to 50, bar: [1,2,3]}",
+      width,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Strings
+
+<Canvas>
+  <Story
+    name="String"
+    args={{
+      code: '"Lucky day!"',
+      width,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Props of={SquiggleChart} />