@getdom/studio 0.2.3 → 0.2.4

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # Changelog
 
+## 0.2.4 - 2026-10-08
+
+Reliable chart hover values and optional sparkline tooltips.
+
+### Added
+
+- Opt-in sparkline tooltips with `tooltip`, showing the inspected label and
+  formatted series values on hover or keyboard navigation. The floating panel
+  stays outside the compact plot and escapes scrolling-table clipping.
+- Website privacy policy and terms pages, linked from checkout and the footer.
+
+### Improved
+
+- Documentation explains how component source, runnable examples and reference
+  pages live together, and how that structure supports human and AI development.
+
+### Fixed
+
+- Line and area chart tooltips update as the pointer moves between data points,
+  without requiring a click. Clicking preserves and selects the hovered record.
+- Shared chart bindings forward Unovis configuration using its expected names,
+  including crosshair callbacks and stacked-series inspection.
+- Chart values dismiss when the crosshair leaves the plot.
+- Website licence checkout no longer depends on email delivery being configured.
+  Existing installations receive a repair migration for missing licence columns.
+
+### Upgrade notes
+
+- Sparkline tooltips remain off by default. Add `tooltip` to `DomSparkline` to
+  enable them; existing value and label formatters also apply to the tooltip.
+- Email-based licence claiming and recovery still require a configured sender.
+
 ## 0.2.3 - 2026-09-27
 
 Searchable Google Fonts previews, shared paginated option lists, and more reliable

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@getdom/studio",
-	"version": "0.2.3",
+	"version": "0.2.4",
 	"description": "A Vue 3 and Web Component interface system for application UI.",
 	"type": "module",
 	"license": "SEE LICENSE IN LICENSE.md",

package/src/pages/charts/_shared/CompactChartTooltip.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+import { applyFloatingPosition, autoUpdateFloating } from '../../lib/headless/floating.js';
+import ChartTooltip from './ChartTooltip.vue';
+
+const props = defineProps({
+	anchor: { type: Object, required: true },
+	label: { type: String, default: '' },
+	items: { type: Array, default: () => [] },
+});
+const panel = ref(null);
+let stopPositioning;
+
+/** Positions the compact tooltip outside the plot and within the viewport. @returns {void} */
+function position() {
+	applyFloatingPosition(props.anchor, panel.value, { placement: 'top', align: 'center', offset: 8, padding: 8 });
+}
+
+/** Opens in the top layer so table overflow cannot clip chart values. @returns {void} */
+function open() {
+	panel.value.showPopover();
+	position();
+	stopPositioning = autoUpdateFloating(props.anchor, panel.value, position);
+}
+
+/** Releases scroll/resize observers when inspection ends or the chart unmounts. @returns {void} */
+function cleanup() {
+	stopPositioning?.();
+}
+
+onMounted(open);
+onBeforeUnmount(cleanup);
+</script>
+
+<template>
+	<div ref="panel" popover="manual" class="pointer-events-none m-0 w-max max-w-[calc(100vw-1rem)] overflow-visible border-0 bg-transparent p-0 text-canvas-fg">
+		<ChartTooltip :label="label" :items="items" />
+	</div>
+</template>

package/src/pages/charts/_shared/XYChart.vue

@@ -5,6 +5,7 @@ import { chartPoints, chartSeries, formatChartValue, percentagePoints } from './
 import ChartContainer from './ChartContainer.vue';
 import ChartLegend from './ChartLegend.vue';
 import ChartTooltip from './ChartTooltip.vue';
+import CompactChartTooltip from './CompactChartTooltip.vue';
 
 const props = defineProps({
 	...chartProps,
@@ -13,12 +14,14 @@ const props = defineProps({
 	percentage: { type: Boolean, default: false },
 	horizontal: { type: Boolean, default: false },
 	compact: { type: Boolean, default: false },
+	tooltip: { type: Boolean, default: true },
 });
 const emit = defineEmits(['retry', 'select']);
 const renderer = shallowRef(null);
 const loadError = ref('');
 const hiddenKeys = ref([]);
 const inspected = ref(null);
+const plot = ref(null);
 let disposed = false;
 const allSeries = computed(() => chartSeries(props.series));
 const visibleSeries = computed(() => allSeries.value.filter((item) => !hiddenKeys.value.includes(item.key)));
@@ -108,16 +111,18 @@ function scrub(event) { inspected.value = points.value[Number(event.target.value
 <template>
 	<ChartContainer :title="title" :description="description" :height="safeHeight" :compact="compact" :loading="loading" :error="error || validationError || loadError" :empty="!hasData" :empty-label="emptyLabel" @retry="retry">
 		<div
+			ref="plot"
 			class="relative rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
 			:style="{ height: `${safeHeight}px` }" tabindex="0" role="group"
 			:aria-label="`${title}. Use arrow keys to inspect values; Enter selects a row.`"
-			@keydown="navigate" @focus="inspect(points[0])" @blur="inspect(null)" @mouseleave="inspect(null)" @click="selectPoint"
+			@keydown="navigate" @focus="inspect(inspected || points[0])" @blur="inspect(null)" @mouseleave="inspect(null)" @click="selectPoint"
 		>
 			<div aria-hidden="true">
 				<component :is="renderer" v-if="renderer" :key="`${kind}-${horizontal}-${stacked}-${percentage}`" :points="renderPoints" :series="visibleSeries" :kind="kind" :height="safeHeight" :curve="curve" :stacked="stacked || percentage" :percentage="percentage" :horizontal="horizontal" :compact="compact" :grid="grid" :x-type="xType" :format-x="formatAxisLabel" :format-y="formatAxisValue" @inspect="inspect" />
 				<div v-else class="h-full w-full" />
 			</div>
-			<ChartTooltip v-if="inspected && !compact" class="absolute right-2 top-2 z-10" :label="formatLabel(inspected.row[xKey])" :items="tooltipItems" />
+			<CompactChartTooltip v-if="inspected && tooltip && compact" :anchor="plot" :label="formatLabel(inspected.row[xKey])" :items="tooltipItems" />
+			<ChartTooltip v-else-if="inspected && tooltip" class="absolute right-2 top-2 z-10" :label="formatLabel(inspected.row[xKey])" :items="tooltipItems" />
 			<span class="sr-only" aria-live="polite">{{ inspected ? `${formatLabel(inspected.row[xKey])}: ${tooltipItems.map(item => `${item.label} ${item.value}`).join(', ')}` : '' }}</span>
 		</div>
 		<template #legend>

package/src/pages/charts/_shared/XYRenderer.vue

@@ -56,35 +56,42 @@ function getX(point) { return point.x; }
 /** @param {unknown} _datum Unovis datum. @param {number} index Series index. @returns {string} Stable colour. */
 function getColor(_datum, index) { return props.series[index]?.color || 'var(--primary)'; }
 
-/** @param {number} _x Pointer coordinate. @param {object} point Nearest datum. @returns {void} */
-function inspectPoint(_x, point) { emit('inspect', point || null); }
+/**
+ * Synchronizes inspection with the crosshair, including plot-boundary dismissal.
+ * Unovis can retain the nearest datum while clearing the pointer coordinate.
+ * @param {number|Date|undefined} x Pointer coordinate; absent when hidden.
+ * @param {object|undefined} point Nearest datum.
+ * @returns {void}
+ */
+function inspectPoint(x, point) { emit('inspect', x == null ? null : point || null); }
 
 /** @param {object} datum Bar or stack datum. @returns {void} Inspects horizontal and touch-selected bars. */
 function inspectBar(datum) { emit('inspect', datum.datum || datum); }
 </script>
 
 <template>
+	<!-- Unovis 1.7 forwards undeclared attributes verbatim; config bindings must use camelCase. -->
 	<VisXYContainer
 		:data="points" :height="height" :duration="0" class="block w-full"
-		:x-domain="horizontal ? valueDomain : undefined" :y-domain="horizontal ? undefined : valueDomain"
-		:y-direction="horizontal ? 'south' : 'north'"
+		:xDomain="horizontal ? valueDomain : undefined" :yDomain="horizontal ? undefined : valueDomain"
+		:yDirection="horizontal ? 'south' : 'north'"
 		:margin="compact ? { top: 4, bottom: 4, left: 4, right: 4 } : { top: 12, right: 12 }"
 	>
 		<template v-if="kind === 'line'">
-			<VisLine v-for="(item, index) in series" :key="item.key" :x="getX" :y="accessors[index]" :color="item.color" :curve-type="curve" :line-width="2" :line-dash-array="item.dashed ? [5, 4] : undefined" :duration="0" />
+			<VisLine v-for="(item, index) in series" :key="item.key" :x="getX" :y="accessors[index]" :color="item.color" :curveType="curve" :lineWidth="2" :lineDashArray="item.dashed ? [5, 4] : undefined" :duration="0" />
 			<VisScatter v-if="points.length === 1" :x="getX" :y="accessors" :color="getColor" :size="24" :duration="0" />
 		</template>
 		<template v-else-if="kind === 'area'">
-			<VisArea v-if="stacked" :x="getX" :y="accessors" :color="getColor" :curve-type="curve" :opacity="0.45" :duration="0" />
-			<VisArea v-for="(item, index) in stacked ? [] : series" :key="item.key" :x="getX" :y="accessors[index]" :color="item.color" :curve-type="curve" :opacity="0.15" :line="true" :line-color="item.color" :duration="0" />
+			<VisArea v-if="stacked" :x="getX" :y="accessors" :color="getColor" :curveType="curve" :opacity="0.45" :duration="0" />
+			<VisArea v-for="(item, index) in stacked ? [] : series" :key="item.key" :x="getX" :y="accessors[index]" :color="item.color" :curveType="curve" :opacity="0.15" :line="true" :lineColor="item.color" :duration="0" />
 		</template>
 		<component
 			:is="stacked ? VisStackedBar : VisGroupedBar" v-else
 			:x="getX" :y="accessors" :color="getColor" :orientation="horizontal ? 'horizontal' : 'vertical'"
-			:bar-padding="stacked ? 0.3 : 0.1" :group-padding="0.3" :rounded-corners="3" :bar-min-height="0" :duration="0" :events="barEvents"
+			:barPadding="stacked ? 0.3 : 0.1" :groupPadding="0.3" :roundedCorners="3" :barMinHeight="0" :duration="0" :events="barEvents"
 		/>
-		<VisAxis v-if="!compact" :key="`category-${horizontal}`" :type="horizontal ? 'y' : 'x'" :tick-values="categoryTicks" :tick-format="formatX" :grid-line="false" :domain-line="false" :tick-line="false" :tick-text-width="horizontal ? 90 : 72" :tick-text-hide-overlapping="true" :tick-text-adaptive-sets="true" :duration="0" />
-		<VisAxis v-if="!compact" :key="`value-${horizontal}`" :type="horizontal ? 'x' : 'y'" :tick-format="formatY" :grid-line="grid" :domain-line="false" :tick-line="false" :tick-text-width="90" :tick-text-hide-overlapping="true" :num-ticks="4" :duration="0" />
-		<VisCrosshair v-if="!horizontal" :x="getX" :y="stacked ? [] : accessors" :y-stacked="stacked ? accessors : undefined" :color="getColor" :hide-when-far-from-pointer="false" :on-crosshair-move="inspectPoint" :duration="0" />
+		<VisAxis v-if="!compact" :key="`category-${horizontal}`" :type="horizontal ? 'y' : 'x'" :tickValues="categoryTicks" :tickFormat="formatX" :gridLine="false" :domainLine="false" :tickLine="false" :tickTextWidth="horizontal ? 90 : 72" :tickTextHideOverlapping="true" :tickTextAdaptiveSets="true" :duration="0" />
+		<VisAxis v-if="!compact" :key="`value-${horizontal}`" :type="horizontal ? 'x' : 'y'" :tickFormat="formatY" :gridLine="grid" :domainLine="false" :tickLine="false" :tickTextWidth="90" :tickTextHideOverlapping="true" :numTicks="4" :duration="0" />
+		<VisCrosshair v-if="!horizontal" :x="getX" :y="stacked ? [] : accessors" :yStacked="stacked ? accessors : undefined" :color="getColor" :hideWhenFarFromPointer="false" :onCrosshairMove="inspectPoint" :duration="0" />
 	</VisXYContainer>
 </template>

package/src/pages/charts/sparkline/DomSparkline.vue

@@ -21,6 +21,7 @@ const props = defineProps({
 	height: { type: Number, default: 48 },
 	legend: { type: Boolean, default: false },
 	showTable: { type: Boolean, default: false },
+	tooltip: { type: Boolean, default: false, _edit: { description: 'Show formatted values on hover or keyboard inspection in a floating tooltip outside the compact plot.' } },
 });
 defineEmits(['select', 'retry']);
 </script>

package/src/pages/lib/vue/index.d.ts

@@ -7811,6 +7811,10 @@ export interface DomSparklineProps {
 	 * Line interpolation. Linear avoids implying unobserved smooth changes.
 	 */
 	curve?: "linear" | "monotoneX" | "step";
+	/**
+	 * Show formatted values on hover or keyboard inspection in a floating tooltip outside the compact plot.
+	 */
+	tooltip?: boolean;
 }
 export declare const DomSparkline: DomComponent<DomSparklineProps>;