allotaxonometer-ui 0.1.7 → 0.1.9

package/README.md

@@ -8,12 +8,6 @@ Headless UI components for allotaxonometer visualizations built with Svelte 5.
 npm install allotaxonometer-ui
 ```
 
-Make sure you have these installed:
-
-```bash
-npm install svelte d3 allotaxonometer @ungap/structured-clone
-```
-
 ## Usage
 
 ```svelte
@@ -48,4 +42,4 @@ git clone https://github.com/yourusername/allotaxonometer-ui.git
 cd allotaxonometer-ui
 npm install
 npm run build
-```
+```

package/dist/index.js

@@ -33,9 +33,9 @@ function style(props) {
 
     grey: [1, 1, 1].map(v => v * 0.75),
     darkgrey: [1, 1, 1].map(v => v * 0.55),
-    darkergrey: [1, 1, 1].map(v => v * 0.35),
-    verydarkgrey: [1, 1, 1].map(v => v * 0.15),
-    superdarkgrey: [1, 1, 1].map(v => v * 0.10),
+    darkergrey: [1, 1, 1].map(v => v * 0.50),
+    verydarkgrey: [1, 1, 1].map(v => v * 0.55),
+    superdarkgrey: [1, 1, 1].map(v => v * 0.55),
     reallyverdarkgrey: [1, 1, 1].map(v => v * 0.05),
 
     orange: [255, 116, 0].map(v => v / 255)
@@ -56,12 +56,8 @@ function style(props) {
 const alloFonts = {
   family: `"EB Garamond", "Garamond", "Century Schoolbook L", "URW Bookman L", "Bookman Old Style", "Times", serif`,
   sizes: {
-    xs: "10px",
-    sm: "12px",
     md: "14px",
-    lg: "16px",
-    xl: "18px"
-  }
+    lg: "16px"}
 
 };
 
@@ -83,8 +79,8 @@ function AxisX($$anchor, $$props) {
 
 	let helperText = () => style({
 		fontFamily: alloFonts.family,
-		fontSize: alloFonts.sizes.sm,
-		fill: alloColors.css.darkergrey,
+		fontSize: alloFonts.sizes.md,
+		fill: alloColors.css.darkgrey,
 		textAnchor: "middle"
 	});
 
@@ -108,7 +104,7 @@ function AxisX($$anchor, $$props) {
 		$.template_effect(
 			($0, $1, $2) => {
 				$.set_attribute(g_1, 'transform', `translate(${$0 ?? ''}, 0)`);
-				$.set_attribute(line, 'stroke', alloColors.css.darkergreyy);
+				$.set_attribute(line, 'stroke', alloColors.css.darkergrey);
 				$.set_attribute(g_2, 'transform', `translate(${$1 ?? ''}, 0) scale(-1,1) rotate(45)`);
 				$.set_attribute(text, 'font-family', alloFonts.family);
 				$.set_attribute(text, 'font-size', alloFonts.sizes.md);
@@ -202,8 +198,8 @@ function AxisY($$anchor, $$props) {
 
 	let helperText = () => style({
 		fontFamily: alloFonts.family,
-		fontSize: alloFonts.sizes.sm,
-		fill: alloColors.css.darkergrey,
+		fontSize: alloFonts.sizes.md,
+		fill: alloColors.css.darkgrey,
 		textAnchor: "middle"
 	});
 
@@ -227,7 +223,7 @@ function AxisY($$anchor, $$props) {
 		$.template_effect(
 			($0, $1, $2) => {
 				$.set_attribute(g_1, 'transform', `translate(0, ${$0 ?? ''})`);
-				$.set_attribute(line, 'stroke', alloColors.css.darkergreyy);
+				$.set_attribute(line, 'stroke', alloColors.css.darkergrey);
 				$.set_attribute(g_2, 'transform', `translate(0, ${$1 ?? ''}) rotate(45)`);
 				$.set_attribute(text, 'font-family', alloFonts.family);
 				$.set_attribute(text, 'font-size', alloFonts.sizes.md);
@@ -689,7 +685,7 @@ function Diamond($$anchor, $$props) {
 				$.set_attribute(text, 'dx', $.get(d).x1 - $.get(d).y1 <= 0 ? 5 : -5);
 				$.set_attribute(text, 'text-anchor', $.get(d).x1 - $.get(d).y1 <= 0 ? "start" : "end");
 				$.set_attribute(text, 'transform', `scale(1,-1) rotate(-90) rotate(-45, ${$2 ?? ''}, ${$3 ?? ''}) translate(${$4 ?? ''}, 0)`);
-				$.set_style(text, `font-family: ${alloFonts ?? ''}; font-size: 12px; fill: ${alloColors.css.darkergrey ?? ''};`);
+				$.set_style(text, `font-family: ${alloFonts.family}; font-size: 12px; fill: ${alloColors.css.darkergrey ?? ''};`);
 				$.set_text(text_1, $5);
 			},
 			[
@@ -736,8 +732,8 @@ function Diamond($$anchor, $$props) {
 			$.reset(div_1);
 
 			$.template_effect(() => $.set_style(div_1, `
-                position: fixed; 
-                left: ${$.get(tooltipX) ?? ''}px; 
+                position: fixed;
+                left: ${$.get(tooltipX) ?? ''}px;
                 top: ${$.get(tooltipY) ?? ''}px;
                 background: white;
                 border: 1px solid rgb(200, 200, 200);
@@ -887,7 +883,7 @@ function Wordshift($$anchor, $$props) {
 				$.set_attribute(line_1, 'y2', $.get(innerHeight) - xAxisYOffset + barYOffset);
 				$.set_style(line_1, $.get(tick) === 0 ? `stroke: ${alloColors.css.verydarkgrey}; stroke-width: 1; stroke-opacity: 0.8;` : `stroke: currentColor; stroke-opacity: 0.1;`);
 				$.set_attribute(text, 'x', $4);
-				$.set_style(text, `font-family: ${alloFonts ?? ''}; font-size: 14px; fill: ${alloColors.css.verydarkgrey ?? ''};`);
+				$.set_style(text, `font-family: ${alloFonts.family}; font-size: 14px; fill: ${alloColors.css.verydarkgrey ?? ''};`);
 				$.set_text(text_1, $5);
 			},
 			[
@@ -956,7 +952,7 @@ function Wordshift($$anchor, $$props) {
 				$.template_effect(() => {
 					$.set_attribute(text_6, 'x', $.get(xValue) > 0 ? -6 : 6);
 					$.set_attribute(text_6, 'text-anchor', $.get(xValue) > 0 ? "end" : "start");
-					$.set_style(text_6, `font-family: ${alloFonts ?? ''}; font-size: 14px; fill: ${alloColors.css.darkergrey ?? ''}; opacity: 0.5;`);
+					$.set_style(text_6, `font-family: ${alloFonts.family}; font-size: 14px; fill: ${alloColors.css.darkergrey ?? ''}; opacity: 0.5;`);
 					$.set_text(text_7, $.get(labelData).numbers_y);
 				});
 
@@ -975,7 +971,7 @@ function Wordshift($$anchor, $$props) {
 				$.set_attribute(g_3, 'transform', `translate(0, ${$0 ?? ''})`);
 				$.set_attribute(text_4, 'x', $.get(xValue) > 0 ? 6 : -6);
 				$.set_attribute(text_4, 'text-anchor', $.get(xValue) > 0 ? "start" : "end");
-				$.set_style(text_4, `font-family: ${alloFonts ?? ''}; font-size: 14px; fill: ${alloColors.css.verydarkgrey ?? ''};`);
+				$.set_style(text_4, `font-family: ${alloFonts.family}; font-size: 14px; fill: ${alloColors.css.verydarkgrey ?? ''};`);
 				$.set_text(text_5, $.get(labelData).name_y);
 			},
 			[
@@ -997,7 +993,7 @@ function Wordshift($$anchor, $$props) {
 			$.set_attribute(svg, 'viewBox', `0 0 ${width() ?? ''} ${$.get(finalHeight) ?? ''}`);
 			$.set_attribute(g, 'transform', `translate(${marginLeft() ?? ''}, ${marginTop() - shiftSvgBy})`);
 			$.set_attribute(text_2, 'x', $0);
-			$.set_style(text_2, `font-family: ${alloFonts ?? ''}; font-size: 16px; fill: ${alloColors.css.verydarkgrey ?? ''};`);
+			$.set_style(text_2, `font-family: ${alloFonts.family}; font-size: 16px; fill: ${alloColors.css.verydarkgrey ?? ''};`);
 			$.set_text(text_3, xLabel());
 			$.set_attribute(g_2, 'transform', `translate(${$1 ?? ''}, 0)`);
 		},
@@ -1080,7 +1076,7 @@ function DivergingBarChart($$anchor, $$props) {
 				$.set_attribute(text, 'x', $4);
 				$.set_attribute(text, 'y', $5);
 				$.set_attribute(text, 'text-anchor', $.get(X)[$.get(i)] < 0 ? "end" : "start");
-				$.set_style(text, `font-family: ${alloFonts ?? ''}; font-size: 10px; fill: ${alloColors.css.darkergrey ?? ''}; opacity: 0.5;`);
+				$.set_style(text, `font-family: ${alloFonts.family}; font-size: 12px; fill: ${alloColors.css.darkergrey ?? ''}; opacity: 0.5;`);
 				$.set_text(text_1, $6);
 			},
 			[
@@ -1109,7 +1105,7 @@ function DivergingBarChart($$anchor, $$props) {
 			($0, $1) => {
 				$.set_attribute(text_2, 'y', $0);
 				$.set_attribute(text_2, 'opacity', $1);
-				$.set_style(text_2, `font-family: ${alloFonts ?? ''}; font-size: 14px; fill: ${alloColors.css.darkergrey ?? ''};`);
+				$.set_style(text_2, `font-family: ${alloFonts.family}; font-size: 14px; fill: ${alloColors.css.darkergrey ?? ''};`);
 				$.set_text(text_3, $.get(label));
 			},
 			[
@@ -1197,7 +1193,7 @@ function Legend($$anchor, $$props) {
 		$.template_effect(
 			($0) => {
 				$.set_attribute(g_1, 'transform', `translate(${$0 ?? ''}, 0)`);
-				$.set_style(text, `font-family: ${alloFonts ?? ''}; font-size: 14px; fill: ${alloColors.css.verydarkgrey ?? ''}; text-anchor: start;`);
+				$.set_style(text, `font-family: ${alloFonts.family}; font-size: 14px; fill: ${alloColors.css.verydarkgrey ?? ''}; text-anchor: start;`);
 				$.set_text(text_1, $.get(tick));
 			},
 			[() => $.get(x2)($.get(tick))]
@@ -1217,7 +1213,7 @@ function Legend($$anchor, $$props) {
 		$.set_attribute(svg, 'viewBox', `0 0 ${width() ?? ''} ${height() ?? ''}`);
 		$.set_attribute(text_2, 'x', marginLeft() - 25);
 		$.set_attribute(text_2, 'y', marginTop() + marginBottom());
-		$.set_style(text_2, `font-family: ${alloFonts ?? ''}; font-size: 14px; fill: ${alloColors.css.verydarkgrey ?? ''}; text-anchor: start;`);
+		$.set_style(text_2, `font-family: ${alloFonts.family}; font-size: 14px; fill: ${alloColors.css.verydarkgrey ?? ''}; text-anchor: start;`);
 	});
 
 	$.append($$anchor, svg);
@@ -1244,15 +1240,10 @@ function Dashboard($$anchor, $$props) {
 		DashboardWidth = $.prop($$props, 'DashboardWidth', 3, 1200),
 		DiamondHeight = $.prop($$props, 'DiamondHeight', 3, 600),
 		DiamondWidth = $.prop($$props, 'DiamondWidth', 3, 600),
+		WordshiftWidth = $.prop($$props, 'WordshiftWidth', 3, 640),
 		marginInner = $.prop($$props, 'marginInner', 3, 160),
 		marginDiamond = $.prop($$props, 'marginDiamond', 3, 40),
 		max_count_log = $.prop($$props, 'max_count_log', 3, undefined);
-		$.prop($$props, 'class', 3, '');
-		$.prop($$props, 'style', 3, '');
-		$.prop($$props, 'showDiamond', 3, true);
-		$.prop($$props, 'showWordshift', 3, true);
-		$.prop($$props, 'showDivergingBar', 3, true);
-		$.prop($$props, 'showLegend', 3, true);
 
 	let max_shift = $.derived(() => barData().length > 0 ? Math.max(...barData().map((d) => Math.abs(d.metric))) : 1);
 
@@ -1377,7 +1368,9 @@ function Dashboard($$anchor, $$props) {
 		get xDomain() {
 			return $.get(wordshiftXDomain);
 		},
-		width: 640,
+		get width() {
+			return WordshiftWidth();
+		},
 		marginLeft: 110
 	});
 
@@ -1387,12 +1380,12 @@ function Dashboard($$anchor, $$props) {
 	$.reset(div);
 
 	$.template_effect(() => {
-		$.set_style(div_5, `font-family: ${alloFonts ?? ''}; font-size: 16px; color: ${alloColors.css.superdarkgrey ?? ''};`);
+		$.set_style(div_5, `font-family: ${alloFonts.family}; font-size: 16px; color: ${alloColors.css.superdarkgrey ?? ''};`);
 		$.set_text(text, title()[0]);
-		$.set_style(div_6, `position: absolute; top: 100%; left: -8em; margin-top: 3em; font-family: ${alloFonts ?? ''}; font-size: 14px; color: ${alloColors.css.darkgrey ?? ''}; width: 150px; line-height: 1;`);
+		$.set_style(div_6, `position: absolute; top: 100%; left: -8em; margin-top: 3em; font-family: ${alloFonts.family}; font-size: 14px; color: ${alloColors.css.darkgrey ?? ''}; width: 150px; line-height: 1;`);
 		$.set_text(text_1, instrumentText());
 		$.set_text(text_2, `α = ${alpha() ?? ''}`);
-		$.set_style(div_9, `font-family: ${alloFonts ?? ''}; font-size: 16px; color: ${alloColors.css.superdarkgrey ?? ''};`);
+		$.set_style(div_9, `font-family: ${alloFonts.family}; font-size: 16px; color: ${alloColors.css.superdarkgrey ?? ''};`);
 		$.set_text(text_3, title()[1]);
 	});
 
@@ -1509,7 +1502,7 @@ function buildMixedElems(elem1, elem2) {
    mixedelem[1]['types'] = union; // store union in mixedelem array for elem2
    return mixedelem // return mixedelem array
  }
- 
+
 // Combine elements and return a combined array containing counts, ranks, probs, and totalunique
 function combElems(elem1, elem2) {
    const mixedelem = buildMixedElems(elem1, elem2);  // build mixed elements array
@@ -1520,7 +1513,7 @@ function combElems(elem1, elem2) {
      const counts = new Array(mixedelem[j]['types'].length); // initialize counts array
      const probs = new Array(mixedelem[j]['types'].length);  // initialize probs array
 
-    
+
      // for each index in mixed elem[j], which is the union of both systems
      for (let i=0; i < mixedelem[j]['types'].length; i++) {  // find the index of type mixedelem[j]['types'][i] in system 1 or 2
        // find the index of type mixedelem[j]['types'][i] in system 1 or 2
@@ -1529,9 +1522,9 @@ function combElems(elem1, elem2) {
        counts[i] = idx_type_enumlist_in_elem === -1 ? 0 : enum_list[j][idx_type_enumlist_in_elem]["counts"];
        probs[i]  = idx_type_enumlist_in_elem === -1 ? 0 : enum_list[j][idx_type_enumlist_in_elem]["probs"];
      }
-     
-     
-     // store counts, ranks, probs, and totalunique in mixedelem array for elem1 or elem2   
+
+
+     // store counts, ranks, probs, and totalunique in mixedelem array for elem1 or elem2
      mixedelem[j]['counts']      = counts;
      mixedelem[j]['ranks']       = tiedrank(mixedelem[j]['counts']);
      mixedelem[j]['probs']       = probs;
@@ -1546,32 +1539,32 @@ function combElems(elem1, elem2) {
 function balanceDat(elem1, elem2) {
   const types_1 = elem1.map(d => d.types);
   const types_2 = elem2.map(d => d.types);
-  
+
   const union_types = getUnions(types_1, types_2);
   const tot_types = types_1.length+types_2.length;
-  
-  return [ 
+
+  return [
     { 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) } 
+    { y_coord: "all types",       frequency: +(types_2.length / union_types.size).toFixed(3) },
+    { y_coord: "all types",       frequency: -(types_1.length / union_types.size).toFixed(3) },
+    { y_coord: "exclusive types", frequency: +(setdiff(types_2, types_1).size / types_2.length).toFixed(3) },
+    { y_coord: "exclusive types", frequency: -(setdiff(types_1, types_2).size / types_1.length).toFixed(3) }
   ]
 }
-   
+
 // helper to wrangle the data for the wordshift plot
-function wordShift_dat(me, dat) { 
+function wordShift_dat(me, dat) {
   const out = [];
   for (let i=0; i < me[0]['types'].length; i++) {
     const rank_diff = me[0]['ranks'][i]-me[1]['ranks'][i];
     out.push({
       'type': `${me[0]['types'][i]} (${me[0]['ranks'][i]} ⇋ ${me[1]['ranks'][i]})` ,
       'rank_diff': rank_diff,
-      'metric': rank_diff < 0 ? -dat.deltas[i] : dat.deltas[i], 
+      'metric': rank_diff < 0 ? -dat.deltas[i] : dat.deltas[i],
     });
   }
-  
+
   return out.slice().sort((a, b) => descending(Math.abs(a.metric), Math.abs(b.metric)))
 }
 

package/dist/ssr/index.js

@@ -21,9 +21,9 @@ const rawColors = {
   lightgreyish: [1, 1, 1].map((v) => v * 0.8),
   grey: [1, 1, 1].map((v) => v * 0.75),
   darkgrey: [1, 1, 1].map((v) => v * 0.55),
-  darkergrey: [1, 1, 1].map((v) => v * 0.35),
-  verydarkgrey: [1, 1, 1].map((v) => v * 0.15),
-  superdarkgrey: [1, 1, 1].map((v) => v * 0.1),
+  darkergrey: [1, 1, 1].map((v) => v * 0.5),
+  verydarkgrey: [1, 1, 1].map((v) => v * 0.55),
+  superdarkgrey: [1, 1, 1].map((v) => v * 0.55),
   reallyverdarkgrey: [1, 1, 1].map((v) => v * 0.05),
   orange: [255, 116, 0].map((v) => v / 255)
 };
@@ -38,11 +38,8 @@ const alloColors = {
 const alloFonts = {
   family: `"EB Garamond", "Garamond", "Century Schoolbook L", "URW Bookman L", "Bookman Old Style", "Times", serif`,
   sizes: {
-    xs: "10px",
-    sm: "12px",
     md: "14px",
-    lg: "16px",
-    xl: "18px"
+    lg: "16px"
   }
 };
 function AxisX($$payload, $$props) {
@@ -58,15 +55,15 @@ function AxisX($$payload, $$props) {
   });
   let helperText = () => style({
     fontFamily: alloFonts.family,
-    fontSize: alloFonts.sizes.sm,
-    fill: alloColors.css.darkergrey,
+    fontSize: alloFonts.sizes.md,
+    fill: alloColors.css.darkgrey,
     textAnchor: "middle"
   });
   const each_array = $.ensure_array_like(xTicks);
   $$payload.out += `<g class="axis x"${$.attr("transform", `translate(0, ${$.stringify(innerHeight)})`)}><!--[-->`;
   for (let index = 0, $$length = each_array.length; index < $$length; index++) {
     let tick = each_array[index];
-    $$payload.out += `<g${$.attr("transform", `translate(${$.stringify(scale(tick))}, 0)`)}><line x1="0" x2="0" y1="0" y2="6"${$.attr("stroke", alloColors.css.darkergreyy)} stroke-width="0.5"></line></g><g${$.attr("transform", `translate(${$.stringify(scale(tick))}, 0) scale(-1,1) rotate(45)`)}><text dx="5" dy="13" text-anchor="start"${$.attr("font-family", alloFonts.family)}${$.attr("font-size", alloFonts.sizes.md)}${$.attr("fill", alloColors.css.darkergrey)}>${$.escape(logFormat10(tick))}</text></g>`;
+    $$payload.out += `<g${$.attr("transform", `translate(${$.stringify(scale(tick))}, 0)`)}><line x1="0" x2="0" y1="0" y2="6"${$.attr("stroke", alloColors.css.darkergrey)} stroke-width="0.5"></line></g><g${$.attr("transform", `translate(${$.stringify(scale(tick))}, 0) scale(-1,1) rotate(45)`)}><text dx="5" dy="13" text-anchor="start"${$.attr("font-family", alloFonts.family)}${$.attr("font-size", alloFonts.sizes.md)}${$.attr("fill", alloColors.css.darkergrey)}>${$.escape(logFormat10(tick))}</text></g>`;
   }
   $$payload.out += `<!--]--><g class="xlab"><text${$.attr("x", innerHeight / 2)} dy="45"${$.attr("transform", `scale(-1,1) translate(-${$.stringify(innerHeight)}, 0)`)}${$.attr_style(axisStyles())}>Rank r</text><text${$.attr("x", innerHeight / 2)} dy="63"${$.attr("transform", `scale(-1,1) translate(-${$.stringify(innerHeight)}, 0)`)}${$.attr_style(axisStyles())}>for</text><text${$.attr("x", innerHeight / 2)} dy="80"${$.attr("transform", `scale(-1,1) translate(-${$.stringify(innerHeight)}, 0)`)}${$.attr_style(axisStyles())}>${$.escape(title[1])}</text><text${$.attr("x", innerHeight - 40)} dy="60"${$.attr("transform", `scale(-1,1) translate(-${$.stringify(innerHeight)}, 0)`)}${$.attr_style(helperText())}>more →</text><text${$.attr("x", innerHeight - 40)} dy="75"${$.attr("transform", `scale(-1,1) translate(-${$.stringify(innerHeight)}, 0)`)}${$.attr_style(helperText())}>frequent</text><text${$.attr("x", 40)} dy="60"${$.attr("transform", `scale(-1,1) translate(-${$.stringify(innerHeight)}, 0)`)}${$.attr_style(helperText())}>← less</text><text${$.attr("x", 40)} dy="75"${$.attr("transform", `scale(-1,1) translate(-${$.stringify(innerHeight)}, 0)`)}${$.attr_style(helperText())}>frequent</text></g></g>`;
   $.pop();
@@ -84,15 +81,15 @@ function AxisY($$payload, $$props) {
   });
   let helperText = () => style({
     fontFamily: alloFonts.family,
-    fontSize: alloFonts.sizes.sm,
-    fill: alloColors.css.darkergrey,
+    fontSize: alloFonts.sizes.md,
+    fill: alloColors.css.darkgrey,
     textAnchor: "middle"
   });
   const each_array = $.ensure_array_like(yTicks);
   $$payload.out += `<g class="axis y"${$.attr("transform", `translate(${$.stringify(innerHeight)}, 0) scale(-1, 1)`)}><!--[-->`;
   for (let index = 0, $$length = each_array.length; index < $$length; index++) {
     let tick = each_array[index];
-    $$payload.out += `<g${$.attr("transform", `translate(0, ${$.stringify(scale(tick))})`)}><line x1="0" x2="-6" y1="0" y2="0"${$.attr("stroke", alloColors.css.darkergreyy)} stroke-width="0.5"></line></g><g${$.attr("transform", `translate(0, ${$.stringify(scale(tick))}) rotate(45)`)}><text dx="-5" dy="13" text-anchor="end"${$.attr("font-family", alloFonts.family)}${$.attr("font-size", alloFonts.sizes.md)}${$.attr("fill", alloColors.css.darkergrey)}>${$.escape(logFormat10(tick))}</text></g>`;
+    $$payload.out += `<g${$.attr("transform", `translate(0, ${$.stringify(scale(tick))})`)}><line x1="0" x2="-6" y1="0" y2="0"${$.attr("stroke", alloColors.css.darkergrey)} stroke-width="0.5"></line></g><g${$.attr("transform", `translate(0, ${$.stringify(scale(tick))}) rotate(45)`)}><text dx="-5" dy="13" text-anchor="end"${$.attr("font-family", alloFonts.family)}${$.attr("font-size", alloFonts.sizes.md)}${$.attr("fill", alloColors.css.darkergrey)}>${$.escape(logFormat10(tick))}</text></g>`;
   }
   $$payload.out += `<!--]--><g class="ylab" transform="rotate(90)"><text${$.attr("x", innerHeight / 2)} dy="45"${$.attr_style(axisStyles())}>Rank r</text><text${$.attr("x", innerHeight / 2)} dy="63"${$.attr_style(axisStyles())}>for</text><text${$.attr("x", innerHeight / 2)} dy="80"${$.attr_style(axisStyles())}>${$.escape(title[0])}</text><text${$.attr("x", innerHeight - 40)} dy="60"${$.attr_style(helperText())}>less →</text><text${$.attr("x", innerHeight - 40)} dy="75"${$.attr_style(helperText())}>frequent</text><text${$.attr("x", 40)} dy="60"${$.attr_style(helperText())}>← more</text><text${$.attr("x", 40)} dy="75"${$.attr_style(helperText())}>frequent</text></g></g>`;
   $.pop();
@@ -285,7 +282,7 @@ function Diamond($$payload, $$props) {
   $$payload.out += `<!--]--><!--[-->`;
   for (let $$index_2 = 0, $$length = each_array_2.length; $$index_2 < $$length; $$index_2++) {
     let d = each_array_2[$$index_2];
-    $$payload.out += `<text${$.attr("x", xy(d.x1))}${$.attr("y", Number.isInteger(d.coord_on_diag) ? xy(d.y1) : xy(d.y1) - 1)}${$.attr("dx", d.x1 - d.y1 <= 0 ? 5 : -5)} dy="5"${$.attr("text-anchor", d.x1 - d.y1 <= 0 ? "start" : "end")}${$.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)`)}${$.attr_style(`font-family: ${$.stringify(alloFonts)}; font-size: 12px; fill: ${$.stringify(alloColors.css.darkergrey)};`)}>${$.escape(d.types.split(",")[0])}</text>`;
+    $$payload.out += `<text${$.attr("x", xy(d.x1))}${$.attr("y", Number.isInteger(d.coord_on_diag) ? xy(d.y1) : xy(d.y1) - 1)}${$.attr("dx", d.x1 - d.y1 <= 0 ? 5 : -5)} dy="5"${$.attr("text-anchor", d.x1 - d.y1 <= 0 ? "start" : "end")}${$.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)`)}${$.attr_style(`font-family: ${$.stringify(alloFonts.family)}; font-size: 12px; fill: ${$.stringify(alloColors.css.darkergrey)};`)}>${$.escape(d.types.split(",")[0])}</text>`;
   }
   $$payload.out += `<!--]--><line x1="0" y1="0"${$.attr("x2", innerHeight - 7)}${$.attr("y2", innerHeight - 7)}${$.attr_style(`stroke: ${$.stringify(alloColors.css.verydarkgrey)}; stroke-width: 0.5;`)}></line>`;
   Contours($$payload, {
@@ -368,9 +365,9 @@ function Wordshift($$payload, $$props) {
   $$payload.out += `<svg${$.attr("width", width)}${$.attr("height", finalHeight)}${$.attr("viewBox", `0 0 ${$.stringify(width)} ${$.stringify(finalHeight)}`)} style="overflow: visible; display: block;"><g class="wordshift-container"${$.attr("transform", `translate(${$.stringify(marginLeft)}, ${$.stringify(marginTop - shiftSvgBy)})`)}><g class="wordshift-axis x"${$.attr("transform", `translate(0, ${$.stringify(xAxisYOffset)})`)}><!--[-->`;
   for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
     let tick = each_array[$$index];
-    $$payload.out += `<line${$.attr("x1", xScale(tick))} y1="0"${$.attr("x2", xScale(tick))} y2="6" style="stroke: currentColor; stroke-width: 1;"></line><line class="wordshift-grid-line"${$.attr("x1", xScale(tick))} y1="0"${$.attr("x2", xScale(tick))}${$.attr("y2", innerHeight - xAxisYOffset + barYOffset)}${$.attr_style(tick === 0 ? `stroke: ${alloColors.css.verydarkgrey}; stroke-width: 1; stroke-opacity: 0.8;` : `stroke: currentColor; stroke-opacity: 0.1;`)}></line><text${$.attr("x", xScale(tick))} y="-12" text-anchor="middle"${$.attr_style(`font-family: ${$.stringify(alloFonts)}; font-size: 14px; fill: ${$.stringify(alloColors.css.verydarkgrey)};`)}>${$.escape(format(tick))}</text>`;
+    $$payload.out += `<line${$.attr("x1", xScale(tick))} y1="0"${$.attr("x2", xScale(tick))} y2="6" style="stroke: currentColor; stroke-width: 1;"></line><line class="wordshift-grid-line"${$.attr("x1", xScale(tick))} y1="0"${$.attr("x2", xScale(tick))}${$.attr("y2", innerHeight - xAxisYOffset + barYOffset)}${$.attr_style(tick === 0 ? `stroke: ${alloColors.css.verydarkgrey}; stroke-width: 1; stroke-opacity: 0.8;` : `stroke: currentColor; stroke-opacity: 0.1;`)}></line><text${$.attr("x", xScale(tick))} y="-12" text-anchor="middle"${$.attr_style(`font-family: ${$.stringify(alloFonts.family)}; font-size: 14px; fill: ${$.stringify(alloColors.css.verydarkgrey)};`)}>${$.escape(format(tick))}</text>`;
   }
-  $$payload.out += `<!--]--><text${$.attr("x", xScale(0))} y="-35" text-anchor="middle"${$.attr_style(`font-family: ${$.stringify(alloFonts)}; font-size: 16px; fill: ${$.stringify(alloColors.css.verydarkgrey)};`)}>${$.escape(xLabel)}</text></g><!--[-->`;
+  $$payload.out += `<!--]--><text${$.attr("x", xScale(0))} y="-35" text-anchor="middle"${$.attr_style(`font-family: ${$.stringify(alloFonts.family)}; font-size: 16px; fill: ${$.stringify(alloColors.css.verydarkgrey)};`)}>${$.escape(xLabel)}</text></g><!--[-->`;
   for (let $$index_1 = 0, $$length = each_array_1.length; $$index_1 < $$length; $$index_1++) {
     let i = each_array_1[$$index_1];
     $$payload.out += `<rect class="wordshift-bar"${$.attr("x", Math.min(xScale(0), xScale(X[i])))}${$.attr("y", yScale(Y[i]) + (yScale.bandwidth() - yScale.bandwidth() * barHeightFactor) / 2)}${$.attr("fill", colors[X[i] > 0 ? colors.length - 1 : 0])}${$.attr("width", Math.abs(xScale(X[i]) - xScale(0)))}${$.attr("height", yScale.bandwidth() * barHeightFactor)} style="mix-blend-mode: multiply;"></rect>`;
@@ -380,10 +377,10 @@ function Wordshift($$payload, $$props) {
     let label = each_array_2[$$index_2];
     const labelData = parseLabelData(label);
     const xValue = YX.get(label);
-    $$payload.out += `<g class="wordshift-label-group"${$.attr("transform", `translate(0, ${$.stringify(yScale(label) + yScale.bandwidth() / 2)})`)}><text${$.attr("x", xValue > 0 ? 6 : -6)} dy="0.32em"${$.attr("text-anchor", xValue > 0 ? "start" : "end")}${$.attr_style(`font-family: ${$.stringify(alloFonts)}; font-size: 14px; fill: ${$.stringify(alloColors.css.verydarkgrey)};`)}>${$.escape(labelData.name_y)}</text>`;
+    $$payload.out += `<g class="wordshift-label-group"${$.attr("transform", `translate(0, ${$.stringify(yScale(label) + yScale.bandwidth() / 2)})`)}><text${$.attr("x", xValue > 0 ? 6 : -6)} dy="0.32em"${$.attr("text-anchor", xValue > 0 ? "start" : "end")}${$.attr_style(`font-family: ${$.stringify(alloFonts.family)}; font-size: 14px; fill: ${$.stringify(alloColors.css.verydarkgrey)};`)}>${$.escape(labelData.name_y)}</text>`;
     if (labelData.numbers_y) {
       $$payload.out += "<!--[-->";
-      $$payload.out += `<text${$.attr("x", xValue > 0 ? -6 : 6)} dy="0.32em"${$.attr("text-anchor", xValue > 0 ? "end" : "start")}${$.attr_style(`font-family: ${$.stringify(alloFonts)}; font-size: 14px; fill: ${$.stringify(alloColors.css.darkergrey)}; opacity: 0.5;`)}>${$.escape(labelData.numbers_y)}</text>`;
+      $$payload.out += `<text${$.attr("x", xValue > 0 ? -6 : 6)} dy="0.32em"${$.attr("text-anchor", xValue > 0 ? "end" : "start")}${$.attr_style(`font-family: ${$.stringify(alloFonts.family)}; font-size: 14px; fill: ${$.stringify(alloColors.css.darkergrey)}; opacity: 0.5;`)}>${$.escape(labelData.numbers_y)}</text>`;
     } else {
       $$payload.out += "<!--[!-->";
     }
@@ -427,12 +424,12 @@ function DivergingBarChart($$payload, $$props) {
   $$payload.out += `<svg${$.attr("width", width)}${$.attr("height", height)}${$.attr("viewBox", `0 0 ${$.stringify(width)} ${$.stringify(height)}`)} style="overflow: visible; display: block;"><g class="balance-chart"><!--[-->`;
   for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
     let i = each_array[$$index];
-    $$payload.out += `<rect${$.attr("x", Math.min(xScale(0), xScale(X[i])))}${$.attr("y", yScale(Y[i]))}${$.attr("fill", colors[X[i] > 0 ? colors.length - 1 : 0])}${$.attr("width", Math.abs(xScale(X[i]) - 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)} dy="0.35em"${$.attr("text-anchor", X[i] < 0 ? "end" : "start")}${$.attr_style(`font-family: ${$.stringify(alloFonts)}; font-size: 10px; fill: ${$.stringify(alloColors.css.darkergrey)}; opacity: 0.5;`)}>${$.escape(format(Math.abs(X[i])))}</text>`;
+    $$payload.out += `<rect${$.attr("x", Math.min(xScale(0), xScale(X[i])))}${$.attr("y", yScale(Y[i]))}${$.attr("fill", colors[X[i] > 0 ? colors.length - 1 : 0])}${$.attr("width", Math.abs(xScale(X[i]) - 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)} dy="0.35em"${$.attr("text-anchor", X[i] < 0 ? "end" : "start")}${$.attr_style(`font-family: ${$.stringify(alloFonts.family)}; font-size: 12px; fill: ${$.stringify(alloColors.css.darkergrey)}; opacity: 0.5;`)}>${$.escape(format(Math.abs(X[i])))}</text>`;
   }
   $$payload.out += `<!--]--><g class="y-axis"${$.attr("transform", `translate(${$.stringify(xScale(0))}, -12)`)}><!--[-->`;
   for (let $$index_1 = 0, $$length = each_array_1.length; $$index_1 < $$length; $$index_1++) {
     let label = each_array_1[$$index_1];
-    $$payload.out += `<text x="0"${$.attr("y", yScale(label) + yScale.bandwidth() / 2)} dy="0.35em" text-anchor="middle"${$.attr("opacity", YX.get(label) ? "0.5" : "1")}${$.attr_style(`font-family: ${$.stringify(alloFonts)}; font-size: 14px; fill: ${$.stringify(alloColors.css.darkergrey)};`)}>${$.escape(label)}</text>`;
+    $$payload.out += `<text x="0"${$.attr("y", yScale(label) + yScale.bandwidth() / 2)} dy="0.35em" text-anchor="middle"${$.attr("opacity", YX.get(label) ? "0.5" : "1")}${$.attr_style(`font-family: ${$.stringify(alloFonts.family)}; font-size: 14px; fill: ${$.stringify(alloColors.css.darkergrey)};`)}>${$.escape(label)}</text>`;
   }
   $$payload.out += `<!--]--></g></g></svg>`;
   $.pop();
@@ -464,9 +461,9 @@ function Legend($$payload, $$props) {
   $$payload.out += `<!--]--><g transform="rotate(-90) translate(-60,5)"><!--[-->`;
   for (let $$index_1 = 0, $$length = each_array_1.length; $$index_1 < $$length; $$index_1++) {
     let tick = each_array_1[$$index_1];
-    $$payload.out += `<g class="tick"${$.attr("transform", `translate(${$.stringify(x2(tick))}, 0)`)}><text dx="30" dy="-30" transform="rotate(90)"${$.attr_style(`font-family: ${$.stringify(alloFonts)}; font-size: 14px; fill: ${$.stringify(alloColors.css.verydarkgrey)}; text-anchor: start;`)}>${$.escape(tick)}</text></g>`;
+    $$payload.out += `<g class="tick"${$.attr("transform", `translate(${$.stringify(x2(tick))}, 0)`)}><text dx="30" dy="-30" transform="rotate(90)"${$.attr_style(`font-family: ${$.stringify(alloFonts.family)}; font-size: 14px; fill: ${$.stringify(alloColors.css.verydarkgrey)}; text-anchor: start;`)}>${$.escape(tick)}</text></g>`;
   }
-  $$payload.out += `<!--]--><text class="title"${$.attr("x", marginLeft - 25)}${$.attr("y", marginTop + marginBottom)} dx="30" dy="-5" transform="rotate(90)"${$.attr_style(`font-family: ${$.stringify(alloFonts)}; font-size: 14px; fill: ${$.stringify(alloColors.css.verydarkgrey)}; text-anchor: start;`)}>Counts per cell</text></g></svg>`;
+  $$payload.out += `<!--]--><text class="title"${$.attr("x", marginLeft - 25)}${$.attr("y", marginTop + marginBottom)} dx="30" dy="-5" transform="rotate(90)"${$.attr_style(`font-family: ${$.stringify(alloFonts.family)}; font-size: 14px; fill: ${$.stringify(alloColors.css.verydarkgrey)}; text-anchor: start;`)}>Counts per cell</text></g></svg>`;
   $.pop();
 }
 function Dashboard($$payload, $$props) {
@@ -487,19 +484,14 @@ function Dashboard($$payload, $$props) {
     DashboardWidth = 1200,
     DiamondHeight = 600,
     DiamondWidth = 600,
+    WordshiftWidth = 640,
     marginInner = 160,
     marginDiamond = 40,
-    max_count_log = void 0,
-    class: className = "",
-    style: style2 = "",
-    showDiamond = true,
-    showWordshift = true,
-    showDivergingBar = true,
-    showLegend = true
+    max_count_log = void 0
   } = $$props;
   let max_shift = barData.length > 0 ? Math.max(...barData.map((d) => Math.abs(d.metric))) : 1;
   let wordshiftXDomain = xDomain || [-max_shift * 1.5, max_shift * 1.5];
-  $$payload.out += `<div id="allotaxonometer-dashboard" style="position: relative; margin: 0; padding: 0;"><div style="display:flex; flex-wrap: wrap; align-items:center; justify-content: center; row-gap: 50px;"><div id="diamond-group" style="margin-top:20px; margin-right: -50px;"><div style="display:flex; gap: 10em; justify-content: center; margin-bottom: -70px; margin-right: 70px; position: relative;"><div style="position: relative;"><div${$.attr_style(`font-family: ${$.stringify(alloFonts)}; font-size: 16px; color: ${$.stringify(alloColors.css.superdarkgrey)};`)}>${$.escape(title[0])}</div> <div${$.attr_style(`position: absolute; top: 100%; left: -8em; margin-top: 3em; font-family: ${$.stringify(alloFonts)}; font-size: 14px; color: ${$.stringify(alloColors.css.darkgrey)}; width: 150px; line-height: 1;`)}><div style="margin-bottom: 0.5em;">${$.escape(instrumentText)}</div> <div>α = ${$.escape(alpha)}</div></div></div> <div${$.attr_style(`font-family: ${$.stringify(alloFonts)}; font-size: 16px; color: ${$.stringify(alloColors.css.superdarkgrey)};`)}>${$.escape(title[1])}</div></div> <div id="diamondplot">`;
+  $$payload.out += `<div id="allotaxonometer-dashboard" style="position: relative; margin: 0; padding: 0;"><div style="display:flex; flex-wrap: wrap; align-items:center; justify-content: center; row-gap: 50px;"><div id="diamond-group" style="margin-top:20px; margin-right: -50px;"><div style="display:flex; gap: 10em; justify-content: center; margin-bottom: -70px; margin-right: 70px; position: relative;"><div style="position: relative;"><div${$.attr_style(`font-family: ${$.stringify(alloFonts.family)}; font-size: 16px; color: ${$.stringify(alloColors.css.superdarkgrey)};`)}>${$.escape(title[0])}</div> <div${$.attr_style(`position: absolute; top: 100%; left: -8em; margin-top: 3em; font-family: ${$.stringify(alloFonts.family)}; font-size: 14px; color: ${$.stringify(alloColors.css.darkgrey)}; width: 150px; line-height: 1;`)}><div style="margin-bottom: 0.5em;">${$.escape(instrumentText)}</div> <div>α = ${$.escape(alpha)}</div></div></div> <div${$.attr_style(`font-family: ${$.stringify(alloFonts.family)}; font-size: 16px; color: ${$.stringify(alloColors.css.superdarkgrey)};`)}>${$.escape(title[1])}</div></div> <div id="diamondplot">`;
   Diamond($$payload, {
     dat,
     alpha,
@@ -523,7 +515,7 @@ function Dashboard($$payload, $$props) {
   Wordshift($$payload, {
     barData,
     xDomain: wordshiftXDomain,
-    width: 640,
+    width: WordshiftWidth,
     marginLeft: 110
   });
   $$payload.out += `<!----></div></div></div></div>`;
@@ -628,10 +620,10 @@ function balanceDat(elem1, elem2) {
   return [
     { 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) }
+    { y_coord: "all types", frequency: +(types_2.length / union_types.size).toFixed(3) },
+    { y_coord: "all types", frequency: -(types_1.length / union_types.size).toFixed(3) },
+    { y_coord: "exclusive types", frequency: +(setdiff(types_2, types_1).size / types_2.length).toFixed(3) },
+    { y_coord: "exclusive types", frequency: -(setdiff(types_1, types_2).size / types_1.length).toFixed(3) }
   ];
 }
 function wordShift_dat(me, dat) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allotaxonometer-ui",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Headless UI components for allotaxonometer visualizations built with Svelte 5",
   "type": "module",
   "main": "./dist/index.js",
@@ -37,7 +37,8 @@
   "bugs": {
     "url": "https://github.com/Vermont-Complex-Systems/allotaxonometer-ui/issues"
   },
-  "dependencies": {
+  "peerDependencies": {
+    "@ungap/structured-clone": "1.3.0",
     "d3": "^7.0.0",
     "svelte": "^5.0.0"
   },