@getdom/studio 0.2.3 → 0.2.5

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # Changelog
 
+## 0.2.5 - 2026-10-08
+
+### Added
+
+- Data grids support `layout="flush"` with application-owned `gutter-class`
+  padding, including responsive utilities and CSS variable values. Toolbar,
+  footer and outer header/body cell edges align while middle cells retain their
+  spacing. Works with ordinary and virtual rows.
+- A copyable full-width article library example documents the layout contract.
+
+### Upgrade notes
+
+- Existing grids keep their card layout. Applications own the surrounding width
+  and negative margins; flush removes side borders, corner rounding and shadow.
+
+## 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.5",
 	"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/data/data-grid/DataGridVirtualRows.vue

@@ -7,6 +7,10 @@ defineOptions({
 });
 
 const props = defineProps({
+	gutterClass: {
+		type: String,
+		default: '',
+	},
 	rows: {
 		type: Array,
 		default: () => [],
@@ -168,7 +172,7 @@ function spacerStyle(height) {
 			v-for="item in renderedRows"
 			:key="resolvedRowKey(item.row, item.index)"
 			class="group bg-canvas transition hover:bg-secondary/45"
-			:class="rowSelected(item.row, item.index) && 'bg-sky-500/5'"
+			:class="[rowSelected(item.row, item.index) && 'bg-sky-500/5', gutterClass]"
 			:aria-rowindex="item.index + 1"
 			:aria-selected="rowSelected(item.row, item.index) || undefined"
 			:style="rowStyle()"

package/src/pages/data/data-grid/DomDataGrid.vue

@@ -55,6 +55,16 @@
 */
 
 export const dataGridProps = {
+	layout: {
+		type: String,
+		default: 'card',
+		_edit: { description: 'Card keeps the bordered container. Flush removes outer side borders, rounding and shadow; the application owns the surrounding width.', options: ['card', 'flush'] },
+	},
+	gutterClass: {
+		type: String,
+		default: 'px-3',
+		_edit: { description: 'Horizontal padding classes for flush toolbar, footer and outer cell edges, such as px-4 sm:px-6 or px-[var(--page-gutter)]. Ignored in card layout.' },
+	},
 	rows: {
 		type: Array,
 		default: () => [],
@@ -1178,10 +1188,12 @@ function onCellComponentAction(row, column, rowIndex, payload) {
 
 <template>
 	<section
-		class="dom-data-grid overflow-hidden rounded-lg border border-border bg-canvas text-canvas-fg shadow-sm"
+		class="dom-data-grid overflow-hidden border-border bg-canvas text-canvas-fg"
+		:class="layout === 'flush' ? 'border-y' : 'rounded-lg border shadow-sm'"
+		:data-layout="layout"
 		:aria-labelledby="titleId"
 	>
-		<header v-if="toolbar" class="border-b border-border bg-secondary/35 px-3 py-3">
+		<header v-if="toolbar" class="border-b border-border bg-secondary/35 py-3" :class="layout === 'flush' ? gutterClass : 'px-3'">
 			<div class="flex flex-wrap items-center gap-3">
 				<div class="min-w-0 flex-1">
 					<h2 :id="titleId" class="truncate text-sm font-semibold tracking-tight text-canvas-fg">{{ title }}</h2>
@@ -1241,7 +1253,7 @@ function onCellComponentAction(row, column, rowIndex, payload) {
 			</div>
 		</header>
 
-		<div ref="scrollViewport" class="overflow-auto pb-3" :style="gridHeightStyle" @scroll="onViewportScroll">
+		<div ref="scrollViewport" class="overflow-auto pb-3" data-grid-viewport :style="gridHeightStyle" @scroll="onViewportScroll">
 			<table class="w-full table-fixed border-separate border-spacing-0 text-sm" :style="tableStyle">
 				<colgroup>
 					<col v-if="selectable" class="w-11" />
@@ -1254,7 +1266,7 @@ function onCellComponentAction(row, column, rowIndex, payload) {
 				</colgroup>
 
 				<thead class="text-xs">
-					<tr v-if="showColumnLetters" class="bg-secondary/60 text-muted-fg">
+					<tr v-if="showColumnLetters" class="bg-secondary/60 text-muted-fg" :class="layout === 'flush' && gutterClass">
 						<th
 							v-if="selectable"
 							class="border-b border-r border-border px-2 py-1.5 font-semibold"
@@ -1275,7 +1287,7 @@ function onCellComponentAction(row, column, rowIndex, payload) {
 						</th>
 					</tr>
 
-					<tr class="bg-canvas text-muted-fg">
+					<tr class="bg-canvas text-muted-fg" :class="layout === 'flush' && gutterClass">
 						<th
 							v-if="selectable"
 							class="border-b border-r border-border px-2 text-center"
@@ -1506,6 +1518,7 @@ function onCellComponentAction(row, column, rowIndex, payload) {
 					:row-key="rowKey"
 					:cell-value="cellValue"
 					:formatted-cell="formattedCell"
+					:gutter-class="layout === 'flush' ? gutterClass : ''"
 					:cell-align-class="cellAlignClass"
 					:row-density-class="rowDensityClass"
 					:selected-keys="internalSelectedKeys"
@@ -1555,12 +1568,12 @@ function onCellComponentAction(row, column, rowIndex, payload) {
 				</DataGridVirtualRows>
 
 				<tbody v-else>
-					<tr v-if="loading">
+					<tr v-if="loading" :class="layout === 'flush' && gutterClass">
 						<td :colspan="emptyColspan" class="border-b border-border px-4 py-10 text-center text-sm text-muted-fg">
 							Loading {{ resourceLabel }}...
 						</td>
 					</tr>
-					<tr v-else-if="!displayRows.length">
+					<tr v-else-if="!displayRows.length" :class="layout === 'flush' && gutterClass">
 						<td :colspan="emptyColspan" class="px-4 py-12 text-center text-sm text-muted-fg">
 							<slot name="empty">{{ emptyText }}</slot>
 						</td>
@@ -1570,7 +1583,7 @@ function onCellComponentAction(row, column, rowIndex, payload) {
 							v-for="(row, rowIndex) in displayRows"
 							:key="rowKey(row, rowIndex)"
 							class="group bg-canvas transition hover:bg-secondary/45"
-							:class="rowSelected(row, rowIndex) && 'bg-sky-500/5'"
+							:class="[rowSelected(row, rowIndex) && 'bg-sky-500/5', layout === 'flush' && gutterClass]"
 							:aria-selected="rowSelected(row, rowIndex) || undefined"
 							@click="emit('row-click', { row, index: rowIndex })"
 						>
@@ -1634,10 +1647,35 @@ function onCellComponentAction(row, column, rowIndex, payload) {
 			</table>
 		</div>
 
-		<footer class="flex flex-wrap items-center justify-between gap-2 border-t border-border bg-secondary/25 px-3 py-2 text-xs text-muted-fg">
+		<footer class="flex flex-wrap items-center justify-between gap-2 border-t border-border bg-secondary/25 py-2 text-xs text-muted-fg" :class="layout === 'flush' ? gutterClass : 'px-3'">
 			<span>{{ visibleColumns.length }} columns</span>
 			<span v-if="internalSelectedKeys.length">{{ internalSelectedKeys.length }} selected</span>
 			<span v-else>Ready</span>
 		</footer>
 	</section>
 </template>
+
+<style scoped>
+/* Row padding does not affect table layout. Only the two outer cell edges
+ * inherit it, so responsive/custom utility classes remain application-owned.
+ * Direct table ancestry prevents these rules leaking into nested cell content. */
+[data-layout="flush"] > [data-grid-viewport] > table > :deep(:is(thead, tbody) > tr:not([aria-hidden="true"]) > :is(th, td):first-child) {
+	padding-left: inherit;
+}
+
+[data-layout="flush"] > [data-grid-viewport] > table > :deep(:is(thead, tbody) > tr:not([aria-hidden="true"]) > :is(th, td):last-child) {
+	padding-right: inherit;
+}
+
+/* The sortable header has two inner wrappers; remove their extra edge inset
+ * so the label starts on the same gutter as the toolbar and body cells. */
+[data-layout="flush"] > [data-grid-viewport] > table > thead > tr > th:first-child > div,
+[data-layout="flush"] > [data-grid-viewport] > table > thead > tr > th:first-child > div > button {
+	padding-left: 0;
+}
+
+[data-layout="flush"] > [data-grid-viewport] > table > thead > tr > th:last-child > div:not(.pr-9),
+[data-layout="flush"] > [data-grid-viewport] > table > thead > tr > th:last-child > div > button {
+	padding-right: 0;
+}
+</style>

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

@@ -2215,6 +2215,14 @@ export interface DomContextMenuProps {
 export declare const DomContextMenu: DomComponent<DomContextMenuProps>;
 
 export interface DomDataGridProps {
+	/**
+	 * Card keeps the bordered container. Flush removes outer side borders, rounding and shadow; the application owns the surrounding width.
+	 */
+	layout?: "card" | "flush";
+	/**
+	 * Horizontal padding classes for flush toolbar, footer and outer cell edges, such as px-4 sm:px-6 or px-[var(--page-gutter)]. Ignored in card layout.
+	 */
+	gutterClass?: string;
 	/**
 	 * Rows to render. Each row should be a plain object from an API, store, or database result.
 	 */
@@ -7811,6 +7819,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>;