@neocomp/core 0.1.0

package/dist/.vite/manifest.json

@@ -0,0 +1,23 @@
+{
+  "src/enable_chunk_parsing.ts": {
+    "file": "enable_chunk_parsing.js",
+    "name": "enable_chunk_parsing",
+    "src": "src/enable_chunk_parsing.ts",
+    "isEntry": true
+  },
+  "src/html-parser.ts": {
+    "file": "chunks/html-parser-DTAS5OlA.js",
+    "name": "html-parser",
+    "src": "src/html-parser.ts",
+    "isDynamicEntry": true
+  },
+  "src/index.ts": {
+    "file": "index.js",
+    "name": "index",
+    "src": "src/index.ts",
+    "isEntry": true,
+    "dynamicImports": [
+      "src/html-parser.ts"
+    ]
+  }
+}

package/dist/chunks/html-parser-DTAS5OlA.js

@@ -0,0 +1 @@
+const g=/^[^<>'"`=/\s]+/,w=new Set(["area","base","br","col","embed","hr","img","input","link","meta","param","source","track","wbr"]);function c(l,n){return n+l.slice(n).match(/^\s*/)[0].length}function f(l,n){throw l==null?new SyntaxError(`unexpected end of input, expected "${n}"`):new SyntaxError(`unexpected token "${l}", expected "${n}"`)}function u(l,n,r){let o=l.slice(n).match(g)?.[0];return o||f(l[n],r),[o,n+o.length]}function x(l){let n=[{tag:"html",attrs:[],children:[]}],r="in_content";for(let[o,t]of l.entries()){let e=0;e:for(;t.length>e;){let i=n.at(-1);if(r==="in_do")e=c(t,e),t[e]==="/"&&(e+=1),t[e]!==">"&&f(t[e],">"),e+=1,r="in_content";else if(r==="in_attr_quoted")t[e]!=='"'&&t[e]!=="'"&&f(t[e],`'"'`),e+=1,r="in_attr";else if(r==="in_attr"){for(e=c(t,e);e<t.length&&t[e]!==">"&&t[e]!=="/";){let h,s;if([h,e]=u(t,e,"attribute name"),e=c(t,e),t[e]==="="){if(e+=1,e=c(t,e),e===t.length){i.attrs.push({attr:h,value:o});break e}if((t[e]==='"'||t[e]==="'")&&t.length===e+1){i.attrs.push({attr:h,value:o}),r="in_attr_quoted";break e}if(t[e]==='"'||t[e]==="'"){let d=t[e],p=t.indexOf(d,e+1);if(p===-1)throw new SyntaxError("unended string");s=t.slice(e+1,p),e=p+1}else[s,e]=u(t,e,"attribute value");let a=e;if(e=c(t,e),a===e&&e<t.length&&t[e]!==">"&&t[e]!=="/")throw new SyntaxError("expected whitespace")}else s="";i.attrs.push({attr:h,value:s})}t[e]==="/"?(e+=1,e=c(t,e),n.pop()):w.has(i.tag.toLowerCase())&&n.pop(),t[e]!==">"&&f(t[e],'">"'),e+=1,r="in_content"}else{let h=t.indexOf("<",e),s=t.slice(e,h===-1?t.length:h);if(s.length>0&&(typeof i.children.at(-1)=="string"?i.children[i.children.length-1]=i.children.at(-1)+s:i.children.push(s)),h===-1)break;if(e=h+1,t.length===e)i.children.push({type:"do",arg:o}),r="in_do";else if(t.slice(e,e+3)==="!--"){let a=t.indexOf("-->",e);if(a===-1)throw new SyntaxError("unended comment");e=a+3}else if(t[e]==="/"){e+=1;let a;if([a,e]=u(t,e,"tag"),n.length===1)throw new SyntaxError(`unexpected end tag "${a}" at root`);if(a!==i.tag)throw new SyntaxError(`expected end tag "${i.tag}" but got "${a}"`);e=c(t,e),t[e]!==">"&&f(t[e],'">"'),e+=1,n.pop()}else{let a;[a,e]=u(t,e,"tag");let d={tag:a,attrs:[],children:[]};i.children.push(d),n.push(d),r="in_attr"}}}o!==l.length-1&&r==="in_content"&&n.at(-1).children.push(o)}if(r!=="in_content")throw new SyntaxError('unexpected end of input, expected ">"');if(n.length!==1)throw new SyntaxError("end of input with unclosed tags");return n[0]}export{x as parse};

package/dist/enable_chunk_parsing.js

@@ -0,0 +1 @@
+globalThis.__neocomp_enable_chunk_parsing=!0;

package/dist/index.js

@@ -0,0 +1 @@
+const $="modulepreload",B=function(i){return"/"+i},S={},I=function(e,t,s){let n=Promise.resolve();if(t&&t.length>0){let a=function(h){return Promise.all(h.map(_=>Promise.resolve(_).then(d=>({status:"fulfilled",value:d}),d=>({status:"rejected",reason:d}))))};document.getElementsByTagName("link");const l=document.querySelector("meta[property=csp-nonce]"),o=l?.nonce||l?.getAttribute("nonce");n=a(t.map(h=>{if(h=B(h),h in S)return;S[h]=!0;const _=h.endsWith(".css"),d=_?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${h}"]${d}`))return;const c=document.createElement("link");if(c.rel=_?"stylesheet":$,_||(c.as="script"),c.crossOrigin="",c.href=h,o&&c.setAttribute("nonce",o),document.head.appendChild(c),_)return new Promise((m,g)=>{c.addEventListener("load",m),c.addEventListener("error",()=>g(new Error(`Unable to preload CSS for ${h}`)))})}))}function r(l){const o=new Event("vite:preloadError",{cancelable:!0});if(o.payload=l,window.dispatchEvent(o),!o.defaultPrevented)throw l}return n.then(l=>{for(const o of l||[])o.status==="rejected"&&r(o.reason);return e().catch(r)})};class U{#e=new Map;#h=0;#s=new Map;#o=[];#c=0;#i=!1;#r=new Set;#l=new Map;#f=0;#n=new Map;#t=null;new_slab(){let e=this.#c;return this.#s.set(e,{props:[],effects:[],cleaners:[]}),this.#c+=1,e}has_slab(e){return this.#s.has(e)&&!this.#o.includes(e)}remove_slab(e){if(!this.#s.has(e))throw new Error(`slab ${e} does not exist`);this.#i?this.#o.push(e):this.#u(e)}#u(e){let t=this.#s.get(e);for(let s of t.cleaners)s();for(let s of t.props)this.#e.delete(s),this.#n.delete(s);for(let s of t.effects){for(let n of this.#l.get(s).read){let r=this.#n.get(n);r&&r.splice(r.indexOf(s),1)}this.#l.delete(s)}this.#s.delete(e)}add_cleaner(e,t){this.#s.get(e)?.cleaners.push(t)}prop(e,t=void 0){let s=this.#h;return this.#e.set(s,e),this.#h+=1,t!=null&&this.#s.get(t)?.props.push(s),s}has(e){return this.#e.has(e)}get(e){return this.#p(e),this.#e.get(e)}peek(e){return this.#e.get(e)}set(e,t){this.#d(e),this.#_(e),this.#e.set(e,t)}update(e,t){this.#d(e),this.#_(e),this.#e.set(e,t(this.#e.get(e)))}signal(e,t=void 0){return new b(this,this.prop(e,t))}signal_for(e){return new b(this,e)}effect(e,t=void 0){this.start_track(),e();let{read:s,write:n}=this.end_track();this.#a(e,s,n,t)}effect_manual(e,t,s,n=void 0,r=!0){r&&s(),this.#a(s,e,t,n)}#a(e,t,s,n=void 0){let r=this.#f;this.#l.set(r,{fun:e,read:t,write:s}),this.#f+=1,n!=null&&this.#s.get(n)?.effects.push(r);for(let l of t)this.#n.has(l)?this.#n.get(l)?.push(r):this.#n.set(l,[r]);return r}computed(e,t=void 0){this.start_track();let s=e(),{read:n,write:r}=this.end_track();if(r.length!=0)throw new Error("computed properties cannot set other properties");let l=this.prop(s,t);return this.#a(()=>this.set(l,e()),n,[l],t),new y(this,l)}get tracking(){return this.#t!=null}start_track(){if(this.#t!=null)throw new Error("already tracking");this.#t={read:new Set,write:new Set}}end_track(){if(this.#t==null)throw new Error("not tracking");let e=this.#t;return this.#t=null,{read:Array.from(e.read),write:Array.from(e.write)}}#p(e){this.#t!=null&&this.#t.read.add(e)}#d(e){this.#t!=null&&this.#t.write.add(e)}get updating(){return this.#i}#_(e){this.#i||this.#r.add(e)}force_update(e){this.#r.add(e)}flush_updates(){if(this.#i)return;for(this.#i=!0;this.#r.size>0;){let t=[],s=new Set,n=[];for(let r of this.#r)e(this,r,t,s,n);this.#r.clear();for(let r=t.length-1;r>=0;r-=1)try{this.#l.get(t[r]).fun()}catch(l){console.error(l)}}this.#i=!1;for(let t of this.#o)this.#s.has(t)&&this.#u(t);this.#o=[];function e(t,s,n,r,l){let o=t.#n.get(s);if(o!=null)for(let a of o){if(l.includes(a))throw new Error("detected circular dependency in an update");if(!r.has(a)){l.push(a);for(let h of t.#l.get(a).write)e(t,h,n,r,l);l.pop(),n.push(a),r.add(a)}}}}}class T{id;store;constructor(e,t){this.id=t,this.store=e}}class b extends T{get value(){return this.store.get(this.id)}set value(e){this.store.set(this.id,e)}peek(){return this.store.peek(this.id)}update(e){this.store.update(this.id,e)}as_ro(){return new y(this.store,this.id)}}class y extends T{get value(){return this.store.get(this.id)}peek(){return this.store.peek(this.id)}}class q{ctx=void 0;slab=void 0;init(e,t=void 0){this.ctx=e,this.slab=t}get store(){return this.ctx.store}signal(e){return this.store.signal(e,this.slab)}effect(e){return this.store.effect(e,this.slab)}computed(e){return this.store.computed(e,this.slab)}}const V=globalThis.__neocomp_enable_chunk_parsing?(await I(async()=>{const{parse:i}=await import("./chunks/html-parser-DTAS5OlA.js");return{parse:i}},[])).parse:()=>{throw new Error("chunk parsing not enabled")},x=new Map,A="class:",P="style:",C="prop:",M="on:";function E(i,e,t){e.startsWith(A)?i.classList.toggle(e.slice(A.length),t):e.startsWith(P)?i.style.setProperty(e.slice(P.length),t):e.startsWith(C)?i[e.slice(C.length)]=t:typeof t=="boolean"?i.toggleAttribute(e,t):t==null?i.removeAttribute(e):i.setAttribute(e,String(t))}function R(i){return i instanceof Node?i:i==null?document.createTextNode(""):document.createTextNode(String(i))}function L(i,e,t){let s=R(t());e.appendChild(s),s instanceof Text?i.effect(()=>{let n=t();n==null?s.nodeValue="":s.nodeValue=String(n)}):i.effect(()=>{let n=t();e.replaceChild(n,s),s=n})}function W(i,e,t,s){if(typeof t?.tag=="string"){let n=z(i,t,s);e.append(n)}else if(t?.type==="do")i.__el_stack.push(e),s[t.arg](i,e),i.__el_stack.pop();else{let n=typeof t=="number"?s[t]:t;n instanceof k?(e.append(n.base_el),n instanceof j&&i.slab!==void 0&&i.store.add_cleaner(i.slab,()=>n.remove())):n instanceof b||n instanceof y?L(i,e,()=>n.value):typeof n=="function"?L(i,e,n):e.append(R(n))}}function z(i,e,t){let s=document.createElement(e.tag);for(let{attr:n,value:r}of e.attrs){let l=typeof r=="string"?r:t[r];n.startsWith(M)?s.addEventListener(n.slice(M.length),o=>{l(o),i.store.flush_updates()}):l instanceof b||l instanceof y?i.effect(()=>E(s,n,l.value)):typeof l=="function"?i.effect(()=>E(s,n,l())):E(s,n,l)}for(let n of e.children)W(i,s,n,t);return s}class k extends q{base_el;__el_stack;constructor(e,t,s=void 0){super(),super.init(e,s),this.base_el=t,this.__el_stack=[t],this.html=this.html.bind(this),this.html.__add=this.__add.bind(this),this.signal=this.signal.bind(this),this.effect=this.effect.bind(this),this.computed=this.computed.bind(this)}get cur_el(){return this.__el_stack.at(-1)}html(e,...t){let s=e;if(x.has(s))return this.__add(x.get(s),t);let n=V(s);x.set(s,n),this.__add(n,t)}__add(e,t){for(let s of e.children)W(this,this.cur_el,s,t)}}class j extends k{remove(){this.base_el.remove(),this.slab!=null&&this.store.remove_slab(this.slab)}}function H(i){return(e,t)=>{i==!1?t.style.display="none":i instanceof b||i instanceof y?e.effect(()=>t.style.display=i.value?"":"none"):typeof i=="function"&&e.effect(()=>t.style.display=i()?"":"none")}}function J(i,e,t,s){return n=>O(n,i,e,!1,t,(r,l,o)=>s(r,l))}function K(i,e,t,s){return n=>O(n,i,e,!0,t,(r,l,o)=>s(r,l,o))}function O(i,e,t,s,n,r){let l=t??(c=>c),o=e.value,a=new Array(o.length).fill(null),h=new Array(o.length);for(let[c,m]of o.entries()){h[c]=l(m);let g=N(i.ctx,n,m,s?c:null,r);i.cur_el.append(g.build.base_el),a[c]=g}let _=i.cur_el,d=()=>{let c=e.value,m=c.map(l),g=new Array(c.length).fill(null),f=new D(_,a,g,u=>N(i.ctx,n,c[u],s?u:null,r));F(h,m,f),a=g,h=m};i.store.effect_manual([e.id],[],d,i.slab,!1),i.slab!==void 0&&i.store.add_cleaner(i.slab,()=>{for(let c of a)c?.build.remove()})}function N(i,e,t,s,n){let r=i.removable_chunk(e),l=s!==null?r.signal(s):void 0;return n(r,t,l??null),{index:l,build:r}}class D{parent;old_items;new_items;item_builder;constructor(e,t,s,n){this.parent=e,this.old_items=t,this.new_items=s,this.item_builder=n}insert(e,t){let s=this.item_builder(e);t!==null?this.new_items[t].build.base_el.before(s.build.base_el):this.parent.append(s.build.base_el),this.new_items[e]=s}move(e,t){let s=this.new_items[e].build.base_el;t!==null?this.new_items[t].build.base_el.before(s):this.parent.append(s)}remove(e){this.old_items[e].build.remove()}set_index(e,t){let s=this.old_items[e];s.index!==void 0&&e!==t&&(s.index.value=t,s.index.store.force_update(s.index.id)),this.new_items[t]=s}}function F(i,e,t){const s=i.length,n=e.length;let r=0;for(;r<s&&r<n&&i[r]===e[r];)t.set_index(r,r),r++;let l=s,o=n;for(;l>r&&o>r&&i[l-1]===e[o-1];)l--,o--,t.set_index(l,o);if(r===l)for(let a=r;a<o;a++){const h=o<n?o:null;t.insert(a,h)}else if(r===o)for(let a=r;a<l;a++)t.remove(a);else{const a=o-r,h=new Map,_=new Array(a).fill(null);for(let f=o-1;f>=r;f--){const u=e[f];h.has(u)&&(_[f-r]=h.get(u)),h.set(u,f)}const d=new Int32Array(a);let c=!1,m=0,g=0;for(let f=r;f<l;f++){if(g>=a){t.remove(f);continue}const u=i[f];if(h.has(u)){const p=h.get(u);h.delete(u);const w=p-r,v=_[w];v!==null&&h.set(e[v],v),d[w]=f+1,t.set_index(f,p),p>=m?m=p:c=!0,g++;continue}t.remove(f)}if(c){const f=G(d);let u=f.length-1;for(let p=a-1;p>=0;p--){const w=r+p,v=w+1<n?w+1:null;d[p]===0?t.insert(w,v):u<0||p!==f[u]?t.move(w,v):u--}}else for(let f=a-1;f>=0;f--)if(d[f]===0){const u=r+f,p=u+1<n?u+1:null;t.insert(u,p)}}}function G(i){const e=new Int32Array(i.length),t=[];for(let l=0;l<i.length;l++){if(i[l]===0)continue;const o=t.length;if(o===0||i[t[o-1]]<i[l]){o>0&&(e[l]=t[o-1]),t.push(l);continue}let a=0,h=t.length;for(;a<h;){const d=a+h>>1;i[t[d]]<i[l]?a=d+1:h=d}const _=a;_>0&&(e[l]=t[_-1]),t[_]=l}let s=t.length;const n=new Array(s);let r=s>0?t[s-1]:0;for(;s>0;)s--,n[s]=r,r=e[r];return n}class Q extends q{#e=new U;root_el;constructor(e){super(),this.root_el=e,super.init(this,void 0)}get store(){return this.#e}new_chunk(e){return new k(this,e)}root_chunk(){return new k(this,this.root_el)}removable_chunk(e){return new j(this,document.createElement(e),this.store.new_slab())}}export{k as ChunkBuild,Q as Context,y as ROSignal,j as RemovableChunk,b as Signal,U as Store,q as StoreProv,J as render_list,K as render_list_enumerated,H as show_if};

package/package.json

@@ -0,0 +1,31 @@
+{
+	"name": "@neocomp/core",
+	"version": "0.1.0",
+	"description": "new generation of reactivity and expressivity",
+	"author": "aliibrahim123",
+	"scripts": {
+		"start": "vite .",
+		"build": "vite build"
+	},
+	"type": "module",
+	"main": "./src/index.js",
+	"exports": {
+		".": "./src/index.ts",
+		"./html-parser": "./src/html-parser.ts",
+		"./enable_chunk_parsing": "./src/enable_chunk_parsing.ts",
+		"./js/": "./dist/index.js",
+		"./js/enable_chunk_parsing": "./src/enable_chunk_parsing.js"
+	},
+	"homepage": "https://aliibrahim123.github.io/neocomp.js/",
+	"bugs": {
+		"url": "https://github.com/aliibrahim123/neocomp.js/issues"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/aliibrahim123/neocomp.js.git"
+	},
+	"license": "MIT",
+	"devDependencies": {
+		"vite": "^8.0.16"
+	}
+}

package/readme.md

@@ -0,0 +1,64 @@
+# neocomp
+
+bored of frameworks magic, want a lightweight solution for building scalable web apps and sites.
+
+introducing **neocomp**, a lightweight, fast, and modern javascript web framework simplifying web
+develepment without sacrificing maintainability or language identity.
+
+it achieves this goal through fine grained reactivity, driven by imperative construction, with the
+use of chunked templating.
+
+```typescript
+class Counter extends Component {
+	constructor() {
+		super();
+		const { html } = this.createTop();
+
+		let count = this.signal(0);
+		html` <button on:click="${() => count.value++}">count: ${count}</button> `;
+
+		this.fireInit();
+	}
+}
+```
+
+# quick start
+
+- [first steps](./docs/quick-guide/first-steps.md)
+- [basic state management](./docs/quick-guide/basic-state.md)
+- [templates](./docs/quick-guide/templates.md)
+
+# docs
+
+this is the index of the documentation.
+
+- [rawdom](./docs/rawdom.md)
+- **litedom:**
+    - [core](./docs/litedom/core.md)
+    - [parse](./docs/litedom/parse.md)
+- [zro router](./docs/zro-router.md)
+- **`comp-base` module:**
+    - **core:**
+        - [`Component`](./docs/comp-base.core/component.md)
+        - [registry](./docs/comp-base.core/registry.md)
+        - [general utilities](./docs/comp-base.core/utilities.md)
+    - **state:**
+        - [fundamentals](./docs/comp-base.state/fundamentals.md)
+        - [`Store`](./docs/comp-base.state/store.md)
+        - [state utilities](./docs/comp-base.state/utilities.md)
+    - **view:**
+        - [`View`](./docs/comp-base.view/view.md)
+        - [chunk reference](./docs/comp-base.view/chunk.md)
+- [vite plugin](./docs/plugin.md)
+- [examples and patterns](./docs/examples.md)
+
+# blogpost
+
+check out the latest blogposts about neocomp at
+[recomputed](https://aliibrahim123.github.io/recomputed/web-dev).
+
+---
+
+thanks for selecting neocomp as your base framework, if you noticed issues or have ideas dont be shy
+to share.\
+`request(new Time() |> filter(!bug))`.

package/src/chunk.ts

@@ -0,0 +1,144 @@
+import type { Element as LiteElement } from './html-parser.ts';
+import type { Context } from './index.ts';
+import { ROSignal, Signal, type SlabID, StoreProv } from './reactive.ts';
+
+const parse = (globalThis as any).__neocomp_enable_chunk_parsing
+	? (await import('./html-parser.ts')).parse
+	: () => {
+			throw new Error('chunk parsing not enabled');
+		};
+
+const chunk_registery = new Map<string[], LiteElement>();
+
+const class_prefix = 'class:';
+const style_prefix = 'style:';
+const prop_prefix = 'prop:';
+const on_prefix = 'on:';
+function apply_attr(el: Element, attr: string, value: any) {
+	if (attr.startsWith(class_prefix)) el.classList.toggle(attr.slice(class_prefix.length), value);
+	else if (attr.startsWith(style_prefix)) {
+		(el as HTMLElement).style.setProperty(attr.slice(style_prefix.length), value);
+	} else if (attr.startsWith(prop_prefix)) (el as any)[attr.slice(prop_prefix.length)] = value;
+	else if (typeof value === 'boolean') el.toggleAttribute(attr, value);
+	else if (value === null || value === undefined) el.removeAttribute(attr);
+	else el.setAttribute(attr, String(value));
+}
+
+function into_node(value: any): Node {
+	if (value instanceof Node) return value;
+	if (value === null || value === undefined) return document.createTextNode('');
+	return document.createTextNode(String(value));
+}
+function dynamic_node(build: ChunkBuild, el: Element, getter: () => any) {
+	let last_node = into_node(getter());
+	el.appendChild(last_node);
+	if (last_node instanceof Text) {
+		build.effect(() => {
+			let value = getter();
+			if (value === undefined || value === null) last_node.nodeValue = '';
+			else last_node.nodeValue = String(value);
+		});
+	} else {
+		build.effect(() => {
+			let node = getter();
+			el.replaceChild(node, last_node);
+			last_node = node;
+		});
+	}
+}
+
+function construct_child(
+	build: ChunkBuild,
+	el: Element,
+	child: LiteElement['children'][number],
+	args: any[],
+) {
+	if (typeof (child as any)?.tag === 'string') {
+		let _child = construct_el(build, child as any, args);
+		el.append(_child);
+	} else if ((child as any)?.type === 'do') {
+		build.__el_stack.push(el);
+		args[(child as any).arg](build, el);
+		build.__el_stack.pop();
+	} else {
+		let arg = typeof child === 'number' ? args[child] : child;
+		if (arg instanceof ChunkBuild) {
+			el.append(arg.base_el);
+			if (arg instanceof RemovableChunk && build.slab !== undefined) {
+				build.store.add_cleaner(build.slab, () => arg.remove());
+			}
+		} else if (arg instanceof Signal || arg instanceof ROSignal) {
+			dynamic_node(build, el, () => arg.value);
+		} else if (typeof arg === 'function') dynamic_node(build, el, arg);
+		else el.append(into_node(arg));
+	}
+}
+
+function construct_el(build: ChunkBuild, lite: LiteElement, args: any[]): Element {
+	let el = document.createElement(lite.tag);
+	for (let { attr, value } of lite.attrs) {
+		let arg = typeof value === 'string' ? value : args[value];
+		if (attr.startsWith(on_prefix)) {
+			el.addEventListener(attr.slice(on_prefix.length), (event) => {
+				arg(event);
+				build.store.flush_updates();
+			});
+		} else if (arg instanceof Signal || arg instanceof ROSignal) {
+			build.effect(() => apply_attr(el, attr, arg.value));
+		} else if (typeof arg === 'function') {
+			build.effect(() => apply_attr(el, attr, arg()));
+		} else apply_attr(el, attr, arg);
+	}
+	for (let child of lite.children) construct_child(build, el, child, args);
+	return el;
+}
+
+export class ChunkBuild extends StoreProv {
+	base_el: Element;
+	__el_stack: Element[];
+	constructor(ctx: Context, base_el: Element, slab: SlabID | undefined = undefined) {
+		super();
+		super.init(ctx, slab);
+		this.base_el = base_el;
+		this.__el_stack = [base_el];
+
+		this.html = this.html.bind(this);
+		(this.html as any).__add = this.__add.bind(this);
+		this.signal = this.signal.bind(this);
+		this.effect = this.effect.bind(this);
+		this.computed = this.computed.bind(this);
+	}
+
+	get cur_el(): Element {
+		return this.__el_stack.at(-1)!;
+	}
+
+	html(parts: TemplateStringsArray, ...args: any[]) {
+		let _parts = parts as any as string[];
+		if (chunk_registery.has(_parts)) return this.__add(chunk_registery.get(_parts)!, args);
+		let lite = parse(_parts);
+		chunk_registery.set(_parts, lite);
+		this.__add(lite, args);
+	}
+	__add(lite: LiteElement, args: any[]) {
+		for (let child of lite.children) construct_child(this, this.cur_el, child, args);
+	}
+}
+
+export class RemovableChunk extends ChunkBuild {
+	remove() {
+		this.base_el.remove();
+		if (this.slab != undefined) this.store.remove_slab(this.slab);
+	}
+}
+
+export function show_if(value: boolean | Signal<boolean> | ROSignal<boolean> | (() => boolean)) {
+	return (build: ChunkBuild, el: HTMLElement) => {
+		if (value == false) el.style.display = 'none';
+		else if (value instanceof Signal || value instanceof ROSignal) {
+			build.effect(() => (el.style.display = value.value ? '' : 'none'));
+		} else if (typeof value === 'function') {
+			build.effect(() => (el.style.display = value() ? '' : 'none'));
+		}
+	};
+}

package/src/enable_chunk_parsing.ts

@@ -0,0 +1 @@
+(globalThis as any).__neocomp_enable_chunk_parsing = true;

package/src/html-parser.ts

@@ -0,0 +1,178 @@
+export interface Element {
+	tag: string;
+	attrs: { attr: string; value: string | number }[];
+	children: (Element | string | number | { type: 'do'; arg: number })[];
+}
+
+const name_regex = /^[^<>'"`=/\s]+/;
+
+// deno-fmt-ignore
+const void_tags = new Set([
+	'area',
+	'base',
+	'br',
+	'col',
+	'embed',
+	'hr',
+	'img',
+	'input',
+	'link',
+	'meta',
+	'param',
+	'source',
+	'track',
+	'wbr',
+]);
+
+function eat_ws(part: string, ind: number): number {
+	return ind + part.slice(ind).match(/^\s*/)![0].length;
+}
+
+function unexpected_token(found: string | undefined, expected: string): never {
+	if (found == undefined) {
+		throw new SyntaxError(`unexpected end of input, expected "${expected}"`);
+	}
+	throw new SyntaxError(`unexpected token "${found}", expected "${expected}"`);
+}
+
+function eat_name(part: string, ind: number, expected: string): [string, number] {
+	let name = part.slice(ind).match(name_regex)?.[0];
+	if (!name) unexpected_token(part[ind], expected);
+	return [name, ind + name.length];
+}
+
+export function parse(parts: string[]): Element {
+	let el_stack: Element[] = [
+		{
+			tag: 'html',
+			attrs: [],
+			children: [],
+		},
+	];
+
+	let state: 'in_content' | 'in_attr' | 'in_do' | 'in_attr_quoted' = 'in_content';
+
+	for (let [part_ind, part] of parts.entries()) {
+		let ind = 0;
+		while_part: while (part.length > ind) {
+			let cur_el = el_stack.at(-1)!;
+
+			if (state === 'in_do') {
+				ind = eat_ws(part, ind);
+				if (part[ind] === '/') ind += 1;
+				if (part[ind] !== '>') unexpected_token(part[ind], '>');
+				ind += 1;
+				state = 'in_content';
+			} else if (state === 'in_attr_quoted') {
+				if (part[ind] !== '"' && part[ind] !== "'") unexpected_token(part[ind], "'\"'");
+				ind += 1;
+				state = 'in_attr';
+			} else if (state === 'in_attr') {
+				ind = eat_ws(part, ind);
+
+				while (ind < part.length && part[ind] !== '>' && part[ind] !== '/') {
+					let attr, value;
+					[attr, ind] = eat_name(part, ind, 'attribute name');
+					ind = eat_ws(part, ind);
+
+					if (part[ind] === '=') {
+						ind += 1;
+						ind = eat_ws(part, ind);
+
+						if (ind === part.length) {
+							cur_el.attrs.push({ attr, value: part_ind });
+							break while_part;
+						}
+						if ((part[ind] === '"' || part[ind] === "'") && part.length === ind + 1) {
+							cur_el.attrs.push({ attr, value: part_ind });
+							state = 'in_attr_quoted';
+							break while_part;
+						}
+						if (part[ind] === '"' || part[ind] === "'") {
+							let quote = part[ind];
+							let end = part.indexOf(quote, ind + 1);
+							if (end === -1) throw new SyntaxError('unended string');
+							value = part.slice(ind + 1, end);
+							ind = end + 1;
+						} else [value, ind] = eat_name(part, ind, 'attribute value');
+
+						let last_ind = ind;
+						ind = eat_ws(part, ind);
+						if (
+							last_ind === ind &&
+							ind < part.length &&
+							part[ind] !== '>' &&
+							part[ind] !== '/'
+						) {
+							throw new SyntaxError('expected whitespace');
+						}
+					} else {
+						value = '';
+					}
+
+					cur_el.attrs.push({ attr, value });
+				}
+
+				if (part[ind] === '/') {
+					ind += 1;
+					ind = eat_ws(part, ind);
+					el_stack.pop();
+				} else if (void_tags.has(cur_el.tag.toLowerCase())) el_stack.pop();
+
+				if (part[ind] !== '>') unexpected_token(part[ind], '">"');
+				ind += 1;
+				state = 'in_content';
+			} else {
+				let next_bracket = part.indexOf('<', ind);
+				let text = part.slice(ind, next_bracket === -1 ? part.length : next_bracket);
+				if (text.length > 0) {
+					if (typeof cur_el.children.at(-1) === 'string') {
+						cur_el.children[cur_el.children.length - 1] = cur_el.children.at(-1) + text;
+					} else cur_el.children.push(text);
+				}
+
+				if (next_bracket === -1) break;
+
+				ind = next_bracket + 1;
+
+				if (part.length === ind) {
+					cur_el.children.push({ type: 'do', arg: part_ind });
+					state = 'in_do';
+				} else if (part.slice(ind, ind + 3) === '!--') {
+					let end = part.indexOf('-->', ind);
+					if (end === -1) throw new SyntaxError('unended comment');
+					ind = end + 3;
+				} else if (part[ind] === '/') {
+					ind += 1;
+					let tag;
+					[tag, ind] = eat_name(part, ind, 'tag');
+					if (el_stack.length === 1) {
+						throw new SyntaxError(`unexpected end tag "${tag}" at root`);
+					}
+					if (tag !== cur_el.tag) {
+						throw new SyntaxError(`expected end tag "${cur_el.tag}" but got "${tag}"`);
+					}
+					ind = eat_ws(part, ind);
+					if (part[ind] !== '>') unexpected_token(part[ind], '">"');
+					ind += 1;
+					el_stack.pop();
+				} else {
+					let tag;
+					[tag, ind] = eat_name(part, ind, 'tag');
+					let el: Element = { tag, attrs: [], children: [] };
+					cur_el.children.push(el);
+					el_stack.push(el);
+					state = 'in_attr';
+				}
+			}
+		}
+		if (part_ind !== parts.length - 1 && state === 'in_content') {
+			el_stack.at(-1)!.children.push(part_ind);
+		}
+	}
+
+	if (state !== 'in_content') throw new SyntaxError('unexpected end of input, expected ">"');
+	if (el_stack.length !== 1) throw new SyntaxError('end of input with unclosed tags');
+
+	return el_stack[0];
+}

package/src/index.ts

@@ -0,0 +1,38 @@
+import { ChunkBuild, RemovableChunk } from './chunk.ts';
+import { Store, StoreProv } from './reactive.ts';
+
+export class Context extends StoreProv {
+	#store = new Store();
+	root_el: Element;
+	constructor(root_el: Element) {
+		super();
+		this.root_el = root_el;
+		super.init(this, undefined);
+	}
+
+	override get store(): Store {
+		return this.#store;
+	}
+
+	new_chunk(base_el: Element) {
+		return new ChunkBuild(this, base_el);
+	}
+	root_chunk() {
+		return new ChunkBuild(this, this.root_el);
+	}
+	removable_chunk(tag: string) {
+		return new RemovableChunk(this, document.createElement(tag), this.store.new_slab());
+	}
+}
+
+export { ChunkBuild, RemovableChunk, show_if } from './chunk.ts';
+export {
+	type PropId,
+	ROSignal,
+	Signal,
+	type SlabID,
+	Store,
+	StoreProv,
+	type ReadSignal,
+} from './reactive.ts';
+export { render_list, render_list_enumerated } from './render_list.ts';

package/src/reactive.ts

@@ -0,0 +1,275 @@
+import type { Context } from './index.ts';
+
+export type PropId<T> = number & { __type: T };
+export type SlabID = number & { __type: 'slab' };
+
+export class Store {
+	#props = new Map<number, any>();
+	#cur_prop = 0;
+	#slabs = new Map<number, { props: number[]; effects: number[]; cleaners: (() => void)[] }>();
+	#slabs_to_remove: SlabID[] = [];
+	#cur_slab = 0;
+	#is_updating = false;
+	#dirty_props: Set<number> = new Set();
+	#effects = new Map<number, { fun: () => void; read: number[]; write: number[] }>();
+	#cur_effect = 0;
+	#read_effect_map = new Map<number, number[]>();
+	#track_result: { read: Set<number>; write: Set<number> } | null = null;
+
+	new_slab(): SlabID {
+		let id = this.#cur_slab;
+		this.#slabs.set(id, { props: [], effects: [], cleaners: [] });
+		this.#cur_slab += 1;
+		return id as SlabID;
+	}
+	has_slab(id: SlabID): boolean {
+		return this.#slabs.has(id) && !this.#slabs_to_remove.includes(id);
+	}
+	remove_slab(id: SlabID) {
+		if (!this.#slabs.has(id)) throw new Error(`slab ${id} does not exist`);
+		if (this.#is_updating) this.#slabs_to_remove.push(id);
+		else this.#remove_slab(id);
+	}
+	#remove_slab(id: SlabID) {
+		let slab = this.#slabs.get(id)!;
+		for (let cleaner of slab.cleaners) cleaner();
+		for (let prop of slab.props) {
+			this.#props.delete(prop);
+			this.#read_effect_map.delete(prop);
+		}
+		for (let effect of slab.effects) {
+			for (let read of this.#effects.get(effect)!.read) {
+				let map = this.#read_effect_map.get(read);
+				if (map) map.splice(map.indexOf(effect), 1);
+			}
+			this.#effects.delete(effect);
+		}
+		this.#slabs.delete(id);
+	}
+	add_cleaner(slab: SlabID, cleaner: () => void) {
+		this.#slabs.get(slab)?.cleaners.push(cleaner);
+	}
+
+	prop<T>(value: T, slab: SlabID | undefined = undefined): PropId<T> {
+		let id = this.#cur_prop;
+		this.#props.set(id, value);
+		this.#cur_prop += 1;
+		if (slab != undefined) this.#slabs.get(slab)?.props.push(id);
+		return id as PropId<T>;
+	}
+	has(id: PropId<any>): boolean {
+		return this.#props.has(id);
+	}
+
+	get<T>(id: PropId<T>): T {
+		this.#track_read(id);
+		return this.#props.get(id) as T;
+	}
+	peek<T>(id: PropId<T>): T {
+		return this.#props.get(id) as T;
+	}
+	set<T>(id: PropId<T>, value: T) {
+		this.#track_write(id);
+		this.#mark_dirty(id);
+		this.#props.set(id, value);
+	}
+	update<T>(id: PropId<T>, updater: (value: T) => T) {
+		this.#track_write(id);
+		this.#mark_dirty(id);
+		this.#props.set(id, updater(this.#props.get(id) as T));
+	}
+
+	signal<T>(value: T, slab: SlabID | undefined = undefined): Signal<T> {
+		return new Signal(this, this.prop(value, slab));
+	}
+
+	signal_for<T>(id: PropId<T>): Signal<T> {
+		return new Signal(this, id);
+	}
+
+	effect(fun: () => void, slab: SlabID | undefined = undefined) {
+		this.start_track();
+		fun();
+		let { read, write } = this.end_track();
+		this.#add_effect(fun, read, write, slab);
+	}
+	effect_manual(
+		read: number[],
+		write: number[],
+		fun: () => void,
+		slab: SlabID | undefined = undefined,
+		init_run = true,
+	) {
+		if (init_run) fun();
+		this.#add_effect(fun, read, write, slab);
+	}
+	#add_effect(
+		fun: () => void,
+		read: number[],
+		write: number[],
+		slab: SlabID | undefined = undefined,
+	) {
+		let id = this.#cur_effect;
+		this.#effects.set(id, { fun, read, write });
+		this.#cur_effect += 1;
+		if (slab != undefined) this.#slabs.get(slab)?.effects.push(id);
+		for (let prop of read) {
+			if (!this.#read_effect_map.has(prop)) this.#read_effect_map.set(prop, [id]);
+			else this.#read_effect_map.get(prop)?.push(id);
+		}
+		return id;
+	}
+	computed<T>(fun: () => T, slab: SlabID | undefined = undefined): ROSignal<T> {
+		this.start_track();
+		let value = fun();
+		let { read, write } = this.end_track();
+		if (write.length != 0) throw new Error('computed properties cannot set other properties');
+		let prop = this.prop(value, slab);
+		this.#add_effect(() => this.set(prop, fun()), read, [prop], slab);
+		return new ROSignal(this, prop);
+	}
+
+	get tracking(): boolean {
+		return this.#track_result != null;
+	}
+	start_track() {
+		if (this.#track_result != null) throw new Error('already tracking');
+		this.#track_result = { read: new Set(), write: new Set() };
+	}
+	end_track(): { read: number[]; write: number[] } {
+		if (this.#track_result == null) throw new Error('not tracking');
+		let result = this.#track_result;
+		this.#track_result = null;
+		return { read: Array.from(result.read), write: Array.from(result.write) };
+	}
+	#track_read(id: number) {
+		if (this.#track_result == null) return;
+		this.#track_result.read.add(id);
+	}
+	#track_write(id: number) {
+		if (this.#track_result == null) return;
+		this.#track_result.write.add(id);
+	}
+
+	get updating(): boolean {
+		return this.#is_updating;
+	}
+	#mark_dirty(id: number) {
+		if (this.#is_updating) return;
+		this.#dirty_props.add(id);
+	}
+	force_update(id: PropId<any>) {
+		this.#dirty_props.add(id);
+	}
+	flush_updates() {
+		if (this.#is_updating) return;
+
+		this.#is_updating = true;
+		while (this.#dirty_props.size > 0) {
+			let to_run: number[] = [],
+				visited = new Set<number>(),
+				visiting: number[] = [];
+			for (let prop of this.#dirty_props) {
+				visit(this, prop, to_run, visited, visiting);
+			}
+			this.#dirty_props.clear();
+			for (let i = to_run.length - 1; i >= 0; i -= 1) {
+				try {
+					this.#effects.get(to_run[i])!.fun();
+				} catch (e) {
+					console.error(e);
+				}
+			}
+		}
+		this.#is_updating = false;
+
+		for (let slab of this.#slabs_to_remove) {
+			if (this.#slabs.has(slab)) this.#remove_slab(slab);
+		}
+		this.#slabs_to_remove = [];
+
+		function visit(
+			store: Store,
+			prop: number,
+			to_run: number[],
+			visited: Set<number>,
+			visiting: number[],
+		) {
+			let effects = store.#read_effect_map.get(prop);
+			if (effects == undefined) return;
+			for (let effect of effects) {
+				if (visiting.includes(effect)) {
+					throw new Error('detected circular dependency in an update');
+				}
+				if (visited.has(effect)) continue;
+				visiting.push(effect);
+				for (let prop of store.#effects.get(effect)!.write) {
+					visit(store, prop, to_run, visited, visiting);
+				}
+				visiting.pop();
+				to_run.push(effect);
+				visited.add(effect);
+			}
+		}
+	}
+}
+
+class SignalBase<T> {
+	id: PropId<T>;
+	store: Store;
+	constructor(store: Store, prop: PropId<T>) {
+		this.id = prop;
+		this.store = store;
+	}
+}
+
+export class Signal<T> extends SignalBase<T> {
+	get value(): T {
+		return this.store.get(this.id);
+	}
+	set value(value: T) {
+		this.store.set(this.id, value);
+	}
+	peek(): T {
+		return this.store.peek(this.id);
+	}
+	update(updater: (value: T) => T) {
+		this.store.update(this.id, updater);
+	}
+	as_ro(): ROSignal<T> {
+		return new ROSignal(this.store, this.id);
+	}
+}
+export class ROSignal<T> extends SignalBase<T> {
+	get value(): T {
+		return this.store.get(this.id);
+	}
+	peek(): T {
+		return this.store.peek(this.id);
+	}
+}
+export interface ReadSignal<T> extends SignalBase<T> {
+	value: T;
+	peek(): T;
+}
+
+export class StoreProv {
+	ctx: Context = undefined as any;
+	slab: SlabID | undefined = undefined;
+	init(ctx: Context, slab: SlabID | undefined = undefined) {
+		this.ctx = ctx;
+		this.slab = slab;
+	}
+	get store(): Store {
+		return this.ctx.store;
+	}
+	signal<T>(value: T): Signal<T> {
+		return this.store.signal(value, this.slab);
+	}
+	effect(fun: () => void) {
+		return this.store.effect(fun, this.slab);
+	}
+	computed<T>(fun: () => T): ROSignal<T> {
+		return this.store.computed(fun, this.slab);
+	}
+}

package/src/render_list.ts

@@ -0,0 +1,317 @@
+import type { ChunkBuild, RemovableChunk } from './chunk.ts';
+import type { Context } from './index.ts';
+import type { ReadSignal, Signal } from './reactive.ts';
+
+export function render_list<T, K>(
+	prop: ReadSignal<T[]>,
+	key_fn: ((item: T) => K) | null,
+	tag: string,
+	item_chunk: (build: ChunkBuild, item: T) => void,
+) {
+	return (build: ChunkBuild) =>
+		render_list_core(build, prop, key_fn, false, tag, (build, item, _) =>
+			item_chunk(build, item),
+		);
+}
+
+export function render_list_enumerated<T, K>(
+	prop: ReadSignal<T[]>,
+	key_fn: ((item: T) => K) | null,
+	tag: string,
+	item_chunk: (build: ChunkBuild, item: T, index: Signal<number>) => void,
+) {
+	return (build: ChunkBuild) =>
+		render_list_core(build, prop, key_fn, true, tag, (build, item, index) =>
+			item_chunk(build, item, index!),
+		);
+}
+
+function render_list_core<T, K>(
+	build: ChunkBuild,
+	prop: ReadSignal<T[]>,
+	_key_fn: ((item: T) => K) | null,
+	enumerate: boolean,
+	tag: string,
+	item_chunk: (build: ChunkBuild, item: T, index: Signal<number> | null) => void,
+): void {
+	let key_fn = _key_fn ?? ((item: T) => item as any as K);
+	let list = prop.value;
+
+	let items: (Item | null)[] = new Array(list.length).fill(null);
+	let keys: K[] = new Array(list.length);
+
+	for (let [ind, item_value] of list.entries()) {
+		keys[ind] = key_fn(item_value);
+
+		let item = build_item(build.ctx, tag, item_value, enumerate ? ind : null, item_chunk);
+		build.cur_el.append(item.build.base_el);
+
+		items[ind] = item;
+	}
+
+	let parent = build.cur_el;
+	let patcher = () => {
+		let list = prop.value;
+		let new_keys = list.map(key_fn);
+		let new_items: (Item | null)[] = new Array(list.length).fill(null);
+
+		let patcher = new Patcher(parent, items, new_items, (ind) => {
+			return build_item(build.ctx, tag, list[ind], enumerate ? ind : null, item_chunk);
+		});
+
+		diff(keys, new_keys, patcher);
+
+		items = new_items;
+		keys = new_keys;
+	};
+
+	build.store.effect_manual([prop.id], [], patcher, build.slab, false);
+
+	if (build.slab !== undefined)
+		build.store.add_cleaner(build.slab, () => {
+			for (let item of items) item?.build.remove();
+		});
+}
+
+interface Item {
+	build: RemovableChunk;
+	index?: Signal<number>;
+}
+
+function build_item<T>(
+	ctx: Context,
+	tag: string,
+	item: T,
+	ind: number | null,
+	item_chunk: (build: ChunkBuild, item: T, index: Signal<number> | null) => void,
+): Item {
+	let build = ctx.removable_chunk(tag);
+	let index = ind !== null ? build.signal(ind) : undefined;
+	item_chunk(build, item, index ?? null);
+	return { index, build };
+}
+
+export interface ReconcileOps {
+	insert(new_ind: number, reference: number | null): void;
+	move(new_ind: number, reference: number | null): void;
+	remove(old_ind: number): void;
+	set_index(old_ind: number, new_ind: number): void;
+}
+
+class Patcher implements ReconcileOps {
+	parent: Element;
+	old_items: (Item | null)[];
+	new_items: (Item | null)[];
+	item_builder: (ind: number) => Item;
+
+	constructor(
+		parent: Element,
+		old_items: (Item | null)[],
+		new_items: (Item | null)[],
+		item_builder: (ind: number) => Item,
+	) {
+		this.parent = parent;
+		this.old_items = old_items;
+		this.new_items = new_items;
+		this.item_builder = item_builder;
+	}
+
+	insert(new_ind: number, reference: number | null): void {
+		let item = this.item_builder(new_ind);
+
+		if (reference !== null) {
+			this.new_items[reference]!.build.base_el.before(item.build.base_el);
+		} else this.parent.append(item.build.base_el);
+
+		this.new_items[new_ind] = item;
+	}
+
+	move(new_ind: number, reference: number | null): void {
+		let el = this.new_items[new_ind]!.build.base_el;
+		if (reference !== null) {
+			this.new_items[reference]!.build.base_el.before(el);
+		} else this.parent.append(el);
+	}
+
+	remove(old_ind: number): void {
+		this.old_items[old_ind]!.build.remove();
+	}
+
+	set_index(old_ind: number, new_ind: number): void {
+		let item = this.old_items[old_ind]!;
+		if (item.index !== undefined && old_ind !== new_ind) {
+			item.index.value = new_ind;
+			item.index.store.force_update(item.index.id);
+		}
+		this.new_items[new_ind] = item;
+	}
+}
+
+/**
+ * Computes the diff between two lists and applies operations.
+ */
+export function diff<K>(old_keys: K[], new_keys: K[], ops: ReconcileOps): void {
+	const old_len = old_keys.length;
+	const new_len = new_keys.length;
+
+	// 1. Common Prefix: Skip matching items at the start.
+	let start = 0;
+	while (start < old_len && start < new_len && old_keys[start] === new_keys[start]) {
+		ops.set_index(start, start);
+		start++;
+	}
+
+	// 2. Common Suffix: Skip matching items at the end.
+	let old_end = old_len;
+	let new_end = new_len;
+	while (old_end > start && new_end > start && old_keys[old_end - 1] === new_keys[new_end - 1]) {
+		old_end--;
+		new_end--;
+		ops.set_index(old_end, new_end);
+	}
+
+	// 3. Fast Paths: If we only have insertions or removals left.
+	if (start === old_end) {
+		// Only insertions remain.
+		for (let ind = start; ind < new_end; ind++) {
+			const ref_ind = new_end < new_len ? new_end : null;
+			ops.insert(ind, ref_ind);
+		}
+	} else if (start === new_end) {
+		// Only removals remain.
+		for (let ind = start; ind < old_end; ind++) {
+			ops.remove(ind);
+		}
+	} else {
+		// 4. Map Phase: Build a map of the remaining new items.
+		const new_left = new_end - start;
+		const new_ind_map = new Map<K, number>();
+		const next_duplicate = new Array<number | null>(new_left).fill(null);
+
+		for (let ind = new_end - 1; ind >= start; ind--) {
+			const key = new_keys[ind];
+			if (new_ind_map.has(key)) {
+				next_duplicate[ind - start] = new_ind_map.get(key)!;
+			}
+			new_ind_map.set(key, ind);
+		}
+
+		// Tracks where new items came from. `0` means it's a brand new item.
+		const sources = new Int32Array(new_left);
+		let some_moved = false;
+		let pos = 0;
+		let items_patched = 0;
+
+		// Find which old items are kept, moved, or removed.
+		for (let ind = start; ind < old_end; ind++) {
+			if (items_patched >= new_left) {
+				ops.remove(ind);
+				continue;
+			}
+
+			const key = old_keys[ind];
+			if (new_ind_map.has(key)) {
+				const new_ind = new_ind_map.get(key)!;
+				new_ind_map.delete(key);
+
+				const source_ind = new_ind - start;
+
+				const next_ind = next_duplicate[source_ind];
+				if (next_ind !== null) {
+					new_ind_map.set(new_keys[next_ind], next_ind);
+				}
+
+				// Item is kept. Record its old index (+1 to reserve 0 for "new").
+				sources[source_ind] = ind + 1;
+				ops.set_index(ind, new_ind);
+
+				// If a new index is smaller than a previous one, items crossed paths (moved).
+				if (new_ind >= pos) pos = new_ind;
+				else some_moved = true;
+
+				items_patched++;
+				continue;
+			}
+
+			// Item doesn't exist in the new array
+			ops.remove(ind);
+		}
+
+		// 5. Patch Phase: Apply DOM mutations backwards.
+		if (some_moved) {
+			// Find the longest sequence of items that don't need to move.
+			const seq = longest_increasing_subsequence(sources);
+			let j = seq.length - 1;
+
+			// in reverse to make `reference` always in its final position
+			for (let ind = new_left - 1; ind >= 0; ind--) {
+				const new_ind = start + ind;
+				const ref_ind = new_ind + 1 < new_len ? new_ind + 1 : null;
+
+				// Brand new item.
+				if (sources[ind] === 0) ops.insert(new_ind, ref_ind);
+				// Item exists, but isn't an anchor. MOVE it.
+				else if (j < 0 || ind !== seq[j]) ops.move(new_ind, ref_ind);
+				// Item is an anchor. Leave it exactly where it is.
+				else j--;
+			}
+		} else {
+			// Optimization: Nothing moved, just insert the new items in the gaps.
+			for (let ind = new_left - 1; ind >= 0; ind--) {
+				if (sources[ind] === 0) {
+					const new_ind = start + ind;
+					const ref_ind = new_ind + 1 < new_len ? new_ind + 1 : null;
+					ops.insert(new_ind, ref_ind);
+				}
+			}
+		}
+	}
+}
+
+/**
+ * Calculates the Longest Increasing Subsequence in O(N log N) using Patience Sorting.
+ * Returns the indices of the elements that form the sequence.
+ */
+function longest_increasing_subsequence(a: Int32Array): number[] {
+	const pred = new Int32Array(a.length); // Predecessor tracking for backtracking
+	const result: number[] = []; // Stores indices of the smallest tails seen so far
+
+	for (let ind = 0; ind < a.length; ind++) {
+		if (a[ind] === 0) continue; // Ignore completely new nodes
+
+		const j = result.length;
+		if (j === 0 || a[result[j - 1]] < a[ind]) {
+			// Found a larger item. Extend the subsequence.
+			if (j > 0) pred[ind] = result[j - 1];
+			result.push(ind);
+			continue;
+		}
+
+		// Binary search to find partition point
+		let left = 0;
+		let right = result.length;
+		while (left < right) {
+			const mid = (left + right) >> 1;
+			if (a[result[mid]] < a[ind]) left = mid + 1;
+			else right = mid;
+		}
+		const pos = left;
+
+		if (pos > 0) pred[ind] = result[pos - 1];
+
+		result[pos] = ind;
+	}
+
+	// Backtrack through predecessors to build the exact anchor sequence
+	let u = result.length;
+	const seq = new Array<number>(u);
+	let v = u > 0 ? result[u - 1] : 0;
+
+	while (u > 0) {
+		u--;
+		seq[u] = v;
+		v = pred[v];
+	}
+
+	return seq;
+}