@trokster/l-cursor 0.0.1

package/dist/viz/ZoomScene.svelte

@@ -0,0 +1,625 @@
+<script>
+	import { onMount } from 'svelte';
+	import { createCamera } from '../core/camera.js';
+	import { createEngine } from '../core/engine.js';
+	import { createInteraction } from '../core/interaction.js';
+
+	// Generic, display-agnostic zoom surface. Nodes are drawn ONCE in world
+	// coordinates inside a single <g transform>; only that group transform animates
+	// per frame (GPU-composited), so pan/zoom stay smooth no matter the node count.
+	// LOD, culling and referential rebasing live in the engine.
+	let {
+		index,
+		layout,
+		config = {},
+		palette = depthColor,
+		showLabels = true,
+		showHud = true,
+		title = '',
+		circleFill = 'white', // 'depth' fills nested circles; else light containers
+		nodeStyle = 'rings', // 'rings' = the radial fractal (hairline ring + core)
+		homeHref = '/',
+		accent = '#0f172a',
+		// Portal: a snippet rendered inside the square inscribed in each circle's
+		// core. It lays out in a fixed 256x256 design space scaled to fit the node,
+		// and receives { item, px } — px is its live on-screen side in CSS pixels,
+		// so the component can adapt its own detail to the resolution it has.
+		portal = null,
+		portalMinPx = 26, // don't mount portals below this on-screen size
+		portalMaxPx = 1000, // ...or above it: the card hands off to its children's
+		onframe = null
+	} = $props();
+
+	let svgEl;
+	let W = 0;
+	let H = 0;
+	let view = $state({ items: [], edges: null, rootId: null, cam: { x: 0, y: 0, sx: 1, sy: 1 } });
+	let crumbs = $state([]);
+	let hoverId = $state(null);
+
+	const camera = createCamera({ x: 0, y: 0, scale: 1 });
+	let engine;
+	let interaction;
+	let raf = 0;
+	let dirty = true;
+	let lastT = 0;
+	let flyId = null; // node we are springing toward (dive / breadcrumb)
+	let lastRoot = null;
+	// Enter-fade: anything appearing for the first time (esp. the surroundings
+	// revealed by an ascend re-root) eases in instead of popping — "the world
+	// fades in around you", never a full-scene redraw.
+	const enterAt = new Map();
+	const edgeEnterAt = new Map();
+	let fadeActive = false;
+
+	function depthColor(depth) {
+		const hues = [210, 160, 35, 280, 0, 130];
+		const hue = hues[depth % hues.length];
+		return `hsl(${hue} 70% ${Math.max(45, 88 - depth * 8)}%)`;
+	}
+	const lerp = (a, b, t) => a + (b - a) * t;
+	const clamp = (v, a, b) => (v < a ? a : v > b ? b : v);
+
+	// ---------- visual language (only the generic 'blob' fallback uses these) ----------
+	const OPEN_FILL = () => (circleFill === 'depth' ? 0.2 : 0.07);
+	function fillOpacity(it) {
+		return it.alpha * lerp(0.84, OPEN_FILL(), it.openness);
+	}
+	function strokeOpacity(it) {
+		return it.alpha * lerp(0.7, 0.95, it.openness);
+	}
+	function labelOpacity(it) {
+		// parent label clears out quickly once children start appearing, so the
+		// two never sit overlapped at rest
+		return it.alpha * clamp(1 - it.openness * 2.4, 0, 1);
+	}
+	function shortLabel(id) {
+		const s = String(id);
+		return s.length > 14 ? s.slice(0, 6) + '…' + s.slice(-5) : s;
+	}
+
+	// Portal geometry: the square inscribed in the node's core circle (core is
+	// 0.5R, inscribed side = 0.5R·√2 ≈ 0.707R). Portals live in an HTML overlay
+	// ABOVE the svg, positioned per frame in screen pixels — components lay out
+	// at native resolution (crisp text, real CSS), no foreignObject rasters.
+	function portalSidePx(it) {
+		return it.r != null ? 0.7071 * it.ext : 0;
+	}
+	function hasPortal(it) {
+		const s = portalSidePx(it);
+		// above max the card is an unreadable giant — its children's cards carry
+		// the content from there (the semantic-zoom handoff)
+		return portal != null && it.r != null && s >= portalMinPx && s <= portalMaxPx;
+	}
+	// screen-space geometry for the visible portals of the current frame
+	let portalItems = $derived(
+		portal == null
+			? []
+			: view.items.filter(hasPortal).map((it) => {
+					const side = portalSidePx(it);
+					const fadeIn = clamp((side - portalMinPx) / (portalMinPx * 0.6), 0, 1);
+					const fadeOut = clamp((portalMaxPx - side) / (portalMaxPx * 0.25), 0, 1);
+					return {
+						id: it.id,
+						item: it,
+						x: it.cx * view.cam.sx + view.cam.x - side / 2,
+						y: it.cy * view.cam.sy + view.cam.y - side / 2,
+						side,
+						px: Math.round(side / 8) * 8, // quantized: content re-renders on meaningful changes
+						alpha: it.alpha * fadeIn * fadeOut
+					};
+				})
+	);
+
+	function transformStr(cam) {
+		return `translate(${cam.x} ${cam.y}) scale(${cam.sx} ${cam.sy})`;
+	}
+
+	// ---------- the render loop ----------
+	const FADE_MS = 260;
+	function applyEnterFades(f, now) {
+		let fading = false;
+		const seen = new Set();
+		for (const it of f.items) {
+			seen.add(it.id);
+			let t0 = enterAt.get(it.id);
+			if (t0 == null) {
+				t0 = now;
+				enterAt.set(it.id, t0);
+			}
+			const env = Math.min(1, (now - t0) / FADE_MS);
+			if (env < 1) {
+				fading = true;
+				it.alpha *= env * env;
+			}
+		}
+		for (const id of enterAt.keys()) if (!seen.has(id)) enterAt.delete(id);
+		if (f.links) {
+			for (const ln of f.links) {
+				const cid = ln.id.slice(ln.id.indexOf('->') + 2);
+				const t0 = enterAt.get(cid);
+				if (t0 != null) {
+					const env = Math.min(1, (now - t0) / FADE_MS);
+					if (env < 1) ln.alpha *= env * env;
+				}
+			}
+		}
+		if (f.edges) {
+			const seenE = new Set();
+			for (const ed of f.edges) {
+				seenE.add(ed.id);
+				let t0 = edgeEnterAt.get(ed.id);
+				if (t0 == null) {
+					t0 = now;
+					edgeEnterAt.set(ed.id, t0);
+				}
+				const env = Math.min(1, (now - t0) / FADE_MS);
+				if (env < 1) {
+					fading = true;
+					ed.opacity *= env * env;
+				}
+			}
+			for (const id of edgeEnterAt.keys()) if (!seenE.has(id)) edgeEnterAt.delete(id);
+		}
+		return fading;
+	}
+
+	function loop(now) {
+		raf = requestAnimationFrame(loop);
+		const dt = lastT ? (now - lastT) / 1000 : 0;
+		lastT = now;
+		if (flyId != null) stepFly(dt);
+		if (!dirty && flyId == null && !fadeActive) return;
+		dirty = false;
+		if (!engine) return;
+		W = svgEl?.clientWidth || W;
+		H = svgEl?.clientHeight || H;
+		engine.setViewport(W, H);
+		const f = engine.frame();
+		fadeActive = applyEnterFades(f, now);
+		view = f;
+		onframe?.(f);
+		if (f.rootId !== lastRoot) {
+			lastRoot = f.rootId;
+			crumbs = ancestorsOf(f.rootId);
+		}
+	}
+
+	onMount(() => {
+		W = svgEl?.clientWidth || 0;
+		H = svgEl?.clientHeight || 0;
+		const aspect = W && H ? W / H : 1;
+		const mergedConfig = { ...config, layoutOpts: { aspect, ...(config.layoutOpts || {}) } };
+		engine = createEngine({ index, layout, camera, config: mergedConfig });
+		if (typeof window !== 'undefined') {
+			window.__zoom = {
+				engine,
+				camera,
+				frame: () => engine.frame(),
+				state: () => ({ cam: camera.get(), rootId: engine.rootId, drawn: view.items.length })
+			};
+		}
+		engine.setViewport(W, H);
+		// gentle entrance: settle in from slightly zoomed-out
+		engine.fit();
+		const f0 = camera.get();
+		camera.set({
+			sx: f0.sx * 0.72,
+			sy: f0.sy * 0.72,
+			x: W / 2 - ((W / 2 - f0.x) / f0.sx) * f0.sx * 0.72,
+			y: H / 2 - ((H / 2 - f0.y) / f0.sy) * f0.sy * 0.72
+		});
+		flyId = engine.rootId;
+		lastRoot = engine.rootId;
+		crumbs = ancestorsOf(engine.rootId);
+
+		const ro = new ResizeObserver(() => {
+			W = svgEl?.clientWidth || W;
+			H = svgEl?.clientHeight || H;
+			dirty = true;
+		});
+		if (svgEl) ro.observe(svgEl);
+		const unsub = camera.state.subscribe(() => (dirty = true));
+		interaction = createInteraction({
+			camera,
+			svgElRef: () => svgEl,
+			onChange: () => (dirty = true),
+			onAnchor: (x, y) => engine.setAnchor(x, y)
+		});
+		raf = requestAnimationFrame(loop);
+		return () => {
+			ro.disconnect();
+			unsub();
+			interaction?.destroy?.();
+			cancelAnimationFrame(raf);
+		};
+	});
+
+	// ---------- fly-to spring (dive in / rise out), robust to mid-flight rebasing ----------
+	function desiredCam(id) {
+		const cam = camera.get();
+		if (engine.rootId === id) return engine.fitCamera(0.82);
+		const v = engine.layout.nodes.get(id);
+		if (v) {
+			// descendant in the current layout → zoom in and centre it
+			const ext = 0.94 * 0.5 * Math.min(W, H); // past the descend threshold
+			const s = ext / v.size;
+			return { sx: s, sy: s, x: W / 2 - v.cx * s, y: H / 2 - v.cy * s };
+		}
+		// ancestor above the current root → zoom out, keep the viewport centre fixed
+		const f = 0.5;
+		const wx = (W / 2 - cam.x) / cam.sx;
+		const wy = (H / 2 - cam.y) / cam.sy;
+		return {
+			sx: cam.sx * f,
+			sy: cam.sy * f,
+			x: W / 2 - wx * cam.sx * f,
+			y: H / 2 - wy * cam.sy * f
+		};
+	}
+	function stepFly(dt) {
+		// If a DIVE has passed below its target (single-child chains can legally
+		// chain-descend during the fit), it is done — stop steering. A RISE to an
+		// ancestor must NOT trip this: there the target being an ancestor of the
+		// root is the whole point, and we keep flying out until we reach it.
+		if (flyMode === 'dive' && engine.rootId !== flyId && !engine.layout.nodes.get(flyId)) {
+			let cur = engine.rootId;
+			let guard = 0;
+			while (cur != null && guard++ < 64) {
+				cur = index.parent.get(cur);
+				if (cur === flyId) {
+					flyId = null;
+					engine.clearAnchor();
+					return;
+				}
+			}
+		}
+		const des = desiredCam(flyId);
+		if (!des) return (flyId = null);
+		const cam = camera.get();
+		const k = 1 - Math.exp(-Math.min(dt, 0.05) / 0.13);
+		const v = engine.layout.nodes.get(flyId);
+		if (v) {
+			// Steer relative to the LIVE node, not in camera-parameter space: zoom
+			// anchored at the node's current screen position (so it stays put while
+			// scaling — it can never shoot offscreen mid-flight) and glide it toward
+			// the viewport centre. Re-reading the node each frame keeps this exact
+			// across mid-flight rebases.
+			const nx = v.cx * cam.sx + cam.x;
+			const ny = v.cy * cam.sy + cam.y;
+			engine.setAnchor(nx, ny); // descend follows the dive target, not the centre
+			const fx = Math.exp(Math.log(des.sx / cam.sx) * k);
+			const fy = Math.exp(Math.log(des.sy / cam.sy) * k);
+			camera.zoomAtXY(fx, fy, nx, ny);
+			const c2 = camera.get();
+			const mx = v.cx * c2.sx + c2.x;
+			const my = v.cy * c2.sy + c2.y;
+			camera.pan((W / 2 - mx) * k, (H / 2 - my) * k);
+			if (engine.rootId === flyId) {
+				const c3 = camera.get();
+				const settled =
+					Math.abs(Math.log(des.sx / c3.sx)) < 0.02 &&
+					Math.hypot(W / 2 - (v.cx * c3.sx + c3.x), H / 2 - (v.cy * c3.sy + c3.y)) < 1.5;
+				if (settled) {
+					camera.set(des);
+					engine.clearAnchor();
+					flyId = null;
+				}
+			}
+		} else {
+			// target is an ancestor above the current layout: ease outward at the
+			// centre until the ascend re-roots bring it into the layout
+			engine.clearAnchor();
+			const f = Math.exp(Math.log(0.5) * k);
+			camera.zoomAt(f, W / 2, H / 2);
+		}
+	}
+	let flyMode = 'dive';
+	function flyTo(id) {
+		if (id == null) return;
+		// rising if the target is the current root or one of its ancestors
+		let mode = id === engine.rootId ? 'rise' : 'dive';
+		if (mode === 'dive') {
+			let cur = engine.rootId;
+			let guard = 0;
+			while (cur != null && guard++ < 64) {
+				cur = index.parent.get(cur);
+				if (cur === id) {
+					mode = 'rise';
+					break;
+				}
+			}
+		}
+		flyMode = mode;
+		flyId = id;
+	}
+
+	function ancestorsOf(id) {
+		const out = [];
+		let cur = id;
+		let guard = 0;
+		while (cur != null && guard++ < 64) {
+			out.push(cur);
+			cur = index.parent.get(cur);
+		}
+		return out.reverse();
+	}
+
+	// ---------- picking / hover / click ----------
+	function localXY(e) {
+		const r = svgEl.getBoundingClientRect();
+		return [e.clientX - r.left, e.clientY - r.top];
+	}
+	function pickAt(px, py) {
+		const cam = camera.get();
+		const wx = (px - cam.x) / cam.sx;
+		const wy = (py - cam.y) / cam.sy;
+		let best = null;
+		for (const it of view.items) {
+			// only pick what the user can actually SEE — children mid fade-in
+			// (low alpha) must not steal the click from their parent
+			if (it.alpha < 0.5) continue;
+			const inside =
+				it.r != null
+					? (wx - it.cx) ** 2 + (wy - it.cy) ** 2 <= it.r * it.r
+					: wx >= it.x && wx <= it.x + it.w && wy >= it.y && wy <= it.y + it.h;
+			if (inside && (!best || it.depth > best.depth)) best = it;
+		}
+		return best;
+	}
+
+	let downAt = null;
+	let pointerActive = false;
+	function onPD(e) {
+		if (flyId != null) {
+			flyId = null;
+			engine?.clearAnchor();
+		}
+		downAt = { x: e.clientX, y: e.clientY, t: performance.now() };
+		pointerActive = true;
+		interaction?.onPointerDown(e);
+	}
+	function onPM(e) {
+		interaction?.onPointerMove(e);
+		if (!pointerActive && svgEl) {
+			const [x, y] = localXY(e);
+			const it = pickAt(x, y);
+			const id = it?.id ?? null;
+			if (id !== hoverId) {
+				hoverId = id;
+				dirty = true;
+			}
+		}
+	}
+	function onPU(e) {
+		interaction?.onPointerUp(e);
+		pointerActive = false;
+		if (downAt) {
+			const moved = Math.hypot(e.clientX - downAt.x, e.clientY - downAt.y);
+			const dt = performance.now() - downAt.t;
+			if (moved < 6 && dt < 350 && svgEl) {
+				const [x, y] = localXY(e);
+				const it = pickAt(x, y);
+				if (it) flyTo(it.id);
+			}
+		}
+		downAt = null;
+	}
+	function onWheel(e) {
+		flyId = null;
+		interaction?.onWheel(e);
+	}
+
+	// hovered item (for the highlight ring), resolved from the current frame
+	let hoverItem = $derived(
+		hoverId == null ? null : view.items.find((i) => i.id === hoverId) || null
+	);
+	// label screen position helper
+	function sx(it) {
+		return it.cx * view.cam.sx + view.cam.x;
+	}
+	function sy(it) {
+		return it.cy * view.cam.sy + view.cam.y;
+	}
+	function labelSize(it) {
+		return clamp(it.ext / 3.2, 8, 15);
+	}
+</script>
+
+<div class="relative h-full w-full overflow-hidden bg-slate-50">
+	<svg
+		bind:this={svgEl}
+		class="block h-full w-full touch-none select-none"
+		role="img"
+		aria-label={title || 'Zoom scene'}
+		style={hoverItem ? 'cursor:pointer' : 'cursor:grab'}
+		onpointerdown={onPD}
+		onpointermove={onPM}
+		onpointerup={onPU}
+		onpointercancel={onPU}
+		onpointerleave={(e) => {
+			onPU(e);
+			hoverId = null;
+		}}
+		onwheel={onWheel}
+	>
+		<g transform={transformStr(view.cam)}>
+			<!-- tree links (parent -> child), under everything -->
+			{#if view.links}
+				<g aria-hidden="true">
+					{#each view.links as ln (ln.id)}
+						<line
+							x1={ln.x1}
+							y1={ln.y1}
+							x2={ln.x2}
+							y2={ln.y2}
+							stroke="#94a3b8"
+							stroke-opacity={0.65 * ln.alpha}
+							stroke-width="1"
+							vector-effect="non-scaling-stroke"
+						/>
+					{/each}
+				</g>
+			{/if}
+
+			{#each view.items as it (it.id)}
+				{#if nodeStyle === 'rings'}
+					<!-- the radial fractal, pared back: a hairline outer ring and the
+					     filled core (where links stop and the label sits) -->
+					<g opacity={it.alpha} fill="none" vector-effect="non-scaling-stroke">
+						<circle
+							cx={it.cx}
+							cy={it.cy}
+							r={it.r}
+							stroke="#cbd5e1"
+							stroke-width="0.5"
+							vector-effect="non-scaling-stroke"
+						/>
+						<!-- core filled like the original so links stop at the core edge -->
+						<circle
+							cx={it.cx}
+							cy={it.cy}
+							r={0.5 * it.r}
+							fill="#ffffff"
+							fill-opacity="0.92"
+							stroke="#475569"
+							stroke-width={it.id === view.rootId ? 1.6 : 1}
+							vector-effect="non-scaling-stroke"
+						/>
+					</g>
+				{:else}
+					<circle
+						cx={it.cx}
+						cy={it.cy}
+						r={it.r}
+						fill={palette(it.absDepth)}
+						fill-opacity={fillOpacity(it)}
+						stroke={palette(it.absDepth)}
+						stroke-opacity={strokeOpacity(it)}
+						stroke-width={1 + it.openness * 0.7}
+						vector-effect="non-scaling-stroke"
+					/>
+				{/if}
+
+				<!-- LOD ghost preview: faint outlines of the children inside a not-yet-
+				     opened node — what's in there, how many, how big — cross-fading
+				     into the real children as the node opens -->
+				{#if it.preview}
+					<g opacity={(1 - it.openness) * it.alpha * 0.55} aria-hidden="true">
+						{#each it.preview as pv (pv.id)}
+							<circle
+								cx={pv.cx}
+								cy={pv.cy}
+								r={pv.r}
+								fill="none"
+								stroke="#ffffff"
+								stroke-width="1"
+								vector-effect="non-scaling-stroke"
+							/>
+						{/each}
+					</g>
+				{/if}
+			{/each}
+
+			{#if hoverItem}
+				{#if nodeStyle === 'rings'}
+					<!-- hover = the same hairline outer ring, only a touch darker -->
+					<circle
+						cx={hoverItem.cx}
+						cy={hoverItem.cy}
+						r={hoverItem.r}
+						fill="none"
+						stroke="#94a3b8"
+						stroke-width="0.5"
+						vector-effect="non-scaling-stroke"
+					/>
+				{:else}
+					<circle
+						cx={hoverItem.cx}
+						cy={hoverItem.cy}
+						r={hoverItem.r}
+						fill="none"
+						stroke={accent}
+						stroke-width="2.5"
+						vector-effect="non-scaling-stroke"
+					/>
+				{/if}
+			{/if}
+		</g>
+
+		<!-- labels: screen space, constant size, no distortion -->
+		{#if showLabels}
+			<g class="pointer-events-none">
+				{#each view.items as it (it.id)}
+					{#if it.showLabel && (nodeStyle === 'rings' || it.openness < 0.7) && !hasPortal(it)}
+						<text
+							x={sx(it)}
+							y={sy(it)}
+							text-anchor="middle"
+							dominant-baseline="middle"
+							class="select-none"
+							fill={nodeStyle === 'rings' ? '#374151' : it.leaf ? '#0f172a' : '#ffffff'}
+							fill-opacity={nodeStyle === 'rings' ? it.alpha : labelOpacity(it)}
+							style={`font-size:${nodeStyle === 'rings' ? clamp(it.ext / 4.2, 7.5, 26) : labelSize(it)}px;font-weight:500`}
+						>
+							<tspan x={sx(it)} dy={it.childCount ? '-0.25em' : '0'}>{shortLabel(it.id)}</tspan>
+							{#if it.childCount}
+								<tspan x={sx(it)} dy="1.15em" fill-opacity="0.7">[{it.childCount}]</tspan>
+							{/if}
+						</text>
+					{/if}
+				{/each}
+			</g>
+		{/if}
+	</svg>
+
+	<!-- Portal overlay: real HTML components in the square inscribed in each
+	     visible core, positioned per frame in SCREEN pixels — native-resolution
+	     layout, crisp text, true CSS. Non-interactive so pan/zoom/dive pass
+	     through to the svg beneath. -->
+	{#if portal}
+		<div class="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden="true">
+			{#each portalItems as p (p.id)}
+				<div
+					style={`position:absolute;left:0;top:0;transform:translate(${p.x}px,${p.y}px);width:${p.side}px;height:${p.side}px;opacity:${p.alpha};display:flex;align-items:center;justify-content:center;overflow:hidden;`}
+				>
+					{@render portal({ item: p.item, px: p.px })}
+				</div>
+			{/each}
+		</div>
+	{/if}
+
+	<!-- breadcrumb -->
+	<div
+		class="absolute top-2 left-1/2 z-10 flex max-w-[70%] -translate-x-1/2 items-center gap-1 overflow-hidden rounded-full border bg-white/90 px-2 py-1 text-xs shadow backdrop-blur"
+	>
+		{#each crumbs as c, i (c)}
+			{#if i > 0}<span class="text-slate-300">/</span>{/if}
+			<button
+				class="truncate rounded px-1.5 py-0.5 {i === crumbs.length - 1
+					? 'font-semibold text-slate-800'
+					: 'text-slate-500 hover:bg-slate-100 hover:text-slate-700'}"
+				onclick={() => flyTo(c)}>{shortLabel(c)}</button
+			>
+		{/each}
+	</div>
+
+	<a
+		href={homeHref}
+		class="absolute top-2 left-2 z-10 rounded border bg-white/90 px-2 py-1 text-xs text-slate-600 no-underline shadow backdrop-blur hover:bg-white"
+		>← demos</a
+	>
+
+	{#if showHud}
+		<div
+			class="pointer-events-none absolute top-2 right-2 z-10 rounded border bg-white/90 px-2 py-1 text-xs text-slate-600 shadow backdrop-blur"
+		>
+			{title ? title + ' · ' : ''}{view.items.length} drawn · ×{view.cam.sx.toFixed(2)}
+		</div>
+		<div
+			class="pointer-events-none absolute bottom-2 left-1/2 z-10 -translate-x-1/2 rounded-full border bg-white/80 px-3 py-1 text-xs text-slate-500 shadow backdrop-blur"
+		>
+			scroll / pinch to zoom · drag to pan · click to dive · breadcrumb to rise
+		</div>
+	{/if}
+</div>

package/dist/viz/ZoomScene.svelte.d.ts

@@ -0,0 +1,39 @@
+export default ZoomScene;
+type ZoomScene = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const ZoomScene: import("svelte").Component<{
+    index: any;
+    layout: any;
+    config?: Record<string, any>;
+    palette?: (depth: any) => string;
+    showLabels?: boolean;
+    showHud?: boolean;
+    title?: string;
+    circleFill?: string;
+    nodeStyle?: string;
+    homeHref?: string;
+    accent?: string;
+    portal?: any;
+    portalMinPx?: number;
+    portalMaxPx?: number;
+    onframe?: any;
+}, {}, "">;
+type $$ComponentProps = {
+    index: any;
+    layout: any;
+    config?: Record<string, any>;
+    palette?: (depth: any) => string;
+    showLabels?: boolean;
+    showHud?: boolean;
+    title?: string;
+    circleFill?: string;
+    nodeStyle?: string;
+    homeHref?: string;
+    accent?: string;
+    portal?: any;
+    portalMinPx?: number;
+    portalMaxPx?: number;
+    onframe?: any;
+};