#js 嗯…… 我现在就在PoC一个比 Prismjs.com,CodeMirror,Monaco(VSCode) 更正确的span高亮方法，基于2021之后的DOM
PGO得出的结果是，即便不考虑HTML parse开销，Range API 也比堆叠<span.高亮类型>好😒， #code 见下
https://x.com/i/grok/share/6EUWYNSsyq7Ixk6BvdVoFdxV3
https://x.com/i/grok/share/vwCog17kkAn4lD58VEDgjxgrF

让Blink去计算 contain: paint ，显然是比JS background-clip:text+canvas Worker 绘制彩色矩形要好了(我也在gh上PoC过)，而且百行代码即可😄

#AI 看不到的是更多的文档
https://microsoftedge.github.io/Demos/custom-highlight-api/
https://htmlspecs.com/css/css-highlight-api-1/#range-invalidation

我对这个实现很乐观，虽然它明显比 span[ContentEditable] 要考虑更多区间更新的问题，但结合js侧配套的增量compiler，或许以wbr分词的 new Range(#text) 也是能自动延展的？
希望以后能自己创建相关的工具链。😃

#draft #vibe

这个高亮parser基于 eat(字符流),Bisect(区间链表),ast; 2+4+3 个接口，只针对(字面量or函数)的层面增量解析

s=eat('hello'):
`s(1)==s(-1) ='h', s(1)=='e'`，可结合 s=df(eat)() 打印调试关键语法
`s(/.*/), s(JSON.parse)` ，支持 s.ws=/\s+|#.*$/ 等，当 s.hl=='', 读项前自动跳空格（字面量内不跳），并保留 s.wsPre+='其空格'

s.by=Bisect(基于H5 span[attr],Text 等, 通过PahQL(el)设置):
'he llo'
by(0, s=>eatVar); by(0, s=>compileDef); 注册区间更新，肯定不能和parsec/递归下降那样return，咋搞下面会说 也有CSV(C=列A+B)的demo
by(2, '[BYGRP].'); 添加字面高亮(2字表示)。 BYGRP{vgbl}共5x4种基础颜色
by(5, {metaROW:0}); 添加函数上文，重复时只留最外层
by(3, '\r3\r-3'); 选区增删。\r开头即删掉llo一词，并显示 'he \xBB' 以指示当前区间和光标

s.env: 为动态作用域。当文本指代相同变量时，替换为第一个 DOM Text
s.fun(id,kv?); s.ret.pop(); 维护def或{}命名空间
s.var(); 注意，函数统一为 [body, args, void 0, locals, {kw}] 格式
s.exp('-', args): 创建(赋值)调用。在PahQL结果上可以 .As({'-':({k,v})=>v }) 或 .AST({}) 转换

ast:
s.inHole().As() 编译时快照候选值， ho.As(u=>u+1) 单向绑定， inHole((A,B)=>A+B) 可多路监听候选
PahQL提供 eatDef=(s,at二参数)=>at.ret(自动重解析) 的简写。在QL里，会将exp调用加入最近的 s.fun('-forif'?, 静态attrs?) 基本块，但无视 [/:/, s=>的值]，需通过eatSym()(s)手动组合递归返回
调用约定为 -return等语法 --forif等块 /全局调用 ->具名函数值 。s.fun('-for') 后可能要调用 s.ret.push()

code[ontruncate,text-spans] 在全局更新时应检查 s.by{.errs .body} ，你要在此对 `"正在插入 \" 哦", /**/` 等读时断尾/读后有余的input单独容错
.sloc 可以在def节点保存报错位置
.scmPutback[''] 基于行首/变量名来匹配def内的注释, unparse时缩进 ['\nindent']='2 '
基本块(span.def)在被增量splice 后，会聚焦其id，方便简单遍历.body时做剪枝。
REPL和补齐需要在input不完整，或含'wtf.\xBB'时做print(PS1)或 .show(elems) 提示
二进制input，无需Bisect！直接解析引用: new Blob([bytes, [嵌套的struct数组], bytes]) ，unparse时flat()“序列化”输出

https://jsbin.com/yosixu/edit?output #ai #vibe Graphviz
https://jsbin.com/nofepom/edit?html,output 最终发现失败了，AI没有做成功双向编辑😅

grok3搞了3遍…… 回头加个漫画风和AST可视化。
#statement
事实证明，如果AI第一遍没写对，而且不是版本号这些小问题； 后来你调试会花600%的时间…… vibe 可不是针对大模块的

而且，grok3的webUI基本上一点点模块化都没有…… 我思量着ipywidget那种级别的demo可以让它帮忙，但有缝合代码的需求就还是算了。API矿工都挺勉强，它太难调教

😅 修了半天也没把两个API缝合好，动不动就错，还不报错

#除错路线 d3-graphviz+拖拽更新DOT节点文本
- ai提供版本号和大小写错误的js -轻松
- drag事件座标计算错、state变量问题。现在依然有玄学的座标偏差问题（多次拖放）
- roughJS的各路API不稳定造成AI幻觉问题

d3的报错没有提示是renderDot()和sketch()共享一个id容器，大部分时间浪费在排除法和http请求、鼠标路径上

最不爽：AI经常调用不存在或已经失效的API（“最后一公里”问题）、jsbin的三栏界面太窄(F12很燥人)
AI直接处理大段代码会写丢功能、AI的代码基本没有函数化 导致无法扩展/插拔（代码裁缝还不好当..）

#awesome
https://observablehq.com/@magjac/demo-of-d3-graphviz-animations
https://github.com/magjac/graphviz-visual-editor 原作者写的编辑器（UI很差。。）
https://codesandbox.io/examples/package/d3-graphviz #tool npm的demo搜索

https://edotor.net/
http://www.webgraphviz.com/
https://stamm-wilbrandt.de/GraphvizFiddle/ ps. 这人也是个跑马拉松的( German Ultramarathon Association )
http://www.ryandesign.com/canviz/ 巨多示例
https://sketchviz.com/about 这个不是作为示例库，而是抄了RoughJS和字体

#draft
设计一种.jsdot 脑图，更加简洁(如 let { -a b; -b c 'c1' })，可以嵌入S-表达式和js ，可以ppt动画

dot=({fruit,salad, 香蕉,番茄}, ln)=>{
fruit(香蕉)
salad([香蕉,番茄, fruit], {port:'r2l'})
}
ln(attr_arrow?, Node, _1nNode?)
ln(attr?, _1nNode)
ln(_) 绑定首参数，返回Node函数。 ln(..)() 创建或获取"node[attr]"的 $ed 编辑器选区
所有Node可为"str"，自动获取或创建。(_1nNode)意为1或N个项
ln.ALL可过滤全部节点, ln.F5创建动画帧，总结：

ln(...DSL) 可以是以下任意形式：

ln(A, B, attr0) → A → B
ln(A, [B,C], attr0) → A → B, A → C
ln([A,B], C) → #wontfix
ln(A)(B)(C) → #wontfix, try [A,B,C].reduce(ln)
ln.graph({...}) → 图属性
ln.let(name) → 创建子图

#vibe #draft GBA平台的混合成框架与可观测性

用 Linux mednafen, Mame 玩掌机游戏曾经是我的“小游戏”乐园。😃

本来以为AI时代就可以vibe一个和平台一样大的东西（或许FC可以吧..），发现是ARM7TDMI就萎了😅

其实，就连Flash平台的开源调试都只有FFDec，某些VM写成解释器卡的要命。想要F12那种程度的可观测，根本想都别想

为什么呢？ 因为，与其说这些领域的SDK(ABI也算一种)是在服务业务逻辑，不如说他们不知道业务的“特点”究竟是哪些，他们用类似于LLM的方法编程实现，也只有实现而已！

没法把语义和ARM这些下层平台剥离开来，自然不可能做到F12那种程度，就像在UI/UX领域，js和其他UI框架栈的质量也是天上地下。

https://x.com/i/grok/share/VgAFwTWKxAJW0dgHxC82EV7uL
https://chat.librechat.ai/share/XrtVCNER6wZ_uTETDVOYP #ai分叉
https://docs.huihoo.com/media/gba/

#reveng Grok给我答错了，DS好文明 https://chat.librechat.ai/share/HXuwzpWSJP1MsrVOVManf

> libretro的接口是什么层次的？ 不会是一个ev/input+fb+sound 吧？还是，它负责类似MIDI的混合成？

简单来说，它就是个黑箱，类似 canvas+PCM+mouse/keyup ，图形没有层，只是bmp ……
tasvideos.org/Bizhawk 提供了完整的 mmap hook、PPU 寄存器、音频通道分离

#awesome
https://x.com/i/grok/share/i4YuHalu9C2pSaFpb6AgRTD7B
https://gist.github.com/aldelaro5/d532b21b5e2ec48d5f78e81846c1c1b7
https://github.com/michelhe/rustboyadvance-ng#:~:text=Incredible%20test%20suite
- https://felixjones.co.uk/mgba_gdb/vscode.html
- https://gbadev.net/tonc/setup.html