From fc68a8d0694fa9dfe5077fecf88d0a39220df7e9 Mon Sep 17 00:00:00 2001
From: Sam Nolan <samnolan555@gmail.com>
Date: Fri, 24 Jun 2022 03:43:30 +0000
Subject: [PATCH 01/29] Remove observable boilerplate + refactors

---
 packages/components/package.json              |   2 -
 .../src/components/SquiggleChart.tsx          |  22 ++-
 .../src/components/SquiggleEditor.tsx         | 150 +++---------------
 .../src/components/SquigglePlayground.tsx     |  16 +-
 packages/components/src/index.ts              |  12 +-
 packages/components/src/lib/hooks.ts          |  23 +--
 .../src/stories/SquiggleEditor.stories.mdx    |   4 +-
 .../src/stories/SquigglePartial.stories.mdx   |   6 +-
 packages/website/docs/Discussions/Bugs.mdx    |   4 +-
 .../docs/Guides/DistributionCreation.mdx      |  64 ++++----
 packages/website/docs/Guides/Functions.mdx    |  58 +++----
 packages/website/docs/Guides/Language.mdx     |  12 +-
 yarn.lock                                     |   2 +-
 13 files changed, 120 insertions(+), 255 deletions(-)

diff --git a/packages/components/package.json b/packages/components/package.json
index 7c64463c..bd86a257 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -38,7 +38,6 @@
     "@types/lodash": "^4.14.182",
     "@types/node": "^18.0.0",
     "@types/react": "^18.0.9",
-    "@types/react-dom": "^18.0.5",
     "@types/styled-components": "^5.1.24",
     "@types/webpack": "^5.28.0",
     "cross-env": "^7.0.3",
@@ -47,7 +46,6 @@
     "postcss-import": "^14.1.0",
     "postcss-loader": "^7.0.0",
     "react": "^18.1.0",
-    "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
     "style-loader": "^3.3.1",
     "tailwindcss": "^3.1.3",
diff --git a/packages/components/src/components/SquiggleChart.tsx b/packages/components/src/components/SquiggleChart.tsx
index f7bb7ace..3e712396 100644
--- a/packages/components/src/components/SquiggleChart.tsx
+++ b/packages/components/src/components/SquiggleChart.tsx
@@ -8,7 +8,6 @@ import {
   defaultBindings,
   defaultEnvironment,
 } from "@quri/squiggle-lang";
-import { FunctionChartSettings } from "./FunctionChart";
 import { useSquiggle } from "../lib/hooks";
 import { SquiggleErrorAlert } from "./SquiggleErrorAlert";
 import { SquiggleItem } from "./SquiggleItem";
@@ -20,8 +19,12 @@ export interface SquiggleChartProps {
   sampleCount?: number;
   /** The amount of points returned to draw the distribution */
   environment?: environment;
-  /** If the result is a function, where the function starts, ends and the amount of stops */
-  chartSettings?: FunctionChartSettings;
+  /** 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: squiggleExpression | undefined): void;
   /** CSS width of the element */
@@ -44,7 +47,6 @@ export interface SquiggleChartProps {
 }
 
 const defaultOnChange = () => {};
-const defaultChartSettings = { start: 0, stop: 10, count: 20 };
 
 export const SquiggleChart: React.FC<SquiggleChartProps> = ({
   squiggleString = "",
@@ -59,9 +61,11 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
   showControls = false,
   logX = false,
   expY = false,
-  chartSettings = defaultChartSettings,
+  diagramStart = 0,
+  diagramStop = 10,
+  diagramCount = 100,
 }) => {
-  const { result } = useSquiggle({
+  const result = useSquiggle({
     code: squiggleString,
     bindings,
     environment,
@@ -80,6 +84,12 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
     expY,
   };
 
+  let chartSettings = {
+    start: diagramStart,
+    stop: diagramStop,
+    count: diagramCount,
+  };
+
   return (
     <SquiggleItem
       expression={result.value}
diff --git a/packages/components/src/components/SquiggleEditor.tsx b/packages/components/src/components/SquiggleEditor.tsx
index cd51b7a0..3d0e0db5 100644
--- a/packages/components/src/components/SquiggleEditor.tsx
+++ b/packages/components/src/components/SquiggleEditor.tsx
@@ -1,18 +1,11 @@
 import React, { useState } from "react";
-import * as ReactDOM from "react-dom";
 import { CodeEditor } from "./CodeEditor";
-import {
-  squiggleExpression,
-  environment,
-  bindings,
-  jsImports,
-  defaultEnvironment,
-} from "@quri/squiggle-lang";
+import { environment, bindings, jsImports } from "@quri/squiggle-lang";
 import { defaultImports, defaultBindings } from "@quri/squiggle-lang";
 import { SquiggleContainer } from "./SquiggleContainer";
-import { useSquiggle, useSquigglePartial } from "../lib/hooks";
+import { SquiggleChart, SquiggleChartProps } from "./SquiggleChart";
+import { useSquigglePartial } from "../lib/hooks";
 import { SquiggleErrorAlert } from "./SquiggleErrorAlert";
-import { SquiggleItem } from "./SquiggleItem";
 
 const WrappedCodeEditor: React.FC<{
   code: string;
@@ -29,111 +22,25 @@ const WrappedCodeEditor: React.FC<{
   </div>
 );
 
-export interface SquiggleEditorProps {
-  /** The input string for squiggle */
-  initialSquiggleString?: string;
-  /** The width of the element */
-  width?: number;
-  /** If the result is a function, where the function starts */
-  diagramStart?: number;
-  /** If the result is a function, where the function ends */
-  diagramStop?: number;
-  /** If the result is a function, how many points along the function it samples */
-  diagramCount?: number;
-  /** When the environment changes. Used again for notebook magic */
-  onChange?(expr: squiggleExpression | undefined): void;
-  /** Previous variable declarations */
-  bindings?: bindings;
-  /** If the output requires monte carlo sampling, the amount of samples */
-  environment?: environment;
-  /** JS Imports */
-  jsImports?: jsImports;
-  /** Whether to show detail about types of the returns, default false */
-  showTypes?: boolean;
-  /** Whether to give users access to graph controls */
-  showControls?: boolean;
-  /** Whether to show a summary table */
-  showSummary?: boolean;
-  /** Whether to log the x coordinate on distribution charts */
-  logX?: boolean;
-  /** Whether to exp the y coordinate on distribution charts */
-  expY?: boolean;
-}
+export type SquiggleEditorProps = SquiggleChartProps;
 
-export const SquiggleEditor: React.FC<SquiggleEditorProps> = ({
-  initialSquiggleString = "",
-  width,
-  diagramStart = 0,
-  diagramStop = 10,
-  diagramCount = 20,
-  onChange,
-  bindings = defaultBindings,
-  environment,
-  jsImports = defaultImports,
-  showTypes = false,
-  showControls = false,
-  showSummary = false,
-  logX = false,
-  expY = false,
-}: SquiggleEditorProps) => {
-  const [code, setCode] = useState(initialSquiggleString);
-  React.useEffect(
-    () => setCode(initialSquiggleString),
-    [initialSquiggleString]
-  );
-
-  const { result, observableRef } = useSquiggle({
-    code,
-    bindings,
-    environment,
-    jsImports,
-    onChange,
-  });
-
-  const chartSettings = {
-    start: diagramStart,
-    stop: diagramStop,
-    count: diagramCount,
-  };
-
-  const distributionPlotSettings = {
-    showControls,
-    showSummary,
-    logX,
-    expY,
-  };
+export const SquiggleEditor: React.FC<SquiggleEditorProps> = (props) => {
+  const { squiggleString = "" } = props;
+  const [code, setCode] = useState(squiggleString);
+  React.useEffect(() => setCode(squiggleString), [squiggleString]);
 
+  let chartProps = { ...props, squiggleString: code };
   return (
-    <div ref={observableRef}>
-      <SquiggleContainer>
-        <WrappedCodeEditor code={code} setCode={setCode} />
-        {result.tag === "Ok" ? (
-          <SquiggleItem
-            expression={result.value}
-            width={width}
-            height={200}
-            distributionPlotSettings={distributionPlotSettings}
-            showTypes={showTypes}
-            chartSettings={chartSettings}
-            environment={environment ?? defaultEnvironment}
-          />
-        ) : (
-          <SquiggleErrorAlert error={result.value} />
-        )}
-      </SquiggleContainer>
-    </div>
+    <SquiggleContainer>
+      <WrappedCodeEditor code={code} setCode={setCode} />
+      <SquiggleChart {...chartProps} />
+    </SquiggleContainer>
   );
 };
 
-export function renderSquiggleEditorToDom(props: SquiggleEditorProps) {
-  const parent = document.createElement("div");
-  ReactDOM.render(<SquiggleEditor {...props} />, parent);
-  return parent;
-}
-
 export interface SquigglePartialProps {
   /** The input string for squiggle */
-  initialSquiggleString?: string;
+  squiggleString?: string;
   /** when the environment changes. Used again for notebook magic*/
   onChange?(expr: bindings | undefined): void;
   /** Previously declared variables */
@@ -145,19 +52,16 @@ export interface SquigglePartialProps {
 }
 
 export const SquigglePartial: React.FC<SquigglePartialProps> = ({
-  initialSquiggleString = "",
+  squiggleString = "",
   onChange,
   bindings = defaultBindings,
   environment,
   jsImports = defaultImports,
 }: SquigglePartialProps) => {
-  const [code, setCode] = useState(initialSquiggleString);
-  React.useEffect(
-    () => setCode(initialSquiggleString),
-    [initialSquiggleString]
-  );
+  const [code, setCode] = useState(squiggleString);
+  React.useEffect(() => setCode(squiggleString), [squiggleString]);
 
-  const { result, observableRef } = useSquigglePartial({
+  const result = useSquigglePartial({
     code,
     bindings,
     environment,
@@ -166,19 +70,9 @@ export const SquigglePartial: React.FC<SquigglePartialProps> = ({
   });
 
   return (
-    <div ref={observableRef}>
-      <SquiggleContainer>
-        <WrappedCodeEditor code={code} setCode={setCode} />
-        {result.tag !== "Ok" ? (
-          <SquiggleErrorAlert error={result.value} />
-        ) : null}
-      </SquiggleContainer>
-    </div>
+    <SquiggleContainer>
+      <WrappedCodeEditor code={code} setCode={setCode} />
+      {result.tag !== "Ok" ? <SquiggleErrorAlert error={result.value} /> : null}
+    </SquiggleContainer>
   );
 };
-
-export function renderSquigglePartialToDom(props: SquigglePartialProps) {
-  const parent = document.createElement("div");
-  ReactDOM.render(<SquigglePartial {...props} />, parent);
-  return parent;
-}
diff --git a/packages/components/src/components/SquigglePlayground.tsx b/packages/components/src/components/SquigglePlayground.tsx
index 2cd755b2..ce59b5a4 100644
--- a/packages/components/src/components/SquigglePlayground.tsx
+++ b/packages/components/src/components/SquigglePlayground.tsx
@@ -1,5 +1,4 @@
 import React, { FC, Fragment, useState, useEffect } from "react";
-import ReactDOM from "react-dom";
 import { Path, useForm, UseFormRegister, useWatch } from "react-hook-form";
 import * as yup from "yup";
 import { yupResolver } from "@hookform/resolvers/yup";
@@ -250,11 +249,6 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
     onSettingsChange?.(vars);
   }, [vars, onSettingsChange]);
 
-  const chartSettings = {
-    start: Number(vars.diagramStart),
-    stop: Number(vars.diagramStop),
-    count: Number(vars.diagramCount),
-  };
   const env: environment = {
     sampleCount: Number(vars.sampleCount),
     xyPointLength: Number(vars.xyPointLength),
@@ -425,7 +419,9 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
     <SquiggleChart
       squiggleString={code}
       environment={env}
-      chartSettings={chartSettings}
+      diagramStart={Number(vars.diagramStart)}
+      diagramStop={Number(vars.diagramStop)}
+      diagramCount={Number(vars.diagramCount)}
       height={vars.chartHeight}
       showTypes={vars.showTypes}
       showControls={vars.showControls}
@@ -494,9 +490,3 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
     </SquiggleContainer>
   );
 };
-
-export function renderSquigglePlaygroundToDom(props: PlaygroundProps) {
-  const parent = document.createElement("div");
-  ReactDOM.render(<SquigglePlayground {...props} />, parent);
-  return parent;
-}
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index de0b6dff..ce6e107c 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -1,14 +1,6 @@
 export { SquiggleChart } from "./components/SquiggleChart";
-export {
-  SquiggleEditor,
-  SquigglePartial,
-  renderSquiggleEditorToDom,
-  renderSquigglePartialToDom,
-} from "./components/SquiggleEditor";
-export {
-  SquigglePlayground,
-  renderSquigglePlaygroundToDom,
-} from "./components/SquigglePlayground";
+export { SquiggleEditor, SquigglePartial } from "./components/SquiggleEditor";
+export { SquigglePlayground } from "./components/SquigglePlayground";
 export { SquiggleContainer } from "./components/SquiggleContainer";
 
 export { mergeBindings } from "@quri/squiggle-lang";
diff --git a/packages/components/src/lib/hooks.ts b/packages/components/src/lib/hooks.ts
index 42db01ce..03b8c69d 100644
--- a/packages/components/src/lib/hooks.ts
+++ b/packages/components/src/lib/hooks.ts
@@ -5,7 +5,7 @@ import {
   run,
   runPartial,
 } from "@quri/squiggle-lang";
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo } from "react";
 
 type SquiggleArgs<T extends ReturnType<typeof run | typeof runPartial>> = {
   code: string;
@@ -19,37 +19,18 @@ const useSquiggleAny = <T extends ReturnType<typeof run | typeof runPartial>>(
   args: SquiggleArgs<T>,
   f: (...args: Parameters<typeof run>) => T
 ) => {
-  //  We're using observable, where div elements can have a `value` property:
-  // https://observablehq.com/@observablehq/introduction-to-views
-  //
-  //  This is here to get the 'viewof' part of:
-  //  viewof env = cell('normal(0,1)')
-  //  to work
-  const ref = useRef<
-    HTMLDivElement & { value?: Extract<T, { tag: "Ok" }>["value"] }
-  >(null);
   const result: T = useMemo<T>(
     () => f(args.code, args.bindings, args.environment, args.jsImports),
     [f, args.code, args.bindings, args.environment, args.jsImports]
   );
 
-  useEffect(() => {
-    if (!ref.current) return;
-    ref.current.value = result.tag === "Ok" ? result.value : undefined;
-
-    ref.current.dispatchEvent(new CustomEvent("input"));
-  }, [result]);
-
   const { onChange } = args;
 
   useEffect(() => {
     onChange?.(result.tag === "Ok" ? result.value : undefined);
   }, [result, onChange]);
 
-  return {
-    result, // squiggleExpression or externalBindings
-    observableRef: ref, // can be passed to outermost <div> if you want to use your component as an observablehq's view
-  };
+  return result;
 };
 
 export const useSquigglePartial = (
diff --git a/packages/components/src/stories/SquiggleEditor.stories.mdx b/packages/components/src/stories/SquiggleEditor.stories.mdx
index 3ae37bb3..7e8f7e66 100644
--- a/packages/components/src/stories/SquiggleEditor.stories.mdx
+++ b/packages/components/src/stories/SquiggleEditor.stories.mdx
@@ -14,7 +14,7 @@ the distribution.
   <Story
     name="Normal"
     args={{
-      initialSquiggleString: "normal(5,2)",
+      squiggleString: "normal(5,2)",
     }}
   >
     {Template.bind({})}
@@ -27,7 +27,7 @@ You can also name variables like so:
   <Story
     name="Variables"
     args={{
-      initialSquiggleString: "x = 2\nnormal(x,2)",
+      squiggleString: "x = 2\nnormal(x,2)",
     }}
   >
     {Template.bind({})}
diff --git a/packages/components/src/stories/SquigglePartial.stories.mdx b/packages/components/src/stories/SquigglePartial.stories.mdx
index b4446402..c4f4814a 100644
--- a/packages/components/src/stories/SquigglePartial.stories.mdx
+++ b/packages/components/src/stories/SquigglePartial.stories.mdx
@@ -15,7 +15,7 @@ instead returns bindings that can be used by further Squiggle Editors.
   <Story
     name="Standalone"
     args={{
-      initialSquiggleString: "x = normal(5,2)",
+      squiggleString: "x = normal(5,2)",
     }}
   >
     {Template.bind({})}
@@ -36,12 +36,12 @@ instead returns bindings that can be used by further Squiggle Editors.
         <>
           <SquigglePartial
             {...props}
-            initialSquiggleString={props.initialPartialString}
+            squiggleString={props.initialPartialString}
             onChange={setBindings}
           />
           <SquiggleEditor
             {...props}
-            initialSquiggleString={props.initialEditorString}
+            squiggleString={props.initialEditorString}
             bindings={bindings}
           />
         </>
diff --git a/packages/website/docs/Discussions/Bugs.mdx b/packages/website/docs/Discussions/Bugs.mdx
index a39223a9..2c077eb0 100644
--- a/packages/website/docs/Discussions/Bugs.mdx
+++ b/packages/website/docs/Discussions/Bugs.mdx
@@ -16,7 +16,7 @@ If you take the pointwise mixture of two distributions with very different means
 In the following case, the mean of the mixture should be equal to the sum of the means of the parts. These are shown as the first two displayed variables. These variables diverge as the underlying distributions change.
 
 <SquiggleEditor
-  initialSquiggleString={`dist1 = {value: normal(1,1), weight: 1}
+  squiggleString={`dist1 = {value: normal(1,1), weight: 1}
 dist2 = {value: normal(100000000000,1), weight: 1}
 totalWeight = dist1.weight + dist2.weight
 distMixture = mixture(dist1.value, dist2.value, [dist1.weight, dist2.weight])
@@ -30,7 +30,7 @@ separateMeansCombined = (mean(dist1.value) * (dist1.weight) +  mean(dist2.value)
 The means of sample set distributions can vary dramatically, especially as the numbers get high.
 
 <SquiggleEditor
-  initialSquiggleString={`symbolicDist = 5 to 50333333
+  squiggleString={`symbolicDist = 5 to 50333333
 sampleSetDist = toSampleSet(symbolicDist)
 [mean(symbolicDist), mean(sampleSetDist), symbolicDist, sampleSetDist]`}
 />
diff --git a/packages/website/docs/Guides/DistributionCreation.mdx b/packages/website/docs/Guides/DistributionCreation.mdx
index 5e84b47f..8ca22294 100644
--- a/packages/website/docs/Guides/DistributionCreation.mdx
+++ b/packages/website/docs/Guides/DistributionCreation.mdx
@@ -22,22 +22,22 @@ If both values are above zero, a `lognormal` distribution is used. If not, a `no
     When <code>5 to 10</code> is entered, both numbers are positive, so it
     generates a lognormal distribution with 5th and 95th percentiles at 5 and
     10.
-    <SquiggleEditor initialSquiggleString="5 to 10" />
+    <SquiggleEditor squiggleString="5 to 10" />
   </TabItem>
   <TabItem value="ex3" label="to(5,10)">
     <code>5 to 10</code> does the same thing as <code>to(5,10)</code>.
-    <SquiggleEditor initialSquiggleString="to(5,10)" />
+    <SquiggleEditor squiggleString="to(5,10)" />
   </TabItem>
   <TabItem value="ex2" label="-5 to 5">
     When <code>-5 to 5</code> is entered, there's negative values, so it
     generates a normal distribution. This has 5th and 95th percentiles at 5 and
     10.
-    <SquiggleEditor initialSquiggleString="-5 to -3" />
+    <SquiggleEditor squiggleString="-5 to -3" />
   </TabItem>
   <TabItem value="ex4" label="1 to 10000">
     It's very easy to generate distributions with very long tails. If this
     happens, you can click the "log x scale" box to view this using a log scale.
-    <SquiggleEditor initialSquiggleString="1 to 10000" />
+    <SquiggleEditor squiggleString="1 to 10000" />
   </TabItem>
 </Tabs>
 
@@ -76,16 +76,16 @@ The `mixture` mixes combines multiple distributions to create a mixture. You can
 
 <Tabs>
   <TabItem value="ex1" label="Simple" default>
-    <SquiggleEditor initialSquiggleString="mixture(1 to 2, 5 to 8, 9 to 10)" />
+    <SquiggleEditor squiggleString="mixture(1 to 2, 5 to 8, 9 to 10)" />
   </TabItem>
   <TabItem value="ex2" label="With Weights">
-    <SquiggleEditor initialSquiggleString="mixture(1 to 2, 5 to 8, 9 to 10, [0.1, 0.1, 0.8])" />
+    <SquiggleEditor squiggleString="mixture(1 to 2, 5 to 8, 9 to 10, [0.1, 0.1, 0.8])" />
   </TabItem>
   <TabItem value="ex3" label="With Continuous and Discrete Inputs">
-    <SquiggleEditor initialSquiggleString="mixture(1 to 5, 8 to 10, 1, 3, 20)" />
+    <SquiggleEditor squiggleString="mixture(1 to 5, 8 to 10, 1, 3, 20)" />
   </TabItem>
   <TabItem value="ex4" label="Array of Distributions Input">
-    <SquiggleEditor initialSquiggleString="mx([1 to 2, exponential(1)], [1,1])" />
+    <SquiggleEditor squiggleString="mx([1 to 2, exponential(1)], [1,1])" />
   </TabItem>
 </Tabs>
 
@@ -111,7 +111,7 @@ The `mixture` mixes combines multiple distributions to create a mixture. You can
     In this case, I have a 20% chance of spending 0 time with it. I might estimate my hours with,
   </p>
   <SquiggleEditor
-    initialSquiggleString={`hours_the_project_will_take = 5 to 20
+    squiggleString={`hours_the_project_will_take = 5 to 20
 chance_of_doing_anything = 0.8
 mx(hours_the_project_will_take, 0, [chance_of_doing_anything, 1 - chance_of_doing_anything])`}
   />
@@ -125,7 +125,7 @@ mx(hours_the_project_will_take, 0, [chance_of_doing_anything, 1 - chance_of_doin
   very wide, just in case they were dramatically off for some weird reason.
   </p>
 <SquiggleEditor
-  initialSquiggleString={`forecast = 3 to 30
+  squiggleString={`forecast = 3 to 30
 chance_completely_wrong = 0.05
 forecast_if_completely_wrong = -100 to 200
 mx(forecast, forecast_if_completely_wrong, [1-chance_completely_wrong, chance_completely_wrong])`}
@@ -141,10 +141,10 @@ Creates a [normal distribution](https://en.wikipedia.org/wiki/Normal_distributio
 
 <Tabs>
   <TabItem value="ex1" label="normal(5,1)" default>
-    <SquiggleEditor initialSquiggleString="normal(5, 1)" />
+    <SquiggleEditor squiggleString="normal(5, 1)" />
   </TabItem>
   <TabItem value="ex2" label="normal(100000000000, 100000000000)">
-    <SquiggleEditor initialSquiggleString="normal(100000000000, 100000000000)" />
+    <SquiggleEditor squiggleString="normal(100000000000, 100000000000)" />
   </TabItem>
 </Tabs>
 
@@ -165,7 +165,7 @@ Creates a [log-normal distribution](https://en.wikipedia.org/wiki/Log-normal_dis
 you take the log of our lognormal distribution. They can be difficult to directly reason about.
 Because of this complexity, we recommend typically using the <a href="#to">to</a> syntax instead of estimating `mu` and `sigma` directly.
 
-<SquiggleEditor initialSquiggleString="lognormal(0, 0.7)" />
+<SquiggleEditor squiggleString="lognormal(0, 0.7)" />
 
 ### Arguments
 
@@ -185,7 +185,7 @@ Because of this complexity, we recommend typically using the <a href="#to">to</a
     are identical:
   </p>
   <SquiggleEditor
-    initialSquiggleString={`normalMean = 10
+    squiggleString={`normalMean = 10
 normalStdDev = 2
 logOfLognormal = log(lognormal(normalMean, normalStdDev))
 [logOfLognormal, normal(normalMean, normalStdDev)]`}
@@ -198,7 +198,7 @@ logOfLognormal = log(lognormal(normalMean, normalStdDev))
 
 Creates a [uniform distribution](<https://en.wikipedia.org/wiki/Uniform_distribution_(continuous)>) with the given low and high values.
 
-<SquiggleEditor initialSquiggleString="uniform(3,7)" />
+<SquiggleEditor squiggleString="uniform(3,7)" />
 
 ### Arguments
 
@@ -236,19 +236,19 @@ with values at 1 and 2. Therefore, this is the same as `mixture(pointMass(1),poi
 
 <Tabs>
   <TabItem value="ex1" label="pointMass(3)" default>
-    <SquiggleEditor initialSquiggleString="pointMass(3)" />
+    <SquiggleEditor squiggleString="pointMass(3)" />
   </TabItem>
   <TabItem value="ex3" label="mixture(1,3,5)">
-    <SquiggleEditor initialSquiggleString="mixture(1,3,5)" />
+    <SquiggleEditor squiggleString="mixture(1,3,5)" />
   </TabItem>
   <TabItem value="ex2" label="normal(5,2) * 6">
-    <SquiggleEditor initialSquiggleString="normal(5,2) * 6" />
+    <SquiggleEditor squiggleString="normal(5,2) * 6" />
   </TabItem>
   <TabItem value="ex4" label="dotAdd(normal(5,2), 6)">
-    <SquiggleEditor initialSquiggleString="dotAdd(normal(5,2), 6)" />
+    <SquiggleEditor squiggleString="dotAdd(normal(5,2), 6)" />
   </TabItem>
   <TabItem value="ex5" label="dotMultiply(normal(5,2), 6)">
-    <SquiggleEditor initialSquiggleString="dotMultiply(normal(5,2), 6)" />
+    <SquiggleEditor squiggleString="dotMultiply(normal(5,2), 6)" />
   </TabItem>
 </Tabs>
 
@@ -264,19 +264,19 @@ Creates a [beta distribution](https://en.wikipedia.org/wiki/Beta_distribution) w
 
 <Tabs>
   <TabItem value="ex1" label="beta(10, 20)" default>
-    <SquiggleEditor initialSquiggleString="beta(10,20)" />
+    <SquiggleEditor squiggleString="beta(10,20)" />
   </TabItem>
   <TabItem value="ex2" label="beta(1000, 1000)">
-    <SquiggleEditor initialSquiggleString="beta(1000, 2000)" />
+    <SquiggleEditor squiggleString="beta(1000, 2000)" />
   </TabItem>
   <TabItem value="ex3" label="beta(1, 10)">
-    <SquiggleEditor initialSquiggleString="beta(1, 10)" />
+    <SquiggleEditor squiggleString="beta(1, 10)" />
   </TabItem>
   <TabItem value="ex4" label="beta(10, 1)">
-    <SquiggleEditor initialSquiggleString="beta(10, 1)" />
+    <SquiggleEditor squiggleString="beta(10, 1)" />
   </TabItem>
   <TabItem value="ex5" label="beta(0.8, 0.8)">
-    <SquiggleEditor initialSquiggleString="beta(0.8, 0.8)" />
+    <SquiggleEditor squiggleString="beta(0.8, 0.8)" />
   </TabItem>
 </Tabs>
 
@@ -295,16 +295,16 @@ Creates a [beta distribution](https://en.wikipedia.org/wiki/Beta_distribution) w
     <summary>Examples</summary>
     <Tabs>
       <TabItem value="ex1" label="beta(0.3, 0.3)" default>
-        <SquiggleEditor initialSquiggleString="beta(0.3, 0.3)" />
+        <SquiggleEditor squiggleString="beta(0.3, 0.3)" />
       </TabItem>
       <TabItem value="ex2" label="beta(0.5, 0.5)">
-        <SquiggleEditor initialSquiggleString="beta(0.5, 0.5)" />
+        <SquiggleEditor squiggleString="beta(0.5, 0.5)" />
       </TabItem>
       <TabItem value="ex3" label="beta(0.8, 0.8)">
-        <SquiggleEditor initialSquiggleString="beta(.8,.8)" />
+        <SquiggleEditor squiggleString="beta(.8,.8)" />
       </TabItem>
       <TabItem value="ex4" label="beta(0.9, 0.9)">
-        <SquiggleEditor initialSquiggleString="beta(.9,.9)" />
+        <SquiggleEditor squiggleString="beta(.9,.9)" />
       </TabItem>
     </Tabs>
   </details>
@@ -316,7 +316,7 @@ Creates a [beta distribution](https://en.wikipedia.org/wiki/Beta_distribution) w
 
 Creates an [exponential distribution](https://en.wikipedia.org/wiki/Exponential_distribution) with the given rate.
 
-<SquiggleEditor initialSquiggleString="exponential(4)" />
+<SquiggleEditor squiggleString="exponential(4)" />
 
 ### Arguments
 
@@ -334,7 +334,7 @@ Creates a [triangular distribution](https://en.wikipedia.org/wiki/Triangular_dis
 - `mode`: Number greater than `low`
 - `high`: Number greater than `mode`
 
-<SquiggleEditor initialSquiggleString="triangular(1, 2, 4)" />
+<SquiggleEditor squiggleString="triangular(1, 2, 4)" />
 
 ## FromSamples
 
@@ -342,7 +342,7 @@ Creates a [triangular distribution](https://en.wikipedia.org/wiki/Triangular_dis
 
 Creates a sample set distribution using an array of samples.
 
-<SquiggleEditor initialSquiggleString="fromSamples([1,2,3,4,6,5,5,5])" />
+<SquiggleEditor squiggleString="fromSamples([1,2,3,4,6,5,5,5])" />
 
 ### Arguments
 
diff --git a/packages/website/docs/Guides/Functions.mdx b/packages/website/docs/Guides/Functions.mdx
index be579834..a58df345 100644
--- a/packages/website/docs/Guides/Functions.mdx
+++ b/packages/website/docs/Guides/Functions.mdx
@@ -16,7 +16,7 @@ the value of one random sample chosen from the first distribution and the value
 chosen from the second distribution.
 
 <SquiggleEditor
-  initialSquiggleString={`dist1 = 1 to 10
+  squiggleString={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 + dist2`}
 />
@@ -28,7 +28,7 @@ the distribution of the value of one random sample chosen from the first distrib
 the value of one random sample chosen from the second distribution.
 
 <SquiggleEditor
-  initialSquiggleString={`dist1 = 1 to 10
+  squiggleString={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 - dist2`}
 />
@@ -40,14 +40,14 @@ the value of one random sample chosen from the first distribution times the valu
 chosen from the second distribution.
 
 <SquiggleEditor
-  initialSquiggleString={`dist1 = 1 to 10
+  squiggleString={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 * dist2`}
 />
 
 We also provide concatenation of two distributions as a syntax sugar for `*`
 
-<SquiggleEditor initialSquiggleString="(0.1 to 1) triangular(1,2,3)" />
+<SquiggleEditor squiggleString="(0.1 to 1) triangular(1,2,3)" />
 
 ### Division
 
@@ -58,7 +58,7 @@ chosen from the second distribution. If the second distribution has some values
 tends to be particularly unstable.
 
 <SquiggleEditor
-  initialSquiggleString={`dist1 = 1 to 10
+  squiggleString={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 / dist2`}
 />
@@ -69,12 +69,12 @@ A projection over a contracted x-axis. The exponentiation operation represents t
 the exponentiation of the value of one random sample chosen from the first distribution to the power of
 the value one random sample chosen from the second distribution.
 
-<SquiggleEditor initialSquiggleString={`(0.1 to 1) ^ beta(2, 3)`} />
+<SquiggleEditor squiggleString={`(0.1 to 1) ^ beta(2, 3)`} />
 
 ### Taking the base `e` exponential
 
 <SquiggleEditor
-  initialSquiggleString={`dist = triangular(1,2,3)
+  squiggleString={`dist = triangular(1,2,3)
 exp(dist)`}
 />
 
@@ -83,19 +83,19 @@ exp(dist)`}
 A projection over a stretched x-axis.
 
 <SquiggleEditor
-  initialSquiggleString={`dist = triangular(1,2,3)
+  squiggleString={`dist = triangular(1,2,3)
 log(dist)`}
 />
 
 <SquiggleEditor
-  initialSquiggleString={`dist = beta(1,2)
+  squiggleString={`dist = beta(1,2)
 log10(dist)`}
 />
 
 Base `x`
 
 <SquiggleEditor
-  initialSquiggleString={`x = 2
+  squiggleString={`x = 2
 dist = beta(2,3)
 log(dist, x)`}
 />
@@ -114,7 +114,7 @@ For every point on the x-axis, operate the corresponding points in the y axis of
 TODO: this isn't in the new interpreter/parser yet.
 
 <SquiggleEditor
-  initialSquiggleString={`dist1 = 1 to 10
+  squiggleString={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 .+ dist2`}
 />
@@ -124,7 +124,7 @@ dist1 .+ dist2`}
 TODO: this isn't in the new interpreter/parser yet.
 
 <SquiggleEditor
-  initialSquiggleString={`dist1 = 1 to 10
+  squiggleString={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 .- dist2`}
 />
@@ -132,7 +132,7 @@ dist1 .- dist2`}
 ### Pointwise multiplication
 
 <SquiggleEditor
-  initialSquiggleString={`dist1 = 1 to 10
+  squiggleString={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 .* dist2`}
 />
@@ -140,7 +140,7 @@ dist1 .* dist2`}
 ### Pointwise division
 
 <SquiggleEditor
-  initialSquiggleString={`dist1 = uniform(0,20)
+  squiggleString={`dist1 = uniform(0,20)
 dist2 = normal(10,8)
 dist1 ./ dist2`}
 />
@@ -148,7 +148,7 @@ dist1 ./ dist2`}
 ### Pointwise exponentiation
 
 <SquiggleEditor
-  initialSquiggleString={`dist1 = 1 to 10
+  squiggleString={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 .^ dist2`}
 />
@@ -160,7 +160,7 @@ dist1 .^ dist2`}
 The `pdf(dist, x)` function returns the density of a distribution at the
 given point x.
 
-<SquiggleEditor initialSquiggleString="pdf(normal(0,1),0)" />
+<SquiggleEditor squiggleString="pdf(normal(0,1),0)" />
 
 #### Validity
 
@@ -172,7 +172,7 @@ given point x.
 The `cdf(dist, x)` gives the cumulative probability of the distribution
 or all values lower than x. It is the inverse of `quantile`.
 
-<SquiggleEditor initialSquiggleString="cdf(normal(0,1),0)" />
+<SquiggleEditor squiggleString="cdf(normal(0,1),0)" />
 
 #### Validity
 
@@ -185,7 +185,7 @@ The `quantile(dist, prob)` gives the value x or which the probability for all va
 lower than x is equal to prob. It is the inverse of `cdf`. In the literature, it
 is also known as the quantiles function.
 
-<SquiggleEditor initialSquiggleString="quantile(normal(0,1),0.5)" />
+<SquiggleEditor squiggleString="quantile(normal(0,1),0.5)" />
 
 #### Validity
 
@@ -196,29 +196,29 @@ is also known as the quantiles function.
 
 The `mean(distribution)` function gives the mean (expected value) of a distribution.
 
-<SquiggleEditor initialSquiggleString="mean(normal(5, 10))" />
+<SquiggleEditor squiggleString="mean(normal(5, 10))" />
 
 ### Sampling a distribution
 
 The `sample(distribution)` samples a given distribution.
 
-<SquiggleEditor initialSquiggleString="sample(normal(0, 10))" />
+<SquiggleEditor squiggleString="sample(normal(0, 10))" />
 
 ## Converting between distribution formats
 
 Recall the [three formats of distributions](https://develop--squiggle-documentation.netlify.app/docs/Discussions/Three-Types-Of-Distributions). We can force any distribution into `SampleSet` format
 
-<SquiggleEditor initialSquiggleString="toSampleSet(normal(5, 10))" />
+<SquiggleEditor squiggleString="toSampleSet(normal(5, 10))" />
 
 Or `PointSet` format
 
-<SquiggleEditor initialSquiggleString="toPointSet(normal(5, 10))" />
+<SquiggleEditor squiggleString="toPointSet(normal(5, 10))" />
 
 ### `toSampleSet` has two signatures
 
 Above, we saw the unary `toSampleSet`, which uses an internal hardcoded number of samples. If you'd like to provide the number of samples, it has a binary signature as well (floored)
 
-<SquiggleEditor initialSquiggleString="[toSampleSet(0.1 to 1, 100.1), toSampleSet(0.1 to 1, 5000), toSampleSet(0.1 to 1, 20000)]" />
+<SquiggleEditor squiggleString="[toSampleSet(0.1 to 1, 100.1), toSampleSet(0.1 to 1, 5000), toSampleSet(0.1 to 1, 20000)]" />
 
 #### Validity
 
@@ -230,13 +230,13 @@ Some distribution operations (like horizontal shift) return an unnormalized dist
 
 We provide a `normalize` function
 
-<SquiggleEditor initialSquiggleString="normalize((0.1 to 1) + triangular(0.1, 1, 10))" />
+<SquiggleEditor squiggleString="normalize((0.1 to 1) + triangular(0.1, 1, 10))" />
 
 #### Validity - Input to `normalize` must be a dist
 
 We provide a predicate `isNormalized`, for when we have simple control flow
 
-<SquiggleEditor initialSquiggleString="isNormalized((0.1 to 1) * triangular(0.1, 1, 10))" />
+<SquiggleEditor squiggleString="isNormalized((0.1 to 1) * triangular(0.1, 1, 10))" />
 
 #### Validity
 
@@ -246,7 +246,7 @@ We provide a predicate `isNormalized`, for when we have simple control flow
 
 You may like to debug by right clicking your browser and using the _inspect_ functionality on the webpage, and viewing the _console_ tab. Then, wrap your squiggle output with `inspect` to log an internal representation.
 
-<SquiggleEditor initialSquiggleString="inspect(toSampleSet(0.1 to 1, 100))" />
+<SquiggleEditor squiggleString="inspect(toSampleSet(0.1 to 1, 100))" />
 
 Save for a logging side effect, `inspect` does nothing to input and returns it.
 
@@ -254,12 +254,12 @@ Save for a logging side effect, `inspect` does nothing to input and returns it.
 
 You can cut off from the left
 
-<SquiggleEditor initialSquiggleString="truncateLeft(0.1 to 1, 0.5)" />
+<SquiggleEditor squiggleString="truncateLeft(0.1 to 1, 0.5)" />
 
 You can cut off from the right
 
-<SquiggleEditor initialSquiggleString="truncateRight(0.1 to 1, 0.5)" />
+<SquiggleEditor squiggleString="truncateRight(0.1 to 1, 0.5)" />
 
 You can cut off from both sides
 
-<SquiggleEditor initialSquiggleString="truncate(0.1 to 1, 0.5, 1.5)" />
+<SquiggleEditor squiggleString="truncate(0.1 to 1, 0.5, 1.5)" />
diff --git a/packages/website/docs/Guides/Language.mdx b/packages/website/docs/Guides/Language.mdx
index 4cfd9ea8..bdc58e41 100644
--- a/packages/website/docs/Guides/Language.mdx
+++ b/packages/website/docs/Guides/Language.mdx
@@ -9,22 +9,22 @@ import { SquiggleEditor } from "../../src/components/SquiggleEditor";
 
 ### Distributions
 
-<SquiggleEditor initialSquiggleString={`mixture(1 to 2, 3, [0.3, 0.7])`} />
+<SquiggleEditor squiggleString={`mixture(1 to 2, 3, [0.3, 0.7])`} />
 
 ### Numbers
 
-<SquiggleEditor initialSquiggleString="4.32" />
+<SquiggleEditor squiggleString="4.32" />
 
 ### Arrays
 
 <SquiggleEditor
-  initialSquiggleString={`[beta(1,10), 4, isNormalized(toSampleSet(1 to 2))]`}
+  squiggleString={`[beta(1,10), 4, isNormalized(toSampleSet(1 to 2))]`}
 />
 
 ### Records
 
 <SquiggleEditor
-  initialSquiggleString={`d = {dist: triangular(0, 1, 2), weight: 0.25}
+  squiggleString={`d = {dist: triangular(0, 1, 2), weight: 0.25}
 d.dist`}
 />
 
@@ -33,7 +33,7 @@ d.dist`}
 A statement assigns expressions to names. It looks like `<symbol> = <expression>`
 
 <SquiggleEditor
-  initialSquiggleString={`value_of_work = 10 to 70
+  squiggleString={`value_of_work = 10 to 70
 5 + value_of_work / 75`}
 />
 
@@ -42,7 +42,7 @@ A statement assigns expressions to names. It looks like `<symbol> = <expression>
 We can define functions
 
 <SquiggleEditor
-  initialSquiggleString={`ozzie_estimate(t) = lognormal(t^(1.1), 0.5)
+  squiggleString={`ozzie_estimate(t) = lognormal(t^(1.1), 0.5)
 nuno_estimate(t, m) = mixture(normal(-5, 1), lognormal(m, t / 1.25))
 ozzie_estimate(1) * nuno_estimate(1, 1)`}
 />
diff --git a/yarn.lock b/yarn.lock
index ae8a6f60..d7c13cbf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4311,7 +4311,7 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
   integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
 
-"@types/react-dom@^18.0.0", "@types/react-dom@^18.0.5":
+"@types/react-dom@^18.0.0":
   version "18.0.5"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.5.tgz#330b2d472c22f796e5531446939eacef8378444a"
   integrity sha512-OWPWTUrY/NIrjsAPkAk1wW9LZeIjSvkXRhclsFO8CZcZGCOg2G0YZy4ft+rOyYxy8B7ui5iZzi9OkDebZ7/QSA==

From 06f86963d1fc370daf505b38166e615199ee28d5 Mon Sep 17 00:00:00 2001
From: Sam Nolan <samnolan555@gmail.com>
Date: Fri, 24 Jun 2022 05:10:28 +0000
Subject: [PATCH 02/29] Update documentation for squiggleString

---
 packages/components/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/README.md b/packages/components/README.md
index a74ee32d..bc8d3123 100644
--- a/packages/components/README.md
+++ b/packages/components/README.md
@@ -20,7 +20,7 @@ Add to `App.js`:
 ```jsx
 import { SquiggleEditor } from "@quri/squiggle-components";
 <SquiggleEditor
-  initialSquiggleString="x = beta($alpha, 10); x + $shift"
+  squiggleString="x = beta($alpha, 10); x + $shift"
   jsImports={{ alpha: 3, shift: 20 }}
 />;
 ```

From 69aa8a8cc177477e322d483b584ff0de633a4f28 Mon Sep 17 00:00:00 2001
From: Sam Nolan <samnolan555@gmail.com>
Date: Mon, 27 Jun 2022 07:07:09 +0000
Subject: [PATCH 03/29] Add controlled and uncontrolled versions of components

---
 .../src/components/SquiggleChart.tsx          |  6 +-
 .../src/components/SquiggleEditor.tsx         | 49 ++++++++++----
 .../src/components/SquigglePlayground.tsx     | 10 ++-
 .../src/stories/SquiggleChart.stories.mdx     | 27 ++++----
 .../src/stories/SquiggleEditor.stories.mdx    |  4 +-
 .../src/stories/SquigglePartial.stories.mdx   |  6 +-
 packages/website/docs/Discussions/Bugs.mdx    |  4 +-
 .../docs/Guides/DistributionCreation.mdx      | 64 +++++++++----------
 packages/website/docs/Guides/Functions.mdx    | 58 ++++++++---------
 packages/website/docs/Guides/Language.mdx     | 12 ++--
 packages/website/src/pages/playground.js      |  2 +-
 11 files changed, 131 insertions(+), 111 deletions(-)

diff --git a/packages/components/src/components/SquiggleChart.tsx b/packages/components/src/components/SquiggleChart.tsx
index 3e712396..9e352a62 100644
--- a/packages/components/src/components/SquiggleChart.tsx
+++ b/packages/components/src/components/SquiggleChart.tsx
@@ -14,7 +14,7 @@ import { SquiggleItem } from "./SquiggleItem";
 
 export interface SquiggleChartProps {
   /** The input string for squiggle */
-  squiggleString?: string;
+  code?: string;
   /** If the output requires monte carlo sampling, the amount of samples */
   sampleCount?: number;
   /** The amount of points returned to draw the distribution */
@@ -49,7 +49,7 @@ export interface SquiggleChartProps {
 const defaultOnChange = () => {};
 
 export const SquiggleChart: React.FC<SquiggleChartProps> = ({
-  squiggleString = "",
+  code = "",
   environment,
   onChange = defaultOnChange, // defaultOnChange must be constant, don't move its definition here
   height = 200,
@@ -66,7 +66,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
   diagramCount = 100,
 }) => {
   const result = useSquiggle({
-    code: squiggleString,
+    code,
     bindings,
     environment,
     jsImports,
diff --git a/packages/components/src/components/SquiggleEditor.tsx b/packages/components/src/components/SquiggleEditor.tsx
index 3d0e0db5..78aec513 100644
--- a/packages/components/src/components/SquiggleEditor.tsx
+++ b/packages/components/src/components/SquiggleEditor.tsx
@@ -22,27 +22,41 @@ const WrappedCodeEditor: React.FC<{
   </div>
 );
 
-export type SquiggleEditorProps = SquiggleChartProps;
+export type SquiggleEditorProps = SquiggleChartProps & {
+  defaultCode?: string;
+  onCodeChange?: (code: string) => void;
+};
 
 export const SquiggleEditor: React.FC<SquiggleEditorProps> = (props) => {
-  const { squiggleString = "" } = props;
-  const [code, setCode] = useState(squiggleString);
-  React.useEffect(() => setCode(squiggleString), [squiggleString]);
+  let defaultCode = props.defaultCode ?? "";
+  const [uncontrolledCode, setCode] = useState(defaultCode);
+  let code = props.code ?? uncontrolledCode;
 
-  let chartProps = { ...props, squiggleString: code };
+  let chartProps = { ...props, code };
   return (
     <SquiggleContainer>
-      <WrappedCodeEditor code={code} setCode={setCode} />
+      <WrappedCodeEditor
+        code={code}
+        setCode={(code) => {
+          if (props.onCodeChange) props.onCodeChange(code);
+
+          if (props.code === undefined) setCode(code);
+        }}
+      />
       <SquiggleChart {...chartProps} />
     </SquiggleContainer>
   );
 };
 
 export interface SquigglePartialProps {
-  /** The input string for squiggle */
-  squiggleString?: string;
+  /** The text inside the input (controlled) */
+  code?: string;
+  /** The default text inside the input (unControlled) */
+  defaultCode?: string;
   /** when the environment changes. Used again for notebook magic*/
   onChange?(expr: bindings | undefined): void;
+  /** When the code changes */
+  onCodeChange?(code: string): void;
   /** Previously declared variables */
   bindings?: bindings;
   /** If the output requires monte carlo sampling, the amount of samples */
@@ -52,17 +66,19 @@ export interface SquigglePartialProps {
 }
 
 export const SquigglePartial: React.FC<SquigglePartialProps> = ({
-  squiggleString = "",
+  code,
+  defaultCode = "",
   onChange,
+  onCodeChange,
   bindings = defaultBindings,
   environment,
   jsImports = defaultImports,
 }: SquigglePartialProps) => {
-  const [code, setCode] = useState(squiggleString);
-  React.useEffect(() => setCode(squiggleString), [squiggleString]);
+  const [uncontrolledCode, setCode] = useState(defaultCode);
+  let codeProp = code ?? uncontrolledCode;
 
   const result = useSquigglePartial({
-    code,
+    code: codeProp,
     bindings,
     environment,
     jsImports,
@@ -71,7 +87,14 @@ export const SquigglePartial: React.FC<SquigglePartialProps> = ({
 
   return (
     <SquiggleContainer>
-      <WrappedCodeEditor code={code} setCode={setCode} />
+      <WrappedCodeEditor
+        code={codeProp}
+        setCode={(code) => {
+          if (onCodeChange) onCodeChange(code);
+
+          if (code === undefined) setCode(code);
+        }}
+      />
       {result.tag !== "Ok" ? <SquiggleErrorAlert error={result.value} /> : null}
     </SquiggleContainer>
   );
diff --git a/packages/components/src/components/SquigglePlayground.tsx b/packages/components/src/components/SquigglePlayground.tsx
index ce59b5a4..e96a1053 100644
--- a/packages/components/src/components/SquigglePlayground.tsx
+++ b/packages/components/src/components/SquigglePlayground.tsx
@@ -22,7 +22,7 @@ import { SquiggleContainer } from "./SquiggleContainer";
 
 interface PlaygroundProps {
   /** The initial squiggle string to put in the playground */
-  initialSquiggleString?: string;
+  defaultCode?: string;
   /** How many pixels high is the playground */
   height?: number;
   /** Whether to show the types of outputs in the playground */
@@ -204,7 +204,7 @@ function Checkbox<T>({
 }
 
 export const SquigglePlayground: FC<PlaygroundProps> = ({
-  initialSquiggleString = "",
+  defaultCode = "",
   height = 500,
   showTypes = false,
   showControls = false,
@@ -216,9 +216,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
   onSettingsChange,
   showEditor = true,
 }) => {
-  const [uncontrolledCode, setUncontrolledCode] = useState(
-    initialSquiggleString
-  );
+  const [uncontrolledCode, setUncontrolledCode] = useState(defaultCode);
   const [importString, setImportString] = useState("{}");
   const [imports, setImports] = useState({});
   const [importsAreValid, setImportsAreValid] = useState(true);
@@ -417,7 +415,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
 
   const squiggleChart = (
     <SquiggleChart
-      squiggleString={code}
+      code={code}
       environment={env}
       diagramStart={Number(vars.diagramStart)}
       diagramStop={Number(vars.diagramStop)}
diff --git a/packages/components/src/stories/SquiggleChart.stories.mdx b/packages/components/src/stories/SquiggleChart.stories.mdx
index bce22c1c..2483c985 100644
--- a/packages/components/src/stories/SquiggleChart.stories.mdx
+++ b/packages/components/src/stories/SquiggleChart.stories.mdx
@@ -29,7 +29,7 @@ could be continuous, discrete or mixed.
   <Story
     name="Continuous Symbolic"
     args={{
-      squiggleString: "normal(5,2)",
+      code: "normal(5,2)",
       width,
     }}
   >
@@ -43,7 +43,7 @@ could be continuous, discrete or mixed.
   <Story
     name="Continuous Pointset"
     args={{
-      squiggleString: "toPointSet(normal(5,2))",
+      code: "toPointSet(normal(5,2))",
       width,
     }}
   >
@@ -57,7 +57,7 @@ could be continuous, discrete or mixed.
   <Story
     name="Continuous SampleSet"
     args={{
-      squiggleString: "toSampleSet(normal(5,2), 1000)",
+      code: "toSampleSet(normal(5,2), 1000)",
       width,
     }}
   >
@@ -71,7 +71,7 @@ could be continuous, discrete or mixed.
   <Story
     name="Discrete"
     args={{
-      squiggleString: "mx(0, 1, 3, 5, 8, 10, [0.1, 0.8, 0.5, 0.3, 0.2, 0.1])",
+      code: "mx(0, 1, 3, 5, 8, 10, [0.1, 0.8, 0.5, 0.3, 0.2, 0.1])",
       width,
     }}
   >
@@ -85,8 +85,7 @@ could be continuous, discrete or mixed.
   <Story
     name="Mixed"
     args={{
-      squiggleString:
-        "mx(0, 1, 3, 5, 8, normal(8, 1), [0.1, 0.3, 0.4, 0.35, 0.2, 0.8])",
+      code: "mx(0, 1, 3, 5, 8, normal(8, 1), [0.1, 0.3, 0.4, 0.35, 0.2, 0.8])",
       width,
     }}
   >
@@ -103,7 +102,7 @@ to allow large and small numbers being printed cleanly.
   <Story
     name="Constant"
     args={{
-      squiggleString: "500000000",
+      code: "500000000",
       width,
     }}
   >
@@ -117,7 +116,7 @@ to allow large and small numbers being printed cleanly.
   <Story
     name="Array"
     args={{
-      squiggleString: "[normal(5,2), normal(10,1), normal(40,2), 400000]",
+      code: "[normal(5,2), normal(10,1), normal(40,2), 400000]",
       width,
     }}
   >
@@ -131,7 +130,7 @@ to allow large and small numbers being printed cleanly.
   <Story
     name="Error"
     args={{
-      squiggleString: "f(x) = normal(",
+      code: "f(x) = normal(",
       width,
     }}
   >
@@ -145,7 +144,7 @@ to allow large and small numbers being printed cleanly.
   <Story
     name="Boolean"
     args={{
-      squiggleString: "3 == 3",
+      code: "3 == 3",
       width,
     }}
   >
@@ -159,7 +158,7 @@ to allow large and small numbers being printed cleanly.
   <Story
     name="Function to Distribution"
     args={{
-      squiggleString: "foo(t) = normal(t,2)*normal(5,3); foo",
+      code: "foo(t) = normal(t,2)*normal(5,3); foo",
       width,
     }}
   >
@@ -173,7 +172,7 @@ to allow large and small numbers being printed cleanly.
   <Story
     name="Function to Number"
     args={{
-      squiggleString: "foo(t) = t^2; foo",
+      code: "foo(t) = t^2; foo",
       width,
     }}
   >
@@ -187,7 +186,7 @@ to allow large and small numbers being printed cleanly.
   <Story
     name="Record"
     args={{
-      squiggleString: "{foo: 35 to 50, bar: [1,2,3]}",
+      code: "{foo: 35 to 50, bar: [1,2,3]}",
       width,
     }}
   >
@@ -201,7 +200,7 @@ to allow large and small numbers being printed cleanly.
   <Story
     name="String"
     args={{
-      squiggleString: '"Lucky day!"',
+      code: '"Lucky day!"',
       width,
     }}
   >
diff --git a/packages/components/src/stories/SquiggleEditor.stories.mdx b/packages/components/src/stories/SquiggleEditor.stories.mdx
index 7e8f7e66..e51e3e33 100644
--- a/packages/components/src/stories/SquiggleEditor.stories.mdx
+++ b/packages/components/src/stories/SquiggleEditor.stories.mdx
@@ -14,7 +14,7 @@ the distribution.
   <Story
     name="Normal"
     args={{
-      squiggleString: "normal(5,2)",
+      defaultCode: "normal(5,2)",
     }}
   >
     {Template.bind({})}
@@ -27,7 +27,7 @@ You can also name variables like so:
   <Story
     name="Variables"
     args={{
-      squiggleString: "x = 2\nnormal(x,2)",
+      defaultCode: "x = 2\nnormal(x,2)",
     }}
   >
     {Template.bind({})}
diff --git a/packages/components/src/stories/SquigglePartial.stories.mdx b/packages/components/src/stories/SquigglePartial.stories.mdx
index c4f4814a..3305586b 100644
--- a/packages/components/src/stories/SquigglePartial.stories.mdx
+++ b/packages/components/src/stories/SquigglePartial.stories.mdx
@@ -15,7 +15,7 @@ instead returns bindings that can be used by further Squiggle Editors.
   <Story
     name="Standalone"
     args={{
-      squiggleString: "x = normal(5,2)",
+      defaultCode: "x = normal(5,2)",
     }}
   >
     {Template.bind({})}
@@ -36,12 +36,12 @@ instead returns bindings that can be used by further Squiggle Editors.
         <>
           <SquigglePartial
             {...props}
-            squiggleString={props.initialPartialString}
+            defaultCode={props.initialPartialString}
             onChange={setBindings}
           />
           <SquiggleEditor
             {...props}
-            squiggleString={props.initialEditorString}
+            defaultCode={props.initialEditorString}
             bindings={bindings}
           />
         </>
diff --git a/packages/website/docs/Discussions/Bugs.mdx b/packages/website/docs/Discussions/Bugs.mdx
index 2c077eb0..db53a6f6 100644
--- a/packages/website/docs/Discussions/Bugs.mdx
+++ b/packages/website/docs/Discussions/Bugs.mdx
@@ -16,7 +16,7 @@ If you take the pointwise mixture of two distributions with very different means
 In the following case, the mean of the mixture should be equal to the sum of the means of the parts. These are shown as the first two displayed variables. These variables diverge as the underlying distributions change.
 
 <SquiggleEditor
-  squiggleString={`dist1 = {value: normal(1,1), weight: 1}
+  defaultCode={`dist1 = {value: normal(1,1), weight: 1}
 dist2 = {value: normal(100000000000,1), weight: 1}
 totalWeight = dist1.weight + dist2.weight
 distMixture = mixture(dist1.value, dist2.value, [dist1.weight, dist2.weight])
@@ -30,7 +30,7 @@ separateMeansCombined = (mean(dist1.value) * (dist1.weight) +  mean(dist2.value)
 The means of sample set distributions can vary dramatically, especially as the numbers get high.
 
 <SquiggleEditor
-  squiggleString={`symbolicDist = 5 to 50333333
+  defaultCode={`symbolicDist = 5 to 50333333
 sampleSetDist = toSampleSet(symbolicDist)
 [mean(symbolicDist), mean(sampleSetDist), symbolicDist, sampleSetDist]`}
 />
diff --git a/packages/website/docs/Guides/DistributionCreation.mdx b/packages/website/docs/Guides/DistributionCreation.mdx
index 8ca22294..7ef80d0a 100644
--- a/packages/website/docs/Guides/DistributionCreation.mdx
+++ b/packages/website/docs/Guides/DistributionCreation.mdx
@@ -22,22 +22,22 @@ If both values are above zero, a `lognormal` distribution is used. If not, a `no
     When <code>5 to 10</code> is entered, both numbers are positive, so it
     generates a lognormal distribution with 5th and 95th percentiles at 5 and
     10.
-    <SquiggleEditor squiggleString="5 to 10" />
+    <SquiggleEditor defaultCode="5 to 10" />
   </TabItem>
   <TabItem value="ex3" label="to(5,10)">
     <code>5 to 10</code> does the same thing as <code>to(5,10)</code>.
-    <SquiggleEditor squiggleString="to(5,10)" />
+    <SquiggleEditor defaultCode="to(5,10)" />
   </TabItem>
   <TabItem value="ex2" label="-5 to 5">
     When <code>-5 to 5</code> is entered, there's negative values, so it
     generates a normal distribution. This has 5th and 95th percentiles at 5 and
     10.
-    <SquiggleEditor squiggleString="-5 to -3" />
+    <SquiggleEditor defaultCode="-5 to -3" />
   </TabItem>
   <TabItem value="ex4" label="1 to 10000">
     It's very easy to generate distributions with very long tails. If this
     happens, you can click the "log x scale" box to view this using a log scale.
-    <SquiggleEditor squiggleString="1 to 10000" />
+    <SquiggleEditor defaultCode="1 to 10000" />
   </TabItem>
 </Tabs>
 
@@ -76,16 +76,16 @@ The `mixture` mixes combines multiple distributions to create a mixture. You can
 
 <Tabs>
   <TabItem value="ex1" label="Simple" default>
-    <SquiggleEditor squiggleString="mixture(1 to 2, 5 to 8, 9 to 10)" />
+    <SquiggleEditor defaultCode="mixture(1 to 2, 5 to 8, 9 to 10)" />
   </TabItem>
   <TabItem value="ex2" label="With Weights">
-    <SquiggleEditor squiggleString="mixture(1 to 2, 5 to 8, 9 to 10, [0.1, 0.1, 0.8])" />
+    <SquiggleEditor defaultCode="mixture(1 to 2, 5 to 8, 9 to 10, [0.1, 0.1, 0.8])" />
   </TabItem>
   <TabItem value="ex3" label="With Continuous and Discrete Inputs">
-    <SquiggleEditor squiggleString="mixture(1 to 5, 8 to 10, 1, 3, 20)" />
+    <SquiggleEditor defaultCode="mixture(1 to 5, 8 to 10, 1, 3, 20)" />
   </TabItem>
   <TabItem value="ex4" label="Array of Distributions Input">
-    <SquiggleEditor squiggleString="mx([1 to 2, exponential(1)], [1,1])" />
+    <SquiggleEditor defaultCode="mx([1 to 2, exponential(1)], [1,1])" />
   </TabItem>
 </Tabs>
 
@@ -111,7 +111,7 @@ The `mixture` mixes combines multiple distributions to create a mixture. You can
     In this case, I have a 20% chance of spending 0 time with it. I might estimate my hours with,
   </p>
   <SquiggleEditor
-    squiggleString={`hours_the_project_will_take = 5 to 20
+    defaultCode={`hours_the_project_will_take = 5 to 20
 chance_of_doing_anything = 0.8
 mx(hours_the_project_will_take, 0, [chance_of_doing_anything, 1 - chance_of_doing_anything])`}
   />
@@ -125,7 +125,7 @@ mx(hours_the_project_will_take, 0, [chance_of_doing_anything, 1 - chance_of_doin
   very wide, just in case they were dramatically off for some weird reason.
   </p>
 <SquiggleEditor
-  squiggleString={`forecast = 3 to 30
+  defaultCode={`forecast = 3 to 30
 chance_completely_wrong = 0.05
 forecast_if_completely_wrong = -100 to 200
 mx(forecast, forecast_if_completely_wrong, [1-chance_completely_wrong, chance_completely_wrong])`}
@@ -141,10 +141,10 @@ Creates a [normal distribution](https://en.wikipedia.org/wiki/Normal_distributio
 
 <Tabs>
   <TabItem value="ex1" label="normal(5,1)" default>
-    <SquiggleEditor squiggleString="normal(5, 1)" />
+    <SquiggleEditor defaultCode="normal(5, 1)" />
   </TabItem>
   <TabItem value="ex2" label="normal(100000000000, 100000000000)">
-    <SquiggleEditor squiggleString="normal(100000000000, 100000000000)" />
+    <SquiggleEditor defaultCode="normal(100000000000, 100000000000)" />
   </TabItem>
 </Tabs>
 
@@ -165,7 +165,7 @@ Creates a [log-normal distribution](https://en.wikipedia.org/wiki/Log-normal_dis
 you take the log of our lognormal distribution. They can be difficult to directly reason about.
 Because of this complexity, we recommend typically using the <a href="#to">to</a> syntax instead of estimating `mu` and `sigma` directly.
 
-<SquiggleEditor squiggleString="lognormal(0, 0.7)" />
+<SquiggleEditor defaultCode="lognormal(0, 0.7)" />
 
 ### Arguments
 
@@ -185,7 +185,7 @@ Because of this complexity, we recommend typically using the <a href="#to">to</a
     are identical:
   </p>
   <SquiggleEditor
-    squiggleString={`normalMean = 10
+    defaultCode={`normalMean = 10
 normalStdDev = 2
 logOfLognormal = log(lognormal(normalMean, normalStdDev))
 [logOfLognormal, normal(normalMean, normalStdDev)]`}
@@ -198,7 +198,7 @@ logOfLognormal = log(lognormal(normalMean, normalStdDev))
 
 Creates a [uniform distribution](<https://en.wikipedia.org/wiki/Uniform_distribution_(continuous)>) with the given low and high values.
 
-<SquiggleEditor squiggleString="uniform(3,7)" />
+<SquiggleEditor defaultCode="uniform(3,7)" />
 
 ### Arguments
 
@@ -236,19 +236,19 @@ with values at 1 and 2. Therefore, this is the same as `mixture(pointMass(1),poi
 
 <Tabs>
   <TabItem value="ex1" label="pointMass(3)" default>
-    <SquiggleEditor squiggleString="pointMass(3)" />
+    <SquiggleEditor defaultCode="pointMass(3)" />
   </TabItem>
   <TabItem value="ex3" label="mixture(1,3,5)">
-    <SquiggleEditor squiggleString="mixture(1,3,5)" />
+    <SquiggleEditor defaultCode="mixture(1,3,5)" />
   </TabItem>
   <TabItem value="ex2" label="normal(5,2) * 6">
-    <SquiggleEditor squiggleString="normal(5,2) * 6" />
+    <SquiggleEditor defaultCode="normal(5,2) * 6" />
   </TabItem>
   <TabItem value="ex4" label="dotAdd(normal(5,2), 6)">
-    <SquiggleEditor squiggleString="dotAdd(normal(5,2), 6)" />
+    <SquiggleEditor defaultCode="dotAdd(normal(5,2), 6)" />
   </TabItem>
   <TabItem value="ex5" label="dotMultiply(normal(5,2), 6)">
-    <SquiggleEditor squiggleString="dotMultiply(normal(5,2), 6)" />
+    <SquiggleEditor defaultCode="dotMultiply(normal(5,2), 6)" />
   </TabItem>
 </Tabs>
 
@@ -264,19 +264,19 @@ Creates a [beta distribution](https://en.wikipedia.org/wiki/Beta_distribution) w
 
 <Tabs>
   <TabItem value="ex1" label="beta(10, 20)" default>
-    <SquiggleEditor squiggleString="beta(10,20)" />
+    <SquiggleEditor defaultCode="beta(10,20)" />
   </TabItem>
   <TabItem value="ex2" label="beta(1000, 1000)">
-    <SquiggleEditor squiggleString="beta(1000, 2000)" />
+    <SquiggleEditor defaultCode="beta(1000, 2000)" />
   </TabItem>
   <TabItem value="ex3" label="beta(1, 10)">
-    <SquiggleEditor squiggleString="beta(1, 10)" />
+    <SquiggleEditor defaultCode="beta(1, 10)" />
   </TabItem>
   <TabItem value="ex4" label="beta(10, 1)">
-    <SquiggleEditor squiggleString="beta(10, 1)" />
+    <SquiggleEditor defaultCode="beta(10, 1)" />
   </TabItem>
   <TabItem value="ex5" label="beta(0.8, 0.8)">
-    <SquiggleEditor squiggleString="beta(0.8, 0.8)" />
+    <SquiggleEditor defaultCode="beta(0.8, 0.8)" />
   </TabItem>
 </Tabs>
 
@@ -295,16 +295,16 @@ Creates a [beta distribution](https://en.wikipedia.org/wiki/Beta_distribution) w
     <summary>Examples</summary>
     <Tabs>
       <TabItem value="ex1" label="beta(0.3, 0.3)" default>
-        <SquiggleEditor squiggleString="beta(0.3, 0.3)" />
+        <SquiggleEditor defaultCode="beta(0.3, 0.3)" />
       </TabItem>
       <TabItem value="ex2" label="beta(0.5, 0.5)">
-        <SquiggleEditor squiggleString="beta(0.5, 0.5)" />
+        <SquiggleEditor defaultCode="beta(0.5, 0.5)" />
       </TabItem>
       <TabItem value="ex3" label="beta(0.8, 0.8)">
-        <SquiggleEditor squiggleString="beta(.8,.8)" />
+        <SquiggleEditor defaultCode="beta(.8,.8)" />
       </TabItem>
       <TabItem value="ex4" label="beta(0.9, 0.9)">
-        <SquiggleEditor squiggleString="beta(.9,.9)" />
+        <SquiggleEditor defaultCode="beta(.9,.9)" />
       </TabItem>
     </Tabs>
   </details>
@@ -316,7 +316,7 @@ Creates a [beta distribution](https://en.wikipedia.org/wiki/Beta_distribution) w
 
 Creates an [exponential distribution](https://en.wikipedia.org/wiki/Exponential_distribution) with the given rate.
 
-<SquiggleEditor squiggleString="exponential(4)" />
+<SquiggleEditor defaultCode="exponential(4)" />
 
 ### Arguments
 
@@ -334,7 +334,7 @@ Creates a [triangular distribution](https://en.wikipedia.org/wiki/Triangular_dis
 - `mode`: Number greater than `low`
 - `high`: Number greater than `mode`
 
-<SquiggleEditor squiggleString="triangular(1, 2, 4)" />
+<SquiggleEditor defaultCode="triangular(1, 2, 4)" />
 
 ## FromSamples
 
@@ -342,7 +342,7 @@ Creates a [triangular distribution](https://en.wikipedia.org/wiki/Triangular_dis
 
 Creates a sample set distribution using an array of samples.
 
-<SquiggleEditor squiggleString="fromSamples([1,2,3,4,6,5,5,5])" />
+<SquiggleEditor defaultCode="fromSamples([1,2,3,4,6,5,5,5])" />
 
 ### Arguments
 
diff --git a/packages/website/docs/Guides/Functions.mdx b/packages/website/docs/Guides/Functions.mdx
index a58df345..a428ac7c 100644
--- a/packages/website/docs/Guides/Functions.mdx
+++ b/packages/website/docs/Guides/Functions.mdx
@@ -16,7 +16,7 @@ the value of one random sample chosen from the first distribution and the value
 chosen from the second distribution.
 
 <SquiggleEditor
-  squiggleString={`dist1 = 1 to 10
+  defaultCode={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 + dist2`}
 />
@@ -28,7 +28,7 @@ the distribution of the value of one random sample chosen from the first distrib
 the value of one random sample chosen from the second distribution.
 
 <SquiggleEditor
-  squiggleString={`dist1 = 1 to 10
+  defaultCode={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 - dist2`}
 />
@@ -40,14 +40,14 @@ the value of one random sample chosen from the first distribution times the valu
 chosen from the second distribution.
 
 <SquiggleEditor
-  squiggleString={`dist1 = 1 to 10
+  defaultCode={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 * dist2`}
 />
 
 We also provide concatenation of two distributions as a syntax sugar for `*`
 
-<SquiggleEditor squiggleString="(0.1 to 1) triangular(1,2,3)" />
+<SquiggleEditor defaultCode="(0.1 to 1) triangular(1,2,3)" />
 
 ### Division
 
@@ -58,7 +58,7 @@ chosen from the second distribution. If the second distribution has some values
 tends to be particularly unstable.
 
 <SquiggleEditor
-  squiggleString={`dist1 = 1 to 10
+  defaultCode={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 / dist2`}
 />
@@ -69,12 +69,12 @@ A projection over a contracted x-axis. The exponentiation operation represents t
 the exponentiation of the value of one random sample chosen from the first distribution to the power of
 the value one random sample chosen from the second distribution.
 
-<SquiggleEditor squiggleString={`(0.1 to 1) ^ beta(2, 3)`} />
+<SquiggleEditor defaultCode={`(0.1 to 1) ^ beta(2, 3)`} />
 
 ### Taking the base `e` exponential
 
 <SquiggleEditor
-  squiggleString={`dist = triangular(1,2,3)
+  defaultCode={`dist = triangular(1,2,3)
 exp(dist)`}
 />
 
@@ -83,19 +83,19 @@ exp(dist)`}
 A projection over a stretched x-axis.
 
 <SquiggleEditor
-  squiggleString={`dist = triangular(1,2,3)
+  defaultCode={`dist = triangular(1,2,3)
 log(dist)`}
 />
 
 <SquiggleEditor
-  squiggleString={`dist = beta(1,2)
+  defaultCode={`dist = beta(1,2)
 log10(dist)`}
 />
 
 Base `x`
 
 <SquiggleEditor
-  squiggleString={`x = 2
+  defaultCode={`x = 2
 dist = beta(2,3)
 log(dist, x)`}
 />
@@ -114,7 +114,7 @@ For every point on the x-axis, operate the corresponding points in the y axis of
 TODO: this isn't in the new interpreter/parser yet.
 
 <SquiggleEditor
-  squiggleString={`dist1 = 1 to 10
+  defaultCode={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 .+ dist2`}
 />
@@ -124,7 +124,7 @@ dist1 .+ dist2`}
 TODO: this isn't in the new interpreter/parser yet.
 
 <SquiggleEditor
-  squiggleString={`dist1 = 1 to 10
+  defaultCode={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 .- dist2`}
 />
@@ -132,7 +132,7 @@ dist1 .- dist2`}
 ### Pointwise multiplication
 
 <SquiggleEditor
-  squiggleString={`dist1 = 1 to 10
+  defaultCode={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 .* dist2`}
 />
@@ -140,7 +140,7 @@ dist1 .* dist2`}
 ### Pointwise division
 
 <SquiggleEditor
-  squiggleString={`dist1 = uniform(0,20)
+  defaultCode={`dist1 = uniform(0,20)
 dist2 = normal(10,8)
 dist1 ./ dist2`}
 />
@@ -148,7 +148,7 @@ dist1 ./ dist2`}
 ### Pointwise exponentiation
 
 <SquiggleEditor
-  squiggleString={`dist1 = 1 to 10
+  defaultCode={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 .^ dist2`}
 />
@@ -160,7 +160,7 @@ dist1 .^ dist2`}
 The `pdf(dist, x)` function returns the density of a distribution at the
 given point x.
 
-<SquiggleEditor squiggleString="pdf(normal(0,1),0)" />
+<SquiggleEditor defaultCode="pdf(normal(0,1),0)" />
 
 #### Validity
 
@@ -172,7 +172,7 @@ given point x.
 The `cdf(dist, x)` gives the cumulative probability of the distribution
 or all values lower than x. It is the inverse of `quantile`.
 
-<SquiggleEditor squiggleString="cdf(normal(0,1),0)" />
+<SquiggleEditor defaultCode="cdf(normal(0,1),0)" />
 
 #### Validity
 
@@ -185,7 +185,7 @@ The `quantile(dist, prob)` gives the value x or which the probability for all va
 lower than x is equal to prob. It is the inverse of `cdf`. In the literature, it
 is also known as the quantiles function.
 
-<SquiggleEditor squiggleString="quantile(normal(0,1),0.5)" />
+<SquiggleEditor defaultCode="quantile(normal(0,1),0.5)" />
 
 #### Validity
 
@@ -196,29 +196,29 @@ is also known as the quantiles function.
 
 The `mean(distribution)` function gives the mean (expected value) of a distribution.
 
-<SquiggleEditor squiggleString="mean(normal(5, 10))" />
+<SquiggleEditor defaultCode="mean(normal(5, 10))" />
 
 ### Sampling a distribution
 
 The `sample(distribution)` samples a given distribution.
 
-<SquiggleEditor squiggleString="sample(normal(0, 10))" />
+<SquiggleEditor defaultCode="sample(normal(0, 10))" />
 
 ## Converting between distribution formats
 
 Recall the [three formats of distributions](https://develop--squiggle-documentation.netlify.app/docs/Discussions/Three-Types-Of-Distributions). We can force any distribution into `SampleSet` format
 
-<SquiggleEditor squiggleString="toSampleSet(normal(5, 10))" />
+<SquiggleEditor defaultCode="toSampleSet(normal(5, 10))" />
 
 Or `PointSet` format
 
-<SquiggleEditor squiggleString="toPointSet(normal(5, 10))" />
+<SquiggleEditor defaultCode="toPointSet(normal(5, 10))" />
 
 ### `toSampleSet` has two signatures
 
 Above, we saw the unary `toSampleSet`, which uses an internal hardcoded number of samples. If you'd like to provide the number of samples, it has a binary signature as well (floored)
 
-<SquiggleEditor squiggleString="[toSampleSet(0.1 to 1, 100.1), toSampleSet(0.1 to 1, 5000), toSampleSet(0.1 to 1, 20000)]" />
+<SquiggleEditor defaultCode="[toSampleSet(0.1 to 1, 100.1), toSampleSet(0.1 to 1, 5000), toSampleSet(0.1 to 1, 20000)]" />
 
 #### Validity
 
@@ -230,13 +230,13 @@ Some distribution operations (like horizontal shift) return an unnormalized dist
 
 We provide a `normalize` function
 
-<SquiggleEditor squiggleString="normalize((0.1 to 1) + triangular(0.1, 1, 10))" />
+<SquiggleEditor defaultCode="normalize((0.1 to 1) + triangular(0.1, 1, 10))" />
 
 #### Validity - Input to `normalize` must be a dist
 
 We provide a predicate `isNormalized`, for when we have simple control flow
 
-<SquiggleEditor squiggleString="isNormalized((0.1 to 1) * triangular(0.1, 1, 10))" />
+<SquiggleEditor defaultCode="isNormalized((0.1 to 1) * triangular(0.1, 1, 10))" />
 
 #### Validity
 
@@ -246,7 +246,7 @@ We provide a predicate `isNormalized`, for when we have simple control flow
 
 You may like to debug by right clicking your browser and using the _inspect_ functionality on the webpage, and viewing the _console_ tab. Then, wrap your squiggle output with `inspect` to log an internal representation.
 
-<SquiggleEditor squiggleString="inspect(toSampleSet(0.1 to 1, 100))" />
+<SquiggleEditor defaultCode="inspect(toSampleSet(0.1 to 1, 100))" />
 
 Save for a logging side effect, `inspect` does nothing to input and returns it.
 
@@ -254,12 +254,12 @@ Save for a logging side effect, `inspect` does nothing to input and returns it.
 
 You can cut off from the left
 
-<SquiggleEditor squiggleString="truncateLeft(0.1 to 1, 0.5)" />
+<SquiggleEditor defaultCode="truncateLeft(0.1 to 1, 0.5)" />
 
 You can cut off from the right
 
-<SquiggleEditor squiggleString="truncateRight(0.1 to 1, 0.5)" />
+<SquiggleEditor defaultCode="truncateRight(0.1 to 1, 0.5)" />
 
 You can cut off from both sides
 
-<SquiggleEditor squiggleString="truncate(0.1 to 1, 0.5, 1.5)" />
+<SquiggleEditor defaultCode="truncate(0.1 to 1, 0.5, 1.5)" />
diff --git a/packages/website/docs/Guides/Language.mdx b/packages/website/docs/Guides/Language.mdx
index bdc58e41..2f26cdd6 100644
--- a/packages/website/docs/Guides/Language.mdx
+++ b/packages/website/docs/Guides/Language.mdx
@@ -9,22 +9,22 @@ import { SquiggleEditor } from "../../src/components/SquiggleEditor";
 
 ### Distributions
 
-<SquiggleEditor squiggleString={`mixture(1 to 2, 3, [0.3, 0.7])`} />
+<SquiggleEditor defaultCode={`mixture(1 to 2, 3, [0.3, 0.7])`} />
 
 ### Numbers
 
-<SquiggleEditor squiggleString="4.32" />
+<SquiggleEditor defaultCode="4.32" />
 
 ### Arrays
 
 <SquiggleEditor
-  squiggleString={`[beta(1,10), 4, isNormalized(toSampleSet(1 to 2))]`}
+  defaultCode={`[beta(1,10), 4, isNormalized(toSampleSet(1 to 2))]`}
 />
 
 ### Records
 
 <SquiggleEditor
-  squiggleString={`d = {dist: triangular(0, 1, 2), weight: 0.25}
+  defaultCode={`d = {dist: triangular(0, 1, 2), weight: 0.25}
 d.dist`}
 />
 
@@ -33,7 +33,7 @@ d.dist`}
 A statement assigns expressions to names. It looks like `<symbol> = <expression>`
 
 <SquiggleEditor
-  squiggleString={`value_of_work = 10 to 70
+  defaultCode={`value_of_work = 10 to 70
 5 + value_of_work / 75`}
 />
 
@@ -42,7 +42,7 @@ A statement assigns expressions to names. It looks like `<symbol> = <expression>
 We can define functions
 
 <SquiggleEditor
-  squiggleString={`ozzie_estimate(t) = lognormal(t^(1.1), 0.5)
+  defaultCode={`ozzie_estimate(t) = lognormal(t^(1.1), 0.5)
 nuno_estimate(t, m) = mixture(normal(-5, 1), lognormal(m, t / 1.25))
 ozzie_estimate(1) * nuno_estimate(1, 1)`}
 />
diff --git a/packages/website/src/pages/playground.js b/packages/website/src/pages/playground.js
index 48a2c90d..70904eba 100644
--- a/packages/website/src/pages/playground.js
+++ b/packages/website/src/pages/playground.js
@@ -37,7 +37,7 @@ function setHashData(data) {
 
 export default function PlaygroundPage() {
   const playgroundProps = {
-    initialSquiggleString: "normal(0,1)",
+    defaultCode: "normal(0,1)",
     height: 700,
     showTypes: true,
     ...getHashData(),

From 14189fd8484cae8d6484f7d46755a090a6c19ab9 Mon Sep 17 00:00:00 2001
From: Quinn Dougherty <quinnd@riseup.net>
Date: Mon, 27 Jun 2022 14:31:35 -0400
Subject: [PATCH 04/29] #497 (no tests or examples)

---
 .../Distributions/SymbolicDist/SymbolicDist.res     | 13 +++++++++++++
 .../FunctionRegistry/FunctionRegistry_Library.res   |  8 ++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res b/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res
index f33fc450..762e5fd5 100644
--- a/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res
+++ b/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res
@@ -124,6 +124,19 @@ module Beta = {
   let sample = (t: t) => Jstat.Beta.sample(t.alpha, t.beta)
   let mean = (t: t) => Ok(Jstat.Beta.mean(t.alpha, t.beta))
   let toString = ({alpha, beta}: t) => j`Beta($alpha,$beta)`
+
+  let fromMeanAndSampleSize = (mean, sampleSize) => {
+    // https://en.wikipedia.org/wiki/Beta_distribution#Mean_and_sample_size
+    let alpha = mean *. sampleSize
+    let beta = (1.0 -. mean) *. sampleSize
+    alpha->make(beta)
+  }
+
+  let fromMeanAndStdev = (mean, stdev) => {
+    let var = stdev *. stdev
+    let sampleSize = mean *. (1.0 -. mean) /. var
+    mean->fromMeanAndSampleSize(sampleSize)
+  }
 }
 
 module Lognormal = {
diff --git a/packages/squiggle-lang/src/rescript/FunctionRegistry/FunctionRegistry_Library.res b/packages/squiggle-lang/src/rescript/FunctionRegistry/FunctionRegistry_Library.res
index 56315860..a37b8dc4 100644
--- a/packages/squiggle-lang/src/rescript/FunctionRegistry/FunctionRegistry_Library.res
+++ b/packages/squiggle-lang/src/rescript/FunctionRegistry/FunctionRegistry_Library.res
@@ -117,8 +117,12 @@ lognormal({mean: 5, stdev: 2})`,
   ),
   Function.make(
     ~name="Beta",
-    ~examples=`beta(20, 25)`,
-    ~definitions=[TwoArgDist.make("beta", twoArgs(SymbolicDist.Beta.make))],
+    ~examples=`beta(20, 25)
+beta({mean: 0.39, stdev: 0.1})`,
+    ~definitions=[
+      TwoArgDist.make("beta", twoArgs(SymbolicDist.Beta.make)),
+      TwoArgDist.makeRecordMeanStdev("beta", twoArgs(SymbolicDist.Beta.fromMeanAndStdev)),
+    ],
     (),
   ),
   Function.make(

From 54cd6365241e63671189a70c5cdbe8cb40e1bb77 Mon Sep 17 00:00:00 2001
From: Quinn Dougherty <quinnd@riseup.net>
Date: Mon, 27 Jun 2022 14:37:12 -0400
Subject: [PATCH 05/29] added comment for more direct wikipedia citation

---
 .../src/rescript/Distributions/SymbolicDist/SymbolicDist.res     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res b/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res
index 762e5fd5..61470d08 100644
--- a/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res
+++ b/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res
@@ -133,6 +133,7 @@ module Beta = {
   }
 
   let fromMeanAndStdev = (mean, stdev) => {
+    // https://en.wikipedia.org/wiki/Beta_distribution#Mean_and_variance
     let var = stdev *. stdev
     let sampleSize = mean *. (1.0 -. mean) /. var
     mean->fromMeanAndSampleSize(sampleSize)

From 9dcac8dd481b3099cf2fe0b73705248c8e74f5b2 Mon Sep 17 00:00:00 2001
From: Quinn Dougherty <quinnd@riseup.net>
Date: Thu, 30 Jun 2022 12:20:50 -0400
Subject: [PATCH 06/29] fixed \`-1\` I had forgotten; added basic mean tests

---
 .../__tests__/Distributions/Symbolic_test.res   | 17 +++++++++++++++++
 .../Distributions/SymbolicDist/SymbolicDist.res |  2 +-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/squiggle-lang/__tests__/Distributions/Symbolic_test.res b/packages/squiggle-lang/__tests__/Distributions/Symbolic_test.res
index 6ee9ffc8..152b580d 100644
--- a/packages/squiggle-lang/__tests__/Distributions/Symbolic_test.res
+++ b/packages/squiggle-lang/__tests__/Distributions/Symbolic_test.res
@@ -77,6 +77,23 @@ describe("(Symbolic) mean", () => {
     meanValue->unpackFloat->expect->ExpectJs.toBeFalsy
   })
 
+  testAll(
+    "of beta distributions from mean and standard dev",
+    list{(0.39, 0.1), (0.08, 0.1), (0.8, 0.3)},
+    tup => {
+      let (mean, stdev) = tup
+      let betaDistribution = SymbolicDist.Beta.fromMeanAndStdev(mean, stdev)
+      let meanValue =
+        betaDistribution->E.R2.fmap(d =>
+          run(FromDist(ToFloat(#Mean), d->DistributionTypes.Symbolic))
+        )
+      switch meanValue {
+      | Ok(value) => value->unpackFloat->expect->toBeCloseTo(mean)
+      | Error(err) => err->expect->toBe("shouldn't happen")
+      }
+    },
+  )
+
   testAll(
     "of lognormal distributions",
     list{(2.0, 4.0), (1e-7, 1e-2), (-1e6, 10.0), (1e3, -1e2), (-1e8, -1e4), (1e2, 1e-5)},
diff --git a/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res b/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res
index 61470d08..0b192b5f 100644
--- a/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res
+++ b/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res
@@ -135,7 +135,7 @@ module Beta = {
   let fromMeanAndStdev = (mean, stdev) => {
     // https://en.wikipedia.org/wiki/Beta_distribution#Mean_and_variance
     let var = stdev *. stdev
-    let sampleSize = mean *. (1.0 -. mean) /. var
+    let sampleSize = mean *. (1.0 -. mean) /. var -. 1.0
     mean->fromMeanAndSampleSize(sampleSize)
   }
 }

From e0289ed23fea20006e5b89f8914f7a2a97efdc58 Mon Sep 17 00:00:00 2001
From: Quinn Dougherty <quinnd@riseup.net>
Date: Thu, 30 Jun 2022 12:29:09 -0400
Subject: [PATCH 07/29] documented addition to `beta` api

---
 packages/website/docs/Api/DistGeneric.mdx             | 2 ++
 packages/website/docs/Guides/DistributionCreation.mdx | 7 +++++++
 2 files changed, 9 insertions(+)

diff --git a/packages/website/docs/Api/DistGeneric.mdx b/packages/website/docs/Api/DistGeneric.mdx
index e49eec1c..42f464df 100644
--- a/packages/website/docs/Api/DistGeneric.mdx
+++ b/packages/website/docs/Api/DistGeneric.mdx
@@ -70,12 +70,14 @@ uniform(10, 12);
 
 ```
 beta: (distribution|number, distribution|number) => distribution
+beta: (dict<{mean: distribution|number, stdev: distribution|number}>) => distribution
 ```
 
 **Examples**
 
 ```javascript
 beta(20, 25);
+beta({ mean: 0.39, stdev: 0.1 });
 ```
 
 ### cauchy
diff --git a/packages/website/docs/Guides/DistributionCreation.mdx b/packages/website/docs/Guides/DistributionCreation.mdx
index 5e84b47f..1ad69960 100644
--- a/packages/website/docs/Guides/DistributionCreation.mdx
+++ b/packages/website/docs/Guides/DistributionCreation.mdx
@@ -259,6 +259,7 @@ with values at 1 and 2. Therefore, this is the same as `mixture(pointMass(1),poi
 ## Beta
 
 `beta(alpha:number, beta:number)`
+`beta({mean: number, stdev: number})`
 
 Creates a [beta distribution](https://en.wikipedia.org/wiki/Beta_distribution) with the given `alpha` and `beta` values. For a good summary of the beta distribution, see [this explanation](https://stats.stackexchange.com/a/47782) on Stack Overflow.
 
@@ -278,6 +279,12 @@ Creates a [beta distribution](https://en.wikipedia.org/wiki/Beta_distribution) w
   <TabItem value="ex5" label="beta(0.8, 0.8)">
     <SquiggleEditor initialSquiggleString="beta(0.8, 0.8)" />
   </TabItem>
+  <TabItem
+    value="from mean and standard deviation"
+    label="beta({mean: 0.39, stdev: 0.1})"
+  >
+    <SquiggleEditor initialSquiggleString="beta({mean: 0.39, stdev: 0.1})" />
+  </TabItem>
 </Tabs>
 
 ### Arguments

From 5b41019c04d4b5137af7776bc21b84e784635371 Mon Sep 17 00:00:00 2001
From: Quinn Dougherty <quinnd@riseup.net>
Date: Thu, 30 Jun 2022 14:38:59 -0400
Subject: [PATCH 08/29] hotfix: relative path

---
 packages/website/docs/Introduction.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/website/docs/Introduction.md b/packages/website/docs/Introduction.md
index 35ff63b6..e04157c2 100644
--- a/packages/website/docs/Introduction.md
+++ b/packages/website/docs/Introduction.md
@@ -10,7 +10,7 @@ Squiggle is an _estimation language_, and a syntax for _calculating and expressi
 - [Gallery](./Discussions/Gallery)
 - [Squiggle playground](/playground)
 - [Language basics](./Guides/Language)
-- [Squiggle functions source of truth](./docs/Guides/Functions)
+- [Squiggle functions source of truth](./Guides/Functions)
 - [Known bugs](./Discussions/Bugs)
 - [Original lesswrong sequence](https://www.lesswrong.com/s/rDe8QE5NvXcZYzgZ3)
 - [Author your squiggle models as Observable notebooks](https://observablehq.com/@hazelfire/squiggle)

From 38cc93bdec86ab7bf100bb9b6520bdb88279de59 Mon Sep 17 00:00:00 2001
From: Umur Ozkul <umur@hightechmind.io>
Date: Mon, 27 Jun 2022 02:40:31 +0200
Subject: [PATCH 09/29] Module.defineFFI

---
 .../__tests__/Reducer/Reducer_Helpers.res     |  2 +-
 .../Reducer/Reducer_TestMacroHelpers.res      |  2 +-
 .../Reducer_Category_Module_TypeChecker.res   | 16 ----
 .../Reducer_Dispatch_BuiltIn.res              | 84 ++++--------------
 .../Reducer_Dispatch_BuiltInMacros.res        |  2 +-
 .../rescript/Reducer/Reducer_Exception.res    |  3 +
 .../Reducer_Expression/Reducer_Expression.res |  2 +-
 .../Reducer_ExpressionWithContext.res         |  2 +-
 .../Reducer_Expression_BindingsReplacer.res   |  2 +-
 .../Reducer_Expression_ExpressionBuilder.res  | 18 ++--
 .../Reducer_Expression_Lambda.res             |  2 +-
 .../Reducer_Module.res}                       | 17 +++-
 .../Reducer_Module/Reducer_Module_Lambda.res  | 29 ++++++
 .../Reducer_Peggy_GeneratedParser.peggy       | 15 ++--
 .../Reducer_Peggy/Reducer_Peggy_Parse.res     |  6 +-
 .../Reducer/Reducer_Type/Reducer_Type_T.res   | 82 +++++++++++++++++
 .../Reducer_Type/Reducer_Type_TypeBuilder.res | 88 +++++++++++++++++++
 .../Reducer_Type/Reducer_Type_TypeChecker.res | 81 +++++++++++++++++
 ...ducerInterface_ExternalExpressionValue.res | 81 ++---------------
 ...ducerInterface_InternalExpressionValue.res | 62 +++++++------
 .../ReducerInterface_StdLib.res               |  2 +-
 .../SquiggleLibrary/SquiggleLibrary_Math.res  |  4 +-
 22 files changed, 388 insertions(+), 214 deletions(-)
 delete mode 100644 packages/squiggle-lang/src/rescript/Reducer/Reducer_Category/Reducer_Category_Module_TypeChecker.res
 create mode 100644 packages/squiggle-lang/src/rescript/Reducer/Reducer_Exception.res
 rename packages/squiggle-lang/src/rescript/Reducer/{Reducer_Category/Reducer_Category_Module.res => Reducer_Module/Reducer_Module.res} (87%)
 create mode 100644 packages/squiggle-lang/src/rescript/Reducer/Reducer_Module/Reducer_Module_Lambda.res
 create mode 100644 packages/squiggle-lang/src/rescript/Reducer/Reducer_Type/Reducer_Type_T.res
 create mode 100644 packages/squiggle-lang/src/rescript/Reducer/Reducer_Type/Reducer_Type_TypeBuilder.res
 create mode 100644 packages/squiggle-lang/src/rescript/Reducer/Reducer_Type/Reducer_Type_TypeChecker.res

diff --git a/packages/squiggle-lang/__tests__/Reducer/Reducer_Helpers.res b/packages/squiggle-lang/__tests__/Reducer/Reducer_Helpers.res
index 8e3d8257..4fb1382f 100644
--- a/packages/squiggle-lang/__tests__/Reducer/Reducer_Helpers.res
+++ b/packages/squiggle-lang/__tests__/Reducer/Reducer_Helpers.res
@@ -2,7 +2,7 @@
 module ErrorValue = Reducer_ErrorValue
 module ExternalExpressionValue = ReducerInterface.ExternalExpressionValue
 module InternalExpressionValue = ReducerInterface.InternalExpressionValue
-module Module = Reducer_Category_Module
+module Module = Reducer_Module
 
 let removeDefaultsInternal = (iev: InternalExpressionValue.t) => {
   switch iev {
diff --git a/packages/squiggle-lang/__tests__/Reducer/Reducer_TestMacroHelpers.res b/packages/squiggle-lang/__tests__/Reducer/Reducer_TestMacroHelpers.res
index 103609a2..2337dde2 100644
--- a/packages/squiggle-lang/__tests__/Reducer/Reducer_TestMacroHelpers.res
+++ b/packages/squiggle-lang/__tests__/Reducer/Reducer_TestMacroHelpers.res
@@ -8,7 +8,7 @@ module InternalExpressionValue = ReducerInterface.InternalExpressionValue
 module ExpressionWithContext = Reducer_ExpressionWithContext
 module Macro = Reducer_Expression_Macro
 module T = Reducer_Expression_T
-module Module = Reducer_Category_Module
+module Module = Reducer_Module
 
 let testMacro_ = (
   tester,
diff --git a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Category/Reducer_Category_Module_TypeChecker.res b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Category/Reducer_Category_Module_TypeChecker.res
deleted file mode 100644
index 957b0dc8..00000000
--- a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Category/Reducer_Category_Module_TypeChecker.res
+++ /dev/null
@@ -1,16 +0,0 @@
-module ExpressionValue = ReducerInterface_InternalExpressionValue
-module ExpressionT = Reducer_Expression_T
-open ExpressionValue
-
-let isOfResolvedType = (aType, aValue) => {
-  let caseTypeIdentifier = (aTypeIdentifier0, aValue) => {
-    let valueType = aValue->valueToValueType->valueTypeToString->Js.String2.toLowerCase
-    let aTypeIdentifier = aTypeIdentifier0->Js.String2.toLowerCase
-    aTypeIdentifier === valueType
-  }
-
-  switch aType {
-  | IEvTypeIdentifier(aTypeIdentifier) => caseTypeIdentifier(aTypeIdentifier, aValue)
-  | _ => false
-  }
-}
diff --git a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Dispatch/Reducer_Dispatch_BuiltIn.res b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Dispatch/Reducer_Dispatch_BuiltIn.res
index 6012d179..484b0acb 100644
--- a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Dispatch/Reducer_Dispatch_BuiltIn.res
+++ b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Dispatch/Reducer_Dispatch_BuiltIn.res
@@ -3,8 +3,9 @@ module ExpressionT = Reducer_Expression_T
 module ExternalLibrary = ReducerInterface.ExternalLibrary
 module Lambda = Reducer_Expression_Lambda
 module MathJs = Reducer_MathJs
-module Module = Reducer_Category_Module
+module Module = Reducer_Module
 module Result = Belt.Result
+module TypeBuilder = Reducer_Type_TypeBuilder
 open ReducerInterface_InternalExpressionValue
 open Reducer_ErrorValue
 
@@ -166,59 +167,6 @@ let callInternal = (call: functionCall, environment, reducer: ExpressionT.reduce
     )
   }
 
-  let typeModifier_memberOf = (aType, anArray) => {
-    let newRecord = Belt.Map.String.fromArray([
-      ("typeTag", IEvString("typeIdentifier")),
-      ("typeIdentifier", aType),
-    ])
-    newRecord->Belt.Map.String.set("memberOf", anArray)->IEvRecord->Ok
-  }
-  let typeModifier_memberOf_update = (aRecord, anArray) => {
-    aRecord->Belt.Map.String.set("memberOf", anArray)->IEvRecord->Ok
-  }
-
-  let typeModifier_min = (aType, value) => {
-    let newRecord = Belt.Map.String.fromArray([
-      ("typeTag", IEvString("typeIdentifier")),
-      ("typeIdentifier", aType),
-    ])
-    newRecord->Belt.Map.String.set("min", value)->IEvRecord->Ok
-  }
-  let typeModifier_min_update = (aRecord, value) => {
-    aRecord->Belt.Map.String.set("min", value)->IEvRecord->Ok
-  }
-
-  let typeModifier_max = (aType, value) => {
-    let newRecord = Belt.Map.String.fromArray([
-      ("typeTag", IEvString("typeIdentifier")),
-      ("typeIdentifier", aType),
-    ])
-    newRecord->Belt.Map.String.set("max", value)->IEvRecord->Ok
-  }
-  let typeModifier_max_update = (aRecord, value) =>
-    aRecord->Belt.Map.String.set("max", value)->IEvRecord->Ok
-
-  let typeModifier_opaque_update = aRecord =>
-    aRecord->Belt.Map.String.set("opaque", IEvBool(true))->IEvRecord->Ok
-
-  let typeOr = evArray => {
-    let newRecord = Belt.Map.String.fromArray([
-      ("typeTag", IEvString("typeOr")),
-      ("typeOr", evArray),
-    ])
-    newRecord->IEvRecord->Ok
-  }
-  let typeFunction = anArray => {
-    let output = Belt.Array.getUnsafe(anArray, Js.Array2.length(anArray) - 1)
-    let inputs = Js.Array2.slice(anArray, ~start=0, ~end_=-1)
-    let newRecord = Belt.Map.String.fromArray([
-      ("typeTag", IEvString("typeFunction")),
-      ("inputs", IEvArray(inputs)),
-      ("output", output),
-    ])
-    newRecord->IEvRecord->Ok
-  }
-
   switch call {
   | ("$_atIndex_$", [IEvArray(aValueArray), IEvNumber(fIndex)]) => arrayAtIndex(aValueArray, fIndex)
   | ("$_atIndex_$", [IEvModule(dict), IEvString(sIndex)]) => moduleAtIndex(dict, sIndex)
@@ -233,20 +181,24 @@ let callInternal = (call: functionCall, environment, reducer: ExpressionT.reduce
   | ("$_setTypeOfBindings_$", [IEvModule(nameSpace), IEvSymbol(symbol), value]) =>
     doSetTypeOfBindings(nameSpace, symbol, value)
   | ("$_typeModifier_memberOf_$", [IEvTypeIdentifier(typeIdentifier), IEvArray(arr)]) =>
-    typeModifier_memberOf(IEvTypeIdentifier(typeIdentifier), IEvArray(arr))
-  | ("$_typeModifier_memberOf_$", [IEvRecord(typeRecord), IEvArray(arr)]) =>
-    typeModifier_memberOf_update(typeRecord, IEvArray(arr))
+    TypeBuilder.typeModifier_memberOf(IEvTypeIdentifier(typeIdentifier), IEvArray(arr))
+  | ("$_typeModifier_memberOf_$", [IEvType(typeRecord), IEvArray(arr)]) =>
+    TypeBuilder.typeModifier_memberOf_update(typeRecord, IEvArray(arr))
   | ("$_typeModifier_min_$", [IEvTypeIdentifier(typeIdentifier), value]) =>
-    typeModifier_min(IEvTypeIdentifier(typeIdentifier), value)
-  | ("$_typeModifier_min_$", [IEvRecord(typeRecord), value]) =>
-    typeModifier_min_update(typeRecord, value)
+    TypeBuilder.typeModifier_min(IEvTypeIdentifier(typeIdentifier), value)
+  | ("$_typeModifier_min_$", [IEvType(typeRecord), value]) =>
+    TypeBuilder.typeModifier_min_update(typeRecord, value)
   | ("$_typeModifier_max_$", [IEvTypeIdentifier(typeIdentifier), value]) =>
-    typeModifier_max(IEvTypeIdentifier(typeIdentifier), value)
-  | ("$_typeModifier_max_$", [IEvRecord(typeRecord), value]) =>
-    typeModifier_max_update(typeRecord, value)
-  | ("$_typeModifier_opaque_$", [IEvRecord(typeRecord)]) => typeModifier_opaque_update(typeRecord)
-  | ("$_typeOr_$", [IEvArray(arr)]) => typeOr(IEvArray(arr))
-  | ("$_typeFunction_$", [IEvArray(arr)]) => typeFunction(arr)
+    TypeBuilder.typeModifier_max(IEvTypeIdentifier(typeIdentifier), value)
+  | ("$_typeModifier_max_$", [IEvType(typeRecord), value]) =>
+    TypeBuilder.typeModifier_max_update(typeRecord, value)
+  | ("$_typeModifier_opaque_$", [IEvType(typeRecord)]) =>
+    TypeBuilder.typeModifier_opaque_update(typeRecord)
+  | ("$_typeOr_$", [IEvArray(arr)]) => TypeBuilder.typeOr(IEvArray(arr))
+  | ("$_typeFunction_$", [IEvArray(arr)]) => TypeBuilder.typeFunction(arr)
+  | ("$_typeTuple_$", [IEvArray(elems)]) => TypeBuilder.typeTuple(elems)
+  | ("$_typeArray_$", [elem]) => TypeBuilder.typeArray(elem)
+  | ("$_typeRecord_$", [IEvArray(arrayOfPairs)]) => TypeBuilder.typeRecord(arrayOfPairs)
   | ("concat", [IEvArray(aValueArray), IEvArray(bValueArray)]) =>
     doAddArray(aValueArray, bValueArray)
   | ("concat", [IEvString(aValueString), IEvString(bValueString)]) =>
diff --git a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Dispatch/Reducer_Dispatch_BuiltInMacros.res b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Dispatch/Reducer_Dispatch_BuiltInMacros.res
index 1467f815..e0e6902e 100644
--- a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Dispatch/Reducer_Dispatch_BuiltInMacros.res
+++ b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Dispatch/Reducer_Dispatch_BuiltInMacros.res
@@ -9,7 +9,7 @@ module ExpressionBuilder = Reducer_Expression_ExpressionBuilder
 module ExpressionT = Reducer_Expression_T
 module InternalExpressionValue = ReducerInterface_InternalExpressionValue
 module ExpressionWithContext = Reducer_ExpressionWithContext
-module Module = Reducer_Category_Module
+module Module = Reducer_Module
 module Result = Belt.Result
 open Reducer_Expression_ExpressionBuilder
 
diff --git a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Exception.res b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Exception.res
new file mode 100644
index 00000000..d7ca335c
--- /dev/null
+++ b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Exception.res
@@ -0,0 +1,3 @@
+// There are switch stament cases in the code which are impossible to reach by design.
+// ImpossibleException is a sign of programming error.
+exception ImpossibleException
diff --git a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_Expression.res b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_Expression.res
index e7c82e77..9df4ff28 100644
--- a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_Expression.res
+++ b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_Expression.res
@@ -6,7 +6,7 @@ module InternalExpressionValue = ReducerInterface_InternalExpressionValue
 module Lambda = Reducer_Expression_Lambda
 module Macro = Reducer_Expression_Macro
 module MathJs = Reducer_MathJs
-module Module = Reducer_Category_Module
+module Module = Reducer_Module
 module Result = Belt.Result
 module T = Reducer_Expression_T
 
diff --git a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_ExpressionWithContext.res b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_ExpressionWithContext.res
index 1f6b18b7..7ab1ba05 100644
--- a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_ExpressionWithContext.res
+++ b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_ExpressionWithContext.res
@@ -3,7 +3,7 @@ module ErrorValue = Reducer_ErrorValue
 module ExpressionT = Reducer_Expression_T
 module InternalExpressionValue = ReducerInterface_InternalExpressionValue
 module Result = Belt.Result
-module Module = Reducer_Category_Module
+module Module = Reducer_Module
 
 type bindings = ExpressionT.bindings
 type context = bindings
diff --git a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_Expression_BindingsReplacer.res b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_Expression_BindingsReplacer.res
index e96ae4a1..6e1ef774 100644
--- a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_Expression_BindingsReplacer.res
+++ b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_Expression_BindingsReplacer.res
@@ -2,7 +2,7 @@ module ErrorValue = Reducer_ErrorValue
 module ExpressionT = Reducer_Expression_T
 module InternalExpressionValue = ReducerInterface_InternalExpressionValue
 module Result = Belt.Result
-module Module = Reducer_Category_Module
+module Module = Reducer_Module
 
 type errorValue = Reducer_ErrorValue.errorValue
 type expression = ExpressionT.expression
diff --git a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_Expression_ExpressionBuilder.res b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_Expression_ExpressionBuilder.res
index 9fd4a34a..590cc99f 100644
--- a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_Expression_ExpressionBuilder.res
+++ b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_Expression_ExpressionBuilder.res
@@ -2,7 +2,7 @@ module BBindingsReplacer = Reducer_Expression_BindingsReplacer
 module BErrorValue = Reducer_ErrorValue
 module BExpressionT = Reducer_Expression_T
 module BInternalExpressionValue = ReducerInterface_InternalExpressionValue
-module BModule = Reducer_Category_Module
+module BModule = Reducer_Module
 
 type errorValue = BErrorValue.errorValue
 type expression = BExpressionT.expression
@@ -10,8 +10,6 @@ type expressionOrFFI = BExpressionT.expressionOrFFI
 type ffiFn = BExpressionT.ffiFn
 type internalCode = ReducerInterface_InternalExpressionValue.internalCode
 
-external castExpressionToInternalCode: expressionOrFFI => internalCode = "%identity"
-
 let eArray = anArray => anArray->BInternalExpressionValue.IEvArray->BExpressionT.EValue
 
 let eArrayString = anArray => anArray->BInternalExpressionValue.IEvArrayString->BExpressionT.EValue
@@ -37,17 +35,12 @@ let eLambda = (
   BInternalExpressionValue.IEvLambda({
     parameters: parameters,
     context: context,
-    body: NotFFI(expr)->castExpressionToInternalCode,
+    body: NotFFI(expr)->BModule.castExpressionToInternalCode,
   })->BExpressionT.EValue
 }
 
-let eLambdaFFI = (parameters: array<string>, ffiFn: ffiFn) => {
-  let context = BModule.emptyModule
-  BInternalExpressionValue.IEvLambda({
-    parameters: parameters,
-    context: context,
-    body: FFI(ffiFn)->castExpressionToInternalCode,
-  })->BExpressionT.EValue
+let eLambdaFFI = (ffiFn: ffiFn) => {
+  ffiFn->BModule.eLambdaFFIValue->BExpressionT.EValue
 }
 
 let eNumber = aNumber => aNumber->BInternalExpressionValue.IEvNumber->BExpressionT.EValue
@@ -81,6 +74,9 @@ let eBindExpression = (bindingExpr: expression, expression: expression): express
 let eBindExpressionDefault = (expression: expression): expression =>
   eFunction("$$_bindExpression_$$", list{expression})
 
+let eTernary = (truth: expression, trueCase: expression, falseCase: expression): expression =>
+  eFunction("$$_ternary_$$", list{truth, trueCase, falseCase})
+
 let eIdentifier = (name: string): expression =>
   name->BInternalExpressionValue.IEvSymbol->BExpressionT.EValue
 
diff --git a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_Expression_Lambda.res b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_Expression_Lambda.res
index 28bdbc02..717b4b1d 100644
--- a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_Expression_Lambda.res
+++ b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_Expression_Lambda.res
@@ -3,7 +3,7 @@ module ErrorValue = Reducer_ErrorValue
 module ExpressionBuilder = Reducer_Expression_ExpressionBuilder
 module ExpressionT = Reducer_Expression_T
 module ExpressionValue = ReducerInterface_InternalExpressionValue
-module Module = Reducer_Category_Module
+module Module = Reducer_Module
 module Result = Belt.Result
 
 type environment = ReducerInterface_InternalExpressionValue.environment
diff --git a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Category/Reducer_Category_Module.res b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Module/Reducer_Module.res
similarity index 87%
rename from packages/squiggle-lang/src/rescript/Reducer/Reducer_Category/Reducer_Category_Module.res
rename to packages/squiggle-lang/src/rescript/Reducer/Reducer_Module/Reducer_Module.res
index 584f9089..9f016f66 100644
--- a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Category/Reducer_Category_Module.res
+++ b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Module/Reducer_Module.res
@@ -1,5 +1,6 @@
 module ExpressionT = Reducer_Expression_T
 open ReducerInterface_InternalExpressionValue
+
 let expressionValueToString = toString
 
 type t = ReducerInterface_InternalExpressionValue.nameSpace
@@ -66,7 +67,7 @@ let set = (nameSpace: t, id: string, value): t => {
   Belt.Map.String.set(container, id, value)->NameSpace
 }
 
-let emptyModule: t = NameSpace(Belt.Map.String.empty)
+let emptyModule: t = NameSpace(emptyMap)
 
 let fromTypeScriptBindings = ReducerInterface_InternalExpressionValue.nameSpaceFromTypeScriptBindings
 let toTypeScriptBindings = ReducerInterface_InternalExpressionValue.nameSpaceToTypeScriptBindings
@@ -100,13 +101,25 @@ let removeOther = (nameSpace: t, other: t): t => {
   })->NameSpace
 }
 
+external castExpressionToInternalCode: ExpressionT.expressionOrFFI => internalCode = "%identity"
+let eLambdaFFIValue = (ffiFn: ExpressionT.ffiFn) => {
+  IEvLambda({
+    parameters: [],
+    context: emptyModule,
+    body: FFI(ffiFn)->castExpressionToInternalCode,
+  })
+}
+
 // -- Module definition
 let define = (nameSpace: t, identifier: string, ev: internalExpressionValue): t => {
   let NameSpace(container) = nameSpace
-  Belt.Map.String.set(container, identifier, ev)->NameSpace // TODO build lambda for polymorphic functions here
+  Belt.Map.String.set(container, identifier, ev)->NameSpace
 }
 let defineNumber = (nameSpace: t, identifier: string, value: float): t =>
   nameSpace->define(identifier, IEvNumber(value))
 
 let defineModule = (nameSpace: t, identifier: string, value: t): t =>
   nameSpace->define(identifier, toExpressionValue(value))
+
+let defineFFI = (nameSpace: t, identifier: string, value: ExpressionT.ffiFn): t =>
+  nameSpace->define(identifier, value->eLambdaFFIValue)
diff --git a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Module/Reducer_Module_Lambda.res b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Module/Reducer_Module_Lambda.res
new file mode 100644
index 00000000..d14f5729
--- /dev/null
+++ b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Module/Reducer_Module_Lambda.res
@@ -0,0 +1,29 @@
+module ExpressionBuilder = Reducer_Expression_ExpressionBuilder
+module ExpressionT = Reducer_Expression_T
+open Reducer_ErrorValue
+open ReducerInterface_InternalExpressionValue
+
+type expression = ExpressionT.expression
+
+let defaultCase = (call: functionCall) =>
+  REFunctionNotFound(call->functionCallToCallSignature->functionCallSignatureToString)->Error
+
+let defaultCaseFFIFn = (functionName: string): ExpressionT.ffiFn => {
+  (args: array<internalExpressionValue>, _environment: environment): result<
+    internalExpressionValue,
+    errorValue,
+  > => {
+    let call = (functionName, args)
+    defaultCase(call)
+  }
+}
+
+let defaultCaseFFI = (functionName: string): expression => {
+  ExpressionBuilder.eLambdaFFI(defaultCaseFFIFn(functionName))
+}
+
+let addGuard = (
+  guard: expression,
+  expression: expression,
+  previousExpression: expression,
+): expression => ExpressionBuilder.eTernary(guard, expression, previousExpression)
diff --git a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Peggy/Reducer_Peggy_GeneratedParser.peggy b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Peggy/Reducer_Peggy_GeneratedParser.peggy
index f7489c26..226d2b6f 100644
--- a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Peggy/Reducer_Peggy_GeneratedParser.peggy
+++ b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Peggy/Reducer_Peggy_GeneratedParser.peggy
@@ -343,11 +343,18 @@ typeModifierExpression = head:basicType tail:(_ '<-' _nl @typeModifier)*
     / modifier:identifier _ noArguments
       { return {modifier: modifier, args: []}; }
   
-basicType = typeConstructor / typeArray / typeRecord / typeInParanthesis / typeIdentifier
+basicType = typeConstructor / typeArray / typeTuple / typeRecord / typeInParanthesis / typeIdentifier
 
 typeArray = '[' _nl elem:typeExpression _nl ']' 
   {return h.apply('$_typeArray_$', elem)}
 
+typeTuple = '[' _nl elems:array_typeTupleArguments _nl ']' 
+  { return h.apply('$_typeTuple_$', h.constructArray(elems))}
+
+  array_typeTupleArguments
+    = head:typeExpression tail:(_ ',' _nl @typeExpression)* 
+    { return [head, ...tail]; }
+
 typeRecord = '{' _nl elems:array_typeRecordArguments _nl '}' 
   { return h.apply('$_typeRecord_$', h.constructRecord(elems)); }  
 
@@ -375,9 +382,3 @@ typeOfStatement = identifier:identifier _ ':' _nl typeExpression:typeExpression
   { return h.makeFunctionCall('$_typeOf_$', [identifier, typeExpression])}
 
 typeInParanthesis = '(' _nl typeExpression:typeExpression _nl ')' {return typeExpression}
-
-// TODO: min max example
-// TODO: Example of foo = {a: 2, b: 5}; type fooKeys = string $ memberOf(foo->keys)
-// TODO: Example of memberOf( [1,2,3] )
-// TODO: Example of $ 
-// TODO: Cons(a, list) | EmptyList
diff --git a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Peggy/Reducer_Peggy_Parse.res b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Peggy/Reducer_Peggy_Parse.res
index 1a37ccc0..67873c61 100644
--- a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Peggy/Reducer_Peggy_Parse.res
+++ b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Peggy/Reducer_Peggy_Parse.res
@@ -5,7 +5,11 @@ type node = {"type": string}
 
 @module("./Reducer_Peggy_GeneratedParser.js") external parse__: string => node = "parse"
 
-let syntaxErrorToLocation: Js.Exn.t => Reducer_ErrorValue.location = error => %raw(`error.location`)
+type withLocation = {"location": Reducer_ErrorValue.location}
+external castWithLocation: Js.Exn.t => withLocation = "%identity"
+
+let syntaxErrorToLocation = (error: Js.Exn.t): Reducer_ErrorValue.location =>
+  castWithLocation(error)["location"]
 
 @genType
 let parse = (expr: string): result<node, errorValue> =>
diff --git a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Type/Reducer_Type_T.res b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Type/Reducer_Type_T.res
new file mode 100644
index 00000000..9b847ca7
--- /dev/null
+++ b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Type/Reducer_Type_T.res
@@ -0,0 +1,82 @@
+module InternalExpressionValue = ReducerInterface_InternalExpressionValue
+open InternalExpressionValue
+
+type rec iType =
+  | ItTypeIdentifier(string)
+  | ItModifiedType({modifiedType: iType})
+  | ItTypeOr({typeOr: array<iType>})
+  | ItTypeFunction({inputs: array<iType>, output: iType})
+  | ItTypeArray({element: iType})
+  | ItTypeTuple({elements: array<iType>})
+  | ItTypeRecord({properties: Belt.Map.String.t<iType>})
+
+let rec fromTypeMap = typeMap => {
+  let default = IEvString("")
+  let evTypeTag: InternalExpressionValue.t = Belt.Map.String.getWithDefault(
+    typeMap,
+    "typeTag",
+    default,
+  )
+  let evTypeIdentifier: InternalExpressionValue.t = Belt.Map.String.getWithDefault(
+    typeMap,
+    "typeIdentifier",
+    default,
+  )
+  let evTypeOr: InternalExpressionValue.t = Belt.Map.String.getWithDefault(
+    typeMap,
+    "typeOr",
+    default,
+  )
+  let evInputs: InternalExpressionValue.t = Belt.Map.String.getWithDefault(
+    typeMap,
+    "inputs",
+    default,
+  )
+  let evOutput: InternalExpressionValue.t = Belt.Map.String.getWithDefault(
+    typeMap,
+    "output",
+    default,
+  )
+  let evElement: InternalExpressionValue.t = Belt.Map.String.getWithDefault(
+    typeMap,
+    "element",
+    default,
+  )
+  let evElements: InternalExpressionValue.t = Belt.Map.String.getWithDefault(
+    typeMap,
+    "elements",
+    default,
+  )
+  let evProperties: InternalExpressionValue.t = Belt.Map.String.getWithDefault(
+    typeMap,
+    "properties",
+    default,
+  )
+  //TODO: map type modifiers
+  switch evTypeTag {
+  | IEvString("typeIdentifier") => ItModifiedType({modifiedType: fromIEvValue(evTypeIdentifier)})
+  | IEvString("typeOr") => ItTypeOr({typeOr: fromIEvArray(evTypeOr)})
+  | IEvString("typeFunction") =>
+    ItTypeFunction({inputs: fromIEvArray(evInputs), output: fromIEvValue(evOutput)})
+  | IEvString("typeArray") => ItTypeArray({element: fromIEvValue(evElement)})
+  | IEvString("typeTuple") => ItTypeTuple({elements: fromIEvArray(evElements)})
+  | IEvString("typeRecord") => ItTypeRecord({properties: fromIEvRecord(evProperties)})
+  | _ => raise(Reducer_Exception.ImpossibleException)
+  }
+}
+and fromIEvValue = (ievValue: InternalExpressionValue.t) =>
+  switch ievValue {
+  | IEvTypeIdentifier(typeIdentifier) => ItTypeIdentifier({typeIdentifier})
+  | IEvType(typeMap) => fromTypeMap(typeMap)
+  | _ => raise(Reducer_Exception.ImpossibleException)
+  }
+and fromIEvArray = (ievArray: InternalExpressionValue.t) =>
+  switch ievArray {
+  | IEvArray(array) => array->Belt.Array.map(fromIEvValue)
+  | _ => raise(Reducer_Exception.ImpossibleException)
+  }
+and fromIEvRecord = (ievRecord: InternalExpressionValue.t) =>
+  switch ievRecord {
+  | IEvRecord(record) => record->Belt.Map.String.map(fromIEvValue)
+  | _ => raise(Reducer_Exception.ImpossibleException)
+  }
diff --git a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Type/Reducer_Type_TypeBuilder.res b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Type/Reducer_Type_TypeBuilder.res
new file mode 100644
index 00000000..e51f901a
--- /dev/null
+++ b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Type/Reducer_Type_TypeBuilder.res
@@ -0,0 +1,88 @@
+open ReducerInterface_InternalExpressionValue
+
+let typeModifier_memberOf = (aType, anArray) => {
+  let newRecord = Belt.Map.String.fromArray([
+    ("typeTag", IEvString("typeIdentifier")),
+    ("typeIdentifier", aType),
+  ])
+  newRecord->Belt.Map.String.set("memberOf", anArray)->IEvType->Ok
+}
+
+let typeModifier_memberOf_update = (aRecord, anArray) => {
+  aRecord->Belt.Map.String.set("memberOf", anArray)->IEvType->Ok
+}
+
+let typeModifier_min = (aType, value) => {
+  let newRecord = Belt.Map.String.fromArray([
+    ("typeTag", IEvString("typeIdentifier")),
+    ("typeIdentifier", aType),
+  ])
+  newRecord->Belt.Map.String.set("min", value)->IEvType->Ok
+}
+
+let typeModifier_min_update = (aRecord, value) => {
+  aRecord->Belt.Map.String.set("min", value)->IEvType->Ok
+}
+
+let typeModifier_max = (aType, value) => {
+  let newRecord = Belt.Map.String.fromArray([
+    ("typeTag", IEvString("typeIdentifier")),
+    ("typeIdentifier", aType),
+  ])
+  newRecord->Belt.Map.String.set("max", value)->IEvType->Ok
+}
+
+let typeModifier_max_update = (aRecord, value) =>
+  aRecord->Belt.Map.String.set("max", value)->IEvType->Ok
+
+let typeModifier_opaque_update = aRecord =>
+  aRecord->Belt.Map.String.set("opaque", IEvBool(true))->IEvType->Ok
+
+let typeOr = evArray => {
+  let newRecord = Belt.Map.String.fromArray([("typeTag", IEvString("typeOr")), ("typeOr", evArray)])
+  newRecord->IEvType->Ok
+}
+
+let typeFunction = anArray => {
+  let output = Belt.Array.getUnsafe(anArray, Js.Array2.length(anArray) - 1)
+  let inputs = Js.Array2.slice(anArray, ~start=0, ~end_=-1)
+  let newRecord = Belt.Map.String.fromArray([
+    ("typeTag", IEvString("typeFunction")),
+    ("inputs", IEvArray(inputs)),
+    ("output", output),
+  ])
+  newRecord->IEvType->Ok
+}
+
+let typeArray = element => {
+  let newRecord = Belt.Map.String.fromArray([
+    ("typeTag", IEvString("typeTuple")),
+    ("element", element),
+  ])
+  newRecord->IEvType->Ok
+}
+
+let typeTuple = anArray => {
+  let newRecord = Belt.Map.String.fromArray([
+    ("typeTag", IEvString("typeArray")),
+    ("elements", IEvArray(anArray)),
+  ])
+  newRecord->IEvType->Ok
+}
+
+let typeRecord = arrayOfPairs => {
+  let newProperties =
+    Belt.Array.map(arrayOfPairs, pairValue =>
+      switch pairValue {
+      | IEvArray([IEvString(key), valueValue]) => (key, valueValue)
+      | _ => ("wrong key type", pairValue->toStringWithType->IEvString)
+      }
+    )
+    ->Belt.Map.String.fromArray
+    ->IEvRecord
+  let newRecord = Belt.Map.String.fromArray([
+    ("typeTag", IEvString("typeRecord")),
+    ("properties", newProperties),
+  ])
+  newRecord->IEvType->Ok
+}
diff --git a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Type/Reducer_Type_TypeChecker.res b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Type/Reducer_Type_TypeChecker.res
new file mode 100644
index 00000000..b76ba357
--- /dev/null
+++ b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Type/Reducer_Type_TypeChecker.res
@@ -0,0 +1,81 @@
+//TODO: Work in progress. Code is commented to make an a release of other features
+
+module ExpressionT = Reducer_Expression_T
+module InternalExpressionValue = ReducerInterface_InternalExpressionValue
+module T = Reducer_Type_T
+module TypeBuilder = Reducer_Type_TypeBuilder
+open InternalExpressionValue
+
+type typeErrorValue =
+  | TypeError(T.iType, InternalExpressionValue.t)
+  | TypeErrorWithPosition(T.iType, InternalExpressionValue.t, int)
+  | TypeErrorWithProperty(T.iType, InternalExpressionValue.t, string)
+
+let rec isOfResolvedIType = (anIType: T.iType, aValue): result<bool, typeErrorValue> => {
+  let caseTypeIdentifier = (anUpperTypeName, aValue) => {
+    let aTypeName = anUpperTypeName->Js.String2.toLowerCase
+    let valueTypeName = aValue->valueToValueType->valueTypeToString->Js.String2.toLowerCase
+    switch aTypeName === valueTypeName {
+    | true => Ok(true)
+    | false => TypeError(anIType, aValue)->Error
+    }
+  }
+
+  let _caseRecord = (anIType, evValue, propertyMap, map) => {
+    Belt.Map.String.reduce(propertyMap, Ok(true), (acc, property, propertyType) => {
+      Belt.Result.flatMap(acc, _ =>
+        switch Belt.Map.String.get(map, property) {
+        | Some(propertyValue) => isOfResolvedIType(propertyType, propertyValue)
+        | None => TypeErrorWithProperty(anIType, evValue, property)->Error
+        }
+      )
+    })
+  }
+  let _caseArray = (anIType, evValue, elementType, anArray) => {
+    Belt.Array.reduceWithIndex(anArray, Ok(true), (acc, element, index) => {
+      switch isOfResolvedIType(elementType, element) {
+      | Ok(_) => acc
+      | Error(_) => TypeErrorWithPosition(anIType, evValue, index)->Error
+      }
+    })
+  }
+
+  switch anIType {
+  | ItTypeIdentifier(name) => caseTypeIdentifier(name, aValue)
+  // | ItModifiedType({modifiedType: anIType}) => raise(Reducer_Exception.ImpossibleException)
+  // | ItTypeOr({typeOr: anITypeArray}) => raise(Reducer_Exception.ImpossibleException)
+  // | ItTypeFunction({inputs: anITypeArray, output: anIType}) =>
+  //   raise(Reducer_Exception.ImpossibleException)
+  // | ItTypeArray({element: anIType}) => raise(Reducer_Exception.ImpossibleException)
+  // | ItTypeTuple({elements: anITypeArray}) => raise(Reducer_Exception.ImpossibleException)
+  // | ItTypeRecord({properties: anITypeMap}) => raise(Reducer_Exception.ImpossibleException)
+  | _ => raise(Reducer_Exception.ImpossibleException)
+  }
+}
+
+let isOfResolvedType = (aType: InternalExpressionValue.t, aValue): result<bool, typeErrorValue> =>
+  aType->T.fromIEvValue->isOfResolvedIType(aValue)
+
+// let checkArguments = (
+//   evFunctionType: InternalExpressionValue.t,
+//   args: array<InternalExpressionValue.t>,
+// ) => {
+//   let functionType = switch evFunctionType {
+//   | IEvRecord(functionType) => functionType
+//   | _ => raise(Reducer_Exception.ImpossibleException)
+//   }
+//   let evInputs = functionType->Belt.Map.String.getWithDefault("inputs", []->IEvArray)
+//   let inputs = switch evInputs {
+//   | IEvArray(inputs) => inputs
+//   | _ => raise(Reducer_Exception.ImpossibleException)
+//   }
+//   let rTupleType = TypeBuilder.typeTuple(inputs)
+//   Belt.Result.flatMap(rTupleType, tuppleType => isOfResolvedType(tuppleType, args->IEvArray))
+// }
+
+// let compileTypeExpression = (typeExpression: string, bindings: ExpressionT.bindings, reducerFn: ExpressionT.reducerFn) => {
+//     statement = `type compiled=${typeExpression}`
+
+// }
+
+//TODO: asGuard
diff --git a/packages/squiggle-lang/src/rescript/ReducerInterface/ReducerInterface_ExternalExpressionValue.res b/packages/squiggle-lang/src/rescript/ReducerInterface/ReducerInterface_ExternalExpressionValue.res
index bd5d8a35..9bd356d4 100644
--- a/packages/squiggle-lang/src/rescript/ReducerInterface/ReducerInterface_ExternalExpressionValue.res
+++ b/packages/squiggle-lang/src/rescript/ReducerInterface/ReducerInterface_ExternalExpressionValue.res
@@ -24,6 +24,7 @@ type rec externalExpressionValue =
   | EvDeclaration(lambdaDeclaration)
   | EvTypeIdentifier(string)
   | EvModule(record)
+  | EvType(record)
 and record = Js.Dict.t<externalExpressionValue>
 and externalBindings = record
 and lambdaValue = {
@@ -50,17 +51,18 @@ let rec toString = aValue =>
     }
   | EvBool(aBool) => Js.String.make(aBool)
   | EvCall(fName) => `:${fName}`
+  | EvDate(date) => DateTime.Date.toString(date)
+  | EvDeclaration(d) => Declaration.toString(d, r => toString(EvLambda(r)))
+  | EvDistribution(dist) => GenericDist.toString(dist)
   | EvLambda(lambdaValue) => `lambda(${Js.Array2.toString(lambdaValue.parameters)}=>internal code)`
+  | EvModule(m) => `@${m->toStringRecord}`
   | EvNumber(aNumber) => Js.String.make(aNumber)
+  | EvRecord(aRecord) => aRecord->toStringRecord
   | EvString(aString) => `'${aString}'`
   | EvSymbol(aString) => `:${aString}`
-  | EvRecord(aRecord) => aRecord->toStringRecord
-  | EvDistribution(dist) => GenericDist.toString(dist)
-  | EvDate(date) => DateTime.Date.toString(date)
   | EvTimeDuration(t) => DateTime.Duration.toString(t)
-  | EvDeclaration(d) => Declaration.toString(d, r => toString(EvLambda(r)))
+  | EvType(t) => `type${t->toStringRecord}`
   | EvTypeIdentifier(id) => `#${id}`
-  | EvModule(m) => `@${m->toStringRecord}`
   }
 and toStringRecord = aRecord => {
   let pairs =
@@ -88,72 +90,3 @@ type environment = DistributionOperation.env
 
 @genType
 let defaultEnvironment: environment = DistributionOperation.defaultEnv
-
-type expressionValueType =
-  | EvtArray
-  | EvtArrayString
-  | EvtBool
-  | EvtCall
-  | EvtDistribution
-  | EvtLambda
-  | EvtNumber
-  | EvtRecord
-  | EvtString
-  | EvtSymbol
-  | EvtDate
-  | EvtTimeDuration
-  | EvtDeclaration
-  | EvtTypeIdentifier
-  | EvtModule
-
-type functionCallSignature = CallSignature(string, array<expressionValueType>)
-type functionDefinitionSignature =
-  FunctionDefinitionSignature(functionCallSignature, expressionValueType)
-
-let valueToValueType = value =>
-  switch value {
-  | EvArray(_) => EvtArray
-  | EvArrayString(_) => EvtArrayString
-  | EvBool(_) => EvtBool
-  | EvCall(_) => EvtCall
-  | EvDistribution(_) => EvtDistribution
-  | EvLambda(_) => EvtLambda
-  | EvNumber(_) => EvtNumber
-  | EvRecord(_) => EvtRecord
-  | EvString(_) => EvtString
-  | EvSymbol(_) => EvtSymbol
-  | EvDate(_) => EvtDate
-  | EvTimeDuration(_) => EvtTimeDuration
-  | EvDeclaration(_) => EvtDeclaration
-  | EvTypeIdentifier(_) => EvtTypeIdentifier
-  | EvModule(_) => EvtModule
-  }
-
-let functionCallToCallSignature = (functionCall: functionCall): functionCallSignature => {
-  let (fn, args) = functionCall
-  CallSignature(fn, args->Js.Array2.map(valueToValueType))
-}
-
-let valueTypeToString = (valueType: expressionValueType): string =>
-  switch valueType {
-  | EvtArray => `Array`
-  | EvtArrayString => `ArrayString`
-  | EvtBool => `Bool`
-  | EvtCall => `Call`
-  | EvtDistribution => `Distribution`
-  | EvtLambda => `Lambda`
-  | EvtNumber => `Number`
-  | EvtRecord => `Record`
-  | EvtString => `String`
-  | EvtSymbol => `Symbol`
-  | EvtDate => `Date`
-  | EvtTimeDuration => `Duration`
-  | EvtDeclaration => `Declaration`
-  | EvtTypeIdentifier => `TypeIdentifier`
-  | EvtModule => `Module`
-  }
-
-let functionCallSignatureToString = (functionCallSignature: functionCallSignature): string => {
-  let CallSignature(fn, args) = functionCallSignature
-  `${fn}(${args->Js.Array2.map(valueTypeToString)->Js.Array2.toString})`
-}
diff --git a/packages/squiggle-lang/src/rescript/ReducerInterface/ReducerInterface_InternalExpressionValue.res b/packages/squiggle-lang/src/rescript/ReducerInterface/ReducerInterface_InternalExpressionValue.res
index 30de55dd..a6766071 100644
--- a/packages/squiggle-lang/src/rescript/ReducerInterface/ReducerInterface_InternalExpressionValue.res
+++ b/packages/squiggle-lang/src/rescript/ReducerInterface/ReducerInterface_InternalExpressionValue.res
@@ -7,8 +7,8 @@ type environment = ExternalExpressionValue.environment
 let defaultEnvironment = ExternalExpressionValue.defaultEnvironment
 
 type rec t =
-  | IEvArray(array<t>) // FIXME: Convert
-  | IEvArrayString(array<string>) // FIXME: Convert
+  | IEvArray(array<t>) // FIXME: Convert to MapInt
+  | IEvArrayString(array<string>)
   | IEvBool(bool)
   | IEvCall(string) // External function call
   | IEvDate(Js.Date.t)
@@ -21,6 +21,7 @@ type rec t =
   | IEvString(string)
   | IEvSymbol(string)
   | IEvTimeDuration(float)
+  | IEvType(map)
   | IEvTypeIdentifier(string)
 and map = Belt.Map.String.t<t>
 and nameSpace = NameSpace(Belt.Map.String.t<t>)
@@ -56,6 +57,7 @@ let rec toString = aValue =>
   | IEvRecord(aMap) => aMap->toStringMap
   | IEvString(aString) => `'${aString}'`
   | IEvSymbol(aString) => `:${aString}`
+  | IEvType(aMap) => aMap->toStringMap
   | IEvTimeDuration(t) => DateTime.Duration.toString(t)
   | IEvTypeIdentifier(id) => `#${id}`
   }
@@ -78,17 +80,18 @@ let toStringWithType = aValue =>
   | IEvArrayString(_) => `ArrayString::${toString(aValue)}`
   | IEvBool(_) => `Bool::${toString(aValue)}`
   | IEvCall(_) => `Call::${toString(aValue)}`
+  | IEvDate(_) => `Date::${toString(aValue)}`
+  | IEvDeclaration(_) => `Declaration::${toString(aValue)}`
   | IEvDistribution(_) => `Distribution::${toString(aValue)}`
   | IEvLambda(_) => `Lambda::${toString(aValue)}`
+  | IEvModule(_) => `Module::${toString(aValue)}`
   | IEvNumber(_) => `Number::${toString(aValue)}`
   | IEvRecord(_) => `Record::${toString(aValue)}`
   | IEvString(_) => `String::${toString(aValue)}`
   | IEvSymbol(_) => `Symbol::${toString(aValue)}`
-  | IEvDate(_) => `Date::${toString(aValue)}`
   | IEvTimeDuration(_) => `Date::${toString(aValue)}`
-  | IEvDeclaration(_) => `Declaration::${toString(aValue)}`
+  | IEvType(_) => `Type::${toString(aValue)}`
   | IEvTypeIdentifier(_) => `TypeIdentifier::${toString(aValue)}`
-  | IEvModule(_) => `Module::${toString(aValue)}`
   }
 
 let argsToString = (args: array<t>): string => {
@@ -120,17 +123,18 @@ type internalExpressionValueType =
   | EvtArrayString
   | EvtBool
   | EvtCall
+  | EvtDate
+  | EvtDeclaration
   | EvtDistribution
   | EvtLambda
+  | EvtModule
   | EvtNumber
   | EvtRecord
   | EvtString
   | EvtSymbol
-  | EvtDate
   | EvtTimeDuration
-  | EvtDeclaration
+  | EvtType
   | EvtTypeIdentifier
-  | EvtModule
 
 type functionCallSignature = CallSignature(string, array<internalExpressionValueType>)
 type functionDefinitionSignature =
@@ -142,17 +146,18 @@ let valueToValueType = value =>
   | IEvArrayString(_) => EvtArrayString
   | IEvBool(_) => EvtBool
   | IEvCall(_) => EvtCall
+  | IEvDate(_) => EvtDate
+  | IEvDeclaration(_) => EvtDeclaration
   | IEvDistribution(_) => EvtDistribution
   | IEvLambda(_) => EvtLambda
+  | IEvModule(_) => EvtModule
   | IEvNumber(_) => EvtNumber
   | IEvRecord(_) => EvtRecord
   | IEvString(_) => EvtString
   | IEvSymbol(_) => EvtSymbol
-  | IEvDate(_) => EvtDate
   | IEvTimeDuration(_) => EvtTimeDuration
-  | IEvDeclaration(_) => EvtDeclaration
+  | IEvType(_) => EvtType
   | IEvTypeIdentifier(_) => EvtTypeIdentifier
-  | IEvModule(_) => EvtModule
   }
 
 let functionCallToCallSignature = (functionCall: functionCall): functionCallSignature => {
@@ -166,17 +171,18 @@ let valueTypeToString = (valueType: internalExpressionValueType): string =>
   | EvtArrayString => `ArrayString`
   | EvtBool => `Bool`
   | EvtCall => `Call`
+  | EvtDate => `Date`
+  | EvtDeclaration => `Declaration`
   | EvtDistribution => `Distribution`
   | EvtLambda => `Lambda`
+  | EvtModule => `Module`
   | EvtNumber => `Number`
   | EvtRecord => `Record`
   | EvtString => `String`
   | EvtSymbol => `Symbol`
-  | EvtDate => `Date`
   | EvtTimeDuration => `Duration`
-  | EvtDeclaration => `Declaration`
+  | EvtType => `Type`
   | EvtTypeIdentifier => `TypeIdentifier`
-  | EvtModule => `Module`
   }
 
 let functionCallSignatureToString = (functionCallSignature: functionCallSignature): string => {
@@ -190,6 +196,11 @@ let rec toExternal = (iev: t): ExternalExpressionValue.t => {
   | IEvArrayString(v) => EvArrayString(v)
   | IEvBool(v) => EvBool(v)
   | IEvCall(v) => EvCall(v)
+  | IEvDeclaration(v) => {
+      let fn = lambdaValueToExternal(v.fn)
+      let args = v.args
+      EvDeclaration({fn: fn, args: args})
+    }
   | IEvDistribution(v) => EvDistribution(v)
   | IEvLambda(v) => EvLambda(lambdaValueToExternal(v))
   | IEvNumber(v) => EvNumber(v)
@@ -198,11 +209,7 @@ let rec toExternal = (iev: t): ExternalExpressionValue.t => {
   | IEvSymbol(v) => EvSymbol(v)
   | IEvDate(v) => EvDate(v)
   | IEvTimeDuration(v) => EvTimeDuration(v)
-  | IEvDeclaration(v) => {
-      let fn = lambdaValueToExternal(v.fn)
-      let args = v.args
-      EvDeclaration({fn: fn, args: args})
-    }
+  | IEvType(v) => v->mapToExternal->EvType
   | IEvTypeIdentifier(v) => EvTypeIdentifier(v)
   | IEvModule(v) => v->nameSpaceToTypeScriptBindings->EvModule
   }
@@ -228,21 +235,22 @@ let rec toInternal = (ev: ExternalExpressionValue.t): t => {
   | EvArrayString(v) => IEvArrayString(v)
   | EvBool(v) => IEvBool(v)
   | EvCall(v) => IEvCall(v)
-  | EvDistribution(v) => IEvDistribution(v)
-  | EvLambda(v) => IEvLambda(lambdaValueToInternal(v))
-  | EvNumber(v) => IEvNumber(v)
-  | EvRecord(v) => v->recordToInternal->IEvRecord
-  | EvString(v) => IEvString(v)
-  | EvSymbol(v) => IEvSymbol(v)
   | EvDate(v) => IEvDate(v)
-  | EvTimeDuration(v) => IEvTimeDuration(v)
   | EvDeclaration(v) => {
       let fn = lambdaValueToInternal(v.fn)
       let args = v.args
       IEvDeclaration({fn: fn, args: args})
     }
-  | EvTypeIdentifier(v) => IEvTypeIdentifier(v)
+  | EvDistribution(v) => IEvDistribution(v)
+  | EvLambda(v) => IEvLambda(lambdaValueToInternal(v))
   | EvModule(v) => v->nameSpaceFromTypeScriptBindings->IEvModule
+  | EvNumber(v) => IEvNumber(v)
+  | EvRecord(v) => v->recordToInternal->IEvRecord
+  | EvString(v) => IEvString(v)
+  | EvSymbol(v) => IEvSymbol(v)
+  | EvTimeDuration(v) => IEvTimeDuration(v)
+  | EvType(v) => v->recordToInternal->IEvType
+  | EvTypeIdentifier(v) => IEvTypeIdentifier(v)
   }
 }
 and recordToInternal = v =>
diff --git a/packages/squiggle-lang/src/rescript/ReducerInterface/ReducerInterface_StdLib.res b/packages/squiggle-lang/src/rescript/ReducerInterface/ReducerInterface_StdLib.res
index b714790a..c08b7cb1 100644
--- a/packages/squiggle-lang/src/rescript/ReducerInterface/ReducerInterface_StdLib.res
+++ b/packages/squiggle-lang/src/rescript/ReducerInterface/ReducerInterface_StdLib.res
@@ -1,4 +1,4 @@
-module Module = Reducer_Category_Module
+module Module = Reducer_Module
 
 let internalStdLib = Module.emptyModule->SquiggleLibrary_Math.makeBindings
 
diff --git a/packages/squiggle-lang/src/rescript/SquiggleLibrary/SquiggleLibrary_Math.res b/packages/squiggle-lang/src/rescript/SquiggleLibrary/SquiggleLibrary_Math.res
index ba049bea..d85927a1 100644
--- a/packages/squiggle-lang/src/rescript/SquiggleLibrary/SquiggleLibrary_Math.res
+++ b/packages/squiggle-lang/src/rescript/SquiggleLibrary/SquiggleLibrary_Math.res
@@ -1,5 +1,5 @@
-module Bindings = Reducer_Category_Module
-module Module = Reducer_Category_Module
+module Bindings = Reducer_Module
+module Module = Reducer_Module
 
 let availableNumbers: array<(string, float)> = [
   ("pi", Js.Math._PI),

From d888f685d0edde81bf808b5714b144c2b7585bad Mon Sep 17 00:00:00 2001
From: Ozzie Gooen <ozzieagooen@gmail.com>
Date: Sat, 2 Jul 2022 14:25:05 -0400
Subject: [PATCH 10/29] Quick fixes for EvType typescripting

---
 packages/squiggle-lang/src/js/index.ts            | 8 ++++++++
 packages/squiggle-lang/src/js/rescript_interop.ts | 1 +
 2 files changed, 9 insertions(+)

diff --git a/packages/squiggle-lang/src/js/index.ts b/packages/squiggle-lang/src/js/index.ts
index 6d847307..a1a97add 100644
--- a/packages/squiggle-lang/src/js/index.ts
+++ b/packages/squiggle-lang/src/js/index.ts
@@ -172,6 +172,14 @@ function createTsExport(
       return tag("lambdaDeclaration", x.value);
     case "EvTypeIdentifier":
       return tag("typeIdentifier", x.value);
+    case "EvType":
+      let typeResult: tagged<"type", { [key: string]: squiggleExpression }> = tag(
+        "type",
+        _.mapValues(x.value, (x: unknown) =>
+          convertRawToTypescript(x as rescriptExport, environment)
+        )
+      );
+      return typeResult
     case "EvModule":
       let moduleResult: tagged<
         "module",
diff --git a/packages/squiggle-lang/src/js/rescript_interop.ts b/packages/squiggle-lang/src/js/rescript_interop.ts
index 41baa2e3..dcba24e6 100644
--- a/packages/squiggle-lang/src/js/rescript_interop.ts
+++ b/packages/squiggle-lang/src/js/rescript_interop.ts
@@ -129,6 +129,7 @@ export type squiggleExpression =
   | tagged<"timeDuration", number>
   | tagged<"lambdaDeclaration", lambdaDeclaration>
   | tagged<"record", { [key: string]: squiggleExpression }>
+  | tagged<"type", { [key: string]: squiggleExpression }>
   | tagged<"typeIdentifier", string>
   | tagged<"module", { [key: string]: squiggleExpression }>;
 

From d6bdf5bfebec4806de35334d3c66d9c8bbcfdd29 Mon Sep 17 00:00:00 2001
From: Ozzie Gooen <ozzieagooen@gmail.com>
Date: Sat, 2 Jul 2022 15:02:43 -0400
Subject: [PATCH 11/29] Formatted code

---
 packages/squiggle-lang/src/js/index.ts | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/squiggle-lang/src/js/index.ts b/packages/squiggle-lang/src/js/index.ts
index a1a97add..5e4cf2c1 100644
--- a/packages/squiggle-lang/src/js/index.ts
+++ b/packages/squiggle-lang/src/js/index.ts
@@ -173,13 +173,14 @@ function createTsExport(
     case "EvTypeIdentifier":
       return tag("typeIdentifier", x.value);
     case "EvType":
-      let typeResult: tagged<"type", { [key: string]: squiggleExpression }> = tag(
-        "type",
-        _.mapValues(x.value, (x: unknown) =>
-          convertRawToTypescript(x as rescriptExport, environment)
-        )
-      );
-      return typeResult
+      let typeResult: tagged<"type", { [key: string]: squiggleExpression }> =
+        tag(
+          "type",
+          _.mapValues(x.value, (x: unknown) =>
+            convertRawToTypescript(x as rescriptExport, environment)
+          )
+        );
+      return typeResult;
     case "EvModule":
       let moduleResult: tagged<
         "module",

From 7a419742ad5f91afd07ff6a7deb828ad8c50632a Mon Sep 17 00:00:00 2001
From: Quinn Dougherty <quinnd@riseup.net>
Date: Mon, 4 Jul 2022 09:57:00 -0400
Subject: [PATCH 12/29] moved error message sooner for invalid mean and stdev

---
 .../Distributions/SymbolicDist/SymbolicDist.res      | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res b/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res
index 0b192b5f..e7471ffa 100644
--- a/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res
+++ b/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res
@@ -129,14 +129,18 @@ module Beta = {
     // https://en.wikipedia.org/wiki/Beta_distribution#Mean_and_sample_size
     let alpha = mean *. sampleSize
     let beta = (1.0 -. mean) *. sampleSize
-    alpha->make(beta)
+    make(alpha, beta)
   }
 
   let fromMeanAndStdev = (mean, stdev) => {
     // https://en.wikipedia.org/wiki/Beta_distribution#Mean_and_variance
-    let var = stdev *. stdev
-    let sampleSize = mean *. (1.0 -. mean) /. var -. 1.0
-    mean->fromMeanAndSampleSize(sampleSize)
+    if !(0.0 < stdev && stdev <= 0.5) || !(0.0 <= mean && mean <= 1.0) {
+      "Beta mean must be in [0,1] and stdev must be in (1,0.5]"->Error
+    } else {
+      let var = stdev *. stdev
+      let sampleSize = mean *. (1.0 -. mean) /. var -. 1.0
+      fromMeanAndSampleSize(mean, sampleSize)
+    }
   }
 }
 

From c0329dc73d231cefc26797e50d9e5c868efe3eb9 Mon Sep 17 00:00:00 2001
From: Umur Ozkul <umur@hightechmind.io>
Date: Tue, 5 Jul 2022 00:57:11 +0200
Subject: [PATCH 13/29] resolve PR786

---
 .../Reducer/Reducer_Type/Reducer_Type_TypeChecker.res         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Type/Reducer_Type_TypeChecker.res b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Type/Reducer_Type_TypeChecker.res
index b76ba357..18cb804a 100644
--- a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Type/Reducer_Type_TypeChecker.res
+++ b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Type/Reducer_Type_TypeChecker.res
@@ -1,5 +1,3 @@
-//TODO: Work in progress. Code is commented to make an a release of other features
-
 module ExpressionT = Reducer_Expression_T
 module InternalExpressionValue = ReducerInterface_InternalExpressionValue
 module T = Reducer_Type_T
@@ -42,6 +40,7 @@ let rec isOfResolvedIType = (anIType: T.iType, aValue): result<bool, typeErrorVa
 
   switch anIType {
   | ItTypeIdentifier(name) => caseTypeIdentifier(name, aValue)
+  // TODO: Work in progress. Code is commented to make an a release of other features
   // | ItModifiedType({modifiedType: anIType}) => raise(Reducer_Exception.ImpossibleException)
   // | ItTypeOr({typeOr: anITypeArray}) => raise(Reducer_Exception.ImpossibleException)
   // | ItTypeFunction({inputs: anITypeArray, output: anIType}) =>
@@ -56,6 +55,7 @@ let rec isOfResolvedIType = (anIType: T.iType, aValue): result<bool, typeErrorVa
 let isOfResolvedType = (aType: InternalExpressionValue.t, aValue): result<bool, typeErrorValue> =>
   aType->T.fromIEvValue->isOfResolvedIType(aValue)
 
+// TODO: Work in progress. Code is commented to make an a release of other features
 // let checkArguments = (
 //   evFunctionType: InternalExpressionValue.t,
 //   args: array<InternalExpressionValue.t>,

From 6edacc78e465f38f6b29cc5f4e96f276b50c808a Mon Sep 17 00:00:00 2001
From: Umur Ozkul <umur@hightechmind.io>
Date: Tue, 5 Jul 2022 04:30:08 +0200
Subject: [PATCH 14/29] foo test

---
 .../Reducer_Module_defineFFI_test.res         | 94 +++++++++++++++++++
 .../Reducer_Expression_Lambda.res             | 19 ++--
 .../Reducer_Expression_T.res                  |  2 +
 .../Reducer/Reducer_Module/Reducer_Module.res | 41 +++++++-
 .../Reducer_Module/Reducer_Module_Lambda.res  | 18 +---
 5 files changed, 150 insertions(+), 24 deletions(-)
 create mode 100644 packages/squiggle-lang/__tests__/Reducer/Reducer_Module/Reducer_Module_defineFFI_test.res

diff --git a/packages/squiggle-lang/__tests__/Reducer/Reducer_Module/Reducer_Module_defineFFI_test.res b/packages/squiggle-lang/__tests__/Reducer/Reducer_Module/Reducer_Module_defineFFI_test.res
new file mode 100644
index 00000000..1cc238a9
--- /dev/null
+++ b/packages/squiggle-lang/__tests__/Reducer/Reducer_Module/Reducer_Module_defineFFI_test.res
@@ -0,0 +1,94 @@
+module InternalExpressionValue = ReducerInterface_InternalExpressionValue
+module ExpressionT = Reducer_Expression_T
+module Module = Reducer_Module
+module Bindings = Reducer_Module
+module ErrorValue = Reducer_ErrorValue
+
+open Jest
+open Expect
+
+// ----------------------
+// --- Start of Module File
+// ----------------------
+
+module FooImplementation = {
+  let fooNumber = 0.0
+  let fooString = "Foo String"
+  let fooBool = true
+  let makeFoo = (a: string, b: string, _environment): string => `I am ${a}-foo and I am ${b}-foo`
+  let makeBar = (a: float, b: float, _environment): string =>
+    `I am ${a->Js.Float.toString}-bar and I am ${b->Js.Float.toString}-bar`
+}
+
+module FooFFI = {
+  let makeFoo: ExpressionT.optionFfiFn = (args: array<InternalExpressionValue.t>, environment) => {
+    switch args {
+    | [IEvString(a), IEvString(b)] => FooImplementation.makeFoo(a, b, environment)->IEvString->Some
+    | _ => None
+    }
+  }
+  let makeBar: ExpressionT.optionFfiFn = (args: array<InternalExpressionValue.t>, environment) =>
+    switch args {
+    | [IEvNumber(a), IEvNumber(b)] => FooImplementation.makeBar(a, b, environment)->IEvString->Some
+    | _ => None
+    }
+}
+
+let fooModule: Module.t =
+  Module.emptyStdLib
+  ->Module.defineNumber("fooNumber", FooImplementation.fooNumber)
+  ->Module.defineString("fooString", FooImplementation.fooString)
+  ->Module.defineBool("fooBool", FooImplementation.fooBool)
+  ->Module.defineFunction("makeFoo", FooFFI.makeFoo)
+  ->Module.defineFunction("makeBar", FooFFI.makeBar)
+
+let makeBindings = (prevBindings: Bindings.t): Bindings.t =>
+  prevBindings->Module.defineModule("Foo", fooModule)
+
+// ----------------------
+// --- End of Module File
+// ----------------------
+
+let stdLibWithFoo = Bindings.emptyBindings->makeBindings
+let evalWithFoo = sourceCode =>
+  Reducer_Expression.parse(sourceCode)->Belt.Result.flatMap(expr =>
+    Reducer_Expression.reduceExpression(
+      expr,
+      stdLibWithFoo,
+      InternalExpressionValue.defaultEnvironment,
+    )
+  )
+let evalToStringResultWithFoo = sourceCode =>
+  evalWithFoo(sourceCode)->InternalExpressionValue.toStringResult
+
+describe("Module", () => {
+  test("fooNumber", () => {
+    let result = evalToStringResultWithFoo("Foo.fooNumber")
+    expect(result)->toEqual("Ok(0)")
+  })
+  test("fooString", () => {
+    let result = evalToStringResultWithFoo("Foo.fooString")
+    expect(result)->toEqual("Ok('Foo String')")
+  })
+  test("fooBool", () => {
+    let result = evalToStringResultWithFoo("Foo.fooBool")
+    expect(result)->toEqual("Ok(true)")
+  })
+  test("fooBool", () => {
+    let result = evalToStringResultWithFoo("Foo.fooBool")
+    expect(result)->toEqual("Ok(true)")
+  })
+  test("makeFoo", () => {
+    let result = evalToStringResultWithFoo("Foo.makeFoo('a', 'b')")
+    expect(result)->toEqual("Ok('I am a-foo and I am b-foo')")
+  })
+  test("makeFoo wrong arguments", () => {
+    let result = evalToStringResultWithFoo("Foo.makeFoo(1, 2)")
+    // Notice the error with types
+    expect(result)->toEqual("Error(Function not found: makeFoo(Number,Number))")
+  })
+  test("makeBar", () => {
+    let result = evalToStringResultWithFoo("Foo.makeBar(1, 2)")
+    expect(result)->toEqual("Ok('I am 1-bar and I am 2-bar')")
+  })
+})
diff --git a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_Expression_Lambda.res b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_Expression_Lambda.res
index 717b4b1d..bf52b398 100644
--- a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_Expression_Lambda.res
+++ b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_Expression_Lambda.res
@@ -19,12 +19,19 @@ let checkArity = (
   lambdaValue: ExpressionValue.lambdaValue,
   args: list<internalExpressionValue>,
 ) => {
-  let argsLength = Belt.List.length(args)
-  let parametersLength = Js.Array2.length(lambdaValue.parameters)
-  if argsLength !== parametersLength {
-    ErrorValue.REArityError(None, parametersLength, argsLength)->Error
-  } else {
-    args->Ok
+  let reallyCheck = {
+    let argsLength = Belt.List.length(args)
+    let parametersLength = Js.Array2.length(lambdaValue.parameters)
+    if argsLength !== parametersLength {
+      ErrorValue.REArityError(None, parametersLength, argsLength)->Error
+    } else {
+      args->Ok
+    }
+  }
+  let exprOrFFI = castInternalCodeToExpression(lambdaValue.body)
+  switch exprOrFFI {
+  | NotFFI(_) => reallyCheck
+  | FFI(_) => args->Ok
   }
 }
 
diff --git a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_Expression_T.res b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_Expression_T.res
index 38910da2..dee70c88 100644
--- a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_Expression_T.res
+++ b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_Expression_T.res
@@ -71,6 +71,8 @@ type ffiFn = (
   environment,
 ) => result<internalExpressionValue, Reducer_ErrorValue.errorValue>
 
+type optionFfiFn = (array<internalExpressionValue>, environment) => option<internalExpressionValue>
+
 type expressionOrFFI =
   | NotFFI(expression)
   | FFI(ffiFn)
diff --git a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Module/Reducer_Module.res b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Module/Reducer_Module.res
index 9f016f66..62f9d8c7 100644
--- a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Module/Reducer_Module.res
+++ b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Module/Reducer_Module.res
@@ -1,4 +1,6 @@
 module ExpressionT = Reducer_Expression_T
+module InternalExpressionValue = ReducerInterface_InternalExpressionValue
+open Reducer_ErrorValue
 open ReducerInterface_InternalExpressionValue
 
 let expressionValueToString = toString
@@ -68,6 +70,7 @@ let set = (nameSpace: t, id: string, value): t => {
 }
 
 let emptyModule: t = NameSpace(emptyMap)
+let emptyBindings = emptyModule
 
 let fromTypeScriptBindings = ReducerInterface_InternalExpressionValue.nameSpaceFromTypeScriptBindings
 let toTypeScriptBindings = ReducerInterface_InternalExpressionValue.nameSpaceToTypeScriptBindings
@@ -110,16 +113,50 @@ let eLambdaFFIValue = (ffiFn: ExpressionT.ffiFn) => {
   })
 }
 
+let functionNotFoundError = (call: functionCall) =>
+  REFunctionNotFound(call->functionCallToCallSignature->functionCallSignatureToString)->Error
+
+let functionNotFoundErrorFFIFn = (functionName: string): ExpressionT.ffiFn => {
+  (args: array<internalExpressionValue>, _environment: environment): result<
+    internalExpressionValue,
+    errorValue,
+  > => {
+    let call = (functionName, args)
+    functionNotFoundError(call)
+  }
+}
+
+let convertOptionToFfiFn = (
+  myFunctionName: string,
+  myFunction: ExpressionT.optionFfiFn,
+): ExpressionT.ffiFn => {
+  (args: array<InternalExpressionValue.t>, environment) => {
+    myFunction(args, environment)
+    ->Belt.Option.map(v => v->Ok)
+    ->Belt.Option.getWithDefault(functionNotFoundErrorFFIFn(myFunctionName)(args, environment))
+  }
+}
+
 // -- Module definition
 let define = (nameSpace: t, identifier: string, ev: internalExpressionValue): t => {
   let NameSpace(container) = nameSpace
   Belt.Map.String.set(container, identifier, ev)->NameSpace
 }
+
 let defineNumber = (nameSpace: t, identifier: string, value: float): t =>
   nameSpace->define(identifier, IEvNumber(value))
 
+let defineString = (nameSpace: t, identifier: string, value: string): t =>
+  nameSpace->define(identifier, IEvString(value))
+
+let defineBool = (nameSpace: t, identifier: string, value: bool): t =>
+  nameSpace->define(identifier, IEvBool(value))
+
 let defineModule = (nameSpace: t, identifier: string, value: t): t =>
   nameSpace->define(identifier, toExpressionValue(value))
 
-let defineFFI = (nameSpace: t, identifier: string, value: ExpressionT.ffiFn): t =>
-  nameSpace->define(identifier, value->eLambdaFFIValue)
+let defineFunction = (nameSpace: t, identifier: string, value: ExpressionT.optionFfiFn): t => {
+  nameSpace->define(identifier, convertOptionToFfiFn(identifier, value)->eLambdaFFIValue)
+}
+
+let emptyStdLib: t = emptyModule->defineBool("stdlib", true)
diff --git a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Module/Reducer_Module_Lambda.res b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Module/Reducer_Module_Lambda.res
index d14f5729..7c3c5e54 100644
--- a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Module/Reducer_Module_Lambda.res
+++ b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Module/Reducer_Module_Lambda.res
@@ -1,25 +1,11 @@
 module ExpressionBuilder = Reducer_Expression_ExpressionBuilder
 module ExpressionT = Reducer_Expression_T
-open Reducer_ErrorValue
-open ReducerInterface_InternalExpressionValue
+// open ReducerInterface_InternalExpressionValue
 
 type expression = ExpressionT.expression
 
-let defaultCase = (call: functionCall) =>
-  REFunctionNotFound(call->functionCallToCallSignature->functionCallSignatureToString)->Error
-
-let defaultCaseFFIFn = (functionName: string): ExpressionT.ffiFn => {
-  (args: array<internalExpressionValue>, _environment: environment): result<
-    internalExpressionValue,
-    errorValue,
-  > => {
-    let call = (functionName, args)
-    defaultCase(call)
-  }
-}
-
 let defaultCaseFFI = (functionName: string): expression => {
-  ExpressionBuilder.eLambdaFFI(defaultCaseFFIFn(functionName))
+  ExpressionBuilder.eLambdaFFI(Reducer_Module.functionNotFoundErrorFFIFn(functionName))
 }
 
 let addGuard = (

From 742fc10e0d8c266e970955780ed26d09693a087e Mon Sep 17 00:00:00 2001
From: Umur Ozkul <umur@hightechmind.io>
Date: Tue, 5 Jul 2022 05:54:56 +0200
Subject: [PATCH 15/29] comment

---
 .../Reducer/Reducer_Module/Reducer_Module_defineFFI_test.res | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/squiggle-lang/__tests__/Reducer/Reducer_Module/Reducer_Module_defineFFI_test.res b/packages/squiggle-lang/__tests__/Reducer/Reducer_Module/Reducer_Module_defineFFI_test.res
index 1cc238a9..7b6a5612 100644
--- a/packages/squiggle-lang/__tests__/Reducer/Reducer_Module/Reducer_Module_defineFFI_test.res
+++ b/packages/squiggle-lang/__tests__/Reducer/Reducer_Module/Reducer_Module_defineFFI_test.res
@@ -12,7 +12,10 @@ open Expect
 // ----------------------
 
 module FooImplementation = {
-  let fooNumber = 0.0
+  // As this is a Rescript module, functions can use other functions in this module 
+  // and in other stdLib modules implemented this way. 
+  // Embedding function definitions in to switch statements is a bad practice 
+  // - to reduce line count or to   let fooNumber = 0.0
   let fooString = "Foo String"
   let fooBool = true
   let makeFoo = (a: string, b: string, _environment): string => `I am ${a}-foo and I am ${b}-foo`

From a285d0b493a0057545b20cf536e2b59a0ea5a97a Mon Sep 17 00:00:00 2001
From: Umur Ozkul <umur@hightechmind.io>
Date: Tue, 5 Jul 2022 06:17:03 +0200
Subject: [PATCH 16/29] fix peggy warning

---
 .../Reducer/Reducer_Peggy/Reducer_Peggy_GeneratedParser.peggy | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Peggy/Reducer_Peggy_GeneratedParser.peggy b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Peggy/Reducer_Peggy_GeneratedParser.peggy
index 226d2b6f..e2b5234e 100644
--- a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Peggy/Reducer_Peggy_GeneratedParser.peggy
+++ b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Peggy/Reducer_Peggy_GeneratedParser.peggy
@@ -154,9 +154,7 @@ unary
   unaryOperator "unary operator"
   = ('-' / '.-' / '!' ) 
 
-postOperator = indexedValue
-
-indexedValue
+postOperator
   = collectionElement
   / atom
 

From f5f2d94fbc198a2d008f376e1b8b1570384842b7 Mon Sep 17 00:00:00 2001
From: Umur Ozkul <umur@hightechmind.io>
Date: Tue, 5 Jul 2022 06:17:15 +0200
Subject: [PATCH 17/29] remove dead line

---
 .../Reducer/Reducer_Expression/Reducer_Expression_Lambda.res     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_Expression_Lambda.res b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_Expression_Lambda.res
index bf52b398..fabae269 100644
--- a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_Expression_Lambda.res
+++ b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_Expression_Lambda.res
@@ -10,7 +10,6 @@ type environment = ReducerInterface_InternalExpressionValue.environment
 type expression = ExpressionT.expression
 type expressionOrFFI = ExpressionT.expressionOrFFI
 type internalExpressionValue = ReducerInterface_InternalExpressionValue.t
-// type tmpExternalBindings = ReducerInterface_InternalExpressionValue.tmpExternalBindings
 type internalCode = ReducerInterface_InternalExpressionValue.internalCode
 
 external castInternalCodeToExpression: internalCode => expressionOrFFI = "%identity"

From 746ca695afe2eb9aec5f9961283004c30c192ce2 Mon Sep 17 00:00:00 2001
From: Umur Ozkul <umur@hightechmind.io>
Date: Tue, 5 Jul 2022 06:17:26 +0200
Subject: [PATCH 18/29] fix test

---
 .../Reducer/Reducer_Module/Reducer_Module_defineFFI_test.res   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/squiggle-lang/__tests__/Reducer/Reducer_Module/Reducer_Module_defineFFI_test.res b/packages/squiggle-lang/__tests__/Reducer/Reducer_Module/Reducer_Module_defineFFI_test.res
index 7b6a5612..9573654f 100644
--- a/packages/squiggle-lang/__tests__/Reducer/Reducer_Module/Reducer_Module_defineFFI_test.res
+++ b/packages/squiggle-lang/__tests__/Reducer/Reducer_Module/Reducer_Module_defineFFI_test.res
@@ -15,7 +15,8 @@ module FooImplementation = {
   // As this is a Rescript module, functions can use other functions in this module 
   // and in other stdLib modules implemented this way. 
   // Embedding function definitions in to switch statements is a bad practice 
-  // - to reduce line count or to   let fooNumber = 0.0
+  // - to reduce line count or to   
+  let fooNumber = 0.0
   let fooString = "Foo String"
   let fooBool = true
   let makeFoo = (a: string, b: string, _environment): string => `I am ${a}-foo and I am ${b}-foo`

From 29c9cad510454a3afa5cc4d229101bcba362e30c Mon Sep 17 00:00:00 2001
From: Umur Ozkul <umur@hightechmind.io>
Date: Tue, 5 Jul 2022 06:19:42 +0200
Subject: [PATCH 19/29] remove dead line

---
 .../rescript/Reducer/Reducer_Module/Reducer_Module_Lambda.res    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Module/Reducer_Module_Lambda.res b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Module/Reducer_Module_Lambda.res
index 7c3c5e54..922b5c6e 100644
--- a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Module/Reducer_Module_Lambda.res
+++ b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Module/Reducer_Module_Lambda.res
@@ -1,6 +1,5 @@
 module ExpressionBuilder = Reducer_Expression_ExpressionBuilder
 module ExpressionT = Reducer_Expression_T
-// open ReducerInterface_InternalExpressionValue
 
 type expression = ExpressionT.expression
 

From e0b2632028cd1ddb318a0e7e48bc9385e5c14be8 Mon Sep 17 00:00:00 2001
From: Umur Ozkul <umur@hightechmind.io>
Date: Tue, 5 Jul 2022 06:20:57 +0200
Subject: [PATCH 20/29] format

---
 .../Reducer_Module/Reducer_Module_defineFFI_test.res      | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/squiggle-lang/__tests__/Reducer/Reducer_Module/Reducer_Module_defineFFI_test.res b/packages/squiggle-lang/__tests__/Reducer/Reducer_Module/Reducer_Module_defineFFI_test.res
index 9573654f..fa3f13fa 100644
--- a/packages/squiggle-lang/__tests__/Reducer/Reducer_Module/Reducer_Module_defineFFI_test.res
+++ b/packages/squiggle-lang/__tests__/Reducer/Reducer_Module/Reducer_Module_defineFFI_test.res
@@ -12,10 +12,10 @@ open Expect
 // ----------------------
 
 module FooImplementation = {
-  // As this is a Rescript module, functions can use other functions in this module 
-  // and in other stdLib modules implemented this way. 
-  // Embedding function definitions in to switch statements is a bad practice 
-  // - to reduce line count or to   
+  // As this is a Rescript module, functions can use other functions in this module
+  // and in other stdLib modules implemented this way.
+  // Embedding function definitions in to switch statements is a bad practice
+  // - to reduce line count or to
   let fooNumber = 0.0
   let fooString = "Foo String"
   let fooBool = true

From c4d2ad922a3df2dbaf87675124fedd4e95721567 Mon Sep 17 00:00:00 2001
From: Sam Nolan <samnolan555@gmail.com>
Date: Tue, 5 Jul 2022 17:32:02 +1000
Subject: [PATCH 21/29] Respond to PR comments

---
 packages/components/README.md                 |  4 +-
 .../src/components/SquiggleEditor.tsx         | 41 ++++++++-----------
 .../src/components/SquigglePlayground.tsx     | 19 ++++-----
 packages/components/src/lib/hooks.ts          | 22 +++++++++-
 .../src/stories/SquiggleEditor.stories.mdx    | 13 ++++++
 .../stories/SquigglePlayground.stories.mdx    |  2 +-
 6 files changed, 61 insertions(+), 40 deletions(-)

diff --git a/packages/components/README.md b/packages/components/README.md
index bc8d3123..63a98d34 100644
--- a/packages/components/README.md
+++ b/packages/components/README.md
@@ -20,7 +20,7 @@ Add to `App.js`:
 ```jsx
 import { SquiggleEditor } from "@quri/squiggle-components";
 <SquiggleEditor
-  squiggleString="x = beta($alpha, 10); x + $shift"
+  defaultCode="x = beta($alpha, 10); x + $shift"
   jsImports={{ alpha: 3, shift: 20 }}
 />;
 ```
@@ -50,7 +50,7 @@ export function DynamicSquiggleChart({ squiggleString }) {
   } else {
     return (
         <SquiggleChart
-          squiggleString={squiggleString}
+          defaultCode={squiggleString}
           width={445}
           height={200}
           showSummary={true}
diff --git a/packages/components/src/components/SquiggleEditor.tsx b/packages/components/src/components/SquiggleEditor.tsx
index 78aec513..9ef2bea7 100644
--- a/packages/components/src/components/SquiggleEditor.tsx
+++ b/packages/components/src/components/SquiggleEditor.tsx
@@ -1,10 +1,10 @@
-import React, { useState } from "react";
+import React from "react";
 import { CodeEditor } from "./CodeEditor";
 import { environment, bindings, jsImports } from "@quri/squiggle-lang";
 import { defaultImports, defaultBindings } from "@quri/squiggle-lang";
 import { SquiggleContainer } from "./SquiggleContainer";
 import { SquiggleChart, SquiggleChartProps } from "./SquiggleChart";
-import { useSquigglePartial } from "../lib/hooks";
+import { useSquigglePartial, useMaybeControlledValue } from "../lib/hooks";
 import { SquiggleErrorAlert } from "./SquiggleErrorAlert";
 
 const WrappedCodeEditor: React.FC<{
@@ -28,21 +28,16 @@ export type SquiggleEditorProps = SquiggleChartProps & {
 };
 
 export const SquiggleEditor: React.FC<SquiggleEditorProps> = (props) => {
-  let defaultCode = props.defaultCode ?? "";
-  const [uncontrolledCode, setCode] = useState(defaultCode);
-  let code = props.code ?? uncontrolledCode;
+  const [code, setCode] = useMaybeControlledValue({
+    value: props.code,
+    defaultValue: props.defaultCode,
+    onChange: props.onCodeChange,
+  });
 
   let chartProps = { ...props, code };
   return (
     <SquiggleContainer>
-      <WrappedCodeEditor
-        code={code}
-        setCode={(code) => {
-          if (props.onCodeChange) props.onCodeChange(code);
-
-          if (props.code === undefined) setCode(code);
-        }}
-      />
+      <WrappedCodeEditor code={code} setCode={setCode} />
       <SquiggleChart {...chartProps} />
     </SquiggleContainer>
   );
@@ -66,7 +61,7 @@ export interface SquigglePartialProps {
 }
 
 export const SquigglePartial: React.FC<SquigglePartialProps> = ({
-  code,
+  code: controlledCode,
   defaultCode = "",
   onChange,
   onCodeChange,
@@ -74,11 +69,14 @@ export const SquigglePartial: React.FC<SquigglePartialProps> = ({
   environment,
   jsImports = defaultImports,
 }: SquigglePartialProps) => {
-  const [uncontrolledCode, setCode] = useState(defaultCode);
-  let codeProp = code ?? uncontrolledCode;
+  const [code, setCode] = useMaybeControlledValue<string>({
+    value: controlledCode,
+    defaultValue: defaultCode,
+    onChange: onCodeChange,
+  });
 
   const result = useSquigglePartial({
-    code: codeProp,
+    code,
     bindings,
     environment,
     jsImports,
@@ -87,14 +85,7 @@ export const SquigglePartial: React.FC<SquigglePartialProps> = ({
 
   return (
     <SquiggleContainer>
-      <WrappedCodeEditor
-        code={codeProp}
-        setCode={(code) => {
-          if (onCodeChange) onCodeChange(code);
-
-          if (code === undefined) setCode(code);
-        }}
-      />
+      <WrappedCodeEditor code={code} setCode={setCode} />
       {result.tag !== "Ok" ? <SquiggleErrorAlert error={result.value} /> : null}
     </SquiggleContainer>
   );
diff --git a/packages/components/src/components/SquigglePlayground.tsx b/packages/components/src/components/SquigglePlayground.tsx
index e96a1053..4b01a344 100644
--- a/packages/components/src/components/SquigglePlayground.tsx
+++ b/packages/components/src/components/SquigglePlayground.tsx
@@ -1,6 +1,7 @@
 import React, { FC, Fragment, useState, useEffect } from "react";
 import { Path, useForm, UseFormRegister, useWatch } from "react-hook-form";
 import * as yup from "yup";
+import { useMaybeControlledValue } from "../lib/hooks";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { Tab } from "@headlessui/react";
 import {
@@ -216,7 +217,11 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
   onSettingsChange,
   showEditor = true,
 }) => {
-  const [uncontrolledCode, setUncontrolledCode] = useState(defaultCode);
+  const [code, setCode] = useMaybeControlledValue({
+    value: controlledCode,
+    defaultValue: defaultCode,
+    onChange: onCodeChange,
+  });
   const [importString, setImportString] = useState("{}");
   const [imports, setImports] = useState({});
   const [importsAreValid, setImportsAreValid] = useState(true);
@@ -261,8 +266,6 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
     }
   };
 
-  const code = controlledCode ?? uncontrolledCode;
-
   const samplingSettings = (
     <div className="space-y-6 p-3 max-w-xl">
       <div>
@@ -434,14 +437,8 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
   const firstTab = vars.showEditor ? (
     <div className="border border-slate-200">
       <CodeEditor
-        value={code}
-        onChange={(newCode) => {
-          if (controlledCode === undefined) {
-            // uncontrolled mode
-            setUncontrolledCode(newCode);
-          }
-          onCodeChange?.(newCode);
-        }}
+        value={code ?? ""}
+        onChange={setCode}
         oneLine={false}
         showGutter={true}
         height={height - 1}
diff --git a/packages/components/src/lib/hooks.ts b/packages/components/src/lib/hooks.ts
index 03b8c69d..b52c23be 100644
--- a/packages/components/src/lib/hooks.ts
+++ b/packages/components/src/lib/hooks.ts
@@ -5,7 +5,7 @@ import {
   run,
   runPartial,
 } from "@quri/squiggle-lang";
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 type SquiggleArgs<T extends ReturnType<typeof run | typeof runPartial>> = {
   code: string;
@@ -42,3 +42,23 @@ export const useSquigglePartial = (
 export const useSquiggle = (args: SquiggleArgs<ReturnType<typeof run>>) => {
   return useSquiggleAny(args, run);
 };
+
+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];
+}
diff --git a/packages/components/src/stories/SquiggleEditor.stories.mdx b/packages/components/src/stories/SquiggleEditor.stories.mdx
index e51e3e33..086614c6 100644
--- a/packages/components/src/stories/SquiggleEditor.stories.mdx
+++ b/packages/components/src/stories/SquiggleEditor.stories.mdx
@@ -21,6 +21,19 @@ the distribution.
   </Story>
 </Canvas>
 
+It's also possible to create a controlled version of the same component
+
+<Canvas>
+  <Story
+    name="Controlled"
+    args={{
+      code: "normal(5,2)",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
 You can also name variables like so:
 
 <Canvas>
diff --git a/packages/components/src/stories/SquigglePlayground.stories.mdx b/packages/components/src/stories/SquigglePlayground.stories.mdx
index eb39bbba..0c198f42 100644
--- a/packages/components/src/stories/SquigglePlayground.stories.mdx
+++ b/packages/components/src/stories/SquigglePlayground.stories.mdx
@@ -14,7 +14,7 @@ including sampling settings, in squiggle.
   <Story
     name="Normal"
     args={{
-      initialSquiggleString: "normal(5,2)",
+      defaultCode: "normal(5,2)",
       height: 800,
     }}
   >

From 2c2f299e466e889d81f952b0b4ad7f6112448cd5 Mon Sep 17 00:00:00 2001
From: Sam Nolan <samnolan555@gmail.com>
Date: Tue, 5 Jul 2022 17:43:13 +1000
Subject: [PATCH 22/29] Fix build error

---
 packages/components/src/components/SquiggleEditor.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/SquiggleEditor.tsx b/packages/components/src/components/SquiggleEditor.tsx
index 9ef2bea7..027eecb9 100644
--- a/packages/components/src/components/SquiggleEditor.tsx
+++ b/packages/components/src/components/SquiggleEditor.tsx
@@ -30,7 +30,7 @@ export type SquiggleEditorProps = SquiggleChartProps & {
 export const SquiggleEditor: React.FC<SquiggleEditorProps> = (props) => {
   const [code, setCode] = useMaybeControlledValue({
     value: props.code,
-    defaultValue: props.defaultCode,
+    defaultValue: props.defaultCode ?? "",
     onChange: props.onCodeChange,
   });
 

From b3ac8848d2ac8bfc6a7061a7ce1db299d66fa0ac Mon Sep 17 00:00:00 2001
From: Umur Ozkul <umur@hightechmind.io>
Date: Tue, 5 Jul 2022 15:27:56 +0200
Subject: [PATCH 23/29] comment

---
 .../Reducer/Reducer_Module/Reducer_Module_defineFFI_test.res    | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/squiggle-lang/__tests__/Reducer/Reducer_Module/Reducer_Module_defineFFI_test.res b/packages/squiggle-lang/__tests__/Reducer/Reducer_Module/Reducer_Module_defineFFI_test.res
index fa3f13fa..a06c7a57 100644
--- a/packages/squiggle-lang/__tests__/Reducer/Reducer_Module/Reducer_Module_defineFFI_test.res
+++ b/packages/squiggle-lang/__tests__/Reducer/Reducer_Module/Reducer_Module_defineFFI_test.res
@@ -24,6 +24,8 @@ module FooImplementation = {
     `I am ${a->Js.Float.toString}-bar and I am ${b->Js.Float.toString}-bar`
 }
 
+// There is a potential for type modules to define lift functions
+// for their own type to get rid of switch statements.
 module FooFFI = {
   let makeFoo: ExpressionT.optionFfiFn = (args: array<InternalExpressionValue.t>, environment) => {
     switch args {

From 9208330038470997328a4c6b3363eb487bf496d5 Mon Sep 17 00:00:00 2001
From: Vyacheslav Matyukhin <me@berekuk.ru>
Date: Sun, 26 Jun 2022 21:15:09 +0300
Subject: [PATCH 24/29] playground: manual play mode

---
 .../src/components/SquiggleChart.tsx          | 104 +++++++++--------
 .../src/components/SquigglePlayground.tsx     | 109 +++++++++++++++---
 .../components/src/components/ui/Toggle.tsx   |  34 ++++++
 3 files changed, 180 insertions(+), 67 deletions(-)
 create mode 100644 packages/components/src/components/ui/Toggle.tsx

diff --git a/packages/components/src/components/SquiggleChart.tsx b/packages/components/src/components/SquiggleChart.tsx
index 9e352a62..bfb69a4e 100644
--- a/packages/components/src/components/SquiggleChart.tsx
+++ b/packages/components/src/components/SquiggleChart.tsx
@@ -48,57 +48,59 @@ export interface SquiggleChartProps {
 
 const defaultOnChange = () => {};
 
-export const SquiggleChart: React.FC<SquiggleChartProps> = ({
-  code = "",
-  environment,
-  onChange = defaultOnChange, // defaultOnChange must be constant, don't move its definition here
-  height = 200,
-  bindings = defaultBindings,
-  jsImports = defaultImports,
-  showSummary = false,
-  width,
-  showTypes = false,
-  showControls = false,
-  logX = false,
-  expY = false,
-  diagramStart = 0,
-  diagramStop = 10,
-  diagramCount = 100,
-}) => {
-  const result = useSquiggle({
-    code,
-    bindings,
+export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
+  ({
+    code = "",
     environment,
-    jsImports,
-    onChange,
-  });
+    onChange = defaultOnChange, // defaultOnChange must be constant, don't move its definition here
+    height = 200,
+    bindings = defaultBindings,
+    jsImports = defaultImports,
+    showSummary = false,
+    width,
+    showTypes = false,
+    showControls = false,
+    logX = false,
+    expY = false,
+    diagramStart = 0,
+    diagramStop = 10,
+    diagramCount = 100,
+  }) => {
+    const result = useSquiggle({
+      code,
+      bindings,
+      environment,
+      jsImports,
+      onChange,
+    });
 
-  if (result.tag !== "Ok") {
-    return <SquiggleErrorAlert error={result.value} />;
+    if (result.tag !== "Ok") {
+      return <SquiggleErrorAlert error={result.value} />;
+    }
+
+    let distributionPlotSettings = {
+      showControls,
+      showSummary,
+      logX,
+      expY,
+    };
+
+    let chartSettings = {
+      start: diagramStart,
+      stop: diagramStop,
+      count: diagramCount,
+    };
+
+    return (
+      <SquiggleItem
+        expression={result.value}
+        width={width}
+        height={height}
+        distributionPlotSettings={distributionPlotSettings}
+        showTypes={showTypes}
+        chartSettings={chartSettings}
+        environment={environment ?? defaultEnvironment}
+      />
+    );
   }
-
-  let distributionPlotSettings = {
-    showControls,
-    showSummary,
-    logX,
-    expY,
-  };
-
-  let chartSettings = {
-    start: diagramStart,
-    stop: diagramStop,
-    count: diagramCount,
-  };
-
-  return (
-    <SquiggleItem
-      expression={result.value}
-      width={width}
-      height={height}
-      distributionPlotSettings={distributionPlotSettings}
-      showTypes={showTypes}
-      chartSettings={chartSettings}
-      environment={environment ?? defaultEnvironment}
-    />
-  );
-};
+);
diff --git a/packages/components/src/components/SquigglePlayground.tsx b/packages/components/src/components/SquigglePlayground.tsx
index 4b01a344..74f48455 100644
--- a/packages/components/src/components/SquigglePlayground.tsx
+++ b/packages/components/src/components/SquigglePlayground.tsx
@@ -1,4 +1,4 @@
-import React, { FC, Fragment, useState, useEffect } from "react";
+import React, { FC, Fragment, useState, useEffect, useMemo } from "react";
 import { Path, useForm, UseFormRegister, useWatch } from "react-hook-form";
 import * as yup from "yup";
 import { useMaybeControlledValue } from "../lib/hooks";
@@ -6,10 +6,14 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { Tab } from "@headlessui/react";
 import {
   ChartSquareBarIcon,
+  CheckCircleIcon,
   CodeIcon,
   CogIcon,
   CurrencyDollarIcon,
   EyeIcon,
+  PauseIcon,
+  PlayIcon,
+  RefreshIcon,
 } from "@heroicons/react/solid";
 import clsx from "clsx";
 
@@ -20,6 +24,7 @@ import { CodeEditor } from "./CodeEditor";
 import { JsonEditor } from "./JsonEditor";
 import { ErrorAlert, SuccessAlert } from "./Alert";
 import { SquiggleContainer } from "./SquiggleContainer";
+import { Toggle } from "./ui/Toggle";
 
 interface PlaygroundProps {
   /** The initial squiggle string to put in the playground */
@@ -110,7 +115,7 @@ type StyledTabProps = {
 
 const StyledTab: React.FC<StyledTabProps> = ({ name, icon: Icon }) => {
   return (
-    <Tab key={name} as={Fragment}>
+    <Tab as={Fragment}>
       {({ selected }) => (
         <button className="group flex rounded-md focus:outline-none focus-visible:ring-offset-gray-100">
           <span
@@ -204,6 +209,53 @@ function Checkbox<T>({
   );
 }
 
+const PlayControls: React.FC<{
+  autoplay: boolean;
+  isStale: boolean;
+  onAutoplayChange: (value: boolean) => void;
+  onPlay: () => void;
+}> = ({ autoplay, isStale, onAutoplayChange, onPlay }) => {
+  const [playing, setPlaying] = useState(false);
+
+  const play = () => {
+    setPlaying(true);
+  };
+
+  // this is tricky; we need to render PlayControls first to make sure that the icon is spinning,
+  // and only then call onPlay (which freezes the UI)
+  useEffect(() => {
+    if (!autoplay && playing) {
+      onPlay();
+      setPlaying(false);
+    }
+    // don't add onPlay to the deps below
+  }, [autoplay, playing]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const CurrentPlayIcon = playing ? RefreshIcon : PlayIcon;
+
+  return (
+    <div className="flex space-x-1 items-center">
+      {autoplay ? null : (
+        <button onClick={play}>
+          <CurrentPlayIcon
+            className={clsx(
+              "w-8 h-8",
+              playing && "animate-spin",
+              isStale ? "text-indigo-500" : "text-gray-400"
+            )}
+          />
+        </button>
+      )}
+      <Toggle
+        texts={["Autoplay", "Paused"]}
+        icons={[CheckCircleIcon, PauseIcon]}
+        status={autoplay}
+        onChange={onAutoplayChange}
+      />
+    </div>
+  );
+};
+
 export const SquigglePlayground: FC<PlaygroundProps> = ({
   defaultCode = "",
   height = 500,
@@ -225,7 +277,14 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
   const [importString, setImportString] = useState("{}");
   const [imports, setImports] = useState({});
   const [importsAreValid, setImportsAreValid] = useState(true);
-  const { register, control } = useForm({
+
+  const [renderedCode, setRenderedCode] = useState(""); // used only if autoplay is false
+
+  const {
+    register,
+    control,
+    setValue: setFormValue,
+  } = useForm({
     resolver: yupResolver(schema),
     defaultValues: {
       sampleCount: 1000,
@@ -242,6 +301,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
       diagramStart: 0,
       diagramStop: 10,
       diagramCount: 20,
+      autoplay: true,
     },
   });
   const vars = useWatch({
@@ -252,10 +312,14 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
     onSettingsChange?.(vars);
   }, [vars, onSettingsChange]);
 
-  const env: environment = {
-    sampleCount: Number(vars.sampleCount),
-    xyPointLength: Number(vars.xyPointLength),
-  };
+  const env: environment = useMemo(
+    () => ({
+      sampleCount: Number(vars.sampleCount),
+      xyPointLength: Number(vars.xyPointLength),
+    }),
+    [vars.sampleCount, vars.xyPointLength]
+  );
+
   const getChangeJson = (r: string) => {
     setImportString(r);
     try {
@@ -418,7 +482,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
 
   const squiggleChart = (
     <SquiggleChart
-      code={code}
+      code={vars.autoplay ? code : renderedCode}
       environment={env}
       diagramStart={Number(vars.diagramStart)}
       diagramStop={Number(vars.diagramStop)}
@@ -470,15 +534,28 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
     <SquiggleContainer>
       <Tab.Group>
         <div className="pb-4">
-          <Tab.List className="flex w-fit p-0.5 mt-2 rounded-md bg-slate-100 hover:bg-slate-200">
-            <StyledTab
-              name={vars.showEditor ? "Code" : "Display"}
-              icon={vars.showEditor ? CodeIcon : EyeIcon}
+          <div className="flex justify-between items-center mt-2">
+            <Tab.List className="flex w-fit p-0.5 rounded-md bg-slate-100 hover:bg-slate-200">
+              <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} />
+            </Tab.List>
+            <PlayControls
+              autoplay={vars.autoplay || false}
+              isStale={!vars.autoplay && renderedCode !== code}
+              onPlay={() => {
+                setRenderedCode(code);
+              }}
+              onAutoplayChange={(newValue) => {
+                if (!newValue) setRenderedCode(code);
+                setFormValue("autoplay", newValue);
+              }}
             />
-            <StyledTab name="Sampling Settings" icon={CogIcon} />
-            <StyledTab name="View Settings" icon={ChartSquareBarIcon} />
-            <StyledTab name="Input Variables" icon={CurrencyDollarIcon} />
-          </Tab.List>
+          </div>
           {vars.showEditor ? withEditor : withoutEditor}
         </div>
       </Tab.Group>
diff --git a/packages/components/src/components/ui/Toggle.tsx b/packages/components/src/components/ui/Toggle.tsx
new file mode 100644
index 00000000..1b96db77
--- /dev/null
+++ b/packages/components/src/components/ui/Toggle.tsx
@@ -0,0 +1,34 @@
+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];
+};
+
+export const Toggle: React.FC<Props> = ({
+  texts: [onText, offText],
+  icons: [OnIcon, OffIcon],
+  status,
+  onChange,
+}) => {
+  const CurrentIcon = status ? OnIcon : OffIcon;
+  return (
+    <button
+      className={clsx(
+        "rounded-full py-1 bg-indigo-500 text-white text-xs font-semibold flex items-center space-x-1",
+        status ? "bg-indigo-500" : "bg-gray-400",
+        status ? "pl-1 pr-3" : "pl-3 pr-1",
+        !status && "flex-row-reverse space-x-reverse"
+      )}
+      onClick={() => onChange(!status)}
+    >
+      <CurrentIcon className="w-6 h-6" />
+      <span>{status ? onText : offText}</span>
+    </button>
+  );
+};

From 4fe30107a4f953f3be4b8d8f8f266af8b3996365 Mon Sep 17 00:00:00 2001
From: Vyacheslav Matyukhin <me@berekuk.ru>
Date: Sun, 26 Jun 2022 21:30:24 +0300
Subject: [PATCH 25/29] submit editor on cmd+enter

---
 packages/components/src/components/CodeEditor.tsx | 15 ++++++++++++++-
 .../src/components/SquigglePlayground.tsx         | 10 +++++++---
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/components/CodeEditor.tsx b/packages/components/src/components/CodeEditor.tsx
index c869b2ea..15802131 100644
--- a/packages/components/src/components/CodeEditor.tsx
+++ b/packages/components/src/components/CodeEditor.tsx
@@ -1,5 +1,5 @@
 import _ from "lodash";
-import React, { FC, useMemo } from "react";
+import React, { FC, useMemo, useRef } from "react";
 import AceEditor from "react-ace";
 
 import "ace-builds/src-noconflict/mode-golang";
@@ -8,6 +8,7 @@ import "ace-builds/src-noconflict/theme-github";
 interface CodeEditorProps {
   value: string;
   onChange: (value: string) => void;
+  onSubmit?: () => void;
   oneLine?: boolean;
   width?: number;
   height: number;
@@ -17,6 +18,7 @@ interface CodeEditorProps {
 export const CodeEditor: FC<CodeEditorProps> = ({
   value,
   onChange,
+  onSubmit,
   oneLine = false,
   showGutter = false,
   height,
@@ -24,6 +26,10 @@ export const CodeEditor: FC<CodeEditorProps> = ({
   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;
+
   return (
     <AceEditor
       value={value}
@@ -46,6 +52,13 @@ export const CodeEditor: FC<CodeEditorProps> = ({
         enableBasicAutocompletion: false,
         enableLiveAutocompletion: false,
       }}
+      commands={[
+        {
+          name: "submit",
+          bindKey: { mac: "Cmd-Enter", win: "Ctrl-Enter" },
+          exec: () => onSubmitRef.current?.(),
+        },
+      ]}
     />
   );
 };
diff --git a/packages/components/src/components/SquigglePlayground.tsx b/packages/components/src/components/SquigglePlayground.tsx
index 74f48455..06b3fd3d 100644
--- a/packages/components/src/components/SquigglePlayground.tsx
+++ b/packages/components/src/components/SquigglePlayground.tsx
@@ -330,6 +330,11 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
     }
   };
 
+  const manualPlay = () => {
+    if (vars.autoplay) return; // should we allow reruns even in autoplay mode?
+    setRenderedCode(code); // TODO - force play even if code hasn't changed
+  };
+
   const samplingSettings = (
     <div className="space-y-6 p-3 max-w-xl">
       <div>
@@ -503,6 +508,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
       <CodeEditor
         value={code ?? ""}
         onChange={setCode}
+        onSubmit={manualPlay}
         oneLine={false}
         showGutter={true}
         height={height - 1}
@@ -547,9 +553,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
             <PlayControls
               autoplay={vars.autoplay || false}
               isStale={!vars.autoplay && renderedCode !== code}
-              onPlay={() => {
-                setRenderedCode(code);
-              }}
+              onPlay={manualPlay}
               onAutoplayChange={(newValue) => {
                 if (!newValue) setRenderedCode(code);
                 setFormValue("autoplay", newValue);

From 87bb752c925fd00367251ae1096897e4cd1ea682 Mon Sep 17 00:00:00 2001
From: Vyacheslav Matyukhin <me@berekuk.ru>
Date: Sun, 26 Jun 2022 23:30:32 +0300
Subject: [PATCH 26/29] extract ui components from playground; show spinner on
 keyboard-initiated plays

---
 .../src/components/SquigglePlayground.tsx     | 576 ++++++++----------
 .../components/src/components/ui/Checkbox.tsx |  24 +
 .../src/components/ui/StyledTab.tsx           |  60 ++
 3 files changed, 349 insertions(+), 311 deletions(-)
 create mode 100644 packages/components/src/components/ui/Checkbox.tsx
 create mode 100644 packages/components/src/components/ui/StyledTab.tsx

diff --git a/packages/components/src/components/SquigglePlayground.tsx b/packages/components/src/components/SquigglePlayground.tsx
index 06b3fd3d..c5104508 100644
--- a/packages/components/src/components/SquigglePlayground.tsx
+++ b/packages/components/src/components/SquigglePlayground.tsx
@@ -1,9 +1,8 @@
-import React, { FC, Fragment, useState, useEffect, useMemo } from "react";
+import React, { FC, useState, useEffect, useMemo } from "react";
 import { Path, useForm, UseFormRegister, useWatch } from "react-hook-form";
 import * as yup from "yup";
 import { useMaybeControlledValue } from "../lib/hooks";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { Tab } from "@headlessui/react";
 import {
   ChartSquareBarIcon,
   CheckCircleIcon,
@@ -25,6 +24,8 @@ import { JsonEditor } from "./JsonEditor";
 import { ErrorAlert, SuccessAlert } from "./Alert";
 import { SquiggleContainer } from "./SquiggleContainer";
 import { Toggle } from "./ui/Toggle";
+import { Checkbox } from "./ui/Checkbox";
+import { StyledTab } from "./ui/StyledTab";
 
 interface PlaygroundProps {
   /** The initial squiggle string to put in the playground */
@@ -49,104 +50,46 @@ interface PlaygroundProps {
   showEditor?: 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),
-    chartHeight: yup.number().required().positive().integer().default(350),
-    leftSizePercent: yup
-      .number()
-      .required()
-      .positive()
-      .integer()
-      .min(10)
-      .max(100)
-      .default(50),
-    showTypes: yup.boolean(),
-    showControls: yup.boolean(),
-    showSummary: yup.boolean(),
-    showEditor: yup.boolean(),
-    logX: yup.boolean(),
-    expY: yup.boolean(),
-    showSettingsPage: yup.boolean().default(false),
-    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),
-  })
-  .required();
+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),
+  chartHeight: yup.number().required().positive().integer().default(350),
+  leftSizePercent: yup
+    .number()
+    .required()
+    .positive()
+    .integer()
+    .min(10)
+    .max(100)
+    .default(50),
+  showTypes: yup.boolean().required(),
+  showControls: yup.boolean().required(),
+  showSummary: yup.boolean().required(),
+  showEditor: yup.boolean().required(),
+  logX: yup.boolean().required(),
+  expY: yup.boolean().required(),
+  showSettingsPage: yup.boolean().default(false),
+  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),
+  autoplay: yup.boolean().required(),
+});
 
-type StyledTabProps = {
-  name: string;
-  icon: (props: React.ComponentProps<"svg">) => JSX.Element;
-};
-
-const StyledTab: React.FC<StyledTabProps> = ({ 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>
-  );
-};
+type FormFields = yup.InferType<typeof schema>;
 
 const HeadedSection: FC<{ title: string; children: React.ReactNode }> = ({
   title,
@@ -187,50 +130,189 @@ function InputItem<T>({
   );
 }
 
-function Checkbox<T>({
-  name,
-  label,
+const SamplingSettings: React.FC<{ register: UseFormRegister<FormFields> }> = ({
   register,
-}: {
-  name: Path<T>;
-  label: string;
-  register: UseFormRegister<T>;
-}) {
-  return (
-    <label className="flex items-center">
-      <input
-        type="checkbox"
-        {...register(name)}
-        className="form-checkbox focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+}) => (
+  <div className="space-y-6 p-3 max-w-xl">
+    <div>
+      <InputItem
+        name="sampleCount"
+        type="number"
+        label="Sample Count"
+        register={register}
       />
-      {/* 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="ml-3 text-sm font-medium text-gray-700">{label}</div>
-    </label>
+      <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 ViewSettings: React.FC<{ register: UseFormRegister<FormFields> }> = ({
+  register,
+}) => (
+  <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">
+        <Checkbox
+          name="showEditor"
+          register={register}
+          label="Show code editor on left"
+        />
+        <InputItem
+          name="chartHeight"
+          type="number"
+          register={register}
+          label="Chart Height (in pixels)"
+        />
+        <Checkbox
+          name="showTypes"
+          register={register}
+          label="Show information about displayed types"
+        />
+      </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"
+          />
+          <Checkbox
+            register={register}
+            name="expY"
+            label="Show y scale exponentially"
+          />
+          <Checkbox
+            register={register}
+            name="showControls"
+            label="Show toggles to adjust scale of x and y axes"
+          />
+          <Checkbox
+            register={register}
+            name="showSummary"
+            label="Show summary statistics"
+          />
+        </div>
+      </HeadedSection>
+    </div>
+
+    <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>
+  </div>
+);
+
+const InputVariablesSettings: React.FC<{
+  initialImports: any; // TODO - any json type
+  setImports: (imports: any) => void;
+}> = ({ initialImports, setImports }) => {
+  const [importString, setImportString] = useState(() =>
+    JSON.stringify(initialImports)
   );
-}
+  const [importsAreValid, setImportsAreValid] = useState(true);
+
+  const onChange = (value: string) => {
+    setImportString(value);
+    let imports = {} as any;
+    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 PlayControls: React.FC<{
   autoplay: boolean;
-  isStale: boolean;
+  playing: boolean;
+  stale: boolean;
   onAutoplayChange: (value: boolean) => void;
-  onPlay: () => void;
-}> = ({ autoplay, isStale, onAutoplayChange, onPlay }) => {
-  const [playing, setPlaying] = useState(false);
-
-  const play = () => {
-    setPlaying(true);
-  };
-
-  // this is tricky; we need to render PlayControls first to make sure that the icon is spinning,
-  // and only then call onPlay (which freezes the UI)
-  useEffect(() => {
-    if (!autoplay && playing) {
-      onPlay();
-      setPlaying(false);
-    }
-    // don't add onPlay to the deps below
-  }, [autoplay, playing]); // eslint-disable-line react-hooks/exhaustive-deps
-
+  play: () => void;
+}> = ({ autoplay, playing, stale, onAutoplayChange, play }) => {
   const CurrentPlayIcon = playing ? RefreshIcon : PlayIcon;
 
   return (
@@ -241,7 +323,7 @@ const PlayControls: React.FC<{
             className={clsx(
               "w-8 h-8",
               playing && "animate-spin",
-              isStale ? "text-indigo-500" : "text-gray-400"
+              stale ? "text-indigo-500" : "text-gray-400"
             )}
           />
         </button>
@@ -274,12 +356,10 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
     defaultValue: defaultCode,
     onChange: onCodeChange,
   });
-  const [importString, setImportString] = useState("{}");
-  const [imports, setImports] = useState({});
-  const [importsAreValid, setImportsAreValid] = useState(true);
-
   const [renderedCode, setRenderedCode] = useState(""); // used only if autoplay is false
 
+  const [imports, setImports] = useState({});
+
   const {
     register,
     control,
@@ -320,14 +400,28 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
     [vars.sampleCount, vars.xyPointLength]
   );
 
-  const getChangeJson = (r: string) => {
-    setImportString(r);
-    try {
-      setImports(JSON.parse(r));
-      setImportsAreValid(true);
-    } catch (e) {
-      setImportsAreValid(false);
+  const [playing, setPlaying] = useState(false); // used in manual play mode only
+
+  // This part is tricky and fragile; we need to re-render first to make sure that the icon is spinning,
+  // and only then evaluate the squiggle code (which freezes the UI).
+  // Also note that `useEffect` execution order matters here.
+  // Hopefully it'll all go away after we make squiggle code evaluation async.
+  useEffect(() => {
+    if (renderedCode === code && playing) {
+      // It's not possible to put this after `setRenderedCode(code)` below because React would apply
+      // `setPlaying` and `setRenderedCode` together and spinning icon will disappear immediately.
+      setPlaying(false);
     }
+  }, [renderedCode, code, playing]);
+
+  useEffect(() => {
+    if (!vars.autoplay && playing) {
+      setRenderedCode(code); // TODO - force play even if code hasn't changed
+    }
+  }, [vars.autoplay, code, playing]);
+
+  const play = () => {
+    setPlaying(true);
   };
 
   const manualPlay = () => {
@@ -335,156 +429,6 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
     setRenderedCode(code); // TODO - force play even if code hasn't changed
   };
 
-  const samplingSettings = (
-    <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 viewSettings = (
-    <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">
-          <Checkbox
-            name="showEditor"
-            register={register}
-            label="Show code editor on left"
-          />
-          <InputItem
-            name="chartHeight"
-            type="number"
-            register={register}
-            label="Chart Height (in pixels)"
-          />
-          <Checkbox
-            name="showTypes"
-            register={register}
-            label="Show information about displayed types"
-          />
-        </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"
-            />
-            <Checkbox
-              register={register}
-              name="expY"
-              label="Show y scale exponentially"
-            />
-            <Checkbox
-              register={register}
-              name="showControls"
-              label="Show toggles to adjust scale of x and y axes"
-            />
-            <Checkbox
-              register={register}
-              name="showSummary"
-              label="Show summary statistics"
-            />
-          </div>
-        </HeadedSection>
-      </div>
-
-      <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>
-    </div>
-  );
-
-  const inputVariableSettings = (
-    <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={getChangeJson}
-              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 squiggleChart = (
     <SquiggleChart
       code={vars.autoplay ? code : renderedCode}
@@ -508,7 +452,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
       <CodeEditor
         value={code ?? ""}
         onChange={setCode}
-        onSubmit={manualPlay}
+        onSubmit={play}
         oneLine={false}
         showGutter={true}
         height={height - 1}
@@ -519,12 +463,21 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
   );
 
   const tabs = (
-    <Tab.Panels>
-      <Tab.Panel>{firstTab}</Tab.Panel>
-      <Tab.Panel>{samplingSettings}</Tab.Panel>
-      <Tab.Panel>{viewSettings}</Tab.Panel>
-      <Tab.Panel>{inputVariableSettings}</Tab.Panel>
-    </Tab.Panels>
+    <StyledTab.Panels>
+      <StyledTab.Panel>{firstTab}</StyledTab.Panel>
+      <StyledTab.Panel>
+        <SamplingSettings register={register} />
+      </StyledTab.Panel>
+      <StyledTab.Panel>
+        <ViewSettings register={register} />
+      </StyledTab.Panel>
+      <StyledTab.Panel>
+        <InputVariablesSettings
+          initialImports={imports}
+          setImports={setImports}
+        />
+      </StyledTab.Panel>
+    </StyledTab.Panels>
   );
 
   const withEditor = (
@@ -538,10 +491,10 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
 
   return (
     <SquiggleContainer>
-      <Tab.Group>
+      <StyledTab.Group>
         <div className="pb-4">
           <div className="flex justify-between items-center mt-2">
-            <Tab.List className="flex w-fit p-0.5 rounded-md bg-slate-100 hover:bg-slate-200">
+            <StyledTab.List>
               <StyledTab
                 name={vars.showEditor ? "Code" : "Display"}
                 icon={vars.showEditor ? CodeIcon : EyeIcon}
@@ -549,11 +502,12 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
               <StyledTab name="Sampling Settings" icon={CogIcon} />
               <StyledTab name="View Settings" icon={ChartSquareBarIcon} />
               <StyledTab name="Input Variables" icon={CurrencyDollarIcon} />
-            </Tab.List>
+            </StyledTab.List>
             <PlayControls
               autoplay={vars.autoplay || false}
-              isStale={!vars.autoplay && renderedCode !== code}
-              onPlay={manualPlay}
+              stale={!vars.autoplay && renderedCode !== code}
+              play={play}
+              playing={playing}
               onAutoplayChange={(newValue) => {
                 if (!newValue) setRenderedCode(code);
                 setFormValue("autoplay", newValue);
@@ -562,7 +516,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
           </div>
           {vars.showEditor ? withEditor : withoutEditor}
         </div>
-      </Tab.Group>
+      </StyledTab.Group>
     </SquiggleContainer>
   );
 };
diff --git a/packages/components/src/components/ui/Checkbox.tsx b/packages/components/src/components/ui/Checkbox.tsx
new file mode 100644
index 00000000..c06e347b
--- /dev/null
+++ b/packages/components/src/components/ui/Checkbox.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { Path, UseFormRegister } from "react-hook-form";
+
+export function Checkbox<T>({
+  name,
+  label,
+  register,
+}: {
+  name: Path<T>;
+  label: string;
+  register: UseFormRegister<T>;
+}) {
+  return (
+    <label className="flex items-center">
+      <input
+        type="checkbox"
+        {...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="ml-3 text-sm font-medium text-gray-700">{label}</div>
+    </label>
+  );
+}
diff --git a/packages/components/src/components/ui/StyledTab.tsx b/packages/components/src/components/ui/StyledTab.tsx
new file mode 100644
index 00000000..66e11869
--- /dev/null
+++ b/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;

From 7d3366389b853f29080de177910c9b91799c2695 Mon Sep 17 00:00:00 2001
From: Vyacheslav Matyukhin <me@berekuk.ru>
Date: Wed, 6 Jul 2022 01:41:06 +0400
Subject: [PATCH 27/29] extract run logic to a custom hook

---
 .../src/components/SquigglePlayground.tsx     | 130 +++++++++---------
 1 file changed, 67 insertions(+), 63 deletions(-)

diff --git a/packages/components/src/components/SquigglePlayground.tsx b/packages/components/src/components/SquigglePlayground.tsx
index c5104508..301d8892 100644
--- a/packages/components/src/components/SquigglePlayground.tsx
+++ b/packages/components/src/components/SquigglePlayground.tsx
@@ -86,7 +86,6 @@ const schema = yup.object({}).shape({
   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),
-  autoplay: yup.boolean().required(),
 });
 
 type FormFields = yup.InferType<typeof schema>;
@@ -306,38 +305,78 @@ const InputVariablesSettings: React.FC<{
   );
 };
 
-const PlayControls: React.FC<{
-  autoplay: boolean;
-  playing: boolean;
-  stale: boolean;
-  onAutoplayChange: (value: boolean) => void;
-  play: () => void;
-}> = ({ autoplay, playing, stale, onAutoplayChange, play }) => {
-  const CurrentPlayIcon = playing ? RefreshIcon : PlayIcon;
+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">
-      {autoplay ? null : (
-        <button onClick={play}>
+      {autorunMode ? null : (
+        <button onClick={run}>
           <CurrentPlayIcon
             className={clsx(
               "w-8 h-8",
-              playing && "animate-spin",
-              stale ? "text-indigo-500" : "text-gray-400"
+              isRunning && "animate-spin",
+              isStale ? "text-indigo-500" : "text-gray-400"
             )}
           />
         </button>
       )}
       <Toggle
-        texts={["Autoplay", "Paused"]}
+        texts={["Autorun", "Paused"]}
         icons={[CheckCircleIcon, PauseIcon]}
-        status={autoplay}
-        onChange={onAutoplayChange}
+        status={autorunMode}
+        onChange={onAutorunModeChange}
       />
     </div>
   );
 };
 
+const useRunnerState = (code: string) => {
+  const [autorunMode, setAutorunMode] = useState(true);
+  const [renderedCode, setRenderedCode] = useState(code); // used in manual run mode only
+  const [isRunning, setIsRunning] = useState(false); // used in manual run mode only
+
+  // This part is tricky and fragile; we need to re-render first to make sure that the icon is spinning,
+  // and only then evaluate the squiggle code (which freezes the UI).
+  // Also note that `useEffect` execution order matters here.
+  // Hopefully it'll all go away after we make squiggle code evaluation async.
+  useEffect(() => {
+    if (renderedCode === code && isRunning) {
+      // It's not possible to put this after `setRenderedCode(code)` below because React would apply
+      // `setIsRunning` and `setRenderedCode` together and spinning icon will disappear immediately.
+      setIsRunning(false);
+    }
+  }, [renderedCode, code, isRunning]);
+
+  useEffect(() => {
+    if (!autorunMode && isRunning) {
+      setRenderedCode(code); // TODO - force run even if code hasn't changed
+    }
+  }, [autorunMode, code, isRunning]);
+
+  const run = () => {
+    // The rest will be handled by useEffects above, but we need to update the spinner first.
+    setIsRunning(true);
+  };
+
+  return {
+    run,
+    renderedCode: autorunMode ? code : renderedCode,
+    isRunning,
+    autorunMode,
+    setAutorunMode: (newValue: boolean) => {
+      if (!newValue) setRenderedCode(code);
+      setAutorunMode(newValue);
+    },
+  };
+};
+
 export const SquigglePlayground: FC<PlaygroundProps> = ({
   defaultCode = "",
   height = 500,
@@ -356,15 +395,10 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
     defaultValue: defaultCode,
     onChange: onCodeChange,
   });
-  const [renderedCode, setRenderedCode] = useState(""); // used only if autoplay is false
 
   const [imports, setImports] = useState({});
 
-  const {
-    register,
-    control,
-    setValue: setFormValue,
-  } = useForm({
+  const { register, control } = useForm({
     resolver: yupResolver(schema),
     defaultValues: {
       sampleCount: 1000,
@@ -381,7 +415,6 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
       diagramStart: 0,
       diagramStop: 10,
       diagramCount: 20,
-      autoplay: true,
     },
   });
   const vars = useWatch({
@@ -400,38 +433,12 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
     [vars.sampleCount, vars.xyPointLength]
   );
 
-  const [playing, setPlaying] = useState(false); // used in manual play mode only
-
-  // This part is tricky and fragile; we need to re-render first to make sure that the icon is spinning,
-  // and only then evaluate the squiggle code (which freezes the UI).
-  // Also note that `useEffect` execution order matters here.
-  // Hopefully it'll all go away after we make squiggle code evaluation async.
-  useEffect(() => {
-    if (renderedCode === code && playing) {
-      // It's not possible to put this after `setRenderedCode(code)` below because React would apply
-      // `setPlaying` and `setRenderedCode` together and spinning icon will disappear immediately.
-      setPlaying(false);
-    }
-  }, [renderedCode, code, playing]);
-
-  useEffect(() => {
-    if (!vars.autoplay && playing) {
-      setRenderedCode(code); // TODO - force play even if code hasn't changed
-    }
-  }, [vars.autoplay, code, playing]);
-
-  const play = () => {
-    setPlaying(true);
-  };
-
-  const manualPlay = () => {
-    if (vars.autoplay) return; // should we allow reruns even in autoplay mode?
-    setRenderedCode(code); // TODO - force play even if code hasn't changed
-  };
+  const { run, autorunMode, setAutorunMode, isRunning, renderedCode } =
+    useRunnerState(code);
 
   const squiggleChart = (
     <SquiggleChart
-      code={vars.autoplay ? code : renderedCode}
+      code={renderedCode}
       environment={env}
       diagramStart={Number(vars.diagramStart)}
       diagramStop={Number(vars.diagramStop)}
@@ -450,9 +457,9 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
   const firstTab = vars.showEditor ? (
     <div className="border border-slate-200">
       <CodeEditor
-        value={code ?? ""}
+        value={code}
         onChange={setCode}
-        onSubmit={play}
+        onSubmit={run}
         oneLine={false}
         showGutter={true}
         height={height - 1}
@@ -503,15 +510,12 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
               <StyledTab name="View Settings" icon={ChartSquareBarIcon} />
               <StyledTab name="Input Variables" icon={CurrencyDollarIcon} />
             </StyledTab.List>
-            <PlayControls
-              autoplay={vars.autoplay || false}
-              stale={!vars.autoplay && renderedCode !== code}
-              play={play}
-              playing={playing}
-              onAutoplayChange={(newValue) => {
-                if (!newValue) setRenderedCode(code);
-                setFormValue("autoplay", newValue);
-              }}
+            <RunControls
+              autorunMode={autorunMode}
+              isStale={renderedCode !== code}
+              run={run}
+              isRunning={isRunning}
+              onAutorunModeChange={setAutorunMode}
             />
           </div>
           {vars.showEditor ? withEditor : withoutEditor}

From cdfddf5888930b2974a2a506b84b23d223d67ac9 Mon Sep 17 00:00:00 2001
From: Vyacheslav Matyukhin <me@berekuk.ru>
Date: Wed, 6 Jul 2022 02:07:18 +0400
Subject: [PATCH 28/29] animate autorun toggle

---
 packages/components/package.json              |   1 +
 .../components/src/components/ui/Toggle.tsx   |  15 ++-
 yarn.lock                                     | 121 +++++++++++++++++-
 3 files changed, 127 insertions(+), 10 deletions(-)

diff --git a/packages/components/package.json b/packages/components/package.json
index 4a7e0471..5015ab35 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -9,6 +9,7 @@
     "@quri/squiggle-lang": "^0.2.8",
     "@react-hook/size": "^2.1.2",
     "clsx": "^1.1.1",
+    "framer-motion": "^6.4.1",
     "lodash": "^4.17.21",
     "react": "^18.1.0",
     "react-ace": "^10.1.0",
diff --git a/packages/components/src/components/ui/Toggle.tsx b/packages/components/src/components/ui/Toggle.tsx
index 1b96db77..510b86cb 100644
--- a/packages/components/src/components/ui/Toggle.tsx
+++ b/packages/components/src/components/ui/Toggle.tsx
@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import { motion } from "framer-motion";
 import React from "react";
 
 type IconType = (props: React.ComponentProps<"svg">) => JSX.Element;
@@ -18,7 +19,9 @@ export const Toggle: React.FC<Props> = ({
 }) => {
   const CurrentIcon = status ? OnIcon : OffIcon;
   return (
-    <button
+    <motion.button
+      layout
+      transition={{ duration: 0.2 }}
       className={clsx(
         "rounded-full py-1 bg-indigo-500 text-white text-xs font-semibold flex items-center space-x-1",
         status ? "bg-indigo-500" : "bg-gray-400",
@@ -27,8 +30,12 @@ export const Toggle: React.FC<Props> = ({
       )}
       onClick={() => onChange(!status)}
     >
-      <CurrentIcon className="w-6 h-6" />
-      <span>{status ? onText : offText}</span>
-    </button>
+      <motion.div layout transition={{ duration: 0.2 }}>
+        <CurrentIcon className="w-6 h-6" />
+      </motion.div>
+      <motion.span layout transition={{ duration: 0.2 }}>
+        {status ? onText : offText}
+      </motion.span>
+    </motion.button>
   );
 };
diff --git a/yarn.lock b/yarn.lock
index 8ecccc15..8cbc4af6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1802,6 +1802,18 @@
     url-loader "^4.1.1"
     webpack "^5.72.1"
 
+"@emotion/is-prop-valid@^0.8.2":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+  dependencies:
+    "@emotion/memoize" "0.7.4"
+
+"@emotion/memoize@0.7.4":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
 "@eslint/eslintrc@^1.3.0":
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.3.0.tgz#29f92c30bb3e771e4a2048c95fa6855392dfac4f"
@@ -2237,6 +2249,59 @@
   resolved "https://registry.yarnpkg.com/@mdx-js/util/-/util-1.6.22.tgz#219dfd89ae5b97a8801f015323ffa4b62f45718b"
   integrity sha512-H1rQc1ZOHANWBvPcW+JpGwr+juXSxM8Q8YCkm3GhZd8REu1fHR3z99CErO1p9pkcfcxZnMdIZdIsXkOHY0NilA==
 
+"@motionone/animation@^10.10.1":
+  version "10.10.1"
+  resolved "https://registry.yarnpkg.com/@motionone/animation/-/animation-10.10.1.tgz#d3d3ecb11c6d7507a104b080f31b07be9bc7056d"
+  integrity sha512-iX839/Ir5wT7hVX0yCZYjcDhHAOkVR5hIhVBTf37qEUD693uVwrxC2i1BI9vMVPc1rIoFtftYjOtwoO9Oq/aog==
+  dependencies:
+    "@motionone/easing" "^10.9.0"
+    "@motionone/types" "^10.9.0"
+    "@motionone/utils" "^10.9.0"
+    tslib "^2.3.1"
+
+"@motionone/dom@^10.11.0":
+  version "10.11.0"
+  resolved "https://registry.yarnpkg.com/@motionone/dom/-/dom-10.11.0.tgz#dc2e46b0e21044cc9ae89a994cd6725eac09e48b"
+  integrity sha512-ST56HBslkeoeDwqRFWafkD+JT5FEwlHqB2K2KGaQh6wo6zfKQ9xwjQcqgDiBv2gg6s8ycjHAdFS6dnMHQ5hXKw==
+  dependencies:
+    "@motionone/animation" "^10.10.1"
+    "@motionone/generators" "^10.9.0"
+    "@motionone/types" "^10.9.0"
+    "@motionone/utils" "^10.9.0"
+    hey-listen "^1.0.8"
+    tslib "^2.3.1"
+
+"@motionone/easing@^10.9.0":
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/@motionone/easing/-/easing-10.9.0.tgz#42910c70dd30e1bbba27a9612ce03bca022d0da7"
+  integrity sha512-FYIr3HlQEb7aE5LOpY6BPQUaPyKeJt6VfGA+npy73+JIGqoVOjbrdZ1ZQxzTXqO76mG3UZvv1+twrDamRQsxFw==
+  dependencies:
+    "@motionone/utils" "^10.9.0"
+    tslib "^2.3.1"
+
+"@motionone/generators@^10.9.0":
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/@motionone/generators/-/generators-10.9.0.tgz#46f3e706f45a9566db7e0ce62d677c884813cdaa"
+  integrity sha512-BOkHx4qQswJV+z/6k05qdvRENE4hG606NI5cIPTsLtSuksnRn83utuj/15VTNoFeYHuTdhwzxvIPvlPVayIGTg==
+  dependencies:
+    "@motionone/types" "^10.9.0"
+    "@motionone/utils" "^10.9.0"
+    tslib "^2.3.1"
+
+"@motionone/types@^10.9.0":
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/@motionone/types/-/types-10.9.0.tgz#7caa9c1b746dd30bcf6104ce9c82a5a928385da2"
+  integrity sha512-ZcEDfsrS2ym9+vExV7+59avkzEO/PLkNj16uaDvbWhi0Q/vOZ72j2LQTrtDLWVyZRIeUaB/i8DJP017Gj6UYQw==
+
+"@motionone/utils@^10.9.0":
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/@motionone/utils/-/utils-10.9.0.tgz#a68fe41fe37e4365b07dfc676f014a0e43b8beb2"
+  integrity sha512-5IgmwQ8TdH1HsQ9d2QZeBCu9+HkqjoYRYItRpmusoyiedPMZaKdU3pr3qFP5nbAj68Ww2sTUxgEZEOF20qJA6w==
+  dependencies:
+    "@motionone/types" "^10.9.0"
+    hey-listen "^1.0.8"
+    tslib "^2.3.1"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -4356,10 +4421,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^18.0.1", "@types/react@^18.0.9":
-  version "18.0.14"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.14.tgz#e016616ffff51dba01b04945610fe3671fdbe06d"
-  integrity sha512-x4gGuASSiWmo0xjDLpm5mPb52syZHJx02VKbqUKdLmKtAwIh63XClGsiTI1K6DO5q7ox4xAsQrU+Gl3+gGXF9Q==
+"@types/react@*", "@types/react@17.0.43", "@types/react@^18.0.9":
+  version "17.0.43"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.43.tgz#4adc142887dd4a2601ce730bc56c3436fdb07a55"
+  integrity sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -9103,6 +9168,27 @@ fragment-cache@^0.2.1:
   dependencies:
     map-cache "^0.2.2"
 
+framer-motion@^6.4.1:
+  version "6.4.1"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-6.4.1.tgz#d351a96d80bea5736af4175e6307bc63bb4daed1"
+  integrity sha512-JiVnG3p0mO9yWxjNx3xxJaKP4hTWdm6oIbzfMJZEMtoOahSNoDTRZA/mFPzfVNj2foKwFPOLFv/lw8UUZjyUqA==
+  dependencies:
+    "@motionone/dom" "^10.11.0"
+    framesync "6.0.1"
+    hey-listen "^1.0.8"
+    popmotion "11.0.3"
+    style-value-types "5.0.0"
+    tslib "^2.1.0"
+  optionalDependencies:
+    "@emotion/is-prop-valid" "^0.8.2"
+
+framesync@6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/framesync/-/framesync-6.0.1.tgz#5e32fc01f1c42b39c654c35b16440e07a25d6f20"
+  integrity sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==
+  dependencies:
+    tslib "^2.1.0"
+
 fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
@@ -9770,6 +9856,11 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+hey-listen@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
+  integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
+
 highlight.js@^10.4.1, highlight.js@~10.7.0:
   version "10.7.3"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
@@ -13344,6 +13435,16 @@ polished@^4.2.2:
   dependencies:
     "@babel/runtime" "^7.17.8"
 
+popmotion@11.0.3:
+  version "11.0.3"
+  resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-11.0.3.tgz#565c5f6590bbcddab7a33a074bb2ba97e24b0cc9"
+  integrity sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==
+  dependencies:
+    framesync "6.0.1"
+    hey-listen "^1.0.8"
+    style-value-types "5.0.0"
+    tslib "^2.1.0"
+
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
@@ -14725,7 +14826,7 @@ react-vega@^7.5.1:
     prop-types "^15.8.1"
     vega-embed "^6.5.1"
 
-react@^18.0.0, react@^18.1.0:
+react@^18.1.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
   integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
@@ -16364,6 +16465,14 @@ style-to-object@0.3.0, style-to-object@^0.3.0:
   dependencies:
     inline-style-parser "0.1.1"
 
+style-value-types@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-5.0.0.tgz#76c35f0e579843d523187989da866729411fc8ad"
+  integrity sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==
+  dependencies:
+    hey-listen "^1.0.8"
+    tslib "^2.1.0"
+
 stylehacks@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-5.1.0.tgz#a40066490ca0caca04e96c6b02153ddc39913520"
@@ -16921,7 +17030,7 @@ tslib@^1.8.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0:
+tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.1, tslib@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
   integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==

From 4054f7dbfffc91e059da6c4fd509d9721969daef Mon Sep 17 00:00:00 2001
From: Ozzie Gooen <OAGr@users.noreply.github.com>
Date: Tue, 5 Jul 2022 19:48:41 -0400
Subject: [PATCH 29/29] Small beta error message change

---
 .../rescript/Distributions/SymbolicDist/SymbolicDist.res    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res b/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res
index e7471ffa..249deb02 100644
--- a/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res
+++ b/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res
@@ -134,8 +134,10 @@ module Beta = {
 
   let fromMeanAndStdev = (mean, stdev) => {
     // https://en.wikipedia.org/wiki/Beta_distribution#Mean_and_variance
-    if !(0.0 < stdev && stdev <= 0.5) || !(0.0 <= mean && mean <= 1.0) {
-      "Beta mean must be in [0,1] and stdev must be in (1,0.5]"->Error
+    if !(0.0 < stdev && stdev <= 0.5) {
+      Error("Stdev must be in in between 0 and 0.5.")
+    } else if !(0.0 <= mean && mean <= 1.0) {
+      Error("Mean must be in between 0 and 1.0.")
     } else {
       let var = stdev *. stdev
       let sampleSize = mean *. (1.0 -. mean) /. var -. 1.0