From a4b81fb97de1435855c707cd32d773bff46513e5 Mon Sep 17 00:00:00 2001
From: stagas <gstagas@gmail.com>
Date: Tue, 8 Oct 2024 16:01:17 +0300
Subject: [PATCH 01/25] docs: mark complete

---
 README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 5250d34..39adac8 100644
--- a/README.md
+++ b/README.md
@@ -92,7 +92,7 @@
   - [x] OAuthRegister
   - [x] QrCode
   - [x] WebSockets
-  - [ ] UI Showcase
+  - [x] UI Showcase
 - [x] Components
   - [x] Header
   - [x] Toast
@@ -104,6 +104,7 @@
   - [x] ResetPassword
   - [x] VerifyEmail
 - [x] UI
+  - [x] Button
   - [x] Fieldset
   - [x] Input
   - [x] Label

From 94fed17555c59bec0d1f8e4218865039d3c9b745 Mon Sep 17 00:00:00 2001
From: stagas <gstagas@gmail.com>
Date: Wed, 9 Oct 2024 17:52:45 +0300
Subject: [PATCH 02/25] feat: wip editor

---
 lib/caching-router.ts                         |   3 +-
 src/pages/App.tsx                             |   6 +-
 src/pages/{Canvas.tsx => CanvasDemo.tsx}      |  48 +--
 src/pages/EditorDemo.tsx                      |  35 ++
 src/pages/Home.tsx                            |   1 +
 src/ui/Canvas.tsx                             |  28 ++
 src/ui/editor/Editor.tsx                      | 348 ++++++++++++++++++
 src/ui/editor/text-buffer.test.ts             | 227 ++++++++++++
 src/ui/editor/text-buffer.ts                  | 198 ++++++++++
 src/ui/editor/util/begin-of-line.ts           |   3 +
 src/ui/editor/util/find-matching-brackets.ts  |  65 ++++
 src/ui/editor/util/index-to-point.ts          |  23 ++
 src/ui/editor/util/index-to-visual-point.ts   |  25 ++
 src/ui/editor/util/index.ts                   |  11 +
 src/ui/editor/util/parse-words.ts             |   7 +
 src/ui/editor/util/point-to-index.test.ts     |  57 +++
 src/ui/editor/util/point-to-index.ts          |  26 ++
 src/ui/editor/util/regexp.ts                  |   5 +
 src/ui/editor/util/types.ts                   |   8 +
 src/ui/editor/util/visual-point-to-index.ts   |  22 ++
 .../util/visual-point-to-logical-point.ts     |  11 +
 src/ui/editor/util/word-wrap-text.test.ts     |  67 ++++
 src/ui/editor/util/word-wrap-text.ts          |  60 +++
 src/ui/index.ts                               |   1 +
 24 files changed, 1258 insertions(+), 27 deletions(-)
 rename src/pages/{Canvas.tsx => CanvasDemo.tsx} (59%)
 create mode 100644 src/pages/EditorDemo.tsx
 create mode 100644 src/ui/Canvas.tsx
 create mode 100644 src/ui/editor/Editor.tsx
 create mode 100644 src/ui/editor/text-buffer.test.ts
 create mode 100644 src/ui/editor/text-buffer.ts
 create mode 100644 src/ui/editor/util/begin-of-line.ts
 create mode 100644 src/ui/editor/util/find-matching-brackets.ts
 create mode 100644 src/ui/editor/util/index-to-point.ts
 create mode 100644 src/ui/editor/util/index-to-visual-point.ts
 create mode 100644 src/ui/editor/util/index.ts
 create mode 100644 src/ui/editor/util/parse-words.ts
 create mode 100644 src/ui/editor/util/point-to-index.test.ts
 create mode 100644 src/ui/editor/util/point-to-index.ts
 create mode 100644 src/ui/editor/util/regexp.ts
 create mode 100644 src/ui/editor/util/types.ts
 create mode 100644 src/ui/editor/util/visual-point-to-index.ts
 create mode 100644 src/ui/editor/util/visual-point-to-logical-point.ts
 create mode 100644 src/ui/editor/util/word-wrap-text.test.ts
 create mode 100644 src/ui/editor/util/word-wrap-text.ts

diff --git a/lib/caching-router.ts b/lib/caching-router.ts
index f3e759e..33067e1 100644
--- a/lib/caching-router.ts
+++ b/lib/caching-router.ts
@@ -1,7 +1,7 @@
 import { dispose } from 'sigui'
 
 export function CachingRouter(routes: Record<string, () => JSX.Element>) {
-  const cache = new Map<string, JSX.Element>()
+  const cache = new Map<string, JSX.Element & { focus?(): void }>()
   let shouldDispose = false
   return function (pathname: string) {
     if (shouldDispose) {
@@ -15,6 +15,7 @@ export function CachingRouter(routes: Record<string, () => JSX.Element>) {
     if (!(pathname in routes)) return
     let el = cache.get(pathname)
     if (!el) cache.set(pathname, el = routes[pathname]())
+    else requestAnimationFrame(() => el!.focus?.())
     return el
   }
 }
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
index cd456e7..5832a71 100644
--- a/src/pages/App.tsx
+++ b/src/pages/App.tsx
@@ -8,8 +8,9 @@ import { Toast } from '~/src/comp/Toast.tsx'
 import { VerifyEmail } from '~/src/comp/VerifyEmail.tsx'
 import { About } from '~/src/pages/About.tsx'
 import { AssemblyScript } from '~/src/pages/AssemblyScript.tsx'
-import { Canvas } from '~/src/pages/Canvas'
+import { CanvasDemo } from '~/src/pages/CanvasDemo'
 import { Chat } from '~/src/pages/Chat/Chat.tsx'
+import { EditorDemo } from '~/src/pages/EditorDemo.tsx'
 import { Home } from '~/src/pages/Home.tsx'
 import { OAuthRegister } from '~/src/pages/OAuthRegister.tsx'
 import { QrCode } from '~/src/pages/QrCode.tsx'
@@ -35,7 +36,8 @@ export function App() {
     '/ui': () => <UiShowcase />,
     '/chat': () => <Chat />,
     '!/ws': () => <WebSockets />,
-    '!/canvas': () => <Canvas width={info.$.canvasWidth} height={info.$.canvasHeight} />,
+    '!/canvas': () => <CanvasDemo width={info.$.canvasWidth} height={info.$.canvasHeight} />,
+    '/editor': () => <EditorDemo width={info.$.canvasWidth} height={info.$.canvasHeight} />,
     '/asc': () => <AssemblyScript />,
     '/qrcode': () => <QrCode />,
     '/about': () => <About />,
diff --git a/src/pages/Canvas.tsx b/src/pages/CanvasDemo.tsx
similarity index 59%
rename from src/pages/Canvas.tsx
rename to src/pages/CanvasDemo.tsx
index e5b89b2..224ea7c 100644
--- a/src/pages/Canvas.tsx
+++ b/src/pages/CanvasDemo.tsx
@@ -1,39 +1,27 @@
 import { Sigui, type Signal } from 'sigui'
 import { drawText } from 'utils'
 import { screen } from '~/src/screen.ts'
+import { Canvas } from '~/src/ui/Canvas.tsx'
+import { H2 } from '~/src/ui/Heading.tsx'
 
-export function Canvas({ width, height }: {
+export function CanvasDemo({ width, height }: {
   width: Signal<number>
   height: Signal<number>
 }) {
   using $ = Sigui()
 
-  const canvas = <canvas width="1" height="1" /> as HTMLCanvasElement
-  const c = canvas.getContext('2d')!
+  const canvas = <Canvas width={width} height={height} /> as HTMLCanvasElement
 
   const info = $({
+    c: null as null | CanvasRenderingContext2D,
     pr: screen.$.pr,
     width,
     height,
-    c: $.unwrap(async () => {
-      await document.fonts.ready
-      return c
-    })
   })
 
-  $.fx(() => {
-    const { c, width, height, pr } = $.of(info)
-    $()
-    if (c instanceof Error) return
-    canvas.width = width * pr
-    canvas.height = height * pr
-    canvas.style.width = `${width}px`
-    canvas.style.height = `${height}px`
-    c.scale(pr, pr)
-    c.textBaseline = 'top'
-    c.textRendering = 'optimizeSpeed'
-    c.miterLimit = 1.5
-    c.font = '32px "Fustat"'
+  const c = canvas.getContext('2d')!
+  document.fonts.ready.then(() => {
+    info.c = c
   })
 
   let i = 0
@@ -47,13 +35,25 @@ export function Canvas({ width, height }: {
   }
 
   $.fx(() => {
-    const { c } = $.of(info)
+    const { pr, c } = $.of(info)
+    $()
+    c.scale(pr, pr)
+    c.textBaseline = 'top'
+    c.textRendering = 'optimizeSpeed'
+    c.miterLimit = 1.5
+    c.font = '32px "Fustat"'
+  })
+
+  $.fx(() => {
+    const { c, width, height } = $.of(info)
     $()
-    if (c instanceof Error) return
-    c.translate(info.width / 2, info.height / 2)
+    c.translate(width / 2, height / 2)
     tick()
     return () => cancelAnimationFrame(animFrame)
   })
 
-  return canvas
+  return <div>
+    <H2>Canvas demo</H2>
+    {canvas}
+  </div>
 }
diff --git a/src/pages/EditorDemo.tsx b/src/pages/EditorDemo.tsx
new file mode 100644
index 0000000..a91f18c
--- /dev/null
+++ b/src/pages/EditorDemo.tsx
@@ -0,0 +1,35 @@
+import { Sigui, type Signal } from 'sigui'
+import { screen } from '~/src/screen.ts'
+import { Editor } from '~/src/ui/editor/Editor'
+import { H2 } from '~/src/ui/Heading.tsx'
+
+export function EditorDemo({ width, height }: {
+  width: Signal<number>
+  height: Signal<number>
+}) {
+  using $ = Sigui()
+
+  const info = $({
+    c: null as null | CanvasRenderingContext2D,
+    pr: screen.$.pr,
+    width,
+    height,
+    code: `[sin 300] [tri 444] [sqr 555]
+[lp 300 .8]
+`,
+  })
+
+  const editor = <Editor
+    width={info.$.width}
+    height={info.$.height}
+    code={info.$.code}
+  /> as Element & { focus(): void }
+
+  const el = <div>
+    <H2>Editor demo</H2>
+
+    {editor}
+  </div>
+
+  return { el, focus: editor.focus }
+}
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index d1571fb..55da2d6 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -26,6 +26,7 @@ export function Home() {
           <Link href="/chat">Chat</Link>
           <Link href="/ws">WebSockets</Link>
           <Link href="/canvas">Canvas</Link>
+          <Link href="/editor">Editor</Link>
           <Link href="/asc">AssemblyScript</Link>
           <Link href="/qrcode">QrCode</Link>
           <Link href="/about">About</Link>
diff --git a/src/ui/Canvas.tsx b/src/ui/Canvas.tsx
new file mode 100644
index 0000000..6206300
--- /dev/null
+++ b/src/ui/Canvas.tsx
@@ -0,0 +1,28 @@
+import { Sigui, type Signal } from 'sigui'
+import { screen } from '~/src/screen.ts'
+
+export function Canvas({ width, height }: {
+  width: Signal<number>
+  height: Signal<number>
+}) {
+  using $ = Sigui()
+
+  const canvas = <canvas width="1" height="1" /> as HTMLCanvasElement
+
+  const info = $({
+    pr: screen.$.pr,
+    width,
+    height,
+  })
+
+  $.fx(() => {
+    const { width, height, pr } = $.of(info)
+    $()
+    canvas.width = width * pr
+    canvas.height = height * pr
+    canvas.style.width = `${width}px`
+    canvas.style.height = `${height}px`
+  })
+
+  return canvas
+}
diff --git a/src/ui/editor/Editor.tsx b/src/ui/editor/Editor.tsx
new file mode 100644
index 0000000..8b3d5e0
--- /dev/null
+++ b/src/ui/editor/Editor.tsx
@@ -0,0 +1,348 @@
+import { Sigui, type Signal } from 'sigui'
+import { dom, drawText } from 'utils'
+import { screen } from '~/src/screen.ts'
+import { Canvas } from '~/src/ui/Canvas.tsx'
+import { TextBuffer } from '~/src/ui/editor/text-buffer'
+import {
+  beginOfLine,
+  parseWords,
+  Point,
+  WORD
+} from '~/src/ui/editor/util/index.ts'
+
+export function Editor({ code, width, height }: {
+  code: Signal<string>
+  width: Signal<number>
+  height: Signal<number>
+}) {
+  using $ = Sigui()
+
+  const canvas = <Canvas width={width} height={height} /> as HTMLCanvasElement
+  const textarea = <textarea
+    spellcheck="false"
+    autocorrect="off"
+    autocapitalize="off"
+    autocomplete="off"
+    virtualkeyboardpolicy="manual"
+    class="
+      fixed opacity-50 w-[50px] h-[50px]
+      pointer-events-none caret-transparent
+      border-none outline-none
+      resize-none p-0 whitespace-pre
+      overflow-hidden z-50
+    "
+  /> as HTMLTextAreaElement
+
+  const buffer = TextBuffer({ code })
+
+  const info = $({
+    c: null as null | CanvasRenderingContext2D,
+    pr: screen.$.pr,
+    width,
+    height,
+
+    code,
+    get buffer() {
+      const { code } = info
+      $()
+      buffer.info.code = code
+      return buffer
+    },
+
+    /** Caret logical position. */
+    caret: $(Point()),
+    /** Caret index position. */
+    caretIndex: 0,
+    /** Caret visual position after word wrapping. */
+    caretVisual: $(Point()),
+    /** Caret x position intent. */
+    caretVisualXIntent: 0,
+    caretWidth: 2,
+    caretBlink: false,
+    caretVisible: true,
+
+    charWidth: 1,
+    charHeight: 1,
+
+    lineHeight: 19,
+  })
+
+  info.caret.x = info.caretVisualXIntent = 1
+  info.caret.y = 1
+
+  const c = canvas.getContext('2d')!
+
+  // wait for fonts to load
+  document.fonts.ready.then(() => {
+    info.c = c
+
+    // measure char width and height
+    const metrics = c.measureText('M')
+    info.charWidth = metrics.width
+    info.charHeight = Math.floor(metrics.fontBoundingBoxDescent - metrics.fontBoundingBoxAscent)
+  })
+
+  // initialize canvas context settings
+  $.fx(() => {
+    const { pr, c } = $.of(info)
+    $()
+    c.scale(pr, pr)
+    c.textBaseline = 'top'
+    c.textRendering = 'optimizeSpeed'
+    c.miterLimit = 1.5
+    c.font = '16px "Ubuntu Mono"'
+  })
+
+  // split code to lines
+  // $.fx(() => {
+  //   const { code } = info
+  //   $()
+  //   info.lines = code.split('\n')
+  //   info.linesVisual = wordWrapText(info.lines, maxCharsPerLine)
+  // })
+
+  $.fx(() => {
+    const { buffer, code, caret } = info
+    const { x, y } = caret
+    $()
+    info.caretIndex = buffer.pointToIndex(caret)
+  })
+
+  // calculate caret visual point from logical.
+  $.fx(() => {
+    const { buffer, caretIndex } = info
+    $()
+    const { x, y } = buffer.indexToVisualPoint(caretIndex)
+    info.caretVisual.x = x
+    info.caretVisual.y = y
+  })
+
+  // draw everything
+  $.fx(() => {
+    const {
+      c, width, height,
+      buffer,
+      code,
+      caretVisual, caretWidth, caretVisible,
+      charWidth, charHeight,
+      lineHeight,
+    } = $.of(info)
+
+    const { x: cx, y: cy } = caretVisual
+
+    $()
+
+    // clear editor
+    c.clearRect(0, 0, width, height)
+
+    // draw text
+    buffer.info.linesVisual.forEach((line, y) => {
+      drawText(c, { x: 1, y: y * lineHeight }, line.text, '#888', 4, '#000')
+    })
+
+    // draw caret
+    if (caretVisible) {
+      c.fillStyle = '#fff'
+      c.fillRect(
+        cx * charWidth,
+        cy * lineHeight + 1,
+        caretWidth,
+        charHeight
+      )
+    }
+  })
+
+  // blink caret
+  $.fx(() => {
+    const { caretBlink } = info
+    $()
+    if (!caretBlink) return
+    const caretIv = setInterval(() => {
+      info.caretVisible = !info.caretVisible
+    }, 500)
+    return () => {
+      info.caretVisible = true
+      clearInterval(caretIv)
+    }
+  })
+
+  // focus textarea initially and on window focus or canvas pointerdown
+  function focus() {
+    textarea.focus()
+  }
+  requestAnimationFrame(focus)
+  window.onfocus = canvas.onpointerup = () => {
+    textarea.focus()
+  }
+
+  // read keyboard input
+  $.fx(() => {
+    textarea.focus()
+    return [
+      dom.on(textarea, 'keydown', $.fn((ev: KeyboardEvent) => {
+        ev.preventDefault()
+
+        const {
+          buffer,
+          caret, caretIndex, caretVisual, caretVisualXIntent,
+        } = info
+
+        const {
+          code,
+          lines, linesVisual
+        } = buffer.info
+
+        const { key } = ev
+        const ctrl = ev.ctrlKey || ev.metaKey
+        const alt = ev.altKey
+        const shift = ev.shiftKey
+
+        function moveCaretUpDown(newY: number) {
+          if (newY >= 0 && newY <= linesVisual.length) {
+            const { x, y } = buffer.visualPointToLogicalPoint({
+              x: caretVisualXIntent,
+              y: newY
+            })
+            caret.x = x
+            caret.y = y
+          }
+        }
+
+        function moveCaretLeft() {
+          if (caret.x > 0) caret.x--
+          else if (caret.y > 0) {
+            caret.y--
+            caret.x = lines[caret.y].length
+          }
+          $.flush()
+          info.caretVisualXIntent = caretVisual.x
+        }
+
+        function moveCaretRight() {
+          const line = lines[caret.y]
+          if (caret.x < line.length) {
+            caret.x++
+          }
+          else if (caret.y < lines.length - 1) {
+            caret.y++
+            caret.x = 0
+          }
+          $.flush()
+          info.caretVisualXIntent = caretVisual.x
+        }
+
+        function moveCaretWord(dir: number) {
+          const words = parseWords(WORD, code)
+          let index = dir > 0 ? code.length : 0
+          for (let i = dir > 0 ? 0 : words.length - 1; dir > 0 ? i < words.length : i >= 0; dir > 0 ? i++ : i--) {
+            const word = words[i]
+            if ((dir > 0 && word.index > caretIndex) || (dir < 0 && word.index < caretIndex)) {
+              index = word.index
+              break
+            }
+          }
+          const p = buffer.indexToPoint(index)
+          caret.x = p.x
+          caret.y = p.y
+          $.flush()
+          info.caretVisualXIntent = caretVisual.x
+        }
+
+        // insert character
+        if (key.length === 1) {
+          const line = lines[caret.y]
+          lines[caret.y] = line.slice(0, caret.x) + key + line.slice(caret.x)
+          buffer.updateFromLines()
+          caret.x++
+          $.flush()
+          info.caretVisualXIntent = caretVisual.x
+        }
+        else {
+          // handle backspace
+          if (key === 'Backspace') {
+            // at greater than line length, remove char
+            if (caret.x > 0) {
+              const line = lines[caret.y]
+              lines[caret.y] = line.slice(0, caret.x - 1) + line.slice(caret.x)
+              buffer.updateFromLines()
+              caret.x--
+              $.flush()
+              info.caretVisualXIntent = caretVisual.x
+            }
+            // at start of line, merge with previous line
+            else if (caret.y > 0) {
+              const line = lines[caret.y]
+              caret.x = lines[caret.y - 1].length
+              lines[caret.y - 1] += line
+              lines.splice(caret.y, 1)
+              buffer.updateFromLines()
+              caret.y--
+              $.flush()
+              info.caretVisualXIntent = caretVisual.x
+            }
+          }
+          // handle delete
+          else if (key === 'Delete') {
+            const line = lines[caret.y]
+            if (caret.x < line.length) {
+              lines[caret.y] = line.slice(0, caret.x) + line.slice(caret.x + 1)
+              buffer.updateFromLines()
+            }
+          }
+          // handle home
+          else if (key === 'Home') {
+            const bx = beginOfLine(linesVisual[caretVisual.y].text)
+            const vx = bx === caretVisual.x ? 0 : bx
+            const { x, y } = buffer.visualPointToLogicalPoint({ x: vx, y: caretVisual.y })
+            caret.x = x
+            caret.y = y
+            $.flush()
+            info.caretVisualXIntent = caretVisual.x
+          }
+          // handle end
+          else if (key === 'End') {
+            const { x, y } = buffer.visualPointToLogicalPoint({ x: linesVisual[caretVisual.y].text.length, y: caretVisual.y })
+            caret.x = x
+            caret.y = y
+            $.flush()
+            info.caretVisualXIntent = caretVisual.x
+          }
+          // handle enter
+          else if (key === 'Enter') {
+            const line = lines[caret.y]
+            lines[caret.y] = line.slice(0, caret.x)
+            lines.splice(caret.y + 1, 0, line.slice(caret.x))
+            buffer.updateFromLines()
+            caret.y++
+            caret.x = 0
+            $.flush()
+            info.caretVisualXIntent = caretVisual.x
+          }
+          // handle arrow keys
+          else if (key === 'ArrowUp' || key === 'ArrowDown') {
+            const newY = key === 'ArrowUp'
+              ? caretVisual.y - 1
+              : caretVisual.y + 1
+            moveCaretUpDown(newY)
+          }
+          else if (key === 'ArrowLeft') {
+            if (ctrl) moveCaretWord(-1)
+            else moveCaretLeft()
+          }
+          else if (key === 'ArrowRight') {
+            if (ctrl) moveCaretWord(+1)
+            else moveCaretRight()
+          }
+        }
+
+      }))
+    ]
+  })
+
+  const el = <div>
+    {canvas}
+    {textarea}
+  </div>
+
+  return { el, focus }
+}
diff --git a/src/ui/editor/text-buffer.test.ts b/src/ui/editor/text-buffer.test.ts
new file mode 100644
index 0000000..68b57a9
--- /dev/null
+++ b/src/ui/editor/text-buffer.test.ts
@@ -0,0 +1,227 @@
+import { $ } from 'sigui'
+import { TextBuffer } from '~/src/ui/editor/text-buffer'
+
+function B(code: string, maxWidth: number) {
+  const info = $({ code })
+  const b = TextBuffer({ code: info.$.code })
+  b.info.maxWidth = maxWidth
+  return b
+}
+
+describe('TextBuffer', () => {
+  describe('linesVisual', () => {
+    it('word wrap is applied', () => {
+      const b = B('', 10)
+      expect(b.info.linesVisual).toEqual([
+        { text: '' }
+      ])
+    })
+
+    it('one line if text below maxLineLength', () => {
+      const b = B('hello', 10)
+      expect(b.info.linesVisual).toEqual([
+        { text: 'hello' }
+      ])
+    })
+
+    it('handle newlines', () => {
+      const b = B('hello\nworld', 10)
+      expect(b.info.linesVisual).toEqual([
+        { text: 'hello', br: true },
+        { text: 'world' },
+      ])
+    })
+
+    it('splits to 2 lines if text exceeds maxLineLength', () => {
+      const b = B('hello world', 10)
+      expect(b.info.linesVisual).toEqual([
+        { text: 'hello ' },
+        { text: 'world' },
+      ])
+    })
+
+    it('splits to multiple lines if text exceeds maxLineLength twice', () => {
+      const b = B('hello world lorem ipsum', 10)
+      expect(b.info.linesVisual).toEqual([
+        { text: 'hello ' },
+        { text: 'world ' },
+        { text: 'lorem ' },
+        { text: 'ipsum' }
+      ])
+    })
+
+    it('splits words', () => {
+      const b = B('helloworld loremipsum', 8)
+      expect(b.info.linesVisual).toEqual([
+        { text: 'hellowor' },
+        { text: 'ld ' },
+        { text: 'loremips' },
+        { text: 'um' },
+      ])
+    })
+
+    // it('splits words and lines', () => {
+    //   const lines = wordWrapText(l('helloworld loremipsum'), 5)
+    //   expect(lines).toEqual(['hello', 'world', 'lorem', 'ipsum'])
+    // })
+
+    // it('splits words and lines with multiple spaces', () => {
+    //   const lines = wordWrapText(l('hello  world lorem    ipsum'), 5)
+    //   expect(lines).toEqual(['hello', 'world', 'lorem', 'ipsum'])
+    // })
+
+    // it('splits words and lines with multiple spaces 2', () => {
+    //   const lines = wordWrapText(l('hello    world lorem    ipsum'), 5)
+    //   expect(lines).toEqual(['hello', 'world', 'lorem', 'ipsum'])
+    // })
+
+    // it('handle multiple spaces and words exceeding line length', () => {
+    //   const lines = wordWrapText(l('hello    world loremipsum'), 5)
+    //   expect(lines).toEqual(['hello', 'world', 'lorem', 'ipsum'])
+    // })
+
+    it('handle spaces at beginning of lines', () => {
+      const b = B('  hello    world loremipsum', 7)
+      expect(b.info.linesVisual).toEqual([
+        { text: '  ' },
+        { text: 'hello    ' },
+        { text: 'world ' },
+        { text: 'loremip' },
+        { text: 'sum' },
+      ])
+    })
+
+    it('handle spaces at beginning of lines 2', () => {
+      const b = B('  hello    world loremipsum', 5)
+      expect(b.info.linesVisual).toEqual([
+        { text: '  ' },
+        { text: 'hello  ' },
+        { text: '  ' },
+        { text: 'world ' },
+        { text: 'lorem' },
+        { text: 'ipsum' },
+      ])
+    })
+  })
+
+  describe('visualPointToIndex / indexToVisualPoint / indexToPoint', () => {
+    it('splits to multiple lines if text exceeds maxLineLength twice', () => {
+      const b = B(`\
+hello world
+lorem ipsum
+`, 10)
+      {
+        const i = b.visualPointToIndex({ x: 0, y: 4 })
+        expect(i).toEqual(24)
+        {
+          const p = b.indexToVisualPoint(24)
+          expect(p).toEqual({ x: 0, y: 4 })
+        }
+        {
+          const p = b.indexToPoint(24)
+          expect(p).toEqual({ x: 0, y: 2 })
+        }
+      }
+      {
+        const i = b.visualPointToIndex({ x: 0, y: 1 })
+        expect(i).toEqual(6)
+        {
+          const p = b.indexToVisualPoint(6)
+          expect(p).toEqual({ x: 0, y: 1 })
+        }
+        {
+          const p = b.indexToPoint(6)
+          expect(p).toEqual({ x: 6, y: 0 })
+        }
+      }
+      {
+        const i = b.visualPointToIndex({ x: 3, y: 3 })
+        expect(i).toEqual(21)
+        {
+          const p = b.indexToVisualPoint(21)
+          expect(p).toEqual({ x: 3, y: 3 })
+        }
+        {
+          const p = b.indexToPoint(21)
+          expect(p).toEqual({ x: 9, y: 1 })
+        }
+      }
+      {
+        const i = b.visualPointToIndex({ x: 3, y: 2 })
+        expect(i).toEqual(15)
+        {
+          const p = b.indexToVisualPoint(15)
+          expect(p).toEqual({ x: 3, y: 2 })
+        }
+        {
+          const p = b.indexToPoint(15)
+          expect(p).toEqual({ x: 3, y: 1 })
+        }
+      }
+      {
+        const i = b.visualPointToIndex({ x: 3, y: 1 })
+        expect(i).toEqual(9)
+        {
+          const p = b.indexToVisualPoint(9)
+          expect(p).toEqual({ x: 3, y: 1 })
+        }
+        {
+          const p = b.indexToPoint(9)
+          expect(p).toEqual({ x: 9, y: 0 })
+        }
+      }
+      {
+        const i = b.visualPointToIndex({ x: 3, y: 0 })
+        expect(i).toEqual(3)
+        {
+          const p = b.indexToVisualPoint(3)
+          expect(p).toEqual({ x: 3, y: 0 })
+        }
+        {
+          const p = b.indexToPoint(3)
+          expect(p).toEqual({ x: 3, y: 0 })
+        }
+      }
+    })
+  })
+
+  describe('indexToVisualPoint', () => {
+    it('splits to multiple lines if text exceeds maxLineLength twice', () => {
+      const b = B(`\
+hello world
+lorem ipsum`, 10)
+      {
+        const p = b.indexToVisualPoint(21)
+        expect(p).toEqual({ x: 3, y: 3 })
+      }
+      // {
+      //   const i = b.visualPointToIndex({ x: 3, y: 2 })
+      //   expect(i).toEqual(15)
+      // }
+      // {
+      //   const i = b.visualPointToIndex({ x: 3, y: 1 })
+      //   expect(i).toEqual(9)
+      // }
+      // {
+      //   const i = b.visualPointToIndex({ x: 3, y: 0 })
+      //   expect(i).toEqual(3)
+      // }
+    })
+  })
+
+  // describe('visualPointToIndex', () => {
+  //   it('splits to multiple lines if text exceeds maxLineLength twice', () => {
+  //     const b = B('hello world lorem ipsum', 10)
+  //     {
+  //       const i = b.visualPointToIndex({ x: 3, y: 3 })
+  //       console.log(b.info.linesVisual.map(l => l.text))
+  //       expect(i).toEqual(21)
+  //     }
+  //     {
+  //       const i = b.visualPointToIndex({ x: 3, y: 2 })
+  //       console.log(b.info.linesVisual.map(l => l.text))
+  //       expect(i).toEqual(15)
+  //     }
+  //   })
+  // })
+})
diff --git a/src/ui/editor/text-buffer.ts b/src/ui/editor/text-buffer.ts
new file mode 100644
index 0000000..c510bf4
--- /dev/null
+++ b/src/ui/editor/text-buffer.ts
@@ -0,0 +1,198 @@
+import { Sigui, type Signal } from 'sigui'
+import type { Point } from '~/src/ui/editor/util/index.ts'
+
+export interface TextLine {
+  text: string
+  br?: true
+}
+
+export function TextBuffer({ code }: { code: Signal<string> }) {
+  using $ = Sigui()
+
+  const info = $({
+    code,
+    maxWidth: 10,
+    get lines() {
+      return info.code.split('\n')
+    },
+    get linesVisual(): TextLine[] {
+      const { code, maxWidth } = info
+      $()
+
+      const wrapped: TextLine[] = []
+
+      let line = ''
+      let word = ''
+      let x = 0
+
+      function push() {
+        const joined = line + word
+        if (joined.length > maxWidth) {
+          wrapped.push({ text: line })
+          if (word.length) wrapped.push({ text: word })
+        }
+        else {
+          wrapped.push({ text: joined })
+        }
+        word = ''
+        line = ''
+        x = 0
+      }
+
+      for (let i = 0; i < code.length; i++) {
+        const c = code[i]
+        if (c === '\n') {
+          wrapped.push({ text: line + word, br: true })
+          word = ''
+          line = ''
+          x = 0
+        }
+        else if (c === ' ') {
+          if (x >= maxWidth) {
+            push()
+            word = c
+          }
+          else {
+            line += word + c
+            word = ''
+          }
+        }
+        else {
+          if (word.length === maxWidth) {
+            wrapped.push({ text: word })
+            word = ''
+            x = 0
+          }
+          word += c
+          if (line.length && (line + word).length >= maxWidth) {
+            wrapped.push({ text: line })
+            line = ''
+            x = 0
+          }
+        }
+        x++
+      }
+
+      if (line.length || word.length || word.length === code.length) {
+        push()
+      }
+
+      return wrapped
+    }
+  })
+
+  function indexToPoint(index: number): Point {
+    const { lines } = info
+
+    let currentIndex = 0
+
+    for (let y = 0; y < lines.length; y++) {
+      const lineLength = lines[y].length + 1 // +1 for the newline character
+
+      if (currentIndex + lineLength > index) {
+        // The point is on this line
+        const x = index - currentIndex
+        return { x, y }
+      }
+
+      currentIndex += lineLength
+    }
+
+    // If we've reached here, the index is at the very end of the text
+    return {
+      x: lines.at(-1).length,
+      y: lines.length - 1
+    }
+  }
+
+  function indexToVisualPoint(index: number): Point {
+    const { linesVisual } = info
+
+    let idx = 0
+
+    for (let y = 0; y < linesVisual.length; y++) {
+      const line = linesVisual[y]
+      const lineLength = line.text.length + (line.br ? 1 : 0)
+
+      if (idx + lineLength > index) {
+        // The caret is on this line
+        const x = index - idx
+        return { x, y }
+      }
+
+      idx += lineLength  // +1 for newline character
+    }
+
+    // If we've gone through all lines and haven't found the position,
+    // return the end of the last line
+    const line = linesVisual.at(-1)
+    return {
+      x: line.br ? 0 : line.text.length,
+      y: linesVisual.length - (line.br ? 0 : 1)
+    }
+  }
+
+  function pointToIndex(point: Point): number {
+    const { lines } = info
+    let { x, y } = point
+
+    if (y > lines.length - 1) {
+      y = lines.length - 1
+      x = lines[y].length
+    }
+    else {
+      x = Math.min(x, lines[y].length)
+    }
+
+    const before = lines
+      .slice(0, y)
+      .reduce((sum, line) =>
+        sum + line.length + 1,
+        0
+      )
+
+    const index = before + x
+
+    return index
+  }
+
+  function visualPointToIndex(point: Point): number {
+    const { linesVisual } = info
+    let { x, y } = point
+
+    if (y >= linesVisual.length) return info.code.length
+
+    let index = 0
+
+    // sum up the lengths of all previous lines
+    for (let i = 0; i < y; i++) {
+      const line = linesVisual[i]
+      index += line.text.length + (line.br ? 1 : 0)
+    }
+
+    // add the x position of the current line
+    const line = linesVisual[y]
+    index += Math.min(x, line.text.length)
+
+    return index
+  }
+
+  function visualPointToLogicalPoint(point: Point): Point {
+    const index = visualPointToIndex(point)
+    return indexToPoint(index)
+  }
+
+  function updateFromLines() {
+    info.code = info.lines.join('\n')
+  }
+
+  return {
+    info,
+    updateFromLines,
+    indexToPoint,
+    indexToVisualPoint,
+    pointToIndex,
+    visualPointToIndex,
+    visualPointToLogicalPoint
+  }
+}
diff --git a/src/ui/editor/util/begin-of-line.ts b/src/ui/editor/util/begin-of-line.ts
new file mode 100644
index 0000000..66c4450
--- /dev/null
+++ b/src/ui/editor/util/begin-of-line.ts
@@ -0,0 +1,3 @@
+export function beginOfLine(line: string) {
+  return line.match(/[^\s]|$/m)!.index!
+}
diff --git a/src/ui/editor/util/find-matching-brackets.ts b/src/ui/editor/util/find-matching-brackets.ts
new file mode 100644
index 0000000..c2edc0e
--- /dev/null
+++ b/src/ui/editor/util/find-matching-brackets.ts
@@ -0,0 +1,65 @@
+export const Open = {
+  '(': ')',
+  '[': ']',
+  '{': '}',
+} as any
+
+export const Close = {
+  ')': '(',
+  ']': '[',
+  '}': '{',
+} as any
+
+export const openers = new Set(Object.keys(Open))
+export const closers = new Set(Object.keys(Close))
+
+export function findMatchingBrackets(s: string, i: number): [number, number] | undefined {
+  let char: string
+  const stack: string[] = []
+  let max = 1000
+
+  --i
+
+  const L = s[i]
+  const R = s[i + 1]
+  const LO = Open[L]
+  const RO = Open[R]
+  const LC = Close[L]
+  const RC = Close[R]
+
+  if (LC && RO) i++
+  else if ((LO || RO) && (LC || RC)) { }
+  else if (RO && !LO) i++
+  else if (LC && !RC) i--
+
+  while (i >= 0) {
+    if (!--max) return
+    char = s[i--]!
+    if (closers.has(char)) {
+      stack.push(Close[char])
+    }
+    else if (stack.at(-1) === char) {
+      stack.pop()
+    }
+    else if (openers.has(char)) {
+      stack.push(char)
+      break
+    }
+  }
+  const openIndex = ++i
+  const open = stack.at(-1)
+  while (i < s.length) {
+    if (!--max) return
+    char = s[i++]!
+    if (openers.has(char)) {
+      stack.push(Open[char])
+    }
+    else if (stack.at(-1) === char) {
+      stack.pop()
+      if (stack.length === 1 && Close[char] === open) return [openIndex, i - 1]
+    }
+    else if (closers.has(char)) {
+      return
+    }
+  }
+}
diff --git a/src/ui/editor/util/index-to-point.ts b/src/ui/editor/util/index-to-point.ts
new file mode 100644
index 0000000..f5810b5
--- /dev/null
+++ b/src/ui/editor/util/index-to-point.ts
@@ -0,0 +1,23 @@
+import type { Point } from '~/src/ui/editor/util/index.ts'
+
+export function indexToPoint(index: number, lines: string[]): Point {
+  let currentIndex = 0
+
+  for (let y = 0; y < lines.length; y++) {
+    const lineLength = lines[y].length + 1 // +1 for the newline character
+
+    if (currentIndex + lineLength > index) {
+      // The point is on this line
+      const x = index - currentIndex
+      return { x, y }
+    }
+
+    currentIndex += lineLength
+  }
+
+  // If we've reached here, the index is at the very end of the text
+  return {
+    x: lines.at(-1).length,
+    y: lines.length - 1
+  }
+}
diff --git a/src/ui/editor/util/index-to-visual-point.ts b/src/ui/editor/util/index-to-visual-point.ts
new file mode 100644
index 0000000..6f6dc93
--- /dev/null
+++ b/src/ui/editor/util/index-to-visual-point.ts
@@ -0,0 +1,25 @@
+import type { Line, Point } from '~/src/ui/editor/util/index.ts'
+
+export function indexToVisualPoint(index: number, linesVisual: Line[]): Point {
+  let idx = 0
+
+  for (let y = 0; y < linesVisual.length; y++) {
+    const line = linesVisual[y]
+    const lineLength = line.text.length
+
+    if (idx + lineLength >= index) {
+      // The caret is on this line
+      const x = index - idx
+      return { x, y }
+    }
+
+    idx += lineLength + (line.hasBreak ? 1 : 0) // +1 for newline character
+  }
+
+  // If we've gone through all lines and haven't found the position,
+  // return the end of the last line
+  return {
+    x: linesVisual.at(-1).text.length,
+    y: linesVisual.length - 1
+  }
+}
diff --git a/src/ui/editor/util/index.ts b/src/ui/editor/util/index.ts
new file mode 100644
index 0000000..67d6392
--- /dev/null
+++ b/src/ui/editor/util/index.ts
@@ -0,0 +1,11 @@
+export * from './begin-of-line.ts'
+export * from './find-matching-brackets.ts'
+export * from './index-to-point.ts'
+export * from './index-to-visual-point.ts'
+export * from './parse-words.ts'
+export * from './point-to-index.ts'
+export * from './regexp.ts'
+export * from './types.ts'
+export * from './visual-point-to-index.ts'
+export * from './visual-point-to-logical-point.ts'
+export * from './word-wrap-text.ts'
diff --git a/src/ui/editor/util/parse-words.ts b/src/ui/editor/util/parse-words.ts
new file mode 100644
index 0000000..ccbab34
--- /dev/null
+++ b/src/ui/editor/util/parse-words.ts
@@ -0,0 +1,7 @@
+export function parseWords(regexp: RegExp, text: any) {
+  regexp.lastIndex = 0
+  let word
+  const words: RegExpExecArray[] = []
+  while ((word = regexp.exec(text))) words.push(word)
+  return words
+}
diff --git a/src/ui/editor/util/point-to-index.test.ts b/src/ui/editor/util/point-to-index.test.ts
new file mode 100644
index 0000000..22272cc
--- /dev/null
+++ b/src/ui/editor/util/point-to-index.test.ts
@@ -0,0 +1,57 @@
+import { pointToIndex } from '~/src/ui/editor/util/point-to-index.ts'
+
+describe('pointToIndex', () => {
+  it('return 0 for empty code', () => {
+    expect(pointToIndex({ x: 0, y: 0 }, '')).toBe(0)
+  })
+
+  it('return 0 for empty code and point that exceeds bounds', () => {
+    expect(pointToIndex({ x: 1, y: 0 }, '')).toBe(0)
+    expect(pointToIndex({ x: 0, y: 1 }, '')).toBe(0)
+    expect(pointToIndex({ x: 1, y: 1 }, '')).toBe(0)
+  })
+
+  it('correctly stays within bounds for code with one line', () => {
+    expect(pointToIndex({ x: 0, y: 0 }, 'a')).toBe(0)
+    expect(pointToIndex({ x: 1, y: 0 }, 'a')).toBe(1)
+    expect(pointToIndex({ x: 2, y: 0 }, 'a')).toBe(1)
+    expect(pointToIndex({ x: 0, y: 1 }, 'a')).toBe(1)
+    expect(pointToIndex({ x: 0, y: 2 }, 'a')).toBe(1)
+    expect(pointToIndex({ x: 1, y: 1 }, 'a')).toBe(1)
+    expect(pointToIndex({ x: 1, y: 2 }, 'a')).toBe(1)
+    expect(pointToIndex({ x: 2, y: 2 }, 'a')).toBe(1)
+  })
+
+  it('correctly stays within bounds for code with two lines', () => {
+    expect(pointToIndex({ x: 0, y: 0 }, 'a\nb')).toBe(0)
+    expect(pointToIndex({ x: 1, y: 0 }, 'a\nb')).toBe(1)
+    expect(pointToIndex({ x: 2, y: 0 }, 'a\nb')).toBe(1)
+    expect(pointToIndex({ x: 0, y: 1 }, 'a\nb')).toBe(2)
+    expect(pointToIndex({ x: 0, y: 2 }, 'a\nb')).toBe(3)
+    expect(pointToIndex({ x: 1, y: 1 }, 'a\nb')).toBe(3)
+    expect(pointToIndex({ x: 1, y: 2 }, 'a\nb')).toBe(3)
+    expect(pointToIndex({ x: 2, y: 2 }, 'a\nb')).toBe(3)
+  })
+
+  it('correctly stays within bounds for code with multiple lines', () => {
+    expect(pointToIndex({ x: 0, y: 0 }, 'aa\nbb\ncc')).toBe(0)
+    expect(pointToIndex({ x: 1, y: 0 }, 'aa\nbb\ncc')).toBe(1)
+    expect(pointToIndex({ x: 2, y: 0 }, 'aa\nbb\ncc')).toBe(2)
+    expect(pointToIndex({ x: 3, y: 0 }, 'aa\nbb\ncc')).toBe(2)
+
+    expect(pointToIndex({ x: 0, y: 1 }, 'aa\nbb\ncc')).toBe(3)
+    expect(pointToIndex({ x: 1, y: 1 }, 'aa\nbb\ncc')).toBe(4)
+    expect(pointToIndex({ x: 2, y: 1 }, 'aa\nbb\ncc')).toBe(5)
+    expect(pointToIndex({ x: 3, y: 1 }, 'aa\nbb\ncc')).toBe(5)
+
+    expect(pointToIndex({ x: 0, y: 2 }, 'aa\nbb\ncc')).toBe(6)
+    expect(pointToIndex({ x: 1, y: 2 }, 'aa\nbb\ncc')).toBe(7)
+    expect(pointToIndex({ x: 2, y: 2 }, 'aa\nbb\ncc')).toBe(8)
+    expect(pointToIndex({ x: 3, y: 2 }, 'aa\nbb\ncc')).toBe(8)
+
+    expect(pointToIndex({ x: 0, y: 3 }, 'aa\nbb\ncc')).toBe(8)
+    expect(pointToIndex({ x: 1, y: 3 }, 'aa\nbb\ncc')).toBe(8)
+    expect(pointToIndex({ x: 2, y: 3 }, 'aa\nbb\ncc')).toBe(8)
+    expect(pointToIndex({ x: 3, y: 3 }, 'aa\nbb\ncc')).toBe(8)
+  })
+})
diff --git a/src/ui/editor/util/point-to-index.ts b/src/ui/editor/util/point-to-index.ts
new file mode 100644
index 0000000..325eaf4
--- /dev/null
+++ b/src/ui/editor/util/point-to-index.ts
@@ -0,0 +1,26 @@
+import type { Point } from '~/src/ui/editor/util/index.ts'
+
+export function pointToIndex(point: Point, code: string): number {
+  let { x, y } = point
+
+  const lines = code.split('\n')
+
+  if (y > lines.length - 1) {
+    y = lines.length - 1
+    x = lines[y].length
+  }
+  else {
+    x = Math.min(x, lines[y].length)
+  }
+
+  const before = lines
+    .slice(0, y)
+    .reduce((sum, line) =>
+      sum + line.length + 1,
+      0
+    )
+
+  const index = before + x
+
+  return index
+}
diff --git a/src/ui/editor/util/regexp.ts b/src/ui/editor/util/regexp.ts
new file mode 100644
index 0000000..d0e76bb
--- /dev/null
+++ b/src/ui/editor/util/regexp.ts
@@ -0,0 +1,5 @@
+export const NONSPACE = /[^\s]/g
+export const SPACE = /\s/g
+export const WORD = /[\s]{2,}|[./\\()"'\-:,.;<>~!@#$%^&*|+=[\]{}`~?\b ]{1}|\w+/g
+export const TOKEN = /\s+|[\w\.]+|[\W]/g
+export const BRACKET = /[\[\]\(\)\{\}]/ // used with .test so not a /g
diff --git a/src/ui/editor/util/types.ts b/src/ui/editor/util/types.ts
new file mode 100644
index 0000000..b0505e4
--- /dev/null
+++ b/src/ui/editor/util/types.ts
@@ -0,0 +1,8 @@
+export interface Point {
+  x: number
+  y: number
+}
+
+export function Point() {
+  return { x: 0, y: 0 }
+}
diff --git a/src/ui/editor/util/visual-point-to-index.ts b/src/ui/editor/util/visual-point-to-index.ts
new file mode 100644
index 0000000..bb566a5
--- /dev/null
+++ b/src/ui/editor/util/visual-point-to-index.ts
@@ -0,0 +1,22 @@
+import type { Line, Point } from '~/src/ui/editor/util/index.ts'
+
+export function visualPointToIndex(
+  point: Point,
+  linesVisual: Line[]
+): number {
+  const { x, y } = point
+
+  let index = 0
+
+  // Sum up the lengths of all previous lines
+  for (let i = 0; i < y; i++) {
+    const line = linesVisual[i]
+    index += line.text.length + (line.hasBreak ? 1 : 0) // +1 for newline character
+  }
+
+  // Add the x position on the current line
+  const line = linesVisual[y]
+  index += Math.min(x, line.text.length + (line.hasBreak ? 1 : 0))
+
+  return index
+}
diff --git a/src/ui/editor/util/visual-point-to-logical-point.ts b/src/ui/editor/util/visual-point-to-logical-point.ts
new file mode 100644
index 0000000..fe7769d
--- /dev/null
+++ b/src/ui/editor/util/visual-point-to-logical-point.ts
@@ -0,0 +1,11 @@
+import type { Point } from 'utils'
+import { indexToPoint, visualPointToIndex, type Line } from '~/src/ui/editor/util/index.ts'
+
+export function visualPointToLogicalPoint(
+  point: Point,
+  lines: string[],
+  linesVisual: Line[]
+): Point {
+  const index = visualPointToIndex(point, linesVisual)
+  return indexToPoint(index, lines)
+}
diff --git a/src/ui/editor/util/word-wrap-text.test.ts b/src/ui/editor/util/word-wrap-text.test.ts
new file mode 100644
index 0000000..28321a6
--- /dev/null
+++ b/src/ui/editor/util/word-wrap-text.test.ts
@@ -0,0 +1,67 @@
+import { wordWrapText } from '~/src/ui/editor/util/word-wrap-text.ts'
+
+function l(text: string): string[] {
+  return text.split('\n')
+}
+
+describe('wordWrapText', () => {
+  it('[""] on empty string', () => {
+    const lines = wordWrapText(l(''), 10)
+    expect(lines).toEqual([''])
+  })
+
+  it('one line if text below maxLineLength', () => {
+    const lines = wordWrapText(l('hello'), 10)
+    expect(lines).toEqual(['hello'])
+  })
+
+  it('handle newlines', () => {
+    const lines = wordWrapText(l('hello\nthere'), 10)
+    expect(lines).toEqual(['hello', 'there'])
+  })
+
+  it('splits to 2 lines if text exceeds maxLineLength', () => {
+    const lines = wordWrapText(l('hello world'), 10)
+    expect(lines).toEqual(['hello', 'world'])
+  })
+
+  it('splits to multiple lines if text exceeds maxLineLength twice', () => {
+    const lines = wordWrapText(l('hello world lorem ipsum'), 10)
+    expect(lines).toEqual(['hello', 'world', 'lorem', 'ipsum'])
+  })
+
+  it('splits words', () => {
+    const lines = wordWrapText(l('helloworld loremipsum'), 8)
+    expect(lines).toEqual(['hellowor', 'ld', 'loremips', 'um'])
+  })
+
+  it('splits words and lines', () => {
+    const lines = wordWrapText(l('helloworld loremipsum'), 5)
+    expect(lines).toEqual(['hello', 'world', 'lorem', 'ipsum'])
+  })
+
+  it('splits words and lines with multiple spaces', () => {
+    const lines = wordWrapText(l('hello  world lorem    ipsum'), 5)
+    expect(lines).toEqual(['hello', 'world', 'lorem', 'ipsum'])
+  })
+
+  it('splits words and lines with multiple spaces 2', () => {
+    const lines = wordWrapText(l('hello    world lorem    ipsum'), 5)
+    expect(lines).toEqual(['hello', 'world', 'lorem', 'ipsum'])
+  })
+
+  it('handle multiple spaces and words exceeding line length', () => {
+    const lines = wordWrapText(l('hello    world loremipsum'), 5)
+    expect(lines).toEqual(['hello', 'world', 'lorem', 'ipsum'])
+  })
+
+  it('handle spaces at beginning of lines', () => {
+    const lines = wordWrapText(l('  hello    world loremipsum'), 7)
+    expect(lines).toEqual(['  hello', 'world', 'loremip', 'sum'])
+  })
+
+  it('handle spaces at beginning of lines 2', () => {
+    const lines = wordWrapText(l('  hello    world loremipsum'), 5)
+    expect(lines).toEqual(['  ', 'hello', 'world', 'lorem', 'ipsum'])
+  })
+})
diff --git a/src/ui/editor/util/word-wrap-text.ts b/src/ui/editor/util/word-wrap-text.ts
new file mode 100644
index 0000000..4cb706c
--- /dev/null
+++ b/src/ui/editor/util/word-wrap-text.ts
@@ -0,0 +1,60 @@
+export interface Line {
+  text: string
+  hasBreak: boolean
+}
+
+export function wordWrapText(lines: string[], width: number): Line[] {
+  const text = lines.join('\n')
+  const cut = true
+  const br = '\n'
+
+  if (0 === width || text.length <= width) {
+    return [{ text, hasBreak: false }]
+  }
+
+  return text.split('\n').flatMap((line, index, array) => {
+    const hasBreak = index < array.length - 1
+
+    if (line.length <= width) {
+      return [{ text: line, hasBreak }]
+    }
+
+    let words = line.split(' ')
+
+    if (cut) {
+      let temp = []
+      for (const word of words) {
+        if (word.length > width) {
+          let i = 0
+          const length = word.length
+          while (i < length) {
+            temp.push(word.slice(i, Math.min(i + width, length)))
+            i += width
+          }
+        } else {
+          temp.push(word)
+        }
+      }
+      words = temp
+    }
+
+    let wrapped = words.shift()!
+    let spaceLeft = width - wrapped.length
+    let result: Line[] = []
+    let currentLine = wrapped
+
+    for (const word of words) {
+      if (word.length + 1 > spaceLeft) {
+        result.push({ text: currentLine, hasBreak: false })
+        currentLine = word
+        spaceLeft = width - word.length
+      } else {
+        currentLine += ' ' + word
+        spaceLeft -= 1 + word.length
+      }
+    }
+
+    result.push({ text: currentLine, hasBreak })
+    return result
+  })
+}
diff --git a/src/ui/index.ts b/src/ui/index.ts
index e0c92c8..9d294b7 100644
--- a/src/ui/index.ts
+++ b/src/ui/index.ts
@@ -1,4 +1,5 @@
 export * from './Button.tsx'
+export * from './Canvas.tsx'
 export * from './Fieldset.tsx'
 export * from './Heading.tsx'
 export * from './Input.tsx'

From 83542195eea3d997b03b0c58c44584e5ca353423 Mon Sep 17 00:00:00 2001
From: stagas <gstagas@gmail.com>
Date: Wed, 9 Oct 2024 21:44:05 +0300
Subject: [PATCH 03/25] fix: various

---
 api/core/middleware.ts                        |   6 +
 index.html                                    |   2 +-
 lib/watcher.ts                                |   5 +-
 package.json                                  |   1 +
 src/client.tsx                                |   3 +-
 src/comp/Header.tsx                           |   2 +-
 src/comp/Toast.tsx                            |   2 +-
 src/env.ts                                    |   6 +
 src/pages/App.tsx                             |   2 +-
 src/pages/Chat/Channels.tsx                   |  11 +-
 src/pages/Chat/Chat.tsx                       |   2 +-
 src/pages/Chat/Messages.tsx                   |  64 ++--
 src/pages/Chat/Users.tsx                      |   4 +-
 src/pages/Chat/VideoCall.tsx                  |   6 +-
 src/pages/UiShowcase.tsx                      |   2 +-
 src/pages/WebSockets.tsx                      |  22 +-
 src/screen.ts                                 |  21 +-
 src/state.ts                                  |  16 +-
 src/ui/Canvas.tsx                             |   6 +-
 src/ui/editor/Editor.tsx                      | 310 +++++++++---------
 src/ui/editor/util/index-to-point.ts          |  23 --
 src/ui/editor/util/index-to-visual-point.ts   |  25 --
 src/ui/editor/util/index.ts                   |   6 -
 src/ui/editor/util/point-to-index.test.ts     |  57 ----
 src/ui/editor/util/point-to-index.ts          |  26 --
 src/ui/editor/util/visual-point-to-index.ts   |  22 --
 .../util/visual-point-to-logical-point.ts     |  11 -
 src/ui/editor/util/word-wrap-text.test.ts     |  67 ----
 src/ui/editor/util/word-wrap-text.ts          |  60 ----
 style.css                                     |   5 +
 vendor/vite-plugin-bundle-url.ts              |   2 +-
 ...-coep.ts => vite-plugin-cors-coop-coep.ts} |   7 +-
 vendor/vite-plugin-hex-loader.ts              |   2 +-
 vendor/vite-plugin-open-in-editor.ts          |   2 +-
 vendor/vite-plugin-print-address.ts           |  38 +++
 vite.config.ts                                |  18 +-
 36 files changed, 343 insertions(+), 521 deletions(-)
 delete mode 100644 src/ui/editor/util/index-to-point.ts
 delete mode 100644 src/ui/editor/util/index-to-visual-point.ts
 delete mode 100644 src/ui/editor/util/point-to-index.test.ts
 delete mode 100644 src/ui/editor/util/point-to-index.ts
 delete mode 100644 src/ui/editor/util/visual-point-to-index.ts
 delete mode 100644 src/ui/editor/util/visual-point-to-logical-point.ts
 delete mode 100644 src/ui/editor/util/word-wrap-text.test.ts
 delete mode 100644 src/ui/editor/util/word-wrap-text.ts
 rename vendor/{vite-plugin-coop-coep.ts => vite-plugin-cors-coop-coep.ts} (55%)
 create mode 100644 vendor/vite-plugin-print-address.ts

diff --git a/api/core/middleware.ts b/api/core/middleware.ts
index 02c2c29..0be0752 100644
--- a/api/core/middleware.ts
+++ b/api/core/middleware.ts
@@ -6,6 +6,7 @@ import { kv } from "~/api/core/app.ts"
 import type { Handler } from '~/api/core/router.ts'
 import { sessions } from "~/api/core/sessions.ts"
 import { env } from '~/api/env.ts'
+import { IS_DEV } from '~/api/core/constants.ts'
 
 const DEBUG = false
 const ORIGIN_REGEX = /(https:\/\/[^\/\n]+\.deno\.dev)/g
@@ -17,6 +18,11 @@ export const cors: Handler = ctx => {
       ctx.request.headers.get('referer')
 
     if (!ctx.request.headers.get('upgrade') && origin) {
+      if (IS_DEV) {
+        res.headers.set('access-control-allow-origin', origin)
+        return
+      }
+
       const [match] = origin.match(ORIGIN_REGEX) ?? []
       if (match) {
         res.headers.set('access-control-allow-origin', match)
diff --git a/index.html b/index.html
index 410565a..c50b743 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html>
   <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0, interactive-widget=resizes-content">
 
     <link rel="icon" href="/favicon.ico" sizes="48x48">
     <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">
diff --git a/lib/watcher.ts b/lib/watcher.ts
index be40fcd..9ada7c3 100644
--- a/lib/watcher.ts
+++ b/lib/watcher.ts
@@ -1,4 +1,7 @@
 if (import.meta.env.DEV) {
-  const es = new EventSource(import.meta.env.VITE_API_URL + '/watcher')
+  const url = location.origin.includes('devito')
+    ? import.meta.env.VITE_API_URL + '/watcher'
+    : Object.assign(new URL(location.origin), { port: 8000 }).href + 'watcher'
+  const es = new EventSource(url)
   es.onopen = () => es.onopen = () => (location.href = location.href)
 }
diff --git a/package.json b/package.json
index 49bffa1..2075f01 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "kysely-ctl": "^0.9.0",
     "open-in-editor": "^2.2.0",
     "postcss": "^8.4.47",
+    "qrcode-terminal": "^0.12.0",
     "tailwindcss": "^3.4.13",
     "utils": "github:stagas/utils",
     "visitor-as": "^0.11.4",
diff --git a/src/client.tsx b/src/client.tsx
index 617cf66..5c70bd9 100644
--- a/src/client.tsx
+++ b/src/client.tsx
@@ -3,7 +3,8 @@ import { App } from '~/src/pages/App.tsx'
 import { setState, state } from '~/src/state.ts'
 
 export const start = mount('#container', target => {
-  target.replaceChildren(<App />)
+  state.container = target
+  target.replaceChildren(<App /> as HTMLElement)
   return cleanup
 })
 
diff --git a/src/comp/Header.tsx b/src/comp/Header.tsx
index 995db3b..70d12d6 100644
--- a/src/comp/Header.tsx
+++ b/src/comp/Header.tsx
@@ -1,5 +1,5 @@
 export function Header({ children }: { children?: any }) {
-  return <header class="h-11 p-3.5 bg-black flex items-center justify-between">
+  return <header class="h-11 p-3.5 bg-black flex items-center justify-between sticky top-0 left-0">
     {children}
   </header>
 }
diff --git a/src/comp/Toast.tsx b/src/comp/Toast.tsx
index ef201eb..4983ebd 100644
--- a/src/comp/Toast.tsx
+++ b/src/comp/Toast.tsx
@@ -2,7 +2,7 @@ import { state } from '~/src/state.ts'
 
 export function Toast() {
   return (
-    <div class="fixed w-[70%] p-4 bottom-0 right-0 flex flex-col gap-2">
+    <div class="absolute w-[70%] p-4 bottom-0 right-0 flex flex-col gap-2">
       {() => state.toastMessages.map(item =>
         <div class="bg-black min-w-full p-2 border border-white-500 text-sm" onmousedown={() => {
           state.toastMessages = state.toastMessages.filter(i => i !== item)
diff --git a/src/env.ts b/src/env.ts
index 2dd1b0c..862cae8 100644
--- a/src/env.ts
+++ b/src/env.ts
@@ -7,3 +7,9 @@ const Env = z.object({
 export const env = Env.parse(Object.assign({
   VITE_API_URL: location.origin
 }, import.meta.env))
+
+const url = new URL(location.origin)
+if (url.port.length) {
+  url.port = '8000'
+  env.VITE_API_URL = url.href.slice(0, -1) // trim trailing slash
+}
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
index 5832a71..f2f17d9 100644
--- a/src/pages/App.tsx
+++ b/src/pages/App.tsx
@@ -77,7 +77,7 @@ export function App() {
   ])
 
   return <main
-    class="flex flex-col h-[100vh]"
+    class="flex flex-col relative"
     onmouseenter={() => info.bg = '#433'}
     onmouseleave={() => info.bg = 'transparent'}
   >
diff --git a/src/pages/Chat/Channels.tsx b/src/pages/Chat/Channels.tsx
index 14c3c18..ae76782 100644
--- a/src/pages/Chat/Channels.tsx
+++ b/src/pages/Chat/Channels.tsx
@@ -6,14 +6,14 @@ import { cn } from '~/lib/cn.ts'
 import { icon } from '~/lib/icon.ts'
 import * as actions from '~/src/rpc/chat.ts'
 import { state } from '~/src/state.ts'
-import { byName, hasChannel } from './util.ts'
 import { H3 } from '~/src/ui/Heading.tsx'
+import { byName, hasChannel } from './util.ts'
 
 export function Channels({ overlay = true }: { overlay?: boolean }) {
   using $ = Sigui()
   return <div class={cn(
-    "w-[30%] max-w-56 flex flex-col gap-2 pt-1.5 pb-2.5 pr-4 mr-4 flex-shrink-0 border-r border-r-neutral-700",
-    { 'absolute bg-neutral-900 h-[calc(100vh-4.5rem)]': overlay },
+    "w-[40%] max-w-56 flex flex-col gap-2 pt-1.5 pb-2.5 pr-4 mr-4 flex-shrink-0 border-r border-r-neutral-700",
+    { 'absolute bg-neutral-900 h-[calc(100dvh-4.5rem)]': overlay },
   )}>
     <H3>
       <span>Channels</span>
@@ -62,15 +62,14 @@ export function Channels({ overlay = true }: { overlay?: boolean }) {
           onpointerdown={() => state.currentChannelName = channel.name}
         >
           {channel.name}
-        </button>
+        </button> as HTMLButtonElement
         if (isCurrent) {
           requestAnimationFrame(() => {
             el.scrollIntoView({ block: 'center' })
           })
         }
         return el
-      }
-      )}
+      })}
     </div>
   </div>
 }
diff --git a/src/pages/Chat/Chat.tsx b/src/pages/Chat/Chat.tsx
index f9d26aa..c26f0fb 100644
--- a/src/pages/Chat/Chat.tsx
+++ b/src/pages/Chat/Chat.tsx
@@ -149,7 +149,7 @@ export function Chat() {
       .catch(console.error)
   })
 
-  return <div class="h-[calc(100vh-4.5rem)] flex">
+  return <div class="h-[calc(100dvh-4.5rem)] flex">
     {() => screen.md || info.showChannelsOverlay
       ? <Channels overlay={info.showChannelsOverlay} />
       : <div />
diff --git a/src/pages/Chat/Messages.tsx b/src/pages/Chat/Messages.tsx
index 627038f..7c93371 100644
--- a/src/pages/Chat/Messages.tsx
+++ b/src/pages/Chat/Messages.tsx
@@ -1,5 +1,6 @@
 import { LogOut, Menu } from 'lucide'
-import { refs, Sigui, type Signal } from 'sigui'
+import { Sigui, type Signal } from 'sigui'
+import { dom } from 'utils'
 import type { ChatMessage } from '~/api/chat/types.ts'
 import { cn } from '~/lib/cn.ts'
 import { icon } from '~/lib/icon.ts'
@@ -16,26 +17,52 @@ export function Messages({ showChannelsOverlay }: { showChannelsOverlay: Signal<
     showChannelsOverlay,
   })
 
+  const input = <input
+    type="text"
+    class="w-full"
+    autocomplete="off"
+    autocorrect="off"
+    autocapitalize="off"
+    spellcheck="false"
+    placeholder="say something..."
+    onkeydown={e => e.key === 'Enter' && sendMessage()}
+  /> as HTMLInputElement
+
+  const chatMessages = <div class="overflow-y-scroll leading-[19px]">
+    <div class="flex flex-col justify-end min-h-[calc(100dvh-8.75rem)]">
+      {() => emptyMsg.concat(state.currentChannel?.messages ?? []).concat(emptyMsg).map(message =>
+        <div class="flex gap-1.5">
+          <span class="font-bold min-w-[20%] max-w-[20%] text-right pr-1.5 border-r border-neutral-600" style={{ color: colorizeNick(message.nick) }}>{message.nick}</span>
+          <span class={cn({ 'italic text-neutral-500': message.type !== 'message' })}>{message.type === 'join' ? 'joined #' + state.currentChannelName : message.text}{!message.text.length && <>&nbsp;</>}</span>
+        </div>
+      )}
+    </div>
+  </div> as HTMLDivElement
+
+  function scrollToBottom() {
+    chatMessages.scrollTo({
+      top: chatMessages.scrollHeight,
+      behavior: 'instant',
+    })
+  }
+
   $.fx(() => {
     const { currentChannel } = $.of(state)
     const { messages } = currentChannel
     $()
     requestAnimationFrame(() => {
-      refs.chatMessages.scrollTo({
-        top: refs.chatMessages.scrollHeight,
-        behavior: 'instant',
-      })
-
-      const input = refs.chatInput as HTMLInputElement
-      input.focus()
+      scrollToBottom()
+      input.focus({ preventScroll: true })
     })
   })
 
+  $.fx(() => dom.on(input, 'focus', () => {
+    setTimeout(scrollToBottom, 150)
+  }))
+
   function sendMessage() {
     if (!state.currentChannel || !state.currentChannelName) return
 
-    const input = refs.chatInput as HTMLInputElement
-
     const message: ChatMessage = {
       type: 'message',
       channel: state.currentChannelName,
@@ -55,7 +82,7 @@ export function Messages({ showChannelsOverlay }: { showChannelsOverlay: Signal<
   const emptyMsg: ChatMessage[] = [{ type: 'message', nick: '', text: '' }]
 
   return <div class={cn(
-    'w-full pt-1.5 pb-2.5 flex flex-col max-h-[calc(100vh-4rem)]',
+    'w-full pt-1.5 pb-2.5 flex flex-col max-h-[calc(100dvh-4rem)]',
     { 'w-[70%]': screen.md },
   )} onclick={() => info.showChannelsOverlay = false}>
     <H3>
@@ -80,21 +107,10 @@ export function Messages({ showChannelsOverlay }: { showChannelsOverlay: Signal<
       </button>
     </H3>
 
-    <div ref="chatMessages" class="overflow-y-scroll leading-[19px]">
-      <div class="flex flex-col justify-end min-h-[calc(100vh-8.75rem)]">
-        {() => emptyMsg.concat(state.currentChannel?.messages ?? []).concat(emptyMsg).map(message =>
-          <div class="flex gap-1.5">
-            <span class="font-bold min-w-[20%] max-w-[20%] text-right pr-1.5 border-r border-neutral-600" style={{ color: colorizeNick(message.nick) }}>{message.nick}</span>
-            <span class={cn({ 'italic text-neutral-500': message.type !== 'message' })}>{message.type === 'join' ? 'joined #' + state.currentChannelName : message.text}{!message.text.length && <>&nbsp;</>}</span>
-          </div>
-        )}
-      </div>
-    </div>
+    {chatMessages}
     <div class="flex flex-row items-center gap-1">
       <span class="font-bold" style={{ color: colorizeNick(state.user?.nick) }}>{() => state.user?.nick}</span>
-      <input ref="chatInput" type="text" class="w-full"
-        onkeydown={e => e.key === 'Enter' && sendMessage()}
-      />
+      {input}
     </div>
   </div>
 }
diff --git a/src/pages/Chat/Users.tsx b/src/pages/Chat/Users.tsx
index b2afeb7..00049a5 100644
--- a/src/pages/Chat/Users.tsx
+++ b/src/pages/Chat/Users.tsx
@@ -1,6 +1,4 @@
-import { refs, Sigui } from 'sigui'
 import { colorizeNick } from '~/src/pages/Chat/util.ts'
-import * as actions from '~/src/rpc/chat.ts'
 import { state } from '~/src/state.ts'
 import { H3 } from '~/src/ui/Heading.tsx'
 import { Link } from '~/src/ui/Link.tsx'
@@ -12,7 +10,7 @@ export function Users({ onUserClick }: {
 
   const { nick } = state.user
 
-  return <div class="w-[30%] max-w-56 flex flex-col gap-2 pt-1.5 pb-2.5 pl-4 ml-4 flex-grow border-l border-l-neutral-700">
+  return <div class="w-[40%] max-w-56 flex flex-col gap-2 pt-1.5 pb-2.5 pl-4 ml-4 flex-grow border-l border-l-neutral-700">
     <H3>Users</H3>
 
     <div class="overflow-y-scroll leading-[19px]">
diff --git a/src/pages/Chat/VideoCall.tsx b/src/pages/Chat/VideoCall.tsx
index 4763565..92ba8ee 100644
--- a/src/pages/Chat/VideoCall.tsx
+++ b/src/pages/Chat/VideoCall.tsx
@@ -38,8 +38,8 @@ export function VideoCall({ type, targetNick, remoteSdp }: {
     micOn: true,
   })
 
-  const el = <div class='top-0 left-0 absolute flex w-[100vw] h-[100vh]'>
-    <div class='w-[70vw] relative h-[calc(100%-10vh)] m-auto p-4 border-8 border-neutral-700 bg-black flex items-center justify-center'>
+  const el = <div class='top-0 left-0 absolute flex w-[100dvw] h-[100dvh]'>
+    <div class='w-[70dvw] relative h-[calc(100%-10dvh)] m-auto p-4 border-8 border-neutral-700 bg-black flex items-center justify-center'>
       <video
         ref='remoteVideo'
         class="h-full"
@@ -65,7 +65,7 @@ export function VideoCall({ type, targetNick, remoteSdp }: {
           autoplay
           muted
           style="image-rendering: pixelated"
-          class='w-[20vw] border-8 border-neutral-700 pointer-events-none'
+          class='w-[20dvw] border-8 border-neutral-700 pointer-events-none'
         />
       </div>
     </div>
diff --git a/src/pages/UiShowcase.tsx b/src/pages/UiShowcase.tsx
index ea4700d..5e82027 100644
--- a/src/pages/UiShowcase.tsx
+++ b/src/pages/UiShowcase.tsx
@@ -9,7 +9,7 @@ function UiGroup({ name, children }: { name: string, children?: any }) {
 
 export function UiShowcase() {
   return (
-    <div class="w-[400px]">
+    <div class="max-w-[400px]">
 
       <H1>UI Showcase</H1>
 
diff --git a/src/pages/WebSockets.tsx b/src/pages/WebSockets.tsx
index 008d390..b4b41ff 100644
--- a/src/pages/WebSockets.tsx
+++ b/src/pages/WebSockets.tsx
@@ -1,5 +1,5 @@
 import { Sigui } from 'sigui'
-import { dom } from 'utils'
+import { dom, isMobile } from 'utils'
 import { createWebSocket } from '~/lib/ws.ts'
 import { env } from '~/src/env.ts'
 import { colorizeNick } from '~/src/pages/Chat/util.ts'
@@ -11,7 +11,7 @@ export function WebSockets() {
   const ws = createWebSocket('/ws', env.VITE_API_URL)
   $.fx(() => () => ws.close())
 
-  const el = <div />
+  const el = <div class="w-full h-[calc(100dvh-4.5rem)] touch-none" /> as HTMLDivElement
   const pointers = new Map<string, HTMLDivElement>()
 
   ws.onmessage = ({ data }) => {
@@ -26,11 +26,19 @@ export function WebSockets() {
     pointer.style.top = y + 'px'
   }
 
-  $.fx(() => dom.on(window, 'pointermove', ev => {
-    if (state.user && ws.state() == 'open') {
-      ws.send(`${state.user.nick},${ev.pageX.toFixed(1)},${ev.pageY.toFixed(1)}`)
-    }
-  }))
+  $.fx(() => [
+    dom.on(el, isMobile() ? 'touchmove' : 'pointermove', ev => {
+      ev.preventDefault()
+
+      const p: { pageX: number, pageY: number } = ev.type === 'touchmove'
+        ? (ev as TouchEvent).touches[0]!
+        : ev as PointerEvent
+
+      if (state.user && ws.state() == 'open') {
+        ws.send(`${state.user.nick},${p.pageX.toFixed(1)},${p.pageY.toFixed(1)}`)
+      }
+    }, { passive: false })
+  ].filter(Boolean))
 
   return el
 }
diff --git a/src/screen.ts b/src/screen.ts
index 962cd0c..4671272 100644
--- a/src/screen.ts
+++ b/src/screen.ts
@@ -3,8 +3,8 @@ import { dom } from 'utils'
 
 export const screen = $({
   pr: window.devicePixelRatio,
-  width: window.innerWidth,
-  height: window.innerHeight,
+  width: window.visualViewport!.width,
+  height: window.visualViewport!.height,
   get sm() {
     return screen.width < 640
   },
@@ -16,8 +16,15 @@ export const screen = $({
   },
 })
 
-dom.on(window, 'resize', () => {
-  screen.pr = window.devicePixelRatio
-  screen.width = window.innerWidth
-  screen.height = window.innerHeight
-}, { unsafeInitial: true })
+$.fx(() => [
+  dom.on(window, 'resize', $.fn(() => {
+    const viewport = window.visualViewport!
+    screen.pr = window.devicePixelRatio
+    screen.width = viewport.width
+    screen.height = viewport.height
+  }), { unsafeInitial: true }),
+
+  dom.on(document, 'focus', () => {
+    console.log('trigger focus')
+  })
+])
diff --git a/src/state.ts b/src/state.ts
index dca5d91..5e23f93 100644
--- a/src/state.ts
+++ b/src/state.ts
@@ -1,13 +1,14 @@
-import { $ } from 'sigui'
+import { $, fx } from 'sigui'
 import type { z } from 'zod'
 import type { UserSession } from '~/api/auth/types.ts'
 import type { UiChannel } from '~/api/chat/types.ts'
 import type { Channels } from '~/api/models.ts'
 import { env } from '~/src/env.ts'
+import { screen } from '~/src/screen.ts'
 import { link } from '~/src/ui/Link.tsx'
 
 export let state = $({
-  user: undefined as undefined | null | UserSession,
+  container: null as null | HTMLElement,
 
   url: link.$.url,
   get pathname() {
@@ -27,6 +28,8 @@ export let state = $({
     return url.href
   },
 
+  user: undefined as undefined | null | UserSession,
+
   channelsList: [] as Pick<z.infer<typeof Channels>, 'name'>[],
   channels: [] as UiChannel[],
   currentChannelName: null as null | string,
@@ -37,9 +40,18 @@ export let state = $({
   toastMessages: [] as { message?: string, stack?: string }[],
 })
 
+// fx(() => {
+//   const { container } = $.of(state)
+//   const { width, height } = screen
+//   $()
+//   container.style.width = width + 'px'
+//   container.style.height = height + 'px'
+// })
+
 export function setState(newState: any) {
   state = newState
 }
+
 // const channels = ['general', 'random', 'dev']
 // // const channels = Array.from({ length: 50 + (Math.random() * 50 | 0) }).map(() => loremRandomWord())
 // state.channels = channels.sort().map(name => $({
diff --git a/src/ui/Canvas.tsx b/src/ui/Canvas.tsx
index 6206300..71ce223 100644
--- a/src/ui/Canvas.tsx
+++ b/src/ui/Canvas.tsx
@@ -7,7 +7,11 @@ export function Canvas({ width, height }: {
 }) {
   using $ = Sigui()
 
-  const canvas = <canvas width="1" height="1" /> as HTMLCanvasElement
+  const canvas = <canvas
+    width="1"
+    height="1"
+    class="touch-none"
+  /> as HTMLCanvasElement
 
   const info = $({
     pr: screen.$.pr,
diff --git a/src/ui/editor/Editor.tsx b/src/ui/editor/Editor.tsx
index 8b3d5e0..6e5603b 100644
--- a/src/ui/editor/Editor.tsx
+++ b/src/ui/editor/Editor.tsx
@@ -1,5 +1,5 @@
 import { Sigui, type Signal } from 'sigui'
-import { dom, drawText } from 'utils'
+import { dom, drawText, isMobile } from 'utils'
 import { screen } from '~/src/screen.ts'
 import { Canvas } from '~/src/ui/Canvas.tsx'
 import { TextBuffer } from '~/src/ui/editor/text-buffer'
@@ -18,14 +18,15 @@ export function Editor({ code, width, height }: {
   using $ = Sigui()
 
   const canvas = <Canvas width={width} height={height} /> as HTMLCanvasElement
+
   const textarea = <textarea
     spellcheck="false"
     autocorrect="off"
     autocapitalize="off"
     autocomplete="off"
-    virtualkeyboardpolicy="manual"
+    virtualkeyboardpolicy="auto"
     class="
-      fixed opacity-50 w-[50px] h-[50px]
+      fixed right-0 top-0 opacity-50 w-[50px] h-[50px]
       pointer-events-none caret-transparent
       border-none outline-none
       resize-none p-0 whitespace-pre
@@ -90,7 +91,7 @@ export function Editor({ code, width, height }: {
     c.textBaseline = 'top'
     c.textRendering = 'optimizeSpeed'
     c.miterLimit = 1.5
-    c.font = '16px "Ubuntu Mono"'
+    c.font = '16px "Ubuntu Mono", monospace'
   })
 
   // split code to lines
@@ -166,183 +167,194 @@ export function Editor({ code, width, height }: {
     }
   })
 
-  // focus textarea initially and on window focus or canvas pointerdown
   function focus() {
-    textarea.focus()
+    textarea.focus({ preventScroll: true })
   }
   requestAnimationFrame(focus)
-  window.onfocus = canvas.onpointerup = () => {
-    textarea.focus()
+  if (isMobile()) {
+    canvas.ontouchend = ev => {
+      ev.preventDefault()
+      focus()
+    }
+  }
+  window.onfocus = canvas.onpointerup = (ev: PointerEvent | FocusEvent) => {
+    ev.preventDefault()
+    focus()
   }
 
   // read keyboard input
-  $.fx(() => {
-    textarea.focus()
-    return [
-      dom.on(textarea, 'keydown', $.fn((ev: KeyboardEvent) => {
-        ev.preventDefault()
-
-        const {
-          buffer,
-          caret, caretIndex, caretVisual, caretVisualXIntent,
-        } = info
-
-        const {
-          code,
-          lines, linesVisual
-        } = buffer.info
-
-        const { key } = ev
-        const ctrl = ev.ctrlKey || ev.metaKey
-        const alt = ev.altKey
-        const shift = ev.shiftKey
-
-        function moveCaretUpDown(newY: number) {
-          if (newY >= 0 && newY <= linesVisual.length) {
-            const { x, y } = buffer.visualPointToLogicalPoint({
-              x: caretVisualXIntent,
-              y: newY
-            })
-            caret.x = x
-            caret.y = y
-          }
+  $.fx(() => [
+    // mobile
+    dom.on(textarea, 'input', $.fn((ev: InputEvent) => {
+      if (ev.data) textarea.dispatchEvent(new KeyboardEvent('keydown', { key: ev.data }))
+    }) as any),
+
+    // desktop
+    dom.on(textarea, 'keydown', $.fn((ev: KeyboardEvent) => {
+      if (ev.ctrlKey && ev.key.toLowerCase() === 'j') return
+
+      ev.preventDefault()
+
+      const {
+        buffer,
+        caret, caretIndex, caretVisual, caretVisualXIntent,
+      } = info
+
+      const {
+        code,
+        lines, linesVisual
+      } = buffer.info
+
+      const { key } = ev
+      const ctrl = ev.ctrlKey || ev.metaKey
+      const alt = ev.altKey
+      const shift = ev.shiftKey
+
+      function moveCaretUpDown(newY: number) {
+        if (newY >= 0 && newY <= linesVisual.length) {
+          const { x, y } = buffer.visualPointToLogicalPoint({
+            x: caretVisualXIntent,
+            y: newY
+          })
+          caret.x = x
+          caret.y = y
+        }
+      }
+
+      function moveCaretLeft() {
+        if (caret.x > 0) caret.x--
+        else if (caret.y > 0) {
+          caret.y--
+          caret.x = lines[caret.y].length
         }
+        $.flush()
+        info.caretVisualXIntent = caretVisual.x
+      }
 
-        function moveCaretLeft() {
-          if (caret.x > 0) caret.x--
+      function moveCaretRight() {
+        const line = lines[caret.y]
+        if (caret.x < line.length) {
+          caret.x++
+        }
+        else if (caret.y < lines.length - 1) {
+          caret.y++
+          caret.x = 0
+        }
+        $.flush()
+        info.caretVisualXIntent = caretVisual.x
+      }
+
+      function moveCaretWord(dir: number) {
+        const words = parseWords(WORD, code)
+        let index = dir > 0 ? code.length : 0
+        for (let i = dir > 0 ? 0 : words.length - 1; dir > 0 ? i < words.length : i >= 0; dir > 0 ? i++ : i--) {
+          const word = words[i]
+          if ((dir > 0 && word.index > caretIndex) || (dir < 0 && word.index < caretIndex)) {
+            index = word.index
+            break
+          }
+        }
+        const p = buffer.indexToPoint(index)
+        caret.x = p.x
+        caret.y = p.y
+        $.flush()
+        info.caretVisualXIntent = caretVisual.x
+      }
+
+      // insert character
+      if (key.length === 1) {
+        const line = lines[caret.y]
+        lines[caret.y] = line.slice(0, caret.x) + key + line.slice(caret.x)
+        buffer.updateFromLines()
+        caret.x++
+        $.flush()
+        info.caretVisualXIntent = caretVisual.x
+      }
+      else {
+        // handle backspace
+        if (key === 'Backspace') {
+          // at greater than line length, remove char
+          if (caret.x > 0) {
+            const line = lines[caret.y]
+            lines[caret.y] = line.slice(0, caret.x - 1) + line.slice(caret.x)
+            buffer.updateFromLines()
+            caret.x--
+            $.flush()
+            info.caretVisualXIntent = caretVisual.x
+          }
+          // at start of line, merge with previous line
           else if (caret.y > 0) {
+            const line = lines[caret.y]
+            caret.x = lines[caret.y - 1].length
+            lines[caret.y - 1] += line
+            lines.splice(caret.y, 1)
+            buffer.updateFromLines()
             caret.y--
-            caret.x = lines[caret.y].length
+            $.flush()
+            info.caretVisualXIntent = caretVisual.x
           }
-          $.flush()
-          info.caretVisualXIntent = caretVisual.x
         }
-
-        function moveCaretRight() {
+        // handle delete
+        else if (key === 'Delete') {
           const line = lines[caret.y]
           if (caret.x < line.length) {
-            caret.x++
-          }
-          else if (caret.y < lines.length - 1) {
-            caret.y++
-            caret.x = 0
+            lines[caret.y] = line.slice(0, caret.x) + line.slice(caret.x + 1)
+            buffer.updateFromLines()
           }
+        }
+        // handle home
+        else if (key === 'Home') {
+          const bx = beginOfLine(linesVisual[caretVisual.y].text)
+          const vx = bx === caretVisual.x ? 0 : bx
+          const { x, y } = buffer.visualPointToLogicalPoint({ x: vx, y: caretVisual.y })
+          caret.x = x
+          caret.y = y
           $.flush()
           info.caretVisualXIntent = caretVisual.x
         }
-
-        function moveCaretWord(dir: number) {
-          const words = parseWords(WORD, code)
-          let index = dir > 0 ? code.length : 0
-          for (let i = dir > 0 ? 0 : words.length - 1; dir > 0 ? i < words.length : i >= 0; dir > 0 ? i++ : i--) {
-            const word = words[i]
-            if ((dir > 0 && word.index > caretIndex) || (dir < 0 && word.index < caretIndex)) {
-              index = word.index
-              break
-            }
-          }
-          const p = buffer.indexToPoint(index)
-          caret.x = p.x
-          caret.y = p.y
+        // handle end
+        else if (key === 'End') {
+          const { x, y } = buffer.visualPointToLogicalPoint({ x: linesVisual[caretVisual.y].text.length, y: caretVisual.y })
+          caret.x = x
+          caret.y = y
           $.flush()
           info.caretVisualXIntent = caretVisual.x
         }
-
-        // insert character
-        if (key.length === 1) {
+        // handle enter
+        else if (key === 'Enter') {
           const line = lines[caret.y]
-          lines[caret.y] = line.slice(0, caret.x) + key + line.slice(caret.x)
+          lines[caret.y] = line.slice(0, caret.x)
+          lines.splice(caret.y + 1, 0, line.slice(caret.x))
           buffer.updateFromLines()
-          caret.x++
+          caret.y++
+          caret.x = 0
           $.flush()
           info.caretVisualXIntent = caretVisual.x
         }
-        else {
-          // handle backspace
-          if (key === 'Backspace') {
-            // at greater than line length, remove char
-            if (caret.x > 0) {
-              const line = lines[caret.y]
-              lines[caret.y] = line.slice(0, caret.x - 1) + line.slice(caret.x)
-              buffer.updateFromLines()
-              caret.x--
-              $.flush()
-              info.caretVisualXIntent = caretVisual.x
-            }
-            // at start of line, merge with previous line
-            else if (caret.y > 0) {
-              const line = lines[caret.y]
-              caret.x = lines[caret.y - 1].length
-              lines[caret.y - 1] += line
-              lines.splice(caret.y, 1)
-              buffer.updateFromLines()
-              caret.y--
-              $.flush()
-              info.caretVisualXIntent = caretVisual.x
-            }
-          }
-          // handle delete
-          else if (key === 'Delete') {
-            const line = lines[caret.y]
-            if (caret.x < line.length) {
-              lines[caret.y] = line.slice(0, caret.x) + line.slice(caret.x + 1)
-              buffer.updateFromLines()
-            }
-          }
-          // handle home
-          else if (key === 'Home') {
-            const bx = beginOfLine(linesVisual[caretVisual.y].text)
-            const vx = bx === caretVisual.x ? 0 : bx
-            const { x, y } = buffer.visualPointToLogicalPoint({ x: vx, y: caretVisual.y })
-            caret.x = x
-            caret.y = y
-            $.flush()
-            info.caretVisualXIntent = caretVisual.x
-          }
-          // handle end
-          else if (key === 'End') {
-            const { x, y } = buffer.visualPointToLogicalPoint({ x: linesVisual[caretVisual.y].text.length, y: caretVisual.y })
-            caret.x = x
-            caret.y = y
-            $.flush()
-            info.caretVisualXIntent = caretVisual.x
-          }
-          // handle enter
-          else if (key === 'Enter') {
-            const line = lines[caret.y]
-            lines[caret.y] = line.slice(0, caret.x)
-            lines.splice(caret.y + 1, 0, line.slice(caret.x))
-            buffer.updateFromLines()
-            caret.y++
-            caret.x = 0
-            $.flush()
-            info.caretVisualXIntent = caretVisual.x
-          }
-          // handle arrow keys
-          else if (key === 'ArrowUp' || key === 'ArrowDown') {
-            const newY = key === 'ArrowUp'
-              ? caretVisual.y - 1
-              : caretVisual.y + 1
-            moveCaretUpDown(newY)
-          }
-          else if (key === 'ArrowLeft') {
-            if (ctrl) moveCaretWord(-1)
-            else moveCaretLeft()
-          }
-          else if (key === 'ArrowRight') {
-            if (ctrl) moveCaretWord(+1)
-            else moveCaretRight()
-          }
+        // handle arrow keys
+        else if (key === 'ArrowUp' || key === 'ArrowDown') {
+          const newY = key === 'ArrowUp'
+            ? caretVisual.y - 1
+            : caretVisual.y + 1
+          moveCaretUpDown(newY)
         }
+        else if (key === 'ArrowLeft') {
+          if (ctrl) moveCaretWord(-1)
+          else moveCaretLeft()
+        }
+        else if (key === 'ArrowRight') {
+          if (ctrl) moveCaretWord(+1)
+          else moveCaretRight()
+        }
+      }
 
-      }))
-    ]
-  })
+    }))
+  ])
 
   const el = <div>
     {canvas}
     {textarea}
-  </div>
+  </div> as HTMLDivElement
 
   return { el, focus }
 }
diff --git a/src/ui/editor/util/index-to-point.ts b/src/ui/editor/util/index-to-point.ts
deleted file mode 100644
index f5810b5..0000000
--- a/src/ui/editor/util/index-to-point.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { Point } from '~/src/ui/editor/util/index.ts'
-
-export function indexToPoint(index: number, lines: string[]): Point {
-  let currentIndex = 0
-
-  for (let y = 0; y < lines.length; y++) {
-    const lineLength = lines[y].length + 1 // +1 for the newline character
-
-    if (currentIndex + lineLength > index) {
-      // The point is on this line
-      const x = index - currentIndex
-      return { x, y }
-    }
-
-    currentIndex += lineLength
-  }
-
-  // If we've reached here, the index is at the very end of the text
-  return {
-    x: lines.at(-1).length,
-    y: lines.length - 1
-  }
-}
diff --git a/src/ui/editor/util/index-to-visual-point.ts b/src/ui/editor/util/index-to-visual-point.ts
deleted file mode 100644
index 6f6dc93..0000000
--- a/src/ui/editor/util/index-to-visual-point.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Line, Point } from '~/src/ui/editor/util/index.ts'
-
-export function indexToVisualPoint(index: number, linesVisual: Line[]): Point {
-  let idx = 0
-
-  for (let y = 0; y < linesVisual.length; y++) {
-    const line = linesVisual[y]
-    const lineLength = line.text.length
-
-    if (idx + lineLength >= index) {
-      // The caret is on this line
-      const x = index - idx
-      return { x, y }
-    }
-
-    idx += lineLength + (line.hasBreak ? 1 : 0) // +1 for newline character
-  }
-
-  // If we've gone through all lines and haven't found the position,
-  // return the end of the last line
-  return {
-    x: linesVisual.at(-1).text.length,
-    y: linesVisual.length - 1
-  }
-}
diff --git a/src/ui/editor/util/index.ts b/src/ui/editor/util/index.ts
index 67d6392..84e0504 100644
--- a/src/ui/editor/util/index.ts
+++ b/src/ui/editor/util/index.ts
@@ -1,11 +1,5 @@
 export * from './begin-of-line.ts'
 export * from './find-matching-brackets.ts'
-export * from './index-to-point.ts'
-export * from './index-to-visual-point.ts'
 export * from './parse-words.ts'
-export * from './point-to-index.ts'
 export * from './regexp.ts'
 export * from './types.ts'
-export * from './visual-point-to-index.ts'
-export * from './visual-point-to-logical-point.ts'
-export * from './word-wrap-text.ts'
diff --git a/src/ui/editor/util/point-to-index.test.ts b/src/ui/editor/util/point-to-index.test.ts
deleted file mode 100644
index 22272cc..0000000
--- a/src/ui/editor/util/point-to-index.test.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { pointToIndex } from '~/src/ui/editor/util/point-to-index.ts'
-
-describe('pointToIndex', () => {
-  it('return 0 for empty code', () => {
-    expect(pointToIndex({ x: 0, y: 0 }, '')).toBe(0)
-  })
-
-  it('return 0 for empty code and point that exceeds bounds', () => {
-    expect(pointToIndex({ x: 1, y: 0 }, '')).toBe(0)
-    expect(pointToIndex({ x: 0, y: 1 }, '')).toBe(0)
-    expect(pointToIndex({ x: 1, y: 1 }, '')).toBe(0)
-  })
-
-  it('correctly stays within bounds for code with one line', () => {
-    expect(pointToIndex({ x: 0, y: 0 }, 'a')).toBe(0)
-    expect(pointToIndex({ x: 1, y: 0 }, 'a')).toBe(1)
-    expect(pointToIndex({ x: 2, y: 0 }, 'a')).toBe(1)
-    expect(pointToIndex({ x: 0, y: 1 }, 'a')).toBe(1)
-    expect(pointToIndex({ x: 0, y: 2 }, 'a')).toBe(1)
-    expect(pointToIndex({ x: 1, y: 1 }, 'a')).toBe(1)
-    expect(pointToIndex({ x: 1, y: 2 }, 'a')).toBe(1)
-    expect(pointToIndex({ x: 2, y: 2 }, 'a')).toBe(1)
-  })
-
-  it('correctly stays within bounds for code with two lines', () => {
-    expect(pointToIndex({ x: 0, y: 0 }, 'a\nb')).toBe(0)
-    expect(pointToIndex({ x: 1, y: 0 }, 'a\nb')).toBe(1)
-    expect(pointToIndex({ x: 2, y: 0 }, 'a\nb')).toBe(1)
-    expect(pointToIndex({ x: 0, y: 1 }, 'a\nb')).toBe(2)
-    expect(pointToIndex({ x: 0, y: 2 }, 'a\nb')).toBe(3)
-    expect(pointToIndex({ x: 1, y: 1 }, 'a\nb')).toBe(3)
-    expect(pointToIndex({ x: 1, y: 2 }, 'a\nb')).toBe(3)
-    expect(pointToIndex({ x: 2, y: 2 }, 'a\nb')).toBe(3)
-  })
-
-  it('correctly stays within bounds for code with multiple lines', () => {
-    expect(pointToIndex({ x: 0, y: 0 }, 'aa\nbb\ncc')).toBe(0)
-    expect(pointToIndex({ x: 1, y: 0 }, 'aa\nbb\ncc')).toBe(1)
-    expect(pointToIndex({ x: 2, y: 0 }, 'aa\nbb\ncc')).toBe(2)
-    expect(pointToIndex({ x: 3, y: 0 }, 'aa\nbb\ncc')).toBe(2)
-
-    expect(pointToIndex({ x: 0, y: 1 }, 'aa\nbb\ncc')).toBe(3)
-    expect(pointToIndex({ x: 1, y: 1 }, 'aa\nbb\ncc')).toBe(4)
-    expect(pointToIndex({ x: 2, y: 1 }, 'aa\nbb\ncc')).toBe(5)
-    expect(pointToIndex({ x: 3, y: 1 }, 'aa\nbb\ncc')).toBe(5)
-
-    expect(pointToIndex({ x: 0, y: 2 }, 'aa\nbb\ncc')).toBe(6)
-    expect(pointToIndex({ x: 1, y: 2 }, 'aa\nbb\ncc')).toBe(7)
-    expect(pointToIndex({ x: 2, y: 2 }, 'aa\nbb\ncc')).toBe(8)
-    expect(pointToIndex({ x: 3, y: 2 }, 'aa\nbb\ncc')).toBe(8)
-
-    expect(pointToIndex({ x: 0, y: 3 }, 'aa\nbb\ncc')).toBe(8)
-    expect(pointToIndex({ x: 1, y: 3 }, 'aa\nbb\ncc')).toBe(8)
-    expect(pointToIndex({ x: 2, y: 3 }, 'aa\nbb\ncc')).toBe(8)
-    expect(pointToIndex({ x: 3, y: 3 }, 'aa\nbb\ncc')).toBe(8)
-  })
-})
diff --git a/src/ui/editor/util/point-to-index.ts b/src/ui/editor/util/point-to-index.ts
deleted file mode 100644
index 325eaf4..0000000
--- a/src/ui/editor/util/point-to-index.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { Point } from '~/src/ui/editor/util/index.ts'
-
-export function pointToIndex(point: Point, code: string): number {
-  let { x, y } = point
-
-  const lines = code.split('\n')
-
-  if (y > lines.length - 1) {
-    y = lines.length - 1
-    x = lines[y].length
-  }
-  else {
-    x = Math.min(x, lines[y].length)
-  }
-
-  const before = lines
-    .slice(0, y)
-    .reduce((sum, line) =>
-      sum + line.length + 1,
-      0
-    )
-
-  const index = before + x
-
-  return index
-}
diff --git a/src/ui/editor/util/visual-point-to-index.ts b/src/ui/editor/util/visual-point-to-index.ts
deleted file mode 100644
index bb566a5..0000000
--- a/src/ui/editor/util/visual-point-to-index.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { Line, Point } from '~/src/ui/editor/util/index.ts'
-
-export function visualPointToIndex(
-  point: Point,
-  linesVisual: Line[]
-): number {
-  const { x, y } = point
-
-  let index = 0
-
-  // Sum up the lengths of all previous lines
-  for (let i = 0; i < y; i++) {
-    const line = linesVisual[i]
-    index += line.text.length + (line.hasBreak ? 1 : 0) // +1 for newline character
-  }
-
-  // Add the x position on the current line
-  const line = linesVisual[y]
-  index += Math.min(x, line.text.length + (line.hasBreak ? 1 : 0))
-
-  return index
-}
diff --git a/src/ui/editor/util/visual-point-to-logical-point.ts b/src/ui/editor/util/visual-point-to-logical-point.ts
deleted file mode 100644
index fe7769d..0000000
--- a/src/ui/editor/util/visual-point-to-logical-point.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { Point } from 'utils'
-import { indexToPoint, visualPointToIndex, type Line } from '~/src/ui/editor/util/index.ts'
-
-export function visualPointToLogicalPoint(
-  point: Point,
-  lines: string[],
-  linesVisual: Line[]
-): Point {
-  const index = visualPointToIndex(point, linesVisual)
-  return indexToPoint(index, lines)
-}
diff --git a/src/ui/editor/util/word-wrap-text.test.ts b/src/ui/editor/util/word-wrap-text.test.ts
deleted file mode 100644
index 28321a6..0000000
--- a/src/ui/editor/util/word-wrap-text.test.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import { wordWrapText } from '~/src/ui/editor/util/word-wrap-text.ts'
-
-function l(text: string): string[] {
-  return text.split('\n')
-}
-
-describe('wordWrapText', () => {
-  it('[""] on empty string', () => {
-    const lines = wordWrapText(l(''), 10)
-    expect(lines).toEqual([''])
-  })
-
-  it('one line if text below maxLineLength', () => {
-    const lines = wordWrapText(l('hello'), 10)
-    expect(lines).toEqual(['hello'])
-  })
-
-  it('handle newlines', () => {
-    const lines = wordWrapText(l('hello\nthere'), 10)
-    expect(lines).toEqual(['hello', 'there'])
-  })
-
-  it('splits to 2 lines if text exceeds maxLineLength', () => {
-    const lines = wordWrapText(l('hello world'), 10)
-    expect(lines).toEqual(['hello', 'world'])
-  })
-
-  it('splits to multiple lines if text exceeds maxLineLength twice', () => {
-    const lines = wordWrapText(l('hello world lorem ipsum'), 10)
-    expect(lines).toEqual(['hello', 'world', 'lorem', 'ipsum'])
-  })
-
-  it('splits words', () => {
-    const lines = wordWrapText(l('helloworld loremipsum'), 8)
-    expect(lines).toEqual(['hellowor', 'ld', 'loremips', 'um'])
-  })
-
-  it('splits words and lines', () => {
-    const lines = wordWrapText(l('helloworld loremipsum'), 5)
-    expect(lines).toEqual(['hello', 'world', 'lorem', 'ipsum'])
-  })
-
-  it('splits words and lines with multiple spaces', () => {
-    const lines = wordWrapText(l('hello  world lorem    ipsum'), 5)
-    expect(lines).toEqual(['hello', 'world', 'lorem', 'ipsum'])
-  })
-
-  it('splits words and lines with multiple spaces 2', () => {
-    const lines = wordWrapText(l('hello    world lorem    ipsum'), 5)
-    expect(lines).toEqual(['hello', 'world', 'lorem', 'ipsum'])
-  })
-
-  it('handle multiple spaces and words exceeding line length', () => {
-    const lines = wordWrapText(l('hello    world loremipsum'), 5)
-    expect(lines).toEqual(['hello', 'world', 'lorem', 'ipsum'])
-  })
-
-  it('handle spaces at beginning of lines', () => {
-    const lines = wordWrapText(l('  hello    world loremipsum'), 7)
-    expect(lines).toEqual(['  hello', 'world', 'loremip', 'sum'])
-  })
-
-  it('handle spaces at beginning of lines 2', () => {
-    const lines = wordWrapText(l('  hello    world loremipsum'), 5)
-    expect(lines).toEqual(['  ', 'hello', 'world', 'lorem', 'ipsum'])
-  })
-})
diff --git a/src/ui/editor/util/word-wrap-text.ts b/src/ui/editor/util/word-wrap-text.ts
deleted file mode 100644
index 4cb706c..0000000
--- a/src/ui/editor/util/word-wrap-text.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-export interface Line {
-  text: string
-  hasBreak: boolean
-}
-
-export function wordWrapText(lines: string[], width: number): Line[] {
-  const text = lines.join('\n')
-  const cut = true
-  const br = '\n'
-
-  if (0 === width || text.length <= width) {
-    return [{ text, hasBreak: false }]
-  }
-
-  return text.split('\n').flatMap((line, index, array) => {
-    const hasBreak = index < array.length - 1
-
-    if (line.length <= width) {
-      return [{ text: line, hasBreak }]
-    }
-
-    let words = line.split(' ')
-
-    if (cut) {
-      let temp = []
-      for (const word of words) {
-        if (word.length > width) {
-          let i = 0
-          const length = word.length
-          while (i < length) {
-            temp.push(word.slice(i, Math.min(i + width, length)))
-            i += width
-          }
-        } else {
-          temp.push(word)
-        }
-      }
-      words = temp
-    }
-
-    let wrapped = words.shift()!
-    let spaceLeft = width - wrapped.length
-    let result: Line[] = []
-    let currentLine = wrapped
-
-    for (const word of words) {
-      if (word.length + 1 > spaceLeft) {
-        result.push({ text: currentLine, hasBreak: false })
-        currentLine = word
-        spaceLeft = width - word.length
-      } else {
-        currentLine += ' ' + word
-        spaceLeft -= 1 + word.length
-      }
-    }
-
-    result.push({ text: currentLine, hasBreak })
-    return result
-  })
-}
diff --git a/style.css b/style.css
index 9975c46..fb33bdf 100644
--- a/style.css
+++ b/style.css
@@ -49,6 +49,8 @@
       hover:border-neutral-400
       hover:border-t-neutral-600
       hover:border-l-neutral-600
+
+      placeholder-neutral-500
       ;
   }
   a {
@@ -69,6 +71,9 @@
   }
 }
 
+input::placeholder {
+  font-style: italic;
+}
 input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
diff --git a/vendor/vite-plugin-bundle-url.ts b/vendor/vite-plugin-bundle-url.ts
index 43808a8..713dfbd 100644
--- a/vendor/vite-plugin-bundle-url.ts
+++ b/vendor/vite-plugin-bundle-url.ts
@@ -1,6 +1,6 @@
 import { build, createLogger, type Plugin, type UserConfig } from 'vite'
 
-export function BundleUrl({ plugins }: { plugins: (Plugin | Plugin[])[] }): Plugin {
+export function ViteBundleUrl({ plugins }: { plugins: (Plugin | Plugin[])[] }): Plugin {
   let viteConfig: UserConfig
 
   return {
diff --git a/vendor/vite-plugin-coop-coep.ts b/vendor/vite-plugin-cors-coop-coep.ts
similarity index 55%
rename from vendor/vite-plugin-coop-coep.ts
rename to vendor/vite-plugin-cors-coop-coep.ts
index 663c0c1..908a3b8 100644
--- a/vendor/vite-plugin-coop-coep.ts
+++ b/vendor/vite-plugin-cors-coop-coep.ts
@@ -1,10 +1,11 @@
 import type { Plugin } from 'vite'
 
-export function ViteCoopCoep(): Plugin {
+export function ViteCorsCoopCoep(): Plugin {
   return {
-    name: 'coop-coep',
+    name: 'cors-coop-coep',
     configureServer(server) {
-      server.middlewares.use((_req, res, next) => {
+      server.middlewares.use((req, res, next) => {
+        res.setHeader('access-control-allow-origin', req.headers.origin ?? '*')
         res.setHeader('cross-origin-opener-policy', 'same-origin')
         res.setHeader('cross-origin-embedder-policy', 'require-corp')
         next()
diff --git a/vendor/vite-plugin-hex-loader.ts b/vendor/vite-plugin-hex-loader.ts
index 55fa0ea..f80634d 100644
--- a/vendor/vite-plugin-hex-loader.ts
+++ b/vendor/vite-plugin-hex-loader.ts
@@ -1,7 +1,7 @@
 import fs from 'node:fs'
 import type { Plugin } from 'vite'
 
-export function HexLoader(): Plugin {
+export function ViteHexLoader(): Plugin {
   return {
     name: 'hex-loader',
     transform(code, id) {
diff --git a/vendor/vite-plugin-open-in-editor.ts b/vendor/vite-plugin-open-in-editor.ts
index 19ee377..f0a0b96 100644
--- a/vendor/vite-plugin-open-in-editor.ts
+++ b/vendor/vite-plugin-open-in-editor.ts
@@ -10,7 +10,7 @@ const editor: { open(filename: string): Promise<void> } = openInEditor.configure
   dotfiles: 'allow',
 })
 
-export const OpenInEditor = (): Plugin => ({
+export const ViteOpenInEditor = (): Plugin => ({
   name: 'open-in-editor',
   configureServer(server) {
     server.middlewares.use(async (req, res, next) => {
diff --git a/vendor/vite-plugin-print-address.ts b/vendor/vite-plugin-print-address.ts
new file mode 100644
index 0000000..f0f65d2
--- /dev/null
+++ b/vendor/vite-plugin-print-address.ts
@@ -0,0 +1,38 @@
+import { Plugin } from 'vite'
+import os from 'node:os'
+// @ts-ignore
+import qrcode from 'qrcode-terminal'
+
+export function getNetworkAddress(options: { port: string }) {
+  for (const addresses of Object.values(os.networkInterfaces())) {
+    for (const address of addresses!) {
+      const { address: host, family, internal } = address
+      if (!internal && family === 'IPv4') {
+        return `https://${host}:${options.port}`
+      }
+    }
+  }
+  return '-'
+}
+
+export const VitePrintAddress = (): Plugin => ({
+  name: 'print-address',
+  configureServer(server) {
+    let timeout: any
+    const printUrls = (origin: string) => {
+      clearTimeout(timeout)
+      const url = new URL(origin)
+      const { port } = url
+      timeout = setTimeout(() => {
+        const network = getNetworkAddress({ port })
+        qrcode.generate(network, { small: true })
+        console.log(url.href)
+        console.log(network)
+      }, 500)
+    }
+    server.middlewares.use(async (req, res, next) => {
+      if (req.headers.origin) printUrls(req.headers.origin)
+      next()
+    })
+  },
+})
diff --git a/vite.config.ts b/vite.config.ts
index 73ed588..b998c49 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,10 +6,11 @@ import externalize from "vite-plugin-externalize-dependencies"
 import { VitePWA } from 'vite-plugin-pwa'
 import TsConfigPaths from 'vite-tsconfig-paths'
 import { ViteAssemblyScript } from './vendor/vite-plugin-assemblyscript.ts'
-import { BundleUrl } from './vendor/vite-plugin-bundle-url.ts'
-import { ViteCoopCoep } from './vendor/vite-plugin-coop-coep.ts'
-import { HexLoader } from './vendor/vite-plugin-hex-loader.ts'
-import { OpenInEditor } from './vendor/vite-plugin-open-in-editor.ts'
+import { ViteBundleUrl } from './vendor/vite-plugin-bundle-url.ts'
+import { ViteCorsCoopCoep } from './vendor/vite-plugin-cors-coop-coep.ts'
+import { ViteHexLoader } from './vendor/vite-plugin-hex-loader.ts'
+import { ViteOpenInEditor } from './vendor/vite-plugin-open-in-editor.ts'
+import { VitePrintAddress } from './vendor/vite-plugin-print-address.ts'
 import { ViteUsing } from './vendor/vite-plugin-using.ts'
 
 const root = process.cwd()
@@ -28,13 +29,14 @@ export default ({ mode }) => {
 
   const buildPlugins: Plugins = [
     ViteUsing(),
-    HexLoader(),
+    ViteHexLoader(),
     TsConfigPaths(),
   ]
 
   const plugins: Plugins = [
     ...buildPlugins,
-    BundleUrl({
+    VitePrintAddress(),
+    ViteBundleUrl({
       plugins: buildPlugins
     }),
     VitePWA({
@@ -87,8 +89,8 @@ export default ({ mode }) => {
         type: 'module',
       },
     }),
-    OpenInEditor(),
-    ViteCoopCoep(),
+    ViteOpenInEditor(),
+    ViteCorsCoopCoep(),
     externalize({
       externals: [
         'node:fs/promises',

From bfd071c45c8e11d74abc54f337514476017482fa Mon Sep 17 00:00:00 2001
From: stagas <gstagas@gmail.com>
Date: Thu, 10 Oct 2024 10:12:07 +0300
Subject: [PATCH 04/25] feat: wip editor

---
 index.html                                    |   3 +-
 src/comp/Toast.tsx                            |   8 +-
 src/pages/App.tsx                             |   7 +-
 src/pages/AssemblyScript.tsx                  |   4 +-
 src/pages/CanvasDemo.tsx                      |   2 +-
 src/pages/Chat/Chat.tsx                       |  10 +-
 src/pages/Chat/Messages.tsx                   |  17 +-
 src/pages/EditorDemo.tsx                      |  20 +-
 src/state.ts                                  |  10 +
 src/ui/editor/Editor.tsx                      | 370 ++----------------
 .../{text-buffer.test.ts => buffer.test.ts}   |  52 +--
 src/ui/editor/{text-buffer.ts => buffer.ts}   | 147 ++++---
 src/ui/editor/caret.ts                        | 203 ++++++++++
 src/ui/editor/dims.ts                         |  18 +
 src/ui/editor/kbd.tsx                         | 111 ++++++
 src/ui/editor/misc.ts                         |  13 +
 src/ui/editor/view.tsx                        |  85 ++++
 17 files changed, 631 insertions(+), 449 deletions(-)
 rename src/ui/editor/{text-buffer.test.ts => buffer.test.ts} (80%)
 rename src/ui/editor/{text-buffer.ts => buffer.ts} (57%)
 create mode 100644 src/ui/editor/caret.ts
 create mode 100644 src/ui/editor/dims.ts
 create mode 100644 src/ui/editor/kbd.tsx
 create mode 100644 src/ui/editor/misc.ts
 create mode 100644 src/ui/editor/view.tsx

diff --git a/index.html b/index.html
index c50b743..2e558eb 100644
--- a/index.html
+++ b/index.html
@@ -9,12 +9,13 @@
 
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Fustat:wght@200..800&display=block" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Fustat:wght@200..800&family=IBM+Plex+Mono&display=block" rel="stylesheet">
 
     <link rel="stylesheet" href="/style.css" />
     <title>Vasi</title>
   </head>
   <body>
+    <span style="font-family:'IBM Plex Mono'"></span>
     <div id="container"></div>
     <script src="./src/client.tsx" type="module"></script>
     <script src="./lib/watcher.ts" type="module"></script>
diff --git a/src/comp/Toast.tsx b/src/comp/Toast.tsx
index 4983ebd..4021ac1 100644
--- a/src/comp/Toast.tsx
+++ b/src/comp/Toast.tsx
@@ -1,13 +1,13 @@
 import { state } from '~/src/state.ts'
 
 export function Toast() {
-  return (
-    <div class="absolute w-[70%] p-4 bottom-0 right-0 flex flex-col gap-2">
+  return <div>
+    {() => state.toastMessages.length ? <div class="absolute w-[70%] p-4 bottom-0 right-0 flex flex-col gap-2">
       {() => state.toastMessages.map(item =>
         <div class="bg-black min-w-full p-2 border border-white-500 text-sm" onmousedown={() => {
           state.toastMessages = state.toastMessages.filter(i => i !== item)
         }}>{item.stack ?? item.message}</div>
       )}
-    </div>
-  )
+    </div> : <div />}
+  </div>
 }
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
index f2f17d9..dee233d 100644
--- a/src/pages/App.tsx
+++ b/src/pages/App.tsx
@@ -17,6 +17,7 @@ import { QrCode } from '~/src/pages/QrCode.tsx'
 import { UiShowcase } from '~/src/pages/UiShowcase.tsx'
 import { WebSockets } from '~/src/pages/WebSockets.tsx'
 import { whoami } from '~/src/rpc/auth.ts'
+import { screen } from '~/src/screen.ts'
 import { state } from '~/src/state.ts'
 import { go, Link } from '~/src/ui/Link.tsx'
 
@@ -27,7 +28,7 @@ export function App() {
 
   const info = $({
     bg: 'transparent',
-    canvasWidth: 500,
+    canvasWidth: state.$.containerWidth,
     canvasHeight: 500,
   })
 
@@ -95,7 +96,7 @@ export function App() {
       </div>
     </Header>
 
-    <div class="p-3.5">
+    <article class="p-3.5">
       {() => {
         if (state.user === undefined) return <div>Loading...</div>
 
@@ -104,6 +105,6 @@ export function App() {
 
         return <div>404 Not found</div>
       }}
-    </div>
+    </article>
   </main>
 }
diff --git a/src/pages/AssemblyScript.tsx b/src/pages/AssemblyScript.tsx
index 754ee4b..bf9d40d 100644
--- a/src/pages/AssemblyScript.tsx
+++ b/src/pages/AssemblyScript.tsx
@@ -35,7 +35,7 @@ export function AssemblyScript() {
     <br />
     Worker: {() => info.fromWorker}
     <br />
-    <Button onclick={() => pkgPlayer.play()}>Play</Button>
-    <Button onclick={() => pkgPlayer.stop()}>Stop</Button>
+    <Button onpointerdown={() => pkgPlayer.play()}>Play</Button>
+    <Button onpointerdown={() => pkgPlayer.stop()}>Stop</Button>
   </div>
 }
diff --git a/src/pages/CanvasDemo.tsx b/src/pages/CanvasDemo.tsx
index 224ea7c..4a6656d 100644
--- a/src/pages/CanvasDemo.tsx
+++ b/src/pages/CanvasDemo.tsx
@@ -35,7 +35,7 @@ export function CanvasDemo({ width, height }: {
   }
 
   $.fx(() => {
-    const { pr, c } = $.of(info)
+    const { pr, c, width, height } = $.of(info)
     $()
     c.scale(pr, pr)
     c.textBaseline = 'top'
diff --git a/src/pages/Chat/Chat.tsx b/src/pages/Chat/Chat.tsx
index c26f0fb..9f51138 100644
--- a/src/pages/Chat/Chat.tsx
+++ b/src/pages/Chat/Chat.tsx
@@ -149,12 +149,16 @@ export function Chat() {
       .catch(console.error)
   })
 
-  return <div class="h-[calc(100dvh-4.5rem)] flex">
+  const messages = Messages({ showChannelsOverlay: info.$.showChannelsOverlay })
+
+  const el = <div class="h-[calc(100dvh-4.5rem)] flex">
     {() => screen.md || info.showChannelsOverlay
       ? <Channels overlay={info.showChannelsOverlay} />
       : <div />
     }
-    <Messages showChannelsOverlay={info.$.showChannelsOverlay} />
+
+    {messages.el}
+
     {() => screen.md ? <Users onUserClick={nick => {
       info.videoCallType = 'offer'
       info.videoCallTargetNick = nick
@@ -170,4 +174,6 @@ export function Chat() {
       <div />
     }
   </div>
+
+  return { el, focus: messages.focus }
 }
diff --git a/src/pages/Chat/Messages.tsx b/src/pages/Chat/Messages.tsx
index 7c93371..1b90e68 100644
--- a/src/pages/Chat/Messages.tsx
+++ b/src/pages/Chat/Messages.tsx
@@ -28,7 +28,7 @@ export function Messages({ showChannelsOverlay }: { showChannelsOverlay: Signal<
     onkeydown={e => e.key === 'Enter' && sendMessage()}
   /> as HTMLInputElement
 
-  const chatMessages = <div class="overflow-y-scroll leading-[19px]">
+  const chatMessages = <div class="overflow-y-scroll leading-[19px]" onclick={focus}>
     <div class="flex flex-col justify-end min-h-[calc(100dvh-8.75rem)]">
       {() => emptyMsg.concat(state.currentChannel?.messages ?? []).concat(emptyMsg).map(message =>
         <div class="flex gap-1.5">
@@ -46,14 +46,16 @@ export function Messages({ showChannelsOverlay }: { showChannelsOverlay: Signal<
     })
   }
 
+  function focus() {
+    scrollToBottom()
+    input.focus({ preventScroll: true })
+  }
+
   $.fx(() => {
     const { currentChannel } = $.of(state)
     const { messages } = currentChannel
     $()
-    requestAnimationFrame(() => {
-      scrollToBottom()
-      input.focus({ preventScroll: true })
-    })
+    requestAnimationFrame(focus)
   })
 
   $.fx(() => dom.on(input, 'focus', () => {
@@ -81,7 +83,7 @@ export function Messages({ showChannelsOverlay }: { showChannelsOverlay: Signal<
 
   const emptyMsg: ChatMessage[] = [{ type: 'message', nick: '', text: '' }]
 
-  return <div class={cn(
+  const el = <div class={cn(
     'w-full pt-1.5 pb-2.5 flex flex-col max-h-[calc(100dvh-4rem)]',
     { 'w-[70%]': screen.md },
   )} onclick={() => info.showChannelsOverlay = false}>
@@ -108,9 +110,12 @@ export function Messages({ showChannelsOverlay }: { showChannelsOverlay: Signal<
     </H3>
 
     {chatMessages}
+
     <div class="flex flex-row items-center gap-1">
       <span class="font-bold" style={{ color: colorizeNick(state.user?.nick) }}>{() => state.user?.nick}</span>
       {input}
     </div>
   </div>
+
+  return { el, focus }
 }
diff --git a/src/pages/EditorDemo.tsx b/src/pages/EditorDemo.tsx
index a91f18c..a58fe3e 100644
--- a/src/pages/EditorDemo.tsx
+++ b/src/pages/EditorDemo.tsx
@@ -1,5 +1,6 @@
 import { Sigui, type Signal } from 'sigui'
 import { screen } from '~/src/screen.ts'
+import type { WordWrapProcessor } from '~/src/ui/editor/buffer.ts'
 import { Editor } from '~/src/ui/editor/Editor'
 import { H2 } from '~/src/ui/Heading.tsx'
 
@@ -9,13 +10,27 @@ export function EditorDemo({ width, height }: {
 }) {
   using $ = Sigui()
 
+  const wordWrapProcessor: WordWrapProcessor = {
+    pre(input: string) {
+      return input.replace(/\[(\w+)([^\]]+)\]/g, (_: any, word: string, chunk: string) => {
+        const c = chunk.replace(/\s/g, '\u0000')
+        return `[${word}${c}]`
+      })
+    },
+    post(input: string) {
+      return input.replaceAll('\u0000', ' ')
+    }
+  }
+
   const info = $({
     c: null as null | CanvasRenderingContext2D,
     pr: screen.$.pr,
     width,
     height,
-    code: `[sin 300] [tri 444] [sqr 555]
-[lp 300 .8]
+    code: `\
+[sin 300] [tri 444] [sqr 555] \
+[lp 300 .8] [dly 16 1 /] [pp 3 4 5] \
+[ar 10 50]
 `,
   })
 
@@ -23,6 +38,7 @@ export function EditorDemo({ width, height }: {
     width={info.$.width}
     height={info.$.height}
     code={info.$.code}
+    wordWrapProcessor={wordWrapProcessor}
   /> as Element & { focus(): void }
 
   const el = <div>
diff --git a/src/state.ts b/src/state.ts
index 5e23f93..cbf688e 100644
--- a/src/state.ts
+++ b/src/state.ts
@@ -9,6 +9,16 @@ import { link } from '~/src/ui/Link.tsx'
 
 export let state = $({
   container: null as null | HTMLElement,
+  get containerWidth() {
+    const { width } = screen
+    const { container } = state
+    if (!container) return width
+    const article = container.getElementsByTagName('article')[0] as HTMLElement
+    const style = window.getComputedStyle(article)
+    return article.getBoundingClientRect().width
+      - parseFloat(style.paddingLeft)
+      - parseFloat(style.paddingRight)
+  },
 
   url: link.$.url,
   get pathname() {
diff --git a/src/ui/editor/Editor.tsx b/src/ui/editor/Editor.tsx
index 6e5603b..d6e2df6 100644
--- a/src/ui/editor/Editor.tsx
+++ b/src/ui/editor/Editor.tsx
@@ -1,359 +1,61 @@
 import { Sigui, type Signal } from 'sigui'
-import { dom, drawText, isMobile } from 'utils'
-import { screen } from '~/src/screen.ts'
-import { Canvas } from '~/src/ui/Canvas.tsx'
-import { TextBuffer } from '~/src/ui/editor/text-buffer'
-import {
-  beginOfLine,
-  parseWords,
-  Point,
-  WORD
-} from '~/src/ui/editor/util/index.ts'
-
-export function Editor({ code, width, height }: {
+import { dom, isMobile } from 'utils'
+import { Buffer, type WordWrapProcessor } from '~/src/ui/editor/buffer.ts'
+import { Caret } from '~/src/ui/editor/caret.ts'
+import { Dims } from '~/src/ui/editor/dims.ts'
+import { Kbd } from '~/src/ui/editor/kbd.tsx'
+import { Misc } from '~/src/ui/editor/misc.ts'
+import { View } from '~/src/ui/editor/view.tsx'
+
+export function Editor({ code, width, height, wordWrapProcessor }: {
   code: Signal<string>
   width: Signal<number>
   height: Signal<number>
+  wordWrapProcessor: WordWrapProcessor
 }) {
   using $ = Sigui()
 
-  const canvas = <Canvas width={width} height={height} /> as HTMLCanvasElement
-
-  const textarea = <textarea
-    spellcheck="false"
-    autocorrect="off"
-    autocapitalize="off"
-    autocomplete="off"
-    virtualkeyboardpolicy="auto"
-    class="
-      fixed right-0 top-0 opacity-50 w-[50px] h-[50px]
-      pointer-events-none caret-transparent
-      border-none outline-none
-      resize-none p-0 whitespace-pre
-      overflow-hidden z-50
-    "
-  /> as HTMLTextAreaElement
-
-  const buffer = TextBuffer({ code })
-
-  const info = $({
-    c: null as null | CanvasRenderingContext2D,
-    pr: screen.$.pr,
-    width,
-    height,
-
-    code,
-    get buffer() {
-      const { code } = info
-      $()
-      buffer.info.code = code
-      return buffer
-    },
-
-    /** Caret logical position. */
-    caret: $(Point()),
-    /** Caret index position. */
-    caretIndex: 0,
-    /** Caret visual position after word wrapping. */
-    caretVisual: $(Point()),
-    /** Caret x position intent. */
-    caretVisualXIntent: 0,
-    caretWidth: 2,
-    caretBlink: false,
-    caretVisible: true,
-
-    charWidth: 1,
-    charHeight: 1,
-
-    lineHeight: 19,
-  })
-
-  info.caret.x = info.caretVisualXIntent = 1
-  info.caret.y = 1
-
-  const c = canvas.getContext('2d')!
-
-  // wait for fonts to load
-  document.fonts.ready.then(() => {
-    info.c = c
-
-    // measure char width and height
-    const metrics = c.measureText('M')
-    info.charWidth = metrics.width
-    info.charHeight = Math.floor(metrics.fontBoundingBoxDescent - metrics.fontBoundingBoxAscent)
-  })
-
-  // initialize canvas context settings
-  $.fx(() => {
-    const { pr, c } = $.of(info)
-    $()
-    c.scale(pr, pr)
-    c.textBaseline = 'top'
-    c.textRendering = 'optimizeSpeed'
-    c.miterLimit = 1.5
-    c.font = '16px "Ubuntu Mono", monospace'
-  })
-
-  // split code to lines
-  // $.fx(() => {
-  //   const { code } = info
-  //   $()
-  //   info.lines = code.split('\n')
-  //   info.linesVisual = wordWrapText(info.lines, maxCharsPerLine)
-  // })
-
-  $.fx(() => {
-    const { buffer, code, caret } = info
-    const { x, y } = caret
-    $()
-    info.caretIndex = buffer.pointToIndex(caret)
-  })
-
-  // calculate caret visual point from logical.
-  $.fx(() => {
-    const { buffer, caretIndex } = info
-    $()
-    const { x, y } = buffer.indexToVisualPoint(caretIndex)
-    info.caretVisual.x = x
-    info.caretVisual.y = y
-  })
-
-  // draw everything
-  $.fx(() => {
-    const {
-      c, width, height,
-      buffer,
-      code,
-      caretVisual, caretWidth, caretVisible,
-      charWidth, charHeight,
-      lineHeight,
-    } = $.of(info)
-
-    const { x: cx, y: cy } = caretVisual
-
-    $()
+  const misc = Misc()
+  const buffer = Buffer({ code, wordWrapProcessor })
+  const dims = Dims()
+  const caret = Caret({ buffer, dims, misc })
+  const kbd = Kbd({ buffer, caret })
+  const view = View({ width, height, dims, caret, buffer })
 
-    // clear editor
-    c.clearRect(0, 0, width, height)
-
-    // draw text
-    buffer.info.linesVisual.forEach((line, y) => {
-      drawText(c, { x: 1, y: y * lineHeight }, line.text, '#888', 4, '#000')
-    })
+  function onFocus() {
+    misc.info.isFocus = caret.info.isBlink = true
+  }
 
-    // draw caret
-    if (caretVisible) {
-      c.fillStyle = '#fff'
-      c.fillRect(
-        cx * charWidth,
-        cy * lineHeight + 1,
-        caretWidth,
-        charHeight
-      )
-    }
-  })
+  function onBlur() {
+    misc.info.isFocus = caret.info.isVisible = caret.info.isBlink = false
+  }
 
-  // blink caret
-  $.fx(() => {
-    const { caretBlink } = info
-    $()
-    if (!caretBlink) return
-    const caretIv = setInterval(() => {
-      info.caretVisible = !info.caretVisible
-    }, 500)
-    return () => {
-      info.caretVisible = true
-      clearInterval(caretIv)
-    }
-  })
+  // focus/blur
+  $.fx(() => [
+    dom.on(kbd, 'focus', onFocus),
+    dom.on(kbd, 'blur', onBlur),
+    dom.on(window, 'blur', onBlur),
+  ])
 
   function focus() {
-    textarea.focus({ preventScroll: true })
+    kbd.focus({ preventScroll: true })
   }
   requestAnimationFrame(focus)
-  if (isMobile()) {
-    canvas.ontouchend = ev => {
-      ev.preventDefault()
-      focus()
-    }
-  }
-  window.onfocus = canvas.onpointerup = (ev: PointerEvent | FocusEvent) => {
+
+  function preventAndFocus(ev: Event) {
     ev.preventDefault()
     focus()
   }
 
-  // read keyboard input
   $.fx(() => [
-    // mobile
-    dom.on(textarea, 'input', $.fn((ev: InputEvent) => {
-      if (ev.data) textarea.dispatchEvent(new KeyboardEvent('keydown', { key: ev.data }))
-    }) as any),
-
-    // desktop
-    dom.on(textarea, 'keydown', $.fn((ev: KeyboardEvent) => {
-      if (ev.ctrlKey && ev.key.toLowerCase() === 'j') return
-
-      ev.preventDefault()
-
-      const {
-        buffer,
-        caret, caretIndex, caretVisual, caretVisualXIntent,
-      } = info
-
-      const {
-        code,
-        lines, linesVisual
-      } = buffer.info
-
-      const { key } = ev
-      const ctrl = ev.ctrlKey || ev.metaKey
-      const alt = ev.altKey
-      const shift = ev.shiftKey
-
-      function moveCaretUpDown(newY: number) {
-        if (newY >= 0 && newY <= linesVisual.length) {
-          const { x, y } = buffer.visualPointToLogicalPoint({
-            x: caretVisualXIntent,
-            y: newY
-          })
-          caret.x = x
-          caret.y = y
-        }
-      }
-
-      function moveCaretLeft() {
-        if (caret.x > 0) caret.x--
-        else if (caret.y > 0) {
-          caret.y--
-          caret.x = lines[caret.y].length
-        }
-        $.flush()
-        info.caretVisualXIntent = caretVisual.x
-      }
-
-      function moveCaretRight() {
-        const line = lines[caret.y]
-        if (caret.x < line.length) {
-          caret.x++
-        }
-        else if (caret.y < lines.length - 1) {
-          caret.y++
-          caret.x = 0
-        }
-        $.flush()
-        info.caretVisualXIntent = caretVisual.x
-      }
-
-      function moveCaretWord(dir: number) {
-        const words = parseWords(WORD, code)
-        let index = dir > 0 ? code.length : 0
-        for (let i = dir > 0 ? 0 : words.length - 1; dir > 0 ? i < words.length : i >= 0; dir > 0 ? i++ : i--) {
-          const word = words[i]
-          if ((dir > 0 && word.index > caretIndex) || (dir < 0 && word.index < caretIndex)) {
-            index = word.index
-            break
-          }
-        }
-        const p = buffer.indexToPoint(index)
-        caret.x = p.x
-        caret.y = p.y
-        $.flush()
-        info.caretVisualXIntent = caretVisual.x
-      }
-
-      // insert character
-      if (key.length === 1) {
-        const line = lines[caret.y]
-        lines[caret.y] = line.slice(0, caret.x) + key + line.slice(caret.x)
-        buffer.updateFromLines()
-        caret.x++
-        $.flush()
-        info.caretVisualXIntent = caretVisual.x
-      }
-      else {
-        // handle backspace
-        if (key === 'Backspace') {
-          // at greater than line length, remove char
-          if (caret.x > 0) {
-            const line = lines[caret.y]
-            lines[caret.y] = line.slice(0, caret.x - 1) + line.slice(caret.x)
-            buffer.updateFromLines()
-            caret.x--
-            $.flush()
-            info.caretVisualXIntent = caretVisual.x
-          }
-          // at start of line, merge with previous line
-          else if (caret.y > 0) {
-            const line = lines[caret.y]
-            caret.x = lines[caret.y - 1].length
-            lines[caret.y - 1] += line
-            lines.splice(caret.y, 1)
-            buffer.updateFromLines()
-            caret.y--
-            $.flush()
-            info.caretVisualXIntent = caretVisual.x
-          }
-        }
-        // handle delete
-        else if (key === 'Delete') {
-          const line = lines[caret.y]
-          if (caret.x < line.length) {
-            lines[caret.y] = line.slice(0, caret.x) + line.slice(caret.x + 1)
-            buffer.updateFromLines()
-          }
-        }
-        // handle home
-        else if (key === 'Home') {
-          const bx = beginOfLine(linesVisual[caretVisual.y].text)
-          const vx = bx === caretVisual.x ? 0 : bx
-          const { x, y } = buffer.visualPointToLogicalPoint({ x: vx, y: caretVisual.y })
-          caret.x = x
-          caret.y = y
-          $.flush()
-          info.caretVisualXIntent = caretVisual.x
-        }
-        // handle end
-        else if (key === 'End') {
-          const { x, y } = buffer.visualPointToLogicalPoint({ x: linesVisual[caretVisual.y].text.length, y: caretVisual.y })
-          caret.x = x
-          caret.y = y
-          $.flush()
-          info.caretVisualXIntent = caretVisual.x
-        }
-        // handle enter
-        else if (key === 'Enter') {
-          const line = lines[caret.y]
-          lines[caret.y] = line.slice(0, caret.x)
-          lines.splice(caret.y + 1, 0, line.slice(caret.x))
-          buffer.updateFromLines()
-          caret.y++
-          caret.x = 0
-          $.flush()
-          info.caretVisualXIntent = caretVisual.x
-        }
-        // handle arrow keys
-        else if (key === 'ArrowUp' || key === 'ArrowDown') {
-          const newY = key === 'ArrowUp'
-            ? caretVisual.y - 1
-            : caretVisual.y + 1
-          moveCaretUpDown(newY)
-        }
-        else if (key === 'ArrowLeft') {
-          if (ctrl) moveCaretWord(-1)
-          else moveCaretLeft()
-        }
-        else if (key === 'ArrowRight') {
-          if (ctrl) moveCaretWord(+1)
-          else moveCaretRight()
-        }
-      }
-
-    }))
+    dom.on(window, 'focus', () => focus()),
+    dom.on(view.el, 'pointerup', preventAndFocus),
+    isMobile() && dom.on(view.el, 'touchend', preventAndFocus),
   ])
 
   const el = <div>
-    {canvas}
-    {textarea}
+    {view.el}
+    {kbd}
   </div> as HTMLDivElement
 
   return { el, focus }
diff --git a/src/ui/editor/text-buffer.test.ts b/src/ui/editor/buffer.test.ts
similarity index 80%
rename from src/ui/editor/text-buffer.test.ts
rename to src/ui/editor/buffer.test.ts
index 68b57a9..4ac0d16 100644
--- a/src/ui/editor/text-buffer.test.ts
+++ b/src/ui/editor/buffer.test.ts
@@ -1,10 +1,10 @@
 import { $ } from 'sigui'
-import { TextBuffer } from '~/src/ui/editor/text-buffer'
+import { Buffer } from '~/src/ui/editor/buffer.ts'
 
 function B(code: string, maxWidth: number) {
   const info = $({ code })
-  const b = TextBuffer({ code: info.$.code })
-  b.info.maxWidth = maxWidth
+  const b = Buffer({ code: info.$.code })
+  b.info.maxColumns = maxWidth
   return b
 }
 
@@ -105,7 +105,7 @@ describe('TextBuffer', () => {
   })
 
   describe('visualPointToIndex / indexToVisualPoint / indexToPoint', () => {
-    it('splits to multiple lines if text exceeds maxLineLength twice', () => {
+    it('works', () => {
       const b = B(`\
 hello world
 lorem ipsum
@@ -188,40 +188,20 @@ lorem ipsum
   describe('indexToVisualPoint', () => {
     it('splits to multiple lines if text exceeds maxLineLength twice', () => {
       const b = B(`\
-hello world
-lorem ipsum`, 10)
+aaa
+bbbbb ccccccc`, 10)
+      {
+        const i = b.visualPointToIndex({ x: 7, y: 2 })
+        expect(i).toEqual(17)
+        const j = b.indexToVisualPoint(17)
+        expect(j).toEqual({ x: 7, y: 2 })
+      }
       {
-        const p = b.indexToVisualPoint(21)
-        expect(p).toEqual({ x: 3, y: 3 })
+        const i = b.visualPointToIndex({ x: 7, y: 1 })
+        expect(i).toEqual(9)
+        const j = b.indexToVisualPoint(9)
+        expect(j).toEqual({ x: 5, y: 1 })
       }
-      // {
-      //   const i = b.visualPointToIndex({ x: 3, y: 2 })
-      //   expect(i).toEqual(15)
-      // }
-      // {
-      //   const i = b.visualPointToIndex({ x: 3, y: 1 })
-      //   expect(i).toEqual(9)
-      // }
-      // {
-      //   const i = b.visualPointToIndex({ x: 3, y: 0 })
-      //   expect(i).toEqual(3)
-      // }
     })
   })
-
-  // describe('visualPointToIndex', () => {
-  //   it('splits to multiple lines if text exceeds maxLineLength twice', () => {
-  //     const b = B('hello world lorem ipsum', 10)
-  //     {
-  //       const i = b.visualPointToIndex({ x: 3, y: 3 })
-  //       console.log(b.info.linesVisual.map(l => l.text))
-  //       expect(i).toEqual(21)
-  //     }
-  //     {
-  //       const i = b.visualPointToIndex({ x: 3, y: 2 })
-  //       console.log(b.info.linesVisual.map(l => l.text))
-  //       expect(i).toEqual(15)
-  //     }
-  //   })
-  // })
 })
diff --git a/src/ui/editor/text-buffer.ts b/src/ui/editor/buffer.ts
similarity index 57%
rename from src/ui/editor/text-buffer.ts
rename to src/ui/editor/buffer.ts
index c510bf4..14f24e4 100644
--- a/src/ui/editor/text-buffer.ts
+++ b/src/ui/editor/buffer.ts
@@ -1,85 +1,108 @@
 import { Sigui, type Signal } from 'sigui'
-import type { Point } from '~/src/ui/editor/util/index.ts'
+import { parseWords, WORD, type Point } from '~/src/ui/editor/util/index.ts'
 
-export interface TextLine {
+export interface Line {
   text: string
   br?: true
 }
 
-export function TextBuffer({ code }: { code: Signal<string> }) {
+export interface WordWrapProcessor {
+  pre(s: string): string
+  post(s: string): string
+}
+export type Buffer = ReturnType<typeof Buffer>
+
+function identity(x: any) { return x }
+
+export function Buffer({ code, wordWrapProcessor = { pre: identity, post: identity } }: {
+  code: Signal<string>,
+  wordWrapProcessor?: WordWrapProcessor
+}) {
   using $ = Sigui()
 
   const info = $({
     code,
-    maxWidth: 10,
+    maxColumns: 10,
+    get words() {
+      return parseWords(WORD, info.code)
+    },
     get lines() {
       return info.code.split('\n')
     },
-    get linesVisual(): TextLine[] {
-      const { code, maxWidth } = info
+    get linesVisual(): Line[] {
+      const { code, maxColumns } = info
       $()
+      return wordWrap()
+    }
+  })
 
-      const wrapped: TextLine[] = []
+  function wordWrap(): Line[] {
+    let { code, maxColumns } = info
 
-      let line = ''
-      let word = ''
-      let x = 0
+    const wrapped: Line[] = []
+    let line = ''
+    let word = ''
+    let x = 0
 
-      function push() {
-        const joined = line + word
-        if (joined.length > maxWidth) {
-          wrapped.push({ text: line })
-          if (word.length) wrapped.push({ text: word })
-        }
-        else {
-          wrapped.push({ text: joined })
-        }
+    code = wordWrapProcessor.pre(code)
+
+    function push() {
+      const joined = line + word
+      if (joined.length > maxColumns) {
+        wrapped.push({ text: line })
+        if (word.length) wrapped.push({ text: word })
+      }
+      else {
+        wrapped.push({ text: joined })
+      }
+      word = ''
+      line = ''
+      x = 0
+    }
+
+    for (let i = 0; i < code.length; i++) {
+      const c = code[i]
+      if (c === '\n') {
+        wrapped.push({ text: line + word, br: true })
         word = ''
         line = ''
         x = 0
       }
-
-      for (let i = 0; i < code.length; i++) {
-        const c = code[i]
-        if (c === '\n') {
-          wrapped.push({ text: line + word, br: true })
-          word = ''
-          line = ''
-          x = 0
-        }
-        else if (c === ' ') {
-          if (x >= maxWidth) {
-            push()
-            word = c
-          }
-          else {
-            line += word + c
-            word = ''
-          }
+      else if (c === ' ') {
+        if (x >= maxColumns) {
+          push()
+          word = c
         }
         else {
-          if (word.length === maxWidth) {
-            wrapped.push({ text: word })
-            word = ''
-            x = 0
-          }
-          word += c
-          if (line.length && (line + word).length >= maxWidth) {
-            wrapped.push({ text: line })
-            line = ''
-            x = 0
-          }
+          line += word + c
+          word = ''
         }
-        x++
       }
-
-      if (line.length || word.length || word.length === code.length) {
-        push()
+      else {
+        if (word.length === maxColumns) {
+          wrapped.push({ text: word })
+          word = ''
+          x = 0
+        }
+        word += c
+        if (line.length && (line + word).length >= maxColumns) {
+          wrapped.push({ text: line })
+          line = ''
+          x = 0
+        }
       }
+      x++
+    }
 
-      return wrapped
+    if (line.length || word.length || word.length === code.length) {
+      push()
     }
-  })
+
+    return wrapped.map(line => {
+      line.text = wordWrapProcessor.post(line.text)
+      return line
+    })
+  }
 
   function indexToPoint(index: number): Point {
     const { lines } = info
@@ -115,15 +138,14 @@ export function TextBuffer({ code }: { code: Signal<string> }) {
       const lineLength = line.text.length + (line.br ? 1 : 0)
 
       if (idx + lineLength > index) {
-        // The caret is on this line
         const x = index - idx
         return { x, y }
       }
 
-      idx += lineLength  // +1 for newline character
+      idx += lineLength
     }
 
-    // If we've gone through all lines and haven't found the position,
+    // if we've gone through all lines and haven't found the position,
     // return the end of the last line
     const line = linesVisual.at(-1)
     return {
@@ -162,6 +184,16 @@ export function TextBuffer({ code }: { code: Signal<string> }) {
 
     if (y >= linesVisual.length) return info.code.length
 
+    let line = linesVisual[y]
+    x = Math.min(
+      x,
+      line.text.length
+      - (line.br || y === linesVisual.length - 1
+        ? 0
+        : 1
+      )
+    )
+
     let index = 0
 
     // sum up the lengths of all previous lines
@@ -171,7 +203,6 @@ export function TextBuffer({ code }: { code: Signal<string> }) {
     }
 
     // add the x position of the current line
-    const line = linesVisual[y]
     index += Math.min(x, line.text.length)
 
     return index
diff --git a/src/ui/editor/caret.ts b/src/ui/editor/caret.ts
new file mode 100644
index 0000000..4b9de28
--- /dev/null
+++ b/src/ui/editor/caret.ts
@@ -0,0 +1,203 @@
+import { Sigui } from 'sigui'
+import type { Dims } from '~/src/ui/editor/dims.ts'
+import type { Misc } from '~/src/ui/editor/misc.ts'
+import type { Buffer } from '~/src/ui/editor/buffer.ts'
+import { beginOfLine } from '~/src/ui/editor/util/index.ts'
+import { Point } from '~/src/ui/editor/util/types.ts'
+
+export type Caret = ReturnType<typeof Caret>
+
+export function Caret({ buffer, dims, misc }: {
+  buffer: Buffer,
+  dims: Dims,
+  misc: Misc,
+}) {
+  using $ = Sigui()
+
+  const info = $({
+    x: 0,
+    y: 0,
+    index: 0,
+    visual: $(Point()),
+    visualXIntent: 0,
+    blinkReset: 0,
+    isBlink: false,
+    isVisible: false,
+  })
+
+  const caret = info
+
+  $.fx(() => {
+    const { code } = buffer.info
+    const { x, y } = caret
+    $()
+    caret.index = buffer.pointToIndex(caret)
+  })
+
+  // calculate caret visual point from logical.
+  $.fx(() => {
+    const { index } = caret
+    $()
+    const { x, y } = buffer.indexToVisualPoint(index)
+    caret.visual.x = x
+    caret.visual.y = y
+  })
+
+  // blink caret
+  $.fx(() => {
+    const { isFocus } = misc.info
+    const { isBlink, blinkReset } = caret
+    $()
+    if (!isFocus || !isBlink) return
+    caret.isVisible = true
+    const caretIv = setInterval(() => {
+      caret.isVisible = !caret.isVisible
+    }, 500)
+    return () => {
+      caret.isVisible = true
+      clearInterval(caretIv)
+    }
+  })
+
+  function doBackspace() {
+    const { lines } = buffer.info
+    // at greater than line length, remove char
+    if (caret.x > 0) {
+      const line = lines[caret.y]
+      lines[caret.y] = line.slice(0, caret.x - 1) + line.slice(caret.x)
+      buffer.updateFromLines()
+      caret.x--
+      $.flush()
+      caret.visualXIntent = caret.visual.x
+    }
+    // at start of line, merge with previous line
+    else if (caret.y > 0) {
+      const line = lines[caret.y]
+      caret.x = lines[caret.y - 1].length
+      lines[caret.y - 1] += line
+      lines.splice(caret.y, 1)
+      buffer.updateFromLines()
+      caret.y--
+      $.flush()
+      caret.visualXIntent = caret.visual.x
+    }
+  }
+
+  function doDelete() {
+    const { lines } = buffer.info
+    const line = lines[caret.y]
+    if (caret.x < line.length) {
+      lines[caret.y] = line.slice(0, caret.x) + line.slice(caret.x + 1)
+      buffer.updateFromLines()
+    }
+  }
+
+  function moveHome() {
+    const { linesVisual } = buffer.info
+    const bx = beginOfLine(linesVisual[caret.visual.y].text)
+    const vx = bx === caret.visual.x ? 0 : bx
+    const { x, y } = buffer.visualPointToLogicalPoint({ x: vx, y: caret.visual.y })
+    caret.x = x
+    caret.y = y
+    $.flush()
+    caret.visualXIntent = caret.visual.x
+  }
+
+  function moveEnd() {
+    const { linesVisual } = buffer.info
+    const { x, y } = buffer.visualPointToLogicalPoint({ x: linesVisual[caret.visual.y].text.length, y: caret.visual.y })
+    caret.x = x
+    caret.y = y
+    $.flush()
+    caret.visualXIntent = caret.visual.x
+  }
+
+  function moveUpDown(dy: number) {
+    const { linesVisual } = buffer.info
+    const newY = caret.visual.y + dy
+    if (newY >= 0 && newY <= linesVisual.length) {
+      const { x, y } = buffer.visualPointToLogicalPoint({
+        x: caret.visualXIntent,
+        y: newY
+      })
+      caret.x = x
+      caret.y = y
+    }
+  }
+
+  function moveLeft() {
+    const { lines } = buffer.info
+    if (caret.x > 0) caret.x--
+    else if (caret.y > 0) {
+      caret.y--
+      caret.x = lines[caret.y].length
+    }
+    $.flush()
+    caret.visualXIntent = caret.visual.x
+  }
+
+  function moveRight() {
+    const { lines } = buffer.info
+    const line = lines[caret.y]
+    if (caret.x < line.length) {
+      caret.x++
+    }
+    else if (caret.y < lines.length - 1) {
+      caret.y++
+      caret.x = 0
+    }
+    $.flush()
+    caret.visualXIntent = caret.visual.x
+  }
+
+  function moveByWord(dir: number) {
+    const { code, words } = buffer.info
+    let index = dir > 0 ? code.length : 0
+    for (let i = dir > 0 ? 0 : words.length - 1; dir > 0 ? i < words.length : i >= 0; dir > 0 ? i++ : i--) {
+      const word = words[i]
+      if ((dir > 0 && word.index > caret.index) || (dir < 0 && word.index < caret.index)) {
+        index = word.index
+        break
+      }
+    }
+    const p = buffer.indexToPoint(index)
+    caret.x = p.x
+    caret.y = p.y
+    $.flush()
+    caret.visualXIntent = caret.visual.x
+  }
+
+  function draw(c: CanvasRenderingContext2D) {
+    const { isVisible } = caret
+    if (!isVisible) return
+
+    const { caretWidth, charWidth, charHeight, lineHeight } = dims.info
+    const { x, y } = caret.visual
+
+    c.fillStyle = '#fff'
+    c.fillRect(
+      x * charWidth,
+      y * lineHeight + .5,
+      caretWidth,
+      charHeight
+    )
+  }
+
+  return $({
+    info,
+    x: caret.$.x,
+    y: caret.$.y,
+    index: caret.$.index,
+    visual: caret.$.visual,
+    visualXIntent: caret.$.visualXIntent,
+    doBackspace,
+    doDelete,
+    moveHome,
+    moveEnd,
+    moveUpDown,
+    moveLeft,
+    moveRight,
+    moveByWord,
+    draw,
+  })
+}
diff --git a/src/ui/editor/dims.ts b/src/ui/editor/dims.ts
new file mode 100644
index 0000000..47a1459
--- /dev/null
+++ b/src/ui/editor/dims.ts
@@ -0,0 +1,18 @@
+import { Sigui } from 'sigui'
+
+export type Dims = ReturnType<typeof Dims>
+
+export function Dims() {
+  using $ = Sigui()
+
+  const info = $({
+    caretWidth: 1.5,
+
+    charWidth: 1,
+    charHeight: 1,
+
+    lineHeight: 19,
+  })
+
+  return { info }
+}
diff --git a/src/ui/editor/kbd.tsx b/src/ui/editor/kbd.tsx
new file mode 100644
index 0000000..e2fda11
--- /dev/null
+++ b/src/ui/editor/kbd.tsx
@@ -0,0 +1,111 @@
+import { Sigui } from 'sigui'
+import { dom } from 'utils'
+import { Buffer } from '~/src/ui/editor/buffer.ts'
+import type { Caret } from '~/src/ui/editor/caret.ts'
+
+export function Kbd({ buffer, caret }: {
+  buffer: Buffer
+  caret: Caret
+}) {
+  using $ = Sigui()
+
+  const el = <textarea
+    spellcheck="false"
+    autocorrect="off"
+    autocapitalize="off"
+    autocomplete="off"
+    virtualkeyboardpolicy="auto"
+    class="
+      fixed right-0 top-0 opacity-0 w-[50px] h-[50px]
+      pointer-events-none caret-transparent
+      border-none outline-none
+      resize-none p-0 whitespace-pre
+      overflow-hidden z-50
+    "
+  /> as HTMLTextAreaElement
+
+  const ignoredKeys = 'cvxjrtn=+-'
+
+  // read keyboard input
+  $.fx(() => [
+    // mobile
+    dom.on(el, 'input', $.fn((ev: InputEvent) => {
+      if (ev.data) {
+        el.dispatchEvent(new KeyboardEvent('keydown', { key: ev.data }))
+        el.value = ''
+      }
+    }) as any),
+
+    // desktop
+    dom.on(el, 'keydown', $.fn((ev: KeyboardEvent) => {
+      if (ev.ctrlKey && ignoredKeys.includes(ev.key.toLowerCase())) return
+
+      ev.preventDefault()
+
+      caret.info.blinkReset++
+
+      const { code, lines, linesVisual } = buffer.info
+
+      const { key } = ev
+      const ctrl = ev.ctrlKey || ev.metaKey
+      const alt = ev.altKey
+      const shift = ev.shiftKey
+
+      // insert character
+      if (key.length === 1) {
+        const line = lines[caret.y]
+        lines[caret.y] = line.slice(0, caret.x) + key + line.slice(caret.x)
+        buffer.updateFromLines()
+        caret.x++
+        $.flush()
+        caret.visualXIntent = caret.visual.x
+      }
+      else {
+        // handle enter
+        if (key === 'Enter') {
+          const line = lines[caret.y]
+          lines[caret.y] = line.slice(0, caret.x)
+          lines.splice(caret.y + 1, 0, line.slice(caret.x))
+          buffer.updateFromLines()
+          caret.y++
+          caret.x = 0
+          $.flush()
+          caret.visualXIntent = caret.visual.x
+        }
+        // handle backspace
+        else if (key === 'Backspace') {
+          caret.doBackspace()
+        }
+        // handle delete
+        else if (key === 'Delete') {
+          caret.doDelete()
+        }
+        // handle home
+        else if (key === 'Home') {
+          caret.moveHome()
+        }
+        // handle end
+        else if (key === 'End') {
+          caret.moveEnd()
+        }
+        // handle arrow keys
+        else if (key === 'ArrowUp' || key === 'ArrowDown') {
+          const newY = key === 'ArrowUp'
+            ? caret.visual.y - 1
+            : caret.visual.y + 1
+          caret.moveUpDown(key === 'ArrowUp' ? -1 : +1)
+        }
+        else if (key === 'ArrowLeft') {
+          if (ctrl) caret.moveByWord(-1)
+          else caret.moveLeft()
+        }
+        else if (key === 'ArrowRight') {
+          if (ctrl) caret.moveByWord(+1)
+          else caret.moveRight()
+        }
+      }
+    }))
+  ])
+
+  return el
+}
diff --git a/src/ui/editor/misc.ts b/src/ui/editor/misc.ts
new file mode 100644
index 0000000..38dcdad
--- /dev/null
+++ b/src/ui/editor/misc.ts
@@ -0,0 +1,13 @@
+import { Sigui } from 'sigui'
+
+export type Misc = ReturnType<typeof Misc>
+
+export function Misc() {
+  using $ = Sigui()
+
+  const info = $({
+    isFocus: false,
+  })
+
+  return { info }
+}
diff --git a/src/ui/editor/view.tsx b/src/ui/editor/view.tsx
new file mode 100644
index 0000000..faf173d
--- /dev/null
+++ b/src/ui/editor/view.tsx
@@ -0,0 +1,85 @@
+import { Sigui, type Signal } from 'sigui'
+import { drawText } from 'utils'
+import { screen } from '~/src/screen.ts'
+import { Canvas } from '~/src/ui/Canvas.tsx'
+import { Buffer } from '~/src/ui/editor/buffer.ts'
+import { Caret } from '~/src/ui/editor/caret.ts'
+import { Dims } from '~/src/ui/editor/dims.ts'
+
+export function View({ width, height, dims, caret, buffer }: {
+  width: Signal<number>
+  height: Signal<number>
+  dims: Dims
+  caret: Caret
+  buffer: Buffer
+}) {
+  using $ = Sigui()
+
+  const canvas = <Canvas width={width} height={height} /> as HTMLCanvasElement
+
+  const info = $({
+    c: null as null | CanvasRenderingContext2D,
+    pr: screen.$.pr,
+    width,
+    height,
+  })
+
+  const c = canvas.getContext('2d')!
+
+  // wait for fonts to load
+  document.fonts.ready.then(() => {
+    info.c = c
+
+    // measure char width and height
+    const metrics = c.measureText('M')
+    dims.info.charWidth = metrics.width
+    dims.info.charHeight = Math.ceil(metrics.fontBoundingBoxDescent - metrics.fontBoundingBoxAscent)
+  })
+
+  // initialize canvas context settings
+  $.fx(() => {
+    const { pr, c, width, height } = $.of(info)
+    $()
+    c.scale(pr, pr)
+    c.textBaseline = 'top'
+    c.textRendering = 'optimizeLegibility'
+    c.miterLimit = 1.5
+    c.font = '16px "IBM Plex Mono", monospace'
+  })
+
+  // adjust text columns width based on view width
+  $.fx(() => {
+    const { width } = info
+    const { charWidth } = dims.info
+    $()
+    buffer.info.maxColumns = width / charWidth
+  })
+
+  // draw everything
+  $.fx(() => {
+    const { c, pr, width, height } = $.of(info)
+    const { code } = buffer.info
+    const { caretWidth, charWidth, charHeight, lineHeight } = dims.info
+    const { isVisible: isCaretVisible } = caret.info
+    const { x: cx, y: cy } = caret.info.visual
+
+    $()
+
+    // clear editor
+    c.clearRect(0, 0, width, height)
+
+    // highlight line
+    c.fillStyle = '#333'
+    c.fillRect(0, Math.floor(cy * lineHeight), width, lineHeight - 2)
+
+    // draw text
+    buffer.info.linesVisual.forEach((line, y) => {
+      drawText(c, { x: 1, y: 1 + y * lineHeight }, line.text, '#888', .025, '#888')
+    })
+
+    // draw caret
+    caret.draw(c)
+  })
+
+  return { el: canvas, info }
+}

From 939c02ff5fd3f0705023b04d75401b9f3d8ef06b Mon Sep 17 00:00:00 2001
From: stagas <gstagas@gmail.com>
Date: Thu, 10 Oct 2024 10:17:41 +0300
Subject: [PATCH 05/25] refactor: editor exports

---
 src/pages/EditorDemo.tsx       | 3 +--
 src/ui/{editor => }/Editor.tsx | 9 +++------
 src/ui/editor/index.ts         | 7 +++++++
 src/ui/index.ts                | 2 ++
 4 files changed, 13 insertions(+), 8 deletions(-)
 rename src/ui/{editor => }/Editor.tsx (80%)
 create mode 100644 src/ui/editor/index.ts

diff --git a/src/pages/EditorDemo.tsx b/src/pages/EditorDemo.tsx
index a58fe3e..b3ae62f 100644
--- a/src/pages/EditorDemo.tsx
+++ b/src/pages/EditorDemo.tsx
@@ -1,7 +1,6 @@
 import { Sigui, type Signal } from 'sigui'
 import { screen } from '~/src/screen.ts'
-import type { WordWrapProcessor } from '~/src/ui/editor/buffer.ts'
-import { Editor } from '~/src/ui/editor/Editor'
+import { Editor, type WordWrapProcessor } from '~/src/ui/Editor.tsx'
 import { H2 } from '~/src/ui/Heading.tsx'
 
 export function EditorDemo({ width, height }: {
diff --git a/src/ui/editor/Editor.tsx b/src/ui/Editor.tsx
similarity index 80%
rename from src/ui/editor/Editor.tsx
rename to src/ui/Editor.tsx
index d6e2df6..dc3307a 100644
--- a/src/ui/editor/Editor.tsx
+++ b/src/ui/Editor.tsx
@@ -1,11 +1,8 @@
 import { Sigui, type Signal } from 'sigui'
 import { dom, isMobile } from 'utils'
-import { Buffer, type WordWrapProcessor } from '~/src/ui/editor/buffer.ts'
-import { Caret } from '~/src/ui/editor/caret.ts'
-import { Dims } from '~/src/ui/editor/dims.ts'
-import { Kbd } from '~/src/ui/editor/kbd.tsx'
-import { Misc } from '~/src/ui/editor/misc.ts'
-import { View } from '~/src/ui/editor/view.tsx'
+import { Buffer, Caret, Dims, Kbd, Misc, View, type WordWrapProcessor } from '~/src/ui/editor/index.ts'
+
+export * from '~/src/ui/editor/index.ts'
 
 export function Editor({ code, width, height, wordWrapProcessor }: {
   code: Signal<string>
diff --git a/src/ui/editor/index.ts b/src/ui/editor/index.ts
new file mode 100644
index 0000000..50eb57b
--- /dev/null
+++ b/src/ui/editor/index.ts
@@ -0,0 +1,7 @@
+export * from './buffer.ts'
+export * from './caret.ts'
+export * from './dims.ts'
+export * from './kbd.tsx'
+export * from './misc.ts'
+export * from './util/index.ts'
+export * from './view.tsx'
diff --git a/src/ui/index.ts b/src/ui/index.ts
index 9d294b7..1e250e4 100644
--- a/src/ui/index.ts
+++ b/src/ui/index.ts
@@ -1,7 +1,9 @@
 export * from './Button.tsx'
 export * from './Canvas.tsx'
+export * from './Editor.tsx'
 export * from './Fieldset.tsx'
 export * from './Heading.tsx'
 export * from './Input.tsx'
 export * from './Label.tsx'
 export * from './Link.tsx'
+export * from './editor/index.ts'

From 38ebd5a6835810e333803a0f0818fc8d2653d278 Mon Sep 17 00:00:00 2001
From: stagas <gstagas@gmail.com>
Date: Thu, 10 Oct 2024 11:08:48 +0300
Subject: [PATCH 06/25] feat(editor): colors

---
 src/lang/tokenize.ts         | 287 +++++++++++++++++++++++++++++++++++
 src/pages/EditorDemo.tsx     |  25 ++-
 src/theme.ts                 |   4 +
 src/ui/Editor.tsx            |  32 ++--
 src/ui/editor/buffer.test.ts |   3 +-
 src/ui/editor/buffer.ts      |  15 +-
 src/ui/editor/view.tsx       |  18 ++-
 7 files changed, 361 insertions(+), 23 deletions(-)
 create mode 100644 src/lang/tokenize.ts
 create mode 100644 src/theme.ts

diff --git a/src/lang/tokenize.ts b/src/lang/tokenize.ts
new file mode 100644
index 0000000..91e827a
--- /dev/null
+++ b/src/lang/tokenize.ts
@@ -0,0 +1,287 @@
+export interface Source {
+  code: string
+}
+
+export interface Token<T = any> {
+  /** Token type. */
+  type: T
+  /** The text representation of the token. */
+  text: string
+  /** Zero based line number. */
+  line: number
+  /** Zero based column number. */
+  col: number
+  /** Rightmost column number, zero based. */
+  right: number
+  /** Bottom line, zero based. */
+  bottom: number
+  /** Zero based index. */
+  index: number
+  /** Token length. */
+  length: number
+  /** Reference to the source code document. */
+  source: Source
+}
+
+export namespace Token {
+  export enum Type {
+    Newline = 'Newline',
+    Whitespace = 'Whitespace',
+    Native = 'Native',
+    String = 'String',
+    Keyword = 'Keyword',
+    Op = 'Op',
+    Id = 'Id',
+    Number = 'Number',
+    BlockComment = 'BlockComment',
+    Comment = 'Comment',
+    Any = 'Any',
+  }
+
+  export const typesEntries = [
+    [Type.Newline, /(\n)/],
+    [Type.Whitespace, /(\s+?)/],
+    [Type.Native, /(`[a-z]+`)/],
+    [Type.String, /('[^'\n]*['\n])/],
+    [Type.Keyword, /(M|S|\\|@|,)/],
+    [Type.Op, /(\?)/],
+    [Type.Id, /([a-zA-Z]+[a-zA-Z0-9_]*)/],
+    [Type.Number, /([0-9]+[dhk][0-9]*|[0-9]+\.[0-9]+|\.?[0-9]+)/],
+    [Type.BlockComment, /(\[;|\(;|{;)/],
+    [Type.Op, /(\*=|\+=|:=|\+|-|\*|\/|\^|%|!|=|\{|\}|\(|\)|\[|\]|:|\.)/],
+    [Type.Comment, /(;[^\n]*)/],
+    [Type.Any, /(.+?)/],
+  ] as const
+
+  export const regexp = new RegExp(
+    Array.from(typesEntries,
+      ([, regexp]) => regexp.source
+    ).join('|'),
+    'g'
+  )
+
+  export const Empty: Token = {
+    type: 0,
+    text: '',
+    line: 0,
+    col: 0,
+    right: 0,
+    bottom: 0,
+    index: 0,
+    length: 0,
+    source: { code: '' }
+  }
+
+  export const Close = {
+    '[': ']',
+    '(': ')',
+    '{': '}',
+  } as const
+
+  export function isTerminal(token: Token) {
+    switch (token.type) {
+      case Type.Any:
+      case Type.Comment: return false
+    }
+    return true
+  }
+
+  export function closeOf(token: Token) {
+    return Close[token.text as keyof typeof Close].charCodeAt(0)
+  }
+
+  export function bounds(tokens: Token[]) {
+    let line: number = Infinity
+    let col: number = Infinity
+    let right: number = 0
+    let index: number = Infinity
+    let bottom: number = 0
+    let end: number = 0
+
+    let t: { line: number, col: number, right: number, index: number, length: number }
+
+    for (const t of tokens) {
+      if (t.index < index) index = t.index
+      if (t.index + t.length > end) end = t.index + t.length
+      if (t.line < line) line = t.line
+      if (t.line > bottom) bottom = t.line
+      if (t.col < col && t.line === line) col = t.col
+      if (t.right > right) right = t.right
+    }
+
+    return { line, col, right, bottom, index, length: end - index }
+  }
+}
+
+export function* tokenize(source: Source): Generator<Token, void, unknown> {
+  const code = source.code
+  let i = 0
+  let text: string | null
+  let type: Token.Type
+  let line = 0
+  let lineIndex = 0
+  let depth = 0
+  let col = 0
+  let match: RegExpMatchArray
+  let begin: RegExpMatchArray
+  let slice: string
+  let open: keyof typeof Token.Close
+  let close: typeof Token.Close[keyof typeof Token.Close]
+  const length = Token.typesEntries.length + 1
+  const it = code.matchAll(Token.regexp)
+  outer: for (match of it) {
+    for (i = 1; i < length; i++) {
+      text = match[i]
+      if (text != null) {
+        type = Token.typesEntries[i - 1][0]
+        switch (type) {
+          case Token.Type.Whitespace:
+            break
+          case Token.Type.Newline:
+            ++line
+            lineIndex = match.index! + 1
+            break
+          case Token.Type.BlockComment: {
+            type = Token.Type.Comment
+            begin = match
+            open = text[0] as keyof typeof Token.Close
+            close = Token.Close[open]
+            depth = 1
+            for (const m of it) {
+              for (let x = 0, t: string; x < length; x++) {
+                t = m[x]
+                if (t != null) {
+                  if (t === '\n') {
+                    col = begin.index! - lineIndex
+                    slice = code.slice(begin.index, m.index!)
+                    yield {
+                      type,
+                      text: slice,
+                      line,
+                      col,
+                      right: col + slice.length,
+                      bottom: line,
+                      index: begin.index!,
+                      length: slice.length,
+                      source
+                    }
+                    begin = m
+
+                    ++line
+                    lineIndex = ++m.index!
+                  }
+                  else if (t === open) depth++
+                  else if (t === close) {
+                    if (!--depth) {
+                      col = begin.index! - lineIndex
+                      slice = code.slice(begin.index, m.index! + 1)
+                      yield {
+                        type,
+                        text: slice,
+                        line,
+                        col,
+                        right: col + slice.length,
+                        bottom: line,
+                        index: begin.index!,
+                        length: slice.length,
+                        source
+                      }
+                      continue outer
+                    }
+                  }
+                  break
+                }
+              }
+            }
+            break
+          }
+          default:
+            col = match.index! - lineIndex
+            yield {
+              type,
+              text,
+              line,
+              col,
+              right: col + text.length,
+              bottom: line,
+              index: match.index!,
+              length: text.length,
+              source
+            }
+        }
+        break
+      }
+    }
+  }
+}
+
+if (import.meta.vitest) {
+  describe('tokenize', () => {
+    it('simple', () => {
+      const source = { code: 'hello world\n123' }
+      const tokens = [...tokenize(source)]
+      expect(tokens.length).toBe(3)
+      expect(tokens[0]).toMatchObject({
+        type: Token.Type.Id,
+        text: 'hello',
+        line: 0,
+        col: 0,
+        right: 5,
+        bottom: 0,
+        index: 0,
+        length: 5,
+        source,
+      })
+      expect(tokens[1]).toMatchObject({
+        type: Token.Type.Id,
+        text: 'world',
+        line: 0,
+        col: 6,
+        right: 11,
+        bottom: 0,
+        index: 6,
+        length: 5,
+        source,
+      })
+      expect(tokens[2]).toMatchObject({
+        type: Token.Type.Number,
+        text: '123',
+        line: 1,
+        col: 0,
+        right: 3,
+        bottom: 1,
+        index: 12,
+        length: 3,
+        source,
+      })
+    })
+
+    it('multiline', () => {
+      const source = { code: '[; hello world\n123 ]' }
+      const tokens = [...tokenize(source)]
+      expect(tokens.length).toBe(2)
+      expect(tokens[0]).toMatchObject({
+        type: Token.Type.Comment,
+        text: '[; hello world',
+        line: 0,
+        col: 0,
+        right: 14,
+        bottom: 0,
+        index: 0,
+        length: 14,
+        source,
+      })
+      expect(tokens[1]).toMatchObject({
+        type: Token.Type.Comment,
+        text: '123 ]',
+        line: 1,
+        col: 0,
+        right: 5,
+        bottom: 1,
+        index: 15,
+        length: 5,
+        source,
+      })
+    })
+  })
+}
diff --git a/src/pages/EditorDemo.tsx b/src/pages/EditorDemo.tsx
index b3ae62f..9b85a38 100644
--- a/src/pages/EditorDemo.tsx
+++ b/src/pages/EditorDemo.tsx
@@ -1,5 +1,7 @@
 import { Sigui, type Signal } from 'sigui'
+import { Token, tokenize } from '~/src/lang/tokenize.ts'
 import { screen } from '~/src/screen.ts'
+import { theme } from '~/src/theme.ts'
 import { Editor, type WordWrapProcessor } from '~/src/ui/Editor.tsx'
 import { H2 } from '~/src/ui/Heading.tsx'
 
@@ -27,16 +29,35 @@ export function EditorDemo({ width, height }: {
     width,
     height,
     code: `\
-[sin 300] [tri 444] [sqr 555] \
+[sin 300] [tri 444] [sqr 555] @ \
 [lp 300 .8] [dly 16 1 /] [pp 3 4 5] \
-[ar 10 50]
+[ar 10 50] *
 `,
   })
 
+  const colors: Partial<Record<Token.Type, { fill: string, stroke: string }>> = {
+    [Token.Type.Native]: { fill: theme.colors.sky[500], stroke: theme.colors.sky[500] },
+    [Token.Type.String]: { fill: theme.colors.fuchsia[700], stroke: theme.colors.fuchsia[700] },
+    [Token.Type.Keyword]: { fill: theme.colors.orange[500], stroke: theme.colors.orange[500] },
+    [Token.Type.Op]: { fill: theme.colors.sky[500], stroke: theme.colors.sky[500] },
+    [Token.Type.Id]: { fill: theme.colors.yellow[500], stroke: theme.colors.yellow[500] },
+    [Token.Type.Number]: { fill: theme.colors.green[500], stroke: theme.colors.green[500] },
+    [Token.Type.BlockComment]: { fill: theme.colors.neutral[700], stroke: theme.colors.neutral[700] },
+    [Token.Type.Comment]: { fill: theme.colors.neutral[700], stroke: theme.colors.neutral[700] },
+    [Token.Type.Any]: { fill: theme.colors.neutral[500], stroke: theme.colors.neutral[500] },
+  }
+
+  function colorize(token: Token<Token.Type>) {
+    const { fill = '#888', stroke = '#888' } = colors[token.type] ?? {}
+    return { fill, stroke }
+  }
+
   const editor = <Editor
     width={info.$.width}
     height={info.$.height}
     code={info.$.code}
+    colorize={colorize}
+    tokenize={tokenize}
     wordWrapProcessor={wordWrapProcessor}
   /> as Element & { focus(): void }
 
diff --git a/src/theme.ts b/src/theme.ts
new file mode 100644
index 0000000..84c997f
--- /dev/null
+++ b/src/theme.ts
@@ -0,0 +1,4 @@
+import resolveConfig from 'tailwindcss/resolveConfig'
+import tailwindConfig from '../tailwind.config.js'
+
+export const { theme } = resolveConfig(tailwindConfig)
diff --git a/src/ui/Editor.tsx b/src/ui/Editor.tsx
index dc3307a..ea31d45 100644
--- a/src/ui/Editor.tsx
+++ b/src/ui/Editor.tsx
@@ -1,23 +1,36 @@
 import { Sigui, type Signal } from 'sigui'
 import { dom, isMobile } from 'utils'
+import type { Source, Token } from '~/src/lang/tokenize.ts'
 import { Buffer, Caret, Dims, Kbd, Misc, View, type WordWrapProcessor } from '~/src/ui/editor/index.ts'
 
 export * from '~/src/ui/editor/index.ts'
 
-export function Editor({ code, width, height, wordWrapProcessor }: {
+export function Editor({ code, width, height, colorize, tokenize, wordWrapProcessor }: {
   code: Signal<string>
   width: Signal<number>
   height: Signal<number>
+  colorize: (token: Token) => { fill: string, stroke: string }
+  tokenize: (source: Source) => Generator<Token, void, unknown>
   wordWrapProcessor: WordWrapProcessor
 }) {
   using $ = Sigui()
 
   const misc = Misc()
-  const buffer = Buffer({ code, wordWrapProcessor })
+  const buffer = Buffer({ code, tokenize, wordWrapProcessor })
   const dims = Dims()
   const caret = Caret({ buffer, dims, misc })
   const kbd = Kbd({ buffer, caret })
-  const view = View({ width, height, dims, caret, buffer })
+  const view = View({ width, height, dims, caret, buffer, colorize })
+
+  // focus/blur
+  function focus() {
+    kbd.focus({ preventScroll: true })
+  }
+
+  function preventAndFocus(ev: Event) {
+    ev.preventDefault()
+    focus()
+  }
 
   function onFocus() {
     misc.info.isFocus = caret.info.isBlink = true
@@ -27,29 +40,20 @@ export function Editor({ code, width, height, wordWrapProcessor }: {
     misc.info.isFocus = caret.info.isVisible = caret.info.isBlink = false
   }
 
-  // focus/blur
   $.fx(() => [
     dom.on(kbd, 'focus', onFocus),
     dom.on(kbd, 'blur', onBlur),
     dom.on(window, 'blur', onBlur),
   ])
 
-  function focus() {
-    kbd.focus({ preventScroll: true })
-  }
-  requestAnimationFrame(focus)
-
-  function preventAndFocus(ev: Event) {
-    ev.preventDefault()
-    focus()
-  }
-
   $.fx(() => [
     dom.on(window, 'focus', () => focus()),
     dom.on(view.el, 'pointerup', preventAndFocus),
     isMobile() && dom.on(view.el, 'touchend', preventAndFocus),
   ])
 
+  requestAnimationFrame(focus)
+
   const el = <div>
     {view.el}
     {kbd}
diff --git a/src/ui/editor/buffer.test.ts b/src/ui/editor/buffer.test.ts
index 4ac0d16..788c1fc 100644
--- a/src/ui/editor/buffer.test.ts
+++ b/src/ui/editor/buffer.test.ts
@@ -1,9 +1,10 @@
 import { $ } from 'sigui'
+import { tokenize } from '~/src/lang/tokenize.ts'
 import { Buffer } from '~/src/ui/editor/buffer.ts'
 
 function B(code: string, maxWidth: number) {
   const info = $({ code })
-  const b = Buffer({ code: info.$.code })
+  const b = Buffer({ code: info.$.code, tokenize })
   b.info.maxColumns = maxWidth
   return b
 }
diff --git a/src/ui/editor/buffer.ts b/src/ui/editor/buffer.ts
index 14f24e4..a9cac9f 100644
--- a/src/ui/editor/buffer.ts
+++ b/src/ui/editor/buffer.ts
@@ -1,4 +1,5 @@
 import { Sigui, type Signal } from 'sigui'
+import type { Source, Token } from '~/src/lang/tokenize.ts'
 import { parseWords, WORD, type Point } from '~/src/ui/editor/util/index.ts'
 
 export interface Line {
@@ -14,15 +15,25 @@ export type Buffer = ReturnType<typeof Buffer>
 
 function identity(x: any) { return x }
 
-export function Buffer({ code, wordWrapProcessor = { pre: identity, post: identity } }: {
+export function Buffer({ code, tokenize, wordWrapProcessor = { pre: identity, post: identity } }: {
   code: Signal<string>,
+  tokenize: (source: Source) => Generator<Token, void, unknown>
   wordWrapProcessor?: WordWrapProcessor
 }) {
   using $ = Sigui()
 
   const info = $({
-    code,
     maxColumns: 10,
+    code,
+    get codeVisual() {
+      return info.linesVisual.map(line => line.text).join('\n')
+    },
+    get source() {
+      return { code: info.codeVisual }
+    },
+    get tokens() {
+      return [...tokenize(info.source)]
+    },
     get words() {
       return parseWords(WORD, info.code)
     },
diff --git a/src/ui/editor/view.tsx b/src/ui/editor/view.tsx
index faf173d..48c881b 100644
--- a/src/ui/editor/view.tsx
+++ b/src/ui/editor/view.tsx
@@ -1,17 +1,19 @@
 import { Sigui, type Signal } from 'sigui'
 import { drawText } from 'utils'
+import type { Token } from '~/src/lang/tokenize.ts'
 import { screen } from '~/src/screen.ts'
 import { Canvas } from '~/src/ui/Canvas.tsx'
 import { Buffer } from '~/src/ui/editor/buffer.ts'
 import { Caret } from '~/src/ui/editor/caret.ts'
 import { Dims } from '~/src/ui/editor/dims.ts'
 
-export function View({ width, height, dims, caret, buffer }: {
+export function View({ width, height, dims, caret, buffer, colorize }: {
   width: Signal<number>
   height: Signal<number>
   dims: Dims
   caret: Caret
   buffer: Buffer
+  colorize: (token: Token) => { fill: string, stroke: string }
 }) {
   using $ = Sigui()
 
@@ -38,7 +40,7 @@ export function View({ width, height, dims, caret, buffer }: {
 
   // initialize canvas context settings
   $.fx(() => {
-    const { pr, c, width, height } = $.of(info)
+    const { c, pr, width, height } = $.of(info)
     $()
     c.scale(pr, pr)
     c.textBaseline = 'top'
@@ -73,8 +75,16 @@ export function View({ width, height, dims, caret, buffer }: {
     c.fillRect(0, Math.floor(cy * lineHeight), width, lineHeight - 2)
 
     // draw text
-    buffer.info.linesVisual.forEach((line, y) => {
-      drawText(c, { x: 1, y: 1 + y * lineHeight }, line.text, '#888', .025, '#888')
+    buffer.info.tokens.forEach(token => {
+      const p = {
+        x: 1 + token.col * charWidth,
+        y: 1 + token.line * lineHeight
+      }
+      const { fill, stroke } = colorize(token)
+      drawText(c, p,
+        token.text, fill,
+        .025, stroke
+      )
     })
 
     // draw caret

From 3eeb41dd63b8499b87b4314c90438b94218fdf43 Mon Sep 17 00:00:00 2001
From: stagas <gstagas@gmail.com>
Date: Thu, 10 Oct 2024 17:07:58 +0300
Subject: [PATCH 07/25] feat: webgl

---
 README.md                        |   2 +-
 as/assembly/gfx/draw.ts          | 598 +++++++++++++++++++++++++++++++
 as/assembly/gfx/env.ts           |   3 +
 as/assembly/gfx/index.ts         |  47 +++
 as/assembly/gfx/sketch-shared.ts | 143 ++++++++
 as/assembly/gfx/sketch.ts        |  71 ++++
 as/assembly/gfx/util.ts          |  16 +
 as/assembly/types.ts             |   1 +
 asconfig-gfx.json                |  35 ++
 index.html                       |  28 +-
 package.json                     |   1 +
 src/as/gfx/anim.ts               |  87 +++++
 src/as/gfx/glsl.ts               |  91 +++++
 src/as/gfx/mesh-info.ts          |  57 +++
 src/as/gfx/shapes.ts             | 464 ++++++++++++++++++++++++
 src/as/gfx/sketch-info.ts        |  87 +++++
 src/as/gfx/sketch.ts             |  36 ++
 src/as/gfx/types.ts              |  71 ++++
 src/as/gfx/wasm-matrix.ts        |  23 ++
 src/as/gfx/wasm.ts               |  33 ++
 src/as/gfx/webgl.ts              |  57 +++
 src/as/init-wasm.ts              | 113 ++++++
 src/as/pkg/wasm.ts               | 110 +-----
 src/comp/Toast.tsx               |   2 +-
 src/pages/App.tsx                |   3 +-
 src/pages/EditorDemo.tsx         |   2 +-
 src/pages/Home.tsx               |   1 +
 src/pages/WebGLDemo.tsx          |  61 ++++
 src/state.ts                     |  66 ++--
 vite.config.ts                   |  10 +
 30 files changed, 2174 insertions(+), 145 deletions(-)
 create mode 100644 as/assembly/gfx/draw.ts
 create mode 100644 as/assembly/gfx/env.ts
 create mode 100644 as/assembly/gfx/index.ts
 create mode 100644 as/assembly/gfx/sketch-shared.ts
 create mode 100644 as/assembly/gfx/sketch.ts
 create mode 100644 as/assembly/gfx/util.ts
 create mode 100644 as/assembly/types.ts
 create mode 100644 asconfig-gfx.json
 create mode 100644 src/as/gfx/anim.ts
 create mode 100644 src/as/gfx/glsl.ts
 create mode 100644 src/as/gfx/mesh-info.ts
 create mode 100644 src/as/gfx/shapes.ts
 create mode 100644 src/as/gfx/sketch-info.ts
 create mode 100644 src/as/gfx/sketch.ts
 create mode 100644 src/as/gfx/types.ts
 create mode 100644 src/as/gfx/wasm-matrix.ts
 create mode 100644 src/as/gfx/wasm.ts
 create mode 100644 src/as/gfx/webgl.ts
 create mode 100644 src/as/init-wasm.ts
 create mode 100644 src/pages/WebGLDemo.tsx

diff --git a/README.md b/README.md
index 39adac8..6415a00 100644
--- a/README.md
+++ b/README.md
@@ -64,7 +64,7 @@
 - [x] AssemblyScript
 - [x] WebAudio
   - [x] Wasm AudioWorklet
-- [ ] WebGL
+- [x] WebGL
 - [x] WebRTC
 - [x] QRCode
 - [ ] Maps
diff --git a/as/assembly/gfx/draw.ts b/as/assembly/gfx/draw.ts
new file mode 100644
index 0000000..63b8672
--- /dev/null
+++ b/as/assembly/gfx/draw.ts
@@ -0,0 +1,598 @@
+import { logf, logf2, logf3, logf4, logf6, logi } from '../env'
+import { Sketch } from './sketch'
+import { Box, Line, Matrix, Notes, Shape, ShapeOpts, WAVE_MIPMAPS, Wave, Note, Params, ParamValue } from './sketch-shared'
+import { lineIntersectsRect } from './util'
+
+const MAX_ZOOM: f32 = 0.5
+const BASE_SAMPLES: f32 = 48000
+const NUM_SAMPLES: f32 = BASE_SAMPLES / MAX_ZOOM
+const WAVE_MIPMAPS_THRESHOLD = 3000
+const BLACK_KEYS = [1, 3, 6, 8, 10]
+
+const enum WaveMode {
+  Scaled,
+  Normal,
+}
+
+export function draw(
+  sketch$: usize,
+  ptrs$: usize,
+  matrix$: usize,
+  width: f32,
+  height: f32,
+): void {
+  const sketch = changetype<Sketch>(sketch$)
+
+  const m = changetype<Matrix>(matrix$)
+  const ma: f64 = m.a
+  const md: f64 = m.d
+  const me: f64 = m.e
+  const mf: f64 = m.f
+
+  // shapes
+  let box: Box
+  let line: Line
+  let wave: Wave
+  let notes: Notes
+  let params: Params
+
+  const x_gap: f32 = ma > 5 ? 1 : 0
+
+  let px: f32 = 0
+  let py: f32 = 0
+
+  let ptrs = changetype<StaticArray<usize>>(ptrs$)
+  let ptr: usize
+  let i: i32 = 0
+  while (unchecked(ptr = ptrs[i++])) {
+    const opts = i32(changetype<Shape>(ptr).opts)
+
+    switch (opts & 0b1111_1111) {
+      //
+      // Box
+      //
+      case ShapeOpts.Box: {
+        box = changetype<Box>(ptr)
+
+        const x = f32(box.x * ma + me)
+        const y = f32(box.y * md + mf)
+        const w = f32(box.w * ma - x_gap)
+        let h = f32(box.h * md)
+        if (
+          !(opts & ShapeOpts.NoMargin)
+          && (
+            (!(opts & ShapeOpts.Collapse) || h > 1.5)
+            && h > 1.5
+          )
+        ) {
+          h -= h > 3 ? 1.0 : h > 1.5 ? .5 : 0
+        }
+
+        // check if visible
+        if (x > width
+          || y > height
+          || x + w < 0
+          || y + h < 0
+        ) continue
+
+        if (opts & ShapeOpts.Cols) {
+          const SNAPS: f32 = 16
+          const cols_n = i32(SNAPS - 1)
+          for (let col = 0; col < cols_n; col++) {
+            const col_x = f32(f32((box.w / SNAPS) * f32(col + 1) + box.x) * ma + me)
+            const lw = f32(col % 16 === 15 ? 1.5 : col % 4 === 3 ? 1 : 0.5)
+            sketch.drawLine(
+              col_x, y,
+              col_x, y + h,
+              box.color, box.alpha, lw
+            )
+          }
+
+        }
+        else {
+          sketch.drawBox(
+            x, y, w, h,
+            box.color, box.alpha
+          )
+        }
+
+        continue
+      }
+
+      //
+      // Notes
+      //
+      case ShapeOpts.Notes: {
+        notes = changetype<Notes>(ptr)
+
+        const x = f32(notes.x * ma + me)
+        const y = f32(notes.y * md + mf)
+        const w = f32(notes.w * ma - x_gap)
+        let h = f32(notes.h * md)
+        if (
+          !(opts & ShapeOpts.NoMargin)
+          && (
+            (!(opts & ShapeOpts.Collapse) || h > 1.5)
+            && h > 1.5
+          )
+        ) {
+          h -= h > 3 ? 1.0 : h > 1.5 ? .5 : 0
+        }
+
+        // check if visible
+        if (x > width
+          || y > height
+          || x + w < 0
+          || y + h < 0
+        ) continue
+
+        const notesPtrs = changetype<StaticArray<usize>>(usize(notes.notes$))
+        const isFocused = notes.isFocused
+        const hoveringNote$ = usize(notes.hoveringNote$)
+        let note: Note
+        let note$: usize
+        const min = notes.min
+        const SCALE_X: f32 = 1.0 / 16.0
+        const scale_N = notes.max - min
+
+        if (isFocused) {
+          for (let n = 0; f32(n) <= scale_N; n++) {
+            const note = scale_N - (f32(n)) + min
+            const note_key = note % 12
+            const isBlack = BLACK_KEYS.includes(i32(note_key))
+            if (!isBlack) continue
+
+            let nh = h / (scale_N + 1)
+            const ny = h - nh * ((f32(note) + 1) - min) // y
+            nh -= nh > 3 ? 1.0 : nh > 1.5 ? .5 : 0
+
+            sketch.drawBox(
+              x,
+              y + f32(ny) + 1.0,
+              f32(w - x_gap),
+              f32(nh),
+              0x0, notes.alpha * 0.2
+            )
+          }
+        }
+
+        if (isFocused) {
+          // draw shadows
+
+          let i: i32 = 0
+          while (note$ = unchecked(notesPtrs[i++])) {
+            note = changetype<Note>(note$)
+
+            const n = note.n
+            const time = note.time
+            const length = note.length
+            const vel = note.vel
+
+            const alpha: f32 = isFocused
+              ? hoveringNote$ === note$
+                ? 1
+                : .45 + (.55 * vel)
+              : .2 + (.8 * vel)
+
+            const color: f32 = 0
+
+            const nx = (time * SCALE_X) * ma
+            if (nx >= w) continue
+
+            let nh = h / (scale_N + 1)
+            const ny = h - nh * ((n + 1) - min) // y
+            let nw = (length * SCALE_X) * ma
+            if (nx + nw > w) {
+              nw = w - nx
+            }
+            nh -= nh > 3 ? 1.0 : nh > 1.5 ? .5 : 0
+            nh += f32(.008 * md)
+            sketch.drawBox(
+              x + f32(nx),
+              y + f32(ny) + 1.0,
+              f32(nw - x_gap),
+              f32(nh),
+              color, notes.alpha * alpha
+            )
+          }
+        }
+
+        let i: i32 = 0
+        while (note$ = unchecked(notesPtrs[i++])) {
+          note = changetype<Note>(note$)
+
+          const n = note.n
+          const time = note.time
+          const length = note.length
+          const vel = note.vel
+
+          const alpha: f32 = isFocused
+            ? hoveringNote$ === note$
+              ? 1
+              : .45 + (.55 * vel)
+            : .2 + (.8 * vel)
+
+          const color = hoveringNote$ === note$
+            ? notes.hoverColor
+            : notes.color
+
+          const nx = (time * SCALE_X) * ma
+          if (nx >= w) continue
+
+          let nh = h / (scale_N + 1)
+          const ny = h - nh * ((n + 1) - min) // y
+          let nw = (length * SCALE_X) * ma
+          if (nx + nw > w) {
+            nw = w - nx
+          }
+          nh -= nh > 3 ? 1.0 : nh > 1.5 ? .5 : 0
+          sketch.drawBox(
+            x + f32(nx),
+            y + f32(ny) + 1.0,
+            f32(nw - x_gap),
+            f32(nh),
+            color, notes.alpha * alpha
+          )
+        }
+
+        continue
+      }
+
+      //
+      // Line
+      //
+      case ShapeOpts.Line: {
+        line = changetype<Line>(ptr)
+
+        const hw = line.lw / 2.0
+        const x0 = f32(line.x0 * ma + me - hw)
+        let y0 = f32(line.y0 * md + mf - hw)
+        const x1 = f32(line.x1 * ma + me - hw)
+        let y1 = f32(line.y1 * md + mf - hw)
+
+        if (opts & ShapeOpts.InfY) {
+          y0 = 0
+          y1 = height
+        }
+
+        // check if visible
+        if (!lineIntersectsRect(x0, y0, x1, y1, 0, 0, width, height)) continue
+
+        sketch.drawLine(
+          x0, y0,
+          x1, y1,
+          line.color, line.alpha,
+          line.lw,
+        )
+
+        continue
+      }
+
+      //
+      // Params
+      //
+      case ShapeOpts.Params: {
+        params = changetype<Params>(ptr)
+
+        const x = f32(params.x * ma + me)
+        const y = f32(params.y * md + mf)
+        const w = f32(params.w * ma - x_gap)
+        const h = f32(params.h * md - 1)
+
+        // check if visible
+        if (x > width
+          || y > height
+          || x + w < 0
+          || y + h < 0
+        ) continue
+
+        const paramsPtrs = changetype<StaticArray<usize>>(usize(params.params$))
+        let paramValue: ParamValue
+        let paramValue$: usize
+
+        let x0: f32 = 0
+        let y0: f32 = 0
+        let x1: f32 = 0
+        let y1: f32 = 0
+
+        let lastAmt: f32 = 0
+
+        const hh: f32 = h / 2.0
+        const hhs: f32 = hh * 0.65
+
+        const HAS_SHADOW = opts & ShapeOpts.Shadow
+
+        paramValue$ = unchecked(paramsPtrs[0])
+        if (paramValue$) {
+          paramValue = changetype<ParamValue>(paramValue$)
+
+          const time = paramValue.time
+          const length = paramValue.length
+          const slope = paramValue.slope
+          const amt = paramValue.amt
+
+          x0 = 0
+          x1 = x + f32(time * ma)
+          y1 = y + amt * hhs + hhs
+          y0 = y1
+
+          if (HAS_SHADOW) sketch.drawLine(
+            x0 + 1, y0 + 1,
+            x1 + 1, y1 + 1,
+            0x0, 1.0,
+            1.0
+          )
+
+          sketch.drawLine(
+            x0, y0,
+            x1, y1,
+            params.color, params.alpha,
+            1.0
+          )
+
+          lastAmt = amt
+        }
+
+        let i: i32 = 0
+        while (paramValue$ = unchecked(paramsPtrs[i++])) {
+          paramValue = changetype<ParamValue>(paramValue$)
+
+          const time = paramValue.time
+          const length = paramValue.length
+          const slope = paramValue.slope
+          const amt = paramValue.amt
+
+          x0 = x + f32(time * ma)
+          y0 = y + lastAmt * hhs + hhs
+          x1 = x + f32((time + length) * ma)
+          y1 = y + amt * hhs + hhs
+
+          if (HAS_SHADOW) sketch.drawLine(
+            x0 + 1, y0 + 1,
+            x1 + 1, y1 + 1,
+            0x0, 1.0,
+            1.0
+          )
+          sketch.drawLine(
+            x0, y0,
+            x1, y1,
+            params.color, params.alpha,
+            1.0
+          )
+
+          lastAmt = amt
+        }
+
+        if (HAS_SHADOW) sketch.drawLine(
+          x1 + 1, y1 + 1,
+          width + 1, y1 + 1,
+          0x0, 1.0,
+          1.0
+        )
+        sketch.drawLine(
+          x1, y1,
+          width, y1,
+          params.color, params.alpha,
+          1.0
+        )
+
+        continue
+      }
+
+      //
+      // Wave
+      //
+      case ShapeOpts.Wave: {
+        wave = changetype<Wave>(ptr)
+
+        const x = f32(wave.x * ma + me)
+        const y = f32(wave.y * md + mf)
+        const w = f32(wave.w * ma - x_gap)
+        const h = f32(wave.h * md - 1)
+
+        // check if visible
+        if (x > width
+          || y > height
+          || x + w < 0
+          || y + h < 0
+        ) continue
+
+        //
+        // sample coeff for zoom level
+        //
+        let sample_coeff: f64 = f64((NUM_SAMPLES / wave.coeff / 2.0) / ma)
+
+        //
+        // setup wave pointers
+        //
+        let p = i32(wave.floats$)
+        let p_index: i32 = 0
+        let n: f64 = 0
+        let n_len = f64(wave.len)
+
+        //
+        // determine right edge
+        //
+        let right = x + w
+
+        //
+        // determine left edge (cx)
+        //
+        let cx: f64 = f64(x)
+        let ox: f32 = 0
+        // if left edge is offscreen
+        if (cx < 0) {
+          ox = -x
+          cx = 0
+        }
+
+        //
+        // determine width (cw)
+        //
+        let cw: f32 = w
+        let ow: f32 = 0
+        // if right edge if offscreen
+        if (right > width) {
+          // logf(444)
+          ow = right - width
+          cw = f32(width - cx)
+          right = width
+        }
+        // or if left edge is offscreen
+        else if (x < 0) {
+          cw -= ox
+        }
+
+        let x_step: f64 = f64(ma / NUM_SAMPLES)
+        let n_step: f64 = 1.0
+        let mul: f64 = 1.0
+        let lw: f32 = 1.1
+
+        let waveMode: WaveMode = WaveMode.Scaled
+
+        for (let i = 0; i < WAVE_MIPMAPS; i++) {
+          const threshold = WAVE_MIPMAPS_THRESHOLD / (2 ** i)
+          if (ma < threshold) {
+            waveMode = WaveMode.Normal
+            p_index += i32(Math.floor(n_len))
+            n_len = Math.floor(n_len / 2.0)
+            mul *= 2.0
+            x_step *= 2.0
+            lw = 1.1 - (0.8 * (1 -
+              (f32(ma / WAVE_MIPMAPS_THRESHOLD) ** .35)
+            ))
+          }
+          else {
+            break
+          }
+        }
+
+        n_step = sample_coeff / (mul / x_step)
+
+        p += p_index << 2
+
+        const hh: f32 = h / 2
+        const yh = y + hh
+
+        // advance the pointer if left edge is offscreen
+        if (ox) {
+          n += Math.floor(ox / x_step)
+        }
+        n = Math.floor(n)
+
+        let nx = (n * n_step) % n_len
+
+        switch (waveMode) {
+          case WaveMode.Scaled: {
+            let nfrac = nx - Math.floor(nx)
+
+            let x0 = f32(cx)
+            let y0 = yh + readSampleLerp(p, f32(nx), nfrac) * hh
+
+            if (opts & ShapeOpts.Join) {
+              sketch.drawLine(
+                px, py,
+                x0, y0,
+                wave.color, wave.alpha,
+                lw
+              )
+            }
+
+            do {
+              cx += x_step
+              nx += n_step
+              if (nx >= n_len) nx -= n_len
+
+              nfrac = nx - Math.floor(nx)
+
+              const x1 = f32(cx)
+              const y1 = yh + readSampleLerp(p, f32(nx), nfrac) * hh
+
+              sketch.drawLine(
+                x0, y0,
+                x1, y1,
+                wave.color, wave.alpha,
+                lw
+              )
+
+              x0 = x1
+              y0 = y1
+            } while (cx < right)
+
+            px = x0
+            py = y0
+
+            break
+          }
+
+          case WaveMode.Normal: {
+            let s = f32.load(p + (i32(nx) << 2))
+
+            // move to v0
+            let x0 = f32(cx)
+            let y0 = yh + s * hh
+
+            if (opts & ShapeOpts.Join) {
+              sketch.drawLine(
+                px, py,
+                x0, y0,
+                wave.color, wave.alpha,
+                lw
+              )
+            }
+
+            do {
+              cx += x_step
+              nx += n_step
+              if (nx >= n_len) nx -= n_len
+
+              const x1 = f32(cx)
+              const y1 = yh + f32.load(p + (i32(nx) << 2)) * hh
+
+              sketch.drawLine(
+                x0, y0,
+                x1, y1,
+                wave.color, wave.alpha,
+                lw
+              )
+
+              x0 = x1
+              y0 = y1
+            } while (cx < right)
+
+            px = x0
+            py = y0
+
+            break
+          }
+        }
+
+        continue
+      }
+
+      // default: {
+      //   logf(66666)
+      // }
+
+    } // end switch
+  } // end for
+}
+
+export function flushSketch(sketch$: usize): void {
+  const sketch = changetype<Sketch>(sketch$)
+  if (sketch.ptr) {
+    sketch.flush()
+  }
+}
+
+//
+// helpers
+//
+
+// @ts-ignore
+@inline
+function readSampleLerp(p: i32, nx: f32, frac: f64): f32 {
+  const s0 = f32.load(p + (i32(nx) << 2))
+  const s1 = f32.load(p + (i32(nx + 1) << 2))
+  return f32(f64(s0) + f64(s1 - s0) * frac)
+}
diff --git a/as/assembly/gfx/env.ts b/as/assembly/gfx/env.ts
new file mode 100644
index 0000000..f2f2fee
--- /dev/null
+++ b/as/assembly/gfx/env.ts
@@ -0,0 +1,3 @@
+// @ts-ignore
+@external('env', 'flushSketch')
+export declare function flushSketch(count: i32): void
diff --git a/as/assembly/gfx/index.ts b/as/assembly/gfx/index.ts
new file mode 100644
index 0000000..a3dad99
--- /dev/null
+++ b/as/assembly/gfx/index.ts
@@ -0,0 +1,47 @@
+import { Sketch } from './sketch'
+import { Box, Line, Matrix, Note, Notes, ParamValue, Params, Wave } from './sketch-shared'
+
+export * from '../alloc'
+export * from './draw'
+
+export function createSketch(
+  a_vert$: usize,
+  a_style$: usize,
+): Sketch {
+  return new Sketch(
+    a_vert$,
+    a_style$,
+  )
+}
+
+export function createBox(): usize {
+  return changetype<usize>(new Box())
+}
+
+export function createLine(): usize {
+  return changetype<usize>(new Line())
+}
+
+export function createWave(): usize {
+  return changetype<usize>(new Wave())
+}
+
+export function createNotes(): usize {
+  return changetype<usize>(new Notes())
+}
+
+export function createNote(): usize {
+  return changetype<usize>(new Note())
+}
+
+export function createParams(): usize {
+  return changetype<usize>(new Params())
+}
+
+export function createParamValue(): usize {
+  return changetype<usize>(new ParamValue())
+}
+
+export function createMatrix(): usize {
+  return changetype<usize>(new Matrix())
+}
diff --git a/as/assembly/gfx/sketch-shared.ts b/as/assembly/gfx/sketch-shared.ts
new file mode 100644
index 0000000..be13ad4
--- /dev/null
+++ b/as/assembly/gfx/sketch-shared.ts
@@ -0,0 +1,143 @@
+const PAGE_BYTES = 1024
+export const MAX_BYTES = PAGE_BYTES * 32
+export const MAX_GL_INSTANCES = MAX_BYTES >> 2
+
+export enum VertOpts {
+  Box /* */ = 0b001,
+  Line /**/ = 0b010,
+}
+
+export enum ShapeOpts {
+  // kind
+  Box /*      */ = 0b0000_0000_0000_0001,
+  Line /*     */ = 0b0000_0000_0000_0010,
+  Wave /*     */ = 0b0000_0000_0000_0100,
+  Notes /*    */ = 0b0000_0000_0000_1000,
+  Params /*   */ = 0b0000_0000_0001_0000,
+  // flags
+  Collapse /* */ = 0b0000_0001_0000_0000,
+  NoMargin /* */ = 0b0000_0010_0000_0000,
+  Join /*     */ = 0b0000_0100_0000_0000,
+  Cols /*     */ = 0b0000_1000_0000_0000,
+  InfY /*     */ = 0b0001_0000_0000_0000,
+  Shadow /*   */ = 0b0010_0000_0000_0000,
+}
+
+export const WAVE_MIPMAPS = 13
+
+@unmanaged
+export class Shape {
+  opts: f32 = f32(ShapeOpts.Box)
+}
+
+@unmanaged
+export class Box {
+  opts: f32 = f32(ShapeOpts.Box)
+
+  x: f32 = 0
+  y: f32 = 0
+  w: f32 = 0
+  h: f32 = 0
+
+  color: f32 = 0x0
+  alpha: f32 = 1.0
+}
+
+@unmanaged
+export class Notes {
+  opts: f32 = f32(ShapeOpts.Notes)
+
+  x: f32 = 0
+  y: f32 = 0
+  w: f32 = 0
+  h: f32 = 0
+
+  color: f32 = 0x0
+  alpha: f32 = 1.0
+
+  isFocused: f32 = 0
+  notes$: f32 = 0
+  hoveringNote$: f32 = 0
+  hoverColor: f32 = 0
+
+  min: f32 = 0
+  max: f32 = 0
+}
+
+@unmanaged
+export class Note {
+  n: f32 = 0
+  time: f32 = 0
+  length: f32 = 0
+  vel: f32 = 0
+}
+
+@unmanaged
+export class Params {
+  opts: f32 = f32(ShapeOpts.Params)
+
+  x: f32 = 0
+  y: f32 = 0
+  w: f32 = 0
+  h: f32 = 0
+
+  color: f32 = 0x0
+  alpha: f32 = 1.0
+
+  params$: f32 = 0
+  hoveringParam$: f32 = 0
+  hoverColor: f32 = 0
+}
+
+@unmanaged
+export class ParamValue {
+  time: f32 = 0
+  length: f32 = 0
+  slope: f32 = 0
+  amt: f32 = 0
+}
+
+@unmanaged
+export class Line {
+  opts: f32 = f32(ShapeOpts.Line)
+
+  x0: f32 = 0
+  y0: f32 = 0
+
+  x1: f32 = 0
+  y1: f32 = 0
+
+  color: f32 = 0x0
+  alpha: f32 = 1.0
+  lw: f32 = 1
+}
+
+@unmanaged
+export class Wave {
+  opts: f32 = f32(ShapeOpts.Wave)
+
+  x: f32 = 0
+  y: f32 = 0
+  w: f32 = 0
+  h: f32 = 0
+
+  color: f32 = 0x0
+  alpha: f32 = 1.0
+  lw: f32 = 1
+
+  floats$: f32 = 0
+  len: f32 = 0
+  offset: f32 = 0
+  coeff: f32 = 1
+}
+
+@unmanaged
+export class Matrix {
+  constructor() { }
+  a: f64 = 0
+  b: f64 = 0
+  c: f64 = 0
+  d: f64 = 0
+  e: f64 = 0
+  f: f64 = 0
+}
diff --git a/as/assembly/gfx/sketch.ts b/as/assembly/gfx/sketch.ts
new file mode 100644
index 0000000..81bc48b
--- /dev/null
+++ b/as/assembly/gfx/sketch.ts
@@ -0,0 +1,71 @@
+import { Floats } from '../types'
+import { flushSketch } from './env'
+import { MAX_GL_INSTANCES, VertOpts } from './sketch-shared'
+
+/**
+ * Sketch holds the data that is sent to WebGL.
+ */
+export class Sketch {
+  ptr: u32 = 0
+  a_vert: Floats
+  a_style: Floats
+  constructor(
+    public a_vert$: usize,
+    public a_style$: usize,
+  ) {
+    this.a_vert = changetype<Floats>(a_vert$)
+    this.a_style = changetype<Floats>(a_style$)
+  }
+  @inline
+  flush(): void {
+    flushSketch(this.ptr)
+    this.ptr = 0
+  }
+  @inline
+  advance(): void {
+    if (++this.ptr === MAX_GL_INSTANCES) {
+      this.flush()
+    }
+  }
+  @inline
+  drawBox(
+    x: f32, y: f32, w: f32, h: f32,
+    color: f32,
+    alpha: f32,
+  ): void {
+    const ptr = this.ptr
+    const ptr4 = (ptr * 4) << 2
+    store4(this.a_vert$ + ptr4, x, y, w, h)
+    store4(this.a_style$ + ptr4, color, alpha, f32(VertOpts.Box), 1.0)
+    this.advance()
+  }
+  @inline
+  drawLine(
+    x0: f32, y0: f32,
+    x1: f32, y1: f32,
+    color: f32,
+    alpha: f32,
+    lineWidth: f32
+  ): void {
+    const ptr = this.ptr
+    const ptr4 = (ptr * 4) << 2
+    store4(this.a_vert$ + ptr4, x0, y0, x1, y1)
+    store4(this.a_style$ + ptr4, color, alpha, f32(VertOpts.Line), lineWidth)
+    this.advance()
+  }
+}
+
+// @ts-ignore
+@inline
+function store4(ptr: usize, x: f32, y: f32, z: f32, w: f32): void {
+  const v = f32x4(x, y, z, w)
+  v128.store(ptr, v)
+}
+
+// @ts-ignore
+@inline
+function store2(ptr: usize, x: f32, y: f32): void {
+  f32.store(ptr, x)
+  f32.store(ptr, y, 4)
+}
+
diff --git a/as/assembly/gfx/util.ts b/as/assembly/gfx/util.ts
new file mode 100644
index 0000000..a0f659b
--- /dev/null
+++ b/as/assembly/gfx/util.ts
@@ -0,0 +1,16 @@
+
+export function lineIntersectsRect(
+  x0: f32, y0: f32, x1: f32, y1: f32,
+  rectX: f32, rectY: f32, rectWidth: f32, rectHeight: f32
+): boolean {
+  const minX: f32 = Mathf.min(x0, x1)
+  const minY: f32 = Mathf.min(y0, y1)
+  const maxX: f32 = Mathf.max(x0, x1)
+  const maxY: f32 = Mathf.max(y0, y1)
+
+  if (maxX < rectX || minX > rectX + rectWidth || maxY < rectY || minY > rectY + rectHeight) {
+    return false
+  }
+
+  return true
+}
diff --git a/as/assembly/types.ts b/as/assembly/types.ts
new file mode 100644
index 0000000..edb9a2b
--- /dev/null
+++ b/as/assembly/types.ts
@@ -0,0 +1 @@
+export type Floats = StaticArray<f32>
diff --git a/asconfig-gfx.json b/asconfig-gfx.json
new file mode 100644
index 0000000..b923c4c
--- /dev/null
+++ b/asconfig-gfx.json
@@ -0,0 +1,35 @@
+{
+  "targets": {
+    "debug": {
+      "outFile": "./as/build/gfx.wasm",
+      "textFile": "./as/build/gfx.wat",
+      "sourceMap": true,
+      "debug": true,
+      "noAssert": true
+    },
+    "release": {
+      "outFile": "./as/build/gfx.wasm",
+      "textFile": "./as/build/gfx.wat",
+      "sourceMap": true,
+      "debug": false,
+      "optimizeLevel": 0,
+      "shrinkLevel": 0,
+      "converge": false,
+      "noAssert": true
+    }
+  },
+  "options": {
+    "enable": [
+      "simd",
+      "relaxed-simd",
+      "threads"
+    ],
+    "sharedMemory": true,
+    "importMemory": false,
+    "initialMemory": 500,
+    "maximumMemory": 500,
+    "bindings": "raw",
+    "runtime": "incremental",
+    "exportRuntime": true
+  }
+}
diff --git a/index.html b/index.html
index 2e558eb..64b9c9e 100644
--- a/index.html
+++ b/index.html
@@ -1,21 +1,31 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
   <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0, interactive-widget=resizes-content">
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0, interactive-widget=resizes-content"
+    />
 
-    <link rel="icon" href="/favicon.ico" sizes="48x48">
-    <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">
-    <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">
+    <link rel="icon" href="/favicon.ico" sizes="48x48" />
+    <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
 
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Fustat:wght@200..800&family=IBM+Plex+Mono&display=block" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Fustat:wght@200..800&family=IBM+Plex+Mono&display=block"
+      rel="stylesheet"
+    />
 
     <link rel="stylesheet" href="/style.css" />
     <title>Vasi</title>
   </head>
   <body>
-    <span style="font-family:'IBM Plex Mono'"></span>
+    <script type="module">
+      // KEEP: required for AssemblyScript interop.
+      globalThis.unmanaged = () => {};
+    </script>
+    <span style="font-family: 'IBM Plex Mono'"></span>
     <div id="container"></div>
     <script src="./src/client.tsx" type="module"></script>
     <script src="./lib/watcher.ts" type="module"></script>
diff --git a/package.json b/package.json
index 2075f01..84bead5 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,7 @@
     "@types/pg": "^8.11.10",
     "dotenv": "^16.4.5",
     "easygenqr": "^1.3.0",
+    "gl-util": "github:stagas/gl-util",
     "lucide": "^0.446.0",
     "pg": "^8.13.0",
     "sigui": "github:stagas/sigui",
diff --git a/src/as/gfx/anim.ts b/src/as/gfx/anim.ts
new file mode 100644
index 0000000..7870441
--- /dev/null
+++ b/src/as/gfx/anim.ts
@@ -0,0 +1,87 @@
+import { Sigui } from 'sigui'
+import { state } from '~/src/state.ts'
+
+const DEBUG = false //true
+
+export enum AnimMode {
+  Auto = 'auto',
+  Started = 'started',
+  Paused = 'paused',
+}
+
+const Modes = Object.values(AnimMode)
+
+export type Anim = ReturnType<typeof Anim>
+
+export function Anim() {
+  DEBUG && console.log('[anim] create')
+  using $ = Sigui()
+
+  const info = $({
+    isRunning: false,
+    mode: state.$.animMode,
+    epoch: 0,
+  })
+
+  const ticks = new Set<() => boolean | void>()
+
+  let lastEpoch = -1 // cause initial draw to happen
+  let animFrame: any
+
+  const tick = $.fn(function tick() {
+    DEBUG && console.log('[anim] tick', info.epoch)
+
+    if (info.epoch === lastEpoch && info.mode === AnimMode.Auto) {
+      info.isRunning = false
+      DEBUG && console.log('[anim] exit')
+      return
+    }
+
+    lastEpoch = info.epoch
+
+    for (const tick of ticks) {
+      if (tick()) info.epoch++
+    }
+
+    animFrame = requestAnimationFrame(tick)
+  })
+
+  function cycle() {
+    info.mode = Modes[
+      (Modes.indexOf(info.mode) + 1) % Modes.length
+    ]
+  }
+
+  function stop() {
+    cancelAnimationFrame(animFrame)
+    info.isRunning = false
+  }
+
+  function start() {
+    if (info.isRunning) return
+    stop()
+    info.isRunning = true
+    animFrame = requestAnimationFrame(tick)
+  }
+
+  $.fx(() => {
+    const { epoch, mode } = info
+    $()
+    DEBUG && console.log('[anim]', mode, epoch)
+    if (mode === AnimMode.Paused) {
+      stop()
+    }
+    else {
+      start()
+    }
+  })
+
+  $.fx(() => () => {
+    DEBUG && console.log('[anim] dispose')
+    stop()
+  })
+
+  state.animCycle = cycle
+
+  return { info, ticks, cycle }
+}
diff --git a/src/as/gfx/glsl.ts b/src/as/gfx/glsl.ts
new file mode 100644
index 0000000..1f6ab8f
--- /dev/null
+++ b/src/as/gfx/glsl.ts
@@ -0,0 +1,91 @@
+import { VertOpts } from '~/as/assembly/gfx/sketch-shared.ts'
+
+const hasBits = (varname: string, ...bits: number[]) =>
+  /*glsl*/`(int(${varname}) & (${bits.join(' | ')})) != 0`
+
+export const vertex = /*glsl*/`
+#version 300 es
+precision highp float;
+
+in float a_quad;
+in vec4 a_vert;
+in vec4 a_style;
+
+uniform float u_pr;
+uniform vec2 u_screen;
+
+out float v_opts;
+out vec2 v_uv;
+out vec2 v_size;
+out vec2 v_color;
+
+vec2 perp(vec2 v) {
+  return vec2(-v.y, v.x);
+}
+
+void main() {
+  vec2 a_color = a_style.xy;
+  float a_opts = a_style.z;
+  float a_lineWidth = a_style.w;
+
+  vec2 pos = vec2(0.,0.);
+
+  vec2 quad = vec2(
+      mod(a_quad,  2.0),
+    floor(a_quad / 2.0)
+  );
+
+  if (${hasBits('a_opts', VertOpts.Line)}) {
+    vec2 a = a_vert.xy;
+    vec2 b = a_vert.zw;
+    vec2 v = b - a;
+
+    float mag = length(v);
+    float mag1 = 1.0 / mag;
+    vec2 n = perp(v) * mag1;
+
+    float lw = a_lineWidth;
+    float lwh = lw * 0.5;
+
+    mat3 transform = mat3(
+      v.x,             v.y,             0.0,
+      n.x * lw,        n.y * lw,        0.0,
+      a.x - n.x * lwh, a.y - n.y * lwh, 1.0
+    );
+
+    pos = (transform * vec3(quad, 1.0)).xy * u_pr;
+  }
+  else {
+    pos = (a_vert.xy + a_vert.zw * quad) * u_pr;
+  }
+
+  pos /= u_screen * 0.5;
+  pos -= 1.0;
+  pos.y *= -1.0;
+  gl_Position = vec4(pos, 0.0, 1.0);
+
+  v_color = a_color;
+}
+`
+
+export const fragment = /*glsl*/`
+#version 300 es
+
+precision highp float;
+
+in vec2 v_color;
+out vec4 fragColor;
+
+vec3 intToRgb(int color) {
+  int r = (color >> 16) & 0xFF;
+  int g = (color >> 8) & 0xFF;
+  int b = color & 0xFF;
+  return vec3(float(r), float(g), float(b)) / 255.0;
+}
+
+void main() {
+  vec3 color = intToRgb(int(v_color.x)).rgb;
+  float alpha = v_color.y;
+  fragColor = vec4(color, alpha);
+}
+`
diff --git a/src/as/gfx/mesh-info.ts b/src/as/gfx/mesh-info.ts
new file mode 100644
index 0000000..d45fe0d
--- /dev/null
+++ b/src/as/gfx/mesh-info.ts
@@ -0,0 +1,57 @@
+import { GL, GLBuffer, GLBufferTarget } from 'gl-util'
+import { Sigui } from 'sigui'
+
+export interface MeshSetup<
+  U extends Parameters<GL['addVertexAttribs']>[0]
+> {
+  vertex: string | ((gl?: WebGL2RenderingContext) => string)
+  fragment: string | ((gl?: WebGL2RenderingContext) => string)
+  vao?: U
+}
+
+export type MeshInfo = ReturnType<typeof MeshInfo>
+
+export function MeshInfo<
+  T extends GLBufferTarget,
+  U extends Parameters<GL['addVertexAttribs']>[0]
+>(GL: GL, setup: MeshSetup<U>) {
+  using $ = Sigui()
+
+  const { gl } = GL
+
+  const shaders = GL.createShaders(setup)
+  const program = GL.createProgram(shaders)
+
+  let use = () => GL.useProgram(program)
+  let useProgram = () => GL.useProgram(program)
+
+  const info = {
+    program,
+    use,
+    useProgram,
+    vao: undefined as WebGLVertexArrayObject | undefined,
+    attribs: {} as { [K in keyof U]: GLBuffer<ReturnType<U[K][1]>> },
+    get uniforms() {
+      GL.useProgram(program)
+      return GL.uniforms
+    }
+  }
+
+  if (setup.vao) {
+    info.vao = GL.createVertexArray()
+    info.attribs = GL.addVertexAttribs(setup.vao) as any
+    info.use = () => GL.use(program, info.vao!)
+    info.useProgram = () => GL.useProgram(program)
+  }
+
+  $.fx(() => () => {
+    GL.deleteShaders(shaders)
+    gl.deleteProgram(program)
+    if (info.vao) {
+      gl.deleteVertexArray(info.vao)
+      GL.deleteAttribs(info.attribs!)
+    }
+  })
+
+  return info
+}
diff --git a/src/as/gfx/shapes.ts b/src/as/gfx/shapes.ts
new file mode 100644
index 0000000..4385719
--- /dev/null
+++ b/src/as/gfx/shapes.ts
@@ -0,0 +1,464 @@
+import { Sigui } from 'sigui'
+import { PointLike, Struct } from 'utils'
+import { Box, Line, Params, ShapeOpts, Wave, type Notes } from '~/as/assembly/gfx/sketch-shared.ts'
+import type { Matrix, Rect } from '~/src/as/gfx/types.ts'
+import { WasmMatrix } from '~/src/as/gfx/wasm-matrix.ts'
+import wasm from '~/src/as/gfx/wasm.ts'
+
+export namespace Shape {
+  // Box
+  export const Box = Struct({
+    opts: 'f32',
+
+    x: 'f32',
+    y: 'f32',
+    w: 'f32',
+    h: 'f32',
+
+    color: 'f32',
+    alpha: 'f32',
+  })
+
+  export type Box = [
+    opts: ShapeOpts.Box,
+
+    x: number,
+    y: number,
+    w: number,
+    h: number,
+
+    color: number,
+    alpha: number,
+  ]
+
+  // Cols
+  export const Cols = Struct({
+    opts: 'f32',
+
+    x: 'f32',
+    y: 'f32',
+    w: 'f32',
+    h: 'f32',
+
+    color: 'f32',
+    alpha: 'f32',
+  })
+
+  export type Cols = [
+    opts: ShapeOpts.Cols,
+
+    x: number,
+    y: number,
+    w: number,
+    h: number,
+
+    color: number,
+    alpha: number,
+  ]
+
+  // Notes
+  export const Notes = Struct({
+    opts: 'f32',
+
+    x: 'f32',
+    y: 'f32',
+    w: 'f32',
+    h: 'f32',
+
+    color: 'f32',
+    alpha: 'f32',
+
+    isFocused: 'f32',
+    notes$: 'f32',
+    hoveringNote$: 'f32',
+    hoverColor: 'f32',
+
+    min: 'f32',
+    max: 'f32',
+  })
+
+  export type Notes = [
+    opts: ShapeOpts.Notes,
+
+    x: number,
+    y: number,
+    w: number,
+    h: number,
+
+    color: number,
+    alpha: number,
+
+    isFocused: number,
+    notes$: number,
+    hoveringNote$: number,
+    hoverColor: number,
+
+    min: number,
+    max: number,
+  ]
+
+  // Params
+  export const Params = Struct({
+    opts: 'f32',
+
+    x: 'f32',
+    y: 'f32',
+    w: 'f32',
+    h: 'f32',
+
+    color: 'f32',
+    alpha: 'f32',
+
+    params$: 'f32',
+    hoveringParam$: 'f32',
+    hoverColor: 'f32',
+  })
+
+  export type Params = [
+    opts: ShapeOpts.Params,
+
+    x: number,
+    y: number,
+    w: number,
+    h: number,
+
+    color: number,
+    alpha: number,
+
+    params$: number,
+    hoveringParam$: number,
+    hoverColor: number,
+  ]
+
+  // Line
+  export const Line = Struct({
+    opts: 'f32',
+
+    x0: 'f32',
+    y0: 'f32',
+
+    x1: 'f32',
+    y1: 'f32',
+
+    color: 'f32',
+    alpha: 'f32',
+    lw: 'f32',
+  })
+
+  export type Line = [
+    opts: ShapeOpts.Line,
+
+    x0: number,
+    y0: number,
+
+    x1: number,
+    y1: number,
+
+    color: number,
+    alpha: number,
+    lw: number,
+  ]
+
+  // Wave
+  export const Wave = Struct({
+    opts: 'f32',
+
+    x: 'f32',
+    y: 'f32',
+    w: 'f32',
+    h: 'f32',
+
+    color: 'f32',
+    alpha: 'f32',
+    lw: 'f32',
+
+    floats$: 'f32',
+    len: 'f32',
+    offset: 'f32',
+    coeff: 'f32',
+  })
+
+  export type Wave = [
+    opts: ShapeOpts.Wave,
+
+    x: number,
+    y: number,
+    w: number,
+    h: number,
+
+    color: number,
+    alpha: number,
+    lw: number,
+
+    floats$: number,
+    len: number,
+    offset: number,
+    coeff: number,
+  ]
+}
+
+export type Shapes = ReturnType<typeof Shapes>
+
+export function Shapes(view: Rect, matrix: Matrix) {
+  using $ = Sigui()
+
+  type BoxView = ReturnType<typeof Box>
+  type LineView = ReturnType<typeof Line>
+  type WaveView = ReturnType<typeof Wave>
+
+  type ShapeView = BoxView | LineView | WaveView
+
+  const shapes = new Set<ShapeView>()
+  const mat2d = WasmMatrix(view, matrix)
+
+  const info = $({
+    needUpdate: false,
+    ptrs: wasm.alloc(Uint32Array, 1)
+  })
+
+  function clear() {
+    for (const shape of [...shapes]) {
+      shape.remove()
+    }
+  }
+
+  function update() {
+    let ptrs = info.ptrs
+
+    const neededSize = shapes.size + 1 // +1 for ending null
+
+    if (ptrs.length !== neededSize) {
+      ptrs.free()
+      ptrs = info.ptrs = wasm.alloc(Uint32Array, neededSize)
+    }
+
+    let i = 0
+    for (const s of shapes) {
+      if (s.visible) {
+        ptrs[i++] = s.view.ptr
+      }
+    }
+    ptrs[i++] = 0 // null means end
+
+    info.needUpdate = false
+
+    return ptrs
+  }
+
+  function Box(rect: Rect) {
+    using $ = Sigui()
+
+    const view = Shape.Box(wasm.memory.buffer, wasm.createBox()) satisfies Box
+
+    view.opts = ShapeOpts.Box
+    view.alpha = 1.0
+
+    $.fx(() => {
+      const { x, y, w, h } = rect
+      $()
+      view.x = x
+      view.y = y
+      view.w = w
+      view.h = h
+      info.needUpdate = true
+    })
+
+    const shape = $({
+      visible: true,
+      rect,
+      view,
+      remove() {
+        $.dispose()
+        shapes.delete(shape)
+        info.needUpdate = true
+      }
+    })
+
+    $.fx(() => {
+      const { visible } = shape
+      $()
+      info.needUpdate = true
+    })
+
+    shapes.add(shape)
+
+    return shape
+  }
+
+  function Notes(rect: Rect) {
+    using $ = Sigui()
+
+    const view = Shape.Notes(wasm.memory.buffer, wasm.createNotes()) satisfies Notes
+
+    view.opts = ShapeOpts.Notes
+    view.alpha = 1.0
+    view.min = 0
+    view.max = 1
+
+    $.fx(() => {
+      const { x, y, w, h } = rect
+      $()
+      view.x = x
+      view.y = y
+      view.w = w
+      view.h = h
+      info.needUpdate = true
+    })
+
+    const shape = $({
+      visible: true,
+      rect,
+      view,
+      remove() {
+        $.dispose()
+        shapes.delete(shape)
+        info.needUpdate = true
+      }
+    })
+
+    $.fx(() => {
+      const { visible } = shape
+      $()
+      info.needUpdate = true
+    })
+
+    shapes.add(shape)
+
+    return shape
+  }
+
+  function Params(rect: Rect) {
+    using $ = Sigui()
+
+    const view = Shape.Params(wasm.memory.buffer, wasm.createParams()) satisfies Params
+
+    view.opts = ShapeOpts.Params
+    view.alpha = 1.0
+
+    $.fx(() => {
+      const { x, y, w, h } = rect
+      $()
+      view.x = x
+      view.y = y
+      view.w = w
+      view.h = h
+      info.needUpdate = true
+    })
+
+    const shape = $({
+      visible: true,
+      rect,
+      view,
+      remove() {
+        $.dispose()
+        shapes.delete(shape)
+        info.needUpdate = true
+      }
+    })
+
+    $.fx(() => {
+      const { visible } = shape
+      $()
+      info.needUpdate = true
+    })
+
+    shapes.add(shape)
+
+    return shape
+  }
+
+  function Line(p0: PointLike, p1: PointLike) {
+    using $ = Sigui()
+
+    const view = Shape.Line(wasm.memory.buffer, wasm.createLine()) satisfies Line
+
+    view.opts = ShapeOpts.Line
+    view.alpha = 1.0
+    view.lw = 1.0
+
+    $.fx(() => {
+      const { x, y } = p0
+      $()
+      view.x0 = x
+      view.y0 = y
+      info.needUpdate = true
+    })
+
+    $.fx(() => {
+      const { x, y } = p1
+      $()
+      view.x1 = x
+      view.y1 = y
+      info.needUpdate = true
+    })
+
+    const shape = $({
+      visible: true,
+      p0,
+      p1,
+      view,
+      remove() {
+        $.dispose()
+        shapes.delete(shape)
+        info.needUpdate = true
+      }
+    })
+
+    $.fx(() => {
+      const { visible } = shape
+      $()
+      info.needUpdate = true
+    })
+
+    shapes.add(shape)
+
+    return shape
+  }
+
+  function Wave(rect: Rect) {
+    using $ = Sigui()
+
+    const view = Shape.Wave(wasm.memory.buffer, wasm.createWave()) satisfies Wave
+
+    view.opts = ShapeOpts.Wave
+    view.alpha = 1.0
+    view.lw = 1.0
+    view.coeff = 1.0
+
+    $.fx(() => {
+      const { x, y, w, h } = rect
+      $()
+      view.x = x
+      view.y = y
+      view.w = w
+      view.h = h
+      info.needUpdate = true
+    })
+
+    const shape = $({
+      visible: true,
+      rect,
+      view,
+      remove() {
+        $.dispose()
+        shapes.delete(shape)
+        info.needUpdate = true
+      },
+    })
+
+    $.fx(() => {
+      const { visible } = shape
+      $()
+      info.needUpdate = true
+    })
+
+    shapes.add(shape)
+
+    return shape
+  }
+
+  return {
+    info, mat2d, view, shapes, clear, update,
+    Box, Line, Wave, Notes, Params,
+  }
+}
diff --git a/src/as/gfx/sketch-info.ts b/src/as/gfx/sketch-info.ts
new file mode 100644
index 0000000..5fb72ed
--- /dev/null
+++ b/src/as/gfx/sketch-info.ts
@@ -0,0 +1,87 @@
+import { GL } from 'gl-util'
+import { Sigui } from 'sigui'
+import { MAX_GL_INSTANCES } from '~/as/assembly/gfx/sketch-shared.ts'
+import { fragment, vertex } from '~/src/as/gfx/glsl.ts'
+import { MeshInfo } from '~/src/as/gfx/mesh-info.ts'
+import type { Shapes } from '~/src/as/gfx/shapes.ts'
+import { Rect } from '~/src/as/gfx/types.ts'
+import wasm from '~/src/as/gfx/wasm.ts'
+
+const DEBUG = true
+
+export function SketchInfo(GL: GL, view: Rect) {
+  using $ = Sigui()
+
+  const { gl, attrib } = GL
+
+  DEBUG && console.log('[sketch] MAX_GL_INSTANCES:', MAX_GL_INSTANCES)
+
+  const info = MeshInfo(GL, {
+    vertex,
+    fragment,
+    vao: {
+      a_quad: [
+        gl.ARRAY_BUFFER, attrib(1, new Float32Array([0, 1, 2, 3]))
+      ],
+      a_vert: [
+        gl.ARRAY_BUFFER, attrib(4, wasm.alloc(Float32Array, MAX_GL_INSTANCES * 4), 1),
+        gl.DYNAMIC_DRAW
+      ],
+      a_style: [
+        gl.ARRAY_BUFFER, attrib(4, wasm.alloc(Float32Array, MAX_GL_INSTANCES * 4), 1),
+        gl.DYNAMIC_DRAW
+      ],
+    }
+  })
+
+  const {
+    a_vert,
+    a_style,
+  } = info.attribs
+
+  const sketch$ = wasm.createSketch(
+    a_vert.ptr,
+    a_style.ptr,
+  )
+
+  function draw(shapes: Shapes) {
+    if (shapes.info.needUpdate) shapes.update()
+    const { mat2d, view, info: { ptrs } } = shapes
+    return wasm.draw(
+      +sketch$,
+      ptrs.ptr,
+      mat2d.byteOffset,
+      view.w,
+      view.h,
+    )
+  }
+
+  const range = { begin: 0, end: 0, count: 0 }
+
+  function writeGL(count: number) {
+    range.end = range.count = count
+    GL.writeAttribRange(a_vert, range)
+    GL.writeAttribRange(a_style, range)
+    // DEBUG && log('[sketch] write gl begin:', range.begin, 'end:', range.end, 'count:', range.count)
+  }
+
+  function finish() {
+    wasm.flushSketch(+sketch$)
+  }
+
+  $.fx(() => {
+    const { pr, w_pr, h_pr } = view
+    $()
+    info.use()
+    gl.uniform1f(info.uniforms.u_pr, pr)
+    gl.uniform2f(info.uniforms.u_screen, w_pr, h_pr)
+  })
+
+  return {
+    info,
+    range,
+    writeGL,
+    draw,
+    finish,
+  }
+}
diff --git a/src/as/gfx/sketch.ts b/src/as/gfx/sketch.ts
new file mode 100644
index 0000000..09813d5
--- /dev/null
+++ b/src/as/gfx/sketch.ts
@@ -0,0 +1,36 @@
+import { GL } from 'gl-util'
+import type { Shapes } from '~/src/as/gfx/shapes.ts'
+import { SketchInfo } from '~/src/as/gfx/sketch-info.ts'
+import { type Rect } from '~/src/as/gfx/types.ts'
+import wasm from '~/src/as/gfx/wasm.ts'
+
+const DEBUG = true
+
+export type Sketch = ReturnType<typeof Sketch>
+
+export function Sketch(GL: GL, view: Rect) {
+  const sketch = SketchInfo(GL, view)
+  const scene = new Set<Shapes>()
+
+  const { gl } = GL
+  const { info, finish, writeGL, draw: sketchDraw } = sketch
+  const { use } = info
+
+  function flush(count: number) {
+    // DEBUG && console.log('[sketch] draw', count)
+    writeGL(count)
+    gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, count)
+  }
+
+  function draw() {
+    use()
+    wasm.setFlushSketchFn(flush)
+    // DEBUG && console.log('[sketch] draw', scene)
+    for (const shapes of scene) {
+      sketchDraw(shapes)
+    }
+    finish()
+  }
+
+  return { draw, scene, info, view }
+}
diff --git a/src/as/gfx/types.ts b/src/as/gfx/types.ts
new file mode 100644
index 0000000..efbdc4a
--- /dev/null
+++ b/src/as/gfx/types.ts
@@ -0,0 +1,71 @@
+import { $, type Signal } from 'sigui'
+import { screen } from '~/src/screen.ts'
+
+export type Matrix = ReturnType<typeof Matrix>
+
+class MatrixInfo {
+  a = 1
+  b = 0
+  c = 0
+  d = 1
+  e = 0
+  f = 0
+  _values?: [
+    sx: number, cy: number,
+    cx: number, sy: number,
+    tx: number, ty: number,
+  ]
+  get values() {
+    const { a, b, c, d, e, f } = this
+    const o = (this._values ??= [
+      1, 0, 0,
+      1, 0, 0,
+    ])
+    o[0] = a
+    o[1] = b
+    o[2] = c
+    o[3] = d
+    o[4] = e
+    o[5] = f
+    return this._values
+  }
+}
+
+export function Matrix(
+  a: number | Signal<number> = 1,
+  b: number | Signal<number> = 0,
+  c: number | Signal<number> = 0,
+  d: number | Signal<number> = 1,
+  e: number | Signal<number> = 0,
+  f: number | Signal<number> = 0,
+) {
+  return $(new MatrixInfo(), { a, b, c, d, e, f })
+}
+
+export type Rect = ReturnType<typeof Rect>
+
+class RectInfo {
+  pr = 0
+  x = 0
+  y = 0
+  w = 0
+  h = 0
+  get x_pr() { return this.x * this.pr }
+  get y_pr() { return this.y * this.pr }
+  get w_pr() { return this.w * this.pr }
+  get h_pr() { return this.h * this.pr }
+  width = $.alias(this, 'w')
+  height = $.alias(this, 'h')
+}
+
+export function Rect(
+  x: number | Signal<number> = 0,
+  y: number | Signal<number> = 0,
+  w: number | Signal<number> = 0,
+  h: number | Signal<number> = 0,
+) {
+  return $(new RectInfo(), {
+    pr: screen.$.pr,
+    x, y, w, h
+  })
+}
diff --git a/src/as/gfx/wasm-matrix.ts b/src/as/gfx/wasm-matrix.ts
new file mode 100644
index 0000000..ce69550
--- /dev/null
+++ b/src/as/gfx/wasm-matrix.ts
@@ -0,0 +1,23 @@
+import { Sigui } from 'sigui'
+import type { Matrix, Rect } from '~/src/as/gfx/types.ts'
+import wasm from '~/src/as/gfx/wasm.ts'
+
+const DEBUG = false
+
+export type WasmMatrix = ReturnType<typeof WasmMatrix>
+
+export function WasmMatrix(view: Rect, matrix: Matrix) {
+  using $ = Sigui()
+
+  const mat2d = new Float64Array(wasm.memory.buffer, wasm.createMatrix(), 6)
+
+  $.fx(() => {
+    const { a, d, e, f } = matrix
+    const { pr, h } = view
+    $()
+    mat2d.set(matrix.values)
+    DEBUG && console.log(a)
+  })
+
+  return mat2d
+}
diff --git a/src/as/gfx/wasm.ts b/src/as/gfx/wasm.ts
new file mode 100644
index 0000000..9c3e0fc
--- /dev/null
+++ b/src/as/gfx/wasm.ts
@@ -0,0 +1,33 @@
+import { instantiate } from '~/as/build/gfx.js'
+import url from '~/as/build/gfx.wasm?url'
+import { hexToBinary, initWasm } from '~/src/as/init-wasm.ts'
+
+let mod: WebAssembly.Module
+
+if (import.meta.env && import.meta.env.MODE !== 'production') {
+  const hex = (await import('~/as/build/gfx.wasm?raw-hex')).default
+  const wasmMapUrl = new URL('/as/build/gfx.wasm.map', location.origin).href
+  const binary = hexToBinary(hex, wasmMapUrl)
+  mod = await WebAssembly.compile(binary)
+}
+else {
+  mod = await WebAssembly.compileStreaming(fetch(new URL(url, location.href)))
+}
+
+let flushSketchFn = (count: number) => { }
+function setFlushSketchFn(fn: (count: number) => void) {
+  flushSketchFn = fn
+}
+
+const wasm = await instantiate(mod, {
+  env: {
+    log: console.log,
+    flushSketch(count: number) {
+      flushSketchFn(count)
+    }
+  }
+})
+
+const { alloc } = initWasm(wasm)
+
+export default Object.assign(wasm, { alloc, setFlushSketchFn })
diff --git a/src/as/gfx/webgl.ts b/src/as/gfx/webgl.ts
new file mode 100644
index 0000000..c3af8eb
--- /dev/null
+++ b/src/as/gfx/webgl.ts
@@ -0,0 +1,57 @@
+import { GL, initGL } from 'gl-util'
+import { Sigui } from 'sigui'
+import { Rect } from '~/src/as/gfx/types.ts'
+
+const DEBUG = true
+
+export interface MeshProps {
+  GL: GL
+  view: Rect
+}
+
+export interface Mesh {
+  draw(): void
+}
+
+export function WebGL(view: Rect, canvas: HTMLCanvasElement, alpha = false) {
+  DEBUG && console.log('[webgl] create')
+  using $ = Sigui()
+
+  const GL = initGL(canvas, {
+    antialias: true,
+    alpha,
+    preserveDrawingBuffer: true
+  })
+
+  const { gl } = GL
+  const meshes = new Set<Mesh>()
+
+  function clear() {
+    gl.viewport(0, 0, Math.max(0, view.w_pr), Math.max(0, view.h_pr))
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
+  }
+
+  function draw() {
+    clear()
+    for (const mesh of meshes) {
+      mesh.draw()
+    }
+  }
+
+  function add($: Sigui, mesh: Mesh) {
+    $.fx(() => {
+      meshes.add(mesh)
+      return () => {
+        meshes.delete(mesh)
+      }
+    })
+  }
+
+  $.fx(() => () => {
+    DEBUG && console.log('[webgl] dispose')
+    meshes.clear()
+    GL.reset()
+  })
+
+  return { GL, draw, add }
+}
diff --git a/src/as/init-wasm.ts b/src/as/init-wasm.ts
new file mode 100644
index 0000000..d80a0b6
--- /dev/null
+++ b/src/as/init-wasm.ts
@@ -0,0 +1,113 @@
+import { wasmSourceMap, type TypedArray, type TypedArrayConstructor } from 'utils'
+
+const DEBUG = false
+
+interface Wasm {
+  memory: WebAssembly.Memory
+  __pin(ptr: number): number
+  __unpin(ptr: number): void
+  __new(size: number, id: number): number
+  __collect(): void
+  allocI32(bytes: number): number
+  allocU32(bytes: number): number
+  allocF32(bytes: number): number
+}
+
+function fromHexString(hexString: string) {
+  return Uint8Array.from(
+    hexString.match(/.{1,2}/g)!.map(byte => parseInt(byte, 16))
+  )
+}
+
+export function hexToBinary(hex: string, wasmMapUrl: string) {
+  const uint8 = fromHexString(hex)
+  const buffer = wasmSourceMap.setSourceMapURL(uint8.buffer, wasmMapUrl)
+  const binary = new Uint8Array(buffer)
+  return binary
+}
+
+export function initWasm(wasm: Wasm) {
+  const reg = new FinalizationRegistry((ptr: number) => {
+    lru.delete(ptr)
+    try {
+      DEBUG && console.log('Freeing', ptr)
+      wasm.__unpin(ptr)
+    }
+    catch (error) {
+      console.error('Failed free:', ptr, error)
+    }
+  })
+
+  let lru = new Set<number>()
+  const TRIES = 16
+  const GC_EVERY = 1024000
+  let allocs = 0
+
+  const funcs = new Map([
+    [Int32Array, wasm.allocI32],
+    [Uint32Array, wasm.allocU32],
+    [Float32Array, wasm.allocF32],
+  ] as any) as any
+
+  function alloc<T extends TypedArrayConstructor>(ctor: T, length: number) {
+    const bytes = length * ctor.BYTES_PER_ELEMENT
+
+    allocs += length
+    if (allocs > GC_EVERY) {
+      wasm.__collect()
+      allocs = 0
+    }
+
+    do {
+      try {
+        const ptr = funcs.has(ctor)
+          ? wasm.__pin(funcs.get(ctor)(length))
+          : wasm.__pin(wasm.__new(bytes, 1))
+        const arr = new ctor(wasm.memory.buffer, ptr, length)
+        const unreg = {}
+        reg.register(arr, ptr, unreg)
+        return Object.assign(arr as TypedArray<T>, {
+          ptr,
+          free() {
+            reg.unregister(unreg)
+            lru.delete(ptr)
+            try {
+              wasm.__unpin(ptr)
+            }
+            catch (error) {
+              console.warn(error)
+            }
+          }
+        })
+      }
+      catch (err) {
+        console.error(err)
+        console.error('Failed alloc:', bytes, ' - will attempt to free memory.')
+        const [first, ...rest] = lru
+        lru = new Set(rest)
+        try {
+          wasm.__unpin(first)
+        }
+        catch (error) {
+          console.warn(error)
+        }
+        // wasm.__collect()
+        continue
+      }
+    } while (lru.size)
+
+    //
+    // NOTE: We can't allocate any wasm memory.
+    //  This is a catastrophic error so we choose to _refresh_ the page.
+    //  Might not be ideal in all situations.
+    // We shouldn't refresh if the failure is right after a new refresh,
+    // otherwise we enter into infinite refreshes loop.
+    if (+new Date() - +new Date(performance.timeOrigin) > 2_000) {
+      location.href = location.href
+    }
+
+    throw new Error('Cannot allocate wasm memory.')
+  }
+
+  return { alloc }
+}
diff --git a/src/as/pkg/wasm.ts b/src/as/pkg/wasm.ts
index fe758b2..066e5d3 100644
--- a/src/as/pkg/wasm.ts
+++ b/src/as/pkg/wasm.ts
@@ -1,24 +1,13 @@
-import { wasmSourceMap, type TypedArray, type TypedArrayConstructor } from 'utils'
 import { instantiate } from '~/as/build/pkg.js'
 import url from '~/as/build/pkg.wasm?url'
-
-const DEBUG = false
-
-const { log } = console
+import { hexToBinary, initWasm } from '~/src/as/init-wasm.ts'
 
 let mod: WebAssembly.Module
 
 if (import.meta.env && import.meta.env.MODE !== 'production') {
   const hex = (await import('~/as/build/pkg.wasm?raw-hex')).default
-  const fromHexString = (hexString: string) => Uint8Array.from(
-    hexString.match(/.{1,2}/g)!.map(byte =>
-      parseInt(byte, 16)
-    )
-  )
   const wasmMapUrl = new URL('/as/build/pkg.wasm.map', location.origin).href
-  const uint8 = fromHexString(hex)
-  const buffer = wasmSourceMap.setSourceMapURL(uint8.buffer, wasmMapUrl)
-  const binary = new Uint8Array(buffer)
+  const binary = hexToBinary(hex, wasmMapUrl)
   mod = await WebAssembly.compile(binary)
 }
 else {
@@ -27,101 +16,10 @@ else {
 
 const wasm = await instantiate(mod, {
   env: {
-    log,
-  }
-})
-
-const reg = new FinalizationRegistry((ptr: number) => {
-  lru.delete(ptr)
-  try {
-    DEBUG && console.log('Freeing', ptr)
-    wasm.__unpin(ptr)
-  }
-  catch (error) {
-    console.error('Failed free:', ptr, error)
+    log: console.log,
   }
 })
 
-let lru = new Set<number>()
-const TRIES = 16
-const GC_EVERY = 1024000
-let allocs = 0
-
-const funcs = new Map([
-  [Int32Array, wasm.allocI32],
-  [Uint32Array, wasm.allocU32],
-  [Float32Array, wasm.allocF32],
-] as any) as any
-
-function alloc<T extends TypedArrayConstructor>(ctor: T, length: number) {
-  const bytes = length * ctor.BYTES_PER_ELEMENT
-  // console.warn('[player] alloc', length)
-  allocs += length
-  if (allocs > GC_EVERY) {
-    // console.log('[player gc]')
-    wasm.__collect()
-    allocs = 0
-  }
-
-  do {
-    try {
-      const ptr = funcs.has(ctor)
-        ? wasm.__pin(funcs.get(ctor)(length))
-        : wasm.__pin(wasm.__new(bytes, 1))
-      const arr = new ctor(wasm.memory.buffer, ptr, length)
-      const unreg = {}
-      reg.register(arr, ptr, unreg)
-      return Object.assign(arr as TypedArray<T>, {
-        ptr,
-        free() {
-          reg.unregister(unreg)
-          lru.delete(ptr)
-          try {
-            wasm.__unpin(ptr)
-          }
-          catch (error) {
-            console.warn(error)
-          }
-        }
-      })
-    }
-    catch (err) {
-      console.error(err)
-      console.error('Failed alloc:', bytes, ' - will attempt to free memory.')
-      const [first, ...rest] = lru
-      lru = new Set(rest)
-      try {
-        wasm.__unpin(first)
-      }
-      catch (error) {
-        console.warn(error)
-      }
-      // wasm.__collect()
-      continue
-    }
-  } while (lru.size)
-
-  //
-  // NOTE: We can't allocate any wasm memory.
-  //  This is a catastrophic error so we choose to _refresh_ the page.
-  //  Might not be ideal in all situations.
-  // We shouldn't refresh if the failure is right after a new refresh,
-  // otherwise we enter into infinite refreshes loop.
-  if (+new Date() - +new Date(performance.timeOrigin) > 2_000) {
-    location.href = location.href
-  }
-
-  throw new Error('Cannot allocate wasm memory.')
-}
+const { alloc } = initWasm(wasm)
 
 export default Object.assign(wasm, { alloc })
-
-if (import.meta.vitest) {
-  describe('alloc', () => {
-    it('works', () => {
-      const buf = alloc(Float32Array, 32)
-      expect(buf.length).toBe(32)
-      expect(buf).toBeInstanceOf(Float32Array)
-    })
-  })
-}
diff --git a/src/comp/Toast.tsx b/src/comp/Toast.tsx
index 4021ac1..6cc999d 100644
--- a/src/comp/Toast.tsx
+++ b/src/comp/Toast.tsx
@@ -4,7 +4,7 @@ export function Toast() {
   return <div>
     {() => state.toastMessages.length ? <div class="absolute w-[70%] p-4 bottom-0 right-0 flex flex-col gap-2">
       {() => state.toastMessages.map(item =>
-        <div class="bg-black min-w-full p-2 border border-white-500 text-sm" onmousedown={() => {
+        <div class="bg-black min-w-full p-2 border border-white-500 text-sm overflow-hidden text-ellipsis whitespace-pre" onmousedown={() => {
           state.toastMessages = state.toastMessages.filter(i => i !== item)
         }}>{item.stack ?? item.message}</div>
       )}
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
index dee233d..e36e1b9 100644
--- a/src/pages/App.tsx
+++ b/src/pages/App.tsx
@@ -15,9 +15,9 @@ import { Home } from '~/src/pages/Home.tsx'
 import { OAuthRegister } from '~/src/pages/OAuthRegister.tsx'
 import { QrCode } from '~/src/pages/QrCode.tsx'
 import { UiShowcase } from '~/src/pages/UiShowcase.tsx'
+import { WebGLDemo } from '~/src/pages/WebGLDemo.tsx'
 import { WebSockets } from '~/src/pages/WebSockets.tsx'
 import { whoami } from '~/src/rpc/auth.ts'
-import { screen } from '~/src/screen.ts'
 import { state } from '~/src/state.ts'
 import { go, Link } from '~/src/ui/Link.tsx'
 
@@ -38,6 +38,7 @@ export function App() {
     '/chat': () => <Chat />,
     '!/ws': () => <WebSockets />,
     '!/canvas': () => <CanvasDemo width={info.$.canvasWidth} height={info.$.canvasHeight} />,
+    '/webgl': () => <WebGLDemo width={info.$.canvasWidth} height={info.$.canvasHeight} />,
     '/editor': () => <EditorDemo width={info.$.canvasWidth} height={info.$.canvasHeight} />,
     '/asc': () => <AssemblyScript />,
     '/qrcode': () => <QrCode />,
diff --git a/src/pages/EditorDemo.tsx b/src/pages/EditorDemo.tsx
index 9b85a38..3f2a278 100644
--- a/src/pages/EditorDemo.tsx
+++ b/src/pages/EditorDemo.tsx
@@ -30,7 +30,7 @@ export function EditorDemo({ width, height }: {
     height,
     code: `\
 [sin 300] [tri 444] [sqr 555] @ \
-[lp 300 .8] [dly 16 1 /] [pp 3 4 5] \
+[lp 300 .8] [dly 16 1 /] [ppd (3 4 5)] \
 [ar 10 50] *
 `,
   })
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 55da2d6..ef8afe7 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -26,6 +26,7 @@ export function Home() {
           <Link href="/chat">Chat</Link>
           <Link href="/ws">WebSockets</Link>
           <Link href="/canvas">Canvas</Link>
+          <Link href="/webgl">WebGL</Link>
           <Link href="/editor">Editor</Link>
           <Link href="/asc">AssemblyScript</Link>
           <Link href="/qrcode">QrCode</Link>
diff --git a/src/pages/WebGLDemo.tsx b/src/pages/WebGLDemo.tsx
new file mode 100644
index 0000000..0d31a20
--- /dev/null
+++ b/src/pages/WebGLDemo.tsx
@@ -0,0 +1,61 @@
+import { Sigui, type Signal } from 'sigui'
+import { Anim } from '~/src/as/gfx/anim.ts'
+import { Shapes } from '~/src/as/gfx/shapes.ts'
+import { Sketch } from '~/src/as/gfx/sketch.ts'
+import { Matrix, Rect } from '~/src/as/gfx/types.ts'
+import { WebGL } from '~/src/as/gfx/webgl.ts'
+import { state } from '~/src/state.ts'
+import { Button } from '~/src/ui/Button.tsx'
+import { Canvas } from '~/src/ui/Canvas.tsx'
+import { H2 } from '~/src/ui/Heading.tsx'
+
+export function WebGLDemo({ width, height }: {
+  width: Signal<number>
+  height: Signal<number>
+}) {
+  using $ = Sigui()
+
+  const canvas = <Canvas width={width} height={height} /> as HTMLCanvasElement
+  const matrix = Matrix()
+  const view = Rect(0, 0, width, height)
+  const webgl = WebGL(view, canvas, true)
+  const sketch = Sketch(webgl.GL, view)
+  const shapes = Shapes(view, matrix)
+  const anim = Anim()
+  sketch.scene.add(shapes)
+  webgl.add($, sketch)
+  anim.ticks.add(webgl.draw)
+
+  function Box() {
+    const boxRect = Rect(10, 10, 20, 20)
+    const box = shapes.Box(boxRect)
+    box.view.color = 0xffffff
+    return box
+  }
+
+  $.fx(() => {
+    $()
+    const box = Box()
+    box.view.w = 100
+    box.view.h = 100
+    box.view.color = Math.random() * 0xffffff
+    let t = 0
+    function tick() {
+      box.view.x = Math.sin(t) * 100 + 100
+      t += 0.1
+      return true
+    }
+    anim.ticks.add(tick)
+  })
+
+  return <div>
+    <div class="flex items-center justify-between">
+      <H2>WebGL Demo</H2>
+      <div class="flex items-center self-start gap-2">
+        <span>Anim Mode:</span>
+        <Button onclick={() => state.animCycle?.()}>{() => state.animMode}</Button>
+      </div>
+    </div>
+    {canvas}
+  </div>
+}
diff --git a/src/state.ts b/src/state.ts
index cbf688e..e1558f7 100644
--- a/src/state.ts
+++ b/src/state.ts
@@ -1,54 +1,68 @@
-import { $, fx } from 'sigui'
+import { $, fx, storage } from 'sigui'
 import type { z } from 'zod'
 import type { UserSession } from '~/api/auth/types.ts'
 import type { UiChannel } from '~/api/chat/types.ts'
 import type { Channels } from '~/api/models.ts'
+import { AnimMode } from '~/src/as/gfx/anim.ts'
 import { env } from '~/src/env.ts'
 import { screen } from '~/src/screen.ts'
 import { link } from '~/src/ui/Link.tsx'
 
-export let state = $({
-  container: null as null | HTMLElement,
-  get containerWidth() {
+class State {
+  // container
+  container: HTMLElement | null = null
+  get containerWidth(): number {
     const { width } = screen
-    const { container } = state
+    const { container } = this
     if (!container) return width
     const article = container.getElementsByTagName('article')[0] as HTMLElement
     const style = window.getComputedStyle(article)
     return article.getBoundingClientRect().width
       - parseFloat(style.paddingLeft)
       - parseFloat(style.paddingRight)
-  },
+  }
 
-  url: link.$.url,
-  get pathname() {
+  // url
+  url: typeof link.$.url
+  get pathname(): string {
     return state.url.pathname
-  },
-  get search() {
+  }
+  get search(): string {
     return state.url.search
-  },
-  get searchParams() {
-    return new URLSearchParams(state.search)
-  },
-  get apiUrl() {
+  }
+  get searchParams(): URLSearchParams {
+    return new URLSearchParams(this.search)
+  }
+  get apiUrl(): string {
     const url = new URL(env.VITE_API_URL)
-    if (state.search.includes('api2')) {
+    if (this.search.includes('api2')) {
       url.port = '8001'
     }
     return url.href
-  },
+  }
 
-  user: undefined as undefined | null | UserSession,
+  // app
+  user?: UserSession | null
 
-  channelsList: [] as Pick<z.infer<typeof Channels>, 'name'>[],
-  channels: [] as UiChannel[],
-  currentChannelName: null as null | string,
-  get currentChannel() {
-    return state.channels.find(c => c.name === state.currentChannelName)
-  },
+  channelsList: Pick<z.infer<typeof Channels>, 'name'>[] = []
+  channels: UiChannel[] = []
+  currentChannelName?: string | null
 
-  toastMessages: [] as { message?: string, stack?: string }[],
-})
+  get currentChannel(): UiChannel | undefined {
+    return this.channels.find(c => c.name === this.currentChannelName)
+  }
+
+  toastMessages: { message?: string, stack?: string }[] = []
+
+  animMode = storage(AnimMode.Auto)
+  animCycle?: () => void
+
+  constructor() {
+    this.url = link.$.url
+  }
+}
+
+export let state = $(new State)
 
 // fx(() => {
 //   const { container } = $.of(state)
diff --git a/vite.config.ts b/vite.config.ts
index b998c49..ed70612 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -117,6 +117,16 @@ export default ({ mode }) => {
         '--transform', './vendor/as-transform-unroll.js',
       ]
     }),
+    ViteAssemblyScript({
+      configFile: 'asconfig-gfx.json',
+      projectRoot: '.',
+      srcMatch: 'as/assembly/gfx',
+      srcEntryFile: 'as/assembly/gfx/index.ts',
+      mapFile: './as/build/gfx.wasm.map',
+      extra: [
+        '--transform', './vendor/as-transform-unroll.js',
+      ]
+    }),
   ]
 
   return defineConfig({

From 6d73438f87bb9f7baf181c6cb203cfbb1d6db74d Mon Sep 17 00:00:00 2001
From: stagas <gstagas@gmail.com>
Date: Thu, 10 Oct 2024 17:11:31 +0300
Subject: [PATCH 08/25] fix: barrel

---
 src/ui/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/ui/index.ts b/src/ui/index.ts
index 1e250e4..8c8bbe7 100644
--- a/src/ui/index.ts
+++ b/src/ui/index.ts
@@ -6,4 +6,3 @@ export * from './Heading.tsx'
 export * from './Input.tsx'
 export * from './Label.tsx'
 export * from './Link.tsx'
-export * from './editor/index.ts'

From d00d551c70b22bbcff195b8763f0a3581bc8e6f4 Mon Sep 17 00:00:00 2001
From: stagas <gstagas@gmail.com>
Date: Thu, 10 Oct 2024 19:26:56 +0300
Subject: [PATCH 09/25] feat: wip widgets

---
 src/as/gfx/anim.ts                  |  6 +--
 src/as/gfx/gfx.ts                   | 33 +++++++++++++
 src/comp/AnimMode.tsx               | 18 ++++++++
 src/comp/Toast.tsx                  |  2 +-
 src/lang/tokenize.ts                | 11 ++++-
 src/pages/EditorDemo.tsx            | 23 +++++----
 src/pages/WebGLDemo.tsx             | 28 +++++------
 src/ui/Canvas.tsx                   |  6 ++-
 src/ui/Editor.tsx                   |  4 +-
 src/ui/editor/caret.ts              | 12 +++--
 src/ui/editor/index.ts              |  1 +
 src/ui/editor/view.tsx              | 72 ++++++++++++++++++-----------
 src/ui/editor/widget.ts             | 50 ++++++++++++++++++++
 vendor/vite-plugin-print-address.ts |  3 +-
 14 files changed, 204 insertions(+), 65 deletions(-)
 create mode 100644 src/as/gfx/gfx.ts
 create mode 100644 src/comp/AnimMode.tsx
 create mode 100644 src/ui/editor/widget.ts

diff --git a/src/as/gfx/anim.ts b/src/as/gfx/anim.ts
index 7870441..63dc2de 100644
--- a/src/as/gfx/anim.ts
+++ b/src/as/gfx/anim.ts
@@ -5,8 +5,8 @@ const DEBUG = false //true
 
 export enum AnimMode {
   Auto = 'auto',
-  Started = 'started',
-  Paused = 'paused',
+  On = 'on',
+  Off = 'off',
 }
 
 const Modes = Object.values(AnimMode)
@@ -68,7 +68,7 @@ export function Anim() {
     const { epoch, mode } = info
     $()
     DEBUG && console.log('[anim]', mode, epoch)
-    if (mode === AnimMode.Paused) {
+    if (mode === AnimMode.Off) {
       stop()
     }
     else {
diff --git a/src/as/gfx/gfx.ts b/src/as/gfx/gfx.ts
new file mode 100644
index 0000000..56403eb
--- /dev/null
+++ b/src/as/gfx/gfx.ts
@@ -0,0 +1,33 @@
+import { Sigui, type Signal } from 'sigui'
+import { Shapes } from '~/src/as/gfx/shapes.ts'
+import { Sketch } from '~/src/as/gfx/sketch.ts'
+import { Matrix, Rect } from '~/src/as/gfx/types.ts'
+import { WebGL } from '~/src/as/gfx/webgl.ts'
+
+export function Gfx({ width, height, canvas }: {
+  width: Signal<number>
+  height: Signal<number>
+  canvas: HTMLCanvasElement
+}) {
+  using $ = Sigui()
+
+  const matrix = Matrix()
+  const view = Rect(0, 0, width, height)
+  const webgl = WebGL(view, canvas, true)
+  const sketch = Sketch(webgl.GL, view)
+  webgl.add($, sketch)
+
+  function createShapes() {
+    return Shapes(view, matrix)
+  }
+
+  return {
+    matrix,
+    view,
+    webgl,
+    sketch,
+    draw: webgl.draw,
+    scene: sketch.scene,
+    createShapes
+  }
+}
diff --git a/src/comp/AnimMode.tsx b/src/comp/AnimMode.tsx
new file mode 100644
index 0000000..f5ab42b
--- /dev/null
+++ b/src/comp/AnimMode.tsx
@@ -0,0 +1,18 @@
+import { cn } from '~/lib/cn.ts'
+import type { Anim } from '~/src/as/gfx/anim.ts'
+import { state } from '~/src/state.ts'
+import { Button } from '~/src/ui/Button.tsx'
+
+export function AnimMode({ anim }: { anim: Anim }) {
+  return <div class="flex items-center self-start gap-2">
+    <span>Anim Mode:</span>
+    <Button onclick={() => state.animCycle?.()} class="flex flex-row items-center justify-between gap-1">
+      {() => <div class={cn(
+        'rounded-[100%] w-2 h-2',
+        { 'bg-green-500': anim.info.isRunning },
+        { 'bg-neutral-500': !anim.info.isRunning },
+      )} />}
+      <div class="w-12">{() => state.animMode}</div>
+    </Button>
+  </div>
+}
diff --git a/src/comp/Toast.tsx b/src/comp/Toast.tsx
index 6cc999d..5d38fd1 100644
--- a/src/comp/Toast.tsx
+++ b/src/comp/Toast.tsx
@@ -2,7 +2,7 @@ import { state } from '~/src/state.ts'
 
 export function Toast() {
   return <div>
-    {() => state.toastMessages.length ? <div class="absolute w-[70%] p-4 bottom-0 right-0 flex flex-col gap-2">
+    {() => state.toastMessages.length ? <div class="fixed w-[70%] p-4 bottom-0 right-0 flex flex-col gap-2">
       {() => state.toastMessages.map(item =>
         <div class="bg-black min-w-full p-2 border border-white-500 text-sm overflow-hidden text-ellipsis whitespace-pre" onmousedown={() => {
           state.toastMessages = state.toastMessages.filter(i => i !== item)
diff --git a/src/lang/tokenize.ts b/src/lang/tokenize.ts
index 91e827a..86f2d0a 100644
--- a/src/lang/tokenize.ts
+++ b/src/lang/tokenize.ts
@@ -60,6 +60,15 @@ export namespace Token {
     'g'
   )
 
+  export interface Bounds {
+    line: number
+    col: number
+    right: number
+    bottom: number
+    index: number
+    length: number
+  }
+
   export const Empty: Token = {
     type: 0,
     text: '',
@@ -90,7 +99,7 @@ export namespace Token {
     return Close[token.text as keyof typeof Close].charCodeAt(0)
   }
 
-  export function bounds(tokens: Token[]) {
+  export function bounds(tokens: Token[]): Bounds {
     let line: number = Infinity
     let col: number = Infinity
     let right: number = 0
diff --git a/src/pages/EditorDemo.tsx b/src/pages/EditorDemo.tsx
index 3f2a278..4fb44cb 100644
--- a/src/pages/EditorDemo.tsx
+++ b/src/pages/EditorDemo.tsx
@@ -1,4 +1,5 @@
 import { Sigui, type Signal } from 'sigui'
+import { AnimMode } from '~/src/comp/AnimMode.tsx'
 import { Token, tokenize } from '~/src/lang/tokenize.ts'
 import { screen } from '~/src/screen.ts'
 import { theme } from '~/src/theme.ts'
@@ -52,18 +53,20 @@ export function EditorDemo({ width, height }: {
     return { fill, stroke }
   }
 
-  const editor = <Editor
-    width={info.$.width}
-    height={info.$.height}
-    code={info.$.code}
-    colorize={colorize}
-    tokenize={tokenize}
-    wordWrapProcessor={wordWrapProcessor}
-  /> as Element & { focus(): void }
+  const editor = Editor({
+    width: info.$.width,
+    height: info.$.height,
+    code: info.$.code,
+    colorize: colorize,
+    tokenize: tokenize,
+    wordWrapProcessor: wordWrapProcessor,
+  })
 
   const el = <div>
-    <H2>Editor demo</H2>
-
+    <div class="flex items-center justify-between">
+      <H2>Editor demo</H2>
+      <AnimMode anim={editor.anim} />
+    </div>
     {editor}
   </div>
 
diff --git a/src/pages/WebGLDemo.tsx b/src/pages/WebGLDemo.tsx
index 0d31a20..e24a9b4 100644
--- a/src/pages/WebGLDemo.tsx
+++ b/src/pages/WebGLDemo.tsx
@@ -1,9 +1,9 @@
 import { Sigui, type Signal } from 'sigui'
+import { cn } from '~/lib/cn.ts'
 import { Anim } from '~/src/as/gfx/anim.ts'
-import { Shapes } from '~/src/as/gfx/shapes.ts'
-import { Sketch } from '~/src/as/gfx/sketch.ts'
-import { Matrix, Rect } from '~/src/as/gfx/types.ts'
-import { WebGL } from '~/src/as/gfx/webgl.ts'
+import { Gfx } from '~/src/as/gfx/gfx.ts'
+import { Rect } from '~/src/as/gfx/types.ts'
+import { AnimMode } from '~/src/comp/AnimMode.tsx'
 import { state } from '~/src/state.ts'
 import { Button } from '~/src/ui/Button.tsx'
 import { Canvas } from '~/src/ui/Canvas.tsx'
@@ -16,15 +16,14 @@ export function WebGLDemo({ width, height }: {
   using $ = Sigui()
 
   const canvas = <Canvas width={width} height={height} /> as HTMLCanvasElement
-  const matrix = Matrix()
-  const view = Rect(0, 0, width, height)
-  const webgl = WebGL(view, canvas, true)
-  const sketch = Sketch(webgl.GL, view)
-  const shapes = Shapes(view, matrix)
+
+  const gfx = Gfx({ width, height, canvas })
+
   const anim = Anim()
-  sketch.scene.add(shapes)
-  webgl.add($, sketch)
-  anim.ticks.add(webgl.draw)
+  anim.ticks.add(gfx.draw)
+
+  const shapes = gfx.createShapes()
+  gfx.scene.add(shapes)
 
   function Box() {
     const boxRect = Rect(10, 10, 20, 20)
@@ -51,10 +50,7 @@ export function WebGLDemo({ width, height }: {
   return <div>
     <div class="flex items-center justify-between">
       <H2>WebGL Demo</H2>
-      <div class="flex items-center self-start gap-2">
-        <span>Anim Mode:</span>
-        <Button onclick={() => state.animCycle?.()}>{() => state.animMode}</Button>
-      </div>
+      <AnimMode anim={anim} />
     </div>
     {canvas}
   </div>
diff --git a/src/ui/Canvas.tsx b/src/ui/Canvas.tsx
index 71ce223..d4427b5 100644
--- a/src/ui/Canvas.tsx
+++ b/src/ui/Canvas.tsx
@@ -1,16 +1,18 @@
 import { Sigui, type Signal } from 'sigui'
+import { cn } from '~/lib/cn.ts'
 import { screen } from '~/src/screen.ts'
 
-export function Canvas({ width, height }: {
+export function Canvas({ width, height, class: className }: {
   width: Signal<number>
   height: Signal<number>
+  class?: string
 }) {
   using $ = Sigui()
 
   const canvas = <canvas
     width="1"
     height="1"
-    class="touch-none"
+    class={cn('touch-none', className)}
   /> as HTMLCanvasElement
 
   const info = $({
diff --git a/src/ui/Editor.tsx b/src/ui/Editor.tsx
index ea31d45..0b8e5d0 100644
--- a/src/ui/Editor.tsx
+++ b/src/ui/Editor.tsx
@@ -1,7 +1,7 @@
 import { Sigui, type Signal } from 'sigui'
 import { dom, isMobile } from 'utils'
 import type { Source, Token } from '~/src/lang/tokenize.ts'
-import { Buffer, Caret, Dims, Kbd, Misc, View, type WordWrapProcessor } from '~/src/ui/editor/index.ts'
+import { Buffer, Caret, Dims, Kbd, Misc, View, Widgets, type WordWrapProcessor } from '~/src/ui/editor/index.ts'
 
 export * from '~/src/ui/editor/index.ts'
 
@@ -59,5 +59,5 @@ export function Editor({ code, width, height, colorize, tokenize, wordWrapProces
     {kbd}
   </div> as HTMLDivElement
 
-  return { el, focus }
+  return { el, focus, buffer, anim: view.anim, widgets: view.widgets }
 }
diff --git a/src/ui/editor/caret.ts b/src/ui/editor/caret.ts
index 4b9de28..32d6fa9 100644
--- a/src/ui/editor/caret.ts
+++ b/src/ui/editor/caret.ts
@@ -94,9 +94,12 @@ export function Caret({ buffer, dims, misc }: {
 
   function moveHome() {
     const { linesVisual } = buffer.info
-    const bx = beginOfLine(linesVisual[caret.visual.y].text)
+    const bx = beginOfLine(linesVisual[caret.visual.y]?.text ?? '')
     const vx = bx === caret.visual.x ? 0 : bx
-    const { x, y } = buffer.visualPointToLogicalPoint({ x: vx, y: caret.visual.y })
+    const { x, y } = buffer.visualPointToLogicalPoint({
+      x: vx,
+      y: caret.visual.y
+    })
     caret.x = x
     caret.y = y
     $.flush()
@@ -105,7 +108,10 @@ export function Caret({ buffer, dims, misc }: {
 
   function moveEnd() {
     const { linesVisual } = buffer.info
-    const { x, y } = buffer.visualPointToLogicalPoint({ x: linesVisual[caret.visual.y].text.length, y: caret.visual.y })
+    const { x, y } = buffer.visualPointToLogicalPoint({
+      x: linesVisual[caret.visual.y]?.text.length ?? 0,
+      y: caret.visual.y
+    })
     caret.x = x
     caret.y = y
     $.flush()
diff --git a/src/ui/editor/index.ts b/src/ui/editor/index.ts
index 50eb57b..2766e78 100644
--- a/src/ui/editor/index.ts
+++ b/src/ui/editor/index.ts
@@ -5,3 +5,4 @@ export * from './kbd.tsx'
 export * from './misc.ts'
 export * from './util/index.ts'
 export * from './view.tsx'
+export * from './widget.ts'
diff --git a/src/ui/editor/view.tsx b/src/ui/editor/view.tsx
index 48c881b..c7103d1 100644
--- a/src/ui/editor/view.tsx
+++ b/src/ui/editor/view.tsx
@@ -1,8 +1,10 @@
 import { Sigui, type Signal } from 'sigui'
 import { drawText } from 'utils'
+import { Anim } from '~/src/as/gfx/anim.ts'
 import type { Token } from '~/src/lang/tokenize.ts'
 import { screen } from '~/src/screen.ts'
 import { Canvas } from '~/src/ui/Canvas.tsx'
+import { Point, Widgets } from '~/src/ui/Editor.tsx'
 import { Buffer } from '~/src/ui/editor/buffer.ts'
 import { Caret } from '~/src/ui/editor/caret.ts'
 import { Dims } from '~/src/ui/editor/dims.ts'
@@ -17,7 +19,9 @@ export function View({ width, height, dims, caret, buffer, colorize }: {
 }) {
   using $ = Sigui()
 
-  const canvas = <Canvas width={width} height={height} /> as HTMLCanvasElement
+  const canvas = <Canvas width={width} height={height} class="absolute top-0 left-0" /> as HTMLCanvasElement
+  const glCanvas = <Canvas width={width} height={height} class="absolute top-0 left-0" /> as HTMLCanvasElement
+  const el = <div class="relative">{canvas}{glCanvas}</div> as HTMLDivElement
 
   const info = $({
     c: null as null | CanvasRenderingContext2D,
@@ -28,6 +32,11 @@ export function View({ width, height, dims, caret, buffer, colorize }: {
 
   const c = canvas.getContext('2d')!
 
+  const widgets = Widgets({ width, height, c, glCanvas })
+
+  const anim = Anim()
+  anim.ticks.add(draw)
+
   // wait for fonts to load
   document.fonts.ready.then(() => {
     info.c = c
@@ -38,6 +47,40 @@ export function View({ width, height, dims, caret, buffer, colorize }: {
     dims.info.charHeight = Math.ceil(metrics.fontBoundingBoxDescent - metrics.fontBoundingBoxAscent)
   })
 
+  const p: Point = Point()
+
+  function pointFromLinecol({ line, col }: { line: number, col: number }, charWidth: number, lineHeight: number) {
+    p.x = 1 + col * charWidth
+    p.y = 1 + line * lineHeight
+    return p
+  }
+
+  function draw() {
+    const { c, width, height } = $.of(info)
+    const { charWidth, lineHeight } = dims.info
+    const { y: cy } = caret.info.visual
+
+    // draw widgets
+    widgets.draw()
+
+    // clear editor
+    c.clearRect(0, 0, width, height)
+
+    // highlight line
+    c.fillStyle = '#333'
+    c.fillRect(0, Math.floor(cy * lineHeight), width, lineHeight - 2)
+
+    // draw text
+    buffer.info.tokens.forEach(token => {
+      const p = pointFromLinecol(token, charWidth, lineHeight)
+      const { fill, stroke } = colorize(token)
+      drawText(c, p, token.text, fill, .025, stroke)
+    })
+
+    // draw caret
+    caret.draw(c)
+  }
+
   // initialize canvas context settings
   $.fx(() => {
     const { c, pr, width, height } = $.of(info)
@@ -64,32 +107,9 @@ export function View({ width, height, dims, caret, buffer, colorize }: {
     const { caretWidth, charWidth, charHeight, lineHeight } = dims.info
     const { isVisible: isCaretVisible } = caret.info
     const { x: cx, y: cy } = caret.info.visual
-
     $()
-
-    // clear editor
-    c.clearRect(0, 0, width, height)
-
-    // highlight line
-    c.fillStyle = '#333'
-    c.fillRect(0, Math.floor(cy * lineHeight), width, lineHeight - 2)
-
-    // draw text
-    buffer.info.tokens.forEach(token => {
-      const p = {
-        x: 1 + token.col * charWidth,
-        y: 1 + token.line * lineHeight
-      }
-      const { fill, stroke } = colorize(token)
-      drawText(c, p,
-        token.text, fill,
-        .025, stroke
-      )
-    })
-
-    // draw caret
-    caret.draw(c)
+    anim.info.epoch++
   })
 
-  return { el: canvas, info }
+  return { el, info, widgets, anim }
 }
diff --git a/src/ui/editor/widget.ts b/src/ui/editor/widget.ts
new file mode 100644
index 0000000..8c18ee4
--- /dev/null
+++ b/src/ui/editor/widget.ts
@@ -0,0 +1,50 @@
+import { Sigui, type Signal } from 'sigui'
+import { Gfx } from '~/src/as/gfx/gfx.ts'
+import type { Token } from '~/src/lang/tokenize.ts'
+
+function Bounds(): Token.Bounds {
+  using $ = Sigui()
+  return $({ line: 0, col: 0, right: 0, bottom: 0, index: 0, length: 0 })
+}
+
+export type Widgets = ReturnType<typeof Widgets>
+
+export function Widgets({ width, height, c, glCanvas }: {
+  width: Signal<number>
+  height: Signal<number>
+  c: CanvasRenderingContext2D
+  glCanvas: HTMLCanvasElement
+}) {
+  const gfx = Gfx({ width, height, canvas: glCanvas })
+
+  const deco = new Set<Widget>()
+  const subs = new Set<Widget>()
+  const mark = new Set<Widget>()
+
+  function widgetDraw(widget: Widget) {
+    widget.draw(c)
+  }
+
+  function draw() {
+    deco.forEach(widgetDraw)
+    subs.forEach(widgetDraw)
+    mark.forEach(widgetDraw)
+    gfx.draw()
+  }
+
+  return { gfx, draw, deco, subs, mark }
+}
+
+export type Widget = ReturnType<typeof Widget>
+
+export function Widget() {
+  using $ = Sigui()
+
+  const bounds = Bounds()
+
+  const info = $({})
+
+  function draw(c?: CanvasRenderingContext2D) { }
+
+  return { info, bounds, draw }
+}
diff --git a/vendor/vite-plugin-print-address.ts b/vendor/vite-plugin-print-address.ts
index f0f65d2..7d61c8b 100644
--- a/vendor/vite-plugin-print-address.ts
+++ b/vendor/vite-plugin-print-address.ts
@@ -18,6 +18,7 @@ export function getNetworkAddress(options: { port: string }) {
 export const VitePrintAddress = (): Plugin => ({
   name: 'print-address',
   configureServer(server) {
+    let its = 0
     let timeout: any
     const printUrls = (origin: string) => {
       clearTimeout(timeout)
@@ -25,7 +26,7 @@ export const VitePrintAddress = (): Plugin => ({
       const { port } = url
       timeout = setTimeout(() => {
         const network = getNetworkAddress({ port })
-        qrcode.generate(network, { small: true })
+        its++ % 5 === 0 && qrcode.generate(network, { small: true })
         console.log(url.href)
         console.log(network)
       }, 500)

From af30efa3ac2d25be1933de36d92c82b4575d80ce Mon Sep 17 00:00:00 2001
From: stagas <gstagas@gmail.com>
Date: Thu, 10 Oct 2024 22:13:19 +0300
Subject: [PATCH 10/25] feat: wip widgets

---
 admin/index.html         |  14 ++--
 src/comp/AnimMode.tsx    |   2 +-
 src/pages/EditorDemo.tsx |  50 +++++++++++--
 src/ui/Editor.tsx        |   4 +-
 src/ui/editor/caret.ts   |   9 +--
 src/ui/editor/kbd.tsx    |   2 +-
 src/ui/editor/view.tsx   | 155 ++++++++++++++++++++++++++++++---------
 src/ui/editor/widget.ts  |  47 +++++++++---
 8 files changed, 222 insertions(+), 61 deletions(-)

diff --git a/admin/index.html b/admin/index.html
index 6e1ca60..478ee11 100644
--- a/admin/index.html
+++ b/admin/index.html
@@ -1,14 +1,18 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
   <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="icon" href="/favicon.ico" sizes="48x48">
-    <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">
-    <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" href="/favicon.ico" sizes="48x48" />
+    <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
     <link rel="stylesheet" href="/style.css" />
     <title>Vasi - Admin</title>
   </head>
   <body>
+    <script type="module">
+      // KEEP: required for AssemblyScript interop.
+      globalThis.unmanaged = () => {};
+    </script>
     <div id="container"></div>
     <script src="./client.tsx" type="module"></script>
     <script src="../lib/watcher.ts" type="module"></script>
diff --git a/src/comp/AnimMode.tsx b/src/comp/AnimMode.tsx
index f5ab42b..233c68e 100644
--- a/src/comp/AnimMode.tsx
+++ b/src/comp/AnimMode.tsx
@@ -5,7 +5,7 @@ import { Button } from '~/src/ui/Button.tsx'
 
 export function AnimMode({ anim }: { anim: Anim }) {
   return <div class="flex items-center self-start gap-2">
-    <span>Anim Mode:</span>
+    <span>anim:</span>
     <Button onclick={() => state.animCycle?.()} class="flex flex-row items-center justify-between gap-1">
       {() => <div class={cn(
         'rounded-[100%] w-2 h-2',
diff --git a/src/pages/EditorDemo.tsx b/src/pages/EditorDemo.tsx
index 4fb44cb..0e741cc 100644
--- a/src/pages/EditorDemo.tsx
+++ b/src/pages/EditorDemo.tsx
@@ -3,7 +3,7 @@ import { AnimMode } from '~/src/comp/AnimMode.tsx'
 import { Token, tokenize } from '~/src/lang/tokenize.ts'
 import { screen } from '~/src/screen.ts'
 import { theme } from '~/src/theme.ts'
-import { Editor, type WordWrapProcessor } from '~/src/ui/Editor.tsx'
+import { Editor, Widget, type WordWrapProcessor } from '~/src/ui/Editor.tsx'
 import { H2 } from '~/src/ui/Heading.tsx'
 
 export function EditorDemo({ width, height }: {
@@ -14,7 +14,7 @@ export function EditorDemo({ width, height }: {
 
   const wordWrapProcessor: WordWrapProcessor = {
     pre(input: string) {
-      return input.replace(/\[(\w+)([^\]]+)\]/g, (_: any, word: string, chunk: string) => {
+      return input.replace(/\[(\w+)([^\]\n]+)\]/g, (_: any, word: string, chunk: string) => {
         const c = chunk.replace(/\s/g, '\u0000')
         return `[${word}${c}]`
       })
@@ -30,6 +30,8 @@ export function EditorDemo({ width, height }: {
     width,
     height,
     code: `\
+
+
 [sin 300] [tri 444] [sqr 555] @ \
 [lp 300 .8] [dly 16 1 /] [ppd (3 4 5)] \
 [ar 10 50] *
@@ -57,11 +59,49 @@ export function EditorDemo({ width, height }: {
     width: info.$.width,
     height: info.$.height,
     code: info.$.code,
-    colorize: colorize,
-    tokenize: tokenize,
-    wordWrapProcessor: wordWrapProcessor,
+    colorize,
+    tokenize,
+    wordWrapProcessor,
   })
 
+  const shapes = editor.widgets.gfx.createShapes()
+  editor.widgets.gfx.scene.add(shapes)
+
+  const d1 = Widget()
+  function drawRect(this: Widget, c: CanvasRenderingContext2D) {
+    const r = this.rect
+    c.strokeStyle = '#666'
+    c.strokeRect(r.x, r.y, r.w, r.h)
+  }
+  d1.draw = drawRect
+  d1.bounds.line = 2
+  d1.bounds.bottom = 2
+  d1.bounds.right = 9
+  d1.bounds.length = 9
+  editor.widgets.deco.add(d1)
+
+  const d2 = Widget()
+  const box = shapes.Box(d2.rect)
+  box.view.color = 0xff00ff
+  // d2.draw = () => {}
+  d2.bounds.line = 2
+  d2.bounds.col = 10
+  d2.bounds.bottom = 2
+  d2.bounds.right = 19
+  d2.bounds.length = 9
+  editor.widgets.deco.add(d2)
+
+  const d3 = Widget()
+  d3.draw = drawRect
+  d3.bounds.line = 2
+  d3.bounds.col = 10
+  d3.bounds.bottom = 2
+  d3.bounds.right = 19
+  d3.bounds.length = 9
+  editor.widgets.subs.add(d3)
+
+  editor.widgets.update()
+
   const el = <div>
     <div class="flex items-center justify-between">
       <H2>Editor demo</H2>
diff --git a/src/ui/Editor.tsx b/src/ui/Editor.tsx
index 0b8e5d0..2022a4c 100644
--- a/src/ui/Editor.tsx
+++ b/src/ui/Editor.tsx
@@ -1,9 +1,9 @@
 import { Sigui, type Signal } from 'sigui'
 import { dom, isMobile } from 'utils'
 import type { Source, Token } from '~/src/lang/tokenize.ts'
-import { Buffer, Caret, Dims, Kbd, Misc, View, Widgets, type WordWrapProcessor } from '~/src/ui/editor/index.ts'
+import { Buffer, Caret, Dims, Kbd, Misc, View, type WordWrapProcessor } from '~/src/ui/editor/index.ts'
 
-export * from '~/src/ui/editor/index.ts'
+export { Widget, type WordWrapProcessor } from '~/src/ui/editor/index.ts'
 
 export function Editor({ code, width, height, colorize, tokenize, wordWrapProcessor }: {
   code: Signal<string>
diff --git a/src/ui/editor/caret.ts b/src/ui/editor/caret.ts
index 32d6fa9..5f64d9c 100644
--- a/src/ui/editor/caret.ts
+++ b/src/ui/editor/caret.ts
@@ -173,17 +173,16 @@ export function Caret({ buffer, dims, misc }: {
     caret.visualXIntent = caret.visual.x
   }
 
-  function draw(c: CanvasRenderingContext2D) {
+  function draw(c: CanvasRenderingContext2D, point: Point) {
     const { isVisible } = caret
     if (!isVisible) return
 
-    const { caretWidth, charWidth, charHeight, lineHeight } = dims.info
-    const { x, y } = caret.visual
+    const { caretWidth, charHeight } = dims.info
 
     c.fillStyle = '#fff'
     c.fillRect(
-      x * charWidth,
-      y * lineHeight + .5,
+      point.x,
+      point.y + .5,
       caretWidth,
       charHeight
     )
diff --git a/src/ui/editor/kbd.tsx b/src/ui/editor/kbd.tsx
index e2fda11..6a19232 100644
--- a/src/ui/editor/kbd.tsx
+++ b/src/ui/editor/kbd.tsx
@@ -24,7 +24,7 @@ export function Kbd({ buffer, caret }: {
     "
   /> as HTMLTextAreaElement
 
-  const ignoredKeys = 'cvxjrtn=+-'
+  const ignoredKeys = 'zycvxjrtn=+-'
 
   // read keyboard input
   $.fx(() => [
diff --git a/src/ui/editor/view.tsx b/src/ui/editor/view.tsx
index c7103d1..02fd8de 100644
--- a/src/ui/editor/view.tsx
+++ b/src/ui/editor/view.tsx
@@ -4,10 +4,15 @@ import { Anim } from '~/src/as/gfx/anim.ts'
 import type { Token } from '~/src/lang/tokenize.ts'
 import { screen } from '~/src/screen.ts'
 import { Canvas } from '~/src/ui/Canvas.tsx'
-import { Point, Widgets } from '~/src/ui/Editor.tsx'
-import { Buffer } from '~/src/ui/editor/buffer.ts'
-import { Caret } from '~/src/ui/editor/caret.ts'
-import { Dims } from '~/src/ui/editor/dims.ts'
+import { Buffer, Caret, Dims, Point, Widgets } from '~/src/ui/editor/index.ts'
+
+interface TokenDrawInfo {
+  point: Point
+  fill: string
+  stroke: string
+}
+
+export type View = ReturnType<typeof View>
 
 export function View({ width, height, dims, caret, buffer, colorize }: {
   width: Signal<number>
@@ -37,49 +42,100 @@ export function View({ width, height, dims, caret, buffer, colorize }: {
   const anim = Anim()
   anim.ticks.add(draw)
 
-  // wait for fonts to load
-  document.fonts.ready.then(() => {
-    info.c = c
+  // draw info
+  const tokenDrawInfo = new WeakMap<Token, TokenDrawInfo>()
+  let caretPoint = Point()
+  let extraHeights: number[] = []
 
-    // measure char width and height
-    const metrics = c.measureText('M')
-    dims.info.charWidth = metrics.width
-    dims.info.charHeight = Math.ceil(metrics.fontBoundingBoxDescent - metrics.fontBoundingBoxAscent)
-  })
+  function pointFromLinecol({ line, col }: { line: number, col: number }) {
+    const { charWidth, lineHeight } = dims.info
+
+    const p = Point()
+    p.x = col * charWidth
 
-  const p: Point = Point()
+    let top = 0
+    for (let y = 0; y <= line; y++) {
+      let l = widgets.lines.get(y)
+      if (l) top += l.deco
+      if (y === line) p.y = top
+      top += lineHeight
+      if (l) top += l.subs
+    }
 
-  function pointFromLinecol({ line, col }: { line: number, col: number }, charWidth: number, lineHeight: number) {
-    p.x = 1 + col * charWidth
-    p.y = 1 + line * lineHeight
     return p
   }
 
-  function draw() {
-    const { c, width, height } = $.of(info)
+  // update token draw info
+  $.fx(() => {
+    const { tokens, linesVisual } = buffer.info
     const { charWidth, lineHeight } = dims.info
-    const { y: cy } = caret.info.visual
 
-    // draw widgets
-    widgets.draw()
+    $()
 
-    // clear editor
-    c.clearRect(0, 0, width, height)
+    const lastVisibleLine = linesVisual.length
+    let eh = 0
+    extraHeights = Array.from({ length: lastVisibleLine }, (_, y) => {
+      let curr = eh
+      const line = linesVisual[y]
+      if (!line.text.trim().length) eh += lineHeight
+      else eh = 0
+      return curr
+    })
 
-    // highlight line
-    c.fillStyle = '#333'
-    c.fillRect(0, Math.floor(cy * lineHeight), width, lineHeight - 2)
+    widgets.deco.forEach(w => {
+      const b = w.bounds
+      const p = pointFromLinecol(b)
+      w.rect.x = p.x
+      w.rect.y = p.y - widgets.heights.deco - extraHeights[b.line]
+      w.rect.w = (b.right - b.col) * charWidth
+      w.rect.h = widgets.heights.deco + extraHeights[b.line]
+    })
 
-    // draw text
-    buffer.info.tokens.forEach(token => {
-      const p = pointFromLinecol(token, charWidth, lineHeight)
+    widgets.subs.forEach(w => {
+      const b = w.bounds
+      const p = pointFromLinecol(b)
+      w.rect.x = p.x
+      w.rect.y = p.y + lineHeight
+      w.rect.w = (b.right - b.col) * charWidth
+      w.rect.h = widgets.heights.subs
+    })
+
+    widgets.mark.forEach(w => {
+      const b = w.bounds
+      const p = pointFromLinecol(b)
+      w.rect.x = p.x
+      w.rect.y = p.y
+      w.rect.w = (b.right - b.col) * charWidth
+      w.rect.h = lineHeight
+    })
+
+    tokens.forEach(token => {
+      const point = pointFromLinecol(token)
       const { fill, stroke } = colorize(token)
-      drawText(c, p, token.text, fill, .025, stroke)
+      tokenDrawInfo.set(token, {
+        point,
+        fill,
+        stroke,
+      })
     })
+  })
 
-    // draw caret
-    caret.draw(c)
-  }
+  $.fx(() => {
+    const { tokens } = buffer.info
+    const { x, y } = caret.visual
+    $()
+    caretPoint = pointFromLinecol({ line: y, col: x })
+  })
+
+  // wait for fonts to load
+  document.fonts.ready.then(() => {
+    info.c = c
+
+    // measure char width and height
+    const metrics = c.measureText('M')
+    dims.info.charWidth = metrics.width
+    dims.info.charHeight = Math.ceil(metrics.fontBoundingBoxDescent - metrics.fontBoundingBoxAscent)
+  })
 
   // initialize canvas context settings
   $.fx(() => {
@@ -111,5 +167,38 @@ export function View({ width, height, dims, caret, buffer, colorize }: {
     anim.info.epoch++
   })
 
+  function draw() {
+    const { c, width, height } = $.of(info)
+    const { charWidth, lineHeight } = dims.info
+    const { y: cy } = caret.visual
+
+    // clear editor
+    c.clearRect(0, 0, width, height)
+
+    c.save()
+    c.translate(1, 1)
+
+    // draw active line
+    c.fillStyle = '#333'
+    c.fillRect(0, caretPoint.y, width, lineHeight - 2)
+
+    // draw text
+    c.save()
+    c.translate(1, 1)
+    buffer.info.tokens.forEach(token => {
+      const d = tokenDrawInfo.get(token)
+      if (d) drawText(c, d.point, token.text, d.fill, .025, d.stroke)
+    })
+    c.restore()
+
+    // draw widgets
+    widgets.draw()
+
+
+    // draw caret
+    caret.draw(c, caretPoint)
+    c.restore()
+  }
+
   return { el, info, widgets, anim }
 }
diff --git a/src/ui/editor/widget.ts b/src/ui/editor/widget.ts
index 8c18ee4..c0fc36a 100644
--- a/src/ui/editor/widget.ts
+++ b/src/ui/editor/widget.ts
@@ -1,12 +1,20 @@
 import { Sigui, type Signal } from 'sigui'
 import { Gfx } from '~/src/as/gfx/gfx.ts'
+import { Rect } from '~/src/as/gfx/types.ts'
 import type { Token } from '~/src/lang/tokenize.ts'
+import type { Point } from '~/src/ui/editor/util/types.ts'
 
 function Bounds(): Token.Bounds {
   using $ = Sigui()
   return $({ line: 0, col: 0, right: 0, bottom: 0, index: 0, length: 0 })
 }
 
+interface WidgetLineInfo {
+  deco: number
+  subs: number
+  mark: number
+}
+
 export type Widgets = ReturnType<typeof Widgets>
 
 export function Widgets({ width, height, c, glCanvas }: {
@@ -21,30 +29,51 @@ export function Widgets({ width, height, c, glCanvas }: {
   const subs = new Set<Widget>()
   const mark = new Set<Widget>()
 
+  const types = ['deco', 'subs', 'mark'] as const
+
   function widgetDraw(widget: Widget) {
     widget.draw(c)
   }
 
+  const lines = new Map<number, WidgetLineInfo>()
+
+  const heights = {
+    deco: 40,
+    subs: 20,
+    mark: 16,
+  } as const
+
+  function update() {
+    lines.clear()
+    types.forEach(type => {
+      widgets[type].forEach(w => {
+        for (let y = w.bounds.line; y <= w.bounds.bottom; y++) {
+          let line = lines.get(y)
+          if (!line) lines.set(y, line = { deco: 0, subs: 0, mark: 0 })
+          line[type] = heights[type]
+        }
+      })
+    })
+  }
+
   function draw() {
+    update()
     deco.forEach(widgetDraw)
     subs.forEach(widgetDraw)
     mark.forEach(widgetDraw)
     gfx.draw()
   }
 
-  return { gfx, draw, deco, subs, mark }
+  const widgets = { gfx, update, draw, deco, subs, mark, heights, lines }
+
+  return widgets
 }
 
 export type Widget = ReturnType<typeof Widget>
 
 export function Widget() {
-  using $ = Sigui()
-
+  const rect = Rect()
   const bounds = Bounds()
-
-  const info = $({})
-
-  function draw(c?: CanvasRenderingContext2D) { }
-
-  return { info, bounds, draw }
+  function draw(c: CanvasRenderingContext2D) { }
+  return { rect, bounds, draw }
 }

From d954af63c975a2dc55de8155b5b5fdff4dc86f30 Mon Sep 17 00:00:00 2001
From: stagas <gstagas@gmail.com>
Date: Fri, 11 Oct 2024 09:04:00 +0300
Subject: [PATCH 11/25] feat: wip widgets

---
 package.json             |  1 +
 src/as/gfx/glsl.ts       |  3 +--
 src/pages/EditorDemo.tsx |  5 +++--
 src/ui/editor/view.tsx   | 44 ++++++++++++++++++++++++----------------
 style.css                | 43 ++++++++-------------------------------
 tailwind.config.js       |  6 +++++-
 6 files changed, 46 insertions(+), 56 deletions(-)

diff --git a/package.json b/package.json
index 84bead5..a1ff49b 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "postcss": "^8.4.47",
     "qrcode-terminal": "^0.12.0",
     "tailwindcss": "^3.4.13",
+    "tailwindcss-image-rendering": "^1.0.2",
     "utils": "github:stagas/utils",
     "visitor-as": "^0.11.4",
     "vite": "^5.4.8",
diff --git a/src/as/gfx/glsl.ts b/src/as/gfx/glsl.ts
index 1f6ab8f..09e5f4f 100644
--- a/src/as/gfx/glsl.ts
+++ b/src/as/gfx/glsl.ts
@@ -56,7 +56,7 @@ void main() {
     pos = (transform * vec3(quad, 1.0)).xy * u_pr;
   }
   else {
-    pos = (a_vert.xy + a_vert.zw * quad) * u_pr;
+    pos = ceil((a_vert.xy + a_vert.zw * quad) * u_pr);
   }
 
   pos /= u_screen * 0.5;
@@ -67,7 +67,6 @@ void main() {
   v_color = a_color;
 }
 `
-
 export const fragment = /*glsl*/`
 #version 300 es
 
diff --git a/src/pages/EditorDemo.tsx b/src/pages/EditorDemo.tsx
index 0e741cc..6b3c6b0 100644
--- a/src/pages/EditorDemo.tsx
+++ b/src/pages/EditorDemo.tsx
@@ -70,8 +70,9 @@ export function EditorDemo({ width, height }: {
   const d1 = Widget()
   function drawRect(this: Widget, c: CanvasRenderingContext2D) {
     const r = this.rect
-    c.strokeStyle = '#666'
-    c.strokeRect(r.x, r.y, r.w, r.h)
+    c.lineWidth = 1
+    c.fillStyle = theme.colors.sky[500]
+    c.fillRect(r.x, r.y, r.w - .75, r.h - .75)
   }
   d1.draw = drawRect
   d1.bounds.line = 2
diff --git a/src/ui/editor/view.tsx b/src/ui/editor/view.tsx
index 02fd8de..2efc321 100644
--- a/src/ui/editor/view.tsx
+++ b/src/ui/editor/view.tsx
@@ -24,9 +24,22 @@ export function View({ width, height, dims, caret, buffer, colorize }: {
 }) {
   using $ = Sigui()
 
-  const canvas = <Canvas width={width} height={height} class="absolute top-0 left-0" /> as HTMLCanvasElement
-  const glCanvas = <Canvas width={width} height={height} class="absolute top-0 left-0" /> as HTMLCanvasElement
-  const el = <div class="relative">{canvas}{glCanvas}</div> as HTMLDivElement
+  const canvas = <Canvas
+    width={width}
+    height={height}
+    class="absolute top-0 left-0 rendering-pixelated"
+  /> as HTMLCanvasElement
+
+  const glCanvas = <Canvas
+    width={width}
+    height={height}
+    class="absolute top-0 left-0 rendering-pixelated"
+  /> as HTMLCanvasElement
+
+  const el = <div class="relative">
+    {canvas}
+    {glCanvas}
+  </div> as HTMLDivElement
 
   const info = $({
     c: null as null | CanvasRenderingContext2D,
@@ -59,9 +72,12 @@ export function View({ width, height, dims, caret, buffer, colorize }: {
       if (l) top += l.deco
       if (y === line) p.y = top
       top += lineHeight
-      if (l) top += l.subs
+      if (l) top += l.subs + 2
     }
 
+    p.x = Math.floor(p.x + 1)
+    p.y = Math.floor(p.y + 1)
+
     return p
   }
 
@@ -87,16 +103,16 @@ export function View({ width, height, dims, caret, buffer, colorize }: {
       const p = pointFromLinecol(b)
       w.rect.x = p.x
       w.rect.y = p.y - widgets.heights.deco - extraHeights[b.line]
-      w.rect.w = (b.right - b.col) * charWidth
-      w.rect.h = widgets.heights.deco + extraHeights[b.line]
+      w.rect.w = ((b.right - b.col) * charWidth) | 0
+      w.rect.h = widgets.heights.deco + extraHeights[b.line] - .5
     })
 
     widgets.subs.forEach(w => {
       const b = w.bounds
       const p = pointFromLinecol(b)
       w.rect.x = p.x
-      w.rect.y = p.y + lineHeight
-      w.rect.w = (b.right - b.col) * charWidth
+      w.rect.y = p.y + lineHeight - 1
+      w.rect.w = ((b.right - b.col) * charWidth) | 0
       w.rect.h = widgets.heights.subs
     })
 
@@ -105,12 +121,13 @@ export function View({ width, height, dims, caret, buffer, colorize }: {
       const p = pointFromLinecol(b)
       w.rect.x = p.x
       w.rect.y = p.y
-      w.rect.w = (b.right - b.col) * charWidth
+      w.rect.w = ((b.right - b.col) * charWidth) | 0
       w.rect.h = lineHeight
     })
 
     tokens.forEach(token => {
       const point = pointFromLinecol(token)
+      point.y += 1
       const { fill, stroke } = colorize(token)
       tokenDrawInfo.set(token, {
         point,
@@ -142,6 +159,7 @@ export function View({ width, height, dims, caret, buffer, colorize }: {
     const { c, pr, width, height } = $.of(info)
     $()
     c.scale(pr, pr)
+    c.imageSmoothingEnabled = false
     c.textBaseline = 'top'
     c.textRendering = 'optimizeLegibility'
     c.miterLimit = 1.5
@@ -175,29 +193,21 @@ export function View({ width, height, dims, caret, buffer, colorize }: {
     // clear editor
     c.clearRect(0, 0, width, height)
 
-    c.save()
-    c.translate(1, 1)
-
     // draw active line
     c.fillStyle = '#333'
     c.fillRect(0, caretPoint.y, width, lineHeight - 2)
 
     // draw text
-    c.save()
-    c.translate(1, 1)
     buffer.info.tokens.forEach(token => {
       const d = tokenDrawInfo.get(token)
       if (d) drawText(c, d.point, token.text, d.fill, .025, d.stroke)
     })
-    c.restore()
 
     // draw widgets
     widgets.draw()
 
-
     // draw caret
     caret.draw(c, caretPoint)
-    c.restore()
   }
 
   return { el, info, widgets, anim }
diff --git a/style.css b/style.css
index fb33bdf..ea33ccd 100644
--- a/style.css
+++ b/style.css
@@ -22,46 +22,21 @@
     @apply min-h-8 pl-2 pr-2 bg-neutral-700;
   }
   button {
-    @apply
-      cursor-default
-
-      border-2
-      border-neutral-500
-      border-b-neutral-800
-      border-r-neutral-800
-
-      hover:border-neutral-400
-      hover:border-b-neutral-600
-      hover:border-r-neutral-600
-
-      hover:active:border-neutral-500
-      hover:active:border-t-neutral-700
-      hover:active:border-l-neutral-700
-      ;
+    @apply cursor-default border-2 border-neutral-500 border-b-neutral-800
+      border-r-neutral-800 hover:border-neutral-400 hover:border-b-neutral-600
+      hover:border-r-neutral-600 hover:active:border-neutral-500
+      hover:active:border-t-neutral-700 hover:active:border-l-neutral-700;
   }
   input {
-    @apply
-      border-2
-      border-neutral-500
-      border-t-neutral-800
-      border-l-neutral-800
-
-      hover:border-neutral-400
-      hover:border-t-neutral-600
-      hover:border-l-neutral-600
-
-      placeholder-neutral-500
-      ;
+    @apply border-2 border-neutral-500 border-t-neutral-800 border-l-neutral-800
+      hover:border-neutral-400 hover:border-t-neutral-600
+      hover:border-l-neutral-600 placeholder-neutral-500;
   }
   a {
     @apply text-sky-600 hover:text-sky-400 hover:underline;
   }
   table {
-    @apply
-      border-collapse
-      text-xs
-      bg-neutral-900
-      ;
+    @apply border-collapse text-xs bg-neutral-900;
   }
   tr {
     @apply even:bg-neutral-800;
@@ -77,7 +52,7 @@ input::placeholder {
 input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
-input:-webkit-autofill:active{
+input:-webkit-autofill:active {
   -webkit-box-shadow: 0 0 0 30px #666 inset !important;
   -webkit-text-fill-color: #ccc !important;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index fea3baf..90c30ca 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,3 +1,5 @@
+import imageRendering from 'tailwindcss-image-rendering'
+
 /** @type {import('tailwindcss').Config} */
 export default {
   content: [
@@ -12,5 +14,7 @@ export default {
     },
     extend: {},
   },
-  plugins: [],
+  plugins: [
+    imageRendering(),
+  ],
 }

From 0b5ef4677d5352cafd945a376bbaa933d5e9785c Mon Sep 17 00:00:00 2001
From: stagas <gstagas@gmail.com>
Date: Fri, 11 Oct 2024 15:11:55 +0300
Subject: [PATCH 12/25] feat: wip widgets working

---
 as/assembly/gfx/draw.ts              | 373 +++++++++++++++------------
 as/assembly/gfx/sketch-shared.ts     |   3 +-
 src/as/gfx/gfx.ts                    |   5 +-
 src/as/gfx/glsl.ts                   |   1 +
 src/as/gfx/index.ts                  |  11 +
 src/as/gfx/shapes.ts                 |   6 +-
 src/as/gfx/sketch-info.ts            |   6 +-
 src/as/gfx/sketch.ts                 |   5 +-
 src/as/gfx/wasm-matrix.ts            |   3 +-
 src/as/gfx/wasm.ts                   |   6 +-
 src/as/gfx/webgl.ts                  |   2 +-
 src/comp/Toast.tsx                   |   2 +-
 src/pages/App.tsx                    |   2 +-
 src/pages/EditorDemo.tsx             | 134 +++++++---
 src/ui/Editor.tsx                    |   6 +-
 src/ui/editor/util/floats.ts         |  54 ++++
 src/ui/editor/util/oklch.ts          |  57 ++++
 src/ui/editor/util/rgb.ts            |  33 +++
 src/ui/editor/util/waveform.ts       |   9 +
 src/ui/editor/view.tsx               |  36 ++-
 src/ui/editor/widget.ts              |   2 +-
 src/ui/editor/widgets/index.ts       |   1 +
 src/ui/editor/widgets/wave-canvas.ts |  56 ++++
 src/ui/editor/widgets/wave-gl.ts     |  33 +++
 src/ui/editor/widgets/wave-svg.tsx   |  62 +++++
 tsconfig.json                        |   8 +-
 26 files changed, 677 insertions(+), 239 deletions(-)
 create mode 100644 src/as/gfx/index.ts
 create mode 100644 src/ui/editor/util/floats.ts
 create mode 100644 src/ui/editor/util/oklch.ts
 create mode 100644 src/ui/editor/util/rgb.ts
 create mode 100644 src/ui/editor/util/waveform.ts
 create mode 100644 src/ui/editor/widgets/index.ts
 create mode 100644 src/ui/editor/widgets/wave-canvas.ts
 create mode 100644 src/ui/editor/widgets/wave-gl.ts
 create mode 100644 src/ui/editor/widgets/wave-svg.tsx

diff --git a/as/assembly/gfx/draw.ts b/as/assembly/gfx/draw.ts
index 63b8672..e0be920 100644
--- a/as/assembly/gfx/draw.ts
+++ b/as/assembly/gfx/draw.ts
@@ -382,6 +382,194 @@ export function draw(
       //
       // Wave
       //
+      // case ShapeOpts.Wave: {
+      //   wave = changetype<Wave>(ptr)
+
+      //   const x = f32(wave.x * ma + me)
+      //   const y = f32(wave.y * md + mf)
+      //   const w = f32(wave.w * ma - x_gap)
+      //   const h = f32(wave.h * md - 1)
+
+      //   // check if visible
+      //   if (x > width
+      //     || y > height
+      //     || x + w < 0
+      //     || y + h < 0
+      //   ) continue
+
+      //   //
+      //   // sample coeff for zoom level
+      //   //
+      //   let sample_coeff: f64 = f64((NUM_SAMPLES / wave.coeff / 2.0) / ma)
+
+      //   //
+      //   // setup wave pointers
+      //   //
+      //   let p = i32(wave.floats$)
+      //   let p_index: i32 = 0
+      //   let n: f64 = 0
+      //   let n_len = f64(wave.len)
+
+      //   //
+      //   // determine right edge
+      //   //
+      //   let right = x + w
+
+      //   //
+      //   // determine left edge (cx)
+      //   //
+      //   let cx: f64 = f64(x)
+      //   let ox: f32 = 0
+      //   // if left edge is offscreen
+      //   if (cx < 0) {
+      //     ox = -x
+      //     cx = 0
+      //   }
+
+      //   //
+      //   // determine width (cw)
+      //   //
+      //   let cw: f32 = w
+      //   let ow: f32 = 0
+      //   // if right edge if offscreen
+      //   if (right > width) {
+      //     // logf(444)
+      //     ow = right - width
+      //     cw = f32(width - cx)
+      //     right = width
+      //   }
+      //   // or if left edge is offscreen
+      //   else if (x < 0) {
+      //     cw -= ox
+      //   }
+
+      //   let x_step: f64 = f64(ma / NUM_SAMPLES)
+      //   let n_step: f64 = 1.0
+      //   let mul: f64 = 1.0
+      //   let lw: f32 = 1.1
+
+      //   let waveMode: WaveMode = WaveMode.Scaled
+
+      //   for (let i = 0; i < WAVE_MIPMAPS; i++) {
+      //     const threshold = WAVE_MIPMAPS_THRESHOLD / (2 ** i)
+      //     if (ma < threshold) {
+      //       waveMode = WaveMode.Normal
+      //       p_index += i32(Math.floor(n_len))
+      //       n_len = Math.floor(n_len / 2.0)
+      //       mul *= 2.0
+      //       x_step *= 2.0
+      //       lw = 1.1 - (0.8 * (1 -
+      //         (f32(ma / WAVE_MIPMAPS_THRESHOLD) ** .35)
+      //       ))
+      //     }
+      //     else {
+      //       break
+      //     }
+      //   }
+
+      //   n_step = sample_coeff / (mul / x_step)
+
+      //   p += p_index << 2
+
+      //   const hh: f32 = h / 2
+      //   const yh = y + hh
+
+      //   // advance the pointer if left edge is offscreen
+      //   if (ox) {
+      //     n += Math.floor(ox / x_step)
+      //   }
+      //   n = Math.floor(n)
+
+      //   let nx = (n * n_step) % n_len
+
+      //   switch (waveMode) {
+      //     case WaveMode.Scaled: {
+      //       let nfrac = nx - Math.floor(nx)
+
+      //       let x0 = f32(cx)
+      //       let y0 = yh + readSampleLerp(p, f32(nx), nfrac) * hh
+
+      //       if (opts & ShapeOpts.Join) {
+      //         sketch.drawLine(
+      //           px, py,
+      //           x0, y0,
+      //           wave.color, wave.alpha,
+      //           lw
+      //         )
+      //       }
+
+      //       do {
+      //         cx += x_step
+      //         nx += n_step
+      //         if (nx >= n_len) nx -= n_len
+
+      //         nfrac = nx - Math.floor(nx)
+
+      //         const x1 = f32(cx)
+      //         const y1 = yh + readSampleLerp(p, f32(nx), nfrac) * hh
+
+      //         sketch.drawLine(
+      //           x0, y0,
+      //           x1, y1,
+      //           wave.color, wave.alpha,
+      //           lw
+      //         )
+
+      //         x0 = x1
+      //         y0 = y1
+      //       } while (cx < right)
+
+      //       px = x0
+      //       py = y0
+
+      //       break
+      //     }
+
+      //     case WaveMode.Normal: {
+      //       let s = f32.load(p + (i32(nx) << 2))
+
+      //       // move to v0
+      //       let x0 = f32(cx)
+      //       let y0 = yh + s * hh
+
+      //       if (opts & ShapeOpts.Join) {
+      //         sketch.drawLine(
+      //           px, py,
+      //           x0, y0,
+      //           wave.color, wave.alpha,
+      //           lw
+      //         )
+      //       }
+
+      //       do {
+      //         cx += x_step
+      //         nx += n_step
+      //         if (nx >= n_len) nx -= n_len
+
+      //         const x1 = f32(cx)
+      //         const y1 = yh + f32.load(p + (i32(nx) << 2)) * hh
+
+      //         sketch.drawLine(
+      //           x0, y0,
+      //           x1, y1,
+      //           wave.color, wave.alpha,
+      //           lw
+      //         )
+
+      //         x0 = x1
+      //         y0 = y1
+      //       } while (cx < right)
+
+      //       px = x0
+      //       py = y0
+
+      //       break
+      //     }
+      //   }
+
+      //   continue
+      // }
+
       case ShapeOpts.Wave: {
         wave = changetype<Wave>(ptr)
 
@@ -397,175 +585,44 @@ export function draw(
           || y + h < 0
         ) continue
 
-        //
-        // sample coeff for zoom level
-        //
-        let sample_coeff: f64 = f64((NUM_SAMPLES / wave.coeff / 2.0) / ma)
-
-        //
-        // setup wave pointers
-        //
+        let nx: f32 = 0
         let p = i32(wave.floats$)
-        let p_index: i32 = 0
-        let n: f64 = 0
-        let n_len = f64(wave.len)
-
-        //
-        // determine right edge
-        //
-        let right = x + w
-
-        //
-        // determine left edge (cx)
-        //
-        let cx: f64 = f64(x)
-        let ox: f32 = 0
-        // if left edge is offscreen
-        if (cx < 0) {
-          ox = -x
-          cx = 0
-        }
-
-        //
-        // determine width (cw)
-        //
-        let cw: f32 = w
-        let ow: f32 = 0
-        // if right edge if offscreen
-        if (right > width) {
-          // logf(444)
-          ow = right - width
-          cw = f32(width - cx)
-          right = width
-        }
-        // or if left edge is offscreen
-        else if (x < 0) {
-          cw -= ox
-        }
-
-        let x_step: f64 = f64(ma / NUM_SAMPLES)
-        let n_step: f64 = 1.0
-        let mul: f64 = 1.0
-        let lw: f32 = 1.1
-
-        let waveMode: WaveMode = WaveMode.Scaled
-
-        for (let i = 0; i < WAVE_MIPMAPS; i++) {
-          const threshold = WAVE_MIPMAPS_THRESHOLD / (2 ** i)
-          if (ma < threshold) {
-            waveMode = WaveMode.Normal
-            p_index += i32(Math.floor(n_len))
-            n_len = Math.floor(n_len / 2.0)
-            mul *= 2.0
-            x_step *= 2.0
-            lw = 1.1 - (0.8 * (1 -
-              (f32(ma / WAVE_MIPMAPS_THRESHOLD) ** .35)
-            ))
-          }
-          else {
-            break
-          }
-        }
-
-        n_step = sample_coeff / (mul / x_step)
-
-        p += p_index << 2
-
-        const hh: f32 = h / 2
-        const yh = y + hh
-
-        // advance the pointer if left edge is offscreen
-        if (ox) {
-          n += Math.floor(ox / x_step)
-        }
-        n = Math.floor(n)
-
-        let nx = (n * n_step) % n_len
 
-        switch (waveMode) {
-          case WaveMode.Scaled: {
-            let nfrac = nx - Math.floor(nx)
+        let x_step: f32 = .5
+        let s: f32 = f32.load(p + (i32(nx) << 2))
+        let n_step = wave.coeff / (1.0 / x_step)
 
-            let x0 = f32(cx)
-            let y0 = yh + readSampleLerp(p, f32(nx), nfrac) * hh
-
-            if (opts & ShapeOpts.Join) {
-              sketch.drawLine(
-                px, py,
-                x0, y0,
-                wave.color, wave.alpha,
-                lw
-              )
-            }
-
-            do {
-              cx += x_step
-              nx += n_step
-              if (nx >= n_len) nx -= n_len
-
-              nfrac = nx - Math.floor(nx)
-
-              const x1 = f32(cx)
-              const y1 = yh + readSampleLerp(p, f32(nx), nfrac) * hh
-
-              sketch.drawLine(
-                x0, y0,
-                x1, y1,
-                wave.color, wave.alpha,
-                lw
-              )
-
-              x0 = x1
-              y0 = y1
-            } while (cx < right)
-
-            px = x0
-            py = y0
-
-            break
-          }
-
-          case WaveMode.Normal: {
-            let s = f32.load(p + (i32(nx) << 2))
+        let cx = x
+        let right = x + w
 
-            // move to v0
-            let x0 = f32(cx)
-            let y0 = yh + s * hh
+        let x0 = cx
+        let y0 = y + h * (s * 0.5 + 0.5)
 
-            if (opts & ShapeOpts.Join) {
-              sketch.drawLine(
-                px, py,
-                x0, y0,
-                wave.color, wave.alpha,
-                lw
-              )
-            }
+        let lw = wave.lw
 
-            do {
-              cx += x_step
-              nx += n_step
-              if (nx >= n_len) nx -= n_len
+        let x1: f32
+        let y1: f32
 
-              const x1 = f32(cx)
-              const y1 = yh + f32.load(p + (i32(nx) << 2)) * hh
+        do {
+          cx += x_step
+          nx += n_step
+          if (cx >= right) break
 
-              sketch.drawLine(
-                x0, y0,
-                x1, y1,
-                wave.color, wave.alpha,
-                lw
-              )
+          s = f32.load(p + (i32(nx) << 2))
 
-              x0 = x1
-              y0 = y1
-            } while (cx < right)
+          x1 = cx
+          y1 = y + h * (s * 0.5 + 0.5)
 
-            px = x0
-            py = y0
+          sketch.drawLine(
+            x0, y0,
+            x1, y1,
+            wave.color, wave.alpha,
+            lw
+          )
 
-            break
-          }
-        }
+          x0 = x1
+          y0 = y1
+        } while (cx < right)
 
         continue
       }
diff --git a/as/assembly/gfx/sketch-shared.ts b/as/assembly/gfx/sketch-shared.ts
index be13ad4..0e9d384 100644
--- a/as/assembly/gfx/sketch-shared.ts
+++ b/as/assembly/gfx/sketch-shared.ts
@@ -1,6 +1,7 @@
 const PAGE_BYTES = 1024
 export const MAX_BYTES = PAGE_BYTES * 32
 export const MAX_GL_INSTANCES = MAX_BYTES >> 2
+export const WAVE_MIPMAPS = 13
 
 export enum VertOpts {
   Box /* */ = 0b001,
@@ -23,8 +24,6 @@ export enum ShapeOpts {
   Shadow /*   */ = 0b0010_0000_0000_0000,
 }
 
-export const WAVE_MIPMAPS = 13
-
 @unmanaged
 export class Shape {
   opts: f32 = f32(ShapeOpts.Box)
diff --git a/src/as/gfx/gfx.ts b/src/as/gfx/gfx.ts
index 56403eb..9324de4 100644
--- a/src/as/gfx/gfx.ts
+++ b/src/as/gfx/gfx.ts
@@ -1,8 +1,5 @@
+import { Matrix, Rect, Shapes, Sketch, WebGL } from 'gfx'
 import { Sigui, type Signal } from 'sigui'
-import { Shapes } from '~/src/as/gfx/shapes.ts'
-import { Sketch } from '~/src/as/gfx/sketch.ts'
-import { Matrix, Rect } from '~/src/as/gfx/types.ts'
-import { WebGL } from '~/src/as/gfx/webgl.ts'
 
 export function Gfx({ width, height, canvas }: {
   width: Signal<number>
diff --git a/src/as/gfx/glsl.ts b/src/as/gfx/glsl.ts
index 09e5f4f..bca423e 100644
--- a/src/as/gfx/glsl.ts
+++ b/src/as/gfx/glsl.ts
@@ -62,6 +62,7 @@ void main() {
   pos /= u_screen * 0.5;
   pos -= 1.0;
   pos.y *= -1.0;
+
   gl_Position = vec4(pos, 0.0, 1.0);
 
   v_color = a_color;
diff --git a/src/as/gfx/index.ts b/src/as/gfx/index.ts
new file mode 100644
index 0000000..032324b
--- /dev/null
+++ b/src/as/gfx/index.ts
@@ -0,0 +1,11 @@
+export * from './anim.ts'
+export * from './gfx.ts'
+export * from './glsl.ts'
+export * from './mesh-info.ts'
+export * from './shapes.ts'
+export * from './sketch-info.ts'
+export * from './sketch.ts'
+export * from './types.ts'
+export * from './wasm-matrix.ts'
+export * from './wasm.ts'
+export * from './webgl.ts'
diff --git a/src/as/gfx/shapes.ts b/src/as/gfx/shapes.ts
index 4385719..d256133 100644
--- a/src/as/gfx/shapes.ts
+++ b/src/as/gfx/shapes.ts
@@ -1,9 +1,7 @@
+import { wasm, WasmMatrix, type Matrix, type Rect } from 'gfx'
 import { Sigui } from 'sigui'
 import { PointLike, Struct } from 'utils'
-import { Box, Line, Params, ShapeOpts, Wave, type Notes } from '~/as/assembly/gfx/sketch-shared.ts'
-import type { Matrix, Rect } from '~/src/as/gfx/types.ts'
-import { WasmMatrix } from '~/src/as/gfx/wasm-matrix.ts'
-import wasm from '~/src/as/gfx/wasm.ts'
+import { ShapeOpts, type Box, type Line, type Notes, type Params, type Wave } from '~/as/assembly/gfx/sketch-shared.ts'
 
 export namespace Shape {
   // Box
diff --git a/src/as/gfx/sketch-info.ts b/src/as/gfx/sketch-info.ts
index 5fb72ed..d6d0fbd 100644
--- a/src/as/gfx/sketch-info.ts
+++ b/src/as/gfx/sketch-info.ts
@@ -1,11 +1,7 @@
+import { type Shapes, fragment, MeshInfo, Rect, vertex, wasm } from 'gfx'
 import { GL } from 'gl-util'
 import { Sigui } from 'sigui'
 import { MAX_GL_INSTANCES } from '~/as/assembly/gfx/sketch-shared.ts'
-import { fragment, vertex } from '~/src/as/gfx/glsl.ts'
-import { MeshInfo } from '~/src/as/gfx/mesh-info.ts'
-import type { Shapes } from '~/src/as/gfx/shapes.ts'
-import { Rect } from '~/src/as/gfx/types.ts'
-import wasm from '~/src/as/gfx/wasm.ts'
 
 const DEBUG = true
 
diff --git a/src/as/gfx/sketch.ts b/src/as/gfx/sketch.ts
index 09813d5..9ef95c4 100644
--- a/src/as/gfx/sketch.ts
+++ b/src/as/gfx/sketch.ts
@@ -1,8 +1,5 @@
+import { SketchInfo, wasm, type Rect, type Shapes } from 'gfx'
 import { GL } from 'gl-util'
-import type { Shapes } from '~/src/as/gfx/shapes.ts'
-import { SketchInfo } from '~/src/as/gfx/sketch-info.ts'
-import { type Rect } from '~/src/as/gfx/types.ts'
-import wasm from '~/src/as/gfx/wasm.ts'
 
 const DEBUG = true
 
diff --git a/src/as/gfx/wasm-matrix.ts b/src/as/gfx/wasm-matrix.ts
index ce69550..071853a 100644
--- a/src/as/gfx/wasm-matrix.ts
+++ b/src/as/gfx/wasm-matrix.ts
@@ -1,6 +1,5 @@
+import { wasm, type Matrix, type Rect } from 'gfx'
 import { Sigui } from 'sigui'
-import type { Matrix, Rect } from '~/src/as/gfx/types.ts'
-import wasm from '~/src/as/gfx/wasm.ts'
 
 const DEBUG = false
 
diff --git a/src/as/gfx/wasm.ts b/src/as/gfx/wasm.ts
index 9c3e0fc..a0142f0 100644
--- a/src/as/gfx/wasm.ts
+++ b/src/as/gfx/wasm.ts
@@ -19,7 +19,7 @@ function setFlushSketchFn(fn: (count: number) => void) {
   flushSketchFn = fn
 }
 
-const wasm = await instantiate(mod, {
+const wasmInstance = await instantiate(mod, {
   env: {
     log: console.log,
     flushSketch(count: number) {
@@ -28,6 +28,6 @@ const wasm = await instantiate(mod, {
   }
 })
 
-const { alloc } = initWasm(wasm)
+const { alloc } = initWasm(wasmInstance)
 
-export default Object.assign(wasm, { alloc, setFlushSketchFn })
+export const wasm = Object.assign(wasmInstance, { alloc, setFlushSketchFn })
diff --git a/src/as/gfx/webgl.ts b/src/as/gfx/webgl.ts
index c3af8eb..d582bae 100644
--- a/src/as/gfx/webgl.ts
+++ b/src/as/gfx/webgl.ts
@@ -1,6 +1,6 @@
+import type { Rect } from 'gfx'
 import { GL, initGL } from 'gl-util'
 import { Sigui } from 'sigui'
-import { Rect } from '~/src/as/gfx/types.ts'
 
 const DEBUG = true
 
diff --git a/src/comp/Toast.tsx b/src/comp/Toast.tsx
index 5d38fd1..d03b734 100644
--- a/src/comp/Toast.tsx
+++ b/src/comp/Toast.tsx
@@ -2,7 +2,7 @@ import { state } from '~/src/state.ts'
 
 export function Toast() {
   return <div>
-    {() => state.toastMessages.length ? <div class="fixed w-[70%] p-4 bottom-0 right-0 flex flex-col gap-2">
+    {() => state.toastMessages.length ? <div class="fixed w-[70%] p-4 bottom-0 right-0 flex flex-col gap-2 z-50">
       {() => state.toastMessages.map(item =>
         <div class="bg-black min-w-full p-2 border border-white-500 text-sm overflow-hidden text-ellipsis whitespace-pre" onmousedown={() => {
           state.toastMessages = state.toastMessages.filter(i => i !== item)
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
index e36e1b9..a5d0635 100644
--- a/src/pages/App.tsx
+++ b/src/pages/App.tsx
@@ -29,7 +29,7 @@ export function App() {
   const info = $({
     bg: 'transparent',
     canvasWidth: state.$.containerWidth,
-    canvasHeight: 500,
+    canvasHeight: 800,
   })
 
   const router = CachingRouter({
diff --git a/src/pages/EditorDemo.tsx b/src/pages/EditorDemo.tsx
index 6b3c6b0..6591e60 100644
--- a/src/pages/EditorDemo.tsx
+++ b/src/pages/EditorDemo.tsx
@@ -1,9 +1,15 @@
+import type { WordWrapProcessor } from 'editor'
+import { wasm } from 'gfx'
 import { Sigui, type Signal } from 'sigui'
 import { AnimMode } from '~/src/comp/AnimMode.tsx'
 import { Token, tokenize } from '~/src/lang/tokenize.ts'
 import { screen } from '~/src/screen.ts'
 import { theme } from '~/src/theme.ts'
-import { Editor, Widget, type WordWrapProcessor } from '~/src/ui/Editor.tsx'
+import { Editor } from '~/src/ui/Editor.tsx'
+import { makeWaveform, waveform } from '~/src/ui/editor/util/waveform.ts'
+import { WaveCanvasWidget } from '~/src/ui/editor/widgets/index.ts'
+import { WaveGlWidget } from '~/src/ui/editor/widgets/wave-gl.ts'
+import { WaveSvgWidget } from '~/src/ui/editor/widgets/wave-svg.tsx'
 import { H2 } from '~/src/ui/Heading.tsx'
 
 export function EditorDemo({ width, height }: {
@@ -34,7 +40,7 @@ export function EditorDemo({ width, height }: {
 
 [sin 300] [tri 444] [sqr 555] @ \
 [lp 300 .8] [dly 16 1 /] [ppd (3 4 5)] \
-[ar 10 50] *
+[ar 10 50] * \
 `,
   })
 
@@ -67,42 +73,100 @@ export function EditorDemo({ width, height }: {
   const shapes = editor.widgets.gfx.createShapes()
   editor.widgets.gfx.scene.add(shapes)
 
-  const d1 = Widget()
-  function drawRect(this: Widget, c: CanvasRenderingContext2D) {
-    const r = this.rect
-    c.lineWidth = 1
-    c.fillStyle = theme.colors.sky[500]
-    c.fillRect(r.x, r.y, r.w - .75, r.h - .75)
-  }
-  d1.draw = drawRect
-  d1.bounds.line = 2
-  d1.bounds.bottom = 2
-  d1.bounds.right = 9
-  d1.bounds.length = 9
-  editor.widgets.deco.add(d1)
-
-  const d2 = Widget()
-  const box = shapes.Box(d2.rect)
-  box.view.color = 0xff00ff
-  // d2.draw = () => {}
-  d2.bounds.line = 2
-  d2.bounds.col = 10
-  d2.bounds.bottom = 2
-  d2.bounds.right = 19
-  d2.bounds.length = 9
-  editor.widgets.deco.add(d2)
-
-  const d3 = Widget()
-  d3.draw = drawRect
-  d3.bounds.line = 2
-  d3.bounds.col = 10
-  d3.bounds.bottom = 2
-  d3.bounds.right = 19
-  d3.bounds.length = 9
-  editor.widgets.subs.add(d3)
+  ///////////////////
+  const floats = Object.assign(
+    wasm.alloc(Float32Array, waveform.length),
+    { len: waveform.length }
+  )
+  floats.set(waveform)
+
+  $.fx(() => {
+    const { tokens } = editor.buffer.info
+    $()
+    const gens: Token[][] = []
+
+    let depth = 0
+    let gen: Token[] = []
+    for (const token of tokens) {
+      if (token.text === '[') {
+        depth++
+      }
+      else if (token.text === ']') {
+        gen.push(token)
+        depth--
+        if (!depth) {
+          gens.push(gen)
+          gen = []
+        }
+      }
+      if (depth) gen.push(token)
+    }
+
+    // const decos = gens.map(gen => {
+    //   const d = WaveSvgWidget()
+    //   d.info.floats = floats
+    //   Object.assign(d.widget.bounds, Token.bounds(gen))
+    //   editor.widgets.deco.add(d.widget)
+    //   editor.view.info.svgs.add(d.svg)
+    //   editor.view.info.svgs = new Set(editor.view.info.svgs)
+    //   return d
+    // })
+
+    // const decos = gens.map(gen => {
+    //   const d = WaveCanvasWidget()
+    //   d.info.floats = floats
+    //   Object.assign(d.widget.bounds, Token.bounds(gen))
+    //   editor.widgets.deco.add(d.widget)
+    //   return d
+    // })
+
+    // const decos = gens.map(gen => {
+    //   const d = WaveGlWidget(shapes)
+    //   d.info.floats = floats
+    //   Object.assign(d.widget.bounds, Token.bounds(gen))
+    //   editor.widgets.deco.add(d.widget)
+    //   return d
+    // })
 
+    const d = WaveCanvasWidget()
+    d.info.floats = floats
+    Object.assign(d.widget.bounds, Token.bounds(gens[0]))
+    editor.widgets.deco.add(d.widget)
+
+    const d2 = WaveGlWidget(shapes)
+    d2.info.floats = floats
+    Object.assign(d2.widget.bounds, Token.bounds(gens[1]))
+    editor.widgets.deco.add(d2.widget)
+
+    const d3 = WaveSvgWidget()
+    d3.info.floats = floats
+    Object.assign(d3.widget.bounds, Token.bounds(gens[2]))
+    editor.widgets.deco.add(d3.widget)
+    editor.view.info.svgs.add(d3.svg)
+    editor.view.info.svgs = new Set(editor.view.info.svgs)
+
+    return () => {
+      // decos.forEach(d => {
+      editor.widgets.deco.delete(d.widget)
+      //   d.dispose()
+      // })
+      editor.widgets.deco.delete(d2.widget)
+      d2.dispose()
+      editor.widgets.deco.delete(d3.widget)
+      editor.view.info.svgs.delete(d3.svg)
+      editor.view.info.svgs = new Set(editor.view.info.svgs)
+    }
+  })
   editor.widgets.update()
 
+  let t = 101
+  // editor.anim.ticks.add(() => {
+  floats.set(makeWaveform(2048, t += 1, 1 + Math.sin(t * 0.025) * 59))
+  //   return true
+  // })
+
+  ///////////////////
+
   const el = <div>
     <div class="flex items-center justify-between">
       <H2>Editor demo</H2>
diff --git a/src/ui/Editor.tsx b/src/ui/Editor.tsx
index 2022a4c..bb22671 100644
--- a/src/ui/Editor.tsx
+++ b/src/ui/Editor.tsx
@@ -1,9 +1,7 @@
 import { Sigui, type Signal } from 'sigui'
 import { dom, isMobile } from 'utils'
 import type { Source, Token } from '~/src/lang/tokenize.ts'
-import { Buffer, Caret, Dims, Kbd, Misc, View, type WordWrapProcessor } from '~/src/ui/editor/index.ts'
-
-export { Widget, type WordWrapProcessor } from '~/src/ui/editor/index.ts'
+import { Buffer, Caret, Dims, Kbd, Misc, View, type WordWrapProcessor } from 'editor'
 
 export function Editor({ code, width, height, colorize, tokenize, wordWrapProcessor }: {
   code: Signal<string>
@@ -59,5 +57,5 @@ export function Editor({ code, width, height, colorize, tokenize, wordWrapProces
     {kbd}
   </div> as HTMLDivElement
 
-  return { el, focus, buffer, anim: view.anim, widgets: view.widgets }
+  return { el, focus, buffer, view, anim: view.anim, widgets: view.widgets }
 }
diff --git a/src/ui/editor/util/floats.ts b/src/ui/editor/util/floats.ts
new file mode 100644
index 0000000..f53a99e
--- /dev/null
+++ b/src/ui/editor/util/floats.ts
@@ -0,0 +1,54 @@
+import wasm from '~/src/as/gfx/wasm.ts'
+import { WAVE_MIPMAPS } from '~/as/assembly/gfx/sketch-shared.ts'
+
+export type Floats = ReturnType<typeof Floats>
+
+export function Floats(waveform: Float32Array) {
+  const len = waveform.length
+
+  const targets = Array.from({ length: WAVE_MIPMAPS }, (_, i) => ({
+    divisor: 2 ** (i + 1),
+    len: 0,
+    ptr: 0
+  }))
+
+  const size = targets.reduce((p, n) => {
+    n.ptr = p
+    n.len = Math.floor(len / n.divisor)
+    return n.ptr + n.len
+  }, len)
+
+  const floats = Object.assign(
+    wasm.alloc(Float32Array, size),
+    { len }
+  )
+  floats.set(waveform)
+
+  for (const { divisor, len, ptr } of targets) {
+    for (let n = 0; n < len; n++) {
+      const n0 = Math.floor(n * divisor)
+      const n1 = Math.ceil((n + 1) * divisor)
+
+      let min = Infinity, max = -Infinity
+      let s
+      for (let i = n0; i < n1; i++) {
+        s = waveform[i]
+        if (s < min) min = s
+        if (s > max) max = s
+      }
+
+      if (
+        !isFinite(min) &&
+        !isFinite(max)
+      ) min = max = 0
+
+      if (!isFinite(min)) min = max
+      if (!isFinite(max)) max = min
+
+      const p = ptr + n
+      floats[p] = Math.abs(min) > Math.abs(max) ? min : max
+    }
+  }
+
+  return floats
+}
diff --git a/src/ui/editor/util/oklch.ts b/src/ui/editor/util/oklch.ts
new file mode 100644
index 0000000..65dd29c
--- /dev/null
+++ b/src/ui/editor/util/oklch.ts
@@ -0,0 +1,57 @@
+// chatgpt
+
+export function oklchToHex(oklchString: string): string | null {
+    // Extracting values from the oklch string
+    const match = oklchString.match(/oklch\((\d+)%\s+(\d+)\s+(\d+)\)/);
+
+    if (!match) {
+        // Invalid input format
+        return null;
+    }
+
+    const lightness = parseInt(match[1], 10);
+    const chroma = parseInt(match[2], 10);
+    const hue = parseInt(match[3], 10);
+
+    // Convert oklch to RGB
+    const rgb = oklchToRGB(lightness, chroma, hue);
+
+    // Convert RGB to hexadecimal
+    const hex = rgbToHex(rgb);
+
+    return hex;
+}
+
+function oklchToRGB(lightness: number, chroma: number, hue: number): number[] {
+    const h = hue / 360;
+    const s = chroma / 100;
+    const l = lightness / 100;
+
+    const x = chroma * (1 - Math.abs((h * 6) % 2 - 1));
+
+    let r, g, b;
+
+    if (0 <= h && h < 1) {
+        [r, g, b] = [chroma, x, 0];
+    } else if (1 <= h && h < 2) {
+        [r, g, b] = [x, chroma, 0];
+    } else if (2 <= h && h < 3) {
+        [r, g, b] = [0, chroma, x];
+    } else if (3 <= h && h < 4) {
+        [r, g, b] = [0, x, chroma];
+    } else if (4 <= h && h < 5) {
+        [r, g, b] = [x, 0, chroma];
+    } else if (5 <= h && h < 6) {
+        [r, g, b] = [chroma, 0, x];
+    } else {
+        [r, g, b] = [0, 0, 0];
+    }
+
+    const m = l - chroma / 2;
+
+    return [Math.round((r + m) * 255), Math.round((g + m) * 255), Math.round((b + m) * 255)];
+}
+
+function rgbToHex(rgb: number[]): string {
+    return '#' + rgb.map(value => value.toString(16).padStart(2, '0')).join('');
+}
diff --git a/src/ui/editor/util/rgb.ts b/src/ui/editor/util/rgb.ts
new file mode 100644
index 0000000..790c9b4
--- /dev/null
+++ b/src/ui/editor/util/rgb.ts
@@ -0,0 +1,33 @@
+import { hexToRgb } from 'utils'
+import { oklchToHex } from './oklch.ts'
+
+type f32 = number
+type i32 = number
+
+function i32(x: number) {
+  return Math.floor(x)
+}
+
+export function rgbToInt(r: f32, g: f32, b: f32): i32 {
+  return (clamp255(r * 255) << 16) | (clamp255(g * 255) << 8) | clamp255(b * 255)
+}
+
+export function hexToInt(hex: string) {
+  const [r, g, b] = hexToRgb(hex)
+  return rgbToInt(r, g, b)
+}
+
+export function intToHex(x: number) {
+  return '#' + x.toString(16).padStart(6, '0')
+}
+
+export function clamp255(x: f32): i32 {
+  if (x > 255) x = 255
+  if (x < 0) x = 0
+  return i32(x)
+}
+
+export function toHex(x: string) {
+  return !x ? '#ffffff' : x.startsWith('oklch') ? oklchToHex(x) ?? x : x
+}
+
diff --git a/src/ui/editor/util/waveform.ts b/src/ui/editor/util/waveform.ts
new file mode 100644
index 0000000..e151f34
--- /dev/null
+++ b/src/ui/editor/util/waveform.ts
@@ -0,0 +1,9 @@
+const waveformLength = 2048
+
+export function makeWaveform(length: number, startTime: number, frequency: number) {
+  return Float32Array.from({ length }, (_, i) =>
+    Math.sin(((i + startTime) / length) * Math.PI * 2 * frequency)
+  )
+}
+
+export const waveform = makeWaveform(2048, 0, 1)
diff --git a/src/ui/editor/view.tsx b/src/ui/editor/view.tsx
index 2efc321..386da02 100644
--- a/src/ui/editor/view.tsx
+++ b/src/ui/editor/view.tsx
@@ -24,30 +24,38 @@ export function View({ width, height, dims, caret, buffer, colorize }: {
 }) {
   using $ = Sigui()
 
+  const info = $({
+    c: null as null | CanvasRenderingContext2D,
+    pr: screen.$.pr,
+    width,
+    height,
+    svgs: new Set<SVGElement>()
+  })
+
   const canvas = <Canvas
     width={width}
     height={height}
-    class="absolute top-0 left-0 rendering-pixelated"
+    class="absolute top-0 left-0"
   /> as HTMLCanvasElement
 
   const glCanvas = <Canvas
     width={width}
     height={height}
-    class="absolute top-0 left-0 rendering-pixelated"
+    class="absolute top-0 left-0"
   /> as HTMLCanvasElement
 
+  const svg = <svg
+    width={width}
+    height={height}
+    class="absolute top-0 left-0"
+  >{() => [...info.svgs]}</svg> as SVGSVGElement
+
   const el = <div class="relative">
     {canvas}
     {glCanvas}
+    {svg}
   </div> as HTMLDivElement
 
-  const info = $({
-    c: null as null | CanvasRenderingContext2D,
-    pr: screen.$.pr,
-    width,
-    height,
-  })
-
   const c = canvas.getContext('2d')!
 
   const widgets = Widgets({ width, height, c, glCanvas })
@@ -88,6 +96,8 @@ export function View({ width, height, dims, caret, buffer, colorize }: {
 
     $()
 
+    widgets.update()
+
     const lastVisibleLine = linesVisual.length
     let eh = 0
     extraHeights = Array.from({ length: lastVisibleLine }, (_, y) => {
@@ -119,10 +129,10 @@ export function View({ width, height, dims, caret, buffer, colorize }: {
     widgets.mark.forEach(w => {
       const b = w.bounds
       const p = pointFromLinecol(b)
-      w.rect.x = p.x
-      w.rect.y = p.y
-      w.rect.w = ((b.right - b.col) * charWidth) | 0
-      w.rect.h = lineHeight
+      w.rect.x = p.x - 1
+      w.rect.y = p.y - 1
+      w.rect.w = (((b.right - b.col) * charWidth) | 0) + 2.75
+      w.rect.h = (lineHeight) - .5
     })
 
     tokens.forEach(token => {
diff --git a/src/ui/editor/widget.ts b/src/ui/editor/widget.ts
index c0fc36a..3f71892 100644
--- a/src/ui/editor/widget.ts
+++ b/src/ui/editor/widget.ts
@@ -72,7 +72,7 @@ export function Widgets({ width, height, c, glCanvas }: {
 export type Widget = ReturnType<typeof Widget>
 
 export function Widget() {
-  const rect = Rect()
+  const rect = Rect(0, 0, 1, 1)
   const bounds = Bounds()
   function draw(c: CanvasRenderingContext2D) { }
   return { rect, bounds, draw }
diff --git a/src/ui/editor/widgets/index.ts b/src/ui/editor/widgets/index.ts
new file mode 100644
index 0000000..c930193
--- /dev/null
+++ b/src/ui/editor/widgets/index.ts
@@ -0,0 +1 @@
+export * from './wave-canvas.ts'
diff --git a/src/ui/editor/widgets/wave-canvas.ts b/src/ui/editor/widgets/wave-canvas.ts
new file mode 100644
index 0000000..b15680d
--- /dev/null
+++ b/src/ui/editor/widgets/wave-canvas.ts
@@ -0,0 +1,56 @@
+import { Widget } from 'editor'
+import { Sigui } from 'sigui'
+import { clamp } from 'utils'
+import { screen } from '~/src/screen.ts'
+
+export function WaveCanvasWidget() {
+  using $ = Sigui()
+
+  const info = $({
+    floats: new Float32Array(),
+    color: '#f09',
+  })
+
+  const widget = Widget()
+  widget.draw = c => {
+    const { floats, color } = info
+    const { rect } = widget
+    const { pr } = screen
+
+    const coeff = floats.length / rect.w
+    const startIndex = 0
+    const scaleY = 1
+    const width = rect.w
+    const height = rect.h
+    const step = .5
+
+    const startX = (startIndex / coeff) | 0
+
+    c.save()
+
+    c.translate(rect.x, rect.y)
+
+    let x = 0, y, h
+
+    h = clamp(-1, 1, floats[(x + startX) * coeff | 0]!) * scaleY * 0.5 + 0.5
+    y = (height - pr) * h + pr / 2
+    c.beginPath()
+    c.moveTo(x, y)
+
+    x += step
+
+    for (; x < width; x += step) {
+      h = clamp(-1, 1, floats[(x + startX) * coeff | 0]!) * scaleY * 0.5 + 0.5
+      y = (height - pr) * h + pr / 2
+      c.lineTo(x, y)
+    }
+
+    c.lineWidth = 1
+    c.strokeStyle = color
+    c.stroke()
+
+    c.restore()
+  }
+
+  return { info, widget }
+}
diff --git a/src/ui/editor/widgets/wave-gl.ts b/src/ui/editor/widgets/wave-gl.ts
new file mode 100644
index 0000000..aa848f3
--- /dev/null
+++ b/src/ui/editor/widgets/wave-gl.ts
@@ -0,0 +1,33 @@
+import { Widget } from 'editor'
+import { wasm, type Shapes } from 'gfx'
+import { Sigui } from 'sigui'
+import { hexToInt } from '~/src/ui/editor/util/rgb.ts'
+
+export function WaveGlWidget(shapes: Shapes) {
+  using $ = Sigui()
+
+  const info = $({
+    floats: wasm.alloc(Float32Array, 0),
+    color: '#f09',
+  })
+
+  const widget = Widget()
+  const wave = shapes.Wave(widget.rect)
+
+  $.fx(() => {
+    const { floats, color } = info
+    const { w } = widget.rect
+    $()
+    wave.view.floats$ = floats.ptr
+    wave.view.color = hexToInt(color)
+    wave.view.coeff = floats.length / w
+    wave.view.lw = 1
+    wave.view.len = floats.length
+  })
+
+  function dispose() {
+    wave.remove()
+  }
+
+  return { info, widget, dispose }
+}
diff --git a/src/ui/editor/widgets/wave-svg.tsx b/src/ui/editor/widgets/wave-svg.tsx
new file mode 100644
index 0000000..48534ea
--- /dev/null
+++ b/src/ui/editor/widgets/wave-svg.tsx
@@ -0,0 +1,62 @@
+import { Widget } from 'editor'
+import { Sigui } from 'sigui'
+import { clamp } from 'utils'
+
+export function WaveSvgWidget() {
+  using $ = Sigui()
+
+  const info = $({
+    floats: new Float32Array(),
+    color: '#f09',
+  })
+
+  const path = <path
+    d=""
+    fill="none"
+    stroke="#f09"
+    stroke-width="1"
+    miter-limit="1"
+    linecap="round"
+    linejoin="round"
+  /> as SVGElement
+
+  const widget = Widget()
+  const { rect } = widget
+
+  const svg = <svg
+    x={() => rect.x}
+    y={() => rect.y}
+    width={() => rect.width}
+    height={() => rect.height}
+    viewBox={() => `-1 -${rect.h / 2} ${rect.w} ${rect.h + 1}`}
+  >{path}</svg> as SVGElement
+
+  widget.draw = c => {
+    const { floats } = info
+    const { w, h } = widget.rect
+
+    let d = ''
+    const coeff = floats.length / w
+    const startIndex = 0
+    const scaleY = h
+    const step = .5
+
+    const startX = (startIndex / coeff) | 0
+
+    let x = 0, y
+
+    y = clamp(-1, 1, floats[(x + startX) * coeff | 0]!) * scaleY * 0.5 + 0.5
+    d += `M ${x} ${y}`
+
+    x += step
+
+    for (; x < w; x += step) {
+      y = clamp(-1, 1, floats[(x + startX) * coeff | 0]!) * scaleY * 0.5 + 0.5
+      d += `L ${x} ${y}`
+    }
+
+    path.setAttribute('d', d)
+  }
+
+  return { info, widget, svg }
+}
diff --git a/tsconfig.json b/tsconfig.json
index 1b0d7ec..7185ef9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -41,9 +41,15 @@
     "allowJs": true,
     "strict": true,
     "paths": {
+      "editor": [
+        "./src/ui/editor/index.ts"
+      ],
+      "gfx": [
+        "./src/as/gfx/index.ts"
+      ],
       "~/*": [
         "./*"
-      ],
+      ]
     }
   }
 }

From dd743dd2595ff9e129493fbdd9d48b55dddcf468 Mon Sep 17 00:00:00 2001
From: stagas <gstagas@gmail.com>
Date: Sat, 12 Oct 2024 16:34:30 +0300
Subject: [PATCH 13/25] feat: wip editor

---
 src/as/gfx/sketch-info.ts         |   2 +-
 src/as/gfx/webgl.ts               |   4 +-
 src/lang/tokenize.test.ts         |  70 ++++++++
 src/lang/tokenize.ts              |  71 --------
 src/pages/EditorDemo.tsx          | 158 ++++++++----------
 src/pages/WebGLDemo.tsx           |   3 -
 src/state.ts                      |  42 +++--
 src/ui/Editor.tsx                 |  14 +-
 src/ui/editor/buffer.test.ts      |  14 +-
 src/ui/editor/buffer.ts           |  59 +++++--
 src/ui/editor/caret.ts            | 129 +++++----------
 src/ui/editor/history.ts          | 125 ++++++++++++++
 src/ui/editor/index.ts            |   3 +
 src/ui/editor/kbd.tsx             | 260 +++++++++++++++++++++---------
 src/ui/editor/mouse.ts            | 104 ++++++++++++
 src/ui/editor/selection.ts        | 167 +++++++++++++++++++
 src/ui/editor/util/floats.ts      |   2 +-
 src/ui/editor/util/parse-words.ts |   2 +-
 src/ui/editor/util/types.ts       |  15 +-
 src/ui/editor/view.tsx            | 151 +++++++++++------
 src/ui/editor/widget.ts           |  10 +-
 vite.config.ts                    |   4 +
 22 files changed, 964 insertions(+), 445 deletions(-)
 create mode 100644 src/lang/tokenize.test.ts
 create mode 100644 src/ui/editor/history.ts
 create mode 100644 src/ui/editor/mouse.ts
 create mode 100644 src/ui/editor/selection.ts

diff --git a/src/as/gfx/sketch-info.ts b/src/as/gfx/sketch-info.ts
index d6d0fbd..83d167d 100644
--- a/src/as/gfx/sketch-info.ts
+++ b/src/as/gfx/sketch-info.ts
@@ -10,7 +10,7 @@ export function SketchInfo(GL: GL, view: Rect) {
 
   const { gl, attrib } = GL
 
-  DEBUG && console.log('[sketch] MAX_GL_INSTANCES:', MAX_GL_INSTANCES)
+  DEBUG && console.debug('[sketch] MAX_GL_INSTANCES:', MAX_GL_INSTANCES)
 
   const info = MeshInfo(GL, {
     vertex,
diff --git a/src/as/gfx/webgl.ts b/src/as/gfx/webgl.ts
index d582bae..4529e19 100644
--- a/src/as/gfx/webgl.ts
+++ b/src/as/gfx/webgl.ts
@@ -14,7 +14,7 @@ export interface Mesh {
 }
 
 export function WebGL(view: Rect, canvas: HTMLCanvasElement, alpha = false) {
-  DEBUG && console.log('[webgl] create')
+  DEBUG && console.debug('[webgl] create')
   using $ = Sigui()
 
   const GL = initGL(canvas, {
@@ -48,7 +48,7 @@ export function WebGL(view: Rect, canvas: HTMLCanvasElement, alpha = false) {
   }
 
   $.fx(() => () => {
-    DEBUG && console.log('[webgl] dispose')
+    DEBUG && console.debug('[webgl] dispose')
     meshes.clear()
     GL.reset()
   })
diff --git a/src/lang/tokenize.test.ts b/src/lang/tokenize.test.ts
new file mode 100644
index 0000000..d75927f
--- /dev/null
+++ b/src/lang/tokenize.test.ts
@@ -0,0 +1,70 @@
+import { Token, tokenize } from '~/src/lang/tokenize.ts'
+
+describe('tokenize', () => {
+  it('simple', () => {
+    const source = { code: 'hello world\n123' }
+    const tokens = [...tokenize(source)]
+    expect(tokens.length).toBe(3)
+    expect(tokens[0]).toMatchObject({
+      type: Token.Type.Id,
+      text: 'hello',
+      line: 0,
+      col: 0,
+      right: 5,
+      bottom: 0,
+      index: 0,
+      length: 5,
+      source,
+    })
+    expect(tokens[1]).toMatchObject({
+      type: Token.Type.Id,
+      text: 'world',
+      line: 0,
+      col: 6,
+      right: 11,
+      bottom: 0,
+      index: 6,
+      length: 5,
+      source,
+    })
+    expect(tokens[2]).toMatchObject({
+      type: Token.Type.Number,
+      text: '123',
+      line: 1,
+      col: 0,
+      right: 3,
+      bottom: 1,
+      index: 12,
+      length: 3,
+      source,
+    })
+  })
+
+  it('multiline', () => {
+    const source = { code: '[; hello world\n123 ]' }
+    const tokens = [...tokenize(source)]
+    expect(tokens.length).toBe(2)
+    expect(tokens[0]).toMatchObject({
+      type: Token.Type.Comment,
+      text: '[; hello world',
+      line: 0,
+      col: 0,
+      right: 14,
+      bottom: 0,
+      index: 0,
+      length: 14,
+      source,
+    })
+    expect(tokens[1]).toMatchObject({
+      type: Token.Type.Comment,
+      text: '123 ]',
+      line: 1,
+      col: 0,
+      right: 5,
+      bottom: 1,
+      index: 15,
+      length: 5,
+      source,
+    })
+  })
+})
diff --git a/src/lang/tokenize.ts b/src/lang/tokenize.ts
index 86f2d0a..49c4ae8 100644
--- a/src/lang/tokenize.ts
+++ b/src/lang/tokenize.ts
@@ -223,74 +223,3 @@ export function* tokenize(source: Source): Generator<Token, void, unknown> {
     }
   }
 }
-
-if (import.meta.vitest) {
-  describe('tokenize', () => {
-    it('simple', () => {
-      const source = { code: 'hello world\n123' }
-      const tokens = [...tokenize(source)]
-      expect(tokens.length).toBe(3)
-      expect(tokens[0]).toMatchObject({
-        type: Token.Type.Id,
-        text: 'hello',
-        line: 0,
-        col: 0,
-        right: 5,
-        bottom: 0,
-        index: 0,
-        length: 5,
-        source,
-      })
-      expect(tokens[1]).toMatchObject({
-        type: Token.Type.Id,
-        text: 'world',
-        line: 0,
-        col: 6,
-        right: 11,
-        bottom: 0,
-        index: 6,
-        length: 5,
-        source,
-      })
-      expect(tokens[2]).toMatchObject({
-        type: Token.Type.Number,
-        text: '123',
-        line: 1,
-        col: 0,
-        right: 3,
-        bottom: 1,
-        index: 12,
-        length: 3,
-        source,
-      })
-    })
-
-    it('multiline', () => {
-      const source = { code: '[; hello world\n123 ]' }
-      const tokens = [...tokenize(source)]
-      expect(tokens.length).toBe(2)
-      expect(tokens[0]).toMatchObject({
-        type: Token.Type.Comment,
-        text: '[; hello world',
-        line: 0,
-        col: 0,
-        right: 14,
-        bottom: 0,
-        index: 0,
-        length: 14,
-        source,
-      })
-      expect(tokens[1]).toMatchObject({
-        type: Token.Type.Comment,
-        text: '123 ]',
-        line: 1,
-        col: 0,
-        right: 5,
-        bottom: 1,
-        index: 15,
-        length: 5,
-        source,
-      })
-    })
-  })
-}
diff --git a/src/pages/EditorDemo.tsx b/src/pages/EditorDemo.tsx
index 6591e60..12a5b30 100644
--- a/src/pages/EditorDemo.tsx
+++ b/src/pages/EditorDemo.tsx
@@ -73,99 +73,75 @@ export function EditorDemo({ width, height }: {
   const shapes = editor.widgets.gfx.createShapes()
   editor.widgets.gfx.scene.add(shapes)
 
-  ///////////////////
-  const floats = Object.assign(
-    wasm.alloc(Float32Array, waveform.length),
-    { len: waveform.length }
-  )
-  floats.set(waveform)
-
-  $.fx(() => {
-    const { tokens } = editor.buffer.info
-    $()
-    const gens: Token[][] = []
-
-    let depth = 0
-    let gen: Token[] = []
-    for (const token of tokens) {
-      if (token.text === '[') {
-        depth++
-      }
-      else if (token.text === ']') {
-        gen.push(token)
-        depth--
-        if (!depth) {
-          gens.push(gen)
-          gen = []
-        }
-      }
-      if (depth) gen.push(token)
-    }
-
-    // const decos = gens.map(gen => {
-    //   const d = WaveSvgWidget()
-    //   d.info.floats = floats
-    //   Object.assign(d.widget.bounds, Token.bounds(gen))
-    //   editor.widgets.deco.add(d.widget)
-    //   editor.view.info.svgs.add(d.svg)
-    //   editor.view.info.svgs = new Set(editor.view.info.svgs)
-    //   return d
-    // })
-
-    // const decos = gens.map(gen => {
-    //   const d = WaveCanvasWidget()
-    //   d.info.floats = floats
-    //   Object.assign(d.widget.bounds, Token.bounds(gen))
-    //   editor.widgets.deco.add(d.widget)
-    //   return d
-    // })
-
-    // const decos = gens.map(gen => {
-    //   const d = WaveGlWidget(shapes)
-    //   d.info.floats = floats
-    //   Object.assign(d.widget.bounds, Token.bounds(gen))
-    //   editor.widgets.deco.add(d.widget)
-    //   return d
-    // })
-
-    const d = WaveCanvasWidget()
-    d.info.floats = floats
-    Object.assign(d.widget.bounds, Token.bounds(gens[0]))
-    editor.widgets.deco.add(d.widget)
-
-    const d2 = WaveGlWidget(shapes)
-    d2.info.floats = floats
-    Object.assign(d2.widget.bounds, Token.bounds(gens[1]))
-    editor.widgets.deco.add(d2.widget)
-
-    const d3 = WaveSvgWidget()
-    d3.info.floats = floats
-    Object.assign(d3.widget.bounds, Token.bounds(gens[2]))
-    editor.widgets.deco.add(d3.widget)
-    editor.view.info.svgs.add(d3.svg)
-    editor.view.info.svgs = new Set(editor.view.info.svgs)
-
-    return () => {
-      // decos.forEach(d => {
-      editor.widgets.deco.delete(d.widget)
-      //   d.dispose()
-      // })
-      editor.widgets.deco.delete(d2.widget)
-      d2.dispose()
-      editor.widgets.deco.delete(d3.widget)
-      editor.view.info.svgs.delete(d3.svg)
-      editor.view.info.svgs = new Set(editor.view.info.svgs)
-    }
-  })
-  editor.widgets.update()
-
-  let t = 101
-  // editor.anim.ticks.add(() => {
-  floats.set(makeWaveform(2048, t += 1, 1 + Math.sin(t * 0.025) * 59))
-  //   return true
+  // ///////////////////
+  // const floats = Object.assign(
+  //   wasm.alloc(Float32Array, waveform.length),
+  //   { len: waveform.length }
+  // )
+  // floats.set(waveform)
+
+  // $.fx(() => {
+  //   const { tokens } = editor.buffer.info
+  //   $()
+  //   const gens: Token[][] = []
+
+  //   let depth = 0
+  //   let gen: Token[] = []
+  //   for (const token of tokens) {
+  //     if (token.text === '[') {
+  //       depth++
+  //     }
+  //     else if (token.text === ']') {
+  //       gen.push(token)
+  //       depth--
+  //       if (!depth) {
+  //         gens.push(gen)
+  //         gen = []
+  //       }
+  //     }
+  //     if (depth) gen.push(token)
+  //   }
+
+  //   if (!gens.length) return
+
+  //   const d = WaveCanvasWidget()
+  //   d.info.floats = floats
+  //   Object.assign(d.widget.bounds, Token.bounds(gens[0]))
+  //   editor.widgets.deco.add(d.widget)
+
+  //   const d2 = WaveGlWidget(shapes)
+  //   d2.info.floats = floats
+  //   Object.assign(d2.widget.bounds, Token.bounds(gens[1]))
+  //   editor.widgets.deco.add(d2.widget)
+
+  //   const d3 = WaveSvgWidget()
+  //   d3.info.floats = floats
+  //   Object.assign(d3.widget.bounds, Token.bounds(gens[2]))
+  //   editor.widgets.deco.add(d3.widget)
+  //   editor.view.info.svgs.add(d3.svg)
+  //   editor.view.info.svgs = new Set(editor.view.info.svgs)
+
+  //   return () => {
+  //     // decos.forEach(d => {
+  //     editor.widgets.deco.delete(d.widget)
+  //     //   d.dispose()
+  //     // })
+  //     editor.widgets.deco.delete(d2.widget)
+  //     d2.dispose()
+  //     editor.widgets.deco.delete(d3.widget)
+  //     editor.view.info.svgs.delete(d3.svg)
+  //     editor.view.info.svgs = new Set(editor.view.info.svgs)
+  //   }
   // })
+  // editor.widgets.update()
+
+  // let t = 101
+  // // editor.anim.ticks.add(() => {
+  // floats.set(makeWaveform(2048, t += 1, 1 + Math.sin(t * 0.025) * 59))
+  // //   return true
+  // // })
 
-  ///////////////////
+  // ///////////////////
 
   const el = <div>
     <div class="flex items-center justify-between">
diff --git a/src/pages/WebGLDemo.tsx b/src/pages/WebGLDemo.tsx
index e24a9b4..983e749 100644
--- a/src/pages/WebGLDemo.tsx
+++ b/src/pages/WebGLDemo.tsx
@@ -1,11 +1,8 @@
 import { Sigui, type Signal } from 'sigui'
-import { cn } from '~/lib/cn.ts'
 import { Anim } from '~/src/as/gfx/anim.ts'
 import { Gfx } from '~/src/as/gfx/gfx.ts'
 import { Rect } from '~/src/as/gfx/types.ts'
 import { AnimMode } from '~/src/comp/AnimMode.tsx'
-import { state } from '~/src/state.ts'
-import { Button } from '~/src/ui/Button.tsx'
 import { Canvas } from '~/src/ui/Canvas.tsx'
 import { H2 } from '~/src/ui/Heading.tsx'
 
diff --git a/src/state.ts b/src/state.ts
index e1558f7..36a0b12 100644
--- a/src/state.ts
+++ b/src/state.ts
@@ -1,8 +1,9 @@
-import { $, fx, storage } from 'sigui'
+import { $, storage } from 'sigui'
 import type { z } from 'zod'
 import type { UserSession } from '~/api/auth/types.ts'
 import type { UiChannel } from '~/api/chat/types.ts'
 import type { Channels } from '~/api/models.ts'
+import { lorem, loremRandomWord } from '~/lib/lorem.ts'
 import { AnimMode } from '~/src/as/gfx/anim.ts'
 import { env } from '~/src/env.ts'
 import { screen } from '~/src/screen.ts'
@@ -64,29 +65,26 @@ class State {
 
 export let state = $(new State)
 
-// fx(() => {
-//   const { container } = $.of(state)
-//   const { width, height } = screen
-//   $()
-//   container.style.width = width + 'px'
-//   container.style.height = height + 'px'
-// })
-
 export function setState(newState: any) {
   state = newState
 }
 
-// const channels = ['general', 'random', 'dev']
-// // const channels = Array.from({ length: 50 + (Math.random() * 50 | 0) }).map(() => loremRandomWord())
-// state.channels = channels.sort().map(name => $({
-//   name,
-//   users: Array.from({ length: 50 + (Math.random() * 50 | 0) }).map(() => ({
-//     nick: loremRandomWord(),
-//   })),
-//   messages: Array.from({ length: 100 }).map((_, i) => ({
-//     nick: loremRandomWord(),
-//     text: lorem((Math.random() ** 2.5) * 20 + 1),
-//   }))
-// }))
+function seedFakeChannels() {
+  const channels = ['general', 'random', 'dev']
+  // const channels = Array.from({ length: 50 + (Math.random() * 50 | 0) }).map(() => loremRandomWord())
+  state.channels = channels.sort().map(name => $({
+    name,
+    users: Array.from({ length: 50 + (Math.random() * 50 | 0) }).map(() => ({
+      nick: loremRandomWord(),
+    })),
+    messages: Array.from({ length: 100 }).map((_, i) => ({
+      type: 'message',
+      nick: loremRandomWord(),
+      text: lorem((Math.random() ** 2.5) * 20 + 1),
+    }))
+  }))
+
+  state.currentChannelName = state.channels[0].name
+}
 
-// state.currentChannelName = state.channels[0].name
+// seedFakeChannels()
diff --git a/src/ui/Editor.tsx b/src/ui/Editor.tsx
index bb22671..7755591 100644
--- a/src/ui/Editor.tsx
+++ b/src/ui/Editor.tsx
@@ -1,7 +1,7 @@
 import { Sigui, type Signal } from 'sigui'
 import { dom, isMobile } from 'utils'
 import type { Source, Token } from '~/src/lang/tokenize.ts'
-import { Buffer, Caret, Dims, Kbd, Misc, View, type WordWrapProcessor } from 'editor'
+import { Buffer, Caret, Dims, History, Kbd, Misc, Mouse, Selection, View, type WordWrapProcessor } from 'editor'
 
 export function Editor({ code, width, height, colorize, tokenize, wordWrapProcessor }: {
   code: Signal<string>
@@ -14,11 +14,14 @@ export function Editor({ code, width, height, colorize, tokenize, wordWrapProces
   using $ = Sigui()
 
   const misc = Misc()
-  const buffer = Buffer({ code, tokenize, wordWrapProcessor })
   const dims = Dims()
-  const caret = Caret({ buffer, dims, misc })
-  const kbd = Kbd({ buffer, caret })
-  const view = View({ width, height, dims, caret, buffer, colorize })
+  const buffer = Buffer({ code, tokenize, wordWrapProcessor })
+  const caret = Caret({ buffer, misc })
+  const selection = Selection({ buffer, caret })
+  const history = History({ selection, buffer, caret })
+  const kbd = Kbd({ selection, buffer, caret, history })
+  const view = View({ width, height, selection, caret, dims, buffer, colorize })
+  const mouse = Mouse({ selection, caret, view })
 
   // focus/blur
   function focus() {
@@ -35,6 +38,7 @@ export function Editor({ code, width, height, colorize, tokenize, wordWrapProces
   }
 
   function onBlur() {
+    if (mouse.info.isDown) return
     misc.info.isFocus = caret.info.isVisible = caret.info.isBlink = false
   }
 
diff --git a/src/ui/editor/buffer.test.ts b/src/ui/editor/buffer.test.ts
index 788c1fc..f2e9634 100644
--- a/src/ui/editor/buffer.test.ts
+++ b/src/ui/editor/buffer.test.ts
@@ -105,7 +105,7 @@ describe('TextBuffer', () => {
     })
   })
 
-  describe('visualPointToIndex / indexToVisualPoint / indexToPoint', () => {
+  describe('visualPointToIndex / indexToVisualPoint / indexToLogicalPoint', () => {
     it('works', () => {
       const b = B(`\
 hello world
@@ -119,7 +119,7 @@ lorem ipsum
           expect(p).toEqual({ x: 0, y: 4 })
         }
         {
-          const p = b.indexToPoint(24)
+          const p = b.indexToLogicalPoint(24)
           expect(p).toEqual({ x: 0, y: 2 })
         }
       }
@@ -131,7 +131,7 @@ lorem ipsum
           expect(p).toEqual({ x: 0, y: 1 })
         }
         {
-          const p = b.indexToPoint(6)
+          const p = b.indexToLogicalPoint(6)
           expect(p).toEqual({ x: 6, y: 0 })
         }
       }
@@ -143,7 +143,7 @@ lorem ipsum
           expect(p).toEqual({ x: 3, y: 3 })
         }
         {
-          const p = b.indexToPoint(21)
+          const p = b.indexToLogicalPoint(21)
           expect(p).toEqual({ x: 9, y: 1 })
         }
       }
@@ -155,7 +155,7 @@ lorem ipsum
           expect(p).toEqual({ x: 3, y: 2 })
         }
         {
-          const p = b.indexToPoint(15)
+          const p = b.indexToLogicalPoint(15)
           expect(p).toEqual({ x: 3, y: 1 })
         }
       }
@@ -167,7 +167,7 @@ lorem ipsum
           expect(p).toEqual({ x: 3, y: 1 })
         }
         {
-          const p = b.indexToPoint(9)
+          const p = b.indexToLogicalPoint(9)
           expect(p).toEqual({ x: 9, y: 0 })
         }
       }
@@ -179,7 +179,7 @@ lorem ipsum
           expect(p).toEqual({ x: 3, y: 0 })
         }
         {
-          const p = b.indexToPoint(3)
+          const p = b.indexToLogicalPoint(3)
           expect(p).toEqual({ x: 3, y: 0 })
         }
       }
diff --git a/src/ui/editor/buffer.ts b/src/ui/editor/buffer.ts
index a9cac9f..8c37ff5 100644
--- a/src/ui/editor/buffer.ts
+++ b/src/ui/editor/buffer.ts
@@ -1,6 +1,6 @@
 import { Sigui, type Signal } from 'sigui'
 import type { Source, Token } from '~/src/lang/tokenize.ts'
-import { parseWords, WORD, type Point } from '~/src/ui/editor/util/index.ts'
+import { parseWords, TOKEN, WORD, type Point } from 'editor'
 
 export interface Line {
   text: string
@@ -25,6 +25,10 @@ export function Buffer({ code, tokenize, wordWrapProcessor = { pre: identity, po
   const info = $({
     maxColumns: 10,
     code,
+    lines: [] as string[],
+    get length() {
+      return info.code.length
+    },
     get codeVisual() {
       return info.linesVisual.map(line => line.text).join('\n')
     },
@@ -37,9 +41,6 @@ export function Buffer({ code, tokenize, wordWrapProcessor = { pre: identity, po
     get words() {
       return parseWords(WORD, info.code)
     },
-    get lines() {
-      return info.code.split('\n')
-    },
     get linesVisual(): Line[] {
       const { code, maxColumns } = info
       $()
@@ -47,6 +48,20 @@ export function Buffer({ code, tokenize, wordWrapProcessor = { pre: identity, po
     }
   })
 
+  // split code into lines
+  $.fx(() => {
+    const { code } = info
+    $()
+    info.lines = code.split('\n')
+  })
+
+  // join lines into code
+  $.fx(() => {
+    const { lines } = info
+    $()
+    info.code = lines.join('\n')
+  })
+
   function wordWrap(): Line[] {
     let { code, maxColumns } = info
 
@@ -90,7 +105,7 @@ export function Buffer({ code, tokenize, wordWrapProcessor = { pre: identity, po
         }
       }
       else {
-        if (word.length === maxColumns) {
+        if (word.length >= maxColumns) {
           wrapped.push({ text: word })
           word = ''
           x = 0
@@ -115,7 +130,7 @@ export function Buffer({ code, tokenize, wordWrapProcessor = { pre: identity, po
     })
   }
 
-  function indexToPoint(index: number): Point {
+  function indexToLogicalPoint(index: number): Point {
     const { lines } = info
 
     let currentIndex = 0
@@ -165,7 +180,7 @@ export function Buffer({ code, tokenize, wordWrapProcessor = { pre: identity, po
     }
   }
 
-  function pointToIndex(point: Point): number {
+  function logicalPointToIndex(point: Point): number {
     const { lines } = info
     let { x, y } = point
 
@@ -221,20 +236,32 @@ export function Buffer({ code, tokenize, wordWrapProcessor = { pre: identity, po
 
   function visualPointToLogicalPoint(point: Point): Point {
     const index = visualPointToIndex(point)
-    return indexToPoint(index)
+    return indexToLogicalPoint(index)
   }
 
-  function updateFromLines() {
-    info.code = info.lines.join('\n')
+  function wordUnderVisualPoint(point: Point): RegExpExecArray | undefined {
+    const { x, y } = point
+    const words = parseWords(TOKEN, info.linesVisual[y].text)
+    for (let i = 0, word: RegExpExecArray, next: any; i < words.length; i++) {
+      word = words[i]
+      next = i < words.length - 1 ? words[i + 1] : { index: Infinity }
+      if (x >= word.index && x < next.index) {
+        return word
+      }
+    }
   }
 
-  return {
+  return $({
     info,
-    updateFromLines,
-    indexToPoint,
+    code,
+    length: info.$.length,
+    lines: info.$.lines,
+    linesVisual: info.$.linesVisual,
+    indexToLogicalPoint,
     indexToVisualPoint,
-    pointToIndex,
+    logicalPointToIndex,
     visualPointToIndex,
-    visualPointToLogicalPoint
-  }
+    visualPointToLogicalPoint,
+    wordUnderVisualPoint,
+  })
 }
diff --git a/src/ui/editor/caret.ts b/src/ui/editor/caret.ts
index 5f64d9c..cab13e5 100644
--- a/src/ui/editor/caret.ts
+++ b/src/ui/editor/caret.ts
@@ -1,15 +1,12 @@
+import type { Buffer, Misc } from 'editor'
+import { beginOfLine, Point } from 'editor'
 import { Sigui } from 'sigui'
-import type { Dims } from '~/src/ui/editor/dims.ts'
-import type { Misc } from '~/src/ui/editor/misc.ts'
-import type { Buffer } from '~/src/ui/editor/buffer.ts'
-import { beginOfLine } from '~/src/ui/editor/util/index.ts'
-import { Point } from '~/src/ui/editor/util/types.ts'
+import { assign } from 'utils'
 
 export type Caret = ReturnType<typeof Caret>
 
-export function Caret({ buffer, dims, misc }: {
+export function Caret({ buffer, misc }: {
   buffer: Buffer,
-  dims: Dims,
   misc: Misc,
 }) {
   using $ = Sigui()
@@ -27,20 +24,20 @@ export function Caret({ buffer, dims, misc }: {
 
   const caret = info
 
+  // set caret points from index
   $.fx(() => {
-    const { code } = buffer.info
-    const { x, y } = caret
+    const { index } = caret
     $()
-    caret.index = buffer.pointToIndex(caret)
+    assign(caret.visual, buffer.indexToVisualPoint(index))
+    assign(caret, buffer.indexToLogicalPoint(index))
   })
 
-  // calculate caret visual point from logical.
+  // set index from visual point
   $.fx(() => {
-    const { index } = caret
+    const { x, y } = caret.visual
     $()
-    const { x, y } = buffer.indexToVisualPoint(index)
-    caret.visual.x = x
-    caret.visual.y = y
+    caret.index = buffer.visualPointToIndex({ x, y })
+    caret.blinkReset++
   })
 
   // blink caret
@@ -60,35 +57,19 @@ export function Caret({ buffer, dims, misc }: {
   })
 
   function doBackspace() {
-    const { lines } = buffer.info
-    // at greater than line length, remove char
-    if (caret.x > 0) {
-      const line = lines[caret.y]
-      lines[caret.y] = line.slice(0, caret.x - 1) + line.slice(caret.x)
-      buffer.updateFromLines()
-      caret.x--
+    if (caret.index > 0) {
+      const { code } = buffer
+      buffer.code = code.slice(0, caret.index - 1) + code.slice(caret.index)
       $.flush()
-      caret.visualXIntent = caret.visual.x
-    }
-    // at start of line, merge with previous line
-    else if (caret.y > 0) {
-      const line = lines[caret.y]
-      caret.x = lines[caret.y - 1].length
-      lines[caret.y - 1] += line
-      lines.splice(caret.y, 1)
-      buffer.updateFromLines()
-      caret.y--
-      $.flush()
-      caret.visualXIntent = caret.visual.x
+      moveLeft()
     }
   }
 
   function doDelete() {
-    const { lines } = buffer.info
-    const line = lines[caret.y]
-    if (caret.x < line.length) {
-      lines[caret.y] = line.slice(0, caret.x) + line.slice(caret.x + 1)
-      buffer.updateFromLines()
+    const { code } = buffer
+    const { index } = caret
+    if (index < code.length) {
+      buffer.code = code.slice(0, index) + code.slice(index + 1)
     }
   }
 
@@ -96,64 +77,36 @@ export function Caret({ buffer, dims, misc }: {
     const { linesVisual } = buffer.info
     const bx = beginOfLine(linesVisual[caret.visual.y]?.text ?? '')
     const vx = bx === caret.visual.x ? 0 : bx
-    const { x, y } = buffer.visualPointToLogicalPoint({
+    caret.index = buffer.visualPointToIndex({
       x: vx,
       y: caret.visual.y
     })
-    caret.x = x
-    caret.y = y
-    $.flush()
-    caret.visualXIntent = caret.visual.x
   }
 
   function moveEnd() {
-    const { linesVisual } = buffer.info
-    const { x, y } = buffer.visualPointToLogicalPoint({
-      x: linesVisual[caret.visual.y]?.text.length ?? 0,
+    caret.index = buffer.visualPointToIndex({
+      x: buffer.info.linesVisual[caret.visual.y]?.text.length ?? 0,
       y: caret.visual.y
     })
-    caret.x = x
-    caret.y = y
-    $.flush()
-    caret.visualXIntent = caret.visual.x
   }
 
   function moveUpDown(dy: number) {
     const { linesVisual } = buffer.info
     const newY = caret.visual.y + dy
     if (newY >= 0 && newY <= linesVisual.length) {
-      const { x, y } = buffer.visualPointToLogicalPoint({
+      caret.index = buffer.visualPointToIndex({
         x: caret.visualXIntent,
         y: newY
       })
-      caret.x = x
-      caret.y = y
     }
   }
 
   function moveLeft() {
-    const { lines } = buffer.info
-    if (caret.x > 0) caret.x--
-    else if (caret.y > 0) {
-      caret.y--
-      caret.x = lines[caret.y].length
-    }
-    $.flush()
-    caret.visualXIntent = caret.visual.x
+    if (caret.index > 0) --caret.index
   }
 
   function moveRight() {
-    const { lines } = buffer.info
-    const line = lines[caret.y]
-    if (caret.x < line.length) {
-      caret.x++
-    }
-    else if (caret.y < lines.length - 1) {
-      caret.y++
-      caret.x = 0
-    }
-    $.flush()
-    caret.visualXIntent = caret.visual.x
+    if (caret.index < buffer.length) ++caret.index
   }
 
   function moveByWord(dir: number) {
@@ -166,32 +119,24 @@ export function Caret({ buffer, dims, misc }: {
         break
       }
     }
-    const p = buffer.indexToPoint(index)
-    caret.x = p.x
-    caret.y = p.y
-    $.flush()
-    caret.visualXIntent = caret.visual.x
+    caret.index = index
   }
 
-  function draw(c: CanvasRenderingContext2D, point: Point) {
-    const { isVisible } = caret
-    if (!isVisible) return
-
-    const { caretWidth, charHeight } = dims.info
-
-    c.fillStyle = '#fff'
-    c.fillRect(
-      point.x,
-      point.y + .5,
-      caretWidth,
-      charHeight
-    )
+  function insert(key: string) {
+    const { code } = buffer
+    buffer.code =
+      code.slice(0, caret.index)
+      + key
+      + code.slice(caret.index)
+    $.flush()
   }
 
   return $({
     info,
     x: caret.$.x,
     y: caret.$.y,
+    line: caret.visual.$.y,
+    col: caret.visual.$.x,
     index: caret.$.index,
     visual: caret.$.visual,
     visualXIntent: caret.$.visualXIntent,
@@ -203,6 +148,6 @@ export function Caret({ buffer, dims, misc }: {
     moveLeft,
     moveRight,
     moveByWord,
-    draw,
+    insert,
   })
 }
diff --git a/src/ui/editor/history.ts b/src/ui/editor/history.ts
new file mode 100644
index 0000000..023cae6
--- /dev/null
+++ b/src/ui/editor/history.ts
@@ -0,0 +1,125 @@
+import { Buffer, Caret, Selection } from 'editor'
+import { Sigui } from 'sigui'
+import { assign, debounce } from 'utils'
+
+const DEBUG = true
+
+interface Snap {
+  buffer: {
+    code: string
+  }
+  caret: {
+    index: number
+    visualXIntent: number
+  }
+  selection: {
+    startIndex: number
+    endIndex: number
+  }
+}
+
+export type History = ReturnType<typeof History>
+
+export function History({ selection, buffer, caret }: {
+  selection: Selection
+  buffer: Buffer
+  caret: Caret
+}) {
+  using $ = Sigui()
+
+  const info = $({
+    needle: 0,
+    snaps: [Snap()],
+    get current() {
+      return info.snaps[info.needle]
+    }
+  })
+
+  function Snap(): Snap {
+    return {
+      buffer: {
+        code: buffer.code,
+      },
+      caret: {
+        index: caret.index,
+        visualXIntent: caret.visualXIntent,
+      },
+      selection: {
+        startIndex: selection.startIndex,
+        endIndex: selection.endIndex,
+      }
+    }
+  }
+
+  function save() {
+    const snap = Snap()
+
+    // merge
+    if (info.current.buffer.code === snap.buffer.code) {
+      DEBUG && console.debug('[hist] merge:', info.needle + 1, '/', info.snaps.length)
+      assign(info.current.caret, snap.caret)
+      assign(info.current.selection, snap.selection)
+      return
+    }
+
+    // discard rest
+    if (info.needle < info.snaps.length - 1) {
+      info.snaps = info.snaps.slice(0, info.needle + 1)
+    }
+
+    // save
+    info.snaps.push(snap)
+    info.needle++
+    DEBUG && console.debug('[hist] save:', info.needle + 1, '/', info.snaps.length)
+  }
+
+  const saveDebounced = debounce(300, save, { first: true, last: true })
+
+  function restore() {
+    const snap = info.snaps[info.needle]
+    assign(buffer, snap.buffer)
+    assign(caret, snap.caret)
+    assign(selection, snap.selection)
+  }
+
+  function withHistory(fn: () => void) {
+    $.flush()
+    save()
+    fn()
+    $.flush()
+    save()
+  }
+
+  function withHistoryDebounced(fn: () => void) {
+    $.flush()
+    saveDebounced()
+    fn()
+    $.flush()
+    saveDebounced()
+  }
+
+  function undo() {
+    if (info.needle > 0) {
+      info.needle--
+      restore()
+    }
+    DEBUG && console.debug('[hist] undo:', info.needle + 1, '/', info.snaps.length)
+  }
+
+  function redo() {
+    if (info.needle < info.snaps.length - 1) {
+      info.needle++
+      restore()
+    }
+    DEBUG && console.debug('[hist] redo:', info.needle + 1, '/', info.snaps.length)
+  }
+
+  return {
+    save,
+    saveDebounced,
+    withHistory,
+    withHistoryDebounced,
+    undo,
+    redo
+  }
+}
diff --git a/src/ui/editor/index.ts b/src/ui/editor/index.ts
index 2766e78..c1e949c 100644
--- a/src/ui/editor/index.ts
+++ b/src/ui/editor/index.ts
@@ -1,8 +1,11 @@
 export * from './buffer.ts'
 export * from './caret.ts'
 export * from './dims.ts'
+export * from './history.ts'
 export * from './kbd.tsx'
 export * from './misc.ts'
+export * from './mouse.ts'
+export * from './selection.ts'
 export * from './util/index.ts'
 export * from './view.tsx'
 export * from './widget.ts'
diff --git a/src/ui/editor/kbd.tsx b/src/ui/editor/kbd.tsx
index 6a19232..5d95bee 100644
--- a/src/ui/editor/kbd.tsx
+++ b/src/ui/editor/kbd.tsx
@@ -1,15 +1,16 @@
+import { Buffer, type Caret, type History, type Selection } from 'editor'
 import { Sigui } from 'sigui'
 import { dom } from 'utils'
-import { Buffer } from '~/src/ui/editor/buffer.ts'
-import type { Caret } from '~/src/ui/editor/caret.ts'
 
-export function Kbd({ buffer, caret }: {
+export function Kbd({ selection, buffer, caret, history }: {
+  selection: Selection
   buffer: Buffer
   caret: Caret
+  history: History
 }) {
   using $ = Sigui()
 
-  const el = <textarea
+  const textarea = <textarea
     spellcheck="false"
     autocorrect="off"
     autocapitalize="off"
@@ -24,88 +25,201 @@ export function Kbd({ buffer, caret }: {
     "
   /> as HTMLTextAreaElement
 
-  const ignoredKeys = 'zycvxjrtn=+-'
+  const ignoredKeys = 'cvxjrtn=+-'
 
-  // read keyboard input
-  $.fx(() => [
-    // mobile
-    dom.on(el, 'input', $.fn((ev: InputEvent) => {
-      if (ev.data) {
-        el.dispatchEvent(new KeyboardEvent('keydown', { key: ev.data }))
-        el.value = ''
+  const { withHistory, withHistoryDebounced, undo, redo } = history
+
+  const handleKey = $.fn((ev: KeyboardEvent) => {
+    if (ev.ctrlKey && ignoredKeys.includes(ev.key.toLowerCase())) return
+
+    ev.preventDefault()
+
+    caret.info.blinkReset++
+
+    let { key } = ev
+    const ctrl = ev.ctrlKey || ev.metaKey
+    const alt = ev.altKey
+    let shift = ev.shiftKey
+
+    if (key === 'Enter') key = '\n'
+
+    function withSelection(fn: () => void, force = false) {
+      if (!shift && selection.isActive) selection.clear()
+      if (force || (shift && !selection.isActive)) {
+        selection.begin()
       }
-    }) as any),
+      fn()
+      $.flush()
+      if (force || shift) {
+        selection.finish()
+      }
+    }
 
-    // desktop
-    dom.on(el, 'keydown', $.fn((ev: KeyboardEvent) => {
-      if (ev.ctrlKey && ignoredKeys.includes(ev.key.toLowerCase())) return
+    function withIntent(fn: () => void) {
+      fn()
+      $.flush()
+      caret.info.visualXIntent = caret.visual.x
+    }
 
-      ev.preventDefault()
+    if (key.length === 1) {
+      if (ctrl) {
+        // ctrl + a = select all
+        if (key === 'a') return selection.selectAll()
 
-      caret.info.blinkReset++
+        // ctrl + shift + d =
+        //   with no selection: duplicate line
+        //   with selection: duplicate selection
+        else if (shift && key === 'D') {
+          return withHistoryDebounced(() => {
+            const { index } = caret
+            if (selection.isActive) {
+              const { length } = selection.text
+              caret.insert(selection.text)
+              caret.index += length
+              selection.info.startIndex += length
+              selection.info.endIndex += length
+            }
+            else {
+              caret.index = buffer.logicalPointToIndex({ x: 0, y: caret.y })
+              $.flush()
+              const line = buffer.info.lines[caret.y] + '\n'
+              caret.insert(line)
+              caret.index = index + line.length
+            }
+          })
+        }
 
-      const { code, lines, linesVisual } = buffer.info
+        else if (key === 'z') return undo()
+        else if (key === 'y') return redo()
+      }
 
-      const { key } = ev
-      const ctrl = ev.ctrlKey || ev.metaKey
-      const alt = ev.altKey
-      const shift = ev.shiftKey
+      // with selection: replace selection
+      if (selection.isActive) {
+        return withHistory(() => {
+          selection.deleteText()
+          handleKey(ev)
+        })
+      }
 
       // insert character
-      if (key.length === 1) {
-        const line = lines[caret.y]
-        lines[caret.y] = line.slice(0, caret.x) + key + line.slice(caret.x)
-        buffer.updateFromLines()
-        caret.x++
-        $.flush()
-        caret.visualXIntent = caret.visual.x
+      withHistoryDebounced(() =>
+        withIntent(() => {
+          caret.insert(key)
+          caret.moveRight()
+        })
+      )
+    }
+    else {
+      // backspace
+      //   with selection: delete selection
+      //   with no selection: delete character before caret
+      if (key === 'Backspace') {
+        withHistoryDebounced(() => {
+          if (selection.isActive) return selection.deleteText()
+          if (ctrl) {
+            withSelection(() => caret.moveByWord(-1), true)
+            return selection.deleteText()
+          }
+          withIntent(caret.doBackspace)
+        })
       }
-      else {
-        // handle enter
-        if (key === 'Enter') {
-          const line = lines[caret.y]
-          lines[caret.y] = line.slice(0, caret.x)
-          lines.splice(caret.y + 1, 0, line.slice(caret.x))
-          buffer.updateFromLines()
-          caret.y++
-          caret.x = 0
-          $.flush()
-          caret.visualXIntent = caret.visual.x
-        }
-        // handle backspace
-        else if (key === 'Backspace') {
-          caret.doBackspace()
-        }
-        // handle delete
-        else if (key === 'Delete') {
+      // delete
+      //   with selection: delete selection
+      //   with no selection: delete character after caret
+      else if (key === 'Delete') {
+        withHistoryDebounced(() => {
+          if (selection.isActive) return selection.deleteText()
+          if (ctrl) {
+            withSelection(() => caret.moveByWord(+1), true)
+            return selection.deleteText()
+          }
+          if (shift) {
+            // delete line
+            selection.selectLine()
+            $.flush()
+            selection.endIndex++
+            $.flush()
+            selection.deleteText()
+            return
+          }
           caret.doDelete()
-        }
-        // handle home
-        else if (key === 'Home') {
-          caret.moveHome()
-        }
-        // handle end
-        else if (key === 'End') {
-          caret.moveEnd()
-        }
-        // handle arrow keys
-        else if (key === 'ArrowUp' || key === 'ArrowDown') {
-          const newY = key === 'ArrowUp'
-            ? caret.visual.y - 1
-            : caret.visual.y + 1
+        })
+      }
+      // home
+      else if (key === 'Home') {
+        withSelection(() => withIntent(caret.moveHome))
+      }
+      // end
+      else if (key === 'End') {
+        withSelection(() => withIntent(caret.moveEnd))
+      }
+      // arrow up/down
+      else if (key === 'ArrowUp' || key === 'ArrowDown') {
+        withSelection(() =>
           caret.moveUpDown(key === 'ArrowUp' ? -1 : +1)
-        }
-        else if (key === 'ArrowLeft') {
-          if (ctrl) caret.moveByWord(-1)
-          else caret.moveLeft()
-        }
-        else if (key === 'ArrowRight') {
-          if (ctrl) caret.moveByWord(+1)
-          else caret.moveRight()
-        }
+        )
+      }
+      // arrow left
+      else if (key === 'ArrowLeft') {
+        withSelection(() =>
+          withIntent(() => {
+            if (ctrl) caret.moveByWord(-1)
+            else caret.moveLeft()
+          })
+        )
+      }
+      // arrow right
+      else if (key === 'ArrowRight') {
+        withSelection(() =>
+          withIntent(() => {
+            if (ctrl) caret.moveByWord(+1)
+            else caret.moveRight()
+          })
+        )
+      }
+    }
+  })
+
+  // read keyboard input
+  $.fx(() => [
+    // mobile
+    dom.on(textarea, 'input', $.fn((ev: Event) => {
+      const inputEvent = ev as InputEvent
+      if (inputEvent.data) {
+        textarea.dispatchEvent(new KeyboardEvent('keydown', { key: inputEvent.data }))
+        textarea.value = ''
       }
-    }))
+    })),
+
+    // desktop
+    dom.on(textarea, 'keydown', handleKey),
+
+    // clipboard
+    dom.on(textarea, 'paste', $.fn((ev: ClipboardEvent) => {
+      ev.preventDefault()
+      const text = ev.clipboardData?.getData('text/plain')
+      if (text) {
+        withHistory(() => {
+          selection.begin()
+          caret.insert(text)
+          caret.index += text.length
+          $.flush()
+          selection.finish()
+        })
+      }
+    })),
+
+    dom.on(textarea, 'copy', $.fn((ev: ClipboardEvent) => {
+      ev.preventDefault()
+      ev.clipboardData?.setData('text/plain', selection.text)
+    })),
+
+    dom.on(textarea, 'cut', $.fn((ev: ClipboardEvent) => {
+      ev.preventDefault()
+      ev.clipboardData?.setData('text/plain', selection.text)
+      withHistory(selection.deleteText)
+    })),
   ])
 
-  return el
+  return textarea
 }
diff --git a/src/ui/editor/mouse.ts b/src/ui/editor/mouse.ts
new file mode 100644
index 0000000..7dbb3ba
--- /dev/null
+++ b/src/ui/editor/mouse.ts
@@ -0,0 +1,104 @@
+import { Linecol, type Caret, type Selection, type View } from 'editor'
+import { Sigui } from 'sigui'
+import { assign, dom, MouseButtons } from 'utils'
+
+export type Mouse = ReturnType<typeof Mouse>
+
+export function Mouse({ selection, caret, view }: {
+  selection: Selection
+  caret: Caret
+  view: View
+}) {
+  using $ = Sigui()
+
+  const info = $({
+    isDown: false,
+    buttons: 0,
+    count: 0,
+    x: 0,
+    y: 0,
+    linecol: $(Linecol()),
+  })
+
+  function updateFromEvent(ev: PointerEvent | Touch) {
+    const c = view.el.getBoundingClientRect()
+    info.x = ev.pageX - c.left
+    info.y = ev.pageY - c.top
+    assign(info.linecol, view.linecolFromViewPoint(info))
+  }
+
+  const COUNT_TIMEOUT = 350
+  let countTimeout: any
+
+  $.fx(() => [
+    dom.on(view.el, 'contextmenu', dom.prevent.stop),
+    dom.on(view.el, 'pointerdown', $.fn((ev: PointerEvent) => {
+      ev.preventDefault()
+      updateFromEvent(ev)
+
+      info.buttons = ev.buttons
+
+      if (info.buttons & MouseButtons.Middle) {
+        // TODO: implement middle click
+        return
+      }
+
+      if (info.buttons & MouseButtons.Right) {
+        // TODO: implement right click
+        return
+      }
+
+      info.isDown = true
+
+      clearTimeout(countTimeout)
+      countTimeout = setTimeout(() => info.count = 0, COUNT_TIMEOUT)
+      info.count++
+
+      switch (info.count) {
+        case 1: {
+          selection.clear()
+          Object.assign(caret, info.linecol)
+          $.flush()
+          selection.begin()
+          break
+        }
+        case 2: {
+          selection.selectWord()
+          break
+        }
+        case 3: {
+          selection.selectBlock()
+          break
+        }
+        case 4: {
+          selection.selectLine()
+          break
+        }
+        default: {
+          selection.clear()
+          info.count = 0
+          break
+        }
+      }
+      caret.info.isBlink = false
+    })),
+    dom.on(window, 'pointerup', $.fn((ev: PointerEvent) => {
+      updateFromEvent(ev)
+      info.isDown = false
+      info.buttons = 0
+
+      caret.info.isBlink = true
+    })),
+    dom.on(window, 'pointermove', $.fn((ev: PointerEvent) => {
+      updateFromEvent(ev)
+
+      if (info.buttons & MouseButtons.Left) {
+        Object.assign(caret, info.linecol)
+        $.flush()
+        selection.finish()
+      }
+    })),
+  ])
+
+  return { info }
+}
diff --git a/src/ui/editor/selection.ts b/src/ui/editor/selection.ts
new file mode 100644
index 0000000..4d72e00
--- /dev/null
+++ b/src/ui/editor/selection.ts
@@ -0,0 +1,167 @@
+import { BRACKET, Buffer, findMatchingBrackets, Linecol, pointToLinecol, type Caret } from 'editor'
+import { Sigui } from 'sigui'
+import { assign } from 'utils'
+
+export type Selection = ReturnType<typeof Selection>
+
+export function Selection({ buffer, caret }: {
+  buffer: Buffer
+  caret: Caret
+}) {
+  using $ = Sigui()
+
+  const info = $({
+    start: $(Linecol()),
+    end: $(Linecol()),
+    startIndex: 0,
+    endIndex: 0,
+    sorted: $({
+      get start() {
+        const { line: l1, col: c1 } = info.start
+        const { line: l2, col: c2 } = info.end
+        return l1 < l2 || (l1 === l2 && c1 < c2) ? info.start : info.end
+      },
+      get end() {
+        return info.end === info.sorted.start ? info.start : info.end
+      },
+      get startIndex() {
+        return info.startIndex < info.endIndex ? info.startIndex : info.endIndex
+      },
+      get endIndex() {
+        return info.endIndex > info.startIndex ? info.endIndex : info.startIndex
+      },
+      get forward() {
+        return info.startIndex < info.endIndex
+      },
+    }),
+    get isActive() {
+      return info.startIndex !== info.endIndex
+    },
+    get text() {
+      return buffer.code.slice(info.startIndex, info.endIndex)
+    },
+  })
+
+  // update start and end index
+  $.fx(() => {
+    const { line: y1, col: x1 } = info.start
+    const { line: y2, col: x2 } = info.end
+    $()
+    info.startIndex = buffer.visualPointToIndex({ x: x1, y: y1 })
+    info.endIndex = buffer.visualPointToIndex({ x: x2, y: y2 })
+  })
+
+  // update points from start and end index
+  $.fx(() => {
+    const { startIndex, endIndex } = info
+    $()
+    assign(info.start, pointToLinecol(buffer.indexToVisualPoint(startIndex)))
+    assign(info.end, pointToLinecol(buffer.indexToVisualPoint(endIndex)))
+  })
+
+  function begin() {
+    info.start.line = info.end.line = caret.visual.y
+    info.start.col = info.end.col = caret.visual.x
+    $.flush()
+  }
+
+  function finish() {
+    info.end.line = caret.visual.y
+    info.end.col = caret.visual.x
+    $.flush()
+  }
+
+  function clear() {
+    info.start.line = info.end.line = 0
+    info.start.col = info.end.col = 0
+    $.flush()
+  }
+
+  function deleteText() {
+    const { startIndex, endIndex } = info.sorted
+    const { code } = buffer
+    caret.index = startIndex
+    $.flush()
+    buffer.code = code.slice(0, startIndex) + code.slice(endIndex)
+    clear()
+    $.flush()
+  }
+
+  function selectAll() {
+    info.start.line = 0
+    info.start.col = 0
+    info.end.line = buffer.info.linesVisual.length - 1
+    info.end.col = buffer.info.linesVisual.at(-1).text.length
+    $.flush()
+  }
+
+  function selectWord(expand = false) {
+    const word = buffer.wordUnderVisualPoint(caret.visual)
+    if (word) {
+      const { y } = caret.visual
+      const start = { col: word.index, line: y }
+      const end = { col: word.index + word[0].length, line: y }
+      if (expand) {
+        assign(info.end, info.sorted.forward ? end : start)
+      }
+      else {
+        assign(info.start, start)
+        assign(info.end, end)
+      }
+
+      // We exclude brackets from being selected as words, so
+      // that we fallthrough to a matching brackets selection.
+      if (word[0].length === 1 && BRACKET.test(word[0])) return false
+      return Boolean(word[0].trim().length)
+    }
+    return false
+  }
+
+  function selectBlock(exclusive?: boolean) {
+    const index = buffer.visualPointToIndex(caret.visual)
+    const match = findMatchingBrackets(buffer.code, index)
+    if (match) {
+      const exn = Number(exclusive ?? 0)
+      let start = match[0] + exn
+      let end = match[1] - exn + 1
+      // swap direction depending on which side we are closest.
+      if (Math.abs(end - index) > Math.abs(start - index)) {
+        [start, end] = [end, start]
+      }
+      assign(info.start, pointToLinecol(buffer.indexToVisualPoint(start)))
+      assign(info.end, pointToLinecol(buffer.indexToVisualPoint(end)))
+      Object.assign(caret, info.end)
+      return true
+    }
+    return false
+  }
+
+  function selectLine() {
+    const { y } = caret
+    const line = buffer.info.lines[y]
+    const start = buffer.logicalPointToIndex({ x: 0, y })
+    const end = buffer.logicalPointToIndex({ x: line.length, y })
+    assign(info.start, pointToLinecol(buffer.indexToVisualPoint(start)))
+    assign(info.end, pointToLinecol(buffer.indexToVisualPoint(end)))
+    Object.assign(caret, info.end)
+  }
+
+  return $({
+    info,
+    start: info.start,
+    end: info.end,
+    startIndex: info.$.startIndex,
+    endIndex: info.$.endIndex,
+    isActive: info.$.isActive,
+    text: info.$.text,
+    sorted: info.sorted,
+    begin,
+    finish,
+    clear,
+    deleteText,
+    selectAll,
+    selectWord,
+    selectBlock,
+    selectLine,
+  })
+}
diff --git a/src/ui/editor/util/floats.ts b/src/ui/editor/util/floats.ts
index f53a99e..bd7d1bb 100644
--- a/src/ui/editor/util/floats.ts
+++ b/src/ui/editor/util/floats.ts
@@ -1,4 +1,4 @@
-import wasm from '~/src/as/gfx/wasm.ts'
+import { wasm } from 'gfx'
 import { WAVE_MIPMAPS } from '~/as/assembly/gfx/sketch-shared.ts'
 
 export type Floats = ReturnType<typeof Floats>
diff --git a/src/ui/editor/util/parse-words.ts b/src/ui/editor/util/parse-words.ts
index ccbab34..d7442ec 100644
--- a/src/ui/editor/util/parse-words.ts
+++ b/src/ui/editor/util/parse-words.ts
@@ -1,4 +1,4 @@
-export function parseWords(regexp: RegExp, text: any) {
+export function parseWords(regexp: RegExp, text: string) {
   regexp.lastIndex = 0
   let word
   const words: RegExpExecArray[] = []
diff --git a/src/ui/editor/util/types.ts b/src/ui/editor/util/types.ts
index b0505e4..8463a36 100644
--- a/src/ui/editor/util/types.ts
+++ b/src/ui/editor/util/types.ts
@@ -1,8 +1,15 @@
-export interface Point {
-  x: number
-  y: number
-}
+export type Point = ReturnType<typeof Point>
 
 export function Point() {
   return { x: 0, y: 0 }
 }
+
+export type Linecol = ReturnType<typeof Linecol>
+
+export function Linecol() {
+  return { line: 0, col: 0 }
+}
+
+export function pointToLinecol(p: Point): Linecol {
+  return { line: p.y, col: p.x }
+}
diff --git a/src/ui/editor/view.tsx b/src/ui/editor/view.tsx
index 386da02..1bd2e11 100644
--- a/src/ui/editor/view.tsx
+++ b/src/ui/editor/view.tsx
@@ -1,10 +1,11 @@
+import { Point, Widgets, type Buffer, type Caret, type Dims, type Linecol, type Selection } from 'editor'
 import { Sigui, type Signal } from 'sigui'
-import { drawText } from 'utils'
+import { clamp, drawText } from 'utils'
 import { Anim } from '~/src/as/gfx/anim.ts'
 import type { Token } from '~/src/lang/tokenize.ts'
 import { screen } from '~/src/screen.ts'
+import { theme } from '~/src/theme.ts'
 import { Canvas } from '~/src/ui/Canvas.tsx'
-import { Buffer, Caret, Dims, Point, Widgets } from '~/src/ui/editor/index.ts'
 
 interface TokenDrawInfo {
   point: Point
@@ -14,11 +15,12 @@ interface TokenDrawInfo {
 
 export type View = ReturnType<typeof View>
 
-export function View({ width, height, dims, caret, buffer, colorize }: {
+export function View({ width, height, selection, caret, dims, buffer, colorize }: {
   width: Signal<number>
   height: Signal<number>
-  dims: Dims
+  selection: Selection
   caret: Caret
+  dims: Dims
   buffer: Buffer
   colorize: (token: Token) => { fill: string, stroke: string }
 }) {
@@ -32,43 +34,29 @@ export function View({ width, height, dims, caret, buffer, colorize }: {
     svgs: new Set<SVGElement>()
   })
 
-  const canvas = <Canvas
-    width={width}
-    height={height}
-    class="absolute top-0 left-0"
-  /> as HTMLCanvasElement
-
-  const glCanvas = <Canvas
-    width={width}
-    height={height}
-    class="absolute top-0 left-0"
-  /> as HTMLCanvasElement
-
-  const svg = <svg
-    width={width}
-    height={height}
-    class="absolute top-0 left-0"
-  >{() => [...info.svgs]}</svg> as SVGSVGElement
-
-  const el = <div class="relative">
+  const canvas = <Canvas width={width} height={height} class="absolute top-0 left-0" /> as HTMLCanvasElement
+  const glCanvas = <Canvas width={width} height={height} class="absolute top-0 left-0" /> as HTMLCanvasElement
+  const svg = <svg width={width} height={height} class="absolute top-0 left-0" >{() =>
+    [...info.svgs]
+  }</svg> as SVGSVGElement
+
+  const el = <div class="relative cursor-text">
     {canvas}
     {glCanvas}
     {svg}
   </div> as HTMLDivElement
 
   const c = canvas.getContext('2d')!
-
   const widgets = Widgets({ width, height, c, glCanvas })
-
   const anim = Anim()
   anim.ticks.add(draw)
 
-  // draw info
+  // drawing info
   const tokenDrawInfo = new WeakMap<Token, TokenDrawInfo>()
-  let caretPoint = Point()
+  let caretViewPoint = Point()
   let extraHeights: number[] = []
 
-  function pointFromLinecol({ line, col }: { line: number, col: number }) {
+  function viewPointFromLinecol({ line, col }: Linecol): Point {
     const { charWidth, lineHeight } = dims.info
 
     const p = Point()
@@ -89,6 +77,34 @@ export function View({ width, height, dims, caret, buffer, colorize }: {
     return p
   }
 
+  function linecolFromViewPoint({ x, y }: Point): Linecol {
+    const { charWidth, lineHeight } = dims.info
+    const { linesVisual } = buffer.info
+
+    let top = 0
+    out: {
+      for (let i = 0; i <= linesVisual.length; i++) {
+        if (y < top) {
+          y = i - 1
+          break out
+        }
+
+        let l = widgets.lines.get(i)
+        if (l) {
+          top += l.deco
+          top += l.subs + 2
+        }
+        top += lineHeight
+      }
+      y = linesVisual.length - 1
+    }
+
+    const line = clamp(0, linesVisual.length - 1, y)
+    const col = clamp(0, linesVisual[y]?.text.length ?? 0, Math.round((x - 3) / charWidth))
+
+    return { line, col }
+  }
+
   // update token draw info
   $.fx(() => {
     const { tokens, linesVisual } = buffer.info
@@ -110,7 +126,7 @@ export function View({ width, height, dims, caret, buffer, colorize }: {
 
     widgets.deco.forEach(w => {
       const b = w.bounds
-      const p = pointFromLinecol(b)
+      const p = viewPointFromLinecol(b)
       w.rect.x = p.x
       w.rect.y = p.y - widgets.heights.deco - extraHeights[b.line]
       w.rect.w = ((b.right - b.col) * charWidth) | 0
@@ -119,7 +135,7 @@ export function View({ width, height, dims, caret, buffer, colorize }: {
 
     widgets.subs.forEach(w => {
       const b = w.bounds
-      const p = pointFromLinecol(b)
+      const p = viewPointFromLinecol(b)
       w.rect.x = p.x
       w.rect.y = p.y + lineHeight - 1
       w.rect.w = ((b.right - b.col) * charWidth) | 0
@@ -128,7 +144,7 @@ export function View({ width, height, dims, caret, buffer, colorize }: {
 
     widgets.mark.forEach(w => {
       const b = w.bounds
-      const p = pointFromLinecol(b)
+      const p = viewPointFromLinecol(b)
       w.rect.x = p.x - 1
       w.rect.y = p.y - 1
       w.rect.w = (((b.right - b.col) * charWidth) | 0) + 2.75
@@ -136,7 +152,7 @@ export function View({ width, height, dims, caret, buffer, colorize }: {
     })
 
     tokens.forEach(token => {
-      const point = pointFromLinecol(token)
+      const point = viewPointFromLinecol(token)
       point.y += 1
       const { fill, stroke } = colorize(token)
       tokenDrawInfo.set(token, {
@@ -147,11 +163,12 @@ export function View({ width, height, dims, caret, buffer, colorize }: {
     })
   })
 
+  // update caret view point
   $.fx(() => {
     const { tokens } = buffer.info
     const { x, y } = caret.visual
     $()
-    caretPoint = pointFromLinecol({ line: y, col: x })
+    caretViewPoint = viewPointFromLinecol({ line: y, col: x })
   })
 
   // wait for fonts to load
@@ -181,44 +198,78 @@ export function View({ width, height, dims, caret, buffer, colorize }: {
     const { width } = info
     const { charWidth } = dims.info
     $()
-    buffer.info.maxColumns = width / charWidth
+    buffer.info.maxColumns = Math.floor(width / charWidth)
   })
 
-  // draw everything
+  // trigger draw
   $.fx(() => {
     const { c, pr, width, height } = $.of(info)
     const { code } = buffer.info
     const { caretWidth, charWidth, charHeight, lineHeight } = dims.info
     const { isVisible: isCaretVisible } = caret.info
     const { x: cx, y: cy } = caret.info.visual
+    const { start: { line: sl, col: sc }, end: { line: el, col: ec } } = selection.info
     $()
     anim.info.epoch++
   })
 
-  function draw() {
-    const { c, width, height } = $.of(info)
-    const { charWidth, lineHeight } = dims.info
-    const { y: cy } = caret.visual
-
-    // clear editor
-    c.clearRect(0, 0, width, height)
+  function drawClear() {
+    c.clearRect(0, 0, info.width, info.height)
+  }
 
-    // draw active line
+  function drawActiveLine() {
     c.fillStyle = '#333'
-    c.fillRect(0, caretPoint.y, width, lineHeight - 2)
+    c.fillRect(0, caretViewPoint.y, info.width, dims.info.lineHeight - 2)
+  }
+
+  function drawSelection() {
+    if (!selection.isActive) return
+    const { lineHeight } = dims.info
+    const { start, end } = selection.sorted
+    const brPadding = 5
+    c.fillStyle = theme.colors.blue[800]
+    for (let line = start.line; line <= end.line; line++) {
+      const c1 = line === start.line ? start.col : 0
+      const c2 = line === end.line ? end.col : buffer.linesVisual[line].text.length
+      const p1 = viewPointFromLinecol({ line, col: c1 })
+      const p2 = viewPointFromLinecol({ line, col: c2 })
+      c.fillRect(p1.x, p1.y, p2.x - p1.x + (line === end.line ? 0 : brPadding), lineHeight)
+    }
+  }
 
-    // draw text
+  function drawCode() {
     buffer.info.tokens.forEach(token => {
       const d = tokenDrawInfo.get(token)
       if (d) drawText(c, d.point, token.text, d.fill, .025, d.stroke)
     })
+  }
 
-    // draw widgets
-    widgets.draw()
+  function drawCaret() {
+    if (!caret.info.isVisible) return
+    const { caretWidth, charHeight } = dims.info
+    c.fillStyle = '#fff'
+    c.fillRect(
+      caretViewPoint.x,
+      caretViewPoint.y + .5,
+      caretWidth,
+      charHeight
+    )
+  }
 
-    // draw caret
-    caret.draw(c, caretPoint)
+  function draw() {
+    drawClear()
+    drawActiveLine()
+    drawSelection()
+    drawCode()
+    widgets.draw()
+    drawCaret()
   }
 
-  return { el, info, widgets, anim }
+  return {
+    el,
+    info,
+    widgets,
+    anim,
+    linecolFromViewPoint
+  }
 }
diff --git a/src/ui/editor/widget.ts b/src/ui/editor/widget.ts
index 3f71892..280f18a 100644
--- a/src/ui/editor/widget.ts
+++ b/src/ui/editor/widget.ts
@@ -2,7 +2,6 @@ import { Sigui, type Signal } from 'sigui'
 import { Gfx } from '~/src/as/gfx/gfx.ts'
 import { Rect } from '~/src/as/gfx/types.ts'
 import type { Token } from '~/src/lang/tokenize.ts'
-import type { Point } from '~/src/ui/editor/util/types.ts'
 
 function Bounds(): Token.Bounds {
   using $ = Sigui()
@@ -47,11 +46,10 @@ export function Widgets({ width, height, c, glCanvas }: {
     lines.clear()
     types.forEach(type => {
       widgets[type].forEach(w => {
-        for (let y = w.bounds.line; y <= w.bounds.bottom; y++) {
-          let line = lines.get(y)
-          if (!line) lines.set(y, line = { deco: 0, subs: 0, mark: 0 })
-          line[type] = heights[type]
-        }
+        let y = w.bounds.line
+        let line = lines.get(y)
+        if (!line) lines.set(y, line = { deco: 0, subs: 0, mark: 0 })
+        line[type] = heights[type]
       })
     })
   }
diff --git a/vite.config.ts b/vite.config.ts
index ed70612..52d8902 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -132,6 +132,10 @@ export default ({ mode }) => {
   return defineConfig({
     clearScreen: false,
     server: {
+      watch: {
+        // KEEP: this option fixes hmr for an unknown reason
+        usePolling: true
+      },
       host: 'devito.test',
       fs: {
         allow: [

From e7c97ede504bde637ef453d786be8c0c6cdf2e73 Mon Sep 17 00:00:00 2001
From: stagas <gstagas@gmail.com>
Date: Sat, 12 Oct 2024 22:37:51 +0300
Subject: [PATCH 14/25] feat: wip editor

---
 src/lang/tokenize.ts                |  12 +-
 src/pages/EditorDemo.tsx            | 147 ++++++------
 src/ui/Editor.tsx                   |   8 +-
 src/ui/editor/buffer.ts             |  10 +-
 src/ui/editor/caret.ts              |  25 ++-
 src/ui/editor/dims.ts               |  17 +-
 src/ui/editor/kbd.tsx               | 335 ++++++++++++++++++++++++++--
 src/ui/editor/misc.ts               |   2 +
 src/ui/editor/mouse.ts              |   9 +-
 src/ui/editor/selection.ts          |  17 +-
 src/ui/editor/util/escape-regexp.ts |   3 +
 src/ui/editor/util/index.ts         |   5 +
 src/ui/editor/util/oklch.ts         |  46 ++--
 src/ui/editor/util/regexp.ts        |   2 +-
 src/ui/editor/util/types.ts         |   4 +
 src/ui/editor/view.tsx              |   6 +-
 16 files changed, 496 insertions(+), 152 deletions(-)
 create mode 100644 src/ui/editor/util/escape-regexp.ts

diff --git a/src/lang/tokenize.ts b/src/lang/tokenize.ts
index 49c4ae8..c2a93ff 100644
--- a/src/lang/tokenize.ts
+++ b/src/lang/tokenize.ts
@@ -26,6 +26,7 @@ export interface Token<T = any> {
 export namespace Token {
   export enum Type {
     Newline = 'Newline',
+    Realnewline = 'Realnewline',
     Whitespace = 'Whitespace',
     Native = 'Native',
     String = 'String',
@@ -40,6 +41,7 @@ export namespace Token {
 
   export const typesEntries = [
     [Type.Newline, /(\n)/],
+    [Type.Realnewline, /(\r)/],
     [Type.Whitespace, /(\s+?)/],
     [Type.Native, /(`[a-z]+`)/],
     [Type.String, /('[^'\n]*['\n])/],
@@ -49,7 +51,7 @@ export namespace Token {
     [Type.Number, /([0-9]+[dhk][0-9]*|[0-9]+\.[0-9]+|\.?[0-9]+)/],
     [Type.BlockComment, /(\[;|\(;|{;)/],
     [Type.Op, /(\*=|\+=|:=|\+|-|\*|\/|\^|%|!|=|\{|\}|\(|\)|\[|\]|:|\.)/],
-    [Type.Comment, /(;[^\n]*)/],
+    [Type.Comment, /(;)/],
     [Type.Any, /(.+?)/],
   ] as const
 
@@ -136,6 +138,7 @@ export function* tokenize(source: Source): Generator<Token, void, unknown> {
   let slice: string
   let open: keyof typeof Token.Close
   let close: typeof Token.Close[keyof typeof Token.Close]
+  let commenting = false
   const length = Token.typesEntries.length + 1
   const it = code.matchAll(Token.regexp)
   outer: for (match of it) {
@@ -144,6 +147,9 @@ export function* tokenize(source: Source): Generator<Token, void, unknown> {
       if (text != null) {
         type = Token.typesEntries[i - 1][0]
         switch (type) {
+          case Token.Type.Realnewline:
+            commenting = false
+            break
           case Token.Type.Whitespace:
             break
           case Token.Type.Newline:
@@ -204,10 +210,12 @@ export function* tokenize(source: Source): Generator<Token, void, unknown> {
             }
             break
           }
+          case Token.Type.Comment:
+            commenting = true
           default:
             col = match.index! - lineIndex
             yield {
-              type,
+              type: commenting ? Token.Type.Comment : type,
               text,
               line,
               col,
diff --git a/src/pages/EditorDemo.tsx b/src/pages/EditorDemo.tsx
index 12a5b30..ea11b48 100644
--- a/src/pages/EditorDemo.tsx
+++ b/src/pages/EditorDemo.tsx
@@ -36,12 +36,13 @@ export function EditorDemo({ width, height }: {
     width,
     height,
     code: `\
-
-
-[sin 300] [tri 444] [sqr 555] @ \
-[lp 300 .8] [dly 16 1 /] [ppd (3 4 5)] \
-[ar 10 50] * \
-`,
+[sin 300] [tri 111] [tri 222] [tri 333] [tri 444] [tri 555] [tri 666]
+    [saw 123]
+  [sqr 555] @
+[lp 300 .8]
+[dly 16 1 /]
+[ppd (3 4 5)]
+[ar 10 50] *`,
   })
 
   const colors: Partial<Record<Token.Type, { fill: string, stroke: string }>> = {
@@ -73,75 +74,75 @@ export function EditorDemo({ width, height }: {
   const shapes = editor.widgets.gfx.createShapes()
   editor.widgets.gfx.scene.add(shapes)
 
-  // ///////////////////
-  // const floats = Object.assign(
-  //   wasm.alloc(Float32Array, waveform.length),
-  //   { len: waveform.length }
-  // )
-  // floats.set(waveform)
-
-  // $.fx(() => {
-  //   const { tokens } = editor.buffer.info
-  //   $()
-  //   const gens: Token[][] = []
-
-  //   let depth = 0
-  //   let gen: Token[] = []
-  //   for (const token of tokens) {
-  //     if (token.text === '[') {
-  //       depth++
-  //     }
-  //     else if (token.text === ']') {
-  //       gen.push(token)
-  //       depth--
-  //       if (!depth) {
-  //         gens.push(gen)
-  //         gen = []
-  //       }
-  //     }
-  //     if (depth) gen.push(token)
-  //   }
-
-  //   if (!gens.length) return
-
-  //   const d = WaveCanvasWidget()
-  //   d.info.floats = floats
-  //   Object.assign(d.widget.bounds, Token.bounds(gens[0]))
-  //   editor.widgets.deco.add(d.widget)
-
-  //   const d2 = WaveGlWidget(shapes)
-  //   d2.info.floats = floats
-  //   Object.assign(d2.widget.bounds, Token.bounds(gens[1]))
-  //   editor.widgets.deco.add(d2.widget)
-
-  //   const d3 = WaveSvgWidget()
-  //   d3.info.floats = floats
-  //   Object.assign(d3.widget.bounds, Token.bounds(gens[2]))
-  //   editor.widgets.deco.add(d3.widget)
-  //   editor.view.info.svgs.add(d3.svg)
-  //   editor.view.info.svgs = new Set(editor.view.info.svgs)
-
-  //   return () => {
-  //     // decos.forEach(d => {
-  //     editor.widgets.deco.delete(d.widget)
-  //     //   d.dispose()
-  //     // })
-  //     editor.widgets.deco.delete(d2.widget)
-  //     d2.dispose()
-  //     editor.widgets.deco.delete(d3.widget)
-  //     editor.view.info.svgs.delete(d3.svg)
-  //     editor.view.info.svgs = new Set(editor.view.info.svgs)
-  //   }
-  // })
-  // editor.widgets.update()
+  ///////////////////
+  const floats = Object.assign(
+    wasm.alloc(Float32Array, waveform.length),
+    { len: waveform.length }
+  )
+  floats.set(waveform)
+
+  $.fx(() => {
+    const { tokens } = editor.buffer.info
+    $()
+    const gens: Token[][] = []
+
+    let depth = 0
+    let gen: Token[] = []
+    for (const token of tokens) {
+      if (token.text === '[') {
+        depth++
+      }
+      else if (token.text === ']') {
+        gen.push(token)
+        depth--
+        if (!depth) {
+          gens.push(gen)
+          gen = []
+        }
+      }
+      if (depth) gen.push(token)
+    }
 
-  // let t = 101
-  // // editor.anim.ticks.add(() => {
-  // floats.set(makeWaveform(2048, t += 1, 1 + Math.sin(t * 0.025) * 59))
-  // //   return true
-  // // })
+    if (!gens.length) return
+
+    const d = WaveCanvasWidget()
+    d.info.floats = floats
+    Object.assign(d.widget.bounds, Token.bounds(gens[0]))
+    editor.widgets.deco.add(d.widget)
+
+    const d2 = WaveGlWidget(shapes)
+    d2.info.floats = floats
+    Object.assign(d2.widget.bounds, Token.bounds(gens[1]))
+    editor.widgets.deco.add(d2.widget)
+
+    const d3 = WaveSvgWidget()
+    d3.info.floats = floats
+    Object.assign(d3.widget.bounds, Token.bounds(gens[2]))
+    editor.widgets.deco.add(d3.widget)
+    editor.view.info.svgs.add(d3.svg)
+    editor.view.info.svgs = new Set(editor.view.info.svgs)
+
+    return () => {
+      // decos.forEach(d => {
+      editor.widgets.deco.delete(d.widget)
+      //   d.dispose()
+      // })
+      editor.widgets.deco.delete(d2.widget)
+      d2.dispose()
+      editor.widgets.deco.delete(d3.widget)
+      editor.view.info.svgs.delete(d3.svg)
+      editor.view.info.svgs = new Set(editor.view.info.svgs)
+    }
+  })
+  editor.widgets.update()
+
+  let t = 101
+  // editor.anim.ticks.add(() => {
+  floats.set(makeWaveform(2048, t += 1, 1 + Math.sin(t * 0.025) * 59))
+  //   return true
+  // })
 
-  // ///////////////////
+  ///////////////////
 
   const el = <div>
     <div class="flex items-center justify-between">
diff --git a/src/ui/Editor.tsx b/src/ui/Editor.tsx
index 7755591..2593fb6 100644
--- a/src/ui/Editor.tsx
+++ b/src/ui/Editor.tsx
@@ -1,7 +1,7 @@
+import { Buffer, Caret, Dims, History, Kbd, Misc, Mouse, Selection, View, type WordWrapProcessor } from 'editor'
 import { Sigui, type Signal } from 'sigui'
 import { dom, isMobile } from 'utils'
 import type { Source, Token } from '~/src/lang/tokenize.ts'
-import { Buffer, Caret, Dims, History, Kbd, Misc, Mouse, Selection, View, type WordWrapProcessor } from 'editor'
 
 export function Editor({ code, width, height, colorize, tokenize, wordWrapProcessor }: {
   code: Signal<string>
@@ -14,13 +14,13 @@ export function Editor({ code, width, height, colorize, tokenize, wordWrapProces
   using $ = Sigui()
 
   const misc = Misc()
-  const dims = Dims()
+  const dims = Dims({ width, height })
   const buffer = Buffer({ code, tokenize, wordWrapProcessor })
   const caret = Caret({ buffer, misc })
   const selection = Selection({ buffer, caret })
   const history = History({ selection, buffer, caret })
-  const kbd = Kbd({ selection, buffer, caret, history })
-  const view = View({ width, height, selection, caret, dims, buffer, colorize })
+  const kbd = Kbd({ misc, dims, selection, buffer, caret, history })
+  const view = View({ selection, caret, dims, buffer, colorize })
   const mouse = Mouse({ selection, caret, view })
 
   // focus/blur
diff --git a/src/ui/editor/buffer.ts b/src/ui/editor/buffer.ts
index 8c37ff5..16a6c0a 100644
--- a/src/ui/editor/buffer.ts
+++ b/src/ui/editor/buffer.ts
@@ -30,7 +30,7 @@ export function Buffer({ code, tokenize, wordWrapProcessor = { pre: identity, po
       return info.code.length
     },
     get codeVisual() {
-      return info.linesVisual.map(line => line.text).join('\n')
+      return info.linesVisual.map(line => line.text + (line.br ? '\r' : '')).join('\n')
     },
     get source() {
       return { code: info.codeVisual }
@@ -189,7 +189,7 @@ export function Buffer({ code, tokenize, wordWrapProcessor = { pre: identity, po
       x = lines[y].length
     }
     else {
-      x = Math.min(x, lines[y].length)
+      x = Math.min(x, lines[y]?.length ?? 0)
     }
 
     const before = lines
@@ -239,6 +239,11 @@ export function Buffer({ code, tokenize, wordWrapProcessor = { pre: identity, po
     return indexToLogicalPoint(index)
   }
 
+  function logicalPointToVisualPoint(point: Point): Point {
+    const index = logicalPointToIndex(point)
+    return indexToVisualPoint(index)
+  }
+
   function wordUnderVisualPoint(point: Point): RegExpExecArray | undefined {
     const { x, y } = point
     const words = parseWords(TOKEN, info.linesVisual[y].text)
@@ -262,6 +267,7 @@ export function Buffer({ code, tokenize, wordWrapProcessor = { pre: identity, po
     logicalPointToIndex,
     visualPointToIndex,
     visualPointToLogicalPoint,
+    logicalPointToVisualPoint,
     wordUnderVisualPoint,
   })
 }
diff --git a/src/ui/editor/caret.ts b/src/ui/editor/caret.ts
index cab13e5..d87033f 100644
--- a/src/ui/editor/caret.ts
+++ b/src/ui/editor/caret.ts
@@ -28,6 +28,7 @@ export function Caret({ buffer, misc }: {
   $.fx(() => {
     const { index } = caret
     $()
+    caret.blinkReset++
     assign(caret.visual, buffer.indexToVisualPoint(index))
     assign(caret, buffer.indexToLogicalPoint(index))
   })
@@ -37,7 +38,13 @@ export function Caret({ buffer, misc }: {
     const { x, y } = caret.visual
     $()
     caret.index = buffer.visualPointToIndex({ x, y })
-    caret.blinkReset++
+  })
+
+  // set index from logical point
+  $.fx(() => {
+    const { x, y } = caret
+    $()
+    caret.index = buffer.logicalPointToIndex({ x, y })
   })
 
   // blink caret
@@ -92,10 +99,22 @@ export function Caret({ buffer, misc }: {
 
   function moveUpDown(dy: number) {
     const { linesVisual } = buffer.info
-    const newY = caret.visual.y + dy
+    let newX = caret.visualXIntent
+    let newY = caret.visual.y + dy
+    if (newY < 0) {
+      if (caret.visual.y === 0) newX = 0
+      newY = 0
+    }
+    const lastY = linesVisual.length - 1
+    if (newY > lastY) {
+      if (caret.visual.y === lastY) {
+        newX = linesVisual[lastY].text.length
+      }
+      newY = lastY
+    }
     if (newY >= 0 && newY <= linesVisual.length) {
       caret.index = buffer.visualPointToIndex({
-        x: caret.visualXIntent,
+        x: newX,
         y: newY
       })
     }
diff --git a/src/ui/editor/dims.ts b/src/ui/editor/dims.ts
index 47a1459..cc108e2 100644
--- a/src/ui/editor/dims.ts
+++ b/src/ui/editor/dims.ts
@@ -1,17 +1,30 @@
-import { Sigui } from 'sigui'
+import { Sigui, type Signal } from 'sigui'
 
 export type Dims = ReturnType<typeof Dims>
 
-export function Dims() {
+export function Dims({ width, height }: {
+  width: Signal<number>,
+  height: Signal<number>,
+}) {
   using $ = Sigui()
 
   const info = $({
+    width,
+    height,
+
     caretWidth: 1.5,
 
     charWidth: 1,
     charHeight: 1,
 
     lineHeight: 19,
+
+    get pageHeight() {
+      return Math.floor(info.height / info.lineHeight)
+    },
+    get pageWidth() {
+      return Math.floor(info.width / info.charWidth)
+    }
   })
 
   return { info }
diff --git a/src/ui/editor/kbd.tsx b/src/ui/editor/kbd.tsx
index 5d95bee..7b2eb2e 100644
--- a/src/ui/editor/kbd.tsx
+++ b/src/ui/editor/kbd.tsx
@@ -1,8 +1,10 @@
-import { Buffer, type Caret, type History, type Selection } from 'editor'
+import { beginOfLine, Buffer, escapeRegExp, findMatchingBrackets, linecolToPoint, pointToLinecol, type Caret, type Dims, type History, type Misc, type Selection } from 'editor'
 import { Sigui } from 'sigui'
-import { dom } from 'utils'
+import { assign, dom } from 'utils'
 
-export function Kbd({ selection, buffer, caret, history }: {
+export function Kbd({ misc, dims, selection, buffer, caret, history }: {
+  misc: Misc
+  dims: Dims
   selection: Selection
   buffer: Buffer
   caret: Caret
@@ -29,7 +31,256 @@ export function Kbd({ selection, buffer, caret, history }: {
 
   const { withHistory, withHistoryDebounced, undo, redo } = history
 
-  const handleKey = $.fn((ev: KeyboardEvent) => {
+  function tabIndent(shift: boolean) {
+    let index: number = Infinity
+    let lns: string[]
+    let y: number
+    const { lines } = buffer
+    const text = lines[caret.y]
+    if (selection.isActive) {
+      const { start, end } = selection.sorted
+      const p1 = buffer.visualPointToLogicalPoint(linecolToPoint(start))
+      const p2 = buffer.visualPointToLogicalPoint(linecolToPoint(end))
+      const { y: y1 } = p1
+      const { y: y2 } = p2
+      for (let y = y1; y <= y2; y++) {
+        index = Math.min(index, beginOfLine(lines[y]))
+      }
+      y = y1
+      lns = lines.slice(y1, y2 + 1)
+    }
+    else if (shift) {
+      index = beginOfLine(text)
+      y = caret.y
+      lns = [lines[y]]
+    }
+    else {
+      caret.insert('  ')
+      caret.index += 2
+      return
+    }
+
+    const dec = shift
+    if (dec && !index) return
+
+    let diff = 0
+    const tabSize = 2
+    const tab = ' '.repeat(tabSize)
+    lns.forEach((text, i) => {
+      if (dec) {
+        diff = -tabSize
+        text = text.replace(new RegExp(`^(\t| {1,${tabSize}})`, 'gm'), '')
+      }
+      else {
+        diff = +tabSize
+        text = text.length === 0 ? tab : text.replace(/^[^\n]/gm, `${tab}$&`)
+      }
+      lines[y + i] = text
+    })
+
+    buffer.code = lines.join('\n')
+
+    if (selection.isActive) {
+      // TODO
+    }
+    else {
+      caret.visual.x = Math.max(0, caret.visual.x + diff)
+      $.flush()
+      selection.reset()
+    }
+  }
+
+  function toggleSingleComment() {
+    const comment = misc.info.commentSingle
+    const { startIndex, end, endIndex, forward } = selection.sorted
+    const { lines } = buffer
+
+    const p1 = buffer.indexToLogicalPoint(startIndex)
+    const p2 = buffer.indexToLogicalPoint(endIndex)
+
+    const y1 = p1.y
+    const y2 = p1.y === p2.y || end.col > 0 ? p2.y : p2.y - 1
+
+    if (y1 === y2) {
+      const line = lines[y1]
+      const begin = beginOfLine(line)
+      const spaces = line.slice(0, begin)
+      let rest = line.slice(begin)
+      if (rest.startsWith(comment)) {
+        const r = new RegExp(`^${escapeRegExp(comment)}${spaces.length % 2 === 0 ? ' ?' : ''}`, 'm')
+        const length = rest.length
+        rest = rest.replace(r, '')
+        const chars = length - rest.length
+        selection.startIndex -= chars
+        selection.endIndex -= chars
+      }
+      else {
+        const commented = (spaces.length > 0 && spaces.length % 2 !== 0 ? ' ' : '') + comment + ' '
+        rest = commented + rest
+        selection.startIndex += commented.length
+        selection.endIndex += commented.length
+      }
+      lines[y1] = spaces + rest
+    }
+    else {
+      // determine if we should add or remove comments
+      const slice = lines.slice(y1, y2 + 1)
+      const shouldRemove = slice.every(l => l.trimStart().startsWith(comment))
+
+      // find leftmost indent
+      let indent = Infinity
+      for (let y = y1; y <= y2; y++) {
+        const begin = beginOfLine(lines[y])
+        indent = Math.min(begin, indent)
+      }
+
+      let diff = 0
+      let firstDiff = 0
+      let first = true
+      if (shouldRemove) {
+        for (let y = y1; y <= y2; y++) {
+          const line = lines[y]
+          const begin = beginOfLine(line)
+          const spaces = line.slice(0, begin)
+          let rest = line.slice(begin)
+          const r = new RegExp(`^${escapeRegExp(comment)}${spaces.length % 2 === 0 ? ' ?' : ''}`, 'm')
+          const length = rest.length
+          rest = rest.replace(r, '')
+          const chars = length - rest.length
+          if (first) {
+            firstDiff = chars
+            first = false
+          }
+          diff += chars
+          lines[y] = spaces + rest
+        }
+        if (forward) {
+          selection.startIndex -= firstDiff
+          selection.endIndex -= diff
+        }
+        else {
+          selection.startIndex -= diff
+          selection.endIndex -= firstDiff
+        }
+      }
+      else {
+        for (let y = y1; y <= y2; y++) {
+          const line = lines[y]
+          const spaces = line.slice(0, indent)
+          const rest = line.slice(indent)
+          const commented = comment + ' '
+          if (first) {
+            firstDiff = commented.length
+            first = false
+          }
+          diff += commented.length
+          lines[y] = spaces + commented + rest
+        }
+        if (forward) {
+          selection.startIndex += firstDiff
+          selection.endIndex += diff
+        }
+        else {
+          selection.startIndex += diff
+          selection.endIndex += firstDiff
+        }
+      }
+    }
+
+    buffer.lines = [...lines]
+    $.flush()
+    caret.index = selection.endIndex
+  }
+
+  function toggleDoubleComment() {
+    const [c1, c2] = misc.info.commentDouble
+    const { startIndex, end, endIndex, forward } = selection.sorted
+    const { code } = buffer
+
+    let before = code.slice(0, startIndex)
+    let middle = code.slice(startIndex, endIndex)
+    let after = code.slice(endIndex)
+
+    if (before.trimEnd().endsWith(c1) && after.trimStart().startsWith(c2)) {
+      const l = new RegExp(`${escapeRegExp(c1)}\\s*$`, 'm')
+      const length = before.length
+      before = before.replace(l, '')
+      const removed = length - before.length
+      const r = new RegExp(`^\\s*${escapeRegExp(c2)}`, 'm')
+      after = after.replace(r, '')
+      buffer.code = `${before}${middle}${after}`
+      selection.startIndex -= removed
+      selection.endIndex -= removed
+    }
+    else {
+      buffer.code = `${before}${c1} ${middle} ${c2}${after}`
+      selection.startIndex += c1.length + 1
+      selection.endIndex += c1.length + 1
+    }
+    $.flush()
+    caret.index = selection.endIndex
+  }
+
+  function toggleBlockComment() {
+    const match = findMatchingBrackets(buffer.code, caret.index)
+    if (match) {
+      const c = misc.info.commentSingle
+      const [b1, b2] = match
+      const b1p = b1 + 1
+      const { code } = buffer
+      const before = code.slice(0, b1p)
+      const middle = code.slice(b1p, b2)
+      const after = code.slice(b2)
+      if (middle.startsWith(c)) {
+        buffer.code = `${before}${middle.slice(c.length)}${after}`
+        if (caret.index > b1) caret.index--
+      }
+      else {
+        buffer.code = `${before}${c}${middle}${after}`
+        if (caret.index > b1) caret.index++
+      }
+    }
+  }
+
+  function duplicateSelection() {
+    const { length } = selection.text
+    caret.insert(selection.text)
+    caret.index += length
+    selection.info.startIndex += length
+    selection.info.endIndex += length
+  }
+
+  function duplicateLine() {
+    const { index } = caret
+    caret.index = buffer.logicalPointToIndex({ x: 0, y: caret.y })
+    $.flush()
+    const line = buffer.info.lines[caret.y] + '\n'
+    caret.insert(line)
+    caret.index = index + line.length
+  }
+
+  function moveLines(dy: number) {
+    const { start, end } = selection.sorted
+    const p1 = buffer.visualPointToLogicalPoint(linecolToPoint(start))
+    const p2 = buffer.visualPointToLogicalPoint(linecolToPoint(end))
+    const { y: y1 } = p1
+    const { y: y2 } = p2
+
+    if (y1 + dy < 0) dy = -y1
+    if (y2 + dy >= buffer.lines.length) dy = buffer.lines.length - y2
+    if (!dy) return
+
+    const slice = buffer.lines.splice(y1, y2 - y1 + (p2.x > 0 || !selection.isActive ? 1 : 0))
+    buffer.lines.splice(y1 + dy, 0, ...slice)
+    buffer.lines = [...buffer.lines]
+    p1.y += dy
+    p2.y += dy
+    caret.y += dy
+    assign(start, pointToLinecol(buffer.logicalPointToVisualPoint(p1)))
+    assign(end, pointToLinecol(buffer.logicalPointToVisualPoint(p2)))
+  }
+
+  const handleKey = $.fn((ev: KeyboardEvent): void => {
     if (ev.ctrlKey && ignoredKeys.includes(ev.key.toLowerCase())) return
 
     ev.preventDefault()
@@ -44,14 +295,17 @@ export function Kbd({ selection, buffer, caret, history }: {
     if (key === 'Enter') key = '\n'
 
     function withSelection(fn: () => void, force = false) {
-      if (!shift && selection.isActive) selection.clear()
+      if (!shift && selection.isActive) selection.reset()
       if (force || (shift && !selection.isActive)) {
-        selection.begin()
+        selection.reset()
       }
       fn()
       $.flush()
       if (force || shift) {
-        selection.finish()
+        selection.toCaret()
+      }
+      else {
+        selection.reset()
       }
     }
 
@@ -61,30 +315,40 @@ export function Kbd({ selection, buffer, caret, history }: {
       caret.info.visualXIntent = caret.visual.x
     }
 
+    // TODO:
+    // - alt + arrow left/right (depends on ast)
     if (key.length === 1) {
       if (ctrl) {
         // ctrl + a = select all
         if (key === 'a') return selection.selectAll()
 
+        // ctrl + / = toggle single comment line(s)
+        // ctrl + shift + / = toggle double comment line(s)
+        else if (key === '/' || key === '?') {
+          return withHistoryDebounced(() =>
+            withIntent(() => {
+              if (shift) toggleDoubleComment()
+              else toggleSingleComment()
+            })
+          )
+        }
+        // ctrl + ; = toggle block comment
+        else if (key === ';') {
+          return withHistoryDebounced(() =>
+            withIntent(toggleBlockComment)
+          )
+        }
+
         // ctrl + shift + d =
         //   with no selection: duplicate line
         //   with selection: duplicate selection
         else if (shift && key === 'D') {
           return withHistoryDebounced(() => {
-            const { index } = caret
             if (selection.isActive) {
-              const { length } = selection.text
-              caret.insert(selection.text)
-              caret.index += length
-              selection.info.startIndex += length
-              selection.info.endIndex += length
+              duplicateSelection()
             }
             else {
-              caret.index = buffer.logicalPointToIndex({ x: 0, y: caret.y })
-              $.flush()
-              const line = buffer.info.lines[caret.y] + '\n'
-              caret.insert(line)
-              caret.index = index + line.length
+              duplicateLine()
             }
           })
         }
@@ -110,10 +374,19 @@ export function Kbd({ selection, buffer, caret, history }: {
       )
     }
     else {
+      // tab
+      if (key === 'Tab') {
+        withHistoryDebounced(() =>
+          withIntent(() =>
+            tabIndent(shift)
+          )
+        )
+      }
+
       // backspace
       //   with selection: delete selection
       //   with no selection: delete character before caret
-      if (key === 'Backspace') {
+      else if (key === 'Backspace') {
         withHistoryDebounced(() => {
           if (selection.isActive) return selection.deleteText()
           if (ctrl) {
@@ -154,9 +427,25 @@ export function Kbd({ selection, buffer, caret, history }: {
         withSelection(() => withIntent(caret.moveEnd))
       }
       // arrow up/down
-      else if (key === 'ArrowUp' || key === 'ArrowDown') {
+      else if (
+        key === 'ArrowUp' ||
+        key === 'ArrowDown' ||
+        key === 'PageUp' ||
+        key === 'PageDown'
+      ) {
+        let dy = 0
+        if (key === 'ArrowUp') dy = -1
+        else if (key === 'ArrowDown') dy = +1
+        else if (key === 'PageUp') dy = -dims.info.pageHeight
+        else if (key === 'PageDown') dy = +dims.info.pageHeight
+        if (alt) {
+          // alt + arrow up/down: move lines/selection up/down
+          return withHistoryDebounced(() =>
+            moveLines(dy)
+          )
+        }
         withSelection(() =>
-          caret.moveUpDown(key === 'ArrowUp' ? -1 : +1)
+          caret.moveUpDown(dy)
         )
       }
       // arrow left
@@ -200,11 +489,11 @@ export function Kbd({ selection, buffer, caret, history }: {
       const text = ev.clipboardData?.getData('text/plain')
       if (text) {
         withHistory(() => {
-          selection.begin()
+          selection.reset()
           caret.insert(text)
           caret.index += text.length
           $.flush()
-          selection.finish()
+          selection.toCaret()
         })
       }
     })),
diff --git a/src/ui/editor/misc.ts b/src/ui/editor/misc.ts
index 38dcdad..bc1c435 100644
--- a/src/ui/editor/misc.ts
+++ b/src/ui/editor/misc.ts
@@ -7,6 +7,8 @@ export function Misc() {
 
   const info = $({
     isFocus: false,
+    commentSingle: ';',
+    commentDouble: ['[;', ']'],
   })
 
   return { info }
diff --git a/src/ui/editor/mouse.ts b/src/ui/editor/mouse.ts
index 7dbb3ba..e30d7d6 100644
--- a/src/ui/editor/mouse.ts
+++ b/src/ui/editor/mouse.ts
@@ -56,10 +56,11 @@ export function Mouse({ selection, caret, view }: {
 
       switch (info.count) {
         case 1: {
-          selection.clear()
+          selection.reset()
           Object.assign(caret, info.linecol)
+          caret.visualXIntent = caret.col
           $.flush()
-          selection.begin()
+          selection.reset()
           break
         }
         case 2: {
@@ -75,7 +76,7 @@ export function Mouse({ selection, caret, view }: {
           break
         }
         default: {
-          selection.clear()
+          selection.reset()
           info.count = 0
           break
         }
@@ -95,7 +96,7 @@ export function Mouse({ selection, caret, view }: {
       if (info.buttons & MouseButtons.Left) {
         Object.assign(caret, info.linecol)
         $.flush()
-        selection.finish()
+        selection.toCaret()
       }
     })),
   ])
diff --git a/src/ui/editor/selection.ts b/src/ui/editor/selection.ts
index 4d72e00..28c541e 100644
--- a/src/ui/editor/selection.ts
+++ b/src/ui/editor/selection.ts
@@ -59,31 +59,25 @@ export function Selection({ buffer, caret }: {
     assign(info.end, pointToLinecol(buffer.indexToVisualPoint(endIndex)))
   })
 
-  function begin() {
+  function reset() {
     info.start.line = info.end.line = caret.visual.y
     info.start.col = info.end.col = caret.visual.x
     $.flush()
   }
 
-  function finish() {
+  function toCaret() {
     info.end.line = caret.visual.y
     info.end.col = caret.visual.x
     $.flush()
   }
 
-  function clear() {
-    info.start.line = info.end.line = 0
-    info.start.col = info.end.col = 0
-    $.flush()
-  }
-
   function deleteText() {
     const { startIndex, endIndex } = info.sorted
     const { code } = buffer
     caret.index = startIndex
     $.flush()
     buffer.code = code.slice(0, startIndex) + code.slice(endIndex)
-    clear()
+    reset()
     $.flush()
   }
 
@@ -155,9 +149,8 @@ export function Selection({ buffer, caret }: {
     isActive: info.$.isActive,
     text: info.$.text,
     sorted: info.sorted,
-    begin,
-    finish,
-    clear,
+    reset,
+    toCaret,
     deleteText,
     selectAll,
     selectWord,
diff --git a/src/ui/editor/util/escape-regexp.ts b/src/ui/editor/util/escape-regexp.ts
new file mode 100644
index 0000000..097477a
--- /dev/null
+++ b/src/ui/editor/util/escape-regexp.ts
@@ -0,0 +1,3 @@
+export function escapeRegExp(string: string) {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
diff --git a/src/ui/editor/util/index.ts b/src/ui/editor/util/index.ts
index 84e0504..0807b28 100644
--- a/src/ui/editor/util/index.ts
+++ b/src/ui/editor/util/index.ts
@@ -1,5 +1,10 @@
 export * from './begin-of-line.ts'
+export * from './escape-regexp.ts'
 export * from './find-matching-brackets.ts'
+export * from './floats.ts'
+export * from './oklch.ts'
 export * from './parse-words.ts'
 export * from './regexp.ts'
+export * from './rgb.ts'
 export * from './types.ts'
+export * from './waveform.ts'
diff --git a/src/ui/editor/util/oklch.ts b/src/ui/editor/util/oklch.ts
index 65dd29c..b767aa1 100644
--- a/src/ui/editor/util/oklch.ts
+++ b/src/ui/editor/util/oklch.ts
@@ -2,56 +2,56 @@
 
 export function oklchToHex(oklchString: string): string | null {
     // Extracting values from the oklch string
-    const match = oklchString.match(/oklch\((\d+)%\s+(\d+)\s+(\d+)\)/);
+    const match = oklchString.match(/oklch\((\d+)%\s+(\d+)\s+(\d+)\)/)
 
     if (!match) {
         // Invalid input format
-        return null;
+        return null
     }
 
-    const lightness = parseInt(match[1], 10);
-    const chroma = parseInt(match[2], 10);
-    const hue = parseInt(match[3], 10);
+    const lightness = parseInt(match[1], 10)
+    const chroma = parseInt(match[2], 10)
+    const hue = parseInt(match[3], 10)
 
     // Convert oklch to RGB
-    const rgb = oklchToRGB(lightness, chroma, hue);
+    const rgb = oklchToRGB(lightness, chroma, hue)
 
     // Convert RGB to hexadecimal
-    const hex = rgbToHex(rgb);
+    const hex = rgbToHex(rgb)
 
-    return hex;
+    return hex
 }
 
 function oklchToRGB(lightness: number, chroma: number, hue: number): number[] {
-    const h = hue / 360;
-    const s = chroma / 100;
-    const l = lightness / 100;
+    const h = hue / 360
+    const s = chroma / 100
+    const l = lightness / 100
 
-    const x = chroma * (1 - Math.abs((h * 6) % 2 - 1));
+    const x = chroma * (1 - Math.abs((h * 6) % 2 - 1))
 
-    let r, g, b;
+    let r, g, b
 
     if (0 <= h && h < 1) {
-        [r, g, b] = [chroma, x, 0];
+        [r, g, b] = [chroma, x, 0]
     } else if (1 <= h && h < 2) {
-        [r, g, b] = [x, chroma, 0];
+        [r, g, b] = [x, chroma, 0]
     } else if (2 <= h && h < 3) {
-        [r, g, b] = [0, chroma, x];
+        [r, g, b] = [0, chroma, x]
     } else if (3 <= h && h < 4) {
-        [r, g, b] = [0, x, chroma];
+        [r, g, b] = [0, x, chroma]
     } else if (4 <= h && h < 5) {
-        [r, g, b] = [x, 0, chroma];
+        [r, g, b] = [x, 0, chroma]
     } else if (5 <= h && h < 6) {
-        [r, g, b] = [chroma, 0, x];
+        [r, g, b] = [chroma, 0, x]
     } else {
-        [r, g, b] = [0, 0, 0];
+        [r, g, b] = [0, 0, 0]
     }
 
-    const m = l - chroma / 2;
+    const m = l - chroma / 2
 
-    return [Math.round((r + m) * 255), Math.round((g + m) * 255), Math.round((b + m) * 255)];
+    return [Math.round((r + m) * 255), Math.round((g + m) * 255), Math.round((b + m) * 255)]
 }
 
 function rgbToHex(rgb: number[]): string {
-    return '#' + rgb.map(value => value.toString(16).padStart(2, '0')).join('');
+    return '#' + rgb.map(value => value.toString(16).padStart(2, '0')).join('')
 }
diff --git a/src/ui/editor/util/regexp.ts b/src/ui/editor/util/regexp.ts
index d0e76bb..a0fa280 100644
--- a/src/ui/editor/util/regexp.ts
+++ b/src/ui/editor/util/regexp.ts
@@ -1,5 +1,5 @@
 export const NONSPACE = /[^\s]/g
 export const SPACE = /\s/g
-export const WORD = /[\s]{2,}|[./\\()"'\-:,.;<>~!@#$%^&*|+=[\]{}`~?\b ]{1}|\w+/g
+export const WORD = /\n|[\s]{2,}|[./\\()"'\-:,.;<>~!@#$%^&*|+=[\]{}`~?\b ]{1}|\w+/g
 export const TOKEN = /\s+|[\w\.]+|[\W]/g
 export const BRACKET = /[\[\]\(\)\{\}]/ // used with .test so not a /g
diff --git a/src/ui/editor/util/types.ts b/src/ui/editor/util/types.ts
index 8463a36..13978e8 100644
--- a/src/ui/editor/util/types.ts
+++ b/src/ui/editor/util/types.ts
@@ -13,3 +13,7 @@ export function Linecol() {
 export function pointToLinecol(p: Point): Linecol {
   return { line: p.y, col: p.x }
 }
+
+export function linecolToPoint(linecol: Linecol): Point {
+  return { x: linecol.col, y: linecol.line }
+}
diff --git a/src/ui/editor/view.tsx b/src/ui/editor/view.tsx
index 1bd2e11..fc6f88c 100644
--- a/src/ui/editor/view.tsx
+++ b/src/ui/editor/view.tsx
@@ -15,9 +15,7 @@ interface TokenDrawInfo {
 
 export type View = ReturnType<typeof View>
 
-export function View({ width, height, selection, caret, dims, buffer, colorize }: {
-  width: Signal<number>
-  height: Signal<number>
+export function View({ selection, caret, dims, buffer, colorize }: {
   selection: Selection
   caret: Caret
   dims: Dims
@@ -26,6 +24,8 @@ export function View({ width, height, selection, caret, dims, buffer, colorize }
 }) {
   using $ = Sigui()
 
+  const { width, height } = dims.info.$
+
   const info = $({
     c: null as null | CanvasRenderingContext2D,
     pr: screen.$.pr,

From 4d8a2aa8bbc9c331aa38a07cf0ce1806c620bd5c Mon Sep 17 00:00:00 2001
From: stagas <gstagas@gmail.com>
Date: Sun, 13 Oct 2024 08:03:00 +0300
Subject: [PATCH 15/25] feat: wip editor

---
 src/pages/EditorDemo.tsx     |  8 +++++++-
 src/ui/Editor.tsx            |  2 +-
 src/ui/editor/buffer.test.ts |  6 ++++--
 src/ui/editor/buffer.ts      | 14 ++++++++++----
 src/ui/editor/caret.ts       |  3 +--
 src/ui/editor/kbd.tsx        |  3 +++
 src/ui/editor/view.tsx       | 24 ++++++++++--------------
 src/ui/editor/widget.ts      |  3 +--
 8 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/src/pages/EditorDemo.tsx b/src/pages/EditorDemo.tsx
index ea11b48..18c23b3 100644
--- a/src/pages/EditorDemo.tsx
+++ b/src/pages/EditorDemo.tsx
@@ -36,11 +36,17 @@ export function EditorDemo({ width, height }: {
     width,
     height,
     code: `\
+
+
+
+[dly 16 1 /]
+
+
+
 [sin 300] [tri 111] [tri 222] [tri 333] [tri 444] [tri 555] [tri 666]
     [saw 123]
   [sqr 555] @
 [lp 300 .8]
-[dly 16 1 /]
 [ppd (3 4 5)]
 [ar 10 50] *`,
   })
diff --git a/src/ui/Editor.tsx b/src/ui/Editor.tsx
index 2593fb6..8d52531 100644
--- a/src/ui/Editor.tsx
+++ b/src/ui/Editor.tsx
@@ -15,7 +15,7 @@ export function Editor({ code, width, height, colorize, tokenize, wordWrapProces
 
   const misc = Misc()
   const dims = Dims({ width, height })
-  const buffer = Buffer({ code, tokenize, wordWrapProcessor })
+  const buffer = Buffer({ dims, code, tokenize, wordWrapProcessor })
   const caret = Caret({ buffer, misc })
   const selection = Selection({ buffer, caret })
   const history = History({ selection, buffer, caret })
diff --git a/src/ui/editor/buffer.test.ts b/src/ui/editor/buffer.test.ts
index f2e9634..5ccd7aa 100644
--- a/src/ui/editor/buffer.test.ts
+++ b/src/ui/editor/buffer.test.ts
@@ -1,10 +1,12 @@
 import { $ } from 'sigui'
 import { tokenize } from '~/src/lang/tokenize.ts'
 import { Buffer } from '~/src/ui/editor/buffer.ts'
+import { Dims } from '~/src/ui/editor/dims.ts'
 
 function B(code: string, maxWidth: number) {
-  const info = $({ code })
-  const b = Buffer({ code: info.$.code, tokenize })
+  const info = $({ code, width: maxWidth, height: 300 })
+  const dims = Dims({ width: info.$.width, height: info.$.height })
+  const b = Buffer({ dims, code: info.$.code, tokenize })
   b.info.maxColumns = maxWidth
   return b
 }
diff --git a/src/ui/editor/buffer.ts b/src/ui/editor/buffer.ts
index 16a6c0a..4052d4d 100644
--- a/src/ui/editor/buffer.ts
+++ b/src/ui/editor/buffer.ts
@@ -1,6 +1,11 @@
 import { Sigui, type Signal } from 'sigui'
 import type { Source, Token } from '~/src/lang/tokenize.ts'
-import { parseWords, TOKEN, WORD, type Point } from 'editor'
+// KEEP: imports are not from 'editor' because of bun test
+// loading singletons that access the window object
+import { type Dims } from '~/src/ui/editor/dims.ts'
+import { parseWords } from '~/src/ui/editor/util/parse-words.ts'
+import { TOKEN, WORD } from '~/src/ui/editor/util/regexp.ts'
+import { type Point } from '~/src/ui/editor/util/types.ts'
 
 export interface Line {
   text: string
@@ -15,15 +20,16 @@ export type Buffer = ReturnType<typeof Buffer>
 
 function identity(x: any) { return x }
 
-export function Buffer({ code, tokenize, wordWrapProcessor = { pre: identity, post: identity } }: {
-  code: Signal<string>,
+export function Buffer({ dims, code, tokenize, wordWrapProcessor = { pre: identity, post: identity } }: {
+  dims: Dims
+  code: Signal<string>
   tokenize: (source: Source) => Generator<Token, void, unknown>
   wordWrapProcessor?: WordWrapProcessor
 }) {
   using $ = Sigui()
 
   const info = $({
-    maxColumns: 10,
+    maxColumns: dims.info.$.pageWidth,
     code,
     lines: [] as string[],
     get length() {
diff --git a/src/ui/editor/caret.ts b/src/ui/editor/caret.ts
index d87033f..94ec597 100644
--- a/src/ui/editor/caret.ts
+++ b/src/ui/editor/caret.ts
@@ -1,5 +1,4 @@
-import type { Buffer, Misc } from 'editor'
-import { beginOfLine, Point } from 'editor'
+import { beginOfLine, Point, type Buffer, type Misc } from 'editor'
 import { Sigui } from 'sigui'
 import { assign } from 'utils'
 
diff --git a/src/ui/editor/kbd.tsx b/src/ui/editor/kbd.tsx
index 7b2eb2e..0f6ddfd 100644
--- a/src/ui/editor/kbd.tsx
+++ b/src/ui/editor/kbd.tsx
@@ -266,6 +266,8 @@ export function Kbd({ misc, dims, selection, buffer, caret, history }: {
     const { y: y1 } = p1
     const { y: y2 } = p2
 
+    if (y1 === 0 && dy < 0) return
+    if (y2 === buffer.lines.length - 1 && dy > 0) return
     if (y1 + dy < 0) dy = -y1
     if (y2 + dy >= buffer.lines.length) dy = buffer.lines.length - y2
     if (!dy) return
@@ -332,6 +334,7 @@ export function Kbd({ misc, dims, selection, buffer, caret, history }: {
             })
           )
         }
+
         // ctrl + ; = toggle block comment
         else if (key === ';') {
           return withHistoryDebounced(() =>
diff --git a/src/ui/editor/view.tsx b/src/ui/editor/view.tsx
index fc6f88c..ea9b907 100644
--- a/src/ui/editor/view.tsx
+++ b/src/ui/editor/view.tsx
@@ -1,7 +1,7 @@
 import { Point, Widgets, type Buffer, type Caret, type Dims, type Linecol, type Selection } from 'editor'
-import { Sigui, type Signal } from 'sigui'
-import { clamp, drawText } from 'utils'
-import { Anim } from '~/src/as/gfx/anim.ts'
+import { Anim } from 'gfx'
+import { Sigui } from 'sigui'
+import { assign, clamp, drawText } from 'utils'
 import type { Token } from '~/src/lang/tokenize.ts'
 import { screen } from '~/src/screen.ts'
 import { theme } from '~/src/theme.ts'
@@ -68,7 +68,7 @@ export function View({ selection, caret, dims, buffer, colorize }: {
       if (l) top += l.deco
       if (y === line) p.y = top
       top += lineHeight
-      if (l) top += l.subs + 2
+      if (l?.subs) top += l.subs + 2
     }
 
     p.x = Math.floor(p.x + 1)
@@ -168,7 +168,11 @@ export function View({ selection, caret, dims, buffer, colorize }: {
     const { tokens } = buffer.info
     const { x, y } = caret.visual
     $()
-    caretViewPoint = viewPointFromLinecol({ line: y, col: x })
+    // NOTE: bugfix while toggling block comments caret wasn't updated.
+    //  there must be a real solution to this but for now this works.
+    queueMicrotask(() => {
+      assign(caretViewPoint, viewPointFromLinecol({ line: y, col: x }))
+    })
   })
 
   // wait for fonts to load
@@ -193,21 +197,13 @@ export function View({ selection, caret, dims, buffer, colorize }: {
     c.font = '16px "IBM Plex Mono", monospace'
   })
 
-  // adjust text columns width based on view width
-  $.fx(() => {
-    const { width } = info
-    const { charWidth } = dims.info
-    $()
-    buffer.info.maxColumns = Math.floor(width / charWidth)
-  })
-
   // trigger draw
   $.fx(() => {
     const { c, pr, width, height } = $.of(info)
     const { code } = buffer.info
     const { caretWidth, charWidth, charHeight, lineHeight } = dims.info
     const { isVisible: isCaretVisible } = caret.info
-    const { x: cx, y: cy } = caret.info.visual
+    const { x: cx, y: cy } = caret.visual
     const { start: { line: sl, col: sc }, end: { line: el, col: ec } } = selection.info
     $()
     anim.info.epoch++
diff --git a/src/ui/editor/widget.ts b/src/ui/editor/widget.ts
index 280f18a..fce1096 100644
--- a/src/ui/editor/widget.ts
+++ b/src/ui/editor/widget.ts
@@ -1,6 +1,5 @@
+import { Gfx, Rect } from 'gfx'
 import { Sigui, type Signal } from 'sigui'
-import { Gfx } from '~/src/as/gfx/gfx.ts'
-import { Rect } from '~/src/as/gfx/types.ts'
 import type { Token } from '~/src/lang/tokenize.ts'
 
 function Bounds(): Token.Bounds {

From cde3c0720929ccbd9acc8e13f132ea2d813bbbd3 Mon Sep 17 00:00:00 2001
From: stagas <gstagas@gmail.com>
Date: Sun, 13 Oct 2024 17:21:49 +0300
Subject: [PATCH 16/25] feat(editor): scrollbars

---
 src/pages/EditorDemo.tsx       | 153 +++++++-------
 src/ui/Editor.tsx              |  83 ++++----
 src/ui/editor/buffer.ts        |   7 +-
 src/ui/editor/caret.ts         |  13 +-
 src/ui/editor/dims.ts          |  21 +-
 src/ui/editor/draw.ts          | 360 +++++++++++++++++++++++++++++++++
 src/ui/editor/index.ts         |   3 +
 src/ui/editor/input.ts         | 245 ++++++++++++++++++++++
 src/ui/editor/kbd.tsx          |  60 +-----
 src/ui/editor/misc.ts          |   1 -
 src/ui/editor/mouse.ts         |  98 +--------
 src/ui/editor/pane.ts          |  47 +++++
 src/ui/editor/util/geometry.ts |   5 +
 src/ui/editor/util/index.ts    |   1 +
 src/ui/editor/util/types.ts    |   6 +
 src/ui/editor/view.tsx         | 275 ++++---------------------
 src/ui/editor/widget.ts        |  14 +-
 17 files changed, 877 insertions(+), 515 deletions(-)
 create mode 100644 src/ui/editor/draw.ts
 create mode 100644 src/ui/editor/input.ts
 create mode 100644 src/ui/editor/pane.ts
 create mode 100644 src/ui/editor/util/geometry.ts

diff --git a/src/pages/EditorDemo.tsx b/src/pages/EditorDemo.tsx
index 18c23b3..a925240 100644
--- a/src/pages/EditorDemo.tsx
+++ b/src/pages/EditorDemo.tsx
@@ -1,4 +1,4 @@
-import type { WordWrapProcessor } from 'editor'
+import { Rect, type WordWrapProcessor } from 'editor'
 import { wasm } from 'gfx'
 import { Sigui, type Signal } from 'sigui'
 import { AnimMode } from '~/src/comp/AnimMode.tsx'
@@ -43,7 +43,7 @@ export function EditorDemo({ width, height }: {
 
 
 
-[sin 300] [tri 111] [tri 222] [tri 333] [tri 444] [tri 555] [tri 666]
+[sin 3000000000000000] [tri 1111111] [tri 222] [tri 333] [tri 444] [tri 555] [tri 666]
     [saw 123]
   [sqr 555] @
 [lp 300 .8]
@@ -77,83 +77,92 @@ export function EditorDemo({ width, height }: {
     wordWrapProcessor,
   })
 
-  const shapes = editor.widgets.gfx.createShapes()
-  editor.widgets.gfx.scene.add(shapes)
-
-  ///////////////////
-  const floats = Object.assign(
-    wasm.alloc(Float32Array, waveform.length),
-    { len: waveform.length }
-  )
-  floats.set(waveform)
-
-  $.fx(() => {
-    const { tokens } = editor.buffer.info
-    $()
-    const gens: Token[][] = []
-
-    let depth = 0
-    let gen: Token[] = []
-    for (const token of tokens) {
-      if (token.text === '[') {
-        depth++
-      }
-      else if (token.text === ']') {
-        gen.push(token)
-        depth--
-        if (!depth) {
-          gens.push(gen)
-          gen = []
-        }
-      }
-      if (depth) gen.push(token)
-    }
-
-    if (!gens.length) return
-
-    const d = WaveCanvasWidget()
-    d.info.floats = floats
-    Object.assign(d.widget.bounds, Token.bounds(gens[0]))
-    editor.widgets.deco.add(d.widget)
-
-    const d2 = WaveGlWidget(shapes)
-    d2.info.floats = floats
-    Object.assign(d2.widget.bounds, Token.bounds(gens[1]))
-    editor.widgets.deco.add(d2.widget)
-
-    const d3 = WaveSvgWidget()
-    d3.info.floats = floats
-    Object.assign(d3.widget.bounds, Token.bounds(gens[2]))
-    editor.widgets.deco.add(d3.widget)
-    editor.view.info.svgs.add(d3.svg)
-    editor.view.info.svgs = new Set(editor.view.info.svgs)
-
-    return () => {
-      // decos.forEach(d => {
-      editor.widgets.deco.delete(d.widget)
-      //   d.dispose()
-      // })
-      editor.widgets.deco.delete(d2.widget)
-      d2.dispose()
-      editor.widgets.deco.delete(d3.widget)
-      editor.view.info.svgs.delete(d3.svg)
-      editor.view.info.svgs = new Set(editor.view.info.svgs)
-    }
+  const pane2Info = $({
+    code: 'hello\nworld'
   })
-  editor.widgets.update()
-
-  let t = 101
-  // editor.anim.ticks.add(() => {
-  floats.set(makeWaveform(2048, t += 1, 1 + Math.sin(t * 0.025) * 59))
-  //   return true
+  const pane2 = editor.createPane({
+    rect: $(Rect(), { x: 0, y: 210, w: 200, h: 200 }),
+    code: pane2Info.$.code,
+  })
+  editor.addPane(pane2)
+
+  // const shapes = editor.widgets.gfx.createShapes()
+  // editor.widgets.gfx.scene.add(shapes)
+
+  // ///////////////////
+  // const floats = Object.assign(
+  //   wasm.alloc(Float32Array, waveform.length),
+  //   { len: waveform.length }
+  // )
+  // floats.set(waveform)
+
+  // $.fx(() => {
+  //   const { tokens } = editor.buffer.info
+  //   $()
+  //   const gens: Token[][] = []
+
+  //   let depth = 0
+  //   let gen: Token[] = []
+  //   for (const token of tokens) {
+  //     if (token.text === '[') {
+  //       depth++
+  //     }
+  //     else if (token.text === ']') {
+  //       gen.push(token)
+  //       depth--
+  //       if (!depth) {
+  //         gens.push(gen)
+  //         gen = []
+  //       }
+  //     }
+  //     if (depth) gen.push(token)
+  //   }
+
+  //   if (!gens.length) return
+
+  //   const d = WaveCanvasWidget()
+  //   d.info.floats = floats
+  //   Object.assign(d.widget.bounds, Token.bounds(gens[0]))
+  //   editor.widgets.deco.add(d.widget)
+
+  //   const d2 = WaveGlWidget(shapes)
+  //   d2.info.floats = floats
+  //   Object.assign(d2.widget.bounds, Token.bounds(gens[1]))
+  //   editor.widgets.deco.add(d2.widget)
+
+  //   const d3 = WaveSvgWidget()
+  //   d3.info.floats = floats
+  //   Object.assign(d3.widget.bounds, Token.bounds(gens[2]))
+  //   editor.widgets.deco.add(d3.widget)
+  //   editor.view.info.svgs.add(d3.svg)
+  //   editor.view.info.svgs = new Set(editor.view.info.svgs)
+
+  //   return () => {
+  //     // decos.forEach(d => {
+  //     editor.widgets.deco.delete(d.widget)
+  //     //   d.dispose()
+  //     // })
+  //     editor.widgets.deco.delete(d2.widget)
+  //     d2.dispose()
+  //     editor.widgets.deco.delete(d3.widget)
+  //     editor.view.info.svgs.delete(d3.svg)
+  //     editor.view.info.svgs = new Set(editor.view.info.svgs)
+  //   }
   // })
+  // editor.widgets.update()
+
+  // let t = 101
+  // // editor.anim.ticks.add(() => {
+  // floats.set(makeWaveform(2048, t += 1, 1 + Math.sin(t * 0.025) * 59))
+  // //   return true
+  // // })
 
-  ///////////////////
+  // ///////////////////
 
   const el = <div>
     <div class="flex items-center justify-between">
       <H2>Editor demo</H2>
-      <AnimMode anim={editor.anim} />
+      <AnimMode anim={editor.view.anim} />
     </div>
     {editor}
   </div>
diff --git a/src/ui/Editor.tsx b/src/ui/Editor.tsx
index 8d52531..c16db6d 100644
--- a/src/ui/Editor.tsx
+++ b/src/ui/Editor.tsx
@@ -1,6 +1,5 @@
-import { Buffer, Caret, Dims, History, Kbd, Misc, Mouse, Selection, View, type WordWrapProcessor } from 'editor'
+import { Input, Misc, Pane, Rect, View, type WordWrapProcessor } from 'editor'
 import { Sigui, type Signal } from 'sigui'
-import { dom, isMobile } from 'utils'
 import type { Source, Token } from '~/src/lang/tokenize.ts'
 
 export function Editor({ code, width, height, colorize, tokenize, wordWrapProcessor }: {
@@ -14,52 +13,66 @@ export function Editor({ code, width, height, colorize, tokenize, wordWrapProces
   using $ = Sigui()
 
   const misc = Misc()
-  const dims = Dims({ width, height })
-  const buffer = Buffer({ dims, code, tokenize, wordWrapProcessor })
-  const caret = Caret({ buffer, misc })
-  const selection = Selection({ buffer, caret })
-  const history = History({ selection, buffer, caret })
-  const kbd = Kbd({ misc, dims, selection, buffer, caret, history })
-  const view = View({ selection, caret, dims, buffer, colorize })
-  const mouse = Mouse({ selection, caret, view })
+  const view = View({ width, height })
 
-  // focus/blur
-  function focus() {
-    kbd.focus({ preventScroll: true })
+  function createPane({ rect, code }: {
+    rect: Rect
+    code: Signal<string>
+  }) {
+    const pane = Pane({
+      misc,
+      view,
+      rect,
+      code,
+      colorize,
+      tokenize,
+      wordWrapProcessor
+    })
+    return pane
   }
 
-  function preventAndFocus(ev: Event) {
-    ev.preventDefault()
-    focus()
+  function addPane(pane: Pane) {
+    info.panes = new Set([...info.panes, pane])
+    view.anim.ticks.add(pane.draw.draw)
   }
 
-  function onFocus() {
-    misc.info.isFocus = caret.info.isBlink = true
+  function removePane(pane: Pane) {
+    info.panes.delete(pane)
+    info.panes = new Set(info.panes)
+    view.anim.ticks.delete(pane.draw.draw)
   }
 
-  function onBlur() {
-    if (mouse.info.isDown) return
-    misc.info.isFocus = caret.info.isVisible = caret.info.isBlink = false
-  }
+  const pane = createPane({
+    rect: $(Rect(), { w: 193, h: 200 }),
+    code,
+  })
 
-  $.fx(() => [
-    dom.on(kbd, 'focus', onFocus),
-    dom.on(kbd, 'blur', onBlur),
-    dom.on(window, 'blur', onBlur),
-  ])
+  const info = $({
+    pane,
+    panes: new Set([pane])
+  })
 
-  $.fx(() => [
-    dom.on(window, 'focus', () => focus()),
-    dom.on(view.el, 'pointerup', preventAndFocus),
-    isMobile() && dom.on(view.el, 'touchend', preventAndFocus),
-  ])
+  const input = Input({
+    misc,
+    view,
+    pane: info.$.pane,
+    panes: info.$.panes,
+  })
 
-  requestAnimationFrame(focus)
+  addPane(pane)
 
   const el = <div>
     {view.el}
-    {kbd}
+    {view.textarea}
   </div> as HTMLDivElement
 
-  return { el, focus, buffer, view, anim: view.anim, widgets: view.widgets }
+  return {
+    el,
+    info,
+    focus: input.focus,
+    view,
+    createPane,
+    addPane,
+    removePane
+  }
 }
diff --git a/src/ui/editor/buffer.ts b/src/ui/editor/buffer.ts
index 4052d4d..6e5e3b1 100644
--- a/src/ui/editor/buffer.ts
+++ b/src/ui/editor/buffer.ts
@@ -30,6 +30,7 @@ export function Buffer({ dims, code, tokenize, wordWrapProcessor = { pre: identi
 
   const info = $({
     maxColumns: dims.info.$.pageWidth,
+    wordWrapEnabled: false,
     code,
     lines: [] as string[],
     get length() {
@@ -48,9 +49,11 @@ export function Buffer({ dims, code, tokenize, wordWrapProcessor = { pre: identi
       return parseWords(WORD, info.code)
     },
     get linesVisual(): Line[] {
-      const { code, maxColumns } = info
+      const { code, maxColumns, wordWrapEnabled } = info
       $()
-      return wordWrap()
+      return wordWrapEnabled
+        ? wordWrap()
+        : code.split('\n').map(text => ({ text }))
     }
   })
 
diff --git a/src/ui/editor/caret.ts b/src/ui/editor/caret.ts
index 94ec597..331a6d9 100644
--- a/src/ui/editor/caret.ts
+++ b/src/ui/editor/caret.ts
@@ -1,12 +1,12 @@
-import { beginOfLine, Point, type Buffer, type Misc } from 'editor'
+import { beginOfLine, Point, type Buffer, type PaneInfo } from 'editor'
 import { Sigui } from 'sigui'
 import { assign } from 'utils'
 
 export type Caret = ReturnType<typeof Caret>
 
-export function Caret({ buffer, misc }: {
+export function Caret({ paneInfo, buffer }: {
+  paneInfo: PaneInfo,
   buffer: Buffer,
-  misc: Misc,
 }) {
   using $ = Sigui()
 
@@ -48,10 +48,13 @@ export function Caret({ buffer, misc }: {
 
   // blink caret
   $.fx(() => {
-    const { isFocus } = misc.info
+    const { isFocus } = paneInfo
     const { isBlink, blinkReset } = caret
     $()
-    if (!isFocus || !isBlink) return
+    if (!isFocus || !isBlink) {
+      caret.isVisible = false
+      return
+    }
     caret.isVisible = true
     const caretIv = setInterval(() => {
       caret.isVisible = !caret.isVisible
diff --git a/src/ui/editor/dims.ts b/src/ui/editor/dims.ts
index cc108e2..39da596 100644
--- a/src/ui/editor/dims.ts
+++ b/src/ui/editor/dims.ts
@@ -1,16 +1,16 @@
 import { Sigui, type Signal } from 'sigui'
+import type { Rect } from 'editor'
+import { clamp } from 'utils'
 
 export type Dims = ReturnType<typeof Dims>
 
-export function Dims({ width, height }: {
-  width: Signal<number>,
-  height: Signal<number>,
+export function Dims({ rect }: {
+  rect: Rect
 }) {
   using $ = Sigui()
 
   const info = $({
-    width,
-    height,
+    rect,
 
     caretWidth: 1.5,
 
@@ -19,12 +19,11 @@ export function Dims({ width, height }: {
 
     lineHeight: 19,
 
-    get pageHeight() {
-      return Math.floor(info.height / info.lineHeight)
-    },
-    get pageWidth() {
-      return Math.floor(info.width / info.charWidth)
-    }
+    pageHeight: 1,
+    pageWidth: 1,
+
+    scrollX: 0,
+    scrollY: 0,
   })
 
   return { info }
diff --git a/src/ui/editor/draw.ts b/src/ui/editor/draw.ts
new file mode 100644
index 0000000..2096458
--- /dev/null
+++ b/src/ui/editor/draw.ts
@@ -0,0 +1,360 @@
+import { Point, Widgets, type Buffer, type Caret, type Dims, type Linecol, type Selection, type View } from 'editor'
+import { Sigui } from 'sigui'
+import { assign, clamp, drawText, randomHex } from 'utils'
+import type { Token } from '~/src/lang/tokenize.ts'
+import { screen } from '~/src/screen.ts'
+import { theme } from '~/src/theme.ts'
+
+interface TokenDrawInfo {
+  point: Point
+  fill: string
+  stroke: string
+}
+
+export type Draw = ReturnType<typeof Draw>
+
+export function Draw({ view, selection, caret, dims, buffer, colorize }: {
+  view: View
+  selection: Selection
+  caret: Caret
+  dims: Dims
+  buffer: Buffer
+  colorize: (token: Token) => { fill: string, stroke: string }
+}) {
+  using $ = Sigui()
+
+  const { c } = view
+  const { rect } = dims.info.$
+
+  const info = $({
+    c: null as null | CanvasRenderingContext2D,
+    pr: screen.$.pr,
+    rect,
+    showScrollbars: false,
+  })
+
+  const widgets = Widgets({ c })
+
+  // drawing info
+  const tokenDrawInfo = new WeakMap<Token, TokenDrawInfo>()
+  let caretViewPoint = $(Point())
+  let extraHeights: number[] = []
+  let innerSize = Point()
+  const textPadding = 5
+  const scrollbarSize = 5
+
+  function viewPointFromLinecol({ line, col }: Linecol): Point {
+    const { charWidth, lineHeight } = dims.info
+
+    const p = Point()
+    p.x = col * charWidth
+
+    let top = 0
+    for (let y = 0; y <= line; y++) {
+      let l = widgets.lines.get(y)
+      if (l) top += l.deco
+      if (y === line) p.y = top
+      top += lineHeight
+      if (l?.subs) top += l.subs + 2
+    }
+
+    p.x = Math.floor(p.x + textPadding)
+    p.y = Math.floor(p.y + textPadding)
+
+    return p
+  }
+
+  function linecolFromViewPoint({ x, y }: Point): Linecol {
+    const { charWidth, lineHeight } = dims.info
+    const { linesVisual } = buffer.info
+
+    y -= textPadding
+    x -= textPadding
+
+    let top = 0
+    out: {
+      for (let i = 0; i <= linesVisual.length; i++) {
+        if (y < top) {
+          y = i - 1
+          break out
+        }
+
+        let l = widgets.lines.get(i)
+        if (l) {
+          top += l.deco
+          if (l.subs) top += l.subs + 2
+        }
+        top += lineHeight
+      }
+      y = linesVisual.length - 1
+    }
+
+    const line = clamp(0, linesVisual.length - 1, y)
+    const col = clamp(0, linesVisual[y]?.text.length ?? 0, Math.round((x - 3) / charWidth))
+
+    return { line, col }
+  }
+
+  // update token draw info
+  $.fx(() => {
+    const { tokens, linesVisual } = buffer.info
+    const { charWidth, lineHeight } = dims.info
+
+    $()
+
+    widgets.update()
+
+    const lastVisibleLine = linesVisual.length
+    let eh = 0
+    extraHeights = Array.from({ length: lastVisibleLine }, (_, y) => {
+      let curr = eh
+      const line = linesVisual[y]
+      if (!line.text.trim().length) eh += lineHeight
+      else eh = 0
+      return curr
+    })
+
+    widgets.deco.forEach(w => {
+      const b = w.bounds
+      const p = viewPointFromLinecol(b)
+      w.rect.x = p.x
+      w.rect.y = p.y - widgets.heights.deco - extraHeights[b.line]
+      w.rect.w = ((b.right - b.col) * charWidth) | 0
+      w.rect.h = widgets.heights.deco + extraHeights[b.line] - .5
+    })
+
+    widgets.subs.forEach(w => {
+      const b = w.bounds
+      const p = viewPointFromLinecol(b)
+      w.rect.x = p.x
+      w.rect.y = p.y + lineHeight - 1
+      w.rect.w = ((b.right - b.col) * charWidth) | 0
+      w.rect.h = widgets.heights.subs
+    })
+
+    widgets.mark.forEach(w => {
+      const b = w.bounds
+      const p = viewPointFromLinecol(b)
+      w.rect.x = p.x - 1
+      w.rect.y = p.y - 1
+      w.rect.w = (((b.right - b.col) * charWidth) | 0) + 2.75
+      w.rect.h = (lineHeight) - .5
+    })
+
+    tokens.forEach(token => {
+      const point = viewPointFromLinecol(token)
+      point.y += 1
+      const { fill, stroke } = colorize(token)
+      tokenDrawInfo.set(token, {
+        point,
+        fill,
+        stroke,
+      })
+    })
+  })
+
+  // update caret view point
+  $.fx(() => {
+    const { tokens } = buffer.info
+    const { x, y } = caret.visual
+    $()
+    // NOTE: bugfix while toggling block comments caret wasn't updated.
+    //  there must be a real solution to this but for now this works.
+    assign(caretViewPoint, viewPointFromLinecol({ line: y, col: x }))
+    queueMicrotask(() => {
+      assign(caretViewPoint, viewPointFromLinecol({ line: y, col: x }))
+    })
+  })
+
+  // wait for fonts to load
+  document.fonts.ready.then(() => {
+    info.c = c
+
+    // measure char width and height
+    const metrics = c.measureText('M')
+    dims.info.charWidth = metrics.width
+    dims.info.charHeight = Math.ceil(metrics.fontBoundingBoxDescent - metrics.fontBoundingBoxAscent)
+  })
+
+  // update inner size
+  $.fx(() => {
+    const { w, h } = info.rect
+    const { linesVisual } = buffer.info
+    const { lineHeight } = dims.info
+    $()
+    innerSize.x = 0
+    innerSize.y = 0
+    for (const line of linesVisual) {
+      innerSize.x = Math.max(innerSize.x, line.text.length * dims.info.charWidth + textPadding * 2)
+    }
+    innerSize.x = Math.max(w, innerSize.x)
+    innerSize.y = Math.max(h, viewPointFromLinecol({ line: linesVisual.length, col: 0 }).y + textPadding * 2)
+  })
+
+  // update scroll
+  $.fx(() => {
+    const { rect: { w, h }, scrollX, scrollY } = dims.info
+    const { x, y } = innerSize
+    $()
+    dims.info.scrollX = clamp(-(x - w), 0, scrollX)
+    dims.info.scrollY = clamp(-(y - h), 0, scrollY)
+  })
+
+  // keep caret in view by adjusting scroll when caret is moving
+  $.fx(() => {
+    const { x, y } = caretViewPoint
+    const { w, h } = info.rect
+    const { charWidth, charHeight } = dims.info
+    $()
+    const { scrollX, scrollY } = dims.info
+
+    if (y > -scrollY + h - charHeight) dims.info.scrollY = -(y - h + charHeight)
+    if (y < -scrollY) dims.info.scrollY = -y
+
+    if (x > -scrollX + w - charWidth) dims.info.scrollX = -(x - w + charWidth)
+    if (x < -scrollX) dims.info.scrollX = -x
+  })
+
+  // update page size
+  $.fx(() => {
+    const { w, h } = info.rect
+    const { charWidth, lineHeight } = dims.info
+    $()
+    dims.info.pageWidth = Math.floor((w - textPadding * 2) / charWidth)
+    dims.info.pageHeight = Math.floor((h - textPadding * 2) / lineHeight)
+  })
+
+  // trigger draw
+  $.fx(() => {
+    const { c, pr, rect: { x, y, w, h }, showScrollbars } = $.of(info)
+    const { code } = buffer.info
+    const { caretWidth, charWidth, charHeight, lineHeight, scrollX, scrollY } = dims.info
+    const { isVisible: isCaretVisible } = caret.info
+    const { x: cx, y: cy } = caret.visual
+    const { start: { line: sl, col: sc }, end: { line: el, col: ec } } = selection.info
+    $()
+    view.anim.info.epoch++
+  })
+
+  const color = randomHex(3, '2', '5')
+  function drawClear() {
+    const { x, y, w, h } = info.rect
+    c.beginPath()
+    c.rect(x, y, w, h)
+    c.clip()
+    c.clearRect(x, y, w + 1, h + 1)
+    // temp
+    c.translate(x, y)
+    c.fillStyle = '#' + color
+    c.fillRect(0, 0, w, h)
+
+    c.translate(dims.info.scrollX, dims.info.scrollY)
+
+  }
+
+  function drawActiveLine() {
+    c.fillStyle = '#fff1'
+    c.fillRect(0, caretViewPoint.y, info.rect.w, dims.info.lineHeight - 2)
+  }
+
+  function drawSelection() {
+    if (!selection.isActive) return
+    const { lineHeight } = dims.info
+    const { start, end } = selection.sorted
+    const brPadding = 5
+    c.fillStyle = theme.colors.blue[800]
+    for (let line = start.line; line <= end.line; line++) {
+      const c1 = line === start.line ? start.col : 0
+      const c2 = line === end.line ? end.col : buffer.linesVisual[line].text.length
+      const p1 = viewPointFromLinecol({ line, col: c1 })
+      const p2 = viewPointFromLinecol({ line, col: c2 })
+      c.fillRect(p1.x, p1.y, p2.x - p1.x + (line === end.line ? 0 : brPadding), lineHeight)
+    }
+  }
+
+  function drawCode() {
+    buffer.info.tokens.forEach(token => {
+      const d = tokenDrawInfo.get(token)
+      if (d) drawText(c, d.point, token.text, d.fill, .025, d.stroke)
+    })
+  }
+
+  function drawCaret() {
+    if (!caret.info.isVisible) return
+    const { caretWidth, charHeight } = dims.info
+    c.fillStyle = '#fff'
+    c.fillRect(
+      caretViewPoint.x,
+      caretViewPoint.y + .5,
+      caretWidth,
+      charHeight
+    )
+  }
+
+  function drawScrollbars() {
+    if (!info.showScrollbars) return
+
+    // outer rectangle
+    const { x, y, w, h } = info.rect
+
+    // scroll amount
+    const { scrollX, scrollY } = dims.info
+
+    // inner size
+    const { x: bx, y: by } = innerSize
+
+    c.fillStyle = '#aaa5'
+
+    // draw vertical scrollbar
+    {
+      const coeff = h / by
+      if (coeff < 1) {
+        const scrollbarWidth = scrollbarSize
+        const scrollbarHeight = h * (h / by)
+        const scrollbarY = (-scrollY / by) * h
+
+        c.fillRect(
+          x + w - scrollbarWidth,
+          y + scrollbarY,
+          scrollbarWidth,
+          scrollbarHeight
+        )
+      }
+    }
+
+    // draw horizontal scrollbar
+    {
+      const coeff = w / bx
+      if (coeff < 1) {
+        const scrollbarWidth = w * coeff
+        const scrollbarHeight = scrollbarSize
+        const scrollbarX = (-scrollX / bx) * w
+        c.fillRect(
+          x + scrollbarX,
+          y + h - scrollbarHeight,
+          scrollbarWidth,
+          scrollbarHeight
+        )
+      }
+    }
+  }
+
+  function draw() {
+    c.save()
+    drawClear()
+    drawActiveLine()
+    drawSelection()
+    drawCode()
+    widgets.draw()
+    drawCaret()
+    c.restore()
+    drawScrollbars()
+  }
+
+  return {
+    info,
+    draw,
+    widgets,
+    linecolFromViewPoint
+  }
+}
diff --git a/src/ui/editor/index.ts b/src/ui/editor/index.ts
index c1e949c..a0c8ede 100644
--- a/src/ui/editor/index.ts
+++ b/src/ui/editor/index.ts
@@ -1,10 +1,13 @@
 export * from './buffer.ts'
 export * from './caret.ts'
 export * from './dims.ts'
+export * from './draw.ts'
 export * from './history.ts'
+export * from './input.ts'
 export * from './kbd.tsx'
 export * from './misc.ts'
 export * from './mouse.ts'
+export * from './pane.ts'
 export * from './selection.ts'
 export * from './util/index.ts'
 export * from './view.tsx'
diff --git a/src/ui/editor/input.ts b/src/ui/editor/input.ts
new file mode 100644
index 0000000..bdfb802
--- /dev/null
+++ b/src/ui/editor/input.ts
@@ -0,0 +1,245 @@
+import { isPointInRect, Linecol, Mouse, type Misc, type Pane, type View } from 'editor'
+import { Sigui, type Signal } from 'sigui'
+import { assign, dom, isMobile, MouseButtons } from 'utils'
+
+export type Input = ReturnType<typeof Input>
+
+export function Input({ misc, view, pane, panes }: {
+  misc: Misc
+  view: View
+  pane: Signal<Pane>
+  panes: Signal<Set<Pane>>
+}) {
+  using $ = Sigui()
+
+  const { textarea, el } = view
+
+  const info = $({
+    pane,
+    panes,
+    hoveringPane: null as null | Pane,
+  })
+
+  // read keyboard input
+  $.fx(() => [
+    // mobile
+    dom.on(textarea, 'input', $.fn((ev: Event) => {
+      const inputEvent = ev as InputEvent
+      if (inputEvent.data) {
+        textarea.dispatchEvent(new KeyboardEvent('keydown', { key: inputEvent.data }))
+        textarea.value = ''
+      }
+    })),
+
+    // desktop
+    dom.on(textarea, 'keydown', ev => info.pane.kbd.handleKey(ev)),
+
+    // clipboard
+    dom.on(textarea, 'paste', $.fn((ev: ClipboardEvent) => {
+      ev.preventDefault()
+      const text = ev.clipboardData?.getData('text/plain')
+      const { history, selection, caret } = info.pane
+      const { withHistory } = history
+      if (text) {
+        withHistory(() => {
+          selection.reset()
+          caret.insert(text)
+          caret.index += text.length
+          $.flush()
+          selection.toCaret()
+        })
+      }
+    })),
+
+    dom.on(textarea, 'copy', $.fn((ev: ClipboardEvent) => {
+      ev.preventDefault()
+      const { selection } = info.pane
+      ev.clipboardData?.setData('text/plain', selection.text)
+    })),
+
+    dom.on(textarea, 'cut', $.fn((ev: ClipboardEvent) => {
+      ev.preventDefault()
+      const { history, selection } = info.pane
+      const { withHistory } = history
+      ev.clipboardData?.setData('text/plain', selection.text)
+      withHistory(selection.deleteText)
+    })),
+  ])
+
+  // mouse
+  const mouse = $({
+    isDown: false,
+    buttons: 0,
+    count: 0,
+    x: 0,
+    y: 0,
+  })
+
+  const CLICK_TIMEOUT = 350
+
+  // update cursor when hovering pane
+  $.fx(() => {
+    const { hoveringPane } = info
+    $()
+    view.info.cursor = hoveringPane ? 'text' : 'default'
+  })
+
+  // update view scrollbars when hovering pane
+  $.fx(() => {
+    const { hoveringPane: pane } = info
+    $()
+    if (pane) {
+      pane.draw.info.showScrollbars = true
+      return () => pane.draw.info.showScrollbars = false
+    }
+  })
+
+  $.fx(() =>
+    dom.on(document, 'pointerleave', () => {
+      info.hoveringPane = null
+    })
+  )
+
+  function updateMouseFromEvent(ev: PointerEvent | Touch) {
+    const c = el.getBoundingClientRect()
+    mouse.x = ev.pageX - c.left
+    mouse.y = ev.pageY - c.top
+    out: {
+      for (const pane of info.panes) {
+        if (isPointInRect(mouse, pane.dims.info.rect)) {
+          info.hoveringPane = pane
+          assign(pane.mouse.info, {
+            x: mouse.x - pane.dims.info.rect.x - pane.dims.info.scrollX,
+            y: mouse.y - pane.dims.info.rect.y - pane.dims.info.scrollY,
+          })
+          break out
+        }
+      }
+      info.hoveringPane = null
+    }
+  }
+
+  $.fx(() => [
+    dom.on(el, 'contextmenu', dom.prevent.stop),
+    dom.on(el, 'wheel', $.fn((ev: WheelEvent) => {
+      ev.preventDefault()
+      const { deltaX, deltaY } = ev
+      const { hoveringPane: pane } = info
+      if (!pane) return
+      pane.dims.info.scrollY -= deltaY
+      pane.dims.info.scrollX += deltaX
+    })),
+    dom.on(el, 'pointerdown', $.fn((ev: PointerEvent) => {
+      ev.preventDefault()
+      updateMouseFromEvent(ev)
+
+      const { hoveringPane: pane } = info
+      if (!pane) return
+
+      info.pane.info.isFocus = false
+      info.pane = pane
+      pane.info.isFocus = true
+
+      const { selection, caret, mouse } = pane
+
+      mouse.info.buttons = ev.buttons
+
+      if (mouse.info.buttons & MouseButtons.Middle) {
+        // TODO: implement middle click
+        return
+      }
+
+      if (mouse.info.buttons & MouseButtons.Right) {
+        // TODO: implement right click
+        return
+      }
+
+      mouse.info.isDown = true
+
+      clearTimeout(mouse.info.clickTimeout)
+      mouse.info.clickTimeout = setTimeout(() => mouse.info.count = 0, CLICK_TIMEOUT)
+      mouse.info.count++
+
+      switch (mouse.info.count) {
+        case 1: {
+          selection.reset()
+          Object.assign(caret, mouse.info.linecol)
+          caret.visualXIntent = caret.col
+          $.flush()
+          selection.reset()
+          break
+        }
+        case 2: {
+          selection.selectWord()
+          break
+        }
+        case 3: {
+          selection.selectBlock()
+          break
+        }
+        case 4: {
+          selection.selectLine()
+          break
+        }
+        default: {
+          selection.reset()
+          mouse.info.count = 0
+          break
+        }
+      }
+      caret.info.isBlink = false
+    })),
+    dom.on(window, 'pointerup', $.fn((ev: PointerEvent) => {
+      updateMouseFromEvent(ev)
+      const { mouse, caret } = info.pane
+      mouse.info.isDown = false
+      mouse.info.buttons = 0
+
+      caret.info.isBlink = true
+    })),
+    dom.on(window, 'pointermove', $.fn((ev: PointerEvent) => {
+      updateMouseFromEvent(ev)
+      const { selection, caret, mouse } = info.pane
+      if (mouse.info.buttons & MouseButtons.Left) {
+        Object.assign(caret, mouse.info.linecol)
+        $.flush()
+        selection.toCaret()
+      }
+    })),
+  ])
+
+  // focus/blur
+  function focus() {
+    textarea.focus({ preventScroll: true })
+  }
+
+  function preventAndFocus(ev: Event) {
+    ev.preventDefault()
+    focus()
+  }
+
+  function onFocus() {
+    info.pane.info.isFocus = info.pane.caret.info.isBlink = true
+  }
+
+  function onBlur() {
+    if (mouse.isDown) return
+    info.pane.info.isFocus = info.pane.caret.info.isVisible = info.pane.caret.info.isBlink = false
+  }
+
+  $.fx(() => [
+    dom.on(textarea, 'focus', onFocus),
+    dom.on(textarea, 'blur', onBlur),
+    dom.on(window, 'blur', onBlur),
+  ])
+
+  $.fx(() => [
+    dom.on(window, 'focus', () => focus()),
+    dom.on(el, 'pointerup', preventAndFocus),
+    isMobile() && dom.on(el, 'touchend', preventAndFocus),
+  ])
+
+  requestAnimationFrame(focus)
+
+  return { focus }
+}
diff --git a/src/ui/editor/kbd.tsx b/src/ui/editor/kbd.tsx
index 0f6ddfd..2e1927c 100644
--- a/src/ui/editor/kbd.tsx
+++ b/src/ui/editor/kbd.tsx
@@ -1,6 +1,6 @@
 import { beginOfLine, Buffer, escapeRegExp, findMatchingBrackets, linecolToPoint, pointToLinecol, type Caret, type Dims, type History, type Misc, type Selection } from 'editor'
 import { Sigui } from 'sigui'
-import { assign, dom } from 'utils'
+import { assign } from 'utils'
 
 export function Kbd({ misc, dims, selection, buffer, caret, history }: {
   misc: Misc
@@ -12,21 +12,6 @@ export function Kbd({ misc, dims, selection, buffer, caret, history }: {
 }) {
   using $ = Sigui()
 
-  const textarea = <textarea
-    spellcheck="false"
-    autocorrect="off"
-    autocapitalize="off"
-    autocomplete="off"
-    virtualkeyboardpolicy="auto"
-    class="
-      fixed right-0 top-0 opacity-0 w-[50px] h-[50px]
-      pointer-events-none caret-transparent
-      border-none outline-none
-      resize-none p-0 whitespace-pre
-      overflow-hidden z-50
-    "
-  /> as HTMLTextAreaElement
-
   const ignoredKeys = 'cvxjrtn=+-'
 
   const { withHistory, withHistoryDebounced, undo, redo } = history
@@ -472,46 +457,5 @@ export function Kbd({ misc, dims, selection, buffer, caret, history }: {
     }
   })
 
-  // read keyboard input
-  $.fx(() => [
-    // mobile
-    dom.on(textarea, 'input', $.fn((ev: Event) => {
-      const inputEvent = ev as InputEvent
-      if (inputEvent.data) {
-        textarea.dispatchEvent(new KeyboardEvent('keydown', { key: inputEvent.data }))
-        textarea.value = ''
-      }
-    })),
-
-    // desktop
-    dom.on(textarea, 'keydown', handleKey),
-
-    // clipboard
-    dom.on(textarea, 'paste', $.fn((ev: ClipboardEvent) => {
-      ev.preventDefault()
-      const text = ev.clipboardData?.getData('text/plain')
-      if (text) {
-        withHistory(() => {
-          selection.reset()
-          caret.insert(text)
-          caret.index += text.length
-          $.flush()
-          selection.toCaret()
-        })
-      }
-    })),
-
-    dom.on(textarea, 'copy', $.fn((ev: ClipboardEvent) => {
-      ev.preventDefault()
-      ev.clipboardData?.setData('text/plain', selection.text)
-    })),
-
-    dom.on(textarea, 'cut', $.fn((ev: ClipboardEvent) => {
-      ev.preventDefault()
-      ev.clipboardData?.setData('text/plain', selection.text)
-      withHistory(selection.deleteText)
-    })),
-  ])
-
-  return textarea
+  return { handleKey }
 }
diff --git a/src/ui/editor/misc.ts b/src/ui/editor/misc.ts
index bc1c435..a019231 100644
--- a/src/ui/editor/misc.ts
+++ b/src/ui/editor/misc.ts
@@ -6,7 +6,6 @@ export function Misc() {
   using $ = Sigui()
 
   const info = $({
-    isFocus: false,
     commentSingle: ';',
     commentDouble: ['[;', ']'],
   })
diff --git a/src/ui/editor/mouse.ts b/src/ui/editor/mouse.ts
index e30d7d6..1842f51 100644
--- a/src/ui/editor/mouse.ts
+++ b/src/ui/editor/mouse.ts
@@ -1,18 +1,15 @@
-import { Linecol, type Caret, type Selection, type View } from 'editor'
+import { Linecol, type Draw } from 'editor'
 import { Sigui } from 'sigui'
-import { assign, dom, MouseButtons } from 'utils'
+import { assign } from 'utils'
 
-export type Mouse = ReturnType<typeof Mouse>
-
-export function Mouse({ selection, caret, view }: {
-  selection: Selection
-  caret: Caret
-  view: View
+export function Mouse({ draw }: {
+  draw: Draw
 }) {
   using $ = Sigui()
 
   const info = $({
     isDown: false,
+    clickTimeout: -1 as any,
     buttons: 0,
     count: 0,
     x: 0,
@@ -20,86 +17,11 @@ export function Mouse({ selection, caret, view }: {
     linecol: $(Linecol()),
   })
 
-  function updateFromEvent(ev: PointerEvent | Touch) {
-    const c = view.el.getBoundingClientRect()
-    info.x = ev.pageX - c.left
-    info.y = ev.pageY - c.top
-    assign(info.linecol, view.linecolFromViewPoint(info))
-  }
-
-  const COUNT_TIMEOUT = 350
-  let countTimeout: any
-
-  $.fx(() => [
-    dom.on(view.el, 'contextmenu', dom.prevent.stop),
-    dom.on(view.el, 'pointerdown', $.fn((ev: PointerEvent) => {
-      ev.preventDefault()
-      updateFromEvent(ev)
-
-      info.buttons = ev.buttons
-
-      if (info.buttons & MouseButtons.Middle) {
-        // TODO: implement middle click
-        return
-      }
-
-      if (info.buttons & MouseButtons.Right) {
-        // TODO: implement right click
-        return
-      }
-
-      info.isDown = true
-
-      clearTimeout(countTimeout)
-      countTimeout = setTimeout(() => info.count = 0, COUNT_TIMEOUT)
-      info.count++
-
-      switch (info.count) {
-        case 1: {
-          selection.reset()
-          Object.assign(caret, info.linecol)
-          caret.visualXIntent = caret.col
-          $.flush()
-          selection.reset()
-          break
-        }
-        case 2: {
-          selection.selectWord()
-          break
-        }
-        case 3: {
-          selection.selectBlock()
-          break
-        }
-        case 4: {
-          selection.selectLine()
-          break
-        }
-        default: {
-          selection.reset()
-          info.count = 0
-          break
-        }
-      }
-      caret.info.isBlink = false
-    })),
-    dom.on(window, 'pointerup', $.fn((ev: PointerEvent) => {
-      updateFromEvent(ev)
-      info.isDown = false
-      info.buttons = 0
-
-      caret.info.isBlink = true
-    })),
-    dom.on(window, 'pointermove', $.fn((ev: PointerEvent) => {
-      updateFromEvent(ev)
-
-      if (info.buttons & MouseButtons.Left) {
-        Object.assign(caret, info.linecol)
-        $.flush()
-        selection.toCaret()
-      }
-    })),
-  ])
+  $.fx(() => {
+    const { x, y } = info
+    $()
+    assign(info.linecol, draw.linecolFromViewPoint(info))
+  })
 
   return { info }
 }
diff --git a/src/ui/editor/pane.ts b/src/ui/editor/pane.ts
new file mode 100644
index 0000000..52fd677
--- /dev/null
+++ b/src/ui/editor/pane.ts
@@ -0,0 +1,47 @@
+import { Buffer, Caret, Dims, Draw, History, Kbd, Misc, Mouse, Selection, type Rect, type WordWrapProcessor } from 'editor'
+import { Sigui, type Signal } from 'sigui'
+import type { Source, Token } from '~/src/lang/tokenize.ts'
+import type { View } from '~/src/ui/editor/view.tsx'
+
+export interface PaneInfo {
+  isFocus: boolean
+}
+
+export type Pane = ReturnType<typeof Pane>
+
+export function Pane({ misc, view, code, rect, colorize, tokenize, wordWrapProcessor }: {
+  misc: Misc
+  view: View
+  code: Signal<string>
+  rect: Rect
+  colorize: (token: Token) => { fill: string, stroke: string }
+  tokenize: (source: Source) => Generator<Token, void, unknown>
+  wordWrapProcessor: WordWrapProcessor
+}) {
+  using $ = Sigui()
+
+  const info: PaneInfo = $({
+    isFocus: false,
+  })
+
+  const dims = Dims({ rect })
+  const buffer = Buffer({ dims, code, tokenize, wordWrapProcessor })
+  const caret = Caret({ paneInfo: info, buffer })
+  const selection = Selection({ buffer, caret })
+  const history = History({ selection, buffer, caret })
+  const kbd = Kbd({ misc, dims, selection, buffer, caret, history })
+  const draw = Draw({ view, selection, caret, dims, buffer, colorize })
+  const mouse = Mouse({ draw })
+
+  return {
+    info,
+    dims,
+    buffer,
+    caret,
+    selection,
+    history,
+    kbd,
+    draw,
+    mouse,
+  }
+}
diff --git a/src/ui/editor/util/geometry.ts b/src/ui/editor/util/geometry.ts
new file mode 100644
index 0000000..ddb5690
--- /dev/null
+++ b/src/ui/editor/util/geometry.ts
@@ -0,0 +1,5 @@
+import type { Point, Rect } from 'editor'
+
+export function isPointInRect(p: Point, r: Rect) {
+  return p.x >= r.x && p.x < r.x + r.w && p.y >= r.y && p.y < r.y + r.h
+}
diff --git a/src/ui/editor/util/index.ts b/src/ui/editor/util/index.ts
index 0807b28..03613c9 100644
--- a/src/ui/editor/util/index.ts
+++ b/src/ui/editor/util/index.ts
@@ -2,6 +2,7 @@ export * from './begin-of-line.ts'
 export * from './escape-regexp.ts'
 export * from './find-matching-brackets.ts'
 export * from './floats.ts'
+export * from './geometry.ts'
 export * from './oklch.ts'
 export * from './parse-words.ts'
 export * from './regexp.ts'
diff --git a/src/ui/editor/util/types.ts b/src/ui/editor/util/types.ts
index 13978e8..538f22f 100644
--- a/src/ui/editor/util/types.ts
+++ b/src/ui/editor/util/types.ts
@@ -1,3 +1,9 @@
+export type Rect = ReturnType<typeof Rect>
+
+export function Rect() {
+  return { x: 0, y: 0, w: 0, h: 0 }
+}
+
 export type Point = ReturnType<typeof Point>
 
 export function Point() {
diff --git a/src/ui/editor/view.tsx b/src/ui/editor/view.tsx
index ea9b907..3212e79 100644
--- a/src/ui/editor/view.tsx
+++ b/src/ui/editor/view.tsx
@@ -1,193 +1,41 @@
-import { Point, Widgets, type Buffer, type Caret, type Dims, type Linecol, type Selection } from 'editor'
-import { Anim } from 'gfx'
-import { Sigui } from 'sigui'
-import { assign, clamp, drawText } from 'utils'
-import type { Token } from '~/src/lang/tokenize.ts'
+import { Anim, Gfx } from 'gfx'
+import { Signal, Sigui } from 'sigui'
+import { Canvas } from '../Canvas.tsx'
 import { screen } from '~/src/screen.ts'
-import { theme } from '~/src/theme.ts'
-import { Canvas } from '~/src/ui/Canvas.tsx'
-
-interface TokenDrawInfo {
-  point: Point
-  fill: string
-  stroke: string
-}
 
 export type View = ReturnType<typeof View>
 
-export function View({ selection, caret, dims, buffer, colorize }: {
-  selection: Selection
-  caret: Caret
-  dims: Dims
-  buffer: Buffer
-  colorize: (token: Token) => { fill: string, stroke: string }
+export function View({ width, height }: {
+  width: Signal<number>
+  height: Signal<number>
 }) {
   using $ = Sigui()
 
-  const { width, height } = dims.info.$
-
   const info = $({
-    c: null as null | CanvasRenderingContext2D,
     pr: screen.$.pr,
+    cursor: 'default',
     width,
     height,
-    svgs: new Set<SVGElement>()
+    svgs: new Set<SVGElement>(),
   })
 
   const canvas = <Canvas width={width} height={height} class="absolute top-0 left-0" /> as HTMLCanvasElement
   const glCanvas = <Canvas width={width} height={height} class="absolute top-0 left-0" /> as HTMLCanvasElement
-  const svg = <svg width={width} height={height} class="absolute top-0 left-0" >{() =>
-    [...info.svgs]
-  }</svg> as SVGSVGElement
+  const svg = <svg width={width} height={height} class="absolute top-0 left-0" >
+    {() => [...info.svgs]}
+  </svg> as SVGSVGElement
 
-  const el = <div class="relative cursor-text">
+  const el = <div class="relative" style={() => ({ cursor: info.cursor })}>
     {canvas}
     {glCanvas}
     {svg}
   </div> as HTMLDivElement
 
   const c = canvas.getContext('2d')!
-  const widgets = Widgets({ width, height, c, glCanvas })
-  const anim = Anim()
-  anim.ticks.add(draw)
-
-  // drawing info
-  const tokenDrawInfo = new WeakMap<Token, TokenDrawInfo>()
-  let caretViewPoint = Point()
-  let extraHeights: number[] = []
-
-  function viewPointFromLinecol({ line, col }: Linecol): Point {
-    const { charWidth, lineHeight } = dims.info
-
-    const p = Point()
-    p.x = col * charWidth
-
-    let top = 0
-    for (let y = 0; y <= line; y++) {
-      let l = widgets.lines.get(y)
-      if (l) top += l.deco
-      if (y === line) p.y = top
-      top += lineHeight
-      if (l?.subs) top += l.subs + 2
-    }
-
-    p.x = Math.floor(p.x + 1)
-    p.y = Math.floor(p.y + 1)
-
-    return p
-  }
-
-  function linecolFromViewPoint({ x, y }: Point): Linecol {
-    const { charWidth, lineHeight } = dims.info
-    const { linesVisual } = buffer.info
-
-    let top = 0
-    out: {
-      for (let i = 0; i <= linesVisual.length; i++) {
-        if (y < top) {
-          y = i - 1
-          break out
-        }
-
-        let l = widgets.lines.get(i)
-        if (l) {
-          top += l.deco
-          top += l.subs + 2
-        }
-        top += lineHeight
-      }
-      y = linesVisual.length - 1
-    }
-
-    const line = clamp(0, linesVisual.length - 1, y)
-    const col = clamp(0, linesVisual[y]?.text.length ?? 0, Math.round((x - 3) / charWidth))
-
-    return { line, col }
-  }
-
-  // update token draw info
-  $.fx(() => {
-    const { tokens, linesVisual } = buffer.info
-    const { charWidth, lineHeight } = dims.info
-
-    $()
-
-    widgets.update()
-
-    const lastVisibleLine = linesVisual.length
-    let eh = 0
-    extraHeights = Array.from({ length: lastVisibleLine }, (_, y) => {
-      let curr = eh
-      const line = linesVisual[y]
-      if (!line.text.trim().length) eh += lineHeight
-      else eh = 0
-      return curr
-    })
-
-    widgets.deco.forEach(w => {
-      const b = w.bounds
-      const p = viewPointFromLinecol(b)
-      w.rect.x = p.x
-      w.rect.y = p.y - widgets.heights.deco - extraHeights[b.line]
-      w.rect.w = ((b.right - b.col) * charWidth) | 0
-      w.rect.h = widgets.heights.deco + extraHeights[b.line] - .5
-    })
-
-    widgets.subs.forEach(w => {
-      const b = w.bounds
-      const p = viewPointFromLinecol(b)
-      w.rect.x = p.x
-      w.rect.y = p.y + lineHeight - 1
-      w.rect.w = ((b.right - b.col) * charWidth) | 0
-      w.rect.h = widgets.heights.subs
-    })
-
-    widgets.mark.forEach(w => {
-      const b = w.bounds
-      const p = viewPointFromLinecol(b)
-      w.rect.x = p.x - 1
-      w.rect.y = p.y - 1
-      w.rect.w = (((b.right - b.col) * charWidth) | 0) + 2.75
-      w.rect.h = (lineHeight) - .5
-    })
-
-    tokens.forEach(token => {
-      const point = viewPointFromLinecol(token)
-      point.y += 1
-      const { fill, stroke } = colorize(token)
-      tokenDrawInfo.set(token, {
-        point,
-        fill,
-        stroke,
-      })
-    })
-  })
-
-  // update caret view point
-  $.fx(() => {
-    const { tokens } = buffer.info
-    const { x, y } = caret.visual
-    $()
-    // NOTE: bugfix while toggling block comments caret wasn't updated.
-    //  there must be a real solution to this but for now this works.
-    queueMicrotask(() => {
-      assign(caretViewPoint, viewPointFromLinecol({ line: y, col: x }))
-    })
-  })
-
-  // wait for fonts to load
-  document.fonts.ready.then(() => {
-    info.c = c
-
-    // measure char width and height
-    const metrics = c.measureText('M')
-    dims.info.charWidth = metrics.width
-    dims.info.charHeight = Math.ceil(metrics.fontBoundingBoxDescent - metrics.fontBoundingBoxAscent)
-  })
 
   // initialize canvas context settings
   $.fx(() => {
-    const { c, pr, width, height } = $.of(info)
+    const { pr, width, height } = $.of(info)
     $()
     c.scale(pr, pr)
     c.imageSmoothingEnabled = false
@@ -197,75 +45,36 @@ export function View({ selection, caret, dims, buffer, colorize }: {
     c.font = '16px "IBM Plex Mono", monospace'
   })
 
-  // trigger draw
-  $.fx(() => {
-    const { c, pr, width, height } = $.of(info)
-    const { code } = buffer.info
-    const { caretWidth, charWidth, charHeight, lineHeight } = dims.info
-    const { isVisible: isCaretVisible } = caret.info
-    const { x: cx, y: cy } = caret.visual
-    const { start: { line: sl, col: sc }, end: { line: el, col: ec } } = selection.info
-    $()
-    anim.info.epoch++
-  })
-
-  function drawClear() {
-    c.clearRect(0, 0, info.width, info.height)
-  }
-
-  function drawActiveLine() {
-    c.fillStyle = '#333'
-    c.fillRect(0, caretViewPoint.y, info.width, dims.info.lineHeight - 2)
-  }
-
-  function drawSelection() {
-    if (!selection.isActive) return
-    const { lineHeight } = dims.info
-    const { start, end } = selection.sorted
-    const brPadding = 5
-    c.fillStyle = theme.colors.blue[800]
-    for (let line = start.line; line <= end.line; line++) {
-      const c1 = line === start.line ? start.col : 0
-      const c2 = line === end.line ? end.col : buffer.linesVisual[line].text.length
-      const p1 = viewPointFromLinecol({ line, col: c1 })
-      const p2 = viewPointFromLinecol({ line, col: c2 })
-      c.fillRect(p1.x, p1.y, p2.x - p1.x + (line === end.line ? 0 : brPadding), lineHeight)
-    }
-  }
-
-  function drawCode() {
-    buffer.info.tokens.forEach(token => {
-      const d = tokenDrawInfo.get(token)
-      if (d) drawText(c, d.point, token.text, d.fill, .025, d.stroke)
-    })
-  }
-
-  function drawCaret() {
-    if (!caret.info.isVisible) return
-    const { caretWidth, charHeight } = dims.info
-    c.fillStyle = '#fff'
-    c.fillRect(
-      caretViewPoint.x,
-      caretViewPoint.y + .5,
-      caretWidth,
-      charHeight
-    )
-  }
-
-  function draw() {
-    drawClear()
-    drawActiveLine()
-    drawSelection()
-    drawCode()
-    widgets.draw()
-    drawCaret()
-  }
-
-  return {
+  const anim = Anim()
+  // anim.ticks.add(draw)
+
+  const gfx = Gfx({ width, height, canvas: glCanvas })
+
+  const textarea = <textarea
+    spellcheck="false"
+    autocorrect="off"
+    autocapitalize="off"
+    autocomplete="off"
+    virtualkeyboardpolicy="auto"
+    class="
+      fixed right-0 top-0 opacity-0 w-[50px] h-[50px]
+      pointer-events-none caret-transparent
+      border-none outline-none
+      resize-none p-0 whitespace-pre
+      overflow-hidden z-50
+    "
+  /> as HTMLTextAreaElement
+
+  return $({
     el,
     info,
-    widgets,
+    canvas,
+    c,
+    glCanvas,
+    svg,
+    svgs: info.$.svgs,
+    gfx,
     anim,
-    linecolFromViewPoint
-  }
+    textarea,
+  })
 }
diff --git a/src/ui/editor/widget.ts b/src/ui/editor/widget.ts
index fce1096..98b403c 100644
--- a/src/ui/editor/widget.ts
+++ b/src/ui/editor/widget.ts
@@ -1,5 +1,5 @@
-import { Gfx, Rect } from 'gfx'
-import { Sigui, type Signal } from 'sigui'
+import { Rect } from 'gfx'
+import { Sigui } from 'sigui'
 import type { Token } from '~/src/lang/tokenize.ts'
 
 function Bounds(): Token.Bounds {
@@ -15,14 +15,9 @@ interface WidgetLineInfo {
 
 export type Widgets = ReturnType<typeof Widgets>
 
-export function Widgets({ width, height, c, glCanvas }: {
-  width: Signal<number>
-  height: Signal<number>
+export function Widgets({ c }: {
   c: CanvasRenderingContext2D
-  glCanvas: HTMLCanvasElement
 }) {
-  const gfx = Gfx({ width, height, canvas: glCanvas })
-
   const deco = new Set<Widget>()
   const subs = new Set<Widget>()
   const mark = new Set<Widget>()
@@ -58,10 +53,9 @@ export function Widgets({ width, height, c, glCanvas }: {
     deco.forEach(widgetDraw)
     subs.forEach(widgetDraw)
     mark.forEach(widgetDraw)
-    gfx.draw()
   }
 
-  const widgets = { gfx, update, draw, deco, subs, mark, heights, lines }
+  const widgets = { update, draw, deco, subs, mark, heights, lines }
 
   return widgets
 }

From 1eee515c96f152fb71668715bf513b1b03b5312f Mon Sep 17 00:00:00 2001
From: stagas <gstagas@gmail.com>
Date: Sun, 13 Oct 2024 17:42:02 +0300
Subject: [PATCH 17/25] wip

---
 src/pages/EditorDemo.tsx |  4 ++--
 src/ui/editor/buffer.ts  |  2 +-
 src/ui/editor/caret.ts   |  2 +-
 src/ui/editor/input.ts   | 45 ++++++++++++++++++++++++++++++----------
 4 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/src/pages/EditorDemo.tsx b/src/pages/EditorDemo.tsx
index a925240..8f57942 100644
--- a/src/pages/EditorDemo.tsx
+++ b/src/pages/EditorDemo.tsx
@@ -86,8 +86,8 @@ export function EditorDemo({ width, height }: {
   })
   editor.addPane(pane2)
 
-  // const shapes = editor.widgets.gfx.createShapes()
-  // editor.widgets.gfx.scene.add(shapes)
+  const shapes = editor.view.gfx.createShapes()
+  editor.view.gfx.scene.add(shapes)
 
   // ///////////////////
   // const floats = Object.assign(
diff --git a/src/ui/editor/buffer.ts b/src/ui/editor/buffer.ts
index 6e5e3b1..d2a9fe4 100644
--- a/src/ui/editor/buffer.ts
+++ b/src/ui/editor/buffer.ts
@@ -30,7 +30,7 @@ export function Buffer({ dims, code, tokenize, wordWrapProcessor = { pre: identi
 
   const info = $({
     maxColumns: dims.info.$.pageWidth,
-    wordWrapEnabled: false,
+    wordWrapEnabled: true,
     code,
     lines: [] as string[],
     get length() {
diff --git a/src/ui/editor/caret.ts b/src/ui/editor/caret.ts
index 331a6d9..4e44180 100644
--- a/src/ui/editor/caret.ts
+++ b/src/ui/editor/caret.ts
@@ -52,7 +52,7 @@ export function Caret({ paneInfo, buffer }: {
     const { isBlink, blinkReset } = caret
     $()
     if (!isFocus || !isBlink) {
-      caret.isVisible = false
+      // caret.isVisible = false
       return
     }
     caret.isVisible = true
diff --git a/src/ui/editor/input.ts b/src/ui/editor/input.ts
index bdfb802..ba59bbb 100644
--- a/src/ui/editor/input.ts
+++ b/src/ui/editor/input.ts
@@ -67,7 +67,7 @@ export function Input({ misc, view, pane, panes }: {
   ])
 
   // mouse
-  const mouse = $({
+  const inputMouse = $({
     isDown: false,
     buttons: 0,
     count: 0,
@@ -100,18 +100,28 @@ export function Input({ misc, view, pane, panes }: {
     })
   )
 
+  function updatePaneMouse(pane: Pane) {
+    assign(pane.mouse.info, {
+      x: inputMouse.x - pane.dims.info.rect.x - pane.dims.info.scrollX,
+      y: inputMouse.y - pane.dims.info.rect.y - pane.dims.info.scrollY,
+    })
+  }
+
   function updateMouseFromEvent(ev: PointerEvent | Touch) {
     const c = el.getBoundingClientRect()
-    mouse.x = ev.pageX - c.left
-    mouse.y = ev.pageY - c.top
+    inputMouse.x = ev.pageX - c.left
+    inputMouse.y = ev.pageY - c.top
+
+    if (info.hoveringPane?.mouse.info.isDown) {
+      updatePaneMouse(info.hoveringPane)
+      return
+    }
+
     out: {
       for (const pane of info.panes) {
-        if (isPointInRect(mouse, pane.dims.info.rect)) {
+        if (isPointInRect(inputMouse, pane.dims.info.rect)) {
           info.hoveringPane = pane
-          assign(pane.mouse.info, {
-            x: mouse.x - pane.dims.info.rect.x - pane.dims.info.scrollX,
-            y: mouse.y - pane.dims.info.rect.y - pane.dims.info.scrollY,
-          })
+          updatePaneMouse(pane)
           break out
         }
       }
@@ -121,14 +131,20 @@ export function Input({ misc, view, pane, panes }: {
 
   $.fx(() => [
     dom.on(el, 'contextmenu', dom.prevent.stop),
+
     dom.on(el, 'wheel', $.fn((ev: WheelEvent) => {
       ev.preventDefault()
       const { deltaX, deltaY } = ev
       const { hoveringPane: pane } = info
       if (!pane) return
-      pane.dims.info.scrollY -= deltaY
-      pane.dims.info.scrollX += deltaX
+      if (Math.abs(deltaY) > Math.abs(deltaX)) {
+        pane.dims.info.scrollY -= deltaY * .35
+      }
+      else {
+        pane.dims.info.scrollX -= deltaX * .35
+      }
     })),
+
     dom.on(el, 'pointerdown', $.fn((ev: PointerEvent) => {
       ev.preventDefault()
       updateMouseFromEvent(ev)
@@ -154,6 +170,7 @@ export function Input({ misc, view, pane, panes }: {
         return
       }
 
+      inputMouse.isDown = true
       mouse.info.isDown = true
 
       clearTimeout(mouse.info.clickTimeout)
@@ -192,6 +209,7 @@ export function Input({ misc, view, pane, panes }: {
     dom.on(window, 'pointerup', $.fn((ev: PointerEvent) => {
       updateMouseFromEvent(ev)
       const { mouse, caret } = info.pane
+      inputMouse.isDown = false
       mouse.info.isDown = false
       mouse.info.buttons = 0
 
@@ -223,7 +241,12 @@ export function Input({ misc, view, pane, panes }: {
   }
 
   function onBlur() {
-    if (mouse.isDown) return
+    if (inputMouse.isDown) {
+      // if (info.pane.info.isFocus) {
+      //   info.pane.caret.info.isVisible = true
+      // }
+      return
+    }
     info.pane.info.isFocus = info.pane.caret.info.isVisible = info.pane.caret.info.isBlink = false
   }
 

From 86f8103c41a00ce5693f1c1303571d05f0e00027 Mon Sep 17 00:00:00 2001
From: stagas <gstagas@gmail.com>
Date: Sun, 13 Oct 2024 21:17:15 +0300
Subject: [PATCH 18/25] wip webgl

---
 asconfig-gfx.json                  |   4 +-
 src/as/gfx/gfx.ts                  |  46 ++++----
 src/as/gfx/index.ts                |   3 +-
 src/as/gfx/{webgl.ts => meshes.ts} |  25 ++---
 src/as/gfx/sketch-info.ts          |   6 +-
 src/as/gfx/sketch.ts               |   4 +-
 src/pages/EditorDemo.tsx           | 174 +++++++++++++++--------------
 src/ui/Editor.tsx                  |   6 +-
 src/ui/editor/buffer.ts            |   2 +-
 src/ui/editor/dims.ts              |   5 +-
 src/ui/editor/draw.ts              |  16 +++
 src/ui/editor/history.ts           |   2 +-
 src/ui/editor/input.ts             |   2 +-
 src/ui/editor/pane.ts              |   4 +-
 src/ui/editor/view.tsx             |   3 +-
 15 files changed, 166 insertions(+), 136 deletions(-)
 rename src/as/gfx/{webgl.ts => meshes.ts} (60%)

diff --git a/asconfig-gfx.json b/asconfig-gfx.json
index b923c4c..71574bf 100644
--- a/asconfig-gfx.json
+++ b/asconfig-gfx.json
@@ -26,8 +26,8 @@
     ],
     "sharedMemory": true,
     "importMemory": false,
-    "initialMemory": 500,
-    "maximumMemory": 500,
+    "initialMemory": 1000,
+    "maximumMemory": 1000,
     "bindings": "raw",
     "runtime": "incremental",
     "exportRuntime": true
diff --git a/src/as/gfx/gfx.ts b/src/as/gfx/gfx.ts
index 9324de4..35680c1 100644
--- a/src/as/gfx/gfx.ts
+++ b/src/as/gfx/gfx.ts
@@ -1,30 +1,38 @@
-import { Matrix, Rect, Shapes, Sketch, WebGL } from 'gfx'
-import { Sigui, type Signal } from 'sigui'
+import { Matrix, Meshes, Rect, Shapes, Sketch } from 'gfx'
+import { initGL } from 'gl-util'
+import { Sigui } from 'sigui'
 
-export function Gfx({ width, height, canvas }: {
-  width: Signal<number>
-  height: Signal<number>
+const DEBUG = true
+
+export function Gfx({ canvas }: {
   canvas: HTMLCanvasElement
 }) {
   using $ = Sigui()
 
-  const matrix = Matrix()
-  const view = Rect(0, 0, width, height)
-  const webgl = WebGL(view, canvas, true)
-  const sketch = Sketch(webgl.GL, view)
-  webgl.add($, sketch)
+  const GL = initGL(canvas, {
+    antialias: true,
+    alpha: true,
+    preserveDrawingBuffer: true
+  })
+
+  function createContext(view: Rect, matrix: Matrix) {
+    const meshes = Meshes(GL, view)
+    const sketch = Sketch(GL, view)
+    meshes.add($, sketch)
 
-  function createShapes() {
-    return Shapes(view, matrix)
+    function createShapes() {
+      return Shapes(view, matrix)
+    }
+
+    return { meshes, sketch, createShapes }
   }
 
+  $.fx(() => () => {
+    DEBUG && console.debug('[webgl] dispose')
+    GL.reset()
+  })
+
   return {
-    matrix,
-    view,
-    webgl,
-    sketch,
-    draw: webgl.draw,
-    scene: sketch.scene,
-    createShapes
+    createContext
   }
 }
diff --git a/src/as/gfx/index.ts b/src/as/gfx/index.ts
index 032324b..4dc024c 100644
--- a/src/as/gfx/index.ts
+++ b/src/as/gfx/index.ts
@@ -2,10 +2,11 @@ export * from './anim.ts'
 export * from './gfx.ts'
 export * from './glsl.ts'
 export * from './mesh-info.ts'
+export * from './meshes.ts'
 export * from './shapes.ts'
 export * from './sketch-info.ts'
 export * from './sketch.ts'
 export * from './types.ts'
 export * from './wasm-matrix.ts'
 export * from './wasm.ts'
-export * from './webgl.ts'
+
diff --git a/src/as/gfx/webgl.ts b/src/as/gfx/meshes.ts
similarity index 60%
rename from src/as/gfx/webgl.ts
rename to src/as/gfx/meshes.ts
index 4529e19..909601b 100644
--- a/src/as/gfx/webgl.ts
+++ b/src/as/gfx/meshes.ts
@@ -1,5 +1,5 @@
 import type { Rect } from 'gfx'
-import { GL, initGL } from 'gl-util'
+import { GL } from 'gl-util'
 import { Sigui } from 'sigui'
 
 const DEBUG = true
@@ -13,25 +13,25 @@ export interface Mesh {
   draw(): void
 }
 
-export function WebGL(view: Rect, canvas: HTMLCanvasElement, alpha = false) {
-  DEBUG && console.debug('[webgl] create')
+export function Meshes(GL: GL, view: Rect) {
+  DEBUG && console.debug('[meshes] create')
   using $ = Sigui()
 
-  const GL = initGL(canvas, {
-    antialias: true,
-    alpha,
-    preserveDrawingBuffer: true
-  })
-
-  const { gl } = GL
+  const { gl, canvas } = GL
   const meshes = new Set<Mesh>()
 
   function clear() {
-    gl.viewport(0, 0, Math.max(0, view.w_pr), Math.max(0, view.h_pr))
+    gl.viewport(
+      view.x_pr,
+      canvas.height - view.h_pr - view.y_pr,
+      Math.max(0, view.w_pr),
+      Math.max(0, view.h_pr),
+    )
     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
   }
 
   function draw() {
+    DEBUG && console.debug('[meshes] draw', meshes.size)
     clear()
     for (const mesh of meshes) {
       mesh.draw()
@@ -48,9 +48,8 @@ export function WebGL(view: Rect, canvas: HTMLCanvasElement, alpha = false) {
   }
 
   $.fx(() => () => {
-    DEBUG && console.debug('[webgl] dispose')
+    DEBUG && console.debug('[meshes] clear')
     meshes.clear()
-    GL.reset()
   })
 
   return { GL, draw, add }
diff --git a/src/as/gfx/sketch-info.ts b/src/as/gfx/sketch-info.ts
index 83d167d..fc93e7a 100644
--- a/src/as/gfx/sketch-info.ts
+++ b/src/as/gfx/sketch-info.ts
@@ -3,14 +3,14 @@ import { GL } from 'gl-util'
 import { Sigui } from 'sigui'
 import { MAX_GL_INSTANCES } from '~/as/assembly/gfx/sketch-shared.ts'
 
-const DEBUG = true
+const DEBUG = false
 
 export function SketchInfo(GL: GL, view: Rect) {
   using $ = Sigui()
 
   const { gl, attrib } = GL
 
-  DEBUG && console.debug('[sketch] MAX_GL_INSTANCES:', MAX_GL_INSTANCES)
+  DEBUG && console.debug('[sketch-info] MAX_GL_INSTANCES:', MAX_GL_INSTANCES)
 
   const info = MeshInfo(GL, {
     vertex,
@@ -58,7 +58,7 @@ export function SketchInfo(GL: GL, view: Rect) {
     range.end = range.count = count
     GL.writeAttribRange(a_vert, range)
     GL.writeAttribRange(a_style, range)
-    // DEBUG && log('[sketch] write gl begin:', range.begin, 'end:', range.end, 'count:', range.count)
+    // DEBUG && log('[sketch-info] write gl begin:', range.begin, 'end:', range.end, 'count:', range.count)
   }
 
   function finish() {
diff --git a/src/as/gfx/sketch.ts b/src/as/gfx/sketch.ts
index 9ef95c4..477a0c2 100644
--- a/src/as/gfx/sketch.ts
+++ b/src/as/gfx/sketch.ts
@@ -14,7 +14,7 @@ export function Sketch(GL: GL, view: Rect) {
   const { use } = info
 
   function flush(count: number) {
-    // DEBUG && console.log('[sketch] draw', count)
+    DEBUG && console.log('[sketch] draw', count)
     writeGL(count)
     gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, count)
   }
@@ -22,7 +22,7 @@ export function Sketch(GL: GL, view: Rect) {
   function draw() {
     use()
     wasm.setFlushSketchFn(flush)
-    // DEBUG && console.log('[sketch] draw', scene)
+    DEBUG && console.log('[sketch] draw', scene.size)
     for (const shapes of scene) {
       sketchDraw(shapes)
     }
diff --git a/src/pages/EditorDemo.tsx b/src/pages/EditorDemo.tsx
index 8f57942..34130a3 100644
--- a/src/pages/EditorDemo.tsx
+++ b/src/pages/EditorDemo.tsx
@@ -36,14 +36,9 @@ export function EditorDemo({ width, height }: {
     width,
     height,
     code: `\
-
-
-
 [dly 16 1 /]
-
-
-
-[sin 3000000000000000] [tri 1111111] [tri 222] [tri 333] [tri 444] [tri 555] [tri 666]
+[sin 300]
+    [tri 111] [tri 222] [tri 333] [tri 444] [tri 555] [tri 666]
     [saw 123]
   [sqr 555] @
 [lp 300 .8]
@@ -77,87 +72,98 @@ export function EditorDemo({ width, height }: {
     wordWrapProcessor,
   })
 
-  const pane2Info = $({
-    code: 'hello\nworld'
-  })
-  const pane2 = editor.createPane({
-    rect: $(Rect(), { x: 0, y: 210, w: 200, h: 200 }),
-    code: pane2Info.$.code,
-  })
-  editor.addPane(pane2)
-
-  const shapes = editor.view.gfx.createShapes()
-  editor.view.gfx.scene.add(shapes)
+  // const pane2Info = $({
+  //   code: '[hello]\n[world]'
+  // })
+  // const pane2 = editor.createPane({
+  //   rect: $(Rect(), { x: 0, y: 240, w: 200, h: 200 }),
+  //   code: pane2Info.$.code,
+  // })
+  // editor.addPane(pane2)
 
   // ///////////////////
-  // const floats = Object.assign(
-  //   wasm.alloc(Float32Array, waveform.length),
-  //   { len: waveform.length }
-  // )
-  // floats.set(waveform)
-
-  // $.fx(() => {
-  //   const { tokens } = editor.buffer.info
-  //   $()
-  //   const gens: Token[][] = []
-
-  //   let depth = 0
-  //   let gen: Token[] = []
-  //   for (const token of tokens) {
-  //     if (token.text === '[') {
-  //       depth++
-  //     }
-  //     else if (token.text === ']') {
-  //       gen.push(token)
-  //       depth--
-  //       if (!depth) {
-  //         gens.push(gen)
-  //         gen = []
-  //       }
-  //     }
-  //     if (depth) gen.push(token)
-  //   }
-
-  //   if (!gens.length) return
-
-  //   const d = WaveCanvasWidget()
-  //   d.info.floats = floats
-  //   Object.assign(d.widget.bounds, Token.bounds(gens[0]))
-  //   editor.widgets.deco.add(d.widget)
-
-  //   const d2 = WaveGlWidget(shapes)
-  //   d2.info.floats = floats
-  //   Object.assign(d2.widget.bounds, Token.bounds(gens[1]))
-  //   editor.widgets.deco.add(d2.widget)
-
-  //   const d3 = WaveSvgWidget()
-  //   d3.info.floats = floats
-  //   Object.assign(d3.widget.bounds, Token.bounds(gens[2]))
-  //   editor.widgets.deco.add(d3.widget)
-  //   editor.view.info.svgs.add(d3.svg)
-  //   editor.view.info.svgs = new Set(editor.view.info.svgs)
-
-  //   return () => {
-  //     // decos.forEach(d => {
-  //     editor.widgets.deco.delete(d.widget)
-  //     //   d.dispose()
-  //     // })
-  //     editor.widgets.deco.delete(d2.widget)
-  //     d2.dispose()
-  //     editor.widgets.deco.delete(d3.widget)
-  //     editor.view.info.svgs.delete(d3.svg)
-  //     editor.view.info.svgs = new Set(editor.view.info.svgs)
-  //   }
-  // })
-  // editor.widgets.update()
+  const floats = Object.assign(
+    wasm.alloc(Float32Array, waveform.length),
+    { len: waveform.length }
+  )
+  floats.set(waveform)
+
+  const [pane] = editor.info.panes
+  // editor.view.gfx.matrix.f = 20
+  // pane.dims.info.scrollY = -20
+  $.fx(() => {
+    const { tokens } = pane.buffer.info
+    $()
+    const gens: Token[][] = []
+
+    let depth = 0
+    let gen: Token[] = []
+    for (const token of tokens) {
+      if (token.text === '[') {
+        depth++
+      }
+      else if (token.text === ']') {
+        gen.push(token)
+        depth--
+        if (!depth) {
+          gens.push(gen)
+          gen = []
+        }
+      }
+      if (depth) gen.push(token)
+    }
 
-  // let t = 101
-  // // editor.anim.ticks.add(() => {
-  // floats.set(makeWaveform(2048, t += 1, 1 + Math.sin(t * 0.025) * 59))
-  // //   return true
-  // // })
+    if (!gens.length) return
+
+    const d = WaveCanvasWidget()
+    d.info.floats = floats
+    Object.assign(d.widget.bounds, Token.bounds(gens[0]))
+    pane.draw.widgets.deco.add(d.widget)
+
+    const d2 = WaveGlWidget(pane.draw.shapes)
+    d2.info.floats = floats
+    Object.assign(d2.widget.bounds, Token.bounds(gens[1]))
+    pane.draw.widgets.deco.add(d2.widget)
+
+    const d3 = WaveSvgWidget()
+    d3.info.floats = floats
+    Object.assign(d3.widget.bounds, Token.bounds(gens[2]))
+    pane.draw.widgets.deco.add(d3.widget)
+
+    const paneSvg = <svg
+      x={pane.dims.info.rect.x}
+      y={pane.dims.info.rect.y}
+      width={pane.dims.info.rect.w}
+      height={pane.dims.info.rect.h}
+      viewBox={() => `${-pane.dims.info.scrollX} ${-pane.dims.info.scrollY} ${pane.dims.info.rect.w} ${pane.dims.info.rect.h}`}
+
+    /> as SVGSVGElement
+    paneSvg.append(d3.svg)
+    editor.view.info.svgs.add(paneSvg)
+    editor.view.info.svgs = new Set(editor.view.info.svgs)
+
+    return () => {
+      pane.draw.widgets.deco.delete(d.widget)
+      pane.draw.widgets.deco.delete(d2.widget)
+      d2.dispose()
+      pane.draw.widgets.deco.delete(d3.widget)
+
+      editor.view.info.svgs.delete(paneSvg)
+      editor.view.info.svgs = new Set(editor.view.info.svgs)
+    }
+  })
+  pane.draw.widgets.update()
 
-  // ///////////////////
+  // const d2 = WaveGlWidget(pane2.draw.shapes)
+  // d2.info.floats = floats
+  // Object.assign(d2.widget.bounds, { line: 0, col: 0, right: 5, bottom: 0 })
+  // pane2.draw.widgets.deco.add(d2.widget)
+  // pane2.draw.widgets.update()
+
+  let t = 101
+  floats.set(makeWaveform(2048, t += 1, 1 + Math.sin(t * 0.025) * 59))
+
+  ///////////////////
 
   const el = <div>
     <div class="flex items-center justify-between">
diff --git a/src/ui/Editor.tsx b/src/ui/Editor.tsx
index c16db6d..b204b4f 100644
--- a/src/ui/Editor.tsx
+++ b/src/ui/Editor.tsx
@@ -1,5 +1,5 @@
 import { Input, Misc, Pane, Rect, View, type WordWrapProcessor } from 'editor'
-import { Sigui, type Signal } from 'sigui'
+import { Sigui, type $, type Signal } from 'sigui'
 import type { Source, Token } from '~/src/lang/tokenize.ts'
 
 export function Editor({ code, width, height, colorize, tokenize, wordWrapProcessor }: {
@@ -16,7 +16,7 @@ export function Editor({ code, width, height, colorize, tokenize, wordWrapProces
   const view = View({ width, height })
 
   function createPane({ rect, code }: {
-    rect: Rect
+    rect: $<Rect>
     code: Signal<string>
   }) {
     const pane = Pane({
@@ -43,7 +43,7 @@ export function Editor({ code, width, height, colorize, tokenize, wordWrapProces
   }
 
   const pane = createPane({
-    rect: $(Rect(), { w: 193, h: 200 }),
+    rect: $(Rect(), { x: 20, y: 20, w: 193, h: 200 }),
     code,
   })
 
diff --git a/src/ui/editor/buffer.ts b/src/ui/editor/buffer.ts
index d2a9fe4..0b9de3b 100644
--- a/src/ui/editor/buffer.ts
+++ b/src/ui/editor/buffer.ts
@@ -53,7 +53,7 @@ export function Buffer({ dims, code, tokenize, wordWrapProcessor = { pre: identi
       $()
       return wordWrapEnabled
         ? wordWrap()
-        : code.split('\n').map(text => ({ text }))
+        : code.split('\n').map(text => ({ text, br: true }))
     }
   })
 
diff --git a/src/ui/editor/dims.ts b/src/ui/editor/dims.ts
index 39da596..3bdef72 100644
--- a/src/ui/editor/dims.ts
+++ b/src/ui/editor/dims.ts
@@ -1,11 +1,10 @@
-import { Sigui, type Signal } from 'sigui'
 import type { Rect } from 'editor'
-import { clamp } from 'utils'
+import { Sigui, type $ } from 'sigui'
 
 export type Dims = ReturnType<typeof Dims>
 
 export function Dims({ rect }: {
-  rect: Rect
+  rect: $<Rect>
 }) {
   using $ = Sigui()
 
diff --git a/src/ui/editor/draw.ts b/src/ui/editor/draw.ts
index 2096458..0306651 100644
--- a/src/ui/editor/draw.ts
+++ b/src/ui/editor/draw.ts
@@ -1,4 +1,5 @@
 import { Point, Widgets, type Buffer, type Caret, type Dims, type Linecol, type Selection, type View } from 'editor'
+import { Matrix, Rect } from 'gfx'
 import { Sigui } from 'sigui'
 import { assign, clamp, drawText, randomHex } from 'utils'
 import type { Token } from '~/src/lang/tokenize.ts'
@@ -34,6 +35,18 @@ export function Draw({ view, selection, caret, dims, buffer, colorize }: {
   })
 
   const widgets = Widgets({ c })
+  const webglView = Rect(info.rect.$.x, info.rect.$.y, info.rect.$.w, info.rect.$.h)
+  const webglMatrix = Matrix()
+  const webgl = view.gfx.createContext(webglView, webglMatrix)
+  const webglShapes = webgl.createShapes()
+  webgl.sketch.scene.add(webglShapes)
+  view.anim.ticks.add(webgl.meshes.draw)
+  $.fx(() => {
+    const { scrollX, scrollY } = dims.info
+    $()
+    webglMatrix.e = scrollX
+    webglMatrix.f = scrollY
+  })
 
   // drawing info
   const tokenDrawInfo = new WeakMap<Token, TokenDrawInfo>()
@@ -237,6 +250,7 @@ export function Draw({ view, selection, caret, dims, buffer, colorize }: {
   })
 
   const color = randomHex(3, '2', '5')
+
   function drawClear() {
     const { x, y, w, h } = info.rect
     c.beginPath()
@@ -354,6 +368,8 @@ export function Draw({ view, selection, caret, dims, buffer, colorize }: {
   return {
     info,
     draw,
+    webgl,
+    shapes: webglShapes,
     widgets,
     linecolFromViewPoint
   }
diff --git a/src/ui/editor/history.ts b/src/ui/editor/history.ts
index 023cae6..89ee71c 100644
--- a/src/ui/editor/history.ts
+++ b/src/ui/editor/history.ts
@@ -2,7 +2,7 @@ import { Buffer, Caret, Selection } from 'editor'
 import { Sigui } from 'sigui'
 import { assign, debounce } from 'utils'
 
-const DEBUG = true
+const DEBUG = false
 
 interface Snap {
   buffer: {
diff --git a/src/ui/editor/input.ts b/src/ui/editor/input.ts
index ba59bbb..1e4368a 100644
--- a/src/ui/editor/input.ts
+++ b/src/ui/editor/input.ts
@@ -143,7 +143,7 @@ export function Input({ misc, view, pane, panes }: {
       else {
         pane.dims.info.scrollX -= deltaX * .35
       }
-    })),
+    }), { passive: false }),
 
     dom.on(el, 'pointerdown', $.fn((ev: PointerEvent) => {
       ev.preventDefault()
diff --git a/src/ui/editor/pane.ts b/src/ui/editor/pane.ts
index 52fd677..e506e09 100644
--- a/src/ui/editor/pane.ts
+++ b/src/ui/editor/pane.ts
@@ -1,5 +1,5 @@
 import { Buffer, Caret, Dims, Draw, History, Kbd, Misc, Mouse, Selection, type Rect, type WordWrapProcessor } from 'editor'
-import { Sigui, type Signal } from 'sigui'
+import { Sigui, type $, type Signal } from 'sigui'
 import type { Source, Token } from '~/src/lang/tokenize.ts'
 import type { View } from '~/src/ui/editor/view.tsx'
 
@@ -13,7 +13,7 @@ export function Pane({ misc, view, code, rect, colorize, tokenize, wordWrapProce
   misc: Misc
   view: View
   code: Signal<string>
-  rect: Rect
+  rect: $<Rect>
   colorize: (token: Token) => { fill: string, stroke: string }
   tokenize: (source: Source) => Generator<Token, void, unknown>
   wordWrapProcessor: WordWrapProcessor
diff --git a/src/ui/editor/view.tsx b/src/ui/editor/view.tsx
index 3212e79..f40233c 100644
--- a/src/ui/editor/view.tsx
+++ b/src/ui/editor/view.tsx
@@ -48,7 +48,8 @@ export function View({ width, height }: {
   const anim = Anim()
   // anim.ticks.add(draw)
 
-  const gfx = Gfx({ width, height, canvas: glCanvas })
+  const gfx = Gfx({ canvas: glCanvas })
+  // anim.ticks.add(gfx.draw)
 
   const textarea = <textarea
     spellcheck="false"

From 1adff7d9611efd6cfb4cdde41c219515ba955ba3 Mon Sep 17 00:00:00 2001
From: stagas <gstagas@gmail.com>
Date: Mon, 14 Oct 2024 06:28:12 +0300
Subject: [PATCH 19/25] fix: scissor test

---
 src/as/gfx/meshes.ts     | 14 +++----
 src/as/gfx/sketch.ts     |  4 +-
 src/as/gfx/wasm.ts       |  3 ++
 src/pages/EditorDemo.tsx | 35 ++++++++++-------
 src/pages/WebGLDemo.tsx  | 82 ++++++++++++++++++++++++++++------------
 5 files changed, 91 insertions(+), 47 deletions(-)

diff --git a/src/as/gfx/meshes.ts b/src/as/gfx/meshes.ts
index 909601b..aafa3b4 100644
--- a/src/as/gfx/meshes.ts
+++ b/src/as/gfx/meshes.ts
@@ -2,7 +2,7 @@ import type { Rect } from 'gfx'
 import { GL } from 'gl-util'
 import { Sigui } from 'sigui'
 
-const DEBUG = true
+const DEBUG = false
 
 export interface MeshProps {
   GL: GL
@@ -21,12 +21,12 @@ export function Meshes(GL: GL, view: Rect) {
   const meshes = new Set<Mesh>()
 
   function clear() {
-    gl.viewport(
-      view.x_pr,
-      canvas.height - view.h_pr - view.y_pr,
-      Math.max(0, view.w_pr),
-      Math.max(0, view.h_pr),
-    )
+    const x = view.x_pr
+    const y = canvas.height - view.h_pr - view.y_pr
+    const w = Math.max(0, view.w_pr)
+    const h = Math.max(0, view.h_pr)
+    gl.viewport(x, y, w, h)
+    gl.scissor(x, y, w, h)
     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
   }
 
diff --git a/src/as/gfx/sketch.ts b/src/as/gfx/sketch.ts
index 477a0c2..5f0894f 100644
--- a/src/as/gfx/sketch.ts
+++ b/src/as/gfx/sketch.ts
@@ -1,7 +1,7 @@
 import { SketchInfo, wasm, type Rect, type Shapes } from 'gfx'
 import { GL } from 'gl-util'
 
-const DEBUG = true
+const DEBUG = false
 
 export type Sketch = ReturnType<typeof Sketch>
 
@@ -14,7 +14,7 @@ export function Sketch(GL: GL, view: Rect) {
   const { use } = info
 
   function flush(count: number) {
-    DEBUG && console.log('[sketch] draw', count)
+    DEBUG && console.log('[sketch] flush', count)
     writeGL(count)
     gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, count)
   }
diff --git a/src/as/gfx/wasm.ts b/src/as/gfx/wasm.ts
index a0142f0..994a55a 100644
--- a/src/as/gfx/wasm.ts
+++ b/src/as/gfx/wasm.ts
@@ -2,6 +2,8 @@ import { instantiate } from '~/as/build/gfx.js'
 import url from '~/as/build/gfx.wasm?url'
 import { hexToBinary, initWasm } from '~/src/as/init-wasm.ts'
 
+const DEBUG = false
+
 let mod: WebAssembly.Module
 
 if (import.meta.env && import.meta.env.MODE !== 'production') {
@@ -23,6 +25,7 @@ const wasmInstance = await instantiate(mod, {
   env: {
     log: console.log,
     flushSketch(count: number) {
+      DEBUG && console.debug('[flush]', count)
       flushSketchFn(count)
     }
   }
diff --git a/src/pages/EditorDemo.tsx b/src/pages/EditorDemo.tsx
index 34130a3..78b8ab8 100644
--- a/src/pages/EditorDemo.tsx
+++ b/src/pages/EditorDemo.tsx
@@ -72,14 +72,23 @@ export function EditorDemo({ width, height }: {
     wordWrapProcessor,
   })
 
-  // const pane2Info = $({
-  //   code: '[hello]\n[world]'
-  // })
-  // const pane2 = editor.createPane({
-  //   rect: $(Rect(), { x: 0, y: 240, w: 200, h: 200 }),
-  //   code: pane2Info.$.code,
-  // })
-  // editor.addPane(pane2)
+  const pane2Info = $({
+    code: `[hello]
+[world]
+[world]
+[world]
+[world]
+[world]
+[world]
+[world]
+[world]
+`
+  })
+  const pane2 = editor.createPane({
+    rect: $(Rect(), { x: 0, y: 240, w: 200, h: 200 }),
+    code: pane2Info.$.code,
+  })
+  editor.addPane(pane2)
 
   // ///////////////////
   const floats = Object.assign(
@@ -154,11 +163,11 @@ export function EditorDemo({ width, height }: {
   })
   pane.draw.widgets.update()
 
-  // const d2 = WaveGlWidget(pane2.draw.shapes)
-  // d2.info.floats = floats
-  // Object.assign(d2.widget.bounds, { line: 0, col: 0, right: 5, bottom: 0 })
-  // pane2.draw.widgets.deco.add(d2.widget)
-  // pane2.draw.widgets.update()
+  const d2 = WaveGlWidget(pane2.draw.shapes)
+  d2.info.floats = floats
+  Object.assign(d2.widget.bounds, { line: 0, col: 0, right: 5, bottom: 0 })
+  pane2.draw.widgets.deco.add(d2.widget)
+  pane2.draw.widgets.update()
 
   let t = 101
   floats.set(makeWaveform(2048, t += 1, 1 + Math.sin(t * 0.025) * 59))
diff --git a/src/pages/WebGLDemo.tsx b/src/pages/WebGLDemo.tsx
index 983e749..3197322 100644
--- a/src/pages/WebGLDemo.tsx
+++ b/src/pages/WebGLDemo.tsx
@@ -1,7 +1,5 @@
+import { Anim, Gfx, Matrix, Rect } from 'gfx'
 import { Sigui, type Signal } from 'sigui'
-import { Anim } from '~/src/as/gfx/anim.ts'
-import { Gfx } from '~/src/as/gfx/gfx.ts'
-import { Rect } from '~/src/as/gfx/types.ts'
 import { AnimMode } from '~/src/comp/AnimMode.tsx'
 import { Canvas } from '~/src/ui/Canvas.tsx'
 import { H2 } from '~/src/ui/Heading.tsx'
@@ -14,35 +12,69 @@ export function WebGLDemo({ width, height }: {
 
   const canvas = <Canvas width={width} height={height} /> as HTMLCanvasElement
 
-  const gfx = Gfx({ width, height, canvas })
+  const gfx = Gfx({ canvas })
 
   const anim = Anim()
-  anim.ticks.add(gfx.draw)
+  // anim.ticks.add(gfx.draw)
 
-  const shapes = gfx.createShapes()
-  gfx.scene.add(shapes)
+  {
+    const view = Rect(0, 0, 500, 500)
+    const matrix = Matrix()
+    const ctx = gfx.createContext(view, matrix)
+    const shapes = ctx.createShapes()
+    ctx.sketch.scene.add(shapes)
+    anim.ticks.add(ctx.meshes.draw)
 
-  function Box() {
-    const boxRect = Rect(10, 10, 20, 20)
-    const box = shapes.Box(boxRect)
-    box.view.color = 0xffffff
-    return box
+    function Box() {
+      const boxRect = Rect(10, 10, 20, 20)
+      const box = shapes.Box(boxRect)
+      box.view.color = 0xffffff
+      return box
+    }
+
+    $.fx(() => {
+      $()
+      const box = Box()
+      box.view.color = Math.random() * 0xffffff
+      let t = 0
+      function tick() {
+        box.view.x = Math.sin(t) * 100 + 100
+        t += 0.1
+        return true
+      }
+      anim.ticks.add(tick)
+    })
   }
 
-  $.fx(() => {
-    $()
-    const box = Box()
-    box.view.w = 100
-    box.view.h = 100
-    box.view.color = Math.random() * 0xffffff
-    let t = 0
-    function tick() {
-      box.view.x = Math.sin(t) * 100 + 100
-      t += 0.1
-      return true
+  {
+    const view = Rect(0, 30, 500, 500)
+    const matrix = Matrix()
+    const ctx = gfx.createContext(view, matrix)
+    const shapes = ctx.createShapes()
+    ctx.sketch.scene.add(shapes)
+    anim.ticks.add(ctx.meshes.draw)
+
+    function Box() {
+      const boxRect = Rect(10, 30, 20, 20)
+      const box = shapes.Box(boxRect)
+      // box.view.opts |=
+      box.view.color = 0xffffff
+      return box
     }
-    anim.ticks.add(tick)
-  })
+
+    $.fx(() => {
+      $()
+      const box = Box()
+      box.view.color = Math.random() * 0xffffff
+      let t = 0
+      function tick() {
+        box.view.x = Math.sin(t) * 100 + 100
+        t += 0.1
+        return true
+      }
+      anim.ticks.add(tick)
+    })
+  }
 
   return <div>
     <div class="flex items-center justify-between">

From b3bba7dbe4a7561a199d60f42431817a36803a53 Mon Sep 17 00:00:00 2001
From: stagas <gstagas@gmail.com>
Date: Mon, 14 Oct 2024 07:08:33 +0300
Subject: [PATCH 20/25] various

---
 src/ui/Editor.tsx      |  7 +-----
 src/ui/editor/caret.ts | 23 +++++++++---------
 src/ui/editor/input.ts |  5 +++-
 src/ui/editor/kbd.tsx  |  6 ++---
 src/ui/editor/view.tsx | 53 +++++++++++++++++++++---------------------
 5 files changed, 45 insertions(+), 49 deletions(-)

diff --git a/src/ui/Editor.tsx b/src/ui/Editor.tsx
index b204b4f..4277586 100644
--- a/src/ui/Editor.tsx
+++ b/src/ui/Editor.tsx
@@ -61,13 +61,8 @@ export function Editor({ code, width, height, colorize, tokenize, wordWrapProces
 
   addPane(pane)
 
-  const el = <div>
-    {view.el}
-    {view.textarea}
-  </div> as HTMLDivElement
-
   return {
-    el,
+    el: view.el,
     info,
     focus: input.focus,
     view,
diff --git a/src/ui/editor/caret.ts b/src/ui/editor/caret.ts
index 4e44180..60cb70b 100644
--- a/src/ui/editor/caret.ts
+++ b/src/ui/editor/caret.ts
@@ -1,6 +1,6 @@
 import { beginOfLine, Point, type Buffer, type PaneInfo } from 'editor'
 import { Sigui } from 'sigui'
-import { assign } from 'utils'
+import { assign, clamp } from 'utils'
 
 export type Caret = ReturnType<typeof Caret>
 
@@ -67,10 +67,14 @@ export function Caret({ paneInfo, buffer }: {
 
   function doBackspace() {
     if (caret.index > 0) {
-      const { code } = buffer
-      buffer.code = code.slice(0, caret.index - 1) + code.slice(caret.index)
+      const { code, lines } = buffer
+      let chars = 1
+      if (beginOfLine(lines[caret.y]) === caret.x && caret.x > 0) {
+        chars = (2 - (caret.x % 2))
+      }
+      buffer.code = code.slice(0, caret.index - chars) + code.slice(caret.index)
       $.flush()
-      moveLeft()
+      moveByChars(-chars)
     }
   }
 
@@ -122,12 +126,8 @@ export function Caret({ paneInfo, buffer }: {
     }
   }
 
-  function moveLeft() {
-    if (caret.index > 0) --caret.index
-  }
-
-  function moveRight() {
-    if (caret.index < buffer.length) ++caret.index
+  function moveByChars(chars: number) {
+    caret.index = clamp(0, buffer.length, caret.index + chars)
   }
 
   function moveByWord(dir: number) {
@@ -166,8 +166,7 @@ export function Caret({ paneInfo, buffer }: {
     moveHome,
     moveEnd,
     moveUpDown,
-    moveLeft,
-    moveRight,
+    moveByChars,
     moveByWord,
     insert,
   })
diff --git a/src/ui/editor/input.ts b/src/ui/editor/input.ts
index 1e4368a..0a7063e 100644
--- a/src/ui/editor/input.ts
+++ b/src/ui/editor/input.ts
@@ -150,7 +150,10 @@ export function Input({ misc, view, pane, panes }: {
       updateMouseFromEvent(ev)
 
       const { hoveringPane: pane } = info
-      if (!pane) return
+      if (!pane) {
+        // info.pane.info.isFocus = false
+        return
+      }
 
       info.pane.info.isFocus = false
       info.pane = pane
diff --git a/src/ui/editor/kbd.tsx b/src/ui/editor/kbd.tsx
index 2e1927c..dd15de7 100644
--- a/src/ui/editor/kbd.tsx
+++ b/src/ui/editor/kbd.tsx
@@ -357,7 +357,7 @@ export function Kbd({ misc, dims, selection, buffer, caret, history }: {
       withHistoryDebounced(() =>
         withIntent(() => {
           caret.insert(key)
-          caret.moveRight()
+          caret.moveByChars(+1)
         })
       )
     }
@@ -441,7 +441,7 @@ export function Kbd({ misc, dims, selection, buffer, caret, history }: {
         withSelection(() =>
           withIntent(() => {
             if (ctrl) caret.moveByWord(-1)
-            else caret.moveLeft()
+            else caret.moveByChars(-1)
           })
         )
       }
@@ -450,7 +450,7 @@ export function Kbd({ misc, dims, selection, buffer, caret, history }: {
         withSelection(() =>
           withIntent(() => {
             if (ctrl) caret.moveByWord(+1)
-            else caret.moveRight()
+            else caret.moveByChars(+1)
           })
         )
       }
diff --git a/src/ui/editor/view.tsx b/src/ui/editor/view.tsx
index f40233c..bb74664 100644
--- a/src/ui/editor/view.tsx
+++ b/src/ui/editor/view.tsx
@@ -20,18 +20,38 @@ export function View({ width, height }: {
   })
 
   const canvas = <Canvas width={width} height={height} class="absolute top-0 left-0" /> as HTMLCanvasElement
+
   const glCanvas = <Canvas width={width} height={height} class="absolute top-0 left-0" /> as HTMLCanvasElement
+
   const svg = <svg width={width} height={height} class="absolute top-0 left-0" >
     {() => [...info.svgs]}
   </svg> as SVGSVGElement
 
-  const el = <div class="relative" style={() => ({ cursor: info.cursor })}>
+  const textarea = <textarea
+    spellcheck="false"
+    autocorrect="off"
+    autocapitalize="off"
+    autocomplete="off"
+    virtualkeyboardpolicy="auto"
+    class="
+      fixed right-0 top-0 opacity-0 w-[50px] h-[50px]
+      pointer-events-none caret-transparent
+      border-none outline-none
+      resize-none p-0 whitespace-pre
+      overflow-hidden z-50
+    "
+  /> as HTMLTextAreaElement
+
+  const el = <div class="editor relative" style={() => ({ cursor: info.cursor })}>
     {canvas}
     {glCanvas}
     {svg}
+    {textarea}
   </div> as HTMLDivElement
 
   const c = canvas.getContext('2d')!
+  const gfx = Gfx({ canvas: glCanvas })
+  const anim = Anim()
 
   // initialize canvas context settings
   $.fx(() => {
@@ -45,37 +65,16 @@ export function View({ width, height }: {
     c.font = '16px "IBM Plex Mono", monospace'
   })
 
-  const anim = Anim()
-  // anim.ticks.add(draw)
-
-  const gfx = Gfx({ canvas: glCanvas })
-  // anim.ticks.add(gfx.draw)
-
-  const textarea = <textarea
-    spellcheck="false"
-    autocorrect="off"
-    autocapitalize="off"
-    autocomplete="off"
-    virtualkeyboardpolicy="auto"
-    class="
-      fixed right-0 top-0 opacity-0 w-[50px] h-[50px]
-      pointer-events-none caret-transparent
-      border-none outline-none
-      resize-none p-0 whitespace-pre
-      overflow-hidden z-50
-    "
-  /> as HTMLTextAreaElement
-
   return $({
-    el,
-    info,
-    canvas,
+    anim,
     c,
+    canvas,
+    el,
+    gfx,
     glCanvas,
+    info,
     svg,
     svgs: info.$.svgs,
-    gfx,
-    anim,
     textarea,
   })
 }

From e514523185be561437a1d968f4c8df2a29f9036b Mon Sep 17 00:00:00 2001
From: stagas <gstagas@gmail.com>
Date: Mon, 14 Oct 2024 10:26:59 +0300
Subject: [PATCH 21/25] mouse/touch events

---
 src/pages/EditorDemo.tsx |  51 ++++++++++++-
 src/ui/Editor.tsx        |  49 ++++++------
 src/ui/editor/buffer.ts  |  19 ++++-
 src/ui/editor/caret.ts   |  19 -----
 src/ui/editor/draw.ts    |   8 +-
 src/ui/editor/input.ts   | 159 ++++++++++++++++-----------------------
 src/ui/editor/kbd.tsx    |   6 +-
 src/ui/editor/mouse.ts   | 116 ++++++++++++++++++++++++++--
 src/ui/editor/pane.ts    |  16 ++--
 src/ui/editor/view.tsx   |   2 +-
 10 files changed, 291 insertions(+), 154 deletions(-)

diff --git a/src/pages/EditorDemo.tsx b/src/pages/EditorDemo.tsx
index 78b8ab8..1cec811 100644
--- a/src/pages/EditorDemo.tsx
+++ b/src/pages/EditorDemo.tsx
@@ -1,6 +1,7 @@
-import { Rect, type WordWrapProcessor } from 'editor'
+import { Rect, type Pane, type WordWrapProcessor } from 'editor'
 import { wasm } from 'gfx'
 import { Sigui, type Signal } from 'sigui'
+import { clamp } from 'utils'
 import { AnimMode } from '~/src/comp/AnimMode.tsx'
 import { Token, tokenize } from '~/src/lang/tokenize.ts'
 import { screen } from '~/src/screen.ts'
@@ -63,6 +64,49 @@ export function EditorDemo({ width, height }: {
     return { fill, stroke }
   }
 
+  const mouse = { x: 0, y: 0 }
+  let number: RegExpMatchArray | undefined
+  let value: number
+  let digits: number
+
+  function onMouseDown(pane: Pane) {
+    const word = pane.buffer.wordUnderLinecol(pane.mouse.info.linecol)
+    if (word && parseFloat(word[0]).toString() === word[0]) {
+      number = word
+      value = parseFloat(number[0])
+      digits = number[0].split('.')[1]?.length ?? 0
+      mouse.x = pane.mouse.info.x
+      mouse.y = pane.mouse.info.y
+      return true
+    }
+  }
+
+  function onMouseMove(pane: Pane) {
+    if (number?.index == null) return
+    const p = pane.mouse.info
+    const dx = mouse.x - p.x
+    const dy = p.y - mouse.y
+    mouse.x = p.x
+    mouse.y = p.y
+    if (value >= 100 && value < 1000) {
+      value -=
+        (Math.abs(dx) ** 1.08) * Math.sign(dx) +
+        (Math.abs(dy) ** 1.08) * Math.sign(dy)
+      const s = clamp(100, parseFloat('999.' + (digits ? '9'.repeat(digits) : '0')), value).toFixed(digits)
+      value = parseFloat(s)
+      const { code } = pane.buffer
+      pane.buffer.code = `${code.slice(0, number.index)}${s}${code.slice(number.index + s.length)}`
+    }
+    return true
+  }
+
+  function onMouseUp(pane: Pane) {
+    if (number) {
+      number = void 0
+      return true
+    }
+  }
+
   const editor = Editor({
     width: info.$.width,
     height: info.$.height,
@@ -70,6 +114,9 @@ export function EditorDemo({ width, height }: {
     colorize,
     tokenize,
     wordWrapProcessor,
+    onMouseDown,
+    onMouseUp,
+    onMouseMove,
   })
 
   const pane2Info = $({
@@ -122,7 +169,7 @@ export function EditorDemo({ width, height }: {
       if (depth) gen.push(token)
     }
 
-    if (!gens.length) return
+    if (gens.length < 2) return
 
     const d = WaveCanvasWidget()
     d.info.floats = floats
diff --git a/src/ui/Editor.tsx b/src/ui/Editor.tsx
index 4277586..114dfa5 100644
--- a/src/ui/Editor.tsx
+++ b/src/ui/Editor.tsx
@@ -1,34 +1,56 @@
-import { Input, Misc, Pane, Rect, View, type WordWrapProcessor } from 'editor'
+import { Input, Misc, Pane, Rect, View, type InputMouse, type Linecol, type WordWrapProcessor } from 'editor'
 import { Sigui, type $, type Signal } from 'sigui'
 import type { Source, Token } from '~/src/lang/tokenize.ts'
 
-export function Editor({ code, width, height, colorize, tokenize, wordWrapProcessor }: {
+export function Editor({ code, width, height, colorize, tokenize, wordWrapProcessor, onMouseDown, onMouseUp, onMouseMove, }: {
   code: Signal<string>
   width: Signal<number>
   height: Signal<number>
   colorize: (token: Token) => { fill: string, stroke: string }
   tokenize: (source: Source) => Generator<Token, void, unknown>
   wordWrapProcessor: WordWrapProcessor
+  onMouseDown: (pane: Pane) => boolean | void
+  onMouseUp: (pane: Pane) => boolean | void
+  onMouseMove: (pane: Pane) => boolean | void
 }) {
   using $ = Sigui()
 
   const misc = Misc()
   const view = View({ width, height })
 
+  // initial pane
+  const pane = createPane({
+    rect: $(Rect(), { x: 20, y: 20, w: 193, h: 200 }),
+    code,
+  })
+
+  const info = $({
+    pane,
+    panes: new Set([pane])
+  })
+
+  const input = Input({
+    view,
+    pane: info.$.pane,
+    panes: info.$.panes,
+  })
+
   function createPane({ rect, code }: {
     rect: $<Rect>
     code: Signal<string>
   }) {
-    const pane = Pane({
+    return Pane({
       misc,
       view,
       rect,
       code,
       colorize,
       tokenize,
-      wordWrapProcessor
+      wordWrapProcessor,
+      onMouseDown,
+      onMouseUp,
+      onMouseMove,
     })
-    return pane
   }
 
   function addPane(pane: Pane) {
@@ -42,23 +64,6 @@ export function Editor({ code, width, height, colorize, tokenize, wordWrapProces
     view.anim.ticks.delete(pane.draw.draw)
   }
 
-  const pane = createPane({
-    rect: $(Rect(), { x: 20, y: 20, w: 193, h: 200 }),
-    code,
-  })
-
-  const info = $({
-    pane,
-    panes: new Set([pane])
-  })
-
-  const input = Input({
-    misc,
-    view,
-    pane: info.$.pane,
-    panes: info.$.panes,
-  })
-
   addPane(pane)
 
   return {
diff --git a/src/ui/editor/buffer.ts b/src/ui/editor/buffer.ts
index 0b9de3b..09dc3e0 100644
--- a/src/ui/editor/buffer.ts
+++ b/src/ui/editor/buffer.ts
@@ -5,7 +5,7 @@ import type { Source, Token } from '~/src/lang/tokenize.ts'
 import { type Dims } from '~/src/ui/editor/dims.ts'
 import { parseWords } from '~/src/ui/editor/util/parse-words.ts'
 import { TOKEN, WORD } from '~/src/ui/editor/util/regexp.ts'
-import { type Point } from '~/src/ui/editor/util/types.ts'
+import { linecolToPoint, type Linecol, type Point } from '~/src/ui/editor/util/types.ts'
 
 export interface Line {
   text: string
@@ -265,6 +265,21 @@ export function Buffer({ dims, code, tokenize, wordWrapProcessor = { pre: identi
     }
   }
 
+  function wordUnderIndex(index: number): RegExpExecArray | undefined {
+    const words = parseWords(TOKEN, info.code)
+    for (let i = 0, word: RegExpExecArray, next: any; i < words.length; i++) {
+      word = words[i]
+      next = i < words.length - 1 ? words[i + 1] : { index: Infinity }
+      if (index >= word.index && index < next.index) {
+        return word
+      }
+    }
+  }
+
+  function wordUnderLinecol(linecol: Linecol): RegExpExecArray | undefined {
+    return wordUnderIndex(visualPointToIndex(linecolToPoint(linecol)))
+  }
+
   return $({
     info,
     code,
@@ -278,5 +293,7 @@ export function Buffer({ dims, code, tokenize, wordWrapProcessor = { pre: identi
     visualPointToLogicalPoint,
     logicalPointToVisualPoint,
     wordUnderVisualPoint,
+    wordUnderIndex,
+    wordUnderLinecol,
   })
 }
diff --git a/src/ui/editor/caret.ts b/src/ui/editor/caret.ts
index 60cb70b..9d8bf43 100644
--- a/src/ui/editor/caret.ts
+++ b/src/ui/editor/caret.ts
@@ -46,25 +46,6 @@ export function Caret({ paneInfo, buffer }: {
     caret.index = buffer.logicalPointToIndex({ x, y })
   })
 
-  // blink caret
-  $.fx(() => {
-    const { isFocus } = paneInfo
-    const { isBlink, blinkReset } = caret
-    $()
-    if (!isFocus || !isBlink) {
-      // caret.isVisible = false
-      return
-    }
-    caret.isVisible = true
-    const caretIv = setInterval(() => {
-      caret.isVisible = !caret.isVisible
-    }, 500)
-    return () => {
-      caret.isVisible = true
-      clearInterval(caretIv)
-    }
-  })
-
   function doBackspace() {
     if (caret.index > 0) {
       const { code, lines } = buffer
diff --git a/src/ui/editor/draw.ts b/src/ui/editor/draw.ts
index 0306651..87e6101 100644
--- a/src/ui/editor/draw.ts
+++ b/src/ui/editor/draw.ts
@@ -217,12 +217,14 @@ export function Draw({ view, selection, caret, dims, buffer, colorize }: {
   $.fx(() => {
     const { x, y } = caretViewPoint
     const { w, h } = info.rect
-    const { charWidth, charHeight } = dims.info
+    const { charWidth, charHeight, lineHeight } = dims.info
     $()
     const { scrollX, scrollY } = dims.info
 
-    if (y > -scrollY + h - charHeight) dims.info.scrollY = -(y - h + charHeight)
-    if (y < -scrollY) dims.info.scrollY = -y
+    const padY = lineHeight + 1
+
+    if (y > -scrollY + h - charHeight - padY) dims.info.scrollY = -(y - h + charHeight + padY)
+    if (y < -scrollY + padY) dims.info.scrollY = -y + padY
 
     if (x > -scrollX + w - charWidth) dims.info.scrollX = -(x - w + charWidth)
     if (x < -scrollX) dims.info.scrollX = -x
diff --git a/src/ui/editor/input.ts b/src/ui/editor/input.ts
index 0a7063e..7659107 100644
--- a/src/ui/editor/input.ts
+++ b/src/ui/editor/input.ts
@@ -1,11 +1,15 @@
-import { isPointInRect, Linecol, Mouse, type Misc, type Pane, type View } from 'editor'
+import { isPointInRect, type Pane, type Point, type View } from 'editor'
 import { Sigui, type Signal } from 'sigui'
 import { assign, dom, isMobile, MouseButtons } from 'utils'
 
+export interface InputMouse extends Point {
+  isDown: boolean
+  buttons: number
+}
+
 export type Input = ReturnType<typeof Input>
 
-export function Input({ misc, view, pane, panes }: {
-  misc: Misc
+export function Input({ view, pane, panes }: {
   view: View
   pane: Signal<Pane>
   panes: Signal<Set<Pane>>
@@ -34,7 +38,7 @@ export function Input({ misc, view, pane, panes }: {
     // desktop
     dom.on(textarea, 'keydown', ev => info.pane.kbd.handleKey(ev)),
 
-    // clipboard
+    // clipboard paste
     dom.on(textarea, 'paste', $.fn((ev: ClipboardEvent) => {
       ev.preventDefault()
       const text = ev.clipboardData?.getData('text/plain')
@@ -51,12 +55,14 @@ export function Input({ misc, view, pane, panes }: {
       }
     })),
 
+    // clipboard copy
     dom.on(textarea, 'copy', $.fn((ev: ClipboardEvent) => {
       ev.preventDefault()
       const { selection } = info.pane
       ev.clipboardData?.setData('text/plain', selection.text)
     })),
 
+    // clipboard cut
     dom.on(textarea, 'cut', $.fn((ev: ClipboardEvent) => {
       ev.preventDefault()
       const { history, selection } = info.pane
@@ -66,17 +72,14 @@ export function Input({ misc, view, pane, panes }: {
     })),
   ])
 
-  // mouse
-  const inputMouse = $({
+  // input mouse
+  const inputMouse: InputMouse = $({
     isDown: false,
     buttons: 0,
-    count: 0,
     x: 0,
     y: 0,
   })
 
-  const CLICK_TIMEOUT = 350
-
   // update cursor when hovering pane
   $.fx(() => {
     const { hoveringPane } = info
@@ -94,6 +97,7 @@ export function Input({ misc, view, pane, panes }: {
     }
   })
 
+  // unset hoveringPane when pointer leaves the window
   $.fx(() =>
     dom.on(document, 'pointerleave', () => {
       info.hoveringPane = null
@@ -101,30 +105,49 @@ export function Input({ misc, view, pane, panes }: {
   )
 
   function updatePaneMouse(pane: Pane) {
+    pane.mouse.info.buttons = inputMouse.buttons
     assign(pane.mouse.info, {
       x: inputMouse.x - pane.dims.info.rect.x - pane.dims.info.scrollX,
       y: inputMouse.y - pane.dims.info.rect.y - pane.dims.info.scrollY,
     })
   }
 
-  function updateMouseFromEvent(ev: PointerEvent | Touch) {
-    const c = el.getBoundingClientRect()
-    inputMouse.x = ev.pageX - c.left
-    inputMouse.y = ev.pageY - c.top
+  function updateInputMouseFromEvent(ev: PointerEvent | TouchEvent) {
+    if (ev instanceof TouchEvent) {
+      const touch = ev.touches[0] ?? { pageX: 0, pageY: 0 }
+      inputMouse.x = touch.pageX
+      inputMouse.y = touch.pageY
+      inputMouse.buttons = MouseButtons.Left
+    }
+    else {
+      inputMouse.x = ev.pageX
+      inputMouse.y = ev.pageY
+      inputMouse.buttons = ev.buttons
+    }
 
-    if (info.hoveringPane?.mouse.info.isDown) {
-      updatePaneMouse(info.hoveringPane)
+    const c = el.getBoundingClientRect()
+    inputMouse.x -= c.left
+    inputMouse.y -= c.top
+
+    // mouse down had started inside a pane
+    // so we update only that pane even if outside of it
+    if (info.pane.mouse.info.isDown) {
+      info.hoveringPane = info.pane
+      updatePaneMouse(info.pane)
       return
     }
 
+    // find the pane mouse is hovering
     out: {
       for (const pane of info.panes) {
         if (isPointInRect(inputMouse, pane.dims.info.rect)) {
+          // found pane
           info.hoveringPane = pane
           updatePaneMouse(pane)
           break out
         }
       }
+      // no pane found under input mouse, unset hoveringPane
       info.hoveringPane = null
     }
   }
@@ -145,87 +168,35 @@ export function Input({ misc, view, pane, panes }: {
       }
     }), { passive: false }),
 
-    dom.on(el, 'pointerdown', $.fn((ev: PointerEvent) => {
-      ev.preventDefault()
-      updateMouseFromEvent(ev)
-
-      const { hoveringPane: pane } = info
-      if (!pane) {
-        // info.pane.info.isFocus = false
-        return
-      }
-
-      info.pane.info.isFocus = false
-      info.pane = pane
-      pane.info.isFocus = true
-
-      const { selection, caret, mouse } = pane
-
-      mouse.info.buttons = ev.buttons
+    dom.on(el, isMobile() ? 'touchstart' : 'pointerdown', $.fn((ev: PointerEvent | TouchEvent) => {
+      if (!isMobile()) ev.preventDefault()
+      updateInputMouseFromEvent(ev)
+      inputMouse.isDown = true
 
-      if (mouse.info.buttons & MouseButtons.Middle) {
-        // TODO: implement middle click
-        return
-      }
+      const { pane, hoveringPane } = info
 
-      if (mouse.info.buttons & MouseButtons.Right) {
-        // TODO: implement right click
+      // click outside panes, unset current pane focus
+      if (!hoveringPane) {
+        pane.info.isFocus = false
         return
       }
 
-      inputMouse.isDown = true
-      mouse.info.isDown = true
-
-      clearTimeout(mouse.info.clickTimeout)
-      mouse.info.clickTimeout = setTimeout(() => mouse.info.count = 0, CLICK_TIMEOUT)
-      mouse.info.count++
-
-      switch (mouse.info.count) {
-        case 1: {
-          selection.reset()
-          Object.assign(caret, mouse.info.linecol)
-          caret.visualXIntent = caret.col
-          $.flush()
-          selection.reset()
-          break
-        }
-        case 2: {
-          selection.selectWord()
-          break
-        }
-        case 3: {
-          selection.selectBlock()
-          break
-        }
-        case 4: {
-          selection.selectLine()
-          break
-        }
-        default: {
-          selection.reset()
-          mouse.info.count = 0
-          break
-        }
-      }
-      caret.info.isBlink = false
+      pane.info.isFocus = false
+      info.pane = hoveringPane
+      info.pane.mouse.handleDown()
     })),
-    dom.on(window, 'pointerup', $.fn((ev: PointerEvent) => {
-      updateMouseFromEvent(ev)
-      const { mouse, caret } = info.pane
-      inputMouse.isDown = false
-      mouse.info.isDown = false
-      mouse.info.buttons = 0
 
-      caret.info.isBlink = true
+    dom.on(window, isMobile() ? 'touchend' : 'pointerup', $.fn((ev: PointerEvent | TouchEvent) => {
+      ev.preventDefault()
+      updateInputMouseFromEvent(ev)
+      inputMouse.isDown = false
+      info.pane.mouse.handleUp()
     })),
-    dom.on(window, 'pointermove', $.fn((ev: PointerEvent) => {
-      updateMouseFromEvent(ev)
-      const { selection, caret, mouse } = info.pane
-      if (mouse.info.buttons & MouseButtons.Left) {
-        Object.assign(caret, mouse.info.linecol)
-        $.flush()
-        selection.toCaret()
-      }
+
+    dom.on(window, isMobile() ? 'touchmove' : 'pointermove', $.fn((ev: PointerEvent | TouchEvent) => {
+      ev.preventDefault()
+      updateInputMouseFromEvent(ev)
+      info.pane.mouse.handleMove()
     })),
   ])
 
@@ -240,17 +211,17 @@ export function Input({ misc, view, pane, panes }: {
   }
 
   function onFocus() {
-    info.pane.info.isFocus = info.pane.caret.info.isBlink = true
+    info.pane.info.isFocus = true
   }
 
   function onBlur() {
     if (inputMouse.isDown) {
-      // if (info.pane.info.isFocus) {
-      //   info.pane.caret.info.isVisible = true
-      // }
-      return
+      if (info.pane.info.isFocus) {
+        info.pane.caret.info.isVisible = false
+        return
+      }
     }
-    info.pane.info.isFocus = info.pane.caret.info.isVisible = info.pane.caret.info.isBlink = false
+    info.pane.info.isFocus = false
   }
 
   $.fx(() => [
diff --git a/src/ui/editor/kbd.tsx b/src/ui/editor/kbd.tsx
index dd15de7..95d1c7f 100644
--- a/src/ui/editor/kbd.tsx
+++ b/src/ui/editor/kbd.tsx
@@ -1,8 +1,9 @@
-import { beginOfLine, Buffer, escapeRegExp, findMatchingBrackets, linecolToPoint, pointToLinecol, type Caret, type Dims, type History, type Misc, type Selection } from 'editor'
+import { beginOfLine, Buffer, escapeRegExp, findMatchingBrackets, linecolToPoint, pointToLinecol, type Caret, type Dims, type History, type Misc, type PaneInfo, type Selection } from 'editor'
 import { Sigui } from 'sigui'
 import { assign } from 'utils'
 
-export function Kbd({ misc, dims, selection, buffer, caret, history }: {
+export function Kbd({ paneInfo, misc, dims, selection, buffer, caret, history }: {
+  paneInfo: PaneInfo
   misc: Misc
   dims: Dims
   selection: Selection
@@ -268,6 +269,7 @@ export function Kbd({ misc, dims, selection, buffer, caret, history }: {
   }
 
   const handleKey = $.fn((ev: KeyboardEvent): void => {
+    if (!paneInfo.isFocus) return
     if (ev.ctrlKey && ignoredKeys.includes(ev.key.toLowerCase())) return
 
     ev.preventDefault()
diff --git a/src/ui/editor/mouse.ts b/src/ui/editor/mouse.ts
index 1842f51..6e8f267 100644
--- a/src/ui/editor/mouse.ts
+++ b/src/ui/editor/mouse.ts
@@ -1,16 +1,21 @@
-import { Linecol, type Draw } from 'editor'
+import { Linecol, type Caret, type Draw, type InputMouse, type PaneInfo, type Selection } from 'editor'
 import { Sigui } from 'sigui'
-import { assign } from 'utils'
+import { assign, MouseButtons } from 'utils'
 
-export function Mouse({ draw }: {
+const CLICK_TIMEOUT = 350
+
+export function Mouse({ paneInfo, selection, caret, draw }: {
+  paneInfo: PaneInfo
+  selection: Selection
+  caret: Caret
   draw: Draw
 }) {
   using $ = Sigui()
 
   const info = $({
     isDown: false,
-    clickTimeout: -1 as any,
     buttons: 0,
+    clickTimeout: -1 as any,
     count: 0,
     x: 0,
     y: 0,
@@ -23,5 +28,106 @@ export function Mouse({ draw }: {
     assign(info.linecol, draw.linecolFromViewPoint(info))
   })
 
-  return { info }
+  // blink caret
+  $.fx(() => {
+    const { isDown } = info
+    const { isFocus } = paneInfo
+    const { isBlink, blinkReset } = caret.info
+    $()
+    if (!isFocus || !isBlink) {
+      if (!isDown) {
+        caret.info.isVisible = false
+        selection.reset()
+      }
+      return
+    }
+    caret.info.isVisible = true
+    const caretIv = setInterval(() => {
+      caret.info.isVisible = !caret.info.isVisible
+    }, 500)
+    return () => {
+      caret.info.isVisible = true
+      clearInterval(caretIv)
+    }
+  })
+
+  function handleDown() {
+    $.flush()
+    info.isDown = true
+    if (mouse.onDown()) return
+
+    paneInfo.isFocus = true
+
+    if (info.buttons & MouseButtons.Middle) {
+      // TODO: implement middle click
+      return
+    }
+
+    if (info.buttons & MouseButtons.Right) {
+      // TODO: implement right click
+      return
+    }
+
+    clearTimeout(info.clickTimeout)
+    info.clickTimeout = setTimeout(() => info.count = 0, CLICK_TIMEOUT)
+
+    info.count++
+
+    switch (info.count) {
+      case 1: {
+        selection.reset()
+        Object.assign(caret, info.linecol)
+        caret.visualXIntent = caret.col
+        $.flush()
+        selection.reset()
+        break
+      }
+      case 2: selection.selectWord(); break
+      case 3: selection.selectBlock(); break
+      case 4: selection.selectLine(); break
+      default: {
+        selection.reset()
+        info.count = 0
+        break
+      }
+    }
+    caret.info.isBlink = false
+  }
+
+  function handleUp() {
+    $.flush()
+    info.isDown = false
+    if (mouse.onUp()) return
+
+    info.buttons = 0
+    caret.info.isBlink = true
+  }
+
+  function handleMove() {
+    $.flush()
+    if (mouse.onMove()) return
+
+    if (info.buttons & MouseButtons.Left) {
+      Object.assign(caret, info.linecol)
+      $.flush()
+      selection.toCaret()
+    }
+  }
+
+  // allow mouse down override by the consumer
+  function onDown(): boolean | void { }
+  function onUp(): boolean | void { }
+  function onMove(): boolean | void { }
+
+  const mouse = {
+    info,
+    handleDown,
+    handleUp,
+    handleMove,
+    onDown,
+    onUp,
+    onMove,
+  }
+
+  return mouse
 }
diff --git a/src/ui/editor/pane.ts b/src/ui/editor/pane.ts
index e506e09..77f9fc1 100644
--- a/src/ui/editor/pane.ts
+++ b/src/ui/editor/pane.ts
@@ -9,7 +9,7 @@ export interface PaneInfo {
 
 export type Pane = ReturnType<typeof Pane>
 
-export function Pane({ misc, view, code, rect, colorize, tokenize, wordWrapProcessor }: {
+export function Pane({ misc, view, code, rect, colorize, tokenize, wordWrapProcessor, onMouseDown, onMouseUp, onMouseMove, }: {
   misc: Misc
   view: View
   code: Signal<string>
@@ -17,6 +17,9 @@ export function Pane({ misc, view, code, rect, colorize, tokenize, wordWrapProce
   colorize: (token: Token) => { fill: string, stroke: string }
   tokenize: (source: Source) => Generator<Token, void, unknown>
   wordWrapProcessor: WordWrapProcessor
+  onMouseDown: (pane: Pane) => boolean | void
+  onMouseUp: (pane: Pane) => boolean | void
+  onMouseMove: (pane: Pane) => boolean | void
 }) {
   using $ = Sigui()
 
@@ -29,11 +32,10 @@ export function Pane({ misc, view, code, rect, colorize, tokenize, wordWrapProce
   const caret = Caret({ paneInfo: info, buffer })
   const selection = Selection({ buffer, caret })
   const history = History({ selection, buffer, caret })
-  const kbd = Kbd({ misc, dims, selection, buffer, caret, history })
+  const kbd = Kbd({ paneInfo: info, misc, dims, selection, buffer, caret, history })
   const draw = Draw({ view, selection, caret, dims, buffer, colorize })
-  const mouse = Mouse({ draw })
-
-  return {
+  const mouse = Mouse({ paneInfo: info, selection, caret, draw })
+  const pane = {
     info,
     dims,
     buffer,
@@ -44,4 +46,8 @@ export function Pane({ misc, view, code, rect, colorize, tokenize, wordWrapProce
     draw,
     mouse,
   }
+  mouse.onDown = () => onMouseDown(pane)
+  mouse.onUp = () => onMouseUp(pane)
+  mouse.onMove = () => onMouseMove(pane)
+  return pane
 }
diff --git a/src/ui/editor/view.tsx b/src/ui/editor/view.tsx
index bb74664..f5e6a78 100644
--- a/src/ui/editor/view.tsx
+++ b/src/ui/editor/view.tsx
@@ -42,7 +42,7 @@ export function View({ width, height }: {
     "
   /> as HTMLTextAreaElement
 
-  const el = <div class="editor relative" style={() => ({ cursor: info.cursor })}>
+  const el = <div class="editor relative touch-none" style={() => ({ cursor: info.cursor })}>
     {canvas}
     {glCanvas}
     {svg}

From d0473d6504aa16db4a5d3c63016eaf56e2008a63 Mon Sep 17 00:00:00 2001
From: stagas <gstagas@gmail.com>
Date: Mon, 14 Oct 2024 15:03:35 +0300
Subject: [PATCH 22/25] feat: scrollbar drag

---
 src/as/gfx/gfx.ts      |  2 +-
 src/comp/Toast.tsx     |  2 +-
 src/ui/editor/dims.ts  |  8 ++++-
 src/ui/editor/draw.ts  | 67 +++++++++++++++++++++++++++++-------------
 src/ui/editor/input.ts | 19 ++++++------
 src/ui/editor/mouse.ts | 43 +++++++++++++++++++++++++--
 src/ui/editor/pane.ts  | 12 ++++++--
 7 files changed, 115 insertions(+), 38 deletions(-)

diff --git a/src/as/gfx/gfx.ts b/src/as/gfx/gfx.ts
index 35680c1..e88f863 100644
--- a/src/as/gfx/gfx.ts
+++ b/src/as/gfx/gfx.ts
@@ -28,7 +28,7 @@ export function Gfx({ canvas }: {
   }
 
   $.fx(() => () => {
-    DEBUG && console.debug('[webgl] dispose')
+    DEBUG && console.debug('[gfx] dispose')
     GL.reset()
   })
 
diff --git a/src/comp/Toast.tsx b/src/comp/Toast.tsx
index d03b734..8a17f3a 100644
--- a/src/comp/Toast.tsx
+++ b/src/comp/Toast.tsx
@@ -4,7 +4,7 @@ export function Toast() {
   return <div>
     {() => state.toastMessages.length ? <div class="fixed w-[70%] p-4 bottom-0 right-0 flex flex-col gap-2 z-50">
       {() => state.toastMessages.map(item =>
-        <div class="bg-black min-w-full p-2 border border-white-500 text-sm overflow-hidden text-ellipsis whitespace-pre" onmousedown={() => {
+        <div class="bg-black min-w-full p-2 border border-white-500 text-sm overflow-hidden text-ellipsis whitespace-pre z-50" onmousedown={() => {
           state.toastMessages = state.toastMessages.filter(i => i !== item)
         }}>{item.stack ?? item.message}</div>
       )}
diff --git a/src/ui/editor/dims.ts b/src/ui/editor/dims.ts
index 3bdef72..87679bb 100644
--- a/src/ui/editor/dims.ts
+++ b/src/ui/editor/dims.ts
@@ -1,4 +1,4 @@
-import type { Rect } from 'editor'
+import { Point, type Rect } from 'editor'
 import { Sigui, type $ } from 'sigui'
 
 export type Dims = ReturnType<typeof Dims>
@@ -21,8 +21,14 @@ export function Dims({ rect }: {
     pageHeight: 1,
     pageWidth: 1,
 
+    innerSize: $(Point()),
+
     scrollX: 0,
     scrollY: 0,
+
+    scrollbarHandleSize: 20,
+    scrollbarViewSize: 5,
+
   })
 
   return { info }
diff --git a/src/ui/editor/draw.ts b/src/ui/editor/draw.ts
index 87e6101..c7fd367 100644
--- a/src/ui/editor/draw.ts
+++ b/src/ui/editor/draw.ts
@@ -1,4 +1,4 @@
-import { Point, Widgets, type Buffer, type Caret, type Dims, type Linecol, type Selection, type View } from 'editor'
+import { Point, Widgets, type Buffer, type Caret, type Dims, type Linecol, type PaneInfo, type Selection, type View } from 'editor'
 import { Matrix, Rect } from 'gfx'
 import { Sigui } from 'sigui'
 import { assign, clamp, drawText, randomHex } from 'utils'
@@ -14,7 +14,8 @@ interface TokenDrawInfo {
 
 export type Draw = ReturnType<typeof Draw>
 
-export function Draw({ view, selection, caret, dims, buffer, colorize }: {
+export function Draw({ paneInfo, view, selection, caret, dims, buffer, colorize }: {
+  paneInfo: PaneInfo
   view: View
   selection: Selection
   caret: Caret
@@ -52,9 +53,7 @@ export function Draw({ view, selection, caret, dims, buffer, colorize }: {
   const tokenDrawInfo = new WeakMap<Token, TokenDrawInfo>()
   let caretViewPoint = $(Point())
   let extraHeights: number[] = []
-  let innerSize = Point()
   const textPadding = 5
-  const scrollbarSize = 5
 
   function viewPointFromLinecol({ line, col }: Linecol): Point {
     const { charWidth, lineHeight } = dims.info
@@ -193,7 +192,7 @@ export function Draw({ view, selection, caret, dims, buffer, colorize }: {
   $.fx(() => {
     const { w, h } = info.rect
     const { linesVisual } = buffer.info
-    const { lineHeight } = dims.info
+    const { charWidth, lineHeight, innerSize } = dims.info
     $()
     innerSize.x = 0
     innerSize.y = 0
@@ -206,13 +205,32 @@ export function Draw({ view, selection, caret, dims, buffer, colorize }: {
 
   // update scroll
   $.fx(() => {
-    const { rect: { w, h }, scrollX, scrollY } = dims.info
+    const { rect: { w, h }, scrollX, scrollY, innerSize } = dims.info
     const { x, y } = innerSize
     $()
     dims.info.scrollX = clamp(-(x - w), 0, scrollX)
     dims.info.scrollY = clamp(-(y - h), 0, scrollY)
   })
 
+  // update show scrollbars when hovering pane
+  $.fx(() => {
+    const { isHovering } = paneInfo
+    $()
+    if (isHovering) {
+      info.showScrollbars = true
+      return () => info.showScrollbars = false
+    }
+  })
+
+  // update cursor
+  $.fx(() => {
+    const { isHovering, isHoveringScrollbar, isDraggingScrollbar } = paneInfo
+    $()
+    view.info.cursor = !isHovering || (isHoveringScrollbar || isDraggingScrollbar)
+      ? 'default'
+      : 'text'
+  })
+
   // keep caret in view by adjusting scroll when caret is moving
   $.fx(() => {
     const { x, y } = caretViewPoint
@@ -242,6 +260,7 @@ export function Draw({ view, selection, caret, dims, buffer, colorize }: {
   // trigger draw
   $.fx(() => {
     const { c, pr, rect: { x, y, w, h }, showScrollbars } = $.of(info)
+    const { isHovering, isHoveringScrollbar, isDraggingScrollbar } = paneInfo
     const { code } = buffer.info
     const { caretWidth, charWidth, charHeight, lineHeight, scrollX, scrollY } = dims.info
     const { isVisible: isCaretVisible } = caret.info
@@ -311,26 +330,34 @@ export function Draw({ view, selection, caret, dims, buffer, colorize }: {
     if (!info.showScrollbars) return
 
     // outer rectangle
-    const { x, y, w, h } = info.rect
+    const { x, y, w: outerWidth, h: outerHeight } = info.rect
 
     // scroll amount
-    const { scrollX, scrollY } = dims.info
+    const { scrollX, scrollY, scrollbarViewSize, innerSize } = dims.info
 
     // inner size
-    const { x: bx, y: by } = innerSize
+    const { x: innerWidth, y: innerHeight } = innerSize
+
+    const { isDraggingScrollbar, isHoveringScrollbar } = paneInfo
 
-    c.fillStyle = '#aaa5'
+    c.fillStyle = '#aaa' + (
+      isDraggingScrollbar
+        ? 'f'
+        : isHoveringScrollbar
+          ? '7'
+          : '5'
+    )
 
     // draw vertical scrollbar
     {
-      const coeff = h / by
+      const coeff = outerHeight / innerHeight
       if (coeff < 1) {
-        const scrollbarWidth = scrollbarSize
-        const scrollbarHeight = h * (h / by)
-        const scrollbarY = (-scrollY / by) * h
+        const scrollbarWidth = scrollbarViewSize * ((isHoveringScrollbar || isDraggingScrollbar) ? 2 : 1)
+        const scrollbarHeight = outerHeight * coeff
+        const scrollbarY = (-scrollY / innerHeight) * outerHeight
 
         c.fillRect(
-          x + w - scrollbarWidth,
+          x + outerWidth - scrollbarWidth,
           y + scrollbarY,
           scrollbarWidth,
           scrollbarHeight
@@ -340,14 +367,14 @@ export function Draw({ view, selection, caret, dims, buffer, colorize }: {
 
     // draw horizontal scrollbar
     {
-      const coeff = w / bx
+      const coeff = outerWidth / innerWidth
       if (coeff < 1) {
-        const scrollbarWidth = w * coeff
-        const scrollbarHeight = scrollbarSize
-        const scrollbarX = (-scrollX / bx) * w
+        const scrollbarWidth = outerWidth * coeff
+        const scrollbarHeight = scrollbarViewSize * ((isHoveringScrollbar || isDraggingScrollbar) ? 2 : 1)
+        const scrollbarX = (-scrollX / innerWidth) * outerWidth
         c.fillRect(
           x + scrollbarX,
-          y + h - scrollbarHeight,
+          y + outerHeight - scrollbarHeight,
           scrollbarWidth,
           scrollbarHeight
         )
diff --git a/src/ui/editor/input.ts b/src/ui/editor/input.ts
index 7659107..0be3079 100644
--- a/src/ui/editor/input.ts
+++ b/src/ui/editor/input.ts
@@ -80,20 +80,15 @@ export function Input({ view, pane, panes }: {
     y: 0,
   })
 
-  // update cursor when hovering pane
-  $.fx(() => {
-    const { hoveringPane } = info
-    $()
-    view.info.cursor = hoveringPane ? 'text' : 'default'
-  })
-
-  // update view scrollbars when hovering pane
+  // update hovering info
   $.fx(() => {
     const { hoveringPane: pane } = info
     $()
     if (pane) {
-      pane.draw.info.showScrollbars = true
-      return () => pane.draw.info.showScrollbars = false
+      pane.info.isHovering = true
+      return () => {
+        pane.info.isHovering = false
+      }
     }
   })
 
@@ -106,6 +101,10 @@ export function Input({ view, pane, panes }: {
 
   function updatePaneMouse(pane: Pane) {
     pane.mouse.info.buttons = inputMouse.buttons
+    assign(pane.mouse.info.actual, {
+      x: inputMouse.x - pane.dims.info.rect.x,
+      y: inputMouse.y - pane.dims.info.rect.y,
+    })
     assign(pane.mouse.info, {
       x: inputMouse.x - pane.dims.info.rect.x - pane.dims.info.scrollX,
       y: inputMouse.y - pane.dims.info.rect.y - pane.dims.info.scrollY,
diff --git a/src/ui/editor/mouse.ts b/src/ui/editor/mouse.ts
index 6e8f267..8b52481 100644
--- a/src/ui/editor/mouse.ts
+++ b/src/ui/editor/mouse.ts
@@ -1,11 +1,12 @@
-import { Linecol, type Caret, type Draw, type InputMouse, type PaneInfo, type Selection } from 'editor'
+import { Linecol, Point, type Caret, type Dims, type Draw, type PaneInfo, type Selection } from 'editor'
 import { Sigui } from 'sigui'
 import { assign, MouseButtons } from 'utils'
 
 const CLICK_TIMEOUT = 350
 
-export function Mouse({ paneInfo, selection, caret, draw }: {
+export function Mouse({ paneInfo, dims, selection, caret, draw }: {
   paneInfo: PaneInfo
+  dims: Dims
   selection: Selection
   caret: Caret
   draw: Draw
@@ -19,6 +20,7 @@ export function Mouse({ paneInfo, selection, caret, draw }: {
     count: 0,
     x: 0,
     y: 0,
+    actual: $(Point()),
     linecol: $(Linecol()),
   })
 
@@ -51,9 +53,25 @@ export function Mouse({ paneInfo, selection, caret, draw }: {
     }
   })
 
+  let scrollbarPointStart = 0
+  let scrollbarScrollStart = 0
+
+  $.fx(() => {
+    const { x, y } = info.actual
+    $()
+    if (x >= dims.info.rect.w - dims.info.scrollbarHandleSize) {
+      paneInfo.isHoveringScrollbar = true
+    }
+    else if (!paneInfo.isDraggingScrollbar) {
+      paneInfo.isHoveringScrollbar = false
+    }
+  })
+
   function handleDown() {
     $.flush()
+
     info.isDown = true
+
     if (mouse.onDown()) return
 
     paneInfo.isFocus = true
@@ -69,6 +87,15 @@ export function Mouse({ paneInfo, selection, caret, draw }: {
     }
 
     clearTimeout(info.clickTimeout)
+
+    // handle scrollbar down
+    if (paneInfo.isHoveringScrollbar) {
+      paneInfo.isDraggingScrollbar = true
+      scrollbarPointStart = info.actual.y
+      scrollbarScrollStart = dims.info.scrollY
+      return
+    }
+
     info.clickTimeout = setTimeout(() => info.count = 0, CLICK_TIMEOUT)
 
     info.count++
@@ -96,7 +123,10 @@ export function Mouse({ paneInfo, selection, caret, draw }: {
 
   function handleUp() {
     $.flush()
+
     info.isDown = false
+    paneInfo.isDraggingScrollbar = false
+
     if (mouse.onUp()) return
 
     info.buttons = 0
@@ -105,6 +135,15 @@ export function Mouse({ paneInfo, selection, caret, draw }: {
 
   function handleMove() {
     $.flush()
+
+    if (paneInfo.isDraggingScrollbar) {
+      const { h: outerHeight } = dims.info.rect
+      const { y: innerHeight } = dims.info.innerSize
+      const coeff = outerHeight / innerHeight
+      dims.info.scrollY = scrollbarScrollStart - ((info.actual.y - scrollbarPointStart) / coeff)
+      return
+    }
+
     if (mouse.onMove()) return
 
     if (info.buttons & MouseButtons.Left) {
diff --git a/src/ui/editor/pane.ts b/src/ui/editor/pane.ts
index 77f9fc1..8cc0e0f 100644
--- a/src/ui/editor/pane.ts
+++ b/src/ui/editor/pane.ts
@@ -5,6 +5,9 @@ import type { View } from '~/src/ui/editor/view.tsx'
 
 export interface PaneInfo {
   isFocus: boolean
+  isHovering: boolean
+  isHoveringScrollbar: boolean
+  isDraggingScrollbar: boolean
 }
 
 export type Pane = ReturnType<typeof Pane>
@@ -25,7 +28,10 @@ export function Pane({ misc, view, code, rect, colorize, tokenize, wordWrapProce
 
   const info: PaneInfo = $({
     isFocus: false,
-  })
+    isHovering: false,
+    isHoveringScrollbar: false,
+    isDraggingScrollbar: false,
+  } satisfies PaneInfo)
 
   const dims = Dims({ rect })
   const buffer = Buffer({ dims, code, tokenize, wordWrapProcessor })
@@ -33,8 +39,8 @@ export function Pane({ misc, view, code, rect, colorize, tokenize, wordWrapProce
   const selection = Selection({ buffer, caret })
   const history = History({ selection, buffer, caret })
   const kbd = Kbd({ paneInfo: info, misc, dims, selection, buffer, caret, history })
-  const draw = Draw({ view, selection, caret, dims, buffer, colorize })
-  const mouse = Mouse({ paneInfo: info, selection, caret, draw })
+  const draw = Draw({ paneInfo: info, view, selection, caret, dims, buffer, colorize })
+  const mouse = Mouse({ paneInfo: info, dims, selection, caret, draw })
   const pane = {
     info,
     dims,

From 7241dd262eefa555dde83b0527f8db58f949ccfc Mon Sep 17 00:00:00 2001
From: stagas <gstagas@gmail.com>
Date: Mon, 14 Oct 2024 15:14:54 +0300
Subject: [PATCH 23/25] feat: scrollbarX drag

---
 src/ui/editor/buffer.ts |  2 +-
 src/ui/editor/draw.ts   | 33 +++++++++++++++++++------
 src/ui/editor/mouse.ts  | 54 ++++++++++++++++++++++++++++++-----------
 src/ui/editor/pane.ts   | 12 ++++++---
 4 files changed, 74 insertions(+), 27 deletions(-)

diff --git a/src/ui/editor/buffer.ts b/src/ui/editor/buffer.ts
index 09dc3e0..1241ae9 100644
--- a/src/ui/editor/buffer.ts
+++ b/src/ui/editor/buffer.ts
@@ -30,7 +30,7 @@ export function Buffer({ dims, code, tokenize, wordWrapProcessor = { pre: identi
 
   const info = $({
     maxColumns: dims.info.$.pageWidth,
-    wordWrapEnabled: true,
+    wordWrapEnabled: false,
     code,
     lines: [] as string[],
     get length() {
diff --git a/src/ui/editor/draw.ts b/src/ui/editor/draw.ts
index c7fd367..b5980ba 100644
--- a/src/ui/editor/draw.ts
+++ b/src/ui/editor/draw.ts
@@ -224,9 +224,17 @@ export function Draw({ paneInfo, view, selection, caret, dims, buffer, colorize
 
   // update cursor
   $.fx(() => {
-    const { isHovering, isHoveringScrollbar, isDraggingScrollbar } = paneInfo
+    const {
+      isHovering,
+      isHoveringScrollbarX,
+      isHoveringScrollbarY,
+      isDraggingScrollbarX,
+      isDraggingScrollbarY,
+    } = paneInfo
     $()
-    view.info.cursor = !isHovering || (isHoveringScrollbar || isDraggingScrollbar)
+    view.info.cursor = !isHovering ||
+      (isHoveringScrollbarX || isDraggingScrollbarX) ||
+      (isHoveringScrollbarY || isDraggingScrollbarY)
       ? 'default'
       : 'text'
   })
@@ -260,7 +268,11 @@ export function Draw({ paneInfo, view, selection, caret, dims, buffer, colorize
   // trigger draw
   $.fx(() => {
     const { c, pr, rect: { x, y, w, h }, showScrollbars } = $.of(info)
-    const { isHovering, isHoveringScrollbar, isDraggingScrollbar } = paneInfo
+    const {
+      isHovering,
+      isHoveringScrollbarX, isDraggingScrollbarX,
+      isHoveringScrollbarY, isDraggingScrollbarY,
+    } = paneInfo
     const { code } = buffer.info
     const { caretWidth, charWidth, charHeight, lineHeight, scrollX, scrollY } = dims.info
     const { isVisible: isCaretVisible } = caret.info
@@ -338,12 +350,17 @@ export function Draw({ paneInfo, view, selection, caret, dims, buffer, colorize
     // inner size
     const { x: innerWidth, y: innerHeight } = innerSize
 
-    const { isDraggingScrollbar, isHoveringScrollbar } = paneInfo
+    const {
+      isHoveringScrollbarX, isDraggingScrollbarX,
+      isHoveringScrollbarY, isDraggingScrollbarY,
+    } = paneInfo
 
     c.fillStyle = '#aaa' + (
-      isDraggingScrollbar
+      isDraggingScrollbarX ||
+        isDraggingScrollbarY
         ? 'f'
-        : isHoveringScrollbar
+        : isHoveringScrollbarX ||
+          isHoveringScrollbarY
           ? '7'
           : '5'
     )
@@ -352,7 +369,7 @@ export function Draw({ paneInfo, view, selection, caret, dims, buffer, colorize
     {
       const coeff = outerHeight / innerHeight
       if (coeff < 1) {
-        const scrollbarWidth = scrollbarViewSize * ((isHoveringScrollbar || isDraggingScrollbar) ? 2 : 1)
+        const scrollbarWidth = scrollbarViewSize * ((isHoveringScrollbarY || isDraggingScrollbarY) ? 2 : 1)
         const scrollbarHeight = outerHeight * coeff
         const scrollbarY = (-scrollY / innerHeight) * outerHeight
 
@@ -370,7 +387,7 @@ export function Draw({ paneInfo, view, selection, caret, dims, buffer, colorize
       const coeff = outerWidth / innerWidth
       if (coeff < 1) {
         const scrollbarWidth = outerWidth * coeff
-        const scrollbarHeight = scrollbarViewSize * ((isHoveringScrollbar || isDraggingScrollbar) ? 2 : 1)
+        const scrollbarHeight = scrollbarViewSize * ((isHoveringScrollbarX || isDraggingScrollbarX) ? 2 : 1)
         const scrollbarX = (-scrollX / innerWidth) * outerWidth
         c.fillRect(
           x + scrollbarX,
diff --git a/src/ui/editor/mouse.ts b/src/ui/editor/mouse.ts
index 8b52481..7d8d58c 100644
--- a/src/ui/editor/mouse.ts
+++ b/src/ui/editor/mouse.ts
@@ -59,11 +59,18 @@ export function Mouse({ paneInfo, dims, selection, caret, draw }: {
   $.fx(() => {
     const { x, y } = info.actual
     $()
-    if (x >= dims.info.rect.w - dims.info.scrollbarHandleSize) {
-      paneInfo.isHoveringScrollbar = true
+    if (x >= dims.info.rect.w - dims.info.scrollbarHandleSize && !paneInfo.isDraggingScrollbarX) {
+      paneInfo.isHoveringScrollbarY = true
     }
-    else if (!paneInfo.isDraggingScrollbar) {
-      paneInfo.isHoveringScrollbar = false
+    else if (!paneInfo.isDraggingScrollbarY) {
+      paneInfo.isHoveringScrollbarY = false
+    }
+
+    if (y >= dims.info.rect.h - dims.info.scrollbarHandleSize && !paneInfo.isDraggingScrollbarY) {
+      paneInfo.isHoveringScrollbarX = true
+    }
+    else if (!paneInfo.isDraggingScrollbarX) {
+      paneInfo.isHoveringScrollbarX = false
     }
   })
 
@@ -72,6 +79,24 @@ export function Mouse({ paneInfo, dims, selection, caret, draw }: {
 
     info.isDown = true
 
+    if (info.buttons & MouseButtons.Left) {
+      // handle scrollbarY down
+      if (paneInfo.isHoveringScrollbarY) {
+        paneInfo.isDraggingScrollbarY = true
+        scrollbarPointStart = info.actual.y
+        scrollbarScrollStart = dims.info.scrollY
+        return
+      }
+
+      // handle scrollbarX down
+      if (paneInfo.isHoveringScrollbarX) {
+        paneInfo.isDraggingScrollbarX = true
+        scrollbarPointStart = info.actual.x
+        scrollbarScrollStart = dims.info.scrollX
+        return
+      }
+    }
+
     if (mouse.onDown()) return
 
     paneInfo.isFocus = true
@@ -88,14 +113,6 @@ export function Mouse({ paneInfo, dims, selection, caret, draw }: {
 
     clearTimeout(info.clickTimeout)
 
-    // handle scrollbar down
-    if (paneInfo.isHoveringScrollbar) {
-      paneInfo.isDraggingScrollbar = true
-      scrollbarPointStart = info.actual.y
-      scrollbarScrollStart = dims.info.scrollY
-      return
-    }
-
     info.clickTimeout = setTimeout(() => info.count = 0, CLICK_TIMEOUT)
 
     info.count++
@@ -125,7 +142,8 @@ export function Mouse({ paneInfo, dims, selection, caret, draw }: {
     $.flush()
 
     info.isDown = false
-    paneInfo.isDraggingScrollbar = false
+    paneInfo.isDraggingScrollbarX = false
+    paneInfo.isDraggingScrollbarY = false
 
     if (mouse.onUp()) return
 
@@ -136,7 +154,7 @@ export function Mouse({ paneInfo, dims, selection, caret, draw }: {
   function handleMove() {
     $.flush()
 
-    if (paneInfo.isDraggingScrollbar) {
+    if (paneInfo.isDraggingScrollbarY) {
       const { h: outerHeight } = dims.info.rect
       const { y: innerHeight } = dims.info.innerSize
       const coeff = outerHeight / innerHeight
@@ -144,6 +162,14 @@ export function Mouse({ paneInfo, dims, selection, caret, draw }: {
       return
     }
 
+    if (paneInfo.isDraggingScrollbarX) {
+      const { w: outerWidth } = dims.info.rect
+      const { x: innerWidth } = dims.info.innerSize
+      const coeff = outerWidth / innerWidth
+      dims.info.scrollX = scrollbarScrollStart - ((info.actual.x - scrollbarPointStart) / coeff)
+      return
+    }
+
     if (mouse.onMove()) return
 
     if (info.buttons & MouseButtons.Left) {
diff --git a/src/ui/editor/pane.ts b/src/ui/editor/pane.ts
index 8cc0e0f..f533156 100644
--- a/src/ui/editor/pane.ts
+++ b/src/ui/editor/pane.ts
@@ -6,8 +6,10 @@ import type { View } from '~/src/ui/editor/view.tsx'
 export interface PaneInfo {
   isFocus: boolean
   isHovering: boolean
-  isHoveringScrollbar: boolean
-  isDraggingScrollbar: boolean
+  isHoveringScrollbarX: boolean
+  isHoveringScrollbarY: boolean
+  isDraggingScrollbarX: boolean
+  isDraggingScrollbarY: boolean
 }
 
 export type Pane = ReturnType<typeof Pane>
@@ -29,8 +31,10 @@ export function Pane({ misc, view, code, rect, colorize, tokenize, wordWrapProce
   const info: PaneInfo = $({
     isFocus: false,
     isHovering: false,
-    isHoveringScrollbar: false,
-    isDraggingScrollbar: false,
+    isHoveringScrollbarX: false,
+    isHoveringScrollbarY: false,
+    isDraggingScrollbarX: false,
+    isDraggingScrollbarY: false,
   } satisfies PaneInfo)
 
   const dims = Dims({ rect })

From f202b293863f42de2406026654b5049fc86a58e8 Mon Sep 17 00:00:00 2001
From: stagas <gstagas@gmail.com>
Date: Tue, 15 Oct 2024 03:41:17 +0300
Subject: [PATCH 24/25] feat: hover + drag numbers

---
 src/pages/EditorDemo.tsx            | 279 ++++++++++++++++++++--------
 src/ui/Editor.tsx                   |  12 +-
 src/ui/editor/buffer.ts             |   2 +-
 src/ui/editor/dims.ts               |   5 +-
 src/ui/editor/draw.ts               | 186 ++++++++++---------
 src/ui/editor/input.ts              |  73 ++++++--
 src/ui/editor/kbd.tsx               |  65 +++++--
 src/ui/editor/mouse.ts              |  33 +++-
 src/ui/editor/pane.ts               |  18 +-
 src/ui/editor/widgets/hover-mark.ts |  21 +++
 src/ui/editor/widgets/index.ts      |   3 +
 11 files changed, 486 insertions(+), 211 deletions(-)
 create mode 100644 src/ui/editor/widgets/hover-mark.ts

diff --git a/src/pages/EditorDemo.tsx b/src/pages/EditorDemo.tsx
index 1cec811..7242f2b 100644
--- a/src/pages/EditorDemo.tsx
+++ b/src/pages/EditorDemo.tsx
@@ -1,14 +1,14 @@
-import { Rect, type Pane, type WordWrapProcessor } from 'editor'
+import { pointToLinecol, type Pane, type WordWrapProcessor } from 'editor'
 import { wasm } from 'gfx'
 import { Sigui, type Signal } from 'sigui'
-import { clamp } from 'utils'
+import { assign, clamp } from 'utils'
 import { AnimMode } from '~/src/comp/AnimMode.tsx'
 import { Token, tokenize } from '~/src/lang/tokenize.ts'
 import { screen } from '~/src/screen.ts'
 import { theme } from '~/src/theme.ts'
 import { Editor } from '~/src/ui/Editor.tsx'
 import { makeWaveform, waveform } from '~/src/ui/editor/util/waveform.ts'
-import { WaveCanvasWidget } from '~/src/ui/editor/widgets/index.ts'
+import { HoverMarkWidget, WaveCanvasWidget } from '~/src/ui/editor/widgets/index.ts'
 import { WaveGlWidget } from '~/src/ui/editor/widgets/wave-gl.ts'
 import { WaveSvgWidget } from '~/src/ui/editor/widgets/wave-svg.tsx'
 import { H2 } from '~/src/ui/Heading.tsx'
@@ -19,26 +19,14 @@ export function EditorDemo({ width, height }: {
 }) {
   using $ = Sigui()
 
-  const wordWrapProcessor: WordWrapProcessor = {
-    pre(input: string) {
-      return input.replace(/\[(\w+)([^\]\n]+)\]/g, (_: any, word: string, chunk: string) => {
-        const c = chunk.replace(/\s/g, '\u0000')
-        return `[${word}${c}]`
-      })
-    },
-    post(input: string) {
-      return input.replaceAll('\u0000', ' ')
-    }
-  }
-
   const info = $({
     c: null as null | CanvasRenderingContext2D,
     pr: screen.$.pr,
     width,
     height,
     code: `\
-[dly 16 1 /]
-[sin 300]
+[dly 16 0.555 /]
+[sin 3]
     [tri 111] [tri 222] [tri 333] [tri 444] [tri 555] [tri 666]
     [saw 123]
   [sqr 555] @
@@ -47,56 +35,157 @@ export function EditorDemo({ width, height }: {
 [ar 10 50] *`,
   })
 
-  const colors: Partial<Record<Token.Type, { fill: string, stroke: string }>> = {
-    [Token.Type.Native]: { fill: theme.colors.sky[500], stroke: theme.colors.sky[500] },
-    [Token.Type.String]: { fill: theme.colors.fuchsia[700], stroke: theme.colors.fuchsia[700] },
-    [Token.Type.Keyword]: { fill: theme.colors.orange[500], stroke: theme.colors.orange[500] },
-    [Token.Type.Op]: { fill: theme.colors.sky[500], stroke: theme.colors.sky[500] },
-    [Token.Type.Id]: { fill: theme.colors.yellow[500], stroke: theme.colors.yellow[500] },
-    [Token.Type.Number]: { fill: theme.colors.green[500], stroke: theme.colors.green[500] },
-    [Token.Type.BlockComment]: { fill: theme.colors.neutral[700], stroke: theme.colors.neutral[700] },
-    [Token.Type.Comment]: { fill: theme.colors.neutral[700], stroke: theme.colors.neutral[700] },
-    [Token.Type.Any]: { fill: theme.colors.neutral[500], stroke: theme.colors.neutral[500] },
-  }
-
-  function colorize(token: Token<Token.Type>) {
-    const { fill = '#888', stroke = '#888' } = colors[token.type] ?? {}
-    return { fill, stroke }
-  }
-
   const mouse = { x: 0, y: 0 }
   let number: RegExpMatchArray | undefined
   let value: number
   let digits: number
+  let isDot = false
+  const hoverMark = HoverMarkWidget()
 
-  function onMouseDown(pane: Pane) {
+  function getHoveringNumber(pane: Pane) {
     const word = pane.buffer.wordUnderLinecol(pane.mouse.info.linecol)
-    if (word && parseFloat(word[0]).toString() === word[0]) {
-      number = word
-      value = parseFloat(number[0])
-      digits = number[0].split('.')[1]?.length ?? 0
-      mouse.x = pane.mouse.info.x
-      mouse.y = pane.mouse.info.y
-      return true
+    if (word != null) {
+      digits = word[0].split('.')[1]?.length ?? 0
+      let string = parseFloat(word[0]).toFixed(digits)
+      isDot = word[0][0] === '.'
+      if (isDot && string === '0') string = '0.0'
+      if (string === `${isDot ? '0' : ''}${word[0]}`) {
+        string = parseFloat(word[0]).toFixed(digits)
+        return word
+      }
     }
   }
 
-  function onMouseMove(pane: Pane) {
+  function updateNumberMark(pane: Pane) {
+    const temp = getHoveringNumber(pane)
+    if (temp && !pane.info.isHoveringScrollbarX && !pane.info.isHoveringScrollbarY) {
+      const number = temp
+      pane.view.el.style.cursor = 'default'
+      const linecol = pointToLinecol(pane.buffer.indexToVisualPoint(number.index))
+      assign(
+        hoverMark.widget.bounds,
+        linecol,
+        {
+          right: pointToLinecol(pane.buffer.indexToVisualPoint(number.index + number[0].length)).col,
+          length: number[0].length,
+          bottom: linecol.line,
+        }
+      )
+      pane.draw.widgets.mark.add(hoverMark.widget)
+      pane.draw.info.triggerUpdateTokenDrawInfo++
+      pane.view.anim.info.epoch++
+    }
+    else {
+      pane.draw.widgets.mark.delete(hoverMark.widget)
+      pane.view.anim.info.epoch++
+      pane.view.el.style.cursor = pane.view.info.cursor
+    }
+  }
+
+  function handleNumberDrag(dx: number, dy: number) {
+    if (number?.index == null) return
+
+    if (Math.abs(dx) + Math.abs(dy) < .5) return
+
+    let s: string
+
+    let dv =
+      Math.max(.001, Math.abs(dx) ** 1.4) * Math.sign(dx) +
+      Math.max(.001, Math.abs(dy) ** 1.4) * Math.sign(dy)
+
+    if (dv === 0) dv = 0.001 * (dy > dx ? Math.sign(dy) : Math.sign(dx))
+    if (dv === 0) dv = 0.001
+    if (dv > 0) dv = Math.max(0.001, dv)
+    if (dv < 0) dv = Math.min(-0.001, dv)
+
+    let min: number
+    let max: number
+    let mul = 0.0017
+    if (value >= 100 && value < 1000) {
+      min = 100
+      max = parseFloat('999.' + (digits ? '9'.repeat(digits) : '0'))
+    }
+    else if (value >= 10 && value < 100) {
+      min = 10
+      max = parseFloat('99.' + (digits ? '9'.repeat(digits) : '0'))
+    }
+    else if (value >= 1 && value < 10) {
+      min = 1
+      max = parseFloat('9.' + (digits ? '9'.repeat(digits) : '0'))
+      if (!digits) mul = 0.005
+    }
+    else if (value >= 0 && value < 1) {
+      min = 0
+      max = parseFloat('0.' + (digits ? '9'.repeat(digits) : '0'))
+      if (digits === 1) mul = 0.005
+    }
+    else {
+      return
+    }
+
+    const scale = max - min
+    let normal = (value - min) / scale
+    normal = clamp(0, 1, normal - dv * mul)
+    value = normal * scale + min
+    s = value.toFixed(digits)
+    if (isDot) s = s.slice(1)
+    const { code } = pane.buffer
+    pane.buffer.code = `${code.slice(0, number.index)}${s}${code.slice(number.index + s.length)}`
+  }
+
+  function onKeyDown(pane: Pane) {
+    queueMicrotask(() => {
+      updateNumberMark(pane)
+    })
+  }
+
+  function onKeyUp(pane: Pane) {
+    updateNumberMark(pane)
+    if (!pane.kbd.info.ctrl) {
+      number = void 0
+    }
+  }
+
+  function onMouseWheel(pane: Pane) {
+    let ret = false
+
+    if (pane.mouse.info.ctrl || pane.kbd.info.ctrl) {
+      updateNumberMark(pane)
+      if (number?.index != null || onMouseDown(pane)) ret = true
+      if (ret) {
+        handleNumberDrag(
+          -pane.mouse.info.wheel.x * .06,
+          -pane.mouse.info.wheel.y * .06
+        )
+      }
+    }
+    else {
+      number = void 0
+    }
+
+    return ret
+  }
+
+  function onMouseDown(pane: Pane) {
+    number = getHoveringNumber(pane)
     if (number?.index == null) return
+    value = parseFloat(number[0])
+    mouse.x = pane.mouse.info.x
+    mouse.y = pane.mouse.info.y
+    return true
+  }
+
+  function onMouseMove(pane: Pane) {
+    if (number?.index == null) {
+      updateNumberMark(pane)
+      return
+    }
     const p = pane.mouse.info
     const dx = mouse.x - p.x
     const dy = p.y - mouse.y
     mouse.x = p.x
     mouse.y = p.y
-    if (value >= 100 && value < 1000) {
-      value -=
-        (Math.abs(dx) ** 1.08) * Math.sign(dx) +
-        (Math.abs(dy) ** 1.08) * Math.sign(dy)
-      const s = clamp(100, parseFloat('999.' + (digits ? '9'.repeat(digits) : '0')), value).toFixed(digits)
-      value = parseFloat(s)
-      const { code } = pane.buffer
-      pane.buffer.code = `${code.slice(0, number.index)}${s}${code.slice(number.index + s.length)}`
-    }
+    handleNumberDrag(dx, dy)
     return true
   }
 
@@ -107,6 +196,44 @@ export function EditorDemo({ width, height }: {
     }
   }
 
+  const inputHandlers = {
+    onKeyDown,
+    onKeyUp,
+    onMouseWheel,
+    onMouseDown,
+    onMouseUp,
+    onMouseMove,
+  }
+
+  const colors: Partial<Record<Token.Type, { fill: string, stroke: string }>> = {
+    [Token.Type.Native]: { fill: theme.colors.sky[500], stroke: theme.colors.sky[500] },
+    [Token.Type.String]: { fill: theme.colors.fuchsia[700], stroke: theme.colors.fuchsia[700] },
+    [Token.Type.Keyword]: { fill: theme.colors.orange[500], stroke: theme.colors.orange[500] },
+    [Token.Type.Op]: { fill: theme.colors.sky[500], stroke: theme.colors.sky[500] },
+    [Token.Type.Id]: { fill: theme.colors.yellow[500], stroke: theme.colors.yellow[500] },
+    [Token.Type.Number]: { fill: theme.colors.green[500], stroke: theme.colors.green[500] },
+    [Token.Type.BlockComment]: { fill: theme.colors.neutral[700], stroke: theme.colors.neutral[700] },
+    [Token.Type.Comment]: { fill: theme.colors.neutral[700], stroke: theme.colors.neutral[700] },
+    [Token.Type.Any]: { fill: theme.colors.neutral[500], stroke: theme.colors.neutral[500] },
+  }
+
+  function colorize(token: Token<Token.Type>) {
+    const { fill = '#888', stroke = '#888' } = colors[token.type] ?? {}
+    return { fill, stroke }
+  }
+
+  const wordWrapProcessor: WordWrapProcessor = {
+    pre(input: string) {
+      return input.replace(/\[(\w+)([^\]\n]+)\]/g, (_: any, word: string, chunk: string) => {
+        const c = chunk.replace(/\s/g, '\u0000')
+        return `[${word}${c}]`
+      })
+    },
+    post(input: string) {
+      return input.replaceAll('\u0000', ' ')
+    }
+  }
+
   const editor = Editor({
     width: info.$.width,
     height: info.$.height,
@@ -114,28 +241,26 @@ export function EditorDemo({ width, height }: {
     colorize,
     tokenize,
     wordWrapProcessor,
-    onMouseDown,
-    onMouseUp,
-    onMouseMove,
+    inputHandlers,
   })
 
-  const pane2Info = $({
-    code: `[hello]
-[world]
-[world]
-[world]
-[world]
-[world]
-[world]
-[world]
-[world]
-`
-  })
-  const pane2 = editor.createPane({
-    rect: $(Rect(), { x: 0, y: 240, w: 200, h: 200 }),
-    code: pane2Info.$.code,
-  })
-  editor.addPane(pane2)
+  //   const pane2Info = $({
+  //     code: `[hello]
+  // [world]
+  // [world]
+  // [world]
+  // [world]
+  // [world]
+  // [world]
+  // [world]
+  // [world]
+  // `
+  //   })
+  //   const pane2 = editor.createPane({
+  //     rect: $(Rect(), { x: 0, y: 240, w: 200, h: 200 }),
+  //     code: pane2Info.$.code,
+  //   })
+  //   editor.addPane(pane2)
 
   // ///////////////////
   const floats = Object.assign(
@@ -210,11 +335,11 @@ export function EditorDemo({ width, height }: {
   })
   pane.draw.widgets.update()
 
-  const d2 = WaveGlWidget(pane2.draw.shapes)
-  d2.info.floats = floats
-  Object.assign(d2.widget.bounds, { line: 0, col: 0, right: 5, bottom: 0 })
-  pane2.draw.widgets.deco.add(d2.widget)
-  pane2.draw.widgets.update()
+  // const d2 = WaveGlWidget(pane2.draw.shapes)
+  // d2.info.floats = floats
+  // Object.assign(d2.widget.bounds, { line: 0, col: 0, right: 5, bottom: 0 })
+  // pane2.draw.widgets.deco.add(d2.widget)
+  // pane2.draw.widgets.update()
 
   let t = 101
   floats.set(makeWaveform(2048, t += 1, 1 + Math.sin(t * 0.025) * 59))
diff --git a/src/ui/Editor.tsx b/src/ui/Editor.tsx
index 114dfa5..966499e 100644
--- a/src/ui/Editor.tsx
+++ b/src/ui/Editor.tsx
@@ -1,17 +1,15 @@
-import { Input, Misc, Pane, Rect, View, type InputMouse, type Linecol, type WordWrapProcessor } from 'editor'
+import { Input, Misc, Pane, Rect, View, type InputHandlers, type InputMouse, type Linecol, type WordWrapProcessor } from 'editor'
 import { Sigui, type $, type Signal } from 'sigui'
 import type { Source, Token } from '~/src/lang/tokenize.ts'
 
-export function Editor({ code, width, height, colorize, tokenize, wordWrapProcessor, onMouseDown, onMouseUp, onMouseMove, }: {
+export function Editor({ code, width, height, colorize, tokenize, wordWrapProcessor, inputHandlers }: {
   code: Signal<string>
   width: Signal<number>
   height: Signal<number>
   colorize: (token: Token) => { fill: string, stroke: string }
   tokenize: (source: Source) => Generator<Token, void, unknown>
   wordWrapProcessor: WordWrapProcessor
-  onMouseDown: (pane: Pane) => boolean | void
-  onMouseUp: (pane: Pane) => boolean | void
-  onMouseMove: (pane: Pane) => boolean | void
+  inputHandlers: InputHandlers
 }) {
   using $ = Sigui()
 
@@ -47,9 +45,7 @@ export function Editor({ code, width, height, colorize, tokenize, wordWrapProces
       colorize,
       tokenize,
       wordWrapProcessor,
-      onMouseDown,
-      onMouseUp,
-      onMouseMove,
+      inputHandlers,
     })
   }
 
diff --git a/src/ui/editor/buffer.ts b/src/ui/editor/buffer.ts
index 1241ae9..09dc3e0 100644
--- a/src/ui/editor/buffer.ts
+++ b/src/ui/editor/buffer.ts
@@ -30,7 +30,7 @@ export function Buffer({ dims, code, tokenize, wordWrapProcessor = { pre: identi
 
   const info = $({
     maxColumns: dims.info.$.pageWidth,
-    wordWrapEnabled: false,
+    wordWrapEnabled: true,
     code,
     lines: [] as string[],
     get length() {
diff --git a/src/ui/editor/dims.ts b/src/ui/editor/dims.ts
index 87679bb..0ade257 100644
--- a/src/ui/editor/dims.ts
+++ b/src/ui/editor/dims.ts
@@ -1,5 +1,6 @@
 import { Point, type Rect } from 'editor'
 import { Sigui, type $ } from 'sigui'
+import { isMobile } from 'utils'
 
 export type Dims = ReturnType<typeof Dims>
 
@@ -25,10 +26,8 @@ export function Dims({ rect }: {
 
     scrollX: 0,
     scrollY: 0,
-
-    scrollbarHandleSize: 20,
+    scrollbarHandleSize: isMobile() ? 30 : 10,
     scrollbarViewSize: 5,
-
   })
 
   return { info }
diff --git a/src/ui/editor/draw.ts b/src/ui/editor/draw.ts
index b5980ba..ecd8769 100644
--- a/src/ui/editor/draw.ts
+++ b/src/ui/editor/draw.ts
@@ -32,7 +32,66 @@ export function Draw({ paneInfo, view, selection, caret, dims, buffer, colorize
     c: null as null | CanvasRenderingContext2D,
     pr: screen.$.pr,
     rect,
+
+    triggerUpdateTokenDrawInfo: 0,
+
+    // scrollbars
     showScrollbars: false,
+    scrollbarColor: '#aaa',
+    scrollbarY: $({
+      get coeff() {
+        return info.rect.h / dims.info.innerSize.y
+      },
+      get isVisible() {
+        return this.coeff < 1
+      },
+      get size() {
+        return dims.info.scrollbarViewSize * ((paneInfo.isHoveringScrollbarY || paneInfo.isDraggingScrollbarY) ? 2 : 1)
+      },
+      get length() {
+        return info.rect.h * this.coeff
+      },
+      get offset() {
+        return info.rect.y + (-dims.info.scrollY / dims.info.innerSize.y) * info.rect.h
+      },
+      get pos() {
+        return info.rect.x + info.rect.w - this.size
+      },
+      get color() {
+        return info.scrollbarColor + (
+          paneInfo.isDraggingScrollbarY ? 'f'
+            : paneInfo.isHoveringScrollbarY ? '7'
+              : '5'
+        )
+      }
+    }),
+    scrollbarX: $({
+      get coeff() {
+        return info.rect.w / dims.info.innerSize.x
+      },
+      get isVisible() {
+        return this.coeff < 1
+      },
+      get size() {
+        return dims.info.scrollbarViewSize * ((paneInfo.isHoveringScrollbarX || paneInfo.isDraggingScrollbarX) ? 2 : 1)
+      },
+      get length() {
+        return info.rect.w * this.coeff
+      },
+      get offset() {
+        return info.rect.x + (-dims.info.scrollX / dims.info.innerSize.x) * info.rect.w
+      },
+      get pos() {
+        return info.rect.y + info.rect.h - this.size
+      },
+      get color() {
+        return info.scrollbarColor + (
+          paneInfo.isDraggingScrollbarX ? 'f'
+            : paneInfo.isHoveringScrollbarX ? '7'
+              : '5'
+        )
+      }
+    })
   })
 
   const widgets = Widgets({ c })
@@ -109,6 +168,7 @@ export function Draw({ paneInfo, view, selection, caret, dims, buffer, colorize
 
   // update token draw info
   $.fx(() => {
+    const { triggerUpdateTokenDrawInfo } = info
     const { tokens, linesVisual } = buffer.info
     const { charWidth, lineHeight } = dims.info
 
@@ -179,14 +239,14 @@ export function Draw({ paneInfo, view, selection, caret, dims, buffer, colorize
   })
 
   // wait for fonts to load
-  document.fonts.ready.then(() => {
+  document.fonts.ready.then($.fn(() => {
     info.c = c
 
     // measure char width and height
     const metrics = c.measureText('M')
     dims.info.charWidth = metrics.width
     dims.info.charHeight = Math.ceil(metrics.fontBoundingBoxDescent - metrics.fontBoundingBoxAscent)
-  })
+  }))
 
   // update inner size
   $.fx(() => {
@@ -194,13 +254,31 @@ export function Draw({ paneInfo, view, selection, caret, dims, buffer, colorize
     const { linesVisual } = buffer.info
     const { charWidth, lineHeight, innerSize } = dims.info
     $()
-    innerSize.x = 0
-    innerSize.y = 0
+
+    let x = 0
+
     for (const line of linesVisual) {
-      innerSize.x = Math.max(innerSize.x, line.text.length * dims.info.charWidth + textPadding * 2)
+      x = Math.max(
+        x,
+        line.text.length * charWidth +
+        textPadding * 2
+      )
     }
-    innerSize.x = Math.max(w, innerSize.x)
-    innerSize.y = Math.max(h, viewPointFromLinecol({ line: linesVisual.length, col: 0 }).y + textPadding * 2)
+
+    innerSize.x = Math.max(
+      w,
+      x +
+      (info.scrollbarY.isVisible ? info.scrollbarY.size * 3 : 0)
+    )
+
+    innerSize.y = Math.max(
+      h,
+      viewPointFromLinecol({
+        line: linesVisual.length, col: 0
+      }).y +
+      textPadding * 2 +
+      (info.scrollbarX.isVisible ? info.scrollbarX.size * 2 : 0)
+    )
   })
 
   // update scroll
@@ -222,23 +300,6 @@ export function Draw({ paneInfo, view, selection, caret, dims, buffer, colorize
     }
   })
 
-  // update cursor
-  $.fx(() => {
-    const {
-      isHovering,
-      isHoveringScrollbarX,
-      isHoveringScrollbarY,
-      isDraggingScrollbarX,
-      isDraggingScrollbarY,
-    } = paneInfo
-    $()
-    view.info.cursor = !isHovering ||
-      (isHoveringScrollbarX || isDraggingScrollbarX) ||
-      (isHoveringScrollbarY || isDraggingScrollbarY)
-      ? 'default'
-      : 'text'
-  })
-
   // keep caret in view by adjusting scroll when caret is moving
   $.fx(() => {
     const { x, y } = caretViewPoint
@@ -261,7 +322,7 @@ export function Draw({ paneInfo, view, selection, caret, dims, buffer, colorize
     const { w, h } = info.rect
     const { charWidth, lineHeight } = dims.info
     $()
-    dims.info.pageWidth = Math.floor((w - textPadding * 2) / charWidth)
+    dims.info.pageWidth = Math.floor((w - textPadding * 2 - charWidth * 1.5) / charWidth)
     dims.info.pageHeight = Math.floor((h - textPadding * 2) / lineHeight)
   })
 
@@ -290,13 +351,13 @@ export function Draw({ paneInfo, view, selection, caret, dims, buffer, colorize
     c.rect(x, y, w, h)
     c.clip()
     c.clearRect(x, y, w + 1, h + 1)
-    // temp
+
+    // TODO: temp remove this
     c.translate(x, y)
     c.fillStyle = '#' + color
     c.fillRect(0, 0, w, h)
 
     c.translate(dims.info.scrollX, dims.info.scrollY)
-
   }
 
   function drawActiveLine() {
@@ -328,74 +389,29 @@ export function Draw({ paneInfo, view, selection, caret, dims, buffer, colorize
 
   function drawCaret() {
     if (!caret.info.isVisible) return
-    const { caretWidth, charHeight } = dims.info
+    const { caretWidth: w, charHeight: h } = dims.info
+    const { x, y } = caretViewPoint
     c.fillStyle = '#fff'
-    c.fillRect(
-      caretViewPoint.x,
-      caretViewPoint.y + .5,
-      caretWidth,
-      charHeight
-    )
+    c.fillRect(x, y + .5, w, h)
   }
 
   function drawScrollbars() {
     if (!info.showScrollbars) return
 
-    // outer rectangle
-    const { x, y, w: outerWidth, h: outerHeight } = info.rect
-
-    // scroll amount
-    const { scrollX, scrollY, scrollbarViewSize, innerSize } = dims.info
-
-    // inner size
-    const { x: innerWidth, y: innerHeight } = innerSize
-
-    const {
-      isHoveringScrollbarX, isDraggingScrollbarX,
-      isHoveringScrollbarY, isDraggingScrollbarY,
-    } = paneInfo
-
-    c.fillStyle = '#aaa' + (
-      isDraggingScrollbarX ||
-        isDraggingScrollbarY
-        ? 'f'
-        : isHoveringScrollbarX ||
-          isHoveringScrollbarY
-          ? '7'
-          : '5'
-    )
+    const { scrollbarX, scrollbarY } = info
 
     // draw vertical scrollbar
-    {
-      const coeff = outerHeight / innerHeight
-      if (coeff < 1) {
-        const scrollbarWidth = scrollbarViewSize * ((isHoveringScrollbarY || isDraggingScrollbarY) ? 2 : 1)
-        const scrollbarHeight = outerHeight * coeff
-        const scrollbarY = (-scrollY / innerHeight) * outerHeight
-
-        c.fillRect(
-          x + outerWidth - scrollbarWidth,
-          y + scrollbarY,
-          scrollbarWidth,
-          scrollbarHeight
-        )
-      }
+    if (scrollbarY.isVisible) {
+      c.fillStyle = info.scrollbarY.color
+      const { pos: x, offset: y, size: w, length: h } = scrollbarY
+      c.fillRect(x, y, w, h)
     }
 
     // draw horizontal scrollbar
-    {
-      const coeff = outerWidth / innerWidth
-      if (coeff < 1) {
-        const scrollbarWidth = outerWidth * coeff
-        const scrollbarHeight = scrollbarViewSize * ((isHoveringScrollbarX || isDraggingScrollbarX) ? 2 : 1)
-        const scrollbarX = (-scrollX / innerWidth) * outerWidth
-        c.fillRect(
-          x + scrollbarX,
-          y + outerHeight - scrollbarHeight,
-          scrollbarWidth,
-          scrollbarHeight
-        )
-      }
+    if (scrollbarX.isVisible) {
+      c.fillStyle = info.scrollbarX.color
+      const { offset: x, pos: y, length: w, size: h } = scrollbarX
+      c.fillRect(x, y, w, h)
     }
   }
 
@@ -404,8 +420,8 @@ export function Draw({ paneInfo, view, selection, caret, dims, buffer, colorize
     drawClear()
     drawActiveLine()
     drawSelection()
-    drawCode()
     widgets.draw()
+    drawCode()
     drawCaret()
     c.restore()
     drawScrollbars()
diff --git a/src/ui/editor/input.ts b/src/ui/editor/input.ts
index 0be3079..0ffb7f5 100644
--- a/src/ui/editor/input.ts
+++ b/src/ui/editor/input.ts
@@ -5,6 +5,16 @@ import { assign, dom, isMobile, MouseButtons } from 'utils'
 export interface InputMouse extends Point {
   isDown: boolean
   buttons: number
+  ctrl: boolean
+}
+
+export interface InputHandlers {
+  onKeyDown: (pane: Pane) => boolean | void
+  onKeyUp: (pane: Pane) => boolean | void
+  onMouseWheel: (pane: Pane) => boolean | void
+  onMouseDown: (pane: Pane) => boolean | void
+  onMouseUp: (pane: Pane) => boolean | void
+  onMouseMove: (pane: Pane) => boolean | void
 }
 
 export type Input = ReturnType<typeof Input>
@@ -26,7 +36,7 @@ export function Input({ view, pane, panes }: {
 
   // read keyboard input
   $.fx(() => [
-    // mobile
+    // mobile keyboard
     dom.on(textarea, 'input', $.fn((ev: Event) => {
       const inputEvent = ev as InputEvent
       if (inputEvent.data) {
@@ -35,8 +45,14 @@ export function Input({ view, pane, panes }: {
       }
     })),
 
-    // desktop
-    dom.on(textarea, 'keydown', ev => info.pane.kbd.handleKey(ev)),
+    // desktop keyboard
+    dom.on(textarea, 'keydown', $.fn((ev: KeyboardEvent) => {
+      info.pane.kbd.handleKeyDown(ev)
+    })),
+
+    dom.on(textarea, 'keyup', $.fn((ev: KeyboardEvent) => {
+      info.pane.kbd.handleKeyUp(ev)
+    })),
 
     // clipboard paste
     dom.on(textarea, 'paste', $.fn((ev: ClipboardEvent) => {
@@ -76,9 +92,10 @@ export function Input({ view, pane, panes }: {
   const inputMouse: InputMouse = $({
     isDown: false,
     buttons: 0,
+    ctrl: false,
     x: 0,
     y: 0,
-  })
+  } satisfies InputMouse)
 
   // update hovering info
   $.fx(() => {
@@ -99,8 +116,32 @@ export function Input({ view, pane, panes }: {
     })
   )
 
+  // update cursor
+  $.fx(() => {
+    const { hoveringPane: pane } = info
+    if (!pane) {
+      $()
+      view.info.cursor = 'default'
+      return
+    }
+    const {
+      isHovering,
+      isHoveringScrollbarX,
+      isHoveringScrollbarY,
+      isDraggingScrollbarX,
+      isDraggingScrollbarY,
+    } = pane.info
+    $()
+    view.info.cursor = (!isHovering && !info.hoveringPane) ||
+      (isHoveringScrollbarX || isDraggingScrollbarX) ||
+      (isHoveringScrollbarY || isDraggingScrollbarY)
+      ? 'default'
+      : 'text'
+  })
+
   function updatePaneMouse(pane: Pane) {
     pane.mouse.info.buttons = inputMouse.buttons
+    pane.mouse.info.ctrl = inputMouse.ctrl
     assign(pane.mouse.info.actual, {
       x: inputMouse.x - pane.dims.info.rect.x,
       y: inputMouse.y - pane.dims.info.rect.y,
@@ -111,7 +152,9 @@ export function Input({ view, pane, panes }: {
     })
   }
 
-  function updateInputMouseFromEvent(ev: PointerEvent | TouchEvent) {
+  function updateInputMouseFromEvent(ev: WheelEvent | PointerEvent | TouchEvent) {
+    inputMouse.ctrl = ev.ctrlKey
+
     if (ev instanceof TouchEvent) {
       const touch = ev.touches[0] ?? { pageX: 0, pageY: 0 }
       inputMouse.x = touch.pageX
@@ -155,16 +198,18 @@ export function Input({ view, pane, panes }: {
     dom.on(el, 'contextmenu', dom.prevent.stop),
 
     dom.on(el, 'wheel', $.fn((ev: WheelEvent) => {
-      ev.preventDefault()
-      const { deltaX, deltaY } = ev
+      updateInputMouseFromEvent(ev)
+      updatePaneMouse(info.pane)
+
       const { hoveringPane: pane } = info
-      if (!pane) return
-      if (Math.abs(deltaY) > Math.abs(deltaX)) {
-        pane.dims.info.scrollY -= deltaY * .35
-      }
-      else {
-        pane.dims.info.scrollX -= deltaX * .35
+      if (!pane) {
+        return
       }
+
+      ev.preventDefault()
+      pane.mouse.info.wheel.x = ev.deltaX
+      pane.mouse.info.wheel.y = ev.deltaY
+      pane.mouse.handleWheel()
     }), { passive: false }),
 
     dom.on(el, isMobile() ? 'touchstart' : 'pointerdown', $.fn((ev: PointerEvent | TouchEvent) => {
@@ -189,12 +234,14 @@ export function Input({ view, pane, panes }: {
       ev.preventDefault()
       updateInputMouseFromEvent(ev)
       inputMouse.isDown = false
+      info.pane.mouse.info.ctrl = inputMouse.ctrl
       info.pane.mouse.handleUp()
     })),
 
     dom.on(window, isMobile() ? 'touchmove' : 'pointermove', $.fn((ev: PointerEvent | TouchEvent) => {
       ev.preventDefault()
       updateInputMouseFromEvent(ev)
+      info.pane.mouse.info.ctrl = inputMouse.ctrl
       info.pane.mouse.handleMove()
     })),
   ])
diff --git a/src/ui/editor/kbd.tsx b/src/ui/editor/kbd.tsx
index 95d1c7f..97fae09 100644
--- a/src/ui/editor/kbd.tsx
+++ b/src/ui/editor/kbd.tsx
@@ -2,6 +2,8 @@ import { beginOfLine, Buffer, escapeRegExp, findMatchingBrackets, linecolToPoint
 import { Sigui } from 'sigui'
 import { assign } from 'utils'
 
+const IGNORED_KEYS = 'cvxjrtn=+-'
+
 export function Kbd({ paneInfo, misc, dims, selection, buffer, caret, history }: {
   paneInfo: PaneInfo
   misc: Misc
@@ -13,10 +15,15 @@ export function Kbd({ paneInfo, misc, dims, selection, buffer, caret, history }:
 }) {
   using $ = Sigui()
 
-  const ignoredKeys = 'cvxjrtn=+-'
-
   const { withHistory, withHistoryDebounced, undo, redo } = history
 
+  const info = $({
+    key: '',
+    ctrl: false,
+    alt: false,
+    shift: false,
+  })
+
   function tabIndent(shift: boolean) {
     let index: number = Infinity
     let lns: string[]
@@ -268,20 +275,28 @@ export function Kbd({ paneInfo, misc, dims, selection, buffer, caret, history }:
     assign(end, pointToLinecol(buffer.logicalPointToVisualPoint(p2)))
   }
 
-  const handleKey = $.fn((ev: KeyboardEvent): void => {
+  function updateInfoFromEvent(ev: KeyboardEvent) {
+    let key = ev.key
+    if (key === 'Enter') key = '\n'
+    info.key = key
+    info.ctrl = ev.ctrlKey || ev.metaKey
+    info.alt = ev.altKey
+    info.shift = ev.shiftKey
+  }
+
+  function handleKeyDown(ev: KeyboardEvent): void {
     if (!paneInfo.isFocus) return
-    if (ev.ctrlKey && ignoredKeys.includes(ev.key.toLowerCase())) return
+    if (ev.ctrlKey && IGNORED_KEYS.includes(ev.key.toLowerCase())) return
 
     ev.preventDefault()
+    updateInfoFromEvent(ev)
 
-    caret.info.blinkReset++
+    let { key } = info
+    const { ctrl, alt, shift } = info
 
-    let { key } = ev
-    const ctrl = ev.ctrlKey || ev.metaKey
-    const alt = ev.altKey
-    let shift = ev.shiftKey
+    caret.info.blinkReset++
 
-    if (key === 'Enter') key = '\n'
+    if (kbd.onKeyDown()) return
 
     function withSelection(fn: () => void, force = false) {
       if (!shift && selection.isActive) selection.reset()
@@ -351,7 +366,7 @@ export function Kbd({ paneInfo, misc, dims, selection, buffer, caret, history }:
       if (selection.isActive) {
         return withHistory(() => {
           selection.deleteText()
-          handleKey(ev)
+          handleKeyDown(ev)
         })
       }
 
@@ -386,6 +401,7 @@ export function Kbd({ paneInfo, misc, dims, selection, buffer, caret, history }:
           withIntent(caret.doBackspace)
         })
       }
+
       // delete
       //   with selection: delete selection
       //   with no selection: delete character after caret
@@ -408,14 +424,17 @@ export function Kbd({ paneInfo, misc, dims, selection, buffer, caret, history }:
           caret.doDelete()
         })
       }
+
       // home
       else if (key === 'Home') {
         withSelection(() => withIntent(caret.moveHome))
       }
+
       // end
       else if (key === 'End') {
         withSelection(() => withIntent(caret.moveEnd))
       }
+
       // arrow up/down
       else if (
         key === 'ArrowUp' ||
@@ -438,6 +457,7 @@ export function Kbd({ paneInfo, misc, dims, selection, buffer, caret, history }:
           caret.moveUpDown(dy)
         )
       }
+
       // arrow left
       else if (key === 'ArrowLeft') {
         withSelection(() =>
@@ -447,6 +467,7 @@ export function Kbd({ paneInfo, misc, dims, selection, buffer, caret, history }:
           })
         )
       }
+
       // arrow right
       else if (key === 'ArrowRight') {
         withSelection(() =>
@@ -457,7 +478,25 @@ export function Kbd({ paneInfo, misc, dims, selection, buffer, caret, history }:
         )
       }
     }
-  })
+  }
+
+  function handleKeyUp(ev: KeyboardEvent): void {
+    ev.preventDefault()
+    updateInfoFromEvent(ev)
+
+    if (kbd.onKeyUp()) return
+  }
+
+  function onKeyDown(): boolean | void { }
+  function onKeyUp(): boolean | void { }
+
+  const kbd = {
+    info,
+    handleKeyDown,
+    handleKeyUp,
+    onKeyDown,
+    onKeyUp,
+  }
 
-  return { handleKey }
+  return kbd
 }
diff --git a/src/ui/editor/mouse.ts b/src/ui/editor/mouse.ts
index 7d8d58c..229ebc3 100644
--- a/src/ui/editor/mouse.ts
+++ b/src/ui/editor/mouse.ts
@@ -22,6 +22,8 @@ export function Mouse({ paneInfo, dims, selection, caret, draw }: {
     y: 0,
     actual: $(Point()),
     linecol: $(Linecol()),
+    wheel: $(Point()),
+    ctrl: false,
   })
 
   $.fx(() => {
@@ -57,16 +59,23 @@ export function Mouse({ paneInfo, dims, selection, caret, draw }: {
   let scrollbarScrollStart = 0
 
   $.fx(() => {
-    const { x, y } = info.actual
+    const { isDown, actual: { x, y } } = info
+    if (isDown) return
     $()
-    if (x >= dims.info.rect.w - dims.info.scrollbarHandleSize && !paneInfo.isDraggingScrollbarX) {
+    if (x >= dims.info.rect.w - dims.info.scrollbarHandleSize &&
+      !paneInfo.isDraggingScrollbarX &&
+      draw.info.scrollbarY.isVisible
+    ) {
       paneInfo.isHoveringScrollbarY = true
     }
     else if (!paneInfo.isDraggingScrollbarY) {
       paneInfo.isHoveringScrollbarY = false
     }
 
-    if (y >= dims.info.rect.h - dims.info.scrollbarHandleSize && !paneInfo.isDraggingScrollbarY) {
+    if (y >= dims.info.rect.h - dims.info.scrollbarHandleSize &&
+      !paneInfo.isDraggingScrollbarY &&
+      draw.info.scrollbarX.isVisible
+    ) {
       paneInfo.isHoveringScrollbarX = true
     }
     else if (!paneInfo.isDraggingScrollbarX) {
@@ -74,6 +83,21 @@ export function Mouse({ paneInfo, dims, selection, caret, draw }: {
     }
   })
 
+  function handleWheel() {
+    $.flush()
+
+    if (mouse.onWheel()) return
+
+    const { x, y } = info.wheel
+
+    if (Math.abs(y) > Math.abs(x)) {
+      dims.info.scrollY -= y * .35
+    }
+    else {
+      dims.info.scrollX -= x * .35
+    }
+  }
+
   function handleDown() {
     $.flush()
 
@@ -180,15 +204,18 @@ export function Mouse({ paneInfo, dims, selection, caret, draw }: {
   }
 
   // allow mouse down override by the consumer
+  function onWheel(): boolean | void { }
   function onDown(): boolean | void { }
   function onUp(): boolean | void { }
   function onMove(): boolean | void { }
 
   const mouse = {
     info,
+    handleWheel,
     handleDown,
     handleUp,
     handleMove,
+    onWheel,
     onDown,
     onUp,
     onMove,
diff --git a/src/ui/editor/pane.ts b/src/ui/editor/pane.ts
index f533156..146473d 100644
--- a/src/ui/editor/pane.ts
+++ b/src/ui/editor/pane.ts
@@ -1,4 +1,4 @@
-import { Buffer, Caret, Dims, Draw, History, Kbd, Misc, Mouse, Selection, type Rect, type WordWrapProcessor } from 'editor'
+import { Buffer, Caret, Dims, Draw, History, Kbd, Misc, Mouse, Selection, type InputHandlers, type Rect, type WordWrapProcessor } from 'editor'
 import { Sigui, type $, type Signal } from 'sigui'
 import type { Source, Token } from '~/src/lang/tokenize.ts'
 import type { View } from '~/src/ui/editor/view.tsx'
@@ -14,7 +14,7 @@ export interface PaneInfo {
 
 export type Pane = ReturnType<typeof Pane>
 
-export function Pane({ misc, view, code, rect, colorize, tokenize, wordWrapProcessor, onMouseDown, onMouseUp, onMouseMove, }: {
+export function Pane({ misc, view, code, rect, colorize, tokenize, wordWrapProcessor, inputHandlers }: {
   misc: Misc
   view: View
   code: Signal<string>
@@ -22,9 +22,7 @@ export function Pane({ misc, view, code, rect, colorize, tokenize, wordWrapProce
   colorize: (token: Token) => { fill: string, stroke: string }
   tokenize: (source: Source) => Generator<Token, void, unknown>
   wordWrapProcessor: WordWrapProcessor
-  onMouseDown: (pane: Pane) => boolean | void
-  onMouseUp: (pane: Pane) => boolean | void
-  onMouseMove: (pane: Pane) => boolean | void
+  inputHandlers: InputHandlers
 }) {
   using $ = Sigui()
 
@@ -47,6 +45,7 @@ export function Pane({ misc, view, code, rect, colorize, tokenize, wordWrapProce
   const mouse = Mouse({ paneInfo: info, dims, selection, caret, draw })
   const pane = {
     info,
+    view,
     dims,
     buffer,
     caret,
@@ -56,8 +55,11 @@ export function Pane({ misc, view, code, rect, colorize, tokenize, wordWrapProce
     draw,
     mouse,
   }
-  mouse.onDown = () => onMouseDown(pane)
-  mouse.onUp = () => onMouseUp(pane)
-  mouse.onMove = () => onMouseMove(pane)
+  kbd.onKeyDown = () => inputHandlers.onKeyDown(pane)
+  kbd.onKeyUp = () => inputHandlers.onKeyUp(pane)
+  mouse.onWheel = () => inputHandlers.onMouseWheel(pane)
+  mouse.onDown = () => inputHandlers.onMouseDown(pane)
+  mouse.onUp = () => inputHandlers.onMouseUp(pane)
+  mouse.onMove = () => inputHandlers.onMouseMove(pane)
   return pane
 }
diff --git a/src/ui/editor/widgets/hover-mark.ts b/src/ui/editor/widgets/hover-mark.ts
new file mode 100644
index 0000000..8d697ed
--- /dev/null
+++ b/src/ui/editor/widgets/hover-mark.ts
@@ -0,0 +1,21 @@
+import { Widget } from 'editor'
+import { Sigui } from 'sigui'
+
+export function HoverMarkWidget() {
+  using $ = Sigui()
+
+  const info = $({
+    color: '#fff3',
+  })
+
+  const widget = Widget()
+
+  widget.draw = c => {
+    const { rect } = widget
+    const { x, y, w, h } = rect
+    c.fillStyle = info.color
+    c.fillRect(x, y, w, h)
+  }
+
+  return { info, widget }
+}
diff --git a/src/ui/editor/widgets/index.ts b/src/ui/editor/widgets/index.ts
index c930193..f99fd25 100644
--- a/src/ui/editor/widgets/index.ts
+++ b/src/ui/editor/widgets/index.ts
@@ -1 +1,4 @@
+export * from './hover-mark.ts'
 export * from './wave-canvas.ts'
+export * from './wave-gl.ts'
+export * from './wave-svg.tsx'

From abae4c3aaa22ece1237e100259fba46408cb34b1 Mon Sep 17 00:00:00 2001
From: stagas <gstagas@gmail.com>
Date: Tue, 15 Oct 2024 03:48:18 +0300
Subject: [PATCH 25/25] fix import everything

---
 src/ui/editor/buffer.test.ts | 5 ++++-
 src/ui/editor/dims.ts        | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/ui/editor/buffer.test.ts b/src/ui/editor/buffer.test.ts
index 5ccd7aa..d77953b 100644
--- a/src/ui/editor/buffer.test.ts
+++ b/src/ui/editor/buffer.test.ts
@@ -2,10 +2,13 @@ import { $ } from 'sigui'
 import { tokenize } from '~/src/lang/tokenize.ts'
 import { Buffer } from '~/src/ui/editor/buffer.ts'
 import { Dims } from '~/src/ui/editor/dims.ts'
+import { Rect } from '~/src/ui/editor/util/types.ts'
 
 function B(code: string, maxWidth: number) {
   const info = $({ code, width: maxWidth, height: 300 })
-  const dims = Dims({ width: info.$.width, height: info.$.height })
+  const rect = $(Rect(), { w: 100 })
+  const dims = Dims({ rect })
+  dims.info.charWidth = 100 / maxWidth
   const b = Buffer({ dims, code: info.$.code, tokenize })
   b.info.maxColumns = maxWidth
   return b
diff --git a/src/ui/editor/dims.ts b/src/ui/editor/dims.ts
index 0ade257..aaeb75e 100644
--- a/src/ui/editor/dims.ts
+++ b/src/ui/editor/dims.ts
@@ -1,4 +1,4 @@
-import { Point, type Rect } from 'editor'
+import { Point, type Rect } from '~/src/ui/editor/util/types.ts'
 import { Sigui, type $ } from 'sigui'
 import { isMobile } from 'utils'