30:T9b4,Table = ({ value: rows, onChange, selected_cell, onSelectedChange }) => { let values = build_runtime(rows); let reference_names = null; let error = null; if (selected_cell != null) { try { let column_index = selected_cell.column.charCodeAt(0) - 65; let current_cell = rows[selected_cell.row - 1][column_index]; if (current_cell.startsWith('=')) { let code = current_cell.slice(1); let cell_ast = parser.parseCell(code); reference_names = (cell_ast.references || []) .map(x => x.name) .filter(x => x.match(/[A-Z]\d?/)); } } catch (err) { error = err; } } return htm`

${rows[0].map( (column, _column_index) => htm`

${String.fromCharCode(65 + _column_index)}

` )}

${rows.map((row, _row_index) => { let row_index = _row_index + 1; return htm`

${row_index}

${row.map((value, _column_index) => { let column_index = String.fromCharCode(65 + _column_index); let cell_name = `${column_index}${row_index}`; return htm` <${Cell} derived_from=${reference_names != null && reference_names.some(x => cell_name.startsWith(x))} column=${column_index} row=${row_index} selected_cell=${selected_cell} value=${value} display=${values[`${column_index}${row_index}`]} onClick=${() => { onSelectedChange({ column: column_index, row: row_index }); }} onBlur=${() => { onSelectedChange(null); }} style=${{ width: 200 }} onChange=${value => { onChange( immer.default(rows, draft => { draft[_row_index][_column_index] = value; }) ); }} /> `; })}

`; })}

`; }31:T435,Cell = ({ column, row, selected_cell, style, value, display, onChange, onBlur, derived_from, ...props }) => { let column_selected = selected_cell && selected_cell.column === column; let row_selected = selected_cell && selected_cell.row === row; let border = 'solid gray 1px'; let editting = column_selected && row_selected; return htm`

${ editting ? htm` <${CodeEditor} value=${String(value)} onChange=${value => { onChange(value); }} onBlur=${() => { onBlur(); }} /> ` : htm`<${Inspector} style=${{ pointerEvents: 'none' }} value=${display} />` }

`; }32:T8a6,build_runtime = rows => { let cells = rows.flatMap((row, row_index) => row.map((value, column_index) => ({ column: String.fromCharCode(65 + column_index), row: row_index + 1, name: `${String.fromCharCode(65 + column_index)}${row_index + 1}`, value })) ); let result = execute_notebook_direct( [ { name: '_', using: [], derive: () => _ }, ..._.uniq(cells.map(x => x.column)).map(column => { let rows = cells.filter(cell => cell.column === column); return { name: column, using: rows.map(x => x.name), derive: (...args) => { return args; } }; }), ..._.uniq(cells.map(x => x.row)).map(row => { let columns = cells.filter(cell => cell.row === row); return { name: `_${row}`, using: columns.map(x => x.name), derive: (...args) => { return args; } }; }), ...cells.map(cell => { if (String(cell.value).startsWith('=')) { let code = cell.value.slice(1); try { let cell_ast = parser.parseCell(code); let reference_names = (cell_ast.references || []).map(x => x.name); let derive = new Function(...reference_names, `return ${code}`); return { name: cell.name, using: reference_names, derive: (...args) => { try { return derive(...args); } catch (error) { error.stack = ''; return error; } } }; } catch (error) { error.stack = ''; return { name: cell.name, using: [], derive: () => error }; } } return { name: cell.name, using: [], derive: () => { if (cell.value === "") return null; let number = Number(cell.value); if (!Number.isNaN(number)) return number; return cell.value; } }; }) ], {}, {} ); return result; }33:T7ca,CodeEditor = ({ value, onChange, onBlur }) => { // let lines = value.split("\n"); let [local_value, set_local_value] = React.useState(value); let textarea_ref = React.useRef(); React.useEffect(() => { textarea_ref.current.focus(); textarea_ref.current.select(); }, []); React.useEffect(() => { let textarea = textarea_ref.current; if (textarea && textarea.scrollHeight !== 0) { textarea.style.height = 'auto'; textarea.style.height = `${textarea.scrollHeight}px`; } if (textarea && textarea.scrollWidth !== 0) { textarea.style.width = '0px'; let initial_minwidth = textarea.style.minWidth; textarea.style.minWidth = '0px'; textarea.style.width = `${textarea.scrollWidth}px`; textarea.style.minWidth = initial_minwidth; } }); return htm`

 {
      set_local_value(event.target.value);
    }}
    onBlur=${event => {
      onChange(local_value);
      onBlur(local_value);
    }}
    onInput=${event => {
      // if (event.target.scrollHeight !== 0) {
      //   event.target.style.height = 'auto';
      //   event.target.style.height = `${event.target.scrollHeight}px`;
      // }
      // if (event.target.scrollWidth !== 0) {
      //   event.target.style.width = '0px';
      //   let initial_minwidth = event.target.style.minWidth;
      //   event.target.style.minWidth = '0px';
      //   event.target.style.width = `${event.target.scrollWidth}px`;
      //   event.target.style.minWidth = initial_minwidth;
      // }
    }}
    onKeyDown=${event => {
      if (event.key === 'Enter') {
        event.target.blur();
      }
      if (event.metaKey && event.key === 's') {
        event.preventDefault();

        onChange(local_value);
      }
    }}
  />`;
}34:T601,execute_notebook_direct = (definitions, imports, replacements) => {
  let cells = new Map();

  for (let [key, value] of Object.entries(direct_library)) {
    cells.set(key, {
      using: [],
      derive: () => value
    });
  }

  for (let [key, value] of Object.entries(imports)) {
    cells.set(key, {
      using: [],
      derive: () => value
    });
  }

  for (let definition of definitions) {
    cells.set(definition.name, {
      using: definition.using,
      derive: definition.derive,
      export: true
    });

    for (let export_cell of definition.exports || []) {
      cells.set(export_cell.name, {
        using: export_cell.using,
        derive: export_cell.derive,
        export: true
      });
    }
  }

  for (let [key, value] of Object.entries(replacements)) {
    cells.set(key, {
      using: [],
      derive: () => value
    });
  }

  let results = {};
  let cached_results = new Map();
  for (let [key, value] of cells.entries()) {
    Object.defineProperty(results, key, {
      enumerable: Boolean(value.export),
      get: () => {
        if (cached_results.has(key)) {
          return cached_results.get(key);
        }

        let args = value.using.map(x => results[x]);

        let has_promises = args.some(x => x && x.then != null);
        let result = has_promises
          ? Promise.all(args).then(args => value.derive(...args))
          : value.derive(...args);
        cached_results.set(key, result);

        return cached_results.get(key);
      }
    });
  }

  return results;
}35:[]
2e:{"title":"Accel","cells":[{"id":0,"value":"md`# Accel`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"mutable selected_cell = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"html`<style>\n.list-table * {\n  box-sizing: border-box;\n}\n.list-table .observablehq {\n  min-height: 0;\n}\n.list-table .observablehq--inspect {\n  padding: 0;\n}\n.list-table td,\n.list-table .row > div {\n  padding: 0 8px;\n}\n\n.list-table {\n  display: flex;\n  flex-direction: column;\n}\n.list-table .row {\n  display: flex;\n  flex-direction: row;\n}\n.list-table .row > div {\n  width: 100px;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n}\n.list-table .row > div textarea {\n  min-width: 100%;\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"mutable data = [\n  [\"= 12\", \"\", \"= html`Min:`\", \"= _.min(A)\"],\n  [\"= A1 ** 4\", \"= new Date(\\\"1996-10-15\\\")\", \"= html`Max:`\", \"= _.max(A)\"],\n  [\"= A1 * A2\", \"= B2.getYear()\", \"= html`Sum:`\", \"= _.sum(A)\"]\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"render(\n  this,\n  htm`<div style=${{ display: 'flex', paddingBottom: 12 }}>\n    <${Table}\n      value=${data}\n      onChange=${data => {\n        mutable data = data;\n      }}\n      selected_cell=${selected_cell}\n      onSelectedChange=${selected => {\n        mutable selected_cell = selected;\n      }}\n    />\n  </div>`\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":566,"value":"safe = fn => {\n  try {\n    return [null, fn()];\n  } catch (error) {\n    return [error, null];\n  }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":527,"value":"md`## Runtime`","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"generator_from_observable_variable = async function*(module, variable_name) {\n  let raw_from_variable = Generators.observe(push => {\n    let variable = module.variable({\n      fulfilled: result => {\n        push({ fulfilled: result });\n      },\n      rejected: error => push({ rejected: error })\n    });\n    variable.define([variable_name], x => x);\n    return () => variable.delete();\n  });\n\n  for await (let result of raw_from_variable) {\n    if (result.rejected) {\n      throw result.rejected;\n    }\n\n    yield result.fulfilled;\n  }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":426,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"md`## Components`","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"html`<style>\n.ad-hoc-code-editor {\n  color: inherit;\n  padding: 8px;\n  padding-left: 0;\n  padding-right: 0;\n  resize: none;  margin: 0;\n\n  background: none;\n  border: none;\n  font-size: inherit;\n  font-family: inherit;\n  width: 100%;\n  display: block;\n\n  white-space: pre;\n  min-width: 100%;\n}\n.ad-hoc-code-editor:focus {\n  outline: none;\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"Inspector = ({ value, ...props }) => {\n  let container_ref = React.useRef();\n  let inspector = React.useRef();\n\n  React.useEffect(() => {\n    if (inspector.current == null) {\n      inspector.current = new ObservableHq.Inspector(container_ref.current);\n    }\n    inspector.current.fulfilled(value);\n  }, [value]);\n  return htm`<div style=${{\n    width: '100%'\n  }} ref=${container_ref} ...${props} />`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"md`## Hey`","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"function valueof(input) {\n  switch (input.type) {\n    case \"range\":\n    case \"number\":\n      return input.valueAsNumber;\n    case \"date\":\n      return input.valueAsDate;\n    case \"checkbox\":\n      return input.checked;\n    case \"file\":\n      return input.multiple ? input.files : input.files[0];\n    case \"select-multiple\":\n      return Array.from(input.selectedOptions, o => o.value);\n    default:\n      return input.value;\n  }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"direct_library = ({\n  html: html,\n  md: md,\n  Generators: {\n    input: x => valueof(x)\n  }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"ObservableHq = require(\"@observablehq/runtime@4\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"immer = require('immer')","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"run = fn => fn()","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"notebook_direct = code => {\n  let string_parts = [code];\n  string_parts.raw = [code];\n  return notebook({})(string_parts);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"render = (container = DOM.element('div'), element) => {\n  ReactDOM.render(element, container);\n  return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"react_require = require.alias({\n  \"react\": \"react@16/umd/react.production.min.js\",\n  \"react-dom\": \"react-dom@16/umd/react-dom.production.min.js\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"React = react_require(\"react@16/umd/react.production.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"ReactDOM = react_require(\"react-dom@16/umd/react-dom.production.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"htm = (await require(\"htm@3/dist/htm.umd.js\")).bind(React.createElement)","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"parser = require(\"@observablehq/parser\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}
</article></body></html>