gallery-universe 0.1.0

package/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/dist/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`react`),t=require(`react/jsx-runtime`);var n=-5e3,r=50;function i(e,t,n,r,i=50){let a=e.z-t.z;if(a<=0)return null;let o=800/a;return{...e,screenX:(e.x-t.x)*o+n/2+t.panX,screenY:(e.y-t.y)*o+r/2+t.panY,screenSize:i*o}}function a(e,t){let i=t-r;return Math.max(n,Math.min(e,i))}function o(e,t,n){return{...e,panX:e.panX-t,panY:e.panY-n}}function s(e,t,n,i,o,s,c){let l=-t*6,u=c-r,d=l>0?(u-e.z)*.3:1/0,f=a(e.z+Math.min(l,d),c),p=f-e.z,m=n-o/2,h=i-s/2;return{x:e.x+(m-e.panX)/800*p,y:e.y+(h-e.panY)/800*p,z:f,panX:e.panX,panY:e.panY}}var c=1e3,l=1500,u=70,d=.15,f=Math.PI*(3-Math.sqrt(5));function p(e){let t=[...e].sort(),n=t.length,r=new Map;return t.forEach((e,t)=>{r.set(e,{x:(t-(n-1)/2)*l,y:0})}),r}function m(e,t){if(!t)return Object.fromEntries(e.map(e=>[e.id,{x:e.x,y:e.y,z:e.z}]));let n=e.map(e=>({item:e,key:t(e)})),r=p([...new Set(n.map(e=>e.key))]),i=new Map;for(let{item:e,key:t}of n)i.has(t)||i.set(t,[]),i.get(t).push(e);for(let e of i.values())e.sort((e,t)=>e.id.localeCompare(t.id));let a={};for(let[e,t]of i){let n=r.get(e);t.forEach((e,t)=>{let r=u*Math.sqrt(t+.5),i=t*f;a[e.id]={x:n.x+Math.cos(i)*r,y:n.y+Math.sin(i)*r,z:c}})}return a}function h(e){return Object.fromEntries(e.map(e=>[e.id,{currentX:e.x,targetX:e.x,currentY:e.y,targetY:e.y,currentZ:e.z,targetZ:e.z}]))}function g(e){let t={};for(let n in e){let r=e[n];t[n]={currentX:r.currentX+(r.targetX-r.currentX)*d,targetX:r.targetX,currentY:r.currentY+(r.targetY-r.currentY)*d,targetY:r.targetY,currentZ:r.currentZ+(r.targetZ-r.currentZ)*d,targetZ:r.targetZ}}return t}function _(e,t,n){let r=m(t,n),i={};for(let t in e){let n=r[t]??{x:e[t].currentX,y:e[t].currentY,z:e[t].currentZ};i[t]={...e[t],targetX:n.x,targetY:n.y,targetZ:n.z}}for(let e of t)if(!(e.id in i)){let t=r[e.id]??{x:e.x,y:e.y,z:e.z};i[e.id]={currentX:e.x,targetX:t.x,currentY:e.y,targetY:t.y,currentZ:e.z,targetZ:t.z}}return i}var v=4,y=300,b=300;function x(e,t,n){for(let r=e.length-1;r>=0;r--){let i=e[r],a=i.screenSize/2;if(t>=i.screenX-a&&t<=i.screenX+a&&n>=i.screenY-a&&n<=i.screenY+a)return i}return null}function S(e,t,n){let r=t-e.downX,i=n-e.downY,a=Math.sqrt(r*r+i*i),o=Date.now()-e.downTime;return a<v&&o<y}function C(e){return Date.now()-e<b}var w=-2e3;function T(t){let{items:n,onItemClick:r,onItemDoubleClick:a}=t,[l,u]=(0,e.useState)({x:0,y:0,z:w,panX:0,panY:0}),[d,f]=(0,e.useState)(null),[,m]=(0,e.useState)(null),v=(0,e.useRef)(h(n)),y=(0,e.useRef)(null),b=(0,e.useRef)(0),x=(0,e.useRef)(!1),T=(0,e.useRef)(null),E=(0,e.useRef)(new Map),D=(0,e.useRef)(null),O=n.reduce((e,t)=>Math.max(e,t.z),0),k=(0,e.useCallback)(e=>{D.current=null,m(()=>e),v.current=_(v.current,n,e),e?(E.current=p([...new Set(n.map(e))]),u({x:0,y:0,z:-2500,panX:0,panY:0})):(E.current=new Map,u({x:0,y:0,z:w,panX:0,panY:0}))},[n]),A=(0,e.useCallback)(e=>{E.current.has(e)&&(D.current=e)},[]),j=(0,e.useCallback)(e=>{f(e.id),r?.(e)},[r]),M=(0,e.useCallback)(e=>{a?.(e)},[a]),N=(0,e.useCallback)((e,t)=>{if(v.current=g(v.current),D.current){let e=E.current.get(D.current);if(e){let t=c-l.z;if(t>0){let n=800/t,r=-(e.x-l.x)*n,i=-(e.y-l.y)*n,a=l.panX+(r-l.panX)*.08,o=l.panY+(i-l.panY)*.08;Math.abs(a-r)<.5&&Math.abs(o-i)<.5?(D.current=null,u(e=>({...e,panX:r,panY:i}))):u(e=>({...e,panX:a,panY:o}))}}}let r=[];for(let a of n){let n=v.current[a.id],o=i(n?{...a,x:n.currentX,y:n.currentY,z:n.currentZ}:a,l,e,t);o&&r.push(o)}return r.sort((e,t)=>t.z-l.z-(e.z-l.z)),r},[n,l]);function P(e){y.current={downX:e.clientX,downY:e.clientY,downTime:Date.now(),isDragging:!1}}function F(e){if(!y.current)return;let t=e.clientX-y.current.downX,n=e.clientY-y.current.downY;Math.sqrt(t*t+n*n)>4&&(y.current.isDragging=!0),y.current.isDragging&&(u(e=>o(e,-t,-n)),y.current={...y.current,downX:e.clientX,downY:e.clientY})}function I(e){y.current=null}function L(e){e.preventDefault();let t=e.currentTarget.getBoundingClientRect();if(e.ctrlKey){let n=Math.sign(e.deltaY)*Math.min(Math.abs(e.deltaY),15),r=e.clientX-t.left,i=e.clientY-t.top;u(e=>s(e,n,r,i,t.width,t.height,O))}else u(t=>o(t,e.deltaX,e.deltaY))}function R(e){if(e.touches.length===1)y.current={downX:e.touches[0].clientX,downY:e.touches[0].clientY,downTime:Date.now(),isDragging:!1},T.current=null;else if(e.touches.length===2){let t=e.touches[1].clientX-e.touches[0].clientX,n=e.touches[1].clientY-e.touches[0].clientY;T.current=Math.sqrt(t*t+n*n)}}function z(e){if(e.preventDefault(),e.touches.length===1&&y.current){let t=e.touches[0].clientX-y.current.downX,n=e.touches[0].clientY-y.current.downY;y.current.isDragging=!0,u(e=>o(e,-t,-n)),y.current={...y.current,downX:e.touches[0].clientX,downY:e.touches[0].clientY}}else if(e.touches.length===2){let t=e.touches[1].clientX-e.touches[0].clientX,n=e.touches[1].clientY-e.touches[0].clientY,r=Math.sqrt(t*t+n*n),i=(e.touches[0].clientX+e.touches[1].clientX)/2,a=(e.touches[0].clientY+e.touches[1].clientY)/2;if(T.current!==null){let t=T.current-r,n=Math.sign(t)*Math.min(Math.abs(t*2),15),o=e.currentTarget.getBoundingClientRect();u(e=>s(e,n,i-o.left,a-o.top,o.width,o.height,O))}T.current=r}}function B(e){if(e.changedTouches.length===1&&y.current){let t=e.changedTouches[0];S(y.current,t.clientX,t.clientY)&&(x.current=C(b.current),b.current=Date.now()),y.current=null}}function V(e){}return{renderItems:[],camera:l,selectedId:d,setGroupBy:k,navigateToGroup:A,animationState:v.current,stepAnimationFrame:N,handleItemClick:j,handleItemDoubleClick:M,prevTapWasClick:x,canvasHandlers:{onPointerDown:P,onPointerMove:F,onPointerUp:I,onWheel:L,onTouchStart:R,onTouchMove:z,onTouchEnd:B,onDoubleClick:V}}}function E(e){let{ctx:t,width:n,height:r,renderItems:i,selectedId:a,groupBy:o,renderItem:s}=e;t.clearRect(0,0,n,r);for(let e of i)s(t,e,e.id===a);if(o){let e=new Set,n=new Map;for(let e of i){let t=o(e);n.has(t)||n.set(t,{x:0,y:0,count:0});let r=n.get(t);r.x+=e.screenX,r.y+=e.screenY,r.count++}t.font=`bold 14px sans-serif`,t.fillStyle=`rgba(0,0,0,0.6)`,t.textAlign=`center`;for(let[r,i]of n)e.has(r)||(e.add(r),t.fillText(r,i.x/i.count,i.y/i.count-40))}}function D({core:n,width:r,height:i,renderItem:a,groupBy:o=null}){let s=(0,e.useRef)(null),c=(0,e.useRef)(0),l=(0,e.useRef)([]);return(0,e.useEffect)(()=>{if(!s.current)return;function e(){let t=s.current;if(!t)return;let u=t.getContext(`2d`);if(!u)return;let d=n.stepAnimationFrame(r,i);l.current=d,E({ctx:u,width:r,height:i,renderItems:d,selectedId:n.selectedId,groupBy:o,renderItem:a}),c.current=requestAnimationFrame(e)}return c.current=requestAnimationFrame(e),()=>cancelAnimationFrame(c.current)},[n,r,i,a,o]),(0,e.useEffect)(()=>{let e=s.current;if(!e)return;let{onPointerDown:t,onPointerMove:r,onPointerUp:i,onWheel:a,onTouchStart:o,onTouchMove:c,onTouchEnd:u}=n.canvasHandlers,d=t=>{let r=e.getBoundingClientRect(),a=t.clientX-r.left,o=t.clientY-r.top;i(t);let s=x(l.current,a,o);s&&n.handleItemClick(s)},f=t=>{n.canvasHandlers.onDoubleClick(t);let r=e.getBoundingClientRect(),i=t.clientX-r.left,a=t.clientY-r.top,o=x(l.current,i,a);o&&n.handleItemDoubleClick(o)},p=t=>{if(u(t),t.changedTouches.length===1){let r=t.changedTouches[0],i=e.getBoundingClientRect(),a=r.clientX-i.left,o=r.clientY-i.top,s=x(l.current,a,o);s&&(n.prevTapWasClick.current?n.handleItemDoubleClick(s):n.handleItemClick(s))}};return e.addEventListener(`pointerdown`,t),e.addEventListener(`pointermove`,r),e.addEventListener(`pointerup`,d),e.addEventListener(`wheel`,a,{passive:!1}),e.addEventListener(`touchstart`,o,{passive:!0}),e.addEventListener(`touchmove`,c,{passive:!1}),e.addEventListener(`touchend`,p),e.addEventListener(`dblclick`,f),()=>{e.removeEventListener(`pointerdown`,t),e.removeEventListener(`pointermove`,r),e.removeEventListener(`pointerup`,d),e.removeEventListener(`wheel`,a),e.removeEventListener(`touchstart`,o),e.removeEventListener(`touchmove`,c),e.removeEventListener(`touchend`,p),e.removeEventListener(`dblclick`,f)}},[n,o,a,r,i]),(0,t.jsx)(`canvas`,{ref:s,width:r,height:i,style:{display:`block`,touchAction:`none`}})}var O=new Map;function k(e){if(O.has(e))return O.get(e);let t=new Image;return t.src=e,O.set(e,t),t}exports.UniverseCanvas=D,exports.loadImage=k,exports.useUniverseCore=T;

package/dist/index.js

@@ -0,0 +1,393 @@
+import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+var a = -5e3, o = 50;
+function s(e, t, n, r, i = 50) {
+	let a = e.z - t.z;
+	if (a <= 0) return null;
+	let o = 800 / a;
+	return {
+		...e,
+		screenX: (e.x - t.x) * o + n / 2 + t.panX,
+		screenY: (e.y - t.y) * o + r / 2 + t.panY,
+		screenSize: i * o
+	};
+}
+function c(e, t) {
+	let n = t - o;
+	return Math.max(a, Math.min(e, n));
+}
+function l(e, t, n) {
+	return {
+		...e,
+		panX: e.panX - t,
+		panY: e.panY - n
+	};
+}
+function u(e, t, n, r, i, a, s) {
+	let l = -t * 6, u = s - o, d = l > 0 ? (u - e.z) * .3 : Infinity, f = c(e.z + Math.min(l, d), s), p = f - e.z, m = n - i / 2, h = r - a / 2;
+	return {
+		x: e.x + (m - e.panX) / 800 * p,
+		y: e.y + (h - e.panY) / 800 * p,
+		z: f,
+		panX: e.panX,
+		panY: e.panY
+	};
+}
+//#endregion
+//#region src/core/layout.ts
+var d = 1e3, f = 1500, p = 70, m = .15, h = Math.PI * (3 - Math.sqrt(5));
+function g(e) {
+	let t = [...e].sort(), n = t.length, r = /* @__PURE__ */ new Map();
+	return t.forEach((e, t) => {
+		r.set(e, {
+			x: (t - (n - 1) / 2) * f,
+			y: 0
+		});
+	}), r;
+}
+function _(e, t) {
+	if (!t) return Object.fromEntries(e.map((e) => [e.id, {
+		x: e.x,
+		y: e.y,
+		z: e.z
+	}]));
+	let n = e.map((e) => ({
+		item: e,
+		key: t(e)
+	})), r = g([...new Set(n.map((e) => e.key))]), i = /* @__PURE__ */ new Map();
+	for (let { item: e, key: t } of n) i.has(t) || i.set(t, []), i.get(t).push(e);
+	for (let e of i.values()) e.sort((e, t) => e.id.localeCompare(t.id));
+	let a = {};
+	for (let [e, t] of i) {
+		let n = r.get(e);
+		t.forEach((e, t) => {
+			let r = p * Math.sqrt(t + .5), i = t * h;
+			a[e.id] = {
+				x: n.x + Math.cos(i) * r,
+				y: n.y + Math.sin(i) * r,
+				z: d
+			};
+		});
+	}
+	return a;
+}
+function v(e) {
+	return Object.fromEntries(e.map((e) => [e.id, {
+		currentX: e.x,
+		targetX: e.x,
+		currentY: e.y,
+		targetY: e.y,
+		currentZ: e.z,
+		targetZ: e.z
+	}]));
+}
+function y(e) {
+	let t = {};
+	for (let n in e) {
+		let r = e[n];
+		t[n] = {
+			currentX: r.currentX + (r.targetX - r.currentX) * m,
+			targetX: r.targetX,
+			currentY: r.currentY + (r.targetY - r.currentY) * m,
+			targetY: r.targetY,
+			currentZ: r.currentZ + (r.targetZ - r.currentZ) * m,
+			targetZ: r.targetZ
+		};
+	}
+	return t;
+}
+function b(e, t, n) {
+	let r = _(t, n), i = {};
+	for (let t in e) {
+		let n = r[t] ?? {
+			x: e[t].currentX,
+			y: e[t].currentY,
+			z: e[t].currentZ
+		};
+		i[t] = {
+			...e[t],
+			targetX: n.x,
+			targetY: n.y,
+			targetZ: n.z
+		};
+	}
+	for (let e of t) if (!(e.id in i)) {
+		let t = r[e.id] ?? {
+			x: e.x,
+			y: e.y,
+			z: e.z
+		};
+		i[e.id] = {
+			currentX: e.x,
+			targetX: t.x,
+			currentY: e.y,
+			targetY: t.y,
+			currentZ: e.z,
+			targetZ: t.z
+		};
+	}
+	return i;
+}
+//#endregion
+//#region src/core/interaction.ts
+var x = 4, S = 300, C = 300;
+function w(e, t, n) {
+	for (let r = e.length - 1; r >= 0; r--) {
+		let i = e[r], a = i.screenSize / 2;
+		if (t >= i.screenX - a && t <= i.screenX + a && n >= i.screenY - a && n <= i.screenY + a) return i;
+	}
+	return null;
+}
+function T(e, t, n) {
+	let r = t - e.downX, i = n - e.downY, a = Math.sqrt(r * r + i * i), o = Date.now() - e.downTime;
+	return a < x && o < S;
+}
+function E(e) {
+	return Date.now() - e < C;
+}
+//#endregion
+//#region src/core/index.ts
+var D = -2e3;
+function O(t) {
+	let { items: i, onItemClick: a, onItemDoubleClick: o } = t, [c, f] = r({
+		x: 0,
+		y: 0,
+		z: D,
+		panX: 0,
+		panY: 0
+	}), [p, m] = r(null), [, h] = r(null), _ = n(v(i)), x = n(null), S = n(0), C = n(!1), w = n(null), O = n(/* @__PURE__ */ new Map()), k = n(null), A = i.reduce((e, t) => Math.max(e, t.z), 0), j = e((e) => {
+		k.current = null, h(() => e), _.current = b(_.current, i, e), e ? (O.current = g([...new Set(i.map(e))]), f({
+			x: 0,
+			y: 0,
+			z: -2500,
+			panX: 0,
+			panY: 0
+		})) : (O.current = /* @__PURE__ */ new Map(), f({
+			x: 0,
+			y: 0,
+			z: D,
+			panX: 0,
+			panY: 0
+		}));
+	}, [i]), M = e((e) => {
+		O.current.has(e) && (k.current = e);
+	}, []), N = e((e) => {
+		m(e.id), a?.(e);
+	}, [a]), P = e((e) => {
+		o?.(e);
+	}, [o]), F = e((e, t) => {
+		if (_.current = y(_.current), k.current) {
+			let e = O.current.get(k.current);
+			if (e) {
+				let t = d - c.z;
+				if (t > 0) {
+					let n = 800 / t, r = -(e.x - c.x) * n, i = -(e.y - c.y) * n, a = c.panX + (r - c.panX) * .08, o = c.panY + (i - c.panY) * .08;
+					Math.abs(a - r) < .5 && Math.abs(o - i) < .5 ? (k.current = null, f((e) => ({
+						...e,
+						panX: r,
+						panY: i
+					}))) : f((e) => ({
+						...e,
+						panX: a,
+						panY: o
+					}));
+				}
+			}
+		}
+		let n = [];
+		for (let r of i) {
+			let i = _.current[r.id], a = s(i ? {
+				...r,
+				x: i.currentX,
+				y: i.currentY,
+				z: i.currentZ
+			} : r, c, e, t);
+			a && n.push(a);
+		}
+		return n.sort((e, t) => t.z - c.z - (e.z - c.z)), n;
+	}, [i, c]);
+	function I(e) {
+		x.current = {
+			downX: e.clientX,
+			downY: e.clientY,
+			downTime: Date.now(),
+			isDragging: !1
+		};
+	}
+	function L(e) {
+		if (!x.current) return;
+		let t = e.clientX - x.current.downX, n = e.clientY - x.current.downY;
+		Math.sqrt(t * t + n * n) > 4 && (x.current.isDragging = !0), x.current.isDragging && (f((e) => l(e, -t, -n)), x.current = {
+			...x.current,
+			downX: e.clientX,
+			downY: e.clientY
+		});
+	}
+	function R(e) {
+		x.current = null;
+	}
+	function z(e) {
+		e.preventDefault();
+		let t = e.currentTarget.getBoundingClientRect();
+		if (e.ctrlKey) {
+			let n = Math.sign(e.deltaY) * Math.min(Math.abs(e.deltaY), 15), r = e.clientX - t.left, i = e.clientY - t.top;
+			f((e) => u(e, n, r, i, t.width, t.height, A));
+		} else f((t) => l(t, e.deltaX, e.deltaY));
+	}
+	function B(e) {
+		if (e.touches.length === 1) x.current = {
+			downX: e.touches[0].clientX,
+			downY: e.touches[0].clientY,
+			downTime: Date.now(),
+			isDragging: !1
+		}, w.current = null;
+		else if (e.touches.length === 2) {
+			let t = e.touches[1].clientX - e.touches[0].clientX, n = e.touches[1].clientY - e.touches[0].clientY;
+			w.current = Math.sqrt(t * t + n * n);
+		}
+	}
+	function V(e) {
+		if (e.preventDefault(), e.touches.length === 1 && x.current) {
+			let t = e.touches[0].clientX - x.current.downX, n = e.touches[0].clientY - x.current.downY;
+			x.current.isDragging = !0, f((e) => l(e, -t, -n)), x.current = {
+				...x.current,
+				downX: e.touches[0].clientX,
+				downY: e.touches[0].clientY
+			};
+		} else if (e.touches.length === 2) {
+			let t = e.touches[1].clientX - e.touches[0].clientX, n = e.touches[1].clientY - e.touches[0].clientY, r = Math.sqrt(t * t + n * n), i = (e.touches[0].clientX + e.touches[1].clientX) / 2, a = (e.touches[0].clientY + e.touches[1].clientY) / 2;
+			if (w.current !== null) {
+				let t = w.current - r, n = Math.sign(t) * Math.min(Math.abs(t * 2), 15), o = e.currentTarget.getBoundingClientRect();
+				f((e) => u(e, n, i - o.left, a - o.top, o.width, o.height, A));
+			}
+			w.current = r;
+		}
+	}
+	function H(e) {
+		if (e.changedTouches.length === 1 && x.current) {
+			let t = e.changedTouches[0];
+			T(x.current, t.clientX, t.clientY) && (C.current = E(S.current), S.current = Date.now()), x.current = null;
+		}
+	}
+	function U(e) {}
+	return {
+		renderItems: [],
+		camera: c,
+		selectedId: p,
+		setGroupBy: j,
+		navigateToGroup: M,
+		animationState: _.current,
+		stepAnimationFrame: F,
+		handleItemClick: N,
+		handleItemDoubleClick: P,
+		prevTapWasClick: C,
+		canvasHandlers: {
+			onPointerDown: I,
+			onPointerMove: L,
+			onPointerUp: R,
+			onWheel: z,
+			onTouchStart: B,
+			onTouchMove: V,
+			onTouchEnd: H,
+			onDoubleClick: U
+		}
+	};
+}
+//#endregion
+//#region src/renderer/draw.ts
+function k(e) {
+	let { ctx: t, width: n, height: r, renderItems: i, selectedId: a, groupBy: o, renderItem: s } = e;
+	t.clearRect(0, 0, n, r);
+	for (let e of i) s(t, e, e.id === a);
+	if (o) {
+		let e = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Map();
+		for (let e of i) {
+			let t = o(e);
+			n.has(t) || n.set(t, {
+				x: 0,
+				y: 0,
+				count: 0
+			});
+			let r = n.get(t);
+			r.x += e.screenX, r.y += e.screenY, r.count++;
+		}
+		t.font = "bold 14px sans-serif", t.fillStyle = "rgba(0,0,0,0.6)", t.textAlign = "center";
+		for (let [r, i] of n) e.has(r) || (e.add(r), t.fillText(r, i.x / i.count, i.y / i.count - 40));
+	}
+}
+//#endregion
+//#region src/renderer/UniverseCanvas.tsx
+function A({ core: e, width: r, height: a, renderItem: o, groupBy: s = null }) {
+	let c = n(null), l = n(0), u = n([]);
+	return t(() => {
+		if (!c.current) return;
+		function t() {
+			let n = c.current;
+			if (!n) return;
+			let i = n.getContext("2d");
+			if (!i) return;
+			let d = e.stepAnimationFrame(r, a);
+			u.current = d, k({
+				ctx: i,
+				width: r,
+				height: a,
+				renderItems: d,
+				selectedId: e.selectedId,
+				groupBy: s,
+				renderItem: o
+			}), l.current = requestAnimationFrame(t);
+		}
+		return l.current = requestAnimationFrame(t), () => cancelAnimationFrame(l.current);
+	}, [
+		e,
+		r,
+		a,
+		o,
+		s
+	]), t(() => {
+		let t = c.current;
+		if (!t) return;
+		let { onPointerDown: n, onPointerMove: r, onPointerUp: i, onWheel: a, onTouchStart: o, onTouchMove: s, onTouchEnd: l } = e.canvasHandlers, d = (n) => {
+			let r = t.getBoundingClientRect(), a = n.clientX - r.left, o = n.clientY - r.top;
+			i(n);
+			let s = w(u.current, a, o);
+			s && e.handleItemClick(s);
+		}, f = (n) => {
+			e.canvasHandlers.onDoubleClick(n);
+			let r = t.getBoundingClientRect(), i = n.clientX - r.left, a = n.clientY - r.top, o = w(u.current, i, a);
+			o && e.handleItemDoubleClick(o);
+		}, p = (n) => {
+			if (l(n), n.changedTouches.length === 1) {
+				let r = n.changedTouches[0], i = t.getBoundingClientRect(), a = r.clientX - i.left, o = r.clientY - i.top, s = w(u.current, a, o);
+				s && (e.prevTapWasClick.current ? e.handleItemDoubleClick(s) : e.handleItemClick(s));
+			}
+		};
+		return t.addEventListener("pointerdown", n), t.addEventListener("pointermove", r), t.addEventListener("pointerup", d), t.addEventListener("wheel", a, { passive: !1 }), t.addEventListener("touchstart", o, { passive: !0 }), t.addEventListener("touchmove", s, { passive: !1 }), t.addEventListener("touchend", p), t.addEventListener("dblclick", f), () => {
+			t.removeEventListener("pointerdown", n), t.removeEventListener("pointermove", r), t.removeEventListener("pointerup", d), t.removeEventListener("wheel", a), t.removeEventListener("touchstart", o), t.removeEventListener("touchmove", s), t.removeEventListener("touchend", p), t.removeEventListener("dblclick", f);
+		};
+	}, [
+		e,
+		s,
+		o,
+		r,
+		a
+	]), /* @__PURE__ */ i("canvas", {
+		ref: c,
+		width: r,
+		height: a,
+		style: {
+			display: "block",
+			touchAction: "none"
+		}
+	});
+}
+//#endregion
+//#region src/renderer/loadImage.ts
+var j = /* @__PURE__ */ new Map();
+function M(e) {
+	if (j.has(e)) return j.get(e);
+	let t = new Image();
+	return t.src = e, j.set(e, t), t;
+}
+//#endregion
+export { A as UniverseCanvas, M as loadImage, O as useUniverseCore };

package/dist/types/core/camera.d.ts

@@ -0,0 +1,18 @@
+import type { Camera, UniverseItem, RenderItem } from './types';
+export declare const FOCAL_LENGTH = 800;
+export declare const ITEM_WORLD_SIZE = 50;
+export declare function projectItem<T extends Record<string, unknown>>(item: UniverseItem<T>, camera: Camera, canvasWidth: number, canvasHeight: number, itemWorldSize?: number): RenderItem<T> | null;
+export declare function clampCameraZ(z: number, deepestItemZ: number): number;
+export declare function panCamera(camera: Camera, dx: number, dy: number): Camera;
+/**
+ * Zoom by moving camera.z, keeping the world point under the cursor fixed on screen.
+ *
+ * Derivation: for a point P at world (px, py, pz), its screen x is:
+ *   sx = (px - cx) * F / (pz - cz) + W/2
+ * We want sx to remain constant as cz changes by dz. Differentiating wrt cz:
+ *   d(sx)/d(cz) = (px - cx) * F / (pz - cz)^2
+ * To compensate, shift cx by:
+ *   dcx = (sx - W/2) / F * dz   (uses screen offset and focal length)
+ * Same for y.
+ */
+export declare function zoomCamera(camera: Camera, wheelDelta: number, cursorScreenX: number, cursorScreenY: number, canvasWidth: number, canvasHeight: number, deepestItemZ: number): Camera;

package/dist/types/core/index.d.ts

@@ -0,0 +1,17 @@
+import type { RefObject } from 'react';
+import type { UniverseItem, RenderItem, UniverseCore } from './types';
+import { type AnimationState } from './layout';
+export type { Camera, UniverseItem, RenderItem, UniverseCore } from './types';
+interface UseUniverseCoreOptions<T extends Record<string, unknown>> {
+    items: UniverseItem<T>[];
+    onItemClick?: (item: UniverseItem<T>) => void;
+    onItemDoubleClick?: (item: UniverseItem<T>) => void;
+}
+export interface UniverseCoreExtended<T extends Record<string, unknown>> extends UniverseCore<T> {
+    animationState: AnimationState;
+    stepAnimationFrame: (width: number, height: number) => RenderItem<T>[];
+    handleItemClick: (item: UniverseItem<T>) => void;
+    handleItemDoubleClick: (item: UniverseItem<T>) => void;
+    prevTapWasClick: RefObject<boolean>;
+}
+export declare function useUniverseCore<T extends Record<string, unknown>>(options: UseUniverseCoreOptions<T>): UniverseCoreExtended<T>;

package/dist/types/core/interaction.d.ts

@@ -0,0 +1,17 @@
+import type { RenderItem } from './types';
+export interface PointerState {
+    downX: number;
+    downY: number;
+    downTime: number;
+    isDragging: boolean;
+}
+/**
+ * Find the topmost item at screen coordinates (x, y).
+ * items is assumed sorted back-to-front, so we reverse-iterate
+ * to find the frontmost hit first.
+ */
+export declare function hitTest<T extends Record<string, unknown>>(items: RenderItem<T>[], x: number, y: number): RenderItem<T> | null;
+/** Returns true if the pointer-up event qualifies as a click (not a drag). */
+export declare function isClick(state: PointerState, upX: number, upY: number): boolean;
+/** Returns true if the current tap follows a previous tap within the double-tap threshold. */
+export declare function isDoubleTap(lastTapTime: number): boolean;

package/dist/types/core/layout.d.ts

@@ -0,0 +1,37 @@
+import type { UniverseItem } from './types';
+export interface AnimationState {
+    [id: string]: {
+        currentX: number;
+        targetX: number;
+        currentY: number;
+        targetY: number;
+        currentZ: number;
+        targetZ: number;
+    };
+}
+export declare const GROUP_Z = 1000;
+export declare const GROUP_SPACING = 1500;
+/**
+ * Compute cluster center x positions along the x axis, sorted alphabetically.
+ * Exported so core/index.ts can use the same formula for navigateToGroup.
+ */
+export declare function clusterCenters(groupKeys: string[]): Map<string, {
+    x: number;
+    y: number;
+}>;
+/**
+ * Compute target x/y/z for each item.
+ * Scatter: original x/y/z.
+ * Grouped: grid position within cluster center + GROUP_Z.
+ */
+export declare function computeClusterTargets<T extends Record<string, unknown>>(items: UniverseItem<T>[], groupBy: ((item: UniverseItem<T>) => string) | null): Record<string, {
+    x: number;
+    y: number;
+    z: number;
+}>;
+/** Build initial animation state from items (current = original position) */
+export declare function initAnimationState<T extends Record<string, unknown>>(items: UniverseItem<T>[]): AnimationState;
+/** Apply one lerp step to every item. Returns a new state object. */
+export declare function stepAnimation(state: AnimationState): AnimationState;
+/** Update all target positions (called when groupBy changes) */
+export declare function updateTargets<T extends Record<string, unknown>>(state: AnimationState, items: UniverseItem<T>[], groupBy: ((item: UniverseItem<T>) => string) | null): AnimationState;

package/dist/types/core/types.d.ts

@@ -0,0 +1,38 @@
+export interface Camera {
+    x: number;
+    y: number;
+    z: number;
+    panX: number;
+    panY: number;
+}
+export interface UniverseItem<T extends Record<string, unknown> = Record<string, unknown>> {
+    id: string;
+    x: number;
+    y: number;
+    z: number;
+    data: T;
+}
+export interface RenderItem<T extends Record<string, unknown> = Record<string, unknown>> extends UniverseItem<T> {
+    screenX: number;
+    screenY: number;
+    screenSize: number;
+}
+export interface UniverseCore<T extends Record<string, unknown> = Record<string, unknown>> {
+    renderItems: RenderItem<T>[];
+    camera: Camera;
+    selectedId: string | null;
+    setGroupBy: (fn: ((item: UniverseItem<T>) => string) | null) => void;
+    navigateToGroup: (key: string) => void;
+    handleItemClick: (item: UniverseItem<T>) => void;
+    handleItemDoubleClick: (item: UniverseItem<T>) => void;
+    canvasHandlers: {
+        onPointerDown: (e: PointerEvent) => void;
+        onPointerMove: (e: PointerEvent) => void;
+        onPointerUp: (e: PointerEvent) => void;
+        onWheel: (e: WheelEvent) => void;
+        onTouchStart: (e: TouchEvent) => void;
+        onTouchMove: (e: TouchEvent) => void;
+        onTouchEnd: (e: TouchEvent) => void;
+        onDoubleClick: (e: MouseEvent) => void;
+    };
+}

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export { useUniverseCore } from './core';
+export { UniverseCanvas, loadImage } from './renderer';
+export type { UniverseItem, RenderItem, UniverseCore, Camera } from './core';

package/dist/types/renderer/UniverseCanvas.d.ts

@@ -0,0 +1,18 @@
+import type { RenderItem, UniverseCore, UniverseItem } from '../core/types';
+interface UniverseCanvasProps<T extends Record<string, unknown>> {
+    core: UniverseCore<T> & {
+        stepAnimationFrame: (width: number, height: number) => RenderItem<T>[];
+        handleItemClick: (item: UniverseItem<T>) => void;
+        handleItemDoubleClick: (item: UniverseItem<T>) => void;
+        prevTapWasClick: {
+            current: boolean;
+        };
+        animationState: unknown;
+    };
+    width: number;
+    height: number;
+    renderItem: (ctx: CanvasRenderingContext2D, item: RenderItem<T>, isSelected: boolean) => void;
+    groupBy?: ((item: RenderItem<T>) => string) | null;
+}
+export declare function UniverseCanvas<T extends Record<string, unknown>>({ core, width, height, renderItem, groupBy, }: UniverseCanvasProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/renderer/draw.d.ts

@@ -0,0 +1,12 @@
+import type { RenderItem } from '../core/types';
+interface DrawFrameOptions<T extends Record<string, unknown>> {
+    ctx: CanvasRenderingContext2D;
+    width: number;
+    height: number;
+    renderItems: RenderItem<T>[];
+    selectedId: string | null;
+    groupBy: ((item: RenderItem<T>) => string) | null;
+    renderItem: (ctx: CanvasRenderingContext2D, item: RenderItem<T>, isSelected: boolean) => void;
+}
+export declare function drawFrame<T extends Record<string, unknown>>(options: DrawFrameOptions<T>): void;
+export {};

package/dist/types/renderer/index.d.ts

@@ -0,0 +1,2 @@
+export { UniverseCanvas } from './UniverseCanvas';
+export { loadImage } from './loadImage';

package/dist/types/renderer/loadImage.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Load and cache an image by URL.
+ * Returns the same HTMLImageElement on repeated calls with the same URL.
+ * Safe to call inside a renderItem callback on every frame.
+ */
+export declare function loadImage(url: string): HTMLImageElement;

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "gallery-universe",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "A zoomable, clusterable 3D canvas for displaying large collections of items",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/types/index.d.ts"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && tsc -p tsconfig.lib.json",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "@eslint/js": "^9.39.4",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^24.12.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/ui": "^4.1.2",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "jsdom": "^29.0.1",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.57.0",
+    "vite": "^8.0.1",
+    "vitest": "^4.1.2"
+  }
+}