allotaxonometer-ui 0.1.0 → 0.1.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Jonathan St-Onge
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.js

@@ -1,7 +1,67 @@
 import 'svelte/internal/disclose-version';
 import * as $ from 'svelte/internal/client';
+import { scaleLinear } from 'd3-scale';
+import { range, extent } from 'd3-array';
 import * as d3 from 'd3';
-import { extent, InternSet, range, rollup, scaleLinear, scaleBand, rgb, interpolateInferno, scaleOrdinal, max, scaleLog } from 'd3';
+import { extent as extent$1, InternSet, range as range$1, rollup, scaleLinear as scaleLinear$1, scaleBand, rgb, interpolateInferno, scaleOrdinal, max, scaleLog } from 'd3';
+
+var root_1$8 = $.from_svg(`<circle stroke="white" stroke-width="1"></circle>`);
+var root$9 = $.from_svg(`<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"><rect width="400" height="200" fill="#f8f9fa" stroke="#dee2e6"></rect><text x="200" y="25" text-anchor="middle" font-size="16" font-weight="bold"> </text><g class="chart"></g><line x1="20" y1="180" x2="380" y2="180" stroke="#666" stroke-width="1"></line><line x1="20" y1="20" x2="20" y2="180" stroke="#666" stroke-width="1"></line><text x="200" y="198" text-anchor="middle" font-size="12" fill="#666">X Axis</text><text x="12" y="100" text-anchor="middle" font-size="12" fill="#666" transform="rotate(-90, 12, 100)">Y Axis</text></svg>`);
+
+function Test($$anchor, $$props) {
+	$.push($$props, true);
+
+	let message = $.prop($$props, 'message', 3, "Hello World"),
+		data = $.prop($$props, 'data', 19, () => []);
+
+	// If no data provided, generate some test data
+	let testData = data().length > 0
+		? data()
+		: range(10).map((i) => ({
+			x: i,
+			y: Math.sin(i / 2) * 20 + 50,
+			value: Math.random()
+		}));
+	// Pure D3 calculations - no DOM manipulation
+	let xScale = scaleLinear().domain(extent(testData, (d) => d.x)).range([20, 380]);
+	let yScale = scaleLinear().domain(extent(testData, (d) => d.y)).range([180, 20]);
+
+	// Calculate positions
+	let points = testData.map((d) => ({
+		cx: xScale(d.x),
+		cy: yScale(d.y),
+		r: 4 + d.value * 6,
+		fill: `hsl(${d.value * 360}, 70%, 50%)`
+	}));
+
+	var svg = root$9();
+	var text = $.sibling($.child(svg));
+	var text_1 = $.child(text, true);
+
+	$.reset(text);
+
+	var g = $.sibling(text);
+
+	$.each(g, 21, () => points, $.index, ($$anchor, point) => {
+		var circle = root_1$8();
+
+		$.template_effect(() => {
+			$.set_attribute(circle, 'cx', $.get(point).cx);
+			$.set_attribute(circle, 'cy', $.get(point).cy);
+			$.set_attribute(circle, 'r', $.get(point).r);
+			$.set_attribute(circle, 'fill', $.get(point).fill);
+		});
+
+		$.append($$anchor, circle);
+	});
+
+	$.reset(g);
+	$.next(4);
+	$.reset(svg);
+	$.template_effect(() => $.set_text(text_1, message()));
+	$.append($$anchor, svg);
+	$.pop();
+}
 
 var root_1$7 = $.from_svg(`<g class="xtick"><line x1="0" x2="0" y1="0" y2="6" stroke="hsla(212, 10%, 53%, 1)"></line></g><g class="tick-text"><text font-size="10" dx="13" dy="13"> </text></g>`, 1);
 var root$8 = $.from_svg(`<g class="axis x"><!><g class="xlab svelte-1y8xk6i"><text dy="45">Rank r</text><text dy="63">for</text><text dy="80"> </text><text dy="60" fill="hsla(212, 10%, 53%, 1)" opacity="0.7">more →</text><text dy="75" fill="hsla(212, 10%, 53%, 1)" opacity="0.7">frequent</text><text dy="60" fill="hsla(212, 10%, 53%, 1)" opacity="0.7">← less</text><text dy="75" fill="hsla(212, 10%, 53%, 1)" opacity="0.7">frequent</text></g></g>`);
@@ -190,7 +250,7 @@ function Grid($$anchor, $$props) {
 	$.pop();
 }
 
-var root_1$4 = $.from_svg(`<g><path fill="none" stroke="grey" stroke-width="0.9" stroke-opacity="0.9"></path></g>`);
+var root_1$4 = $.from_svg(`<path fill="none" stroke="grey" stroke-width="0.9" stroke-opacity="0.9"></path>`);
 var root$5 = $.from_svg(`<g class="contours"></g>`);
 
 function Contours($$anchor, $$props) {
@@ -210,13 +270,8 @@ function Contours($$anchor, $$props) {
 	}
 
 	function make_grid(Ninset, tmpr1, tmpr2, alpha, rtd) {
-		// No matrix in js :(
-		// we could try to do like in the original d3.contour, where they do
-		// calculation to work with a flat array. 
-		// Instead we flatten that List of list later.
 		const deltamatrix = Array.from({ length: Ninset }, () => Array(Ninset).fill(0));
 
-		// Populate deltamatrix with alpha_norm_type2 values and set the diagonal and adjacent values
 		for (let i = 0; i < Ninset; i++) {
 			for (let j = 0; j < Ninset; j++) {
 				const divElem = alpha_norm_type2(1 / tmpr1[i], 1 / tmpr2[j], alpha);
@@ -224,10 +279,8 @@ function Contours($$anchor, $$props) {
 				deltamatrix[i][j] = divElem / rtd.normalization;
 			}
 
-			//     %% prevent contours from crossing the center line
 			deltamatrix[i][i] = -1;
 
-			// Set adjacent diagonal elements to -1 if within bounds
 			if (i < Ninset - 1) {
 				deltamatrix[i][i + 1] = -1;
 				deltamatrix[i + 1][i] = -1;
@@ -238,37 +291,27 @@ function Contours($$anchor, $$props) {
 	}
 
 	function filter_contours(tmpcontours, Ninset, maxlog10) {
-		const chart2val = d3.scaleLinear().domain([0, Ninset]).range([
-			0, // unit: km
-			maxlog10
-		]); // unit: pixels
-
+		const chart2val = d3.scaleLinear().domain([0, Ninset]).range([0, maxlog10]);
 		let out = [];
 
-		// Extract Coordinates:
 		tmpcontours.forEach((contour) => {
 			contour.coordinates.forEach((pair, i) => {
-				const tmpr1 = pair[0].map((d) => d[0]); // x-coordinates
-				const tmpr2 = pair[0].map((d) => d[1]); // y-coordinates
-				// Array to store filtered coordinate pairs in zipped format
+				const tmpr1 = pair[0].map((d) => d[0]);
+				const tmpr2 = pair[0].map((d) => d[1]);
 				const filteredPairs = [];
 
-				// Loop through each coordinate and calculate `tmpxrot`
 				for (let index = 0; index < tmpr1.length - 1; index++) {
 					const x1 = chart2val(tmpr1[index]);
 					const x2 = chart2val(tmpr2[index]);
-					// Calculate tmpxrot 
 					const tmpxrot = Math.abs(x2 - x1) / Math.sqrt(2);
 
-					// If the condition is met, add the coordinate pair [x1, x2] to `filteredPairs`
 					if (Math.abs(tmpxrot) >= 0.1 & x1 != maxlog10 & x2 != 0 & x1 != 0 & x2 != maxlog10) {
 						filteredPairs.push([x1, x2]);
 					}
 				}
 
-				// Only push to `out` if we have filtered pairs
 				if (filteredPairs.length > 0) {
-					out.push(filteredPairs); // Store each set of filtered pairs in `out`
+					out.push(filteredPairs);
 				}
 			});
 		});
@@ -276,56 +319,37 @@ function Contours($$anchor, $$props) {
 		return out;
 	}
 
-	function get_contours(alpha, maxlog10) {
-		// only for alpha != 0 and alpha != Infinity
+	function get_contours(alpha, maxlog10, rtd) {
 		const Ninset = 10 ** 3;
 		const tmpr1 = d3.range(0, 1000).map((d) => Math.pow(10, d / 999 * 5));
 		const tmpr2 = d3.range(0, 1000).map((d) => Math.pow(10, d / 999 * 5));
-		// Create a scale to generate `Ncontours + 2` values linearly spaced between 1 and `tmpr1Length`
 		const Ncontours = 10;
 		const scale = d3.scaleLinear().domain([0, Ncontours + 1]).range([1, tmpr1.length]);
 		const contour_indices = d3.range(Ncontours + 2).map((i) => Math.round(scale(i)));
-		const grid = make_grid(Ninset, tmpr1, tmpr2, alpha, $$props.rtd);
+		const grid = make_grid(Ninset, tmpr1, tmpr2, alpha, rtd);
 		const indices = contour_indices.slice(1, -1);
 		const lastRow = grid[grid.length - 1];
 		const heights = indices.map((index) => lastRow[index]);
-		// equivalent to `contourc`
-		// we first create a generator
-		// then we pass to Z (flatDeltamatrix)
 		const logTmpr = tmpr1.map(Math.log10);
-		const contourGenerator = d3.contours().size([logTmpr.length, logTmpr.length]).thresholds(heights); // Set the grid size
-		// I guess this is equivalent? These are levels.
+		const contourGenerator = d3.contours().size([logTmpr.length, logTmpr.length]).thresholds(heights);
 		const flatDeltamatrix = grid.flat();
 		const tmpcontours = contourGenerator(flatDeltamatrix);
 
 		return filter_contours(tmpcontours, Ninset, maxlog10);
 	}
 
-	let mycontours = $.derived(() => get_contours($$props.alpha, $$props.maxlog10));
+	// Only calculate contours in browser
+	let mycontours = $.derived(() => get_contours($$props.alpha, $$props.maxlog10, $$props.rtd));
 	const x = $.derived(() => d3.scaleLinear([0, $$props.maxlog10], [0, $$props.DiamondInnerHeight]));
 	const y = $.derived(() => d3.scaleLinear([$$props.maxlog10, 0], [$$props.DiamondInnerHeight, 0]));
 	const pathData = d3.line().x((d, i) => $.get(x)(d[0])).y((d, i) => $.get(y)(d[1]));
 	var g = root$5();
 
 	$.each(g, 21, () => $.get(mycontours), $.index, ($$anchor, contour) => {
-		var g_1 = root_1$4();
-		var path = $.child(g_1);
+		var path = root_1$4();
 
-		$.reset(g_1);
-
-		$.template_effect(
-			($0, $1, $2) => {
-				$.set_attribute(g_1, 'transform', `translate(${$0 ?? ''}, ${$1 ?? ''})`);
-				$.set_attribute(path, 'd', $2);
-			},
-			[
-				() => $.get(x)($.get(contour)),
-				() => $.get(y)($.get(contour)),
-				() => pathData($.get(contour))
-			]
-		);
-
-		$.append($$anchor, g_1);
+		$.template_effect(($0) => $.set_attribute(path, 'd', $0), [() => pathData($.get(contour))]);
+		$.append($$anchor, path);
 	});
 
 	$.reset(g);
@@ -334,7 +358,7 @@ function Contours($$anchor, $$props) {
 }
 
 var root_1$3 = $.from_svg(`<rect stroke="black" stroke-width="0.2"></rect>`);
-var root_2$3 = $.from_svg(`<g class="diamond-lab"><text font-size="10"> </text></g>`);
+var root_2$3 = $.from_svg(`<g class="diamond-lab"><text dy="20" font-size="10"> </text></g>`);
 var root$4 = $.from_svg(`<g class="diamond-chart"><polygon fill="#89CFF0" fill-opacity="0.2" stroke="black" stroke-width="0.5"></polygon><polygon fill="grey" fill-opacity="0.2" stroke="black" stroke-width="0.5"></polygon><!><!><!><!><!><!></g>`);
 
 function Diamond($$anchor, $$props) {
@@ -358,7 +382,9 @@ function Diamond($$anchor, $$props) {
 					});
 
 					const max_dist_idx = cos_dists.indexOf(max_dist);
-					const name = d3.shuffle(filtered_dat[max_dist_idx]['types'].split(","))[0];
+					// Use a simple random selection instead of d3.shuffle during SSR
+					const types = filtered_dat[max_dist_idx]['types'].split(",");
+					const name = types[Math.floor(Math.random() * types.length)];
 
 					relevant_types.push(name);
 				}
@@ -369,13 +395,6 @@ function Diamond($$anchor, $$props) {
 	}
 
 	function rin(arr1, arr2) {
-		// Find element arr1 presents in arr2, i.e. arr1 %in% arr2
-		//
-		// examples
-		// A = ["bob", "george", "jesus"]
-		// B = ["bob", "jesus", "terrence"]
-		// rin(A, B)
-		// [true, false, true]
 		return Array.from(arr1, (x) => {
 			return arr2.indexOf(x) == -1 ? false : true;
 		});
@@ -383,13 +402,13 @@ function Diamond($$anchor, $$props) {
 
 	// Wrangling data
 	let relevant_types = $.derived(() => get_relevant_types($$props.diamond_dat));
-	// Extracting constant
+	// Extracting constants - all these should be SSR-safe
 	let max_rank_raw = $.derived(() => d3.range(d3.max($$props.diamond_count, (d) => d.x1)));
 	let max_rank = $.derived(() => d3.max($$props.diamond_dat, (d) => d.rank_L[1]));
 	let rounded_max_rank = $.derived(() => 10 ** Math.ceil(Math.max(Math.log10($.get(max_rank)))));
 	let ncells = $.derived(() => d3.max($.get(max_rank_raw)));
 	let xyDomain = $.derived(() => [1, $.get(rounded_max_rank)]);
-	// All the Scales!
+	// All the Scales! - These should be SSR-safe
 	let linScale = $.derived(() => d3.scaleLinear().domain([0, $.get(ncells) - 1]).range([0, $$props.DiamondInnerHeight]));
 	let wxy = $.derived(() => d3.scaleBand().domain($.get(max_rank_raw)).range([0, $$props.DiamondInnerHeight]));
 	let logScale = $.derived(() => d3.scaleLog().domain($.get(xyDomain)).range([0, $$props.DiamondInnerHeight]).nice());
@@ -498,9 +517,6 @@ function Diamond($$anchor, $$props) {
 	$.each(node_4, 17, () => $$props.diamond_dat.filter((d) => filter_labs(d, $.get(relevant_types))), $.index, ($$anchor, d) => {
 		var g_1 = root_2$3();
 		var text = $.child(g_1);
-
-		$.set_attribute(text, 'dy', 20);
-
 		var text_1 = $.child(text, true);
 
 		$.reset(text);
@@ -728,12 +744,12 @@ function DivergingBarChart($$anchor, $$props) {
 	let X = $.derived(() => dat.map((d) => d.frequency));
 	let Y = $.derived(() => dat.map((d) => d.y_coord));
 	let xRange = $.derived(() => [margin.left, width - margin.right]);
-	let xDomain = $.derived(() => extent($.get(X)));
+	let xDomain = $.derived(() => extent$1($.get(X)));
 	let yDomain = $.derived(() => new InternSet($.get(Y)));
 	let height = $.derived(() => Math.ceil(($.get(yDomain).size + yPadding) * 25) + margin.top + margin.bottom);
-	let I = $.derived(() => range($.get(X).length).filter((i) => $.get(yDomain).has($.get(Y)[i])));
+	let I = $.derived(() => range$1($.get(X).length).filter((i) => $.get(yDomain).has($.get(Y)[i])));
 	$.derived(() => rollup($.get(I), ([i]) => $.get(X)[i], (i) => $.get(Y)[i]));
-	let xScale = $.derived(() => scaleLinear($.get(xDomain), $.get(xRange)));
+	let xScale = $.derived(() => scaleLinear$1($.get(xDomain), $.get(xRange)));
 	let yScale = $.derived(() => scaleBand().domain($.get(yDomain)).range([margin.top, $.get(height) - margin.bottom]).padding(yPadding));
 	let format = $.derived(() => $.get(xScale).tickFormat(100, "%"));
 	var g = root$2();
@@ -813,8 +829,8 @@ function Legend($$anchor, $$props) {
 	$.push($$props, true);
 
 	const N_CATEGO = 20;
-	const myramp = range(N_CATEGO).map((i) => rgb(interpolateInferno(i / (N_CATEGO - 1))).hex());
-	const color = scaleOrdinal(range(N_CATEGO), myramp);
+	const myramp = range$1(N_CATEGO).map((i) => rgb(interpolateInferno(i / (N_CATEGO - 1))).hex());
+	const color = scaleOrdinal(range$1(N_CATEGO), myramp);
 	let height = 370;
 	const margin = { right: 40, top: 65, left: 10 };
 	let innerHeight = $.derived(() => height - margin.top - margin.right);
@@ -1091,4 +1107,4 @@ function Dashboard($$anchor, $$props) {
 	$.append($$anchor, div);
 }
 
-export { Dashboard, Diamond, DivergingBarChart, Legend, Wordshift };
+export { Dashboard, Diamond, DivergingBarChart, Legend, Test, Wordshift };

package/dist/ssr/index.js

@@ -0,0 +1,505 @@
+import * as $ from "svelte/internal/server";
+import { scaleLinear } from "d3-scale";
+import { range, extent } from "d3-array";
+import * as d3 from "d3";
+import { extent as extent$1, InternSet, range as range$1, rollup, scaleLinear as scaleLinear$1, scaleBand, rgb, interpolateInferno, scaleOrdinal, max, scaleLog } from "d3";
+function Test($$payload, $$props) {
+  $.push();
+  let { message = "Hello World", data = [] } = $$props;
+  let testData = data.length > 0 ? data : range(10).map((i) => ({
+    x: i,
+    y: Math.sin(i / 2) * 20 + 50,
+    value: Math.random()
+  }));
+  let xScale = scaleLinear().domain(extent(testData, (d) => d.x)).range([20, 380]);
+  let yScale = scaleLinear().domain(extent(testData, (d) => d.y)).range([180, 20]);
+  let points = testData.map((d) => ({
+    cx: xScale(d.x),
+    cy: yScale(d.y),
+    r: 4 + d.value * 6,
+    fill: `hsl(${d.value * 360}, 70%, 50%)`
+  }));
+  const each_array = $.ensure_array_like(points);
+  $$payload.out += `<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"><rect width="400" height="200" fill="#f8f9fa" stroke="#dee2e6"></rect><text x="200" y="25" text-anchor="middle" font-size="16" font-weight="bold">${$.escape(message)}</text><g class="chart"><!--[-->`;
+  for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
+    let point = each_array[$$index];
+    $$payload.out += `<circle${$.attr("cx", point.cx)}${$.attr("cy", point.cy)}${$.attr("r", point.r)}${$.attr("fill", point.fill)} stroke="white" stroke-width="1"></circle>`;
+  }
+  $$payload.out += `<!--]--></g><line x1="20" y1="180" x2="380" y2="180" stroke="#666" stroke-width="1"></line><line x1="20" y1="20" x2="20" y2="180" stroke="#666" stroke-width="1"></line><text x="200" y="198" text-anchor="middle" font-size="12" fill="#666">X Axis</text><text x="12" y="100" text-anchor="middle" font-size="12" fill="#666" transform="rotate(-90, 12, 100)">Y Axis</text></svg>`;
+  $.pop();
+}
+function AxisX($$payload, $$props) {
+  $.push();
+  let {
+    height,
+    scale,
+    title
+  } = $$props;
+  let logFormat10 = scale.tickFormat();
+  let xTicks = scale.ticks();
+  const each_array = $.ensure_array_like(xTicks);
+  $$payload.out += `<g class="axis x"${$.attr("transform", `translate(0, ${$.stringify(height)})`)}><!--[-->`;
+  for (let index = 0, $$length = each_array.length; index < $$length; index++) {
+    let tick = each_array[index];
+    $$payload.out += `<g class="xtick"${$.attr("transform", `translate(${$.stringify(scale(tick))}, 0)`)}><line x1="0" x2="0" y1="0" y2="6" stroke="hsla(212, 10%, 53%, 1)"></line></g><g class="tick-text"${$.attr("transform", `translate(${$.stringify(scale(tick))}, 0) scale(-1,1) rotate(45)`)}><text font-size="10" dx="13" dy="13">${$.escape(logFormat10(tick))}</text></g>`;
+  }
+  $$payload.out += `<!--]--><g class="xlab svelte-1y8xk6i"${$.attr("transform", `scale(-1,1) translate(-${$.stringify(height)}, 0)`)}><text dy="45"${$.attr("x", height / 2)}>Rank r</text><text dy="63"${$.attr("x", height / 2)}>for</text><text dy="80"${$.attr("x", height / 2)}>${$.escape(title[1])}</text><text dy="60"${$.attr("x", height - 40)} fill="hsla(212, 10%, 53%, 1)" opacity="0.7">more →</text><text dy="75"${$.attr("x", height - 40)} fill="hsla(212, 10%, 53%, 1)" opacity="0.7">frequent</text><text dy="60"${$.attr("x", 40)} fill="hsla(212, 10%, 53%, 1)" opacity="0.7">← less</text><text dy="75"${$.attr("x", 40)} fill="hsla(212, 10%, 53%, 1)" opacity="0.7">frequent</text></g></g>`;
+  $.pop();
+}
+function AxisY($$payload, $$props) {
+  $.push();
+  let { height, scale, title } = $$props;
+  let logFormat10 = scale.tickFormat();
+  let yTicks = scale.ticks();
+  const each_array = $.ensure_array_like(yTicks);
+  $$payload.out += `<g class="axis y"${$.attr("transform", `translate(${$.stringify(height)}, 0) scale(-1, 1)`)}><!--[-->`;
+  for (let index = 0, $$length = each_array.length; index < $$length; index++) {
+    let tick = each_array[index];
+    $$payload.out += `<g class="ytick"${$.attr("transform", `translate(0, ${$.stringify(scale(tick))})`)}><line x1="0" x2="-6" y1="0" y2="0" stroke="hsla(212, 10%, 53%, 1)"></line></g><g class="tick-text"${$.attr("transform", `translate(0, ${$.stringify(scale(tick))}) rotate(45)`)}><text font-size="10" dx="-23" dy="10">${$.escape(logFormat10(tick))}</text></g>`;
+  }
+  $$payload.out += `<!--]--><g class="ylab svelte-1y8visx" transform="rotate(90)"><text dy="45"${$.attr("x", height / 2)}>Rank r</text><text dy="63"${$.attr("x", height / 2)}>for</text><text dy="80"${$.attr("x", height / 2)}>${$.escape(title[0])}</text><text dy="60"${$.attr("x", height - 40)} fill="hsla(212, 10%, 53%, 1)" opacity="0.7">more →</text><text dy="75"${$.attr("x", height - 40)} fill="hsla(212, 10%, 53%, 1)" opacity="0.7">frequent</text><text dy="60"${$.attr("x", 40)} fill="hsla(212, 10%, 53%, 1)" opacity="0.7">← less</text><text dy="75"${$.attr("x", 40)} fill="hsla(212, 10%, 53%, 1)" opacity="0.7">frequent</text></g></g>`;
+  $.pop();
+}
+function Grid($$payload, $$props) {
+  $.push();
+  let { scale, height, wxy, ncells } = $$props;
+  let xygridLines = scale.ticks(ncells / 2);
+  const each_array = $.ensure_array_like(xygridLines);
+  $$payload.out += `<g class="grid"><!--[-->`;
+  for (let index = 0, $$length = each_array.length; index < $$length; index++) {
+    let yline = each_array[index];
+    $$payload.out += `<g${$.attr("transform", `translate(${$.stringify(wxy(yline))}, 0)`)}><line${$.attr("y1", height)} y2="0" stroke="#d3d3d3" stroke-dasharray="3,3"${$.attr("opacity", index === 0 ? 0 : 1)}></line></g><g${$.attr("transform", `translate(0, ${$.stringify(wxy(yline))})`)}><line${$.attr("x1", height)} x2="0" stroke="#d3d3d3" stroke-dasharray="3,3"${$.attr("opacity", index === 0 ? 0 : 1)}></line></g>`;
+  }
+  $$payload.out += `<!--]--></g>`;
+  $.pop();
+}
+function Contours($$payload, $$props) {
+  $.push();
+  let { alpha, maxlog10, rtd, DiamondInnerHeight } = $$props;
+  function alpha_norm_type2(x1, x2, alpha2) {
+    if (alpha2 == 0) {
+      return Math.abs(Math.log(x1 / x2));
+    } else if (alpha2 === Infinity) {
+      return x1 === x2 ? 0 : Math.max(x1, x2);
+    } else {
+      const prefactor = (alpha2 + 1) / alpha2;
+      const power = 1 / (alpha2 + 1);
+      return prefactor * Math.abs(Math.pow(x1, alpha2) - Math.pow(x2, alpha2)) ** power;
+    }
+  }
+  function make_grid(Ninset, tmpr1, tmpr2, alpha2, rtd2) {
+    const deltamatrix = Array.from({ length: Ninset }, () => Array(Ninset).fill(0));
+    for (let i = 0; i < Ninset; i++) {
+      for (let j = 0; j < Ninset; j++) {
+        const divElem = alpha_norm_type2(1 / tmpr1[i], 1 / tmpr2[j], alpha2);
+        deltamatrix[i][j] = divElem / rtd2.normalization;
+      }
+      deltamatrix[i][i] = -1;
+      if (i < Ninset - 1) {
+        deltamatrix[i][i + 1] = -1;
+        deltamatrix[i + 1][i] = -1;
+      }
+    }
+    return deltamatrix;
+  }
+  function filter_contours(tmpcontours, Ninset, maxlog102) {
+    const chart2val = d3.scaleLinear().domain([0, Ninset]).range([0, maxlog102]);
+    let out = [];
+    tmpcontours.forEach((contour) => {
+      contour.coordinates.forEach((pair, i) => {
+        const tmpr1 = pair[0].map((d) => d[0]);
+        const tmpr2 = pair[0].map((d) => d[1]);
+        const filteredPairs = [];
+        for (let index = 0; index < tmpr1.length - 1; index++) {
+          const x1 = chart2val(tmpr1[index]);
+          const x2 = chart2val(tmpr2[index]);
+          const tmpxrot = Math.abs(x2 - x1) / Math.sqrt(2);
+          if (Math.abs(tmpxrot) >= 0.1 & x1 != maxlog102 & x2 != 0 & x1 != 0 & x2 != maxlog102) {
+            filteredPairs.push([x1, x2]);
+          }
+        }
+        if (filteredPairs.length > 0) {
+          out.push(filteredPairs);
+        }
+      });
+    });
+    return out;
+  }
+  function get_contours(alpha2, maxlog102, rtd2) {
+    const Ninset = 10 ** 3;
+    const tmpr1 = d3.range(0, 1e3).map((d) => Math.pow(10, d / 999 * 5));
+    const tmpr2 = d3.range(0, 1e3).map((d) => Math.pow(10, d / 999 * 5));
+    const Ncontours = 10;
+    const scale = d3.scaleLinear().domain([0, Ncontours + 1]).range([1, tmpr1.length]);
+    const contour_indices = d3.range(Ncontours + 2).map((i) => Math.round(scale(i)));
+    const grid = make_grid(Ninset, tmpr1, tmpr2, alpha2, rtd2);
+    const indices = contour_indices.slice(1, -1);
+    const lastRow = grid[grid.length - 1];
+    const heights = indices.map((index) => lastRow[index]);
+    const logTmpr = tmpr1.map(Math.log10);
+    const contourGenerator = d3.contours().size([logTmpr.length, logTmpr.length]).thresholds(heights);
+    const flatDeltamatrix = grid.flat();
+    const tmpcontours = contourGenerator(flatDeltamatrix);
+    return filter_contours(tmpcontours, Ninset, maxlog102);
+  }
+  let mycontours = get_contours(alpha, maxlog10, rtd);
+  const x = d3.scaleLinear([0, maxlog10], [0, DiamondInnerHeight]);
+  const y = d3.scaleLinear([maxlog10, 0], [DiamondInnerHeight, 0]);
+  const pathData = d3.line().x((d, i) => x(d[0])).y((d, i) => y(d[1]));
+  const each_array = $.ensure_array_like(mycontours);
+  $$payload.out += `<g class="contours"><!--[-->`;
+  for (let index = 0, $$length = each_array.length; index < $$length; index++) {
+    let contour = each_array[index];
+    $$payload.out += `<path fill="none" stroke="grey"${$.attr("d", pathData(contour))} stroke-width="0.9" stroke-opacity="0.9"></path>`;
+  }
+  $$payload.out += `<!--]--></g>`;
+  $.pop();
+}
+function Diamond($$payload, $$props) {
+  $.push();
+  let {
+    diamond_count,
+    diamond_dat,
+    margin,
+    DiamondInnerHeight,
+    trueDiamondHeight,
+    alpha,
+    maxlog10,
+    rtd,
+    title
+  } = $$props;
+  function get_relevant_types(diamond_dat2) {
+    const ncells2 = 60;
+    const bin_size = 1.5;
+    const cummulative_bin = d3.range(0, ncells2, bin_size);
+    const relevant_types2 = [];
+    for (let sys of ["right", "left"]) {
+      for (let i = 1; i < cummulative_bin.length; i++) {
+        const filtered_dat = diamond_dat2.filter((d) => d.value > 0 && d.which_sys == sys).filter((d) => d.coord_on_diag >= cummulative_bin[i - 1] && d.coord_on_diag < cummulative_bin[i]);
+        if (filtered_dat.length > 0) {
+          const cos_dists = filtered_dat.map((d) => d.cos_dist);
+          const max_dist = cos_dists.reduce((a, b) => {
+            return Math.max(a, b);
+          });
+          const max_dist_idx = cos_dists.indexOf(max_dist);
+          const types = filtered_dat[max_dist_idx]["types"].split(",");
+          const name = types[Math.floor(Math.random() * types.length)];
+          relevant_types2.push(name);
+        }
+      }
+    }
+    return relevant_types2;
+  }
+  function rin(arr1, arr2) {
+    return Array.from(arr1, (x) => {
+      return arr2.indexOf(x) == -1 ? false : true;
+    });
+  }
+  let relevant_types = get_relevant_types(diamond_dat);
+  let max_rank_raw = d3.range(d3.max(diamond_count, (d) => d.x1));
+  let max_rank = d3.max(diamond_dat, (d) => d.rank_L[1]);
+  let rounded_max_rank = 10 ** Math.ceil(Math.max(Math.log10(max_rank)));
+  let ncells = d3.max(max_rank_raw);
+  let xyDomain = [1, rounded_max_rank];
+  let linScale = d3.scaleLinear().domain([0, ncells - 1]).range([0, DiamondInnerHeight]);
+  let wxy = d3.scaleBand().domain(max_rank_raw).range([0, DiamondInnerHeight]);
+  let logScale = d3.scaleLog().domain(xyDomain).range([0, DiamondInnerHeight]).nice();
+  let xy = d3.scaleBand().domain(max_rank_raw).range([0, trueDiamondHeight]);
+  let color_scale = d3.scaleSequentialLog().domain([rounded_max_rank, 1]).interpolator(d3.interpolateInferno);
+  let blue_triangle = [
+    [DiamondInnerHeight, DiamondInnerHeight],
+    [0, 0],
+    [0, DiamondInnerHeight]
+  ].join(" ");
+  let grey_triangle = [
+    [DiamondInnerHeight, DiamondInnerHeight],
+    [0, 0],
+    [DiamondInnerHeight, 0]
+  ].join(" ");
+  function filter_labs(d, relevant_types2) {
+    return rin(relevant_types2, d.types.split(",")).some((x) => x === true);
+  }
+  const each_array = $.ensure_array_like(diamond_dat);
+  const each_array_1 = $.ensure_array_like(diamond_dat.filter((d) => filter_labs(d, relevant_types)));
+  $$payload.out += `<g class="diamond-chart"${$.attr("transform", `translate(360, 0) scale (-1,1) rotate(45) translate(${$.stringify(margin.inner / 2)}, ${$.stringify(margin.inner / 2)})`)}><polygon${$.attr("points", blue_triangle)} fill="#89CFF0" fill-opacity="0.2" stroke="black" stroke-width="0.5"></polygon><polygon${$.attr("points", grey_triangle)} fill="grey" fill-opacity="0.2" stroke="black" stroke-width="0.5"></polygon>`;
+  AxisX($$payload, {
+    height: DiamondInnerHeight,
+    scale: logScale,
+    title
+  });
+  $$payload.out += `<!---->`;
+  AxisY($$payload, {
+    height: DiamondInnerHeight,
+    scale: logScale,
+    title
+  });
+  $$payload.out += `<!---->`;
+  Grid($$payload, {
+    height: DiamondInnerHeight,
+    wxy,
+    ncells,
+    scale: linScale
+  });
+  $$payload.out += `<!----><!--[-->`;
+  for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
+    let d = each_array[$$index];
+    $$payload.out += `<rect${$.attr("x", xy(d.x1))}${$.attr("y", xy(d.y1))}${$.attr("width", xy.bandwidth())}${$.attr("height", xy.bandwidth())}${$.attr("fill", color_scale(d.value))}${$.attr("opacity", d.value === null ? 0 : 1)} stroke="black" stroke-width="0.2"></rect>`;
+  }
+  $$payload.out += `<!--]--><!--[-->`;
+  for (let $$index_1 = 0, $$length = each_array_1.length; $$index_1 < $$length; $$index_1++) {
+    let d = each_array_1[$$index_1];
+    $$payload.out += `<g class="diamond-lab"${$.attr("transform", `
+            scale(1,-1) 
+            rotate(-90) 
+            rotate(-45, ${$.stringify(xy(d.x1))}, ${$.stringify(xy(d.y1))}) 
+            translate(${$.stringify(d.which_sys === "right" ? xy(Math.sqrt(d.cos_dist)) * 1.5 : -xy(Math.sqrt(d.cos_dist)) * 1.5)}, 0)
+        `)}><text${$.attr("x", xy(d.x1))}${$.attr("y", Number.isInteger(d.coord_on_diag) ? xy(d.y1) : xy(d.y1) - 1)} dy="20" font-size="10"${$.attr("text-anchor", d.x1 - d.y1 <= 0 ? "start" : "end")}>${$.escape(d.types.split(",")[0])}</text></g>`;
+  }
+  $$payload.out += `<!--]-->`;
+  Contours($$payload, { alpha, maxlog10, rtd, DiamondInnerHeight });
+  $$payload.out += `<!----></g>`;
+  $.pop();
+}
+function Wordshift($$payload, $$props) {
+  $.push();
+  let { barData, DashboardHeight, DashboardWidth } = $$props;
+  let margin = { top: 80, left: 140, right: 50, bottom: 10 };
+  let width = 640;
+  let yPadding = 0.2;
+  let Y = d3.map(barData, (d) => d.type);
+  let max_shift = d3.max(barData, (d) => Math.abs(d.metric)) * 1.5;
+  let xDomain = [-max_shift, max_shift];
+  let yDomain = new d3.InternSet(Y);
+  let xRange = [
+    DashboardWidth - width + margin.left,
+    DashboardWidth - margin.right
+  ];
+  let yRange = [margin.top, DashboardHeight - margin.bottom];
+  let xScale = d3.scaleLinear().domain(xDomain).range(xRange);
+  let yScale = d3.scaleBand(yDomain, yRange).padding(yPadding);
+  let xTicks = xScale.ticks(width / 80);
+  const colors = ["lightgrey", "lightblue"];
+  const each_array = $.ensure_array_like(xTicks);
+  const each_array_1 = $.ensure_array_like(barData);
+  $$payload.out += `<g class="barChart-container svelte-37sv8o"><g class="axis x"${$.attr("transform", `translate(0, ${$.stringify(margin.top)})`)}><!--[-->`;
+  for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
+    let tick = each_array[$$index];
+    $$payload.out += `<g class="tick"><line${$.attr("x1", xScale(tick))} y1="0"${$.attr("x2", xScale(tick))}${$.attr("y2", DashboardHeight - margin.top - margin.bottom)} stroke="hsla(212, 10%, 53%, 1)" stroke-opacity="0.2">${$.escape(tick)}</line><text${$.attr("x", xScale(tick))} y="-12" font-size="0.8em">${$.escape(tick * 100)}%</text></g>`;
+  }
+  $$payload.out += `<!--]--></g><!--[-->`;
+  for (let i = 0, $$length = each_array_1.length; i < $$length; i++) {
+    let d = each_array_1[i];
+    $$payload.out += `<rect${$.attr("x", Math.min(xScale(0), xScale(d.metric)))}${$.attr("y", yScale(d.type))}${$.attr("fill", colors[d.metric > 0 ? colors.length - 1 : 0])}${$.attr("width", Math.abs(xScale(d.metric) - xScale(0)))}${$.attr("height", yScale.bandwidth())}></rect><text${$.attr("x", Math.min(xScale(0), xScale(d.metric)))}${$.attr("y", yScale(d.type))} dy="14" font-size="0.7em">${$.escape(d.type)}</text>`;
+  }
+  $$payload.out += `<!--]--></g>`;
+  $.pop();
+}
+function DivergingBarChart($$payload, $$props) {
+  $.push();
+  let {
+    test_elem_1,
+    test_elem_2,
+    DiamondHeight,
+    DiamondWidth
+  } = $$props;
+  const setdiff = (x, y) => {
+    let a = new Set(x);
+    let b = new Set(y);
+    return new Set([...a].filter((x2) => !b.has(x2)));
+  };
+  const union = (x, y) => {
+    let a = new Set(x);
+    let b = new Set(y);
+    return /* @__PURE__ */ new Set([...a, ...b]);
+  };
+  let types_1 = test_elem_1.map((d) => d.types);
+  let types_2 = test_elem_2.map((d) => d.types);
+  let union_types = union(types_1, types_2);
+  let tot_types = types_1.length + types_2.length;
+  let width = 200;
+  let margin = { right: 40, top: 30, left: 40, bottom: 10 };
+  let yPadding = 0.5;
+  let colors = ["lightgrey", "lightblue"];
+  let dat = [
+    {
+      y_coord: "total count",
+      frequency: +(types_2.length / tot_types).toFixed(3)
+    },
+    {
+      y_coord: "total count",
+      frequency: -(types_1.length / tot_types).toFixed(3)
+    },
+    {
+      y_coord: "all names",
+      frequency: +(types_2.length / union_types.size).toFixed(3)
+    },
+    {
+      y_coord: "all names",
+      frequency: -(types_1.length / union_types.size).toFixed(3)
+    },
+    {
+      y_coord: "exclusive names",
+      frequency: +(setdiff(types_2, types_1).size / types_2.length).toFixed(3)
+    },
+    {
+      y_coord: "exclusive names",
+      frequency: -(setdiff(types_1, types_2).size / types_1.length).toFixed(3)
+    }
+  ];
+  let X = dat.map((d) => d.frequency);
+  let Y = dat.map((d) => d.y_coord);
+  let xRange = [margin.left, width - margin.right];
+  let xDomain = extent$1(X);
+  let yDomain = new InternSet(Y);
+  let height = Math.ceil((yDomain.size + yPadding) * 25) + margin.top + margin.bottom;
+  let I = range$1(X.length).filter((i) => yDomain.has(Y[i]));
+  rollup(I, ([i]) => X[i], (i) => Y[i]);
+  let xScale = scaleLinear$1(xDomain, xRange);
+  let yScale = scaleBand().domain(yDomain).range([margin.top, height - margin.bottom]).padding(yPadding);
+  let format = xScale.tickFormat(100, "%");
+  const each_array = $.ensure_array_like(dat);
+  const each_array_1 = $.ensure_array_like(yScale.domain());
+  $$payload.out += `<g class="balance-chart"${$.attr("transform", `translate(${$.stringify(DiamondWidth - 75)}, ${$.stringify(DiamondHeight + 75)})`)}><!--[-->`;
+  for (let i = 0, $$length = each_array.length; i < $$length; i++) {
+    let d = each_array[i];
+    $$payload.out += `<rect${$.attr("x", Math.min(xScale(0), xScale(d.frequency)))}${$.attr("y", yScale(d.y_coord))}${$.attr("fill", colors[X[i] > 0 ? colors.length - 1 : 0])}${$.attr("width", Math.abs(xScale(d.frequency) - xScale(0)))}${$.attr("height", yScale.bandwidth())}></rect><text${$.attr("x", xScale(X[i]) + Math.sign(X[i] - 0) * 4)}${$.attr("y", yScale(Y[i]) + yScale.bandwidth() / 2)} opacity="0.5" dy="0.35em" font-size="10"${$.attr("text-anchor", d.frequency < 0 ? "end" : "start")}>${$.escape(format(Math.abs(d.frequency)))}</text>`;
+  }
+  $$payload.out += `<!--]--><!--[-->`;
+  for (let i = 0, $$length = each_array_1.length; i < $$length; i++) {
+    let text = each_array_1[i];
+    $$payload.out += `<g class="diverging-ticks"><text${$.attr("x", xScale(0))}${$.attr("y", yScale(text) + yScale.bandwidth() / 2)} dy="-.9em" dx="-3em" font-size="10">${$.escape(text)}</text></g>`;
+  }
+  $$payload.out += `<!--]--></g>`;
+  $.pop();
+}
+function Legend($$payload, $$props) {
+  $.push();
+  let { diamond_dat, DiamondHeight } = $$props;
+  const N_CATEGO = 20;
+  const myramp = range$1(N_CATEGO).map((i) => rgb(interpolateInferno(i / (N_CATEGO - 1))).hex());
+  const color = scaleOrdinal(range$1(N_CATEGO), myramp);
+  let height = 370;
+  const margin = { right: 40, top: 65, left: 10 };
+  let innerHeight = height - margin.top - margin.right;
+  let max_rank = max(diamond_dat, (d) => d.rank_L[1]);
+  let y = scaleBand().domain(color.domain().reverse()).rangeRound([0, innerHeight]);
+  let logY = scaleLog().domain([
+    1,
+    10 ** Math.ceil(Math.max(Math.log10(max_rank)) - 1)
+  ]).rangeRound([0, innerHeight]).nice();
+  let logFormat10 = logY.tickFormat();
+  let yTicks = logY.ticks();
+  const each_array = $.ensure_array_like(color.domain());
+  const each_array_1 = $.ensure_array_like(yTicks);
+  $$payload.out += `<g class="legend-container"${$.attr("transform", `translate(${$.stringify(margin.left)}, ${$.stringify(DiamondHeight - margin.top)})`)}><!--[-->`;
+  for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
+    let d = each_array[$$index];
+    $$payload.out += `<rect${$.attr("x", 0)}${$.attr("y", y(d))}${$.attr("width", 14)}${$.attr("height", 13)}${$.attr("fill", color(d))} stroke="whitesmoke" stroke-width="1"></rect>`;
+  }
+  $$payload.out += `<!--]--></g><!--[-->`;
+  for (let i = 0, $$length = each_array_1.length; i < $$length; i++) {
+    let tick = each_array_1[i];
+    $$payload.out += `<g class="legend-text"${$.attr("transform", `translate(${$.stringify(margin.left)}, ${$.stringify(DiamondHeight + logY(tick) - margin.top)})`)}><text font-size="10"${$.attr("dy", yTicks.length - 1 == i ? "-3" : "13")} dx="20">${$.escape(logFormat10(tick))}</text></g>`;
+    if (i === yTicks.length - 1) {
+      $$payload.out += "<!--[-->";
+      $$payload.out += `<g class="legend-title"${$.attr("transform", `translate(${$.stringify(margin.left)}, ${$.stringify(DiamondHeight + logY(tick) - margin.top)})`)}><text font-size="13" dy="9">Counts per cell</text></g>`;
+    } else {
+      $$payload.out += "<!--[!-->";
+    }
+    $$payload.out += `<!--]-->`;
+  }
+  $$payload.out += `<!--]-->`;
+  $.pop();
+}
+function Dashboard($$payload, $$props) {
+  let {
+    diamond_count = [],
+    diamond_dat = [],
+    barData = [],
+    test_elem_1 = null,
+    test_elem_2 = null,
+    height = 815,
+    width = 1200,
+    DiamondHeight = 600,
+    DiamondWidth = 600,
+    DiamondInnerHeight = 440,
+    margin = { inner: 160, diamond: 40 },
+    trueDiamondHeight = 400,
+    alpha = 0.58,
+    maxlog10 = 0,
+    rtd = null,
+    title = ["System 1", "System 2"],
+    class: className = "",
+    style = "",
+    showDiamond = true,
+    showWordshift = true,
+    showDivergingBar = true,
+    showLegend = true,
+    $$slots,
+    $$events,
+    ...restProps
+  } = $$props;
+  $$payload.out += `<div${$.spread_attributes(
+    {
+      class: `allotaxonometer-dashboard ${$.stringify(className)}`,
+      style,
+      ...restProps
+    },
+    "svelte-n6o6ey"
+  )}><svg id="allotaxonometer-svg"${$.attr("height", height)}${$.attr("width", width)} class="svelte-n6o6ey">`;
+  if (showDiamond) {
+    $$payload.out += "<!--[-->";
+    Diamond($$payload, {
+      diamond_count,
+      diamond_dat,
+      DiamondInnerHeight,
+      margin,
+      trueDiamondHeight,
+      alpha,
+      maxlog10,
+      rtd,
+      title
+    });
+  } else {
+    $$payload.out += "<!--[!-->";
+  }
+  $$payload.out += `<!--]-->`;
+  if (showWordshift) {
+    $$payload.out += "<!--[-->";
+    Wordshift($$payload, {
+      barData,
+      DashboardHeight: height,
+      DashboardWidth: width
+    });
+  } else {
+    $$payload.out += "<!--[!-->";
+  }
+  $$payload.out += `<!--]-->`;
+  if (showDivergingBar) {
+    $$payload.out += "<!--[-->";
+    DivergingBarChart($$payload, {
+      test_elem_1,
+      test_elem_2,
+      DiamondHeight,
+      DiamondWidth
+    });
+  } else {
+    $$payload.out += "<!--[!-->";
+  }
+  $$payload.out += `<!--]-->`;
+  if (showLegend) {
+    $$payload.out += "<!--[-->";
+    Legend($$payload, { diamond_dat, DiamondHeight });
+  } else {
+    $$payload.out += "<!--[!-->";
+  }
+  $$payload.out += `<!--]--></svg></div>`;
+}
+export {
+  Dashboard,
+  Diamond,
+  DivergingBarChart,
+  Legend,
+  Test,
+  Wordshift
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "allotaxonometer-ui",
-  "version": "0.1.0",
-  "description": "Headless UI components for allotaxonometer visualizations",
+  "version": "0.1.2",
+  "description": "Headless UI components for allotaxonometer visualizations built with Svelte 5",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -10,19 +10,38 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
-    }
+    },
+    "./ssr": "./dist/ssr/index.js"
   },
-  "files": ["dist", "README.md"],
-  "keywords": ["svelte", "visualization", "allotaxonometer", "dashboard"],
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "svelte",
+    "svelte5",
+    "visualization",
+    "allotaxonometer",
+    "dashboard",
+    "headless-ui",
+    "components"
+  ],
   "author": "Your Name <your.email@example.com>",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/yourusername/allotaxonometer-ui.git"
+    "url": "https://github.com/Vermont-Complex-Systems/allotaxonometer-ui.git"
+  },
+  "homepage": "https://github.com/Vermont-Complex-Systems/allotaxonometer-ui#readme",
+  "bugs": {
+    "url": "https://github.com/Vermont-Complex-Systems/allotaxonometer-ui/issues"
   },
-  "homepage": "https://github.com/yourusername/allotaxonometer-ui#readme",
   "peerDependencies": {
-    "svelte": "^5.0.0"
+    "svelte": "^5.0.0",
+    "d3": "^7.0.0",
+    "allotaxonometer": "1.1.11",
+    "@ungap/structured-clone": "1.3.0"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^4.0.0",
@@ -31,8 +50,8 @@
     "vite": "^5.0.3"
   },
   "scripts": {
-    "dev": "vite",
     "build": "vite build",
-    "prepublishOnly": "npm run build"
+    "build:ssr": "vite build --config vite.ssr.config.js",
+    "build:all": "npm run build && npm run build:ssr"
   }
-}
+}