bitboss-ui 3.0.0-beta.63 → 3.0.0-beta.64

package/dist/ai/source/BbTable.md

@@ -648,6 +648,7 @@ import {
 	reactive,
 	ref,
 	shallowRef,
+	toDisplayString,
 	toRaw,
 	toRef,
 	useAttrs,
@@ -739,12 +740,16 @@ import {
 	readResolvedTracks,
 	rowNameText,
 	sameColumnOrder,
+	cellRole as valueRoleClasses,
 	estimateFromProfile,
 	fitFloors,
 	profileValues,
+	estimateSamples,
+	floorTextPx,
 	sampleForEstimate,
 } from './utils';
 import type { ColumnProfile, FixedColumnConfig, TrackEstimate } from './utils';
+import { createMeasuredFloors, type MeasuredColumn } from './measuredFloors';
 import { useBbTableContextHost } from '../../composables/useBbTableContext';
 import { useLogger } from '@/composables/useLogger';
 import {
@@ -4275,9 +4280,16 @@ const mapColumnToCell = (
 		// Lazy for the same reason as `rowClasses` above: `td-class` is the
 		// consumer's function over the consumer's state.
 		get classes() {
+			const key = String(column.key);
 			return mergeCellClasses(
-				fluidColumnKeys.value.has(String(column.key))
-					? [`bb-table__cell--${align}`, 'bb-table__cell--fluid']
+				fluidColumnKeys.value.has(key)
+					? [
+							`bb-table__cell--${align}`,
+							'bb-table__cell--fluid',
+							// How the fit holds this value (`cellRole`): static per text,
+							// switched on by the table root's hold level.
+							...roleClassesOf(key, content()),
+						]
 					: [`bb-table__cell--${align}`],
 				props.tdClass,
 				column.tdClass,
@@ -4320,6 +4332,19 @@ const mapColumnToCell = (
  * their first batch: a floor there would cut values off rather than wrap
  * them), a custom `#thead`, declared or resized widths, or slot columns (no
  * text to read: their content floors them as before).
+ *
+ * MEASURED FLOORS. The estimate's character table follows Arial; a wider UI
+ * font drew a date 2px past its floor and broke it. Four layers since:
+ * 1. Classification: which values stay whole is the estimate's (`cellRole`,
+ *    a static role class per cell), the same on the server.
+ * 2. The plan: after mount the values that could be a column's widest, and
+ *    its heading, are measured in their rendered type (measuredFloors.ts,
+ *    textRuler.ts); a measured width only RAISES a reservation.
+ * 3. Geometry: the fit's hold level is one class on the grid root, and the
+ *    cells it promises floor their own track (index.css), so the browser
+ *    keeps them whole with the real text in the real font.
+ * 4. The guard: a plan that says "fits" but overflows reads its held cells
+ *    and headers in place and raises the same store (bounded).
  */
 /**
  * What each estimated column shows (its text exactly as the body renders it),
@@ -4328,8 +4353,8 @@ const mapColumnToCell = (
  * like any other. Apart from the estimate, so a resize, which re-runs that,
  * re-reads no rows.
  */
-const columnProfiles = computed(() => {
-	const out: Record<string, ColumnProfile | null> = {};
+const columnValues = computed(() => {
+	const out: Record<string, string[]> = {};
 	// A custom `#thead` renders its own header cells: no spacer to carry a
 	// floor, and `--fluid` body cells would leave the columns with none.
 	if (props.fixed || isInheriting.value || virtualActive.value || slots.thead)
@@ -4338,15 +4363,87 @@ const columnProfiles = computed(() => {
 	for (const column of orderedColumns.value) {
 		if (effectiveWidth(column) != null) continue;
 		if (slots[slotNamesByKey.value[column.key] as keyof typeof slots]) continue;
-		out[String(column.key)] = profileValues(
-			rows.map((raw) => {
-				const content = cellContentOf(column, raw);
-				return isNil(content) ? '' : String(content);
-			})
+		// The text exactly as the cell renders it (an array or an object too).
+		out[String(column.key)] = rows.map((raw) =>
+			toDisplayString(cellContentOf(column, raw))
+		);
+	}
+	return out;
+});
+/** The body text's px, apart from the rest of the metrics: a resize must not
+ * re-profile the columns. */
+const bodyEm = computed(() => floorMetrics.value?.em ?? 0);
+/** The values' real widths, measured after mount (measuredFloors.ts). */
+const measured = createMeasuredFloors({
+	table: () => tableRef.value,
+	container: () => containerRef.value,
+	columns: () => measuredColumns(),
+	em: () => bodyEm.value,
+	plan: () => {
+		const { stage, hold, floors, wrapLabels } = fittedFloors.value;
+		return JSON.stringify([stage, hold, floors, [...wrapLabels]]);
+	},
+});
+/** Each column profiled, its reservations raised to the measured widths. */
+const columnProfiles = computed(() => {
+	void measured.version.value;
+	const out: Record<string, ColumnProfile | null> = {};
+	for (const [key, values] of Object.entries(columnValues.value))
+		out[key] = profileValues(values, measured.lookup(key));
+	return out;
+});
+
+/**
+ * What `cellRole` reads of each column, as ONE string first (like
+ * `fluidKeyList`): it changes with the rows only, never with a measurement
+ * or a resize, so the cells re-render only when their roles can change.
+ */
+const columnRoleKeyList = computed(() => {
+	const parts: string[] = [];
+	for (const [key, p] of Object.entries(columnProfiles.value))
+		if (p) parts.push(`${key}\u0001${p.prose ? 1 : 0}\u0001${p.usual}`);
+	return parts.join('\u0002');
+});
+const roleInputs = computed(() => {
+	const out = new Map<string, { prose: boolean; usual: number }>();
+	for (const part of columnRoleKeyList.value.split('\u0002')) {
+		if (!part) continue;
+		const [key, prose, usual] = part.split('\u0001');
+		out.set(key!, { prose: prose === '1', usual: Number(usual) });
+	}
+	return out;
+});
+/**
+ * Past 2,000 rows the estimate reads a sample (`sampleForEstimate`): the texts
+ * it read, per column, or `null` when it reads every row. A value only an
+ * unread row shows was never reserved, so it gets no role (fluid, it wraps as
+ * before): held, it would widen its track past the plan. Off the rows and the
+ * columns only (not `columnValues`, which a resize preview re-runs), so a
+ * resize re-renders no cell.
+ */
+const sampledTexts = computed(() => {
+	const all = internalItems.value ?? [];
+	if (!estimateSamples(all.length)) return null;
+	const rows = sampleForEstimate(all);
+	const out = new Map<string, Set<string>>();
+	for (const column of orderedColumns.value) {
+		if (slots[slotNamesByKey.value[column.key] as keyof typeof slots]) continue;
+		out.set(
+			String(column.key),
+			new Set(
+				rows.map((raw) => toDisplayString(cellContentOf(column, raw)).trim())
+			)
 		);
 	}
 	return out;
 });
+const roleClassesOf = (key: string, content: unknown): string[] => {
+	const inputs = roleInputs.value.get(key);
+	if (!inputs) return [];
+	const text = toDisplayString(content);
+	if (sampledTexts.value?.get(key)?.has(text.trim()) === false) return [];
+	return valueRoleClasses(text, inputs);
+};
 
 const columnEstimates = computed(() => {
 	const out: Record<string, TrackEstimate> = {};
@@ -4365,29 +4462,25 @@ const columnEstimates = computed(() => {
 		const key = String(column.key);
 		if (!(key in profiles)) continue;
 		// The sort arrow: 1em plus the 4px gap, in the header's type.
+		const arrowEm = column.sortable ? 1.3 : 0;
 		const estimate = estimateFromProfile(
 			profiles[key]!,
 			headerType
 				? casedLabel(column.label ?? '', headerType.transform)
 				: (column.label ?? ''),
-			padEm,
-			column.sortable ? 1.3 : 0,
+			// A body padded wider than its header (a `td-class` `px-6`) reserves
+			// that padding too: the header's spacer then covers it (raise-only).
+			padEm + measured.extraPadOf(key),
+			arrowEm,
 			headerType,
-			legacyPadEm
+			legacyPadEm,
+			// The heading as it really renders, once measured (raise-only).
+			measured.labelOf(key, arrowEm)
 		);
 		estimate.squeeze = (estimate.squeeze - legacyPadEm) * legacyScale + padEm;
 		// Only our own label wraps (Q76.9 e): a header slot or an affix keeps
 		// its heading on one line, so the fit must not count on two.
-		const slot = slotNamesByKey.value[column.key];
-		if (
-			[
-				`${slot}:header`,
-				`${slot}:header:prepend`,
-				`${slot}:header:append`,
-				'header:prepend',
-				'header:append',
-			].some((name) => slots[name as keyof typeof slots])
-		) {
+		if (!ownsHeading(column)) {
 			estimate.labelWrap = estimate.label;
 			estimate.wrapped = estimate.hard;
 		}
@@ -4396,6 +4489,42 @@ const columnEstimates = computed(() => {
 	return out;
 });
 
+/** Our own label renders the heading: no header slot, no affix. */
+const ownsHeading = (column: BbTableColumn<Item>) => {
+	const slot = slotNamesByKey.value[column.key];
+	return ![
+		`${slot}:header`,
+		`${slot}:header:prepend`,
+		`${slot}:header:append`,
+		'header:prepend',
+		'header:append',
+	].some((name) => slots[name as keyof typeof slots]);
+};
+/** What the measuring pass reads of each estimated column (not reactive:
+ * read inside the pass). */
+const measuredColumns = (): MeasuredColumn[] => {
+	const values = columnValues.value;
+	const offset = Number(rowDragActive.value) + Number(!!props.selectable);
+	const out: MeasuredColumn[] = [];
+	orderedColumns.value.forEach((column, index) => {
+		const key = String(column.key);
+		if (!(key in values)) return;
+		out.push({
+			key,
+			index: index + offset,
+			values: values[key]!,
+			placeholder: column.placeholder || undefined,
+			prose: roleInputs.value.get(key)?.prose ?? false,
+			label: ownsHeading(column) ? column.label || undefined : undefined,
+			dynamic:
+				typeof props.tdClass === 'function' ||
+				typeof column.tdClass === 'function' ||
+				typeof props.rowClass === 'function',
+		});
+	});
+	return out;
+};
+
 // The `--fluid` body cells, as a string first (see `clippedKeyList`): a new
 // floor or a container resize must not re-render every cell.
 const fluidKeyList = computed(() =>
@@ -4451,6 +4580,17 @@ const floorRoomEm = computed(() => {
 const fittedFloors = computed(() =>
 	fitFloors(columnEstimates.value, floorRoomEm.value)
 );
+/**
+ * The table root's hold level (`fitFloors`' `hold`): which of the values the
+ * estimate holds the floors still cover, so their cells may floor their own
+ * track (index.css). One class on the root, so a new level re-renders no row.
+ */
+const holdClass = computed(() => {
+	const { hold } = fittedFloors.value;
+	return fluidKeyList.value && hold !== 'none'
+		? `bb-table__table--hold-${hold}`
+		: undefined;
+});
 /** Headings given two lines so the table fits (Q76.9 e): `--wrap`. */
 const wrapLabelKeys = computed(() => fittedFloors.value.wrapLabels);
 
@@ -4465,7 +4605,7 @@ const columnFloorStyles = computed(() => {
 		const text = Math.max(0, floors[key]! - padEm);
 		out[key] = {
 			'--floor': metrics
-				? `${Math.floor(text * metrics.em)}px`
+				? `${floorTextPx(floors[key]!, padEm, metrics.em)}px`
 				: // In body-text em like the estimate, whatever the header's type.
 					`calc(${text.toFixed(2)} * var(--bb-fs, 1em))`,
 		};
@@ -4475,6 +4615,41 @@ const columnFloorStyles = computed(() => {
 
 let floorObserver: ResizeObserver | undefined;
 let floorFrame = 0;
+/** `--bb-fs` in px, probed once per value of what it resolves from: the
+ * token itself, the root's and the page's font sizes, and the box a viewport
+ * or container unit resolves against (which no style read sees change). */
+let emProbe: { key: string; em: number } | undefined;
+/** The sizes of `el`'s query containers, for a `cq` unit's key. */
+const containerSizes = (el: HTMLElement) => {
+	const sizes: string[] = [];
+	for (let node = el.parentElement; node; node = node.parentElement)
+		if (getComputedStyle(node).containerType !== 'normal')
+			sizes.push(`${node.clientWidth}x${node.clientHeight}`);
+	return sizes.join(',');
+};
+const bodyEmOf = (container: HTMLElement) => {
+	const style = getComputedStyle(container);
+	const token = style.getPropertyValue('--bb-fs').trim();
+	const key = [
+		token,
+		style.fontSize,
+		getComputedStyle(document.documentElement).fontSize,
+		// A `cq` unit with no query container resolves against the viewport.
+		/v(w|h|i|b|min|max)|cq/.test(token)
+			? `${window.innerWidth}x${window.innerHeight}`
+			: '',
+		/cq/.test(token) ? containerSizes(container) : '',
+	].join('|');
+	if (emProbe?.key === key) return emProbe.em;
+	const probe = document.createElement('span');
+	probe.style.cssText =
+		'position:absolute;visibility:hidden;font-size:var(--bb-fs,1em)';
+	container.append(probe);
+	const em = parseFloat(getComputedStyle(probe).fontSize);
+	probe.remove();
+	emProbe = { key, em };
+	return em;
+};
 const measureFloors = () => {
 	const container = containerRef.value;
 	const table = tableRef.value;
@@ -4483,13 +4658,10 @@ const measureFloors = () => {
 	const rootEm = parseFloat(style.fontSize) || 16;
 	// The estimates are in em of the BODY text (`--bb-fs`, 14px by default),
 	// not the table root's 16px — resolved on a probe, so it holds with no
-	// rows yet and whatever a cell class does to one cell's size.
-	const probe = document.createElement('span');
-	probe.style.cssText =
-		'position:absolute;visibility:hidden;font-size:var(--bb-fs,1em)';
-	container.append(probe);
-	const em = parseFloat(getComputedStyle(probe).fontSize) || rootEm;
-	probe.remove();
+	// rows yet and whatever a cell class does to one cell's size. Only when
+	// what it resolves from changed: any node added under the root (a grid
+	// scroller) re-lays out every row, 100ms and more at 1000 rows.
+	const em = bodyEmOf(container) || rootEm;
 	const padEm = (2 * (parseFloat(style.getPropertyValue('--px')) || 12)) / em;
 	// The structural columns (drag handle, selection, actions) are
 	// `max-content` tracks of a fixed width: not room for the floors.
@@ -4526,23 +4698,84 @@ const measureFloors = () => {
 	)
 		floorMetrics.value = { width, em, rootEm, padEm, head };
 };
+/** The cells each hold level promises (index.css), for the guard. */
+const HELD_CELLS = {
+	units: {
+		whole:
+			'.bb-table__cell--fluid:is(.bb-table__cell--line, .bb-table__cell--token)',
+		word: '.bb-table__cell--fluid.bb-table__cell--word',
+	},
+	core: {
+		whole:
+			'.bb-table__cell--fluid:is(.bb-table__cell--line, .bb-table__cell--token):not(.bb-table__cell--outlier)',
+		word: '.bb-table__cell--fluid.bb-table__cell--word:not(.bb-table__cell--outlier)',
+	},
+	words: {
+		whole: '.bb-table__cell--fluid.bb-table__cell--token',
+		word: '.bb-table__cell--fluid:is(.bb-table__cell--line, .bb-table__cell--word)',
+	},
+	none: {},
+} as const;
+/** After the floors of this pass rendered: a plan that fits must fit. */
+const guardPlan = () => {
+	const { stage, hold, floors } = fittedFloors.value;
+	if (stage >= 7 || !Object.keys(floors).length) return;
+	measured.guard(hold, HELD_CELLS[hold]);
+};
+/**
+ * One pass of the floors: the room and the em (`measureFloors`), a check of
+ * the columns' typography (style reads only), the texts the rows brought
+ * (the ruler, outside the table), then — once Vue has rendered what that
+ * changed — the guard. `mount`: the first pass, before the first paint.
+ */
+const floorPass = (mount = false) => {
+	measureFloors();
+	if (virtualActive.value) return;
+	measured.checkTypography();
+	measured.measure(mount);
+	nextTick(guardPlan);
+};
 // Read on the frame AFTER a resize, never inside the callback nor
 // synchronously: a new floor re-lays the table out, which resizes the
 // container again within the same observer loop (the browser reports that as
 // an error), and a forced layout at mount shifts what virtual rows measure.
 const scheduleFloors = () => {
 	cancelAnimationFrame(floorFrame);
-	floorFrame = requestAnimationFrame(measureFloors);
+	floorFrame = requestAnimationFrame(() => floorPass());
 };
 onMounted(() => {
 	if (!containerRef.value || typeof ResizeObserver === 'undefined') return;
 	// A client render reaches its first paint measured (the fitted floors and
-	// the headings' lines already set), not at the wish for one frame. Not
-	// under `virtual` (no floors there): a forced layout at mount shifts what
-	// its rows measure.
-	if (!virtualActive.value) measureFloors();
+	// the headings' lines already set, the values' real widths read), not at
+	// the wish for one frame. Not under `virtual` (no floors there): a forced
+	// layout at mount shifts what its rows measure.
+	if (!virtualActive.value) floorPass(true);
 	floorObserver = new ResizeObserver(scheduleFloors);
 	floorObserver.observe(containerRef.value);
+	// The grid itself: held cells widen it when a font changes under them
+	// (no event fires for every font), and the guard then looks. Not under
+	// `virtual` (no floors, no held cells): its rows resize the grid as it
+	// scrolls, and every pass forces a layout.
+	if (tableRef.value && !virtualActive.value)
+		floorObserver.observe(tableRef.value);
+	measured.onFontsChanged(() => !virtualActive.value && scheduleFloors());
+});
+watch([tableRef, virtualActive], ([table, virtual], [previous]) => {
+	if (!floorObserver) return;
+	if (previous) floorObserver.unobserve(previous);
+	if (table && !virtual) floorObserver.observe(table);
+});
+// New rows: their new texts are measured on the next pass. Only when a
+// column shows other texts: `columnValues` also re-runs when nothing it
+// shows changed (a resize preview sizes a column, a consumer passes an equal
+// `columns` array again), and a re-measure walks every candidate.
+const sameTexts = (a: readonly string[] | undefined, b: readonly string[]) =>
+	a?.length === b.length && a.every((text, i) => text === b[i]);
+watch(columnValues, (now, old) => {
+	if (Object.entries(now).every(([key, texts]) => sameTexts(old?.[key], texts)))
+		return;
+	measured.rowsChanged();
+	if (floorObserver) scheduleFloors();
 });
 // The root element swaps (`selectable` turns it into a fieldset): observe
 // the new one, or the floors stay on the last read of a detached box. A
@@ -4560,6 +4793,7 @@ watch(
 onBeforeUnmount(() => {
 	floorObserver?.disconnect();
 	cancelAnimationFrame(floorFrame);
+	measured.dispose();
 });
 
 /**
@@ -7157,7 +7391,7 @@ const tableBindings = computed(() => {
 		...mergeProps(
 			{
 				ref: tableRef,
-				class: 'bb-table__table',
+				class: ['bb-table__table', holdClass.value],
 				role: tableRole.value,
 				'aria-labelledby': props.caption ? captionId.value : undefined,
 				'aria-multiselectable':
@@ -9987,6 +10221,22 @@ export type BbTableSlots<Item = any> = BbTableColumnSlots<Item> & {
 			background-color: var(--row-bg);
 		}
 
+		/* Q76.7 (b): on hover a pinned cell takes the row's OWN fill, so an
+		   app's `pt:row` hover colour (`hover:bg-*`) reaches it as it reaches
+		   the rest of the row (it kept the library's tint before). The row
+		   then has to be opaque for the pinned cell to stay opaque (Q56.24 b),
+		   so the library's own hover is forced opaque on a row that has one;
+		   an opaque theme renders exactly as before. A translucent app hover
+		   colour shows through the pinned cell while the row is hovered: give
+		   it an opaque one. */
+		&:has(> [style*='sticky']):hover {
+			background-color: rgb(from var(--row-bg) r g b / 1);
+
+			> [style*='sticky'] {
+				background-color: inherit;
+			}
+		}
+
 		/* A click opens it (`v-model:highlighted`, `highlightable`). */
 		&--highlightable {
 			cursor: pointer;
@@ -10055,7 +10305,8 @@ export type BbTableSlots<Item = any> = BbTableColumnSlots<Item> & {
 
 		/* Q9.1b: in a column with an estimated floor (see `--floored` above) the
 		   floor is the minimum, not the longest word: a value too long for it
-		   wraps, or breaks, rather than widening every row. */
+		   wraps, or breaks, rather than widening every row. The values the fit
+		   promises are held instead, by the root's hold level (below). */
 		&--fluid {
 			min-width: 0;
 		}
@@ -10085,6 +10336,50 @@ export type BbTableSlots<Item = any> = BbTableColumnSlots<Item> & {
 		}
 	}
 
+	/* Measured floors: the values the fit promises (`cellRole`: `--line`,
+	   `--token`, `--word`, `--outlier`) floor their own track again, at the
+	   hold level the fit reached (`fitFloors`' `hold`, one class on the grid
+	   root). The browser then sizes the track with the real text in its real
+	   font: a promised value never breaks, whatever the estimate said, and the
+	   measured floors make sure it never widens a track past the plan. A whole
+	   value also keeps to one line (`nowrap`: a hyphen or a slash would break
+	   a date under `min-width: auto` alone); a `--word` value only keeps its
+	   longest word. Child combinators only: a nested table's cells follow
+	   their own root. Internal classes, not public API (like `--fluid`). */
+	&__table--hold-units
+		> .bb-table__body
+		> [role='row']
+		> .bb-table__cell--fluid:is(.bb-table__cell--line, .bb-table__cell--token),
+	&__table--hold-core
+		> .bb-table__body
+		> [role='row']
+		> .bb-table__cell--fluid:is(
+			.bb-table__cell--line,
+			.bb-table__cell--token
+		):not(.bb-table__cell--outlier),
+	&__table--hold-words
+		> .bb-table__body
+		> [role='row']
+		> .bb-table__cell--fluid.bb-table__cell--token {
+		min-width: auto;
+		white-space: nowrap;
+	}
+
+	&__table--hold-units
+		> .bb-table__body
+		> [role='row']
+		> .bb-table__cell--fluid.bb-table__cell--word,
+	&__table--hold-core
+		> .bb-table__body
+		> [role='row']
+		> .bb-table__cell--fluid.bb-table__cell--word:not(.bb-table__cell--outlier),
+	&__table--hold-words
+		> .bb-table__body
+		> [role='row']
+		> .bb-table__cell--fluid:is(.bb-table__cell--line, .bb-table__cell--word) {
+		min-width: auto;
+	}
+
 	/* The grid's roving tab stop (`keyboardNavigation`, role="grid" /
 	   "treegrid"): cells, header cells and a treegrid's expand rows take
 	   focus. Same inset ring as the rows and the reorderable headers —
@@ -10284,4 +10579,41 @@ export type BbTableSlots<Item = any> = BbTableColumnSlots<Item> & {
 	--indent: 0px;
 	--indent-at: select;
 }
+
+/* The text ruler (textRuler.ts): measured content floors read each held
+   value's real width here, outside every table (a node under a table's grid
+   root would re-lay out all its rows). Off-screen, isolated, never painted;
+   each wrapper carries a rendered cell's computed text properties inline,
+   and its lines inherit them whatever a consumer rule says. Internal, not
+   public API. */
+.bb-table-ruler {
+	contain: strict;
+	height: 0;
+	inset-inline-start: 0;
+	overflow: hidden;
+	pointer-events: none;
+	position: absolute;
+	top: 0;
+	visibility: hidden;
+	width: 0;
+
+	> * > * {
+		border: 0 !important;
+		direction: inherit !important;
+		display: block !important;
+		font: inherit !important;
+		font-feature-settings: inherit !important;
+		font-variation-settings: inherit !important;
+		letter-spacing: inherit !important;
+		margin: 0 !important;
+		max-width: none !important;
+		min-width: 0 !important;
+		padding: 0 !important;
+		text-rendering: inherit !important;
+		text-transform: inherit !important;
+		white-space: nowrap !important;
+		width: max-content !important;
+		word-spacing: inherit !important;
+	}
+}
 ```