Editor.html

<html>
<title>Blackboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="rabbit.png">
    <script src='lib/codemirror.js'></script>
  <link rel="stylesheet" href="lib/dialog.css">
	<link rel="stylesheet" href="lib/show-hint.css">

<script src='lib/simple.js'></script>
<link rel="stylesheet" href="lib/material.css">
<link rel="stylesheet" href="lib/codemirror.css">
<script src="lib/anyword-hint.js"></script>
<script src="lib/dialog.js"></script>
<script src="lib/jump-to-line.js"></script>
<script src="lib/matchbrackets.js"></script>
<script src="lib/overlay.js"></script>
<script src="lib/search.js"></script>
<script src="lib/searchcursor.js"></script>
<script src="lib/show-hint.js"></script>
<script src="lib/vim.js"></script>

    <style>
@font-face {
  font-family: Mono;
  src: url("lib/RobotoMono-Thin.ttf") format("truetype");
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url("lib/MaterialIcons-Regular.ttf") format('truetype')
}

.material-icons {
  font-family: 'Material Icons' !important;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

* {
        font-family: Mono !important;
}

.CodeMirror, .CodeMirror-gutters{background:#000000 !important;}

 .cm-strike{color: #888888;}
 .cm-under{text-decoration: underline;}
 .cm-comments{color: #888888;    }
 .cm-strings{color: #aaffaa;}
 .cm-variables{color: #aaffff;}

 .cm-deco{color: #ffbf00;}
 .cm-decorator{color: #ffaaff;}

 .cm-nums{color: #ffaaaa;}

 .cm-numss{color: #afafff;}

 .CodeMirror, .CodeMirror * {font-family: Mono !important;}

      .editbox + .CodeMirror{
        font-family: Mono !important;
        height:auto;
        line-height:18px;
        font-size:14px;
        z-index:0;
      }
      body{padding:0px;margin:0px;}
  .CodeMirror-activeline > span, .CodeMirror-activeline > span > span{
	     color: #888888 !important;
	}
  .CodeMirror-scrollbar-filler{display:none !important;}
  .CodeMirror-hscrollbar, .CodeMirror-vscrollbar{
  overflow:hidden;
  }
  .CodeMirror-hints{
  background: rgba(18,18,18, 1);
  color:white;
  overflow:hidden;
  }
  .CodeMirror-hint{
  color:#888888;
  font-family: Mono;
  }
  .CodeMirror-linenumber{
  color:#888888 !important;
  }


/* card style */
.codemirror-hints, .codemirror-dialog {
  border: none;
  /*border-radius: 3px;*/
  padding: 8px 8px;
  /*margin:6px;*/
  font-size: 14px;
  cursor: default;
  color: white;
  background-color: rgba(18,18,18, 1);
  /*box-shadow: 0 4px 8px #000;*/
  outline: none;
  font-family: Mono !important;
}

::-webkit-scrollbar {
    width: 0px;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}

pre, code, pre > * {
        font-family: Mono;
}

.shadow_0 {
  box-shadow: none
}
.shadow_1{
  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.20)
}
.shadow_2{
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20)
}
.shadow_3{
  box-shadow: 0 3px 4px 0 rgba(0,0,0,0.14), 0 3px 3px -2px rgba(0,0,0,0.12), 0 1px 8px 0 rgba(0,0,0,0.20)
}
.shadow_4{
  box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.20)
}
.shadow_6{
  box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12), 0 3px 5px -1px rgba(0,0,0,0.20)
}
.shadow_8{
  box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.20)
}
.shadow_12{
  box-shadow: 0 12px 17px 2px rgba(0,0,0,0.14), 0 5px 22px 4px rgba(0,0,0,0.12), 0 7px 8px -4px rgba(0,0,0,0.20)
}
.shadow_16{
  box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.20)
}
.shadow_24{
  box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.20)
}

dialog {
  background-color: rgba(18,18,18,1);
  color: rgba(255,255,255,.87);
  border: none;
  padding: 0px;
  box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.20);
  box-sizing: border-box;
}
.card {
  background-color: rgba(18,18,18,1);
  color: rgba(255,255,255,.87);
  border: none;
  padding: 12px 16px;
  box-sizing: border-box;
}

button, textarea, input{
  background: none;
  color: rgba(255,255,255,.87);
  border: none;
  border-bottom: 2px solid rgb(220, 20, 60);
  outline: none;
  box-sizing: border-box;
}

.glow_white, .tile_white:hover, .tile_white:focus{
  box-shadow: 0 4px 5px 0 rgba(255, 255, 255, 0.14), 0 1px 10px 0 rgba(255, 255, 255, 0.12), 0 2px 4px -1px rgba(255, 255, 255, 0.20);
  background: rgb(255, 255, 255) !important;
}

.glow_crimson, .tile_crimson:hover, .tile_crimson:focus{
  box-shadow: 0 4px 5px 0 rgba(220, 20, 60, 0.14), 0 1px 10px 0 rgba(220, 20, 60, 0.12), 0 2px 4px -1px rgba(220, 20, 60, 0.20);
  background: rgb(220, 20, 60) !important;
}

.glow_emerald, .tile_emerald:hover, .tile_emerald:focus{
  box-shadow: 0 4px 5px 0 rgba(0, 89, 11, 0.14), 0 1px 10px 0 rgba(0, 89, 11, 0.12), 0 2px 4px -1px rgba(0, 89, 11, 0.20);
  background: rgb(0, 89, 11) !important;
}

.glow_cobalt, .tile_cobalt:hover, .tile_cobalt:focus{
  box-shadow: 0 4px 5px 0 rgba(0, 71, 171, 0.14), 0 1px 10px 0 rgba(0, 71, 171, 0.12), 0 2px 4px -1px rgba(0, 71, 171, 0.20);
  background: rgb(0, 71, 171) !important;
}

.glow_gold, .tile_gold:hover, .tile_gold:focus{
  box-shadow: 0 4px 5px 0 rgba(255, 215, 0, 0.14), 0 1px 10px 0 rgba(255, 215, 0, 0.12), 0 2px 4px -1px rgba(255, 215, 0, 0.20);
  background: rgb(255, 215, 0) !important;
}

.show_over {
  opacity: 0;
}
div:hover > .hide_over,
div:focus > .hide_over {
  opacity: 0;
}
div:hover > .show_over,
div:focus > .show_over {
  opacity: 1;
}

.animate { 
  transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
  transition: all 0.3s;
}

.warn{
  border-bottom: 2px solid #B00020;
}

::placeholder {
  color: rgba(255,255,255,.6);
}

</style>
<script>
CodeMirror.defineSimpleMode("simplemode", {
  start: [
    {regex: /\w?"([^"\\]|\\.)*("|$)/, token: "variables"}, // Double quote
	
    {regex: /(?![ \{\(\[])\w?'([^'\\]|\\.)*'\s*(?=[\)\],:\}.$ ?])/, token: "strings"}, // single quote strings code
    {regex: /(^| )'([^']|'\w)*'( |$)/, token: "strings"}, // single quote strings speech
    
    {regex: /#.*$/, token: "comments"}, // darklights comments
    {regex: / \|( |$)/, token: 'nums'},
    {regex: /q(\/|\|)/, token: 'comments'},
  ]
});
</script>

<body onload="brython({indexedDB: false})">
  <textarea class='editbox'></textarea>
</body>
<script>

// jk to escape, kj to auto complete, vw to select and copy current word
CodeMirror.Vim.map('jk', '<Esc>', 'insert')
CodeMirror.Vim.map('<C-e>', ':js null', 'normal')
CodeMirror.Vim.map('<C-p>', ':js cm_editbox.showHint()', 'insert')
CodeMirror.Vim.map('<C-n>', ':js cm_editbox.showHint()', 'insert')
CodeMirror.Vim.map('vw', '<Esc>viwygv', 'insert')

// ctrl + e to run file or selection
CodeMirror.Vim.map('<C-e>', ':run_file', 'normal')
CodeMirror.Vim.map('<C-e>', ':run_file', 'insert')
CodeMirror.Vim.map('<C-e>', ':do_py', 'visual')

CodeMirror.Vim.map('<Tab><C-e>', ':run_shard', 'normal')
CodeMirror.Vim.map('<Tab>v', ':visual_shard', 'normal')

// Tab e to align table or selection
CodeMirror.Vim.map('<Tab>e', ':vdo :kpos|vip|:align|:rpos|l', 'normal')
CodeMirror.Vim.map('<Tab>e', ':vdo :align', 'visual')

// put 2 spaces instead of tab char
CodeMirror.Vim.map('<Tab>', ':insertSoftTab', 'insert')

// Transpose table for easy column-wise edits
CodeMirror.Vim.map('<Tab>t', ':vdo :kpos|vip|:do_tp|:rpos|l', 'normal')
CodeMirror.Vim.map('<Tab>t', ':vdo :do_tp', 'visual')

// natural sorting
CodeMirror.Vim.map('<C-y>', ':vdo l|:kpos|vip|:better_sort|:rpos', 'normal')
CodeMirror.Vim.map('<C-y>', ':better_sort', 'visual')

// sort by selection
CodeMirror.Vim.map('<Tab>y', ':js sort_by()', 'visual')

// remove search higlights
CodeMirror.Vim.map('<Tab><Space>', ':noh', 'normal')

// Save command, TODO
CodeMirror.Vim.map('ZA', ':py save_me.append(1)', 'normal')
CodeMirror.Vim.map('ZA', ':py save_me.append(1)', 'insert')

// Align text selections
CodeMirror.Vim.map('<Tab>r', ':js alignRight()', 'visual')
CodeMirror.Vim.map('<Tab>l', ':js alignLeft()', 'visual')
CodeMirror.Vim.map('<Tab>c', ':js alignCenter()', 'visual')

//CodeMirror.Vim.map('(', ':double_tap ()', 'insert')
//CodeMirror.Vim.map(')', ':double_tap )', 'insert')
//CodeMirror.Vim.map('{', ':double_tap {}', 'insert')
//CodeMirror.Vim.map('}', ':double_tap }', 'insert')
//CodeMirror.Vim.map('[', ':double_tap []', 'insert')
//CodeMirror.Vim.map(']', ':double_tap ]', 'insert')
//CodeMirror.Vim.map('"', ':double_tap "', 'insert')
//CodeMirror.Vim.map("'", ":double_tap '", 'insert')

CodeMirror.Vim.unmap('s', 'visual')
CodeMirror.Vim.map('s(', ':surround ()', 'visual')
CodeMirror.Vim.map('s)', ':surround ()', 'visual')
CodeMirror.Vim.map('s[', ':surround []', 'visual')
CodeMirror.Vim.map('s]', ':surround []', 'visual')
CodeMirror.Vim.map('s{', ':surround {}', 'visual')
CodeMirror.Vim.map('s}', ':surround {}', 'visual')

CodeMirror.Vim.map("s'", ":surround ''", 'visual')
CodeMirror.Vim.map('s"', ':surround ""', 'visual')

CodeMirror.Vim.map('<C-k>', ':runup', 'normal')
CodeMirror.Vim.map('<C-j>', ':rundown', 'normal')

// quick select column in pipe table
CodeMirror.Vim.map('zv', ':vblock', 'normal')


editbox = document.querySelector('.editbox')
//if ('data' in localStorage){
//  editbox.value = localStorage.getItem('data')
//}
cm_editbox = CodeMirror.fromTextArea(editbox,{
            'matchBrackets':     true,
            'autoCloseBrackets': false,
            'lineNumbers':       true,
            "mode":              'simplemode',
            "theme":             "material",
            'tabSize':           2,
            'styleActiveLine':   true,
            'keyMap':            'vim',
            'extraKeys':         {"Ctrl-Space": "autocomplete"}
 })
 function tab_to_space(cm){
  cm_editbox.execCommand("insertSoftTab")
}
cm_editbox.addKeyMap({'Ctrl-C': false})
CodeMirror.Vim.defineEx("insertSoftTab", null, tab_to_space)
//cm_editbox.addKeyMap({'Tab': tab_to_space})

var just_completed = false

function on_change(cm, _change){
  cm_editbox.save()
  c = cm_editbox.getCursor()
  c = {line: c.line, ch: c.ch}
  if(c.ch)
    c.ch -= 1
  word = cm_editbox.findWordAt(c); word = cm_editbox.getRange(word.anchor, word.head).trim();
  if(cm_editbox.state.vim.insertMode && word.match(/\w\w$/) && !just_completed)
    cm_editbox.showHint()
  else{
    cm_editbox.closeHint()
    just_completed = false
    }
//  localStorage.setItem('data', editbox.value.replace(/ +$/mgi, ""));
}

cm_editbox.on('change',on_change)

function ac_hint(cm){
  cm.showHint({'hint': CodeMirror.hint.anyword})
}
CodeMirror.commands.autocomplete = ac_hint

function runjs(cm, params){
  eval(params.argString)
}

CodeMirror.Vim.defineEx("js", null, runjs)

function reg(_reg, _new = null){
  if(_new != null){
    CodeMirror.Vim.getRegisterController().getRegister(_reg).keyBuffer[0] = _new
  }
  return CodeMirror.Vim.getRegisterController().getRegister(_reg).keyBuffer[0]
}

function natsort(arr){ // ignores excessive spacing
  //arr = arr.map((i)=>i.trim().replace(/\s\s+/g, ' '))
  //arr.foreach((i)=>i=i.split().join(' '))
  var collator = new Intl.Collator(undefined, {numeric: true, sensitivity: 'base'});
  //(a, b) => collator.compare(a.trim().replace(/\s\s+/g, ' '), b.trim().replace(/\s\s+/g, ' '))
  return arr.sort((a, b) => collator.compare(a.trim().replace(/\s\s+/g, ' '), b.trim().replace(/\s\s+/g, ' ')))
}

function toclip(dat){
  navigator.clipboard.writeText(dat.toString())
    .then(() => {
      console.log(dat.toString() + ' to clip.');
    })
    .catch(err => {
      // This can happen if the user denies clipboard permissions:
      console.error('Could not copy text: ', err);
    });
}

function fromclip(){
dat = ''
navigator.clipboard.readText()
  .then(text => {
    dat = text
  })
  .catch(err => {
    dat = err
  });
  return dat
}

function move_to(tar, _forward = true) {
  var matchingLines = [];
  var matchingChars = [];
  var allLines      = editbox.value.split("\n");
  var pattern       = RegExp(tar)
  var start         = cm_editbox.getCursor().line
  var startch       = cm_editbox.getCursor().ch
  var last          = 0
  var lastch        = 0

  for (var i = 0; i < allLines.length; i++) {
    //match = allLines[i].match(pattern)
    match = pattern.exec(allLines[i])
    if (match) {
      if (i < start){
        matchingLines = [i]
        matchingChars = [match.index]
      }
      if (i >= start){
        matchingLines.push(last);
        matchingChars.push(lastch)
      }
      if (i > start){
        matchingLines.push(i);
        matchingChars.push(match.index)
        break;
      }
      else
        last = i
        lastch = match.index
    }
  }
  //console.log(matchingLines)
  if (_forward){
    cm_editbox.setCursor({'line':matchingLines[matchingLines.length-1], 'ch': matchingChars[matchingChars.length-1]}) // , 'ch':"+str(_options['editbox'].getCursor().ch)+"})")
    //vdo('_')
    //return matchingLines[matchingLines.length-1];
    }
  else{
    cm_editbox.setCursor({'line':matchingLines[0], 'ch': matchingChars[0]}) // , 'ch':"+str(_options['editbox'].getCursor().ch)+"})")
    //vdo('_')
    //return matchingLines[0];
  }
}

// better function for doing macros
// handles ' |' seperators
// handles ? and / and : actions along with keys
// only matches first instance at ? and /
  // use look arounds to get further in the line with multiple instances
function vdo(_keys, _type='macro'){
  //console.log('"' + _keys + '"')
  CodeMirror.Vim.exitInsertMode(cm_editbox)
  __keys = _keys.trimLeft().split('|')
  __keys.forEach((block)=>{
    block = block.replace(/\<bar\>/g, '|')
    if(block.startsWith(':')){
      //do ex
      // test js vdo('jjjj |:js alert("hi")')
      CodeMirror.Vim.handleEx(cm_editbox, block.slice(1))
      //add / move_to and ? leads
    }else if(block.startsWith('/')){
      move_to(block.slice(1))
    }else if(block.startsWith('?')){
      move_to(block.slice(1), false)
    }else{
      //normal vdo
      block.split('').forEach((i)=>{
        CodeMirror.Vim.handleKey(cm_editbox, i, _type)
      })
    }
  })
}
function runvdo(cm, params){
  vdo(params.argString)
}
CodeMirror.Vim.defineEx("vdo", null, runvdo)
CodeMirror.Vim.defineEx("normal", null, runvdo)

function vblock(cm, params){
  cm_editbox.save()
  char_at = cm_editbox.getCursor().ch + 1
  vdo("?^\\s*(#<bar>$)|j")
  line1 = cm.getCursor().line + 1
  vdo("/^\\s*(#<bar>$)|k")
  line2 = cm.getCursor().line + 1
  vdo(line2 + "gg" + char_at + "<bar>t<bar>v" + line1 + "gg" + char_at + "<bar>T<bar>")
  CodeMirror.Vim.handleKey(cm_editbox, '<C-v>', 'macro')
}
CodeMirror.Vim.defineEx('vblock', null, vblock)

function alignRight(){
    vdo('gvy')
    sel = CodeMirror.Vim.getRegisterController().getRegister('"').keyBuffer[0]
    sel = sel.split('\n')
    width = sel[0].length
    sel = sel.map((i)=>{
      return i.trim().padStart(width, ' ');
    })
    CodeMirror.Vim.getRegisterController().getRegister('"').keyBuffer[0] = sel.join('\n')
    vdo('gvp')
}
function alignLeft(){
    vdo('gvy')
    sel = CodeMirror.Vim.getRegisterController().getRegister('"').keyBuffer[0]
    sel = sel.split('\n')
    width = sel[0].length
    sel = sel.map((i)=>{
      return i.trim().padEnd(width, ' ');
    })
    CodeMirror.Vim.getRegisterController().getRegister('"').keyBuffer[0] = sel.join('\n')
    vdo('gvp')
}
function alignCenter(){
    vdo('gvy')
    sel = CodeMirror.Vim.getRegisterController().getRegister('"').keyBuffer[0]
    sel = sel.split('\n')
    width = sel[0].length
    sel = sel.map((i)=>{
      base = width - i.trim().length
      left = Math.floor(base/2)
      right = base - left
      return ''.padEnd(left, ' ') + i.trim() + ''.padStart(right, ' ');
    })
    CodeMirror.Vim.getRegisterController().getRegister('"').keyBuffer[0] = sel.join('\n')
    vdo('gvp')
}


function sort_by(){
  vdo('gvy')
  t = window.CodeMirror.Vim.getRegisterController().getRegister('"').keyBuffer[0]
  t = t.split('\n')
  t = t.join(' \n')+' '
  window.CodeMirror.Vim.getRegisterController().getRegister('"').keyBuffer[0] = t
  w = t.split('\n')[0].length - 1
  h = t.split('\n').length - 1
  vdo('0PV' + h.toString() + 'j|:better_sort')
  CodeMirror.Vim.handleKey(cm_editbox, '<Esc>', 'macro')
  vdo(h.toString() + 'k0')
  CodeMirror.Vim.handleKey(cm_editbox, '<C-v>', 'macro')
  vdo(h.toString() + 'j' + w.toString() + 'lx')
}


//testing char skipping, not space skipping exclusively.
function findMatches(text, tar, start=1) {
  var matchingLines = [];
  var allLines = text.split("\n");
  //console.log(allLines[start].charAt(tar))
  var character = allLines[start].charAt(tar)
	var pattern = RegExp("(?<=^.{"+tar+"})\[^ ]")
	var last = 0
    for (var i = 0; i < allLines.length; i++) {
        if (allLines[i].match(pattern)) {
			if (i >= start)
              matchingLines.push(last);
			if (i > start){
			  matchingLines.push(i);
			  break;}
			else
			  last = i
        }
    }
    return matchingLines;
}


function kpos(cm, params){
  window.lastscroll = cm_editbox.getScrollInfo()
  window.lastline = cm_editbox.getCursor().line
  window.lastch = cm_editbox.getCursor().ch
}
CodeMirror.Vim.defineEx('kpos', null, kpos)

function rpos(cm, params){
  cm_editbox.setCursor({'line':window.lastline, 'ch': window.lastch})
  cm_editbox.scrollTo(window.lastscroll.left, window.lastscroll.top)
}
CodeMirror.Vim.defineEx('rpos', null, rpos)

function uuid4() {
  return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
  );
}

function insertTextAtCursor(editor, text) {
    var doc = editor.getDoc();
    var cursor = doc.getCursor();
    doc.replaceRange(text, cursor);
}


</script>
<!--<script src="lib/brython_aio.js"></script>-->
<script src="lib/brython.js"></script>
<script src="lib/brython_stdlib.js"></script>
<script type="text/python">

from browser import window
from browser import aio as asyncio
from browser import document as doc
from browser.html import *
import time


class Q:
  def __call__(self, arg):
    if callable(arg):
      def f(*l, **kw):
        _ret = arg(*l, **kw)
        args = ', '.join(j for j in (', '.join(repr(i) for i in l), ', '.join(f'{k}={v!r}' for k, v in kw.items())) if j)
        print(f'{arg.__qualname__}({args}) -> {_ret}')
        return _ret
        
      f.__name__ = arg.__name__
      f.__qualname__ = arg.__qualname__
      return f
    print(arg)
    return arg
    
  def __or__(self, arg):
    print(arg)
    return arg
  
  __truediv__ = __div__ = __or__
  
q = Q()

class COLOR:
  crimson = (220, 20, 60)
  emerald = (0, 89, 11)
  cobalt = (0, 71, 171)
  gold = (255, 215, 0)
  red = (255, 0, 0)
  blue = (0, 0, 255)
  green = (0, 255, 0)
  

# TODO
class fopen():
  def __init__(self, new_file=False):
    if new_file:
      self.opts = {
        'type': 'saveFile',
        'accepts': [{
          'description': 'Text file',
          'extensions': ['txt'],
          'mimeTypes': ['text/plain'],
        }],
      }
    else:
      self.opts = {}

  async def __aenter__(self):
    if self.opts:
      self.fileHandle = await window.chooseFileSystemEntries(self.opts)
    else:
      self.fileHandle = await window.chooseFileSystemEntries()
    self.file = await self.fileHandle.getFile()
    self.text = await self.file.text()

    return self

  async def write(self, content):
    writer = await self.fileHandle.createWritable()
    await writer.truncate(0)  
    await writer.write(content)

    await writer.close()

  async def __aexit__(self, *l):
    pass

  
# pure python versions for faster load
#def itemgetter(*items):
#  if len(items) == 1:
#    item = items[0]
#    def g(obj):
#      return obj[item]
#  else:
#    def g(obj):
#      return tuple(obj[item] for item in items)
#  return g

# hacky exec version of itemgetter for speed
# slower creation, but faster execute for more than 1 item
def itemgetter(*items):
  template = f'''def f(i): return {", ".join(f"i[{i!r}]" for i in items)}'''
  loc = {}
  exec(template, {}, loc)
  return loc['f']

# hacky exec version of attrgetter for speed
# slower creation, but faster execute
def attrgetter(*items):
  template = f'''def f(i): return {", ".join(f"i.{i}" for i in items)}'''
  loc = {}
  exec(template, {}, loc)
  return loc['f']

class groupby:
  # [k for k, g in groupby('AAAABBBCCDAABBB')] --> A B C D A B
  # [list(g) for k, g in groupby('AAAABBBCCD')] --> AAAA BBB CC D
  def __init__(self, iterable, key=None):
    if key is None:
      key = lambda x: x
    self.keyfunc = key
    self.it = iter(iterable)
    self.tgtkey = self.currkey = self.currvalue = object()
  def __iter__(self):
    return self
  def __next__(self):
    self.id = object()
    while self.currkey == self.tgtkey:
      self.currvalue = next(self.it)  # Exit on StopIteration
      self.currkey = self.keyfunc(self.currvalue)
    self.tgtkey = self.currkey
    return (self.currkey, self._grouper(self.tgtkey, self.id))
  def _grouper(self, tgtkey, id):
    while self.id is id and self.currkey == tgtkey:
      yield self.currvalue
      try:
        self.currvalue = next(self.it)
      except StopIteration:
        return
      self.currkey = self.keyfunc(self.currvalue)
      
def gatherby(l, *keys):
  gb = {}
  
  if len(keys) == 0:
    for i in l:
      gb.setdefault(i, []).append(i)
  elif len(keys) == 1:
    k = keys[0]
    for i in l:
      gb.setdefault(i[k], []).append(i)
  else:
    for i in l:
      gb.setdefault(tuple(i[k] for k in keys), []).append(i)
  
  return gb


def chunk(l, n=1):
  current_batch = []
  for item in l:
    current_batch.append(item)
    if len(current_batch) == n:
      yield current_batch
      current_batch = []
  if current_batch:
    yield current_batch
    
class zip_longest:
  def __init__(self, *args, fillvalue = None):
    self.args = [iter(arg) for arg in args]
    self.fillvalue = fillvalue
    self.units = len(args)
  
  def __iter__(self):
    return self
  
  def __next__(self):
    temp = []
    nb = 0
    for i in range(self.units):
      try:
        temp.append(next(self.args[i]))
        nb += 1
      except StopIteration:
        temp.append(self.fillvalue)
    if nb==0:
      raise StopIteration
    return tuple(temp)

def partial(func, *args, **keywords):
  def newfunc(*fargs, **fkeywords):
    newkeywords = {**keywords, **fkeywords}
    return func(*args, *fargs, **newkeywords)
  newfunc.func = func
  newfunc.args = args
  newfunc.keywords = keywords
  return newfunc
  
class permutations:
  def __init__(self, iterable, r = None):
    self.pool = tuple(iterable)
    self.n = len(self.pool)
    self.r = self.n if r is None else r
    self.indices = list(range(self.n))
    self.cycles = list(range(self.n, self.n - self.r, -1))
    self.zero = False
    self.stop = False

  def __iter__(self):
    return self

  def __next__(self):
    indices = self.indices
    if self.r > self.n:
      raise StopIteration
    if not self.zero:
      self.zero = True
      return tuple(self.pool[i] for i in indices[:self.r])
    
    i = self.r - 1
    while i >= 0:
      j = self.cycles[i] - 1
      if j > 0:
        self.cycles[i] = j
        indices[i], indices[-j] = indices[-j], indices[i]
        return tuple(self.pool[i] for i in indices[:self.r])
      self.cycles[i] = len(indices) - i
      n1 = len(indices) - 1
      assert n1 >= 0
      num = indices[i]
      for k in range(i, n1):
        indices[k] = indices[k+1]
      indices[n1] = num
      i -= 1
    raise StopIteration
      

def grouper(iterable, n, fillvalue=None):
  "Collect data into fixed-length chunks or blocks"
  # grouper('ABCDEFG', 3, 'x') --> ABC DEF Gxx"
  args = [iter(iterable)] * n
  return zip_longest(*args, fillvalue=fillvalue)


def align(l, *attrs, zip=zip):
  """ Aligns lists into a table like structure for neatness.
  
  This also aligns number like values to the right.
  """

  l = tuple(l)  # exhaust generators
  if isinstance(l[0], dict):
    h = attrs or l[0].keys()
    l = [[f'{j}' for j in i] for i in zip(h, *([i[k] for k in h] for i in l))]
  elif isinstance(l[0], (list, tuple)):
    l = [[f'{j}' for j in i] for i in zip(*l)]
  else:
    h = attrs or (l[0].__slots__ if hasattr(l[0], '__slots__') else vars(l[0]))
    l = [[f'{j}' for j in i] for i in zip(h, *([getattr(i, k) for k in h] for i in l))]

  for col in l:
    column_width = len(max(col, key=len))
    for idx, c in enumerate(col):
      try:
        float(c)
        col[idx] = c.rjust(column_width)
      except:
        col[idx] = c.ljust(column_width)
  
  # transpose back and return.
  return '\n'.join(' | '.join(i).rstrip() for i in zip(*l))

def slot(f, *components, verbose=False):
  """ A simple c-struct like generator. 
  
  This does not inherit functions and constructs a new class from scratch
    using exec.
  """
  if callable(f):
    args = tuple({x for x in (vars(i) for i in f.__mro__ if i is not object) for x in x if not x.startswith('__')})
    defaults = tuple(getattr(f, i) for i in args)
    supers = tuple(i.__qualname__ for i in f.__mro__ if i is not object and i is not f)
    components = '__components__ = ' + repr(supers)
    name = f.__name__ 
    
    largs = ', '.join(args[:-len(defaults)] if defaults else args)
  else:
    components = list(components)
    slots = components.pop(0)
    defaults = components
    args = tuple(slots.split(' '))
    largs = ', '.join(args[:-len(defaults)] if defaults else args)
    name = f
    supers = ()

  # Gather list of collections
  collections = {k: repr(v) for k, v in zip(args[-len(defaults):], defaults)
      if type(v) in (list, tuple, dict, set)}

  # Set default signature.
  kwargs = ', '.join(f'{k}={repr(None if k in collections else v)}' for k, v in zip(args[-len(defaults):], defaults))
  all_args = ', '.join(i for i in [largs, kwargs] if i)

  # Self setters.
  sargs = '\n    '.join(f'self.{k} = {v}' for k, v in zip(args, (f'{collections[i]} if {i} is None else {i}' if i in collections else i for i in args)))

  slot_template = f'''
class {name}:
  __slots__ = {repr(args)}
  {components if supers else ''}
  def __init__(self,
      {all_args}):
    {sargs}
    
  def __iter__(self):
    yield from ({', '.join(f'self.{i}' for i in args)})
        
  def __repr__(self):
    return self.__class__.__name__ + '(' + ', '.join(f'{{k}}={{getattr(self, k, None)!r}}'
        for k in self.__slots__) + ')'
'''.strip()
  # Verbosity to print out generated code.
  if verbose:
    print(slot_template)

  local = {}
  exec(slot_template, local)
  return local[name]
  
  
def todict(obj):
  # dict
  if obj is None:
    return None
  elif isinstance(obj, dict):
    #return {k: todict(v) for k, v in obj.items()}
    data = {}
    for k, v in obj.items():
      data[k] = todict(v)
    return data
  # slot objects
  elif hasattr(obj, '__slots__'):
    #return {k: todict(getattr(obj, k)) for k in obj.__slots__} # brython issue
    data = {}
    for k in obj.__slots__:
      if not k.startswith('_'):
        data[k] = todict(getattr(obj, k))
    return data
  # something iterable, like tuples or lists
  elif hasattr(obj, "__iter__") and not isinstance(obj, str):
    return type(obj)(todict(v) for v in obj)
  # simple classes
  elif hasattr(obj, "__dict__"):
    #return {k: todict(v) for k, v in obj.__dict__.items()
    #  if not callable(v) and not k.startswith('_')}
    data = {}
    for k, v in obj.__dict__.items():
      if not callable(v) and not k.startswith('_'):
        data[k] = todict(v)
    return data
  # finally simple type
  else:
    return obj

# --- end focus


ctrl = False
tables = {}
_options = {}
editbox = window.editbox
cm_editbox = window.cm_editbox
_options['editbox'] = cm_editbox
_options['so'] = 6*12
_options['center'] = True
_options['body'] = doc.querySelector('body')
_options['window'] = window
_options['limelight'] = None
_options['relative_number'] = True

def runup(cm, params):
  cm_editbox.save()
  tar = window.findMatches(cm_editbox.getTextArea().value, cm_editbox.getCursor().ch, cm_editbox.getCursor().line)[0]
  window.eval("document.querySelector('.CodeMirror').CodeMirror.setCursor({'line':"+str(tar)+", 'ch':"+str(_options['editbox'].getCursor().ch)+"})")
window.CodeMirror.Vim.defineEx("runup", None, runup)
def rundown(cm, params):
  cm_editbox.save()
  tar = window.findMatches(_options['editbox'].getTextArea().value, _options['editbox'].getCursor().ch, _options['editbox'].getCursor().line)[-1]
  window.eval("document.querySelector('.CodeMirror').CodeMirror.setCursor({'line':"+str(tar)+", 'ch':"+str(_options['editbox'].getCursor().ch)+"})")
window.CodeMirror.Vim.defineEx("rundown", None, rundown)


def overscroll(cm):
  def temp(l):
    if _options['relative_number']:
      return abs(cm.getCursor().line + 1 - l)
    else:
      return l
  cm.setOption('lineNumberFormatter', temp);
  if _options['center'] and not cm_editbox.state.vim.insertMode and not cm_editbox.state.vim.visualMode:
    doc.querySelector('.CodeMirror').CodeMirror.setOption('cursorScrollMargin',doc.querySelector('.CodeMirror').scrollHeight/2)
  else:
    doc.querySelector('.CodeMirror').CodeMirror.setOption('cursorScrollMargin',_options['so'])
doc.querySelector('.CodeMirror').CodeMirror.on('cursorActivity', overscroll)


_options['_line_numbers'] = True
def line_numbers(state=False):
  cm_editbox.setOption('lineNumbers', state)
  _options['_line_numbers'] = state

_options['line_numbers'] = line_numbers

def on_down(ev):
  global ctrl, tables
  if ev.ctrlKey:
    ctrl=True
  else:
    ctrl=False

  if ev.which == 37 and ctrl:
    if not cm_editbox.state.vim.insertMode:
      ev.preventDefault()
      ev.stopPropagation()
      if _options['_line_numbers']:
        cm_editbox.setOption('lineNumbers', False)
      cm_editbox.setOption('lineWrapping', True)
      cm_editbox.setOption('readOnly', True)
  if ev.which == 39 and ctrl:
    if not cm_editbox.state.vim.insertMode:
      ev.preventDefault()
      ev.stopPropagation()
      if _options['_line_numbers']:
        cm_editbox.setOption('lineNumbers', True)
      cm_editbox.setOption('lineWrapping', False)
      cm_editbox.setOption('readOnly', False)
  if chr(ev.which)=='G' and ctrl:
    start = cm_editbox.getCursor(True).line
    end = cm_editbox.getCursor(False).line
    if start == end:
      window.alert(f'{cm_editbox.getCursor().line + 1}, {cm_editbox.getCursor().ch + 1}')
    else:
      diff = abs(start-end)
      window.alert('{}:{}({})'.format(start+1, end+1, diff+1))
    ev.preventDefault()
    ev.stopPropagation()

window.bind('keydown', on_down)

def do_py() -> None:
  try:
    print_red = []
    def print(*objects, sep=' ', end='\n'):
      print_red.append(sep.join(str(o) for o in objects) + end)
    class Q:
      def __call__(self, arg):
        if callable(arg):
          def f(*l, **kw):
            _ret = arg(*l, **kw)
            args = ', '.join(j for j in (', '.join(repr(i) for i in l), ', '.join(f'{k}={v!r}' for k, v in kw.items())) if j)
            print(f'{arg.__qualname__}({args}) -> {_ret}')
            return _ret
            
          f.__name__ = arg.__name__
          f.__qualname__ = arg.__qualname__
          return f
        print(arg)
        return arg
        
      def __or__(self, arg):
        print(arg)
        return arg
      
      __truediv__ = __div__ = __or__
      
    q = Q()
    window.vdo("gv")
    data = cm_editbox.getSelection()
    exec(data)
    if print_red:
      out = '\n'.join([data, ''.join(print_red)])
      window.vdo("gv")
      cm_editbox.replaceSelection(out.strip('\n'))
  except Exception as e:
    import traceback
    print_red += [i+'\n' for i in traceback.format_exc().splitlines()]
    out = '\n'.join([data, ''.join(print_red)])
    window.vdo("gv")
    cm_editbox.replaceSelection(out.strip('\n'))

def run_py(cm, params):
  do_py()
window.CodeMirror.Vim.defineEx("do_py", None, run_py)

def run_file(cm, params):
  try:
    exec(cm_editbox.getValue())
  except Exception as e:
    import traceback
    print(traceback.format_exc())
window.CodeMirror.Vim.defineEx("run_file", None, run_file)

def run_shard(*l, **kw):
  visual_shard(*l, **kw)
  delay(0)(do_py)

  #viewport = doc.select_one('body').width//1.2, \
  #  doc.select_one('body').height//1.2
  #print_red = []
  #def print(*objects, sep=' ', end='\n'):
  #  print_red.append(sep.join(str(o) for o in objects) + end)
  #
  #cm_editbox.save()
  #cur_line = cm_editbox.getCursor().line
  #look_ahead = editbox.value.splitlines()[cur_line:]
  #look_behind = editbox.value.splitlines()[: cur_line]
  #start, end = 0, 0
  #
  #count = 0
  #for idx, i in enumerate(look_ahead):
  #  if not i.strip():
  #    count += 1
  #  else:
  #    count = 0
  #  if count > 1:
  #    end = idx+cur_line - 1
  #    break
  #    
  #count = 0
  ##for idx, i in enumerate([*reversed(look_behind)]):
  #for idx, i in enumerate(list(reversed(look_behind))):
  #  if not i.strip():
  #    count += 1
  #  else:
  #    count = 0
  #  if count > 1:
  #    start = cur_line - idx + 1
  #    break
  #  
  ##print(editbox.value.splitlines()[start:end])
  #try:
  #  exec('\n'.join(editbox.value.splitlines()[start:end]))
  #  if print_red:
  #    popup(TEXTAREA(''.join(print_red), style={'width': viewport[0], 'height': viewport[1]}), *viewport)
  #except Exception as e:
  #  import traceback
  #  print_red += [i+'\n' for i in traceback.format_exc().splitlines()]
  #  popup(TEXTAREA(''.join(print_red), style={'width': viewport[0], 'height': viewport[1]}), *viewport)
  #  global watch_depth
  #  watch_depth = -1
window.CodeMirror.Vim.defineEx("run_shard", None, run_shard)

def visual_shard(*l, **kw):
  cm_editbox.save()
  cur_line = cm_editbox.getCursor().line
  look_ahead = editbox.value.splitlines()[cur_line:]
  look_behind = editbox.value.splitlines()[: cur_line]
  start, end = 0, 0

  count = 0
  for idx, i in enumerate(look_ahead):
    if not i.strip():
      count += 1
    else:
      count = 0
    if count > 1:
      end = idx+cur_line - 1
      break
      
  count = 0
  #for idx, i in enumerate([*reversed(look_behind)]):
  for idx, i in enumerate(list(reversed(look_behind))):
    if not i.strip():
      count += 1
    else:
      count = 0
    if count > 1:
      start = cur_line - idx + 1
      break
  window.vdo(f'{start+1}ggV{end}gg')
  #print(editbox.value.splitlines()[start:end])
window.CodeMirror.Vim.defineEx("visual_shard", None, visual_shard)

def do_tp() -> None:
  try:
    window.vdo("gvo")
    data = cm_editbox.getSelection()
    data = list(list(i) for i in zip_longest(*([j.strip() for j in i.split('|')] for i in data.splitlines())))
    out = align(data)
    cm_editbox.replaceSelection(out.strip('\n'))
  except Exception as e:
    import traceback
    window.make_popup(traceback.format_exc())

def run_tp(cm, params):
  do_tp()
window.CodeMirror.Vim.defineEx("do_tp", None, run_tp)

def runpy(cm, params):
  #g = globals()
  #g.update(_options)
  exec(params.argString, globals(), _options)

window.CodeMirror.Vim.defineEx("py", None, runpy)

def better_sort():
  #import re
  import _jsre as re
  oldpos = cm_editbox.getCursor()
  if not cm_editbox.state.vim.visualLine:
    window.CodeMirror.Vim.exitInsertMode(cm_editbox)
    window.vdo('gv') # hack for vim visual stating on codemirror
  dat = cm_editbox.getSelection()

  # Genius snippet.
  def natural_sort_key(s, _nsre=re.compile('([0-9]+)')):
    return [int(text) if text.isdigit() else re.sub(r'\s\s+', ' ', text.strip().lower())
            for text in _nsre.split(s)]

  def if_comment(i):
    if i.lstrip().startswith('#'):
      return i
    if i.strip() == '':
      return ''
    return False

  def better_sort(s):
    gb = groupby(s.splitlines(), key=if_comment)
    gb = [list(v) for k, v in gb]
    #gb = '\n'.join('\n'.join(sorted(i, key=natural_sort_key)) for i in gb)
    gb = '\n'.join('\n'.join(window.natsort(i)) for i in gb)
    return(gb)

  cm_editbox.replaceSelection(better_sort(dat))

  window.eval("document.querySelector('.CodeMirror').CodeMirror.setCursor({'line':"+str(oldpos.line)+", 'ch':"+str(oldpos.ch)+"})")
  window.CodeMirror.Vim.handleKey(cm_editbox, '<Esc>', 'macro')
def run_better_sort(cm, params):
  try:
    better_sort()
  except Exception as e:
    print(e)
window.CodeMirror.Vim.defineEx("better_sort", None, run_better_sort)


def run_align(cm, params):
  window.vdo('gv')
  data = cm_editbox.getSelection()
  out = align(([j.strip() for j in i.split('|')] for i in data.splitlines()), zip=lambda *i: zip_longest(*i, fillvalue=''))

  window.vdo('gv')
  cm_editbox.replaceSelection(out.strip('\n'))
window.CodeMirror.Vim.defineEx("align", None, run_align)


def props(cm, params):
  window.vdo('gv')
  data = cm_editbox.getSelection().strip()
  
  args = data.split(' ')
  out = ''
  
  for i in args:
    out += f'''  @property
  def {i}(self):
    return self._{i}
  @{i}.setter
  def {i}(self, value):
    if (old:=self._{i}) is not value:
      self._{i} = value
    
'''
    
  window.vdo('gv')
  cm_editbox.replaceSelection(out.strip('\n'))
window.CodeMirror.Vim.defineEx("props", None, props)


def double_tap(cm, params):
  try:
    chars = params.argString.strip()
    line = cm_editbox.getCursor().line
    ch = cm_editbox.getCursor().ch
    cur_line = cm_editbox.getLine(line)
    if len(cur_line) > ch and cur_line[ch] == chars:
      cm_editbox.setCursor({'line':line, 'ch': ch+1})
    else:
      if chars in ('"', "'"):
        window.insertTextAtCursor(cm, chars*2)
      else:
        window.insertTextAtCursor(cm, chars)
      cm_editbox.setCursor({'line':line, 'ch': ch+1})
      #window.CodeMirror.Vim.exitInsertMode(cm_editbox)
      #window.vdo('a')
  except Exception as e:
    import traceback
    asyncio.run(popup(traceback.format_exc()))
window.CodeMirror.Vim.defineEx("double_tap", None, double_tap)

def run_surround(cm, params):
  try:
    chars = params.argString.strip()
    window.vdo("gv")
    data = cm_editbox.getSelection()
    out = f'{chars[0]}{data}{chars[1]}'
    cm_editbox.replaceSelection(out.strip('\n'))
    window.CodeMirror.Vim.handleKey(cm_editbox, '<Esc>', 'macro')
  except Exception as e:
    import traceback
    asyncio.run(popup(traceback.format_exc()))
window.CodeMirror.Vim.defineEx("surround", None, run_surround)


#--- async stuff

def center(el):
  'bottom height left right top width'
  root = getdim(doc.querySelector('body'))
  eldim = getdim(el)
  el.left = int(root.center[0] - eldim.width//2)
  el.top = int(root.center[1] - eldim.height//2)

save_me = []
loaded = False
_options['save_me'] = save_me

def save_on_blur(*l, **kw):
  if loaded:
    save_me.append(2)

window.onblur = save_on_blur

async def auto_saver():
  global loaded
  async with fopen() as f:
    cm_editbox.setValue(f.text)
    loaded = True
    while True:
      while not save_me:
        await asyncio.sleep(.1)
      cm_editbox.save()
      await f.write(editbox.value)
      if 1 in save_me:
        #window.alert('saved')
        asyncio.run(saved_notif())
      save_me.clear()
      print('Saved')

async def saved_notif():
  notif = DIV([
      (time_display:=DIV('Saved'))],
    Class='card',
    style={
      'right': 0,
      'bottom': 0,
      'position':'fixed',
      'z-index': 99})
  with El(notif, doc) as n:
    await asyncio.sleep(1)

def _e(cm, params):
  asyncio.run(auto_saver())
window.CodeMirror.Vim.defineEx("e", None, _e)
window.CodeMirror.Vim.defineEx("edit", None, _e)

#async def main():
#  res = await asyncio.gather(auto_saver())
#  window.alert(str(res))
#
#asyncio.run(main())

def popup(root, width='auto', height='auto'):
  if isinstance(root, (tuple, list, str, int, float, set, dict)):
    root = DIV(root)
  d = DIALOG(root)
  root.style['width'] = width
  root.style['height'] = height
      
  def on_click(ev):
    d.remove()
    cm_editbox.focus()
  d.bind('close', on_click)
    
  doc <= d
  
  d.showModal()
  
  return d
  
class Popup:
  def __init__(self, *l, **kw):
    self.d = popup(*l, **kw)
    
  def __enter__(self):
    return self
    
  def __exit__(self, *l):
    self.d.close()
    
class El:
  def __init__(self, el, parent=None):
    self.el = el
    if parent:
      parent <= self.el
  
  def __enter__(self):
    return self.el
    
  def __exit__(self, *l):
    self.el.remove()
    
class Box(DIV):
  def __init__(self, *l, x=0, y=0, width=0, height=0, display='inline', 
      opacity=1, axis=('left', 'top'), **kw):
    for k, v in (
        (axis[0], x),  (axis[1], y),
        ('width', width), ('height', height),
        ('display', display), ('opacity', opacity),
        ('box-sizing', 'border-box'), ('position', 'absolute')):
      self.style[k] = v
      
    super().__init__(*l, **kw)

    
class Tile(DIV):
  def __init__(self, text, x=0, y=0, width=0, height=0, display='inline', 
      opacity=1, axis=('left', 'top'), font_size='24px', data=None, **kw):
          
    self.data = data

    for k, v in (
        (axis[0], x),  (axis[1], y),
        ('width', width), ('height', height),
        ('display', display), ('opacity', opacity),
        ('box-sizing', 'border-box'), ('position', 'absolute')):
      self.style[k] = v
      
    super().__init__(DIV(text, 
      style={
        'position': 'absolute',
        'left': '50%', 'top': '50%',
        'transform': 'translate(-50%, -50%)',
        'font-size': font_size}), **kw)
        
  @property
  def text(self):
    return self.children[0].text
  @text.setter
  def text(self, value):
    self.children[0].text = value
      
class Icon(I):
  def __init__(self, *l, font_size='32px', **kw):
    super().__init__(*l, **{'Class': 'material-icons', **kw})
    
    self.style['font-size'] = font_size


def make_ripple(el, base_color=(18,18,18,1), no_key=False):
  mutator = tint if is_dark(*base_color) else shade
  
  hover_color = mutator(opacities[8], *base_color[:3], 1)
  pulse_color = mutator(.4, *base_color[:3], 1)
  
  glows = [(*(base_color[:3]), i) for i in (.14, .12, .2)]
  
  @bind('mouseout blur', el)
  def prep_ripple(*_):
    base_sty = {'background-color': f'rgba{base_color}', 
      'background-position': 'center', 
      'box-shadow': 'none',
      'transition': 'all 0.3s',
      'transition-timing-function': 'cubic-bezier(0.4, 0.0, 0.2, 1)'}
    for k, v in base_sty.items():
      el.style[k] = v
  prep_ripple()

  @bind('mouseover mouseup focus', el)
  def pre_ripple(*_):
    hover_sty = {'transition': 'all 0.3s',
      'box-shadow': f'0 4px 5px 0 rgba{glows[0]}, 0 1px 10px 0 rgba{glows[1]}, 0 2px 4px -1px rgba{glows[2]}',
      'background': f'rgba{hover_color} radial-gradient(circle, transparent 1%, rgba{hover_color} 1%) center/15000%'}

    for k, v in hover_sty.items():
      el.style[k] = v

  @bind('mousedown', el)
  def do_ripple(*_):
    active_sty = {'background-color': f'rgba{pulse_color}',
      #'box-shadow': f'0 4px 5px 0 rgba(220, 20, 60, 0.14), 0 1px 10px 0 rgba(220, 20, 60, 0.12), 0 2px 4px -1px rgba(220, 20, 60, 0.20)',
      'background-size': '100%', 'transition': 'all 0s'}

    for k, v in active_sty.items():
      el.style[k] = v
    
    Delay(.05, pre_ripple)

  def _do_ripple(*_):
    pre_ripple()
    Delay(.4, do_ripple)
    Delay(.45, pre_ripple)
    Delay(.6, prep_ripple)
  
  def _key_ripple(ev):
    if ev.key=='Enter' or ev.key==' ':
      do_ripple()
  
  if not no_key:
    el.bind('keydown', _key_ripple)
  
  return el, _do_ripple

# import from notes file

#viewport = doc.select_one('body').width//1.2, \
#  doc.select_one('body').height//1.2
#
#cell_size = [min(viewport)//3 - 32]*2
#grid_size = [a//b for a, b in zip(viewport, cell_size)]
#offset = [(a-b*c)/2 for a, b, c in zip(viewport, cell_size, grid_size)]
#tracks = [[(round(a+b*i), round(a+b+b*i)) for i in range(c)]  # (coord, length) pairs
#  for a, b, c in zip(offset, cell_size, grid_size)]

def axis_to_tracks(axis, viewport, offset=None):
  """ Used to generate a non-uniform grid. """
  axis = [[v*b if isinstance(b, float) else b for b in a] 
    for v, a in zip(viewport, axis)]

  for v, a in zip(viewport, axis):
    if (count:=len([i for i in a if i is ...])):
      fill = (v - sum(i for i in a if i is not ...))/count
      while ... in a:
        a[a.index(...)] = fill

  axis = [[round(sum(a[:i])) for i in range(len(a)+1)] for a in axis]
  axis = [[(a[i]+o, a[i+1]+o) for i in range(len(a)-1)] 
      for a, o in zip(axis, offset or [0]*len(axis))]
  
  return axis

def tracks_to_coords(tracks, cell, ecell=None, padding=None):
  """ Returns pairs of start and end of each axis in tracks. """
  return [(t[c][0]+p, t[ec or c][1]-p*2) 
      for c, ec, t, p in zip(
          cell, ecell or [None]*len(cell), 
          tracks, padding or [0]*len(cell))]

def point_to_cell(tracks, point=(0, 0)):
  """ Get cell that point is in on tracks. """
  return [next((idx for idx, i in enumerate(t) if i[0] <= p <= i[1]), None)
      for t, p in zip(tracks, point)]
    
coords_map = ('left', 'width'), ('top', 'height')
def gmap(instance, *l, **kw):
  for k, v in zip(coords_map, tracks_to_coords(*l, **kw)):
    instance.style[k[0]] = v[0]
    instance.style[k[1]] = v[1] - v[0]
      
      
# dark material height to tint
opacities = {0: 0,
     1: .05,
     2: .07,
     3: .08,
     4: .09,
     6: .11,
     8: .12,
     12: .14,
     16: .15,
     24: .16}
font_opacities = {'high': .87, 'medium': .6, 'disabled': .38}
font_error = (176, 0, 32, 1) #B00020

def tint(val, r, g, b, *_):
  # Tints rgb values to apply 'light'

  rt = r + (val * (255 - r))
  gt = g + (val * (255 - g))
  bt = b + (val * (255 - b))
  return (rt, gt, bt, *_)

def shade(val, r, g, b, *_):
  # Tints rgb values to apply 'dark' 

  rt = r - r*val 
  gt = g - g*val 
  bt = b - b*val 
  return (rt, gt, bt, *_)


def is_dark(r, g, b, *_):
  # determine color too dark
  # HSP (Highly Sensitive Poo) equation from http://alienryderflex.com/hsp.html
  hsp =  0.299 * r**2 + 0.587 * g**2 + 0.114 * b**2
  return 127.5 >= hsp**(1/2.0)

def hilo(a, b, c):
  # used in compliment function

  if c < b: b, c = c, b
  if b < a: a, b = b, a
  if c < b: b, c = c, b
  return a + c

def complement(r, g, b, *_):
  # return complement color
  k = hilo(r, g, b)
  return tuple(*(k - u for u in (r, g, b)), *_)

#decode hex to tuple
#tuple(bytes.fromhex("aabbccaa"))


def table(s, types={}, char='|'):
  ds = ([j.strip() for j in i.split(char)] 
    for i in s.strip().lstrip('#').splitlines()
      if not i.strip().startswith('#'))

  h = next(ds)
  if types:
    for i in ds:
      yield {k: types[k](v or types[k]()) if k in types else v
          for k, v in zip(h, i)}
  else:
    yield from (dict(zip(h, i)) for i in ds)
        
def matrix(s, types=None, char='|'):
  ds = ([j.strip() for j in i.split(char)] 
    for i in s.strip().splitlines()
      if not i.strip().startswith('#'))
   
  if not types:
    yield from ds
  elif isinstance(types, (list, tuple)):
    for i in ds:
      yield [k(v or k()) for k, v in zip(types, i)]
  else:
    for i in ds:
      yield [types(v or types()) for v in i]

class attrDict:
  def __init__(self, **kw):
    self.__dict__.update(kw)
    
  def __iter__(self):
    yield from (getattr(self, k, None) for k in (self.__slots__ if hasattr(self, '__slots__') else vars(self)))
  
  def __repr__(self):
    return self.__class__.__name__ + '(' + ', '.join(f'{k}={getattr(self, k, None)!r}'
        for k in (self.__slots__ if hasattr(self, '__slots__') else vars(self))) + ')'
        
def stagger(l, d):
  d = d/len(l)
  def _stagger(f):
    for idx, i in enumerate(l, 1):
      if isinstance(i, (tuple, list)):
        Delay(idx*d, f, *i)
      elif isinstance(i, (dict)):
        Delay(idx*d, f, **i)
      else:
        Delay(idx*d, f, i)
  return _stagger

class Ticker:
  def __init__(self):
    self.last_tick = window.Date.now()
    self.last_diff = self.last_tick
    
  def tick(self, sec):
    n = window.Date.now()
    _s = sec*1000
    diff = self.last_tick + _s - n
    self.last_tick += _s
    
    return max(diff/1000, 0)
    
  def diff(self):
    _diff = window.Date.now() - self.last_diff
    self.last_diff += _diff
    
    return _diff/1000
    
async def loop(d, f, running=True):
  t = Ticker()
  while f(t.diff()) is not False and running:
    await asyncio.sleep(t.tick(d))
    
def delay(d, running=None):
  if not running:
    running = [None, 'running']
  def _delay(f, *l, **kw):
    async def __delay():
      await asyncio.sleep(d)
      if running:
        running[:] = [f(*l, **kw), 'done']
      else:
        running[:] = [None, 'cancelled']
    asyncio.run(__delay())
    return f
  return _delay
  
def Delay(d, f, *l, **kw):
  task = [None, 'running']
  delay(d, task)(f, *l, **kw)
  return task
    
def debounce(d):
  _delay = None
  def _debounce(f):
    def __debounce(*l, **kw):
      nonlocal _delay
      if _delay:
        _delay.clear()
      _delay = Delay(d, f, *l, **kw)
    return __debounce
  return _debounce
  
def throttle(d):
  _delay, last, _l, _kw = None, -1, [], {}
  def _throttle(f):
    def do():
      nonlocal last
      last = window.Date.now()
      f(*_l, **_kw)
    def __throttle(*l, **kw):
      nonlocal _delay, last, _l, _kw
      if _delay:
        _l, _kw = l, kw
      elif ~last and window.Date.now() - last < d*1000:
        _l, _kw = l, kw
        _delay = Delay(d - (window.Date.now() - last)/1000, do)
      else: 
        last = window.Date.now()
        f(*l, **kw)
    return __throttle
  return _throttle


</script>
</html>