allotaxonometer-ui 0.1.4 → 0.1.6

package/dist/index.js

@@ -4,54 +4,68 @@ import * as d3 from 'd3';
 import { map, extent, InternSet, range, rollup, scaleLinear, scaleBand, rgb, interpolateInferno, scaleOrdinal } from 'd3';
 import { descending, sum, group, extent as extent$1 } from 'd3-array';
 
-const colors = {
-  darkgrey: "rgb(140, 140, 140)",
-  darkergrey: "rgb(89, 89, 89)"};
-
-const fonts = {
-  family: '"EB Garamond", "Garamond", "Century Schoolbook L", "URW Bookman L", "Bookman Old Style", "Times", serif',
-  sizes: { 
-    sm: "12px", 
-    lg: "16px"}
-};
+// Helper: convert [0–1, 0–1, 0–1] → "rgb(R, G, B)"
+function rgbArrayToCss(rgbArray) {
+    const [r, g, b] = rgbArray.map(v => Math.round(v * 255));
+    return `rgb(${r}, ${g}, ${b})`;
+  }
 
-// Style builder function
 function style(props) {
   return Object.entries(props)
     .map(([key, value]) => `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${value}`)
     .join('; ');
 }
 
-// Axis styles
-const axisStyles = {
-  label: () => style({
-    fontFamily: fonts.family,
-    fontSize: fonts.sizes.lg,
-    fill: colors.darkergrey,
-    textAnchor: "middle"
-  }),
-  
-  tickLabel: () => style({
-    fontFamily: fonts.family,
-    fontSize: fonts.sizes.sm,
-    fill: colors.darkergrey,
-  }),
-  
-  helperText: () => style({
-    fontFamily: fonts.family,
-    fontSize: fonts.sizes.sm,
-    fill: colors.darkgrey,
-    textAnchor: "middle",
-    opacity: "0.8"
-  }),
-  
-  tickLine: () => style({
-    stroke: colors.darkgrey,
-    strokeWidth: "0.5"
-  })
+  // // imported from matlab version. Normalized RGB color definitions
+  const rawColors = {
+    blue: [43, 103, 198].map(v => v / 255),
+    red: [198, 43, 103].map(v => v / 255),
+
+    paleblue: [195, 230, 243].map(v => v / 255),
+    palered: [255, 204, 204].map(v => v / 255),
+
+    lightergrey: [1, 1, 1].map(v => v * 0.96),
+    lightishgrey: [1, 1, 1].map(v => v * 0.93),
+    lightgrey: [1, 1, 1].map(v => v * 0.90),
+
+    lightgreyer: [1, 1, 1].map(v => v * 0.85),
+    lightgreyish: [1, 1, 1].map(v => v * 0.80),
+
+    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),
+    reallyverdarkgrey: [1, 1, 1].map(v => v * 0.05),
+
+    orange: [255, 116, 0].map(v => v / 255)
+  };
+
+  // Create CSS strings for each
+  const cssColors = {};
+  for (const [key, rgb] of Object.entries(rawColors)) {
+    cssColors[key] = rgbArrayToCss(rgb);
+  }
+
+  // Export both raw RGB arrays and CSS strings
+  const alloColors = {
+    css: cssColors     // e.g., colors.css.blue → "rgb(43, 103, 198)"
+  };
+
+// System font stack in order of preference
+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"
+  }
+
 };
 
-var root_1$7 = $.from_svg(`<g><line x1="0" x2="0" y1="0" y2="6"></line></g><g><text dx="5" dy="13" text-anchor="start"> </text></g>`, 1);
+var root_1$7 = $.from_svg(`<g><line x1="0" x2="0" y1="0" y2="6" stroke-width="0.5"></line></g><g><text dx="5" dy="13" text-anchor="start"> </text></g>`, 1);
 var root$8 = $.from_svg(`<g class="axis x"><!><g class="xlab"><text dy="45">Rank r</text><text dy="63">for</text><text dy="80"> </text><text dy="60">more →</text><text dy="75">frequent</text><text dy="60">← less</text><text dy="75">frequent</text></g></g>`);
 
 function AxisX($$anchor, $$props) {
@@ -59,6 +73,21 @@ function AxisX($$anchor, $$props) {
 
 	let logFormat10 = $.derived(() => $$props.scale.tickFormat());
 	let xTicks = $.derived(() => $$props.scale.ticks().filter((t) => t >= 1 && Number.isInteger(Math.log10(t))));
+
+	let axisStyles = () => style({
+		fontFamily: alloFonts.family,
+		fontSize: alloFonts.sizes.lg,
+		fill: alloColors.css.darkergrey,
+		textAnchor: "middle"
+	});
+
+	let helperText = () => style({
+		fontFamily: alloFonts.family,
+		fontSize: alloFonts.sizes.sm,
+		fill: alloColors.css.darkergrey,
+		textAnchor: "middle"
+	});
+
 	var g = root$8();
 	var node = $.child(g);
 
@@ -77,18 +106,18 @@ function AxisX($$anchor, $$props) {
 		$.reset(g_2);
 
 		$.template_effect(
-			($0, $1, $2, $3, $4) => {
+			($0, $1, $2) => {
 				$.set_attribute(g_1, 'transform', `translate(${$0 ?? ''}, 0)`);
-				$.set_style(line, $1);
-				$.set_attribute(g_2, 'transform', `translate(${$2 ?? ''}, 0) scale(-1,1) rotate(45)`);
-				$.set_style(text, $3);
-				$.set_text(text_1, $4);
+				$.set_attribute(line, 'stroke', alloColors.css.darkergreyy);
+				$.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);
+				$.set_attribute(text, 'fill', alloColors.css.darkergrey);
+				$.set_text(text_1, $2);
 			},
 			[
 				() => $$props.scale($.get(tick)),
-				() => axisStyles.tickLine(),
 				() => $$props.scale($.get(tick)),
-				() => axisStyles.tickLabel(),
 				() => $.get(logFormat10)($.get(tick))
 			]
 		);
@@ -141,13 +170,13 @@ function AxisX($$anchor, $$props) {
 			$.set_style(text_9, $6);
 		},
 		[
-			() => axisStyles.label(),
-			() => axisStyles.label(),
-			() => axisStyles.label(),
-			() => axisStyles.helperText(),
-			() => axisStyles.helperText(),
-			() => axisStyles.helperText(),
-			() => axisStyles.helperText()
+			axisStyles,
+			axisStyles,
+			axisStyles,
+			helperText,
+			helperText,
+			helperText,
+			helperText
 		]
 	);
 
@@ -155,7 +184,7 @@ function AxisX($$anchor, $$props) {
 	$.pop();
 }
 
-var root_1$6 = $.from_svg(`<g><line x1="0" x2="-6" y1="0" y2="0"></line></g><g><text dx="-5" dy="13" text-anchor="end"> </text></g>`, 1);
+var root_1$6 = $.from_svg(`<g><line x1="0" x2="-6" y1="0" y2="0" stroke-width="0.5"></line></g><g><text dx="-5" dy="13" text-anchor="end"> </text></g>`, 1);
 var root$7 = $.from_svg(`<g class="axis y"><!><g class="ylab" transform="rotate(90)"><text dy="45">Rank r</text><text dy="63">for</text><text dy="80"> </text><text dy="60">less →</text><text dy="75">frequent</text><text dy="60">← more</text><text dy="75">frequent</text></g></g>`);
 
 function AxisY($$anchor, $$props) {
@@ -163,6 +192,21 @@ function AxisY($$anchor, $$props) {
 
 	let logFormat10 = $.derived(() => $$props.scale.tickFormat());
 	let yTicks = $.derived(() => $$props.scale.ticks().filter((t) => t >= 1 && Number.isInteger(Math.log10(t))));
+
+	let axisStyles = () => style({
+		fontFamily: alloFonts.family,
+		fontSize: alloFonts.sizes.lg,
+		fill: alloColors.css.darkergrey,
+		textAnchor: "middle"
+	});
+
+	let helperText = () => style({
+		fontFamily: alloFonts.family,
+		fontSize: alloFonts.sizes.sm,
+		fill: alloColors.css.darkergrey,
+		textAnchor: "middle"
+	});
+
 	var g = root$7();
 	var node = $.child(g);
 
@@ -181,18 +225,18 @@ function AxisY($$anchor, $$props) {
 		$.reset(g_2);
 
 		$.template_effect(
-			($0, $1, $2, $3, $4) => {
+			($0, $1, $2) => {
 				$.set_attribute(g_1, 'transform', `translate(0, ${$0 ?? ''})`);
-				$.set_style(line, $1);
-				$.set_attribute(g_2, 'transform', `translate(0, ${$2 ?? ''}) rotate(45)`);
-				$.set_style(text, $3);
-				$.set_text(text_1, $4);
+				$.set_attribute(line, 'stroke', alloColors.css.darkergreyy);
+				$.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);
+				$.set_attribute(text, 'fill', alloColors.css.darkergrey);
+				$.set_text(text_1, $2);
 			},
 			[
 				() => $$props.scale($.get(tick)),
-				() => axisStyles.tickLine(),
 				() => $$props.scale($.get(tick)),
-				() => axisStyles.tickLabel(),
 				() => $.get(logFormat10)($.get(tick))
 			]
 		);
@@ -238,13 +282,13 @@ function AxisY($$anchor, $$props) {
 			$.set_style(text_9, $6);
 		},
 		[
-			() => axisStyles.label(),
-			() => axisStyles.label(),
-			() => axisStyles.label(),
-			() => axisStyles.helperText(),
-			() => axisStyles.helperText(),
-			() => axisStyles.helperText(),
-			() => axisStyles.helperText()
+			axisStyles,
+			axisStyles,
+			axisStyles,
+			helperText,
+			helperText,
+			helperText,
+			helperText
 		]
 	);
 
@@ -252,7 +296,7 @@ function AxisY($$anchor, $$props) {
 	$.pop();
 }
 
-var root_1$5 = $.from_svg(`<g><line y2="0" stroke="#d3d3d3" stroke-dasharray="3,3"></line></g><g><line x2="0" stroke="#d3d3d3" stroke-dasharray="3,3"></line></g>`, 1);
+var root_1$5 = $.from_svg(`<g><line y2="0" stroke="#d3d3d3" stroke-dasharray="1,3"></line></g><g><line x2="0" stroke="#d3d3d3" stroke-dasharray="1,3"></line></g>`, 1);
 var root$6 = $.from_svg(`<g class="grid"></g>`);
 
 function Grid($$anchor, $$props) {
@@ -296,7 +340,7 @@ function Grid($$anchor, $$props) {
 	$.pop();
 }
 
-var root_1$4 = $.from_svg(`<path fill="none" stroke="grey" stroke-width="0.9" stroke-opacity="0.9"></path>`);
+var root_1$4 = $.from_svg(`<path fill="none" stroke="grey" stroke-width="0.55" stroke-opacity="0.9"></path>`);
 var root$5 = $.from_svg(`<g class="contours"></g>`);
 
 function Contours($$anchor, $$props) {
@@ -403,51 +447,6 @@ function Contours($$anchor, $$props) {
 	$.pop();
 }
 
-// Helper: convert [0–1, 0–1, 0–1] → "rgb(R, G, B)"
-function rgbArrayToCss(rgbArray) {
-    const [r, g, b] = rgbArray.map(v => Math.round(v * 255));
-    return `rgb(${r}, ${g}, ${b})`;
-  }
-
-  // // imported from matlab version. Normalized RGB color definitions
-  const rawColors = {
-    blue: [43, 103, 198].map(v => v / 255),
-    red: [198, 43, 103].map(v => v / 255),
-
-    paleblue: [195, 230, 243].map(v => v / 255),
-    palered: [255, 204, 204].map(v => v / 255),
-
-    lightergrey: [1, 1, 1].map(v => v * 0.96),
-    lightishgrey: [1, 1, 1].map(v => v * 0.93),
-    lightgrey: [1, 1, 1].map(v => v * 0.90),
-
-    lightgreyer: [1, 1, 1].map(v => v * 0.85),
-    lightgreyish: [1, 1, 1].map(v => v * 0.80),
-
-    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),
-    reallyverdarkgrey: [1, 1, 1].map(v => v * 0.05),
-
-    orange: [255, 116, 0].map(v => v / 255)
-  };
-
-  // Create CSS strings for each
-  const cssColors = {};
-  for (const [key, rgb] of Object.entries(rawColors)) {
-    cssColors[key] = rgbArrayToCss(rgb);
-  }
-
-  // Export both raw RGB arrays and CSS strings
-  const alloColors = {
-    css: cssColors     // e.g., colors.css.blue → "rgb(43, 103, 198)"
-  };
-
-  // System font stack in order of preference
-  const alloFonts = `"EB Garamond", "Garamond", "Century Schoolbook L", "URW Bookman L", "Bookman Old Style", "Times", serif`;
-
 function updateTooltipPosition(event, tooltipVisible, tooltipX, tooltipY) {
 	if ($.get(tooltipVisible)) {
 		$.set(tooltipX, event.clientX + 15);
@@ -690,7 +689,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 ?? ''}; font-size: 12px; fill: ${alloColors.css.darkergrey ?? ''};`);
 				$.set_text(text_1, $5);
 			},
 			[
@@ -888,7 +887,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 ?? ''}; font-size: 14px; fill: ${alloColors.css.verydarkgrey ?? ''};`);
 				$.set_text(text_1, $5);
 			},
 			[
@@ -957,7 +956,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 ?? ''}; font-size: 14px; fill: ${alloColors.css.darkergrey ?? ''}; opacity: 0.5;`);
 					$.set_text(text_7, $.get(labelData).numbers_y);
 				});
 
@@ -976,7 +975,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 ?? ''}; font-size: 14px; fill: ${alloColors.css.verydarkgrey ?? ''};`);
 				$.set_text(text_5, $.get(labelData).name_y);
 			},
 			[
@@ -998,7 +997,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 ?? ''}; font-size: 16px; fill: ${alloColors.css.verydarkgrey ?? ''};`);
 			$.set_text(text_3, xLabel());
 			$.set_attribute(g_2, 'transform', `translate(${$1 ?? ''}, 0)`);
 		},
@@ -1081,7 +1080,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 ?? ''}; font-size: 10px; fill: ${alloColors.css.darkergrey ?? ''}; opacity: 0.5;`);
 				$.set_text(text_1, $6);
 			},
 			[
@@ -1110,7 +1109,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 ?? ''}; font-size: 14px; fill: ${alloColors.css.darkergrey ?? ''};`);
 				$.set_text(text_3, $.get(label));
 			},
 			[
@@ -1198,7 +1197,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 ?? ''}; font-size: 14px; fill: ${alloColors.css.verydarkgrey ?? ''}; text-anchor: start;`);
 				$.set_text(text_1, $.get(tick));
 			},
 			[() => $.get(x2)($.get(tick))]
@@ -1218,14 +1217,14 @@ 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 ?? ''}; font-size: 14px; fill: ${alloColors.css.verydarkgrey ?? ''}; text-anchor: start;`);
 	});
 
 	$.append($$anchor, svg);
 	$.pop();
 }
 
-var root = $.from_html(`<div class="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 style="margin-top:20px"><div style="display:flex; gap: 10em; justify-content: center; margin-bottom: -70px; margin-right: 70px; position: relative;"><div style="position: relative;"><div> </div> <div> </div> <div> </div></div> <div> </div></div> <div id="diamondplot"><!></div> <div style="display: flex; gap: 13em; justify-content: center;"><div id="legend" style="margin-left: -50px;"><!></div> <div id="balance"><!></div></div></div> <div style="margin-top:60px; overflow: visible;"><div id="wordshift" style="overflow: visible;"><!></div></div></div></div>`);
+var root = $.from_html(`<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> </div> <div><div style="margin-bottom: 0.5em;"> </div> <div> </div></div></div> <div> </div></div> <div id="diamondplot"><!></div> <div style="display: flex; gap: 13em; justify-content: center;"><div id="legend" style="margin-left: -50px;"><!></div> <div id="balance"><!></div></div></div> <div style="margin-top:60px; overflow: visible;"><div id="wordshift" style="overflow: visible;"><!></div></div></div></div>`);
 
 function Dashboard($$anchor, $$props) {
 	$.push($$props, true);
@@ -1254,35 +1253,6 @@ function Dashboard($$anchor, $$props) {
 		$.prop($$props, 'showWordshift', 3, true);
 		$.prop($$props, 'showDivergingBar', 3, true);
 		$.prop($$props, 'showLegend', 3, true);
-		$.rest_props($$props, [
-			'$$slots',
-			'$$events',
-			'$$legacy',
-			'dat',
-			'alpha',
-			'divnorm',
-			'barData',
-			'balanceData',
-			'xDomain',
-			'instrumentText',
-			'title',
-			'maxlog10',
-			'height',
-			'width',
-			'DashboardHeight',
-			'DashboardWidth',
-			'DiamondHeight',
-			'DiamondWidth',
-			'marginInner',
-			'marginDiamond',
-			'max_count_log',
-			'class',
-			'style',
-			'showDiamond',
-			'showWordshift',
-			'showDivergingBar',
-			'showLegend'
-		]);
 
 	let max_shift = $.derived(() => barData().length > 0 ? Math.max(...barData().map((d) => Math.abs(d.metric))) : 1);
 
@@ -1302,24 +1272,26 @@ function Dashboard($$anchor, $$props) {
 	$.reset(div_5);
 
 	var div_6 = $.sibling(div_5, 2);
-	var text_1 = $.child(div_6, true);
+	var div_7 = $.child(div_6);
+	var text_1 = $.child(div_7, true);
 
-	$.reset(div_6);
+	$.reset(div_7);
 
-	var div_7 = $.sibling(div_6, 2);
-	var text_2 = $.child(div_7);
+	var div_8 = $.sibling(div_7, 2);
+	var text_2 = $.child(div_8);
 
-	$.reset(div_7);
+	$.reset(div_8);
+	$.reset(div_6);
 	$.reset(div_4);
 
-	var div_8 = $.sibling(div_4, 2);
-	var text_3 = $.child(div_8, true);
+	var div_9 = $.sibling(div_4, 2);
+	var text_3 = $.child(div_9, true);
 
-	$.reset(div_8);
+	$.reset(div_9);
 	$.reset(div_3);
 
-	var div_9 = $.sibling(div_3, 2);
-	var node = $.child(div_9);
+	var div_10 = $.sibling(div_3, 2);
+	var node = $.child(div_10);
 
 	Diamond(node, {
 		get dat() {
@@ -1348,11 +1320,11 @@ function Dashboard($$anchor, $$props) {
 		}
 	});
 
-	$.reset(div_9);
+	$.reset(div_10);
 
-	var div_10 = $.sibling(div_9, 2);
-	var div_11 = $.child(div_10);
-	var node_1 = $.child(div_11);
+	var div_11 = $.sibling(div_10, 2);
+	var div_12 = $.child(div_11);
+	var node_1 = $.child(div_12);
 	const expression = $.derived(() => max_count_log() || 5);
 
 	Legend(node_1, {
@@ -1367,10 +1339,10 @@ function Dashboard($$anchor, $$props) {
 		}
 	});
 
-	$.reset(div_11);
+	$.reset(div_12);
 
-	var div_12 = $.sibling(div_11, 2);
-	var node_2 = $.child(div_12);
+	var div_13 = $.sibling(div_12, 2);
+	var node_2 = $.child(div_13);
 
 	DivergingBarChart(node_2, {
 		get data() {
@@ -1384,13 +1356,13 @@ function Dashboard($$anchor, $$props) {
 		}
 	});
 
-	$.reset(div_12);
-	$.reset(div_10);
+	$.reset(div_13);
+	$.reset(div_11);
 	$.reset(div_2);
 
-	var div_13 = $.sibling(div_2, 2);
-	var div_14 = $.child(div_13);
-	var node_3 = $.child(div_14);
+	var div_14 = $.sibling(div_2, 2);
+	var div_15 = $.child(div_14);
+	var node_3 = $.child(div_15);
 
 	Wordshift(node_3, {
 		get barData() {
@@ -1406,22 +1378,21 @@ function Dashboard($$anchor, $$props) {
 			return $.get(wordshiftXDomain);
 		},
 		width: 640,
-		marginLeft: 140
+		marginLeft: 110
 	});
 
+	$.reset(div_15);
 	$.reset(div_14);
-	$.reset(div_13);
 	$.reset(div_1);
 	$.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 ?? ''}; font-size: 16px; color: ${alloColors.css.superdarkgrey ?? ''};`);
 		$.set_text(text, title()[0]);
-		$.set_style(div_6, `position: absolute; top: 100%; left: -12em; margin-top: 2.5em; font-family: ${alloFonts}; font-size: 14px; color: ${alloColors.css.darkgrey ?? ''};`);
+		$.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_text(text_1, instrumentText());
-		$.set_style(div_7, `position: absolute; top: 100%; left: -12em; margin-top: 3.5em; font-family: ${alloFonts}; font-size: 14px; color: ${alloColors.css.darkgrey ?? ''};`);
 		$.set_text(text_2, `α = ${alpha() ?? ''}`);
-		$.set_style(div_8, `font-family: ${alloFonts}; font-size: 16px; color: ${alloColors.css.superdarkgrey ?? ''};`);
+		$.set_style(div_9, `font-family: ${alloFonts ?? ''}; font-size: 16px; color: ${alloColors.css.superdarkgrey ?? ''};`);
 		$.set_text(text_3, title()[1]);
 	});
 

package/dist/ssr/index.js

@@ -3,56 +3,73 @@ import * as d3 from "d3";
 import { map, extent, InternSet, range, rollup, scaleLinear, scaleBand, rgb, interpolateInferno, scaleOrdinal } from "d3";
 import { descending, sum, group, extent as extent$1 } from "d3-array";
 import structuredClone from "@ungap/structured-clone";
-const colors = {
-  darkgrey: "rgb(140, 140, 140)",
-  darkergrey: "rgb(89, 89, 89)"
+function rgbArrayToCss(rgbArray) {
+  const [r, g, b] = rgbArray.map((v) => Math.round(v * 255));
+  return `rgb(${r}, ${g}, ${b})`;
+}
+function style(props) {
+  return Object.entries(props).map(([key, value]) => `${key.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${value}`).join("; ");
+}
+const rawColors = {
+  blue: [43, 103, 198].map((v) => v / 255),
+  red: [198, 43, 103].map((v) => v / 255),
+  paleblue: [195, 230, 243].map((v) => v / 255),
+  palered: [255, 204, 204].map((v) => v / 255),
+  lightergrey: [1, 1, 1].map((v) => v * 0.96),
+  lightishgrey: [1, 1, 1].map((v) => v * 0.93),
+  lightgrey: [1, 1, 1].map((v) => v * 0.9),
+  lightgreyer: [1, 1, 1].map((v) => v * 0.85),
+  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),
+  reallyverdarkgrey: [1, 1, 1].map((v) => v * 0.05),
+  orange: [255, 116, 0].map((v) => v / 255)
 };
-const fonts = {
-  family: '"EB Garamond", "Garamond", "Century Schoolbook L", "URW Bookman L", "Bookman Old Style", "Times", serif',
+const cssColors = {};
+for (const [key, rgb2] of Object.entries(rawColors)) {
+  cssColors[key] = rgbArrayToCss(rgb2);
+}
+const alloColors = {
+  css: cssColors
+  // e.g., colors.css.blue → "rgb(43, 103, 198)"
+};
+const alloFonts = {
+  family: `"EB Garamond", "Garamond", "Century Schoolbook L", "URW Bookman L", "Bookman Old Style", "Times", serif`,
   sizes: {
+    xs: "10px",
     sm: "12px",
-    lg: "16px"
+    md: "14px",
+    lg: "16px",
+    xl: "18px"
   }
 };
-function style(props) {
-  return Object.entries(props).map(([key, value]) => `${key.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${value}`).join("; ");
-}
-const axisStyles = {
-  label: () => style({
-    fontFamily: fonts.family,
-    fontSize: fonts.sizes.lg,
-    fill: colors.darkergrey,
-    textAnchor: "middle"
-  }),
-  tickLabel: () => style({
-    fontFamily: fonts.family,
-    fontSize: fonts.sizes.sm,
-    fill: colors.darkergrey
-  }),
-  helperText: () => style({
-    fontFamily: fonts.family,
-    fontSize: fonts.sizes.sm,
-    fill: colors.darkgrey,
-    textAnchor: "middle",
-    opacity: "0.8"
-  }),
-  tickLine: () => style({
-    stroke: colors.darkgrey,
-    strokeWidth: "0.5"
-  })
-};
 function AxisX($$payload, $$props) {
   $.push();
   let { innerHeight, scale, title } = $$props;
   let logFormat10 = scale.tickFormat();
   let xTicks = scale.ticks().filter((t) => t >= 1 && Number.isInteger(Math.log10(t)));
+  let axisStyles = () => style({
+    fontFamily: alloFonts.family,
+    fontSize: alloFonts.sizes.lg,
+    fill: alloColors.css.darkergrey,
+    textAnchor: "middle"
+  });
+  let helperText = () => style({
+    fontFamily: alloFonts.family,
+    fontSize: alloFonts.sizes.sm,
+    fill: alloColors.css.darkergrey,
+    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_style(axisStyles.tickLine())}></line></g><g${$.attr("transform", `translate(${$.stringify(scale(tick))}, 0) scale(-1,1) rotate(45)`)}><text dx="5" dy="13" text-anchor="start"${$.attr_style(axisStyles.tickLabel())}>${$.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.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 class="xlab"><text${$.attr("x", innerHeight / 2)} dy="45"${$.attr("transform", `scale(-1,1) translate(-${$.stringify(innerHeight)}, 0)`)}${$.attr_style(axisStyles.label())}>Rank r</text><text${$.attr("x", innerHeight / 2)} dy="63"${$.attr("transform", `scale(-1,1) translate(-${$.stringify(innerHeight)}, 0)`)}${$.attr_style(axisStyles.label())}>for</text><text${$.attr("x", innerHeight / 2)} dy="80"${$.attr("transform", `scale(-1,1) translate(-${$.stringify(innerHeight)}, 0)`)}${$.attr_style(axisStyles.label())}>${$.escape(title[1])}</text><text${$.attr("x", innerHeight - 40)} dy="60"${$.attr("transform", `scale(-1,1) translate(-${$.stringify(innerHeight)}, 0)`)}${$.attr_style(axisStyles.helperText())}>more →</text><text${$.attr("x", innerHeight - 40)} dy="75"${$.attr("transform", `scale(-1,1) translate(-${$.stringify(innerHeight)}, 0)`)}${$.attr_style(axisStyles.helperText())}>frequent</text><text${$.attr("x", 40)} dy="60"${$.attr("transform", `scale(-1,1) translate(-${$.stringify(innerHeight)}, 0)`)}${$.attr_style(axisStyles.helperText())}>← less</text><text${$.attr("x", 40)} dy="75"${$.attr("transform", `scale(-1,1) translate(-${$.stringify(innerHeight)}, 0)`)}${$.attr_style(axisStyles.helperText())}>frequent</text></g></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();
 }
 function AxisY($$payload, $$props) {
@@ -60,13 +77,25 @@ function AxisY($$payload, $$props) {
   let { innerHeight, scale, title } = $$props;
   let logFormat10 = scale.tickFormat();
   let yTicks = scale.ticks().filter((t) => t >= 1 && Number.isInteger(Math.log10(t)));
+  let axisStyles = () => style({
+    fontFamily: alloFonts.family,
+    fontSize: alloFonts.sizes.lg,
+    fill: alloColors.css.darkergrey,
+    textAnchor: "middle"
+  });
+  let helperText = () => style({
+    fontFamily: alloFonts.family,
+    fontSize: alloFonts.sizes.sm,
+    fill: alloColors.css.darkergrey,
+    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_style(axisStyles.tickLine())}></line></g><g${$.attr("transform", `translate(0, ${$.stringify(scale(tick))}) rotate(45)`)}><text dx="-5" dy="13" text-anchor="end"${$.attr_style(axisStyles.tickLabel())}>${$.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.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 class="ylab" transform="rotate(90)"><text${$.attr("x", innerHeight / 2)} dy="45"${$.attr_style(axisStyles.label())}>Rank r</text><text${$.attr("x", innerHeight / 2)} dy="63"${$.attr_style(axisStyles.label())}>for</text><text${$.attr("x", innerHeight / 2)} dy="80"${$.attr_style(axisStyles.label())}>${$.escape(title[0])}</text><text${$.attr("x", innerHeight - 40)} dy="60"${$.attr_style(axisStyles.helperText())}>less →</text><text${$.attr("x", innerHeight - 40)} dy="75"${$.attr_style(axisStyles.helperText())}>frequent</text><text${$.attr("x", 40)} dy="60"${$.attr_style(axisStyles.helperText())}>← more</text><text${$.attr("x", 40)} dy="75"${$.attr_style(axisStyles.helperText())}>frequent</text></g></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();
 }
 function Grid($$payload, $$props) {
@@ -77,7 +106,7 @@ function Grid($$payload, $$props) {
   $$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${$.attr("transform", `translate(${$.stringify(wxy(yline))}, 0)`)}><line${$.attr("y1", height)} y2="0" stroke="#d3d3d3" stroke-dasharray="1,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="1,3"${$.attr("opacity", index === 0 ? 0 : 1)}></line></g>`;
   }
   $$payload.out += `<!--]--></g>`;
   $.pop();
@@ -164,42 +193,11 @@ function Contours($$payload, $$props) {
   $$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 += `<path fill="none" stroke="grey"${$.attr("d", pathData(contour))} stroke-width="0.55" stroke-opacity="0.9"></path>`;
   }
   $$payload.out += `<!--]--></g>`;
   $.pop();
 }
-function rgbArrayToCss(rgbArray) {
-  const [r, g, b] = rgbArray.map((v) => Math.round(v * 255));
-  return `rgb(${r}, ${g}, ${b})`;
-}
-const rawColors = {
-  blue: [43, 103, 198].map((v) => v / 255),
-  red: [198, 43, 103].map((v) => v / 255),
-  paleblue: [195, 230, 243].map((v) => v / 255),
-  palered: [255, 204, 204].map((v) => v / 255),
-  lightergrey: [1, 1, 1].map((v) => v * 0.96),
-  lightishgrey: [1, 1, 1].map((v) => v * 0.93),
-  lightgrey: [1, 1, 1].map((v) => v * 0.9),
-  lightgreyer: [1, 1, 1].map((v) => v * 0.85),
-  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),
-  reallyverdarkgrey: [1, 1, 1].map((v) => v * 0.05),
-  orange: [255, 116, 0].map((v) => v / 255)
-};
-const cssColors = {};
-for (const [key, rgb2] of Object.entries(rawColors)) {
-  cssColors[key] = rgbArrayToCss(rgb2);
-}
-const alloColors = {
-  css: cssColors
-  // e.g., colors.css.blue → "rgb(43, 103, 198)"
-};
-const alloFonts = `"EB Garamond", "Garamond", "Century Schoolbook L", "URW Bookman L", "Bookman Old Style", "Times", serif`;
 function Diamond($$payload, $$props) {
   $.push();
   let {
@@ -320,7 +318,7 @@ function Wordshift($$payload, $$props) {
     xFormat = "%",
     xLabel = "← System 1 · Divergence contribution · System 2 →",
     yPadding = 0,
-    colors: colors2 = [
+    colors = [
       alloColors.css.lightgrey,
       alloColors.css.paleblue
     ],
@@ -376,7 +374,7 @@ function Wordshift($$payload, $$props) {
   $$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><!--[-->`;
   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", colors2[X[i] > 0 ? colors2.length - 1 : 0])}${$.attr("width", Math.abs(xScale(X[i]) - xScale(0)))}${$.attr("height", yScale.bandwidth() * barHeightFactor)} style="mix-blend-mode: multiply;"></rect>`;
+    $$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>`;
   }
   $$payload.out += `<!--]--><g class="wordshift-y-axis"${$.attr("transform", `translate(${$.stringify(xScale(0))}, 0)`)}><!--[-->`;
   for (let $$index_2 = 0, $$length = each_array_2.length; $$index_2 < $$length; $$index_2++) {
@@ -408,7 +406,7 @@ function DivergingBarChart($$payload, $$props) {
     marginLeft = 40,
     width = 200,
     yPadding = 0.5,
-    colors: colors2 = [
+    colors = [
       alloColors.css.lightgrey,
       alloColors.css.paleblue
     ]
@@ -430,7 +428,7 @@ 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", colors2[X[i] > 0 ? colors2.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)}; font-size: 10px; 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++) {
@@ -498,14 +496,11 @@ function Dashboard($$payload, $$props) {
     showDiamond = true,
     showWordshift = true,
     showDivergingBar = true,
-    showLegend = true,
-    $$slots,
-    $$events,
-    ...restProps
+    showLegend = true
   } = $$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 class="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 style="margin-top:20px"><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: -12em; margin-top: 2.5em; font-family: ${$.stringify(alloFonts)}; font-size: 14px; color: ${$.stringify(alloColors.css.darkgrey)};`)}>${$.escape(instrumentText)}</div> <div${$.attr_style(`position: absolute; top: 100%; left: -12em; margin-top: 3.5em; font-family: ${$.stringify(alloFonts)}; font-size: 14px; color: ${$.stringify(alloColors.css.darkgrey)};`)}>α = ${$.escape(alpha)}</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)}; 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">`;
   Diamond($$payload, {
     dat,
     alpha,
@@ -530,7 +525,7 @@ function Dashboard($$payload, $$props) {
     barData,
     xDomain: wordshiftXDomain,
     width: 640,
-    marginLeft: 140
+    marginLeft: 110
   });
   $$payload.out += `<!----></div></div></div></div>`;
   $.pop();

package/dist/style.css

@@ -18,10 +18,10 @@
   --allo-superdarkgrey: rgb(26, 26, 26);
   --allo-reallyverdarkgrey: rgb(13, 13, 13);
   --allo-orange: rgb(255, 116, 0);
-  
+
   /* Typography */
-  --allo-font-family: "EB Garamond", "Garamond", "Century Schoolbook L", "URW Bookman L", "Bookman Old Style", "Times", serif;
-  
+  --allo-font-family: '"EB Garamond", "Garamond", "Century Schoolbook L", "URW Bookman L", "Bookman Old Style", "Times", serif';
+
   /* Font sizes */
   --allo-font-xs: 10px;
   --allo-font-sm: 12px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allotaxonometer-ui",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Headless UI components for allotaxonometer visualizations built with Svelte 5",
   "type": "module",
   "main": "./dist/index.js",
@@ -39,7 +39,6 @@
   },
   "peerDependencies": {
     "@ungap/structured-clone": "1.3.0",
-    "allotaxonometer": "1.1.11",
     "d3": "^7.0.0",
     "svelte": "^5.0.0"
   },