@praxisui/core 10.0.0-rc.31 → 10.0.0-rc.33

package/fesm2022/praxisui-core-schema.mjs

@@ -111,6 +111,10 @@ const VISUALIZATION_TONES = new Set([
     'danger',
     'critical',
 ]);
+const VISUALIZATION_SCALE_SCOPES = new Set([
+    'row',
+    'page',
+]);
 const TABLE_SAFE_KINDS = new Set([
     'line',
     'area',
@@ -218,6 +222,7 @@ function normalizePraxisPresentationVisualization(value) {
     }
     const surface = normalizeEnum$1(value.surface, VISUALIZATION_SURFACES);
     const size = normalizeEnum$1(value.size, VISUALIZATION_SIZES);
+    const scaleScope = normalizeEnum$1(value.scaleScope, VISUALIZATION_SCALE_SCOPES);
     const tone = normalizeEnum$1(value.tone, VISUALIZATION_TONES);
     const ariaLabel = normalizeText$1(value.ariaLabel);
     const valueSuffix = normalizeText$1(value.valueSuffix);
@@ -228,7 +233,10 @@ function normalizePraxisPresentationVisualization(value) {
         let evalVal = value.value;
         if (evalVal === undefined && Array.isArray(value.points) && value.points.length > 0) {
             const last = value.points[value.points.length - 1];
-            if (last && typeof last === 'object' && Number.isFinite(last.value)) {
+            if (typeof last === 'number' && Number.isFinite(last)) {
+                evalVal = last;
+            }
+            else if (last && typeof last === 'object' && Number.isFinite(last.value)) {
                 evalVal = last.value;
             }
         }
@@ -251,6 +259,7 @@ function normalizePraxisPresentationVisualization(value) {
         fallbackText,
         ...(surface ? { surface } : {}),
         ...(size ? { size } : {}),
+        ...(scaleScope ? { scaleScope } : {}),
         ...(resolvedTone ? { tone: resolvedTone } : {}),
         ...(resolvedAriaLabel ? { ariaLabel: resolvedAriaLabel } : {}),
         ...(valueSuffix ? { valueSuffix } : {}),
@@ -258,6 +267,10 @@ function normalizePraxisPresentationVisualization(value) {
         ...(Object.prototype.hasOwnProperty.call(value, 'value') ? { value: value.value } : {}),
         ...(normalizeExpression(value.valueExpr, 'valueExpr') ?? {}),
         ...(normalizeExpression(value.valueSuffixExpr, 'valueSuffixExpr') ?? {}),
+        ...(normalizeNumber(value.min, 'min') ?? {}),
+        ...(normalizeExpression(value.minExpr, 'minExpr') ?? {}),
+        ...(normalizeNumber(value.max, 'max') ?? {}),
+        ...(normalizeExpression(value.maxExpr, 'maxExpr') ?? {}),
         ...(normalizeNumber(value.total, 'total') ?? {}),
         ...(normalizeExpression(value.totalExpr, 'totalExpr') ?? {}),
         ...(normalizeNumber(value.target, 'target') ?? {}),
@@ -318,49 +331,75 @@ function renderPraxisPresentationVisualizationHtml(value, options = {}) {
     }
 }
 function renderComparisonVisualizationHtml(visualization, options) {
-    const points = visualization.points ?? [];
+    let points = visualization.points ?? [];
+    if (points.length === 0) {
+        const primaryValue = toFiniteNumber(visualization.value);
+        const referenceValue = toFiniteNumber(visualization.baseline) ?? toFiniteNumber(visualization.target);
+        if (primaryValue !== undefined) {
+            points = [
+                { value: primaryValue, tone: visualization.tone ?? 'info' },
+                ...(referenceValue !== undefined
+                    ? [{ value: referenceValue, tone: 'neutral' }]
+                    : []),
+            ];
+        }
+    }
     if (points.length === 0) {
         return renderFallbackVisualizationHtml(visualization, visualization.tone ?? 'neutral');
     }
-    const max = Math.max(1, ...points.map((point) => Math.max(0, point.value)));
+    const explicitCeiling = Math.max(toFiniteNumber(visualization.max) ?? 0, toFiniteNumber(visualization.total) ?? 0);
+    const max = Math.max(1, explicitCeiling, ...points.map((point) => Math.max(0, point.value)));
+    const suffix = visualization.valueSuffix ?? '';
+    const useCompact = visualization.compactValue === true;
     const rows = points
         .map((point) => {
         const width = percent(point.value, max);
+        const formattedVal = `${formatMicroNumber(point.value, options.locale, useCompact)}${suffix}`;
+        const readout = `${point.label ? `${point.label}: ` : ''}${formattedVal} (${Math.round(Number(width))}%)`;
         return `
-        <span class="pfx-micro-viz__row" data-tone="${escapeHtml(point.tone ?? visualization.tone ?? 'info')}">
+        <span class="pfx-micro-viz__row" data-tone="${escapeHtml(point.tone ?? visualization.tone ?? 'info')}" data-micro-readout="${escapeHtml(readout)}">
           <span class="pfx-micro-viz__label">${escapeHtml(point.label ?? '')}</span>
           <span class="pfx-micro-viz__track">
             <span class="pfx-micro-viz__bar" style="width:${width}%"></span>
           </span>
-          <span class="pfx-micro-viz__value">${escapeHtml(formatMicroNumber(point.value, options.locale))}</span>
+          <span class="pfx-micro-viz__value">${escapeHtml(formattedVal)}</span>
         </span>`;
     })
         .join('');
-    return `<span class="pfx-micro-viz" role="img" aria-label="${escapeHtml(visualization.ariaLabel ?? visualization.fallbackText)}">${rows}</span>`;
+    return `<span class="pfx-micro-viz pfx-micro-viz__comparison" role="img" aria-label="${escapeHtml(visualization.ariaLabel ?? visualization.fallbackText)}">${rows}</span>`;
 }
 function renderStackedBarVisualizationHtml(visualization, options) {
-    const segments = visualization.segments ?? [];
+    const segments = visualization.segments?.length
+        ? visualization.segments
+        : (visualization.items?.filter((item) => typeof item?.value === 'number' && Number.isFinite(item.value)) ?? []);
     if (segments.length === 0) {
         return renderFallbackVisualizationHtml(visualization, visualization.tone ?? 'neutral');
     }
     const total = visualization.total && visualization.total > 0
         ? visualization.total
         : Math.max(1, segments.reduce((sum, segment) => sum + Math.max(0, segment.value), 0));
+    const suffix = visualization.valueSuffix ?? '';
     const bars = segments
-        .map((segment) => `
+        .map((segment) => {
+        const pctStr = percent(segment.value, total);
+        const formattedVal = `${formatMicroNumber(segment.value, options.locale)}${suffix}`;
+        const readout = `${segment.label ? `${segment.label}: ` : ''}${formattedVal} (${Math.round(Number(pctStr))}%)`;
+        return `
       <span
         class="pfx-micro-viz__segment"
         data-tone="${escapeHtml(segment.tone ?? visualization.tone ?? 'info')}"
-        style="width:${percent(segment.value, total)}%"
-        title="${escapeHtml(`${segment.label ?? ''} ${formatMicroNumber(segment.value, options.locale)}`.trim())}"
-      ></span>`)
+        data-micro-readout="${escapeHtml(readout)}"
+        style="width:${pctStr}%"
+        title="${escapeHtml(`${segment.label ?? ''} ${formattedVal}`.trim())}"
+      ></span>`;
+    })
         .join('');
     const meta = segments
         .slice(0, 3)
         .map((segment) => `<span>${escapeHtml(segment.label ?? '')}: ${escapeHtml(formatMicroNumber(segment.value, options.locale))}</span>`)
         .join('');
     return `
-    <span class="pfx-micro-viz" role="img" aria-label="${escapeHtml(visualization.ariaLabel ?? visualization.fallbackText)}">
+    <span class="pfx-micro-viz pfx-micro-viz__stacked" role="img" aria-label="${escapeHtml(visualization.ariaLabel ?? visualization.fallbackText)}">
       <span class="pfx-micro-viz__segments">${bars}</span>
       <span class="pfx-micro-viz__meta">${meta}</span>
     </span>`;
@@ -374,9 +413,15 @@ function resolveBulletMax(visualization) {
         toFiniteNumber(visualization.value) ?? 0,
         visualization.target ?? 0,
         visualization.total ?? 0,
+        visualization.max ?? 0,
         ...thresholdValues
     ].filter((v) => Number.isFinite(v) && v > 0);
-    return Math.max(...values, 100);
+    const fallbackCeiling = visualization.total && visualization.total > 0
+        ? visualization.total
+        : visualization.max && visualization.max > 0
+            ? visualization.max
+            : 100;
+    return Math.max(...values, fallbackCeiling);
 }
 function renderBulletVisualizationHtml(visualization, options) {
     const currentValue = toFiniteNumber(visualization.value);
@@ -387,6 +432,7 @@ function renderBulletVisualizationHtml(visualization, options) {
     const target = toFiniteNumber(visualization.target);
     const targetLeft = target === undefined ? null : percent(target, max);
     const isTable = visualization.surface === 'table-cell';
+    const suffix = visualization.valueSuffix ?? '';
     // thresholds: sort ascending by boundary value so bands draw continuously regardless of declaration order
     const thresholds = visualization.thresholds ?? [];
     const sortedThresholds = [...thresholds].sort((a, b) => {
@@ -418,11 +464,19 @@ function renderBulletVisualizationHtml(visualization, options) {
       <span>${escapeHtml(formatMicroNumber(max, options.locale))}</span>
     </div>`;
     const showCompactValue = isTable && visualization.compactValue !== false;
+    const useCompactNotation = visualization.compactValue === true;
     const compactValueHtml = showCompactValue
-        ? `<span class="pfx-micro-bullet__compact-value">${escapeHtml(formatMicroNumber(currentValue, options.locale))}${escapeHtml(visualization.valueSuffix ?? '')}</span>`
+        ? `<span class="pfx-micro-bullet__compact-value">${escapeHtml(formatMicroNumber(currentValue, options.locale, useCompactNotation))}${escapeHtml(suffix)}</span>`
         : '';
+    const currentStr = `${formatMicroNumber(currentValue, options.locale)}${suffix}`;
+    const diff = target !== undefined ? currentValue - target : undefined;
+    const diffSign = diff !== undefined && diff > 0 ? '+' : '';
+    const bulletReadout = target !== undefined && diff !== undefined
+        ? `${currentStr} / Target ${formatMicroNumber(target, options.locale)}${suffix} (${diffSign}${formatMicroNumber(diff, options.locale)}${suffix})`
+        : `${currentStr} / ${formatMicroNumber(max, options.locale)}${suffix}`;
+    const tabIndexAttr = isTable ? '' : ' tabindex="0"';
     return `
-    <span class="pfx-micro-viz pfx-micro-viz__bullet" data-tone="${escapeHtml(visualization.tone ?? 'info')}" role="img" aria-label="${escapeHtml(visualization.ariaLabel ?? visualization.fallbackText)}">
+    <span class="pfx-micro-viz pfx-micro-viz__bullet"${tabIndexAttr} data-tone="${escapeHtml(visualization.tone ?? 'info')}" data-micro-readout="${escapeHtml(bulletReadout)}" role="img" aria-label="${escapeHtml(visualization.ariaLabel ?? visualization.fallbackText)}">
       ${topHtml}
       <span class="pfx-micro-bullet__track">
         ${bandsHtml}
@@ -455,8 +509,19 @@ function renderDeltaVisualizationHtml(visualization, options) {
             ? 'down'
             : 'stable';
     const aria = visualization.ariaLabel ?? `${visualization.fallbackText}: ${directionLabel} ${text}`;
+    const target = toFiniteNumber(visualization.target);
+    const baseline = toFiniteNumber(visualization.baseline);
+    const isTable = visualization.surface === 'table-cell';
+    const deltaReadout = target !== undefined
+        ? `Target ${formatMicroNumber(target, options.locale)}${valueSuffix}`
+        : baseline !== undefined
+            ? `Base ${formatMicroNumber(baseline, options.locale)}${valueSuffix}`
+            : null;
+    const readoutAttr = deltaReadout
+        ? `${isTable ? '' : ' tabindex="0"'} data-micro-readout="${escapeHtml(deltaReadout)}"`
+        : '';
     return `
-    <span class="pfx-micro-viz pfx-micro-viz__delta" data-tone="${escapeHtml(tone)}" data-direction="${escapeHtml(direction)}" role="img" aria-label="${escapeHtml(aria)}">
+    <span class="pfx-micro-viz pfx-micro-viz__delta" data-tone="${escapeHtml(tone)}" data-direction="${escapeHtml(direction)}"${readoutAttr} role="img" aria-label="${escapeHtml(aria)}">
       <span class="pfx-micro-viz__delta-symbol" aria-hidden="true">${symbol}</span>
       <span>${escapeHtml(text)}</span>
     </span>`;
@@ -470,7 +535,14 @@ function percent(value, total) {
 function toFiniteNumber(value) {
     return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
 }
-function formatMicroNumber(value, locale) {
+function formatMicroNumber(value, locale, compactValue = false) {
+    if (compactValue && Math.abs(value) >= 1000) {
+        return new Intl.NumberFormat(locale || undefined, {
+            notation: 'compact',
+            compactDisplay: 'short',
+            maximumFractionDigits: 1,
+        }).format(value);
+    }
     return new Intl.NumberFormat(locale || undefined, {
         maximumFractionDigits: Math.abs(value) < 10 ? 2 : 0,
     }).format(value);
@@ -545,6 +617,9 @@ function normalizeNumericEntries(value) {
     }
     return value
         .map((item) => {
+        if (typeof item === 'number') {
+            return Number.isFinite(item) ? { value: item } : null;
+        }
         if (!item || typeof item !== 'object' || !Number.isFinite(item.value)) {
             return null;
         }
@@ -605,6 +680,7 @@ function renderRadialVisualizationHtml(visualization, options) {
     const total = visualization.total && visualization.total > 0 ? visualization.total : 100;
     const pct = Math.max(0, Math.min(100, (value / total) * 100));
     const tone = visualization.tone ?? 'info';
+    const suffix = visualization.valueSuffix ?? '';
     const dashArray = `${pct.toFixed(1)}, 100`;
     const pctText = `${Math.round(pct)}%`;
     const aria = visualization.ariaLabel ?? `${visualization.fallbackText} (${pctText})`;
@@ -615,8 +691,10 @@ function renderRadialVisualizationHtml(visualization, options) {
     const externalText = isTable
         ? `<span class="pfx-micro-radial-value">${escapeHtml(pctText)}</span>`
         : '';
+    const radialReadout = `${formatMicroNumber(value, options.locale)}${suffix} / ${formatMicroNumber(total, options.locale)}${suffix} (${pctText})`;
+    const tabIndexAttr = isTable ? '' : ' tabindex="0"';
     return `
-    <span class="pfx-micro-viz pfx-micro-viz__radial" data-tone="${escapeHtml(tone)}" role="img" aria-label="${escapeHtml(aria)}">
+    <span class="pfx-micro-viz pfx-micro-viz__radial"${tabIndexAttr} data-tone="${escapeHtml(tone)}" data-micro-readout="${escapeHtml(radialReadout)}" role="img" aria-label="${escapeHtml(aria)}">
       <svg class="pfx-micro-radial-svg" viewBox="0 0 36 36">
         <circle class="pfx-micro-radial-svg__track" cx="18" cy="18" r="15.9155" />
         <circle class="pfx-micro-radial-svg__bar" cx="18" cy="18" r="15.9155" stroke-dasharray="${dashArray}" transform="rotate(-90 18 18)" />
@@ -633,11 +711,14 @@ function renderHarveyBallVisualizationHtml(visualization, options) {
     const total = visualization.total && visualization.total > 0 ? visualization.total : 100;
     const pct = Math.max(0, Math.min(100, (value / total) * 100));
     const tone = visualization.tone ?? 'info';
+    const isTable = visualization.surface === 'table-cell';
+    const tabIndexAttr = isTable ? '' : ' tabindex="0"';
     const strokeLength = pct * 0.50265;
     const dashArray = `${strokeLength.toFixed(3)} 50.265`;
     const aria = visualization.ariaLabel ?? `${visualization.fallbackText} (${Math.round(pct)}%)`;
+    const harveyReadout = `${formatMicroNumber(value, options.locale)}/${formatMicroNumber(total, options.locale)} (${Math.round(pct)}%)`;
     return `
-    <span class="pfx-micro-viz pfx-micro-viz__harvey" data-tone="${escapeHtml(tone)}" role="img" aria-label="${escapeHtml(aria)}">
+    <span class="pfx-micro-viz pfx-micro-viz__harvey"${tabIndexAttr} data-tone="${escapeHtml(tone)}" data-micro-readout="${escapeHtml(harveyReadout)}" role="img" aria-label="${escapeHtml(aria)}">
       <svg class="pfx-micro-harvey-svg" viewBox="0 0 36 36">
         <circle class="pfx-micro-harvey-svg__track" cx="18" cy="18" r="16" />
         <circle class="pfx-micro-harvey-svg__bar" cx="18" cy="18" r="8" stroke-dasharray="${dashArray}" transform="rotate(-90 18 18)" />
@@ -649,19 +730,57 @@ function renderHarveyBallVisualizationHtml(visualization, options) {
       </span>
     </span>`;
 }
-function getPointsCoordinates(points, width, height, padding) {
+function resolveTrendBounds(points, visualization, anchorZero = false) {
+    const values = points.map((p) => p.value);
+    const refValue = toFiniteNumber(visualization?.target) ?? toFiniteNumber(visualization?.baseline);
+    const explicitMin = toFiniteNumber(visualization?.min);
+    const explicitMax = toFiniteNumber(visualization?.max);
+    const baseCandidates = anchorZero ? [...values, 0] : [...values];
+    if (refValue !== undefined) {
+        baseCandidates.push(refValue);
+    }
+    const minVal = explicitMin !== undefined ? Math.min(explicitMin, ...baseCandidates) : Math.min(...baseCandidates);
+    const maxVal = explicitMax !== undefined ? Math.max(explicitMax, ...baseCandidates) : Math.max(...baseCandidates);
+    const valRange = maxVal - minVal === 0 ? 1 : maxVal - minVal;
+    return { minVal, maxVal, valRange, refValue };
+}
+function getPointsCoordinates(points, width, height, padding, visualization) {
     if (points.length < 2)
         return [];
-    const values = points.map(p => p.value);
-    const minVal = Math.min(...values);
-    const maxVal = Math.max(...values);
-    const valRange = maxVal - minVal === 0 ? 1 : maxVal - minVal;
+    const { minVal, valRange } = resolveTrendBounds(points, visualization, false);
     return points.map((p, index) => {
         const x = padding + (index / (points.length - 1)) * (width - 2 * padding);
         const y = height - padding - ((p.value - minVal) / valRange) * (height - 2 * padding);
         return { x, y };
     });
 }
+function renderTrendReferenceLineHtml(points, width, height, padding, visualization, anchorZero = false) {
+    const { minVal, valRange, refValue } = resolveTrendBounds(points, visualization, anchorZero);
+    if (refValue === undefined) {
+        return '';
+    }
+    const refY = height - padding - ((refValue - minVal) / valRange) * (height - 2 * padding);
+    return `<line class="pfx-micro-trend__ref-line" x1="${padding}" y1="${refY.toFixed(1)}" x2="${width - padding}" y2="${refY.toFixed(1)}" stroke="currentColor" stroke-opacity="0.38" stroke-width="1" stroke-dasharray="2 2" />`;
+}
+function renderTrendScrubLayerHtml(points, coords, width, height, visualization, options) {
+    const defaultTone = visualization.tone ?? 'info';
+    const suffix = visualization.valueSuffix ?? '';
+    const slicesHtml = points
+        .map((point, index) => {
+        const coord = coords[index] ?? { x: 50, y: 15 };
+        const xPct = ((coord.x / width) * 100).toFixed(1);
+        const yPct = ((coord.y / height) * 100).toFixed(1);
+        const pointTone = point.tone ??
+            (visualization.thresholds?.length
+                ? resolvePraxisMicroVisualizationTone(point.value, visualization.thresholds)?.tone ?? defaultTone
+                : defaultTone);
+        const labelPrefix = point.label ? `${point.label}: ` : `#${index + 1}: `;
+        const readout = `${labelPrefix}${formatMicroNumber(point.value, options.locale)}${suffix}`;
+        return `<span class="pfx-micro-trend__scrub-slice" data-tone="${escapeHtml(pointTone)}" data-micro-readout="${escapeHtml(readout)}" style="--pfx-scrub-x:${xPct}%;--pfx-scrub-y:${yPct}%;"></span>`;
+    })
+        .join('');
+    return `<span class="pfx-micro-trend__scrub-layer" aria-hidden="true">${slicesHtml}</span>`;
+}
 function renderLineVisualizationHtml(visualization, options) {
     const points = visualization.points ?? [];
     const tone = visualization.tone ?? 'info';
@@ -671,8 +790,9 @@ function renderLineVisualizationHtml(visualization, options) {
     const width = 100;
     const height = 30;
     const padding = 4;
-    const coords = getPointsCoordinates(points, width, height, padding);
+    const coords = getPointsCoordinates(points, width, height, padding, visualization);
     const pathD = coords.map((c, i) => `${i === 0 ? 'M' : 'L'} ${c.x.toFixed(1)} ${c.y.toFixed(1)}`).join(' ');
+    const refLineHtml = renderTrendReferenceLineHtml(points, width, height, padding, visualization, false);
     // Highlight extreme/boundary values
     let minIdx = 0;
     let maxIdx = 0;
@@ -693,6 +813,7 @@ function renderLineVisualizationHtml(visualization, options) {
         markers.push({ x: coords[maxIdx].x, y: coords[maxIdx].y, tone: points[maxIdx].tone ?? 'success' });
     }
     const circlesHtml = markers.map(c => `<circle cx="${c.x.toFixed(1)}" cy="${c.y.toFixed(1)}" r="2.5" class="pfx-micro-trend__marker" data-tone="${escapeHtml(c.tone)}" />`).join('');
+    const scrubLayerHtml = renderTrendScrubLayerHtml(points, coords, width, height, visualization, options);
     const isTable = visualization.surface === 'table-cell';
     const firstPoint = points[0];
     const lastPoint = points[points.length - 1];
@@ -711,9 +832,11 @@ function renderLineVisualizationHtml(visualization, options) {
       ${leftHtml}
       <span class="pfx-micro-viz pfx-micro-viz__line" data-tone="${escapeHtml(tone)}" role="img" aria-label="${escapeHtml(visualization.ariaLabel ?? visualization.fallbackText)}">
         <svg class="pfx-micro-line__svg" viewBox="0 0 100 30">
+          ${refLineHtml}
           <path class="pfx-micro-line__path" d="${pathD}" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
           ${circlesHtml}
         </svg>
+        ${scrubLayerHtml}
       </span>
       ${rightHtml}
     </span>`;
@@ -727,8 +850,9 @@ function renderAreaVisualizationHtml(visualization, options) {
     const width = 100;
     const height = 30;
     const padding = 4;
-    const coords = getPointsCoordinates(points, width, height, padding);
+    const coords = getPointsCoordinates(points, width, height, padding, visualization);
     const lineD = coords.map((c, i) => `${i === 0 ? 'M' : 'L'} ${c.x.toFixed(1)} ${c.y.toFixed(1)}`).join(' ');
+    const refLineHtml = renderTrendReferenceLineHtml(points, width, height, padding, visualization, false);
     const firstX = coords[0].x.toFixed(1);
     const lastX = coords[coords.length - 1].x.toFixed(1);
     const areaD = `${lineD} L ${lastX} ${height} L ${firstX} ${height} Z`;
@@ -752,6 +876,7 @@ function renderAreaVisualizationHtml(visualization, options) {
         markers.push({ x: coords[maxIdx].x, y: coords[maxIdx].y, tone: points[maxIdx].tone ?? 'success' });
     }
     const circlesHtml = markers.map(c => `<circle cx="${c.x.toFixed(1)}" cy="${c.y.toFixed(1)}" r="2.5" class="pfx-micro-trend__marker" data-tone="${escapeHtml(c.tone)}" />`).join('');
+    const scrubLayerHtml = renderTrendScrubLayerHtml(points, coords, width, height, visualization, options);
     const isTable = visualization.surface === 'table-cell';
     const firstPoint = points[0];
     const lastPoint = points[points.length - 1];
@@ -770,10 +895,12 @@ function renderAreaVisualizationHtml(visualization, options) {
       ${leftHtml}
       <span class="pfx-micro-viz pfx-micro-viz__area" data-tone="${escapeHtml(tone)}" role="img" aria-label="${escapeHtml(visualization.ariaLabel ?? visualization.fallbackText)}">
         <svg class="pfx-micro-area__svg" viewBox="0 0 100 30">
+          ${refLineHtml}
           <path class="pfx-micro-area__fill" d="${areaD}" fill="currentColor" fill-opacity="0.15" />
           <path class="pfx-micro-area__path" d="${lineD}" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
           ${circlesHtml}
         </svg>
+        ${scrubLayerHtml}
       </span>
       ${rightHtml}
     </span>`;
@@ -787,21 +914,22 @@ function renderColumnVisualizationHtml(visualization, options) {
     const width = 100;
     const height = 30;
     const padding = 4;
-    const values = points.map(p => p.value);
-    const maxVal = Math.max(...values, 0);
-    const minVal = Math.min(...values, 0);
-    const valRange = maxVal - minVal === 0 ? 1 : maxVal - minVal;
+    const { minVal, valRange } = resolveTrendBounds(points, visualization, true);
+    const refLineHtml = renderTrendReferenceLineHtml(points, width, height, padding, visualization, true);
     const colWidth = Math.max(2, (width - 2 * padding) / points.length - 2);
+    const colCoords = [];
     const columnsHtml = points.map((p, i) => {
         const x = padding + i * ((width - 2 * padding) / points.length) + 1;
         const rectHeight = Math.max(2, ((p.value - minVal) / valRange) * (height - 2 * padding));
         const rectY = height - padding - rectHeight;
+        colCoords.push({ x: x + colWidth / 2, y: rectY });
         const itemTone = p.tone ??
             (visualization.thresholds?.length
                 ? resolvePraxisMicroVisualizationTone(p.value, visualization.thresholds)?.tone ?? tone
                 : tone);
-        return `<rect class="pfx-micro-column__bar" x="${x.toFixed(1)}" y="${rectY.toFixed(1)}" width="${colWidth.toFixed(1)}" height="${rectHeight.toFixed(1)}" fill="currentColor" data-tone="${escapeHtml(itemTone)}" />`;
+        return `<rect class="pfx-micro-column__bar" x="${x.toFixed(1)}" y="${rectY.toFixed(1)}" width="${colWidth.toFixed(1)}" height="${rectHeight.toFixed(1)}" rx="1" fill="currentColor" data-tone="${escapeHtml(itemTone)}" />`;
     }).join('');
+    const scrubLayerHtml = renderTrendScrubLayerHtml(points, colCoords, width, height, visualization, options);
     const isTable = visualization.surface === 'table-cell';
     const firstPoint = points[0];
     const lastPoint = points[points.length - 1];
@@ -821,7 +949,9 @@ function renderColumnVisualizationHtml(visualization, options) {
       <span class="pfx-micro-viz pfx-micro-viz__column" data-tone="${escapeHtml(tone)}" role="img" aria-label="${escapeHtml(visualization.ariaLabel ?? visualization.fallbackText)}">
         <svg class="pfx-micro-column__svg" viewBox="0 0 100 30">
           ${columnsHtml}
+          ${refLineHtml}
         </svg>
+        ${scrubLayerHtml}
       </span>
       ${rightHtml}
     </span>`;
@@ -851,14 +981,23 @@ function renderProcessFlowVisualizationHtml(visualization, options) {
         const isLast = index === items.length - 1;
         const itemLabel = stepLabels[index];
         const label = !isTable && item.label ? `<span class="pfx-micro-step__label"${labelInlineStyle}>${escapeHtml(item.label)}</span>` : '';
+        const isActiveStep = itemState === 'active' ||
+            itemState === 'current' ||
+            itemState === 'in_progress' ||
+            item.icon === 'sync' ||
+            item.icon === 'pending' ||
+            item.icon === 'pending_actions' ||
+            item.icon === 'schedule' ||
+            (!itemState && itemTone === 'warning');
+        const stepReadout = `${index + 1}/${items.length} · ${itemLabel}`;
         const connector = !isLast ? `<span class="pfx-micro-step__connector" data-tone="${escapeHtml(itemTone)}"></span>` : '';
         const stepCircle = `
-      <span class="pfx-micro-step__node" data-tone="${escapeHtml(itemTone)}" aria-hidden="true">
+      <span class="pfx-micro-step__node" data-tone="${escapeHtml(itemTone)}"${isActiveStep ? ' data-active="true"' : ''} aria-hidden="true">
         ${item.icon ? `<span class="material-icons pfx-micro-step__icon" aria-hidden="true">${escapeHtml(item.icon)}</span>` : `${index + 1}`}
       </span>`;
         return `
       <div class="pfx-micro-step" data-state="${escapeHtml(itemState)}" data-tone="${escapeHtml(itemTone)}">
-        <div class="pfx-micro-step__node-wrapper" title="${escapeHtml(itemLabel)}">
+        <div class="pfx-micro-step__node-wrapper" data-micro-readout="${escapeHtml(stepReadout)}" title="${escapeHtml(itemLabel)}">
           ${stepCircle}
           ${label}
         </div>
@@ -2015,10 +2154,14 @@ class SchemaNormalizationKernel {
             out.maxLength = Number(ui.maxLength);
         if (ui.maxLengthMessage !== undefined)
             out.maxLengthMessage = ui.maxLengthMessage;
-        if (ui.min !== undefined)
-            out.min = Number(ui.min);
-        if (ui.max !== undefined)
-            out.max = Number(ui.max);
+        if (ui.min !== undefined) {
+            const parsedMin = Number(ui.min);
+            out.min = Number.isFinite(parsedMin) ? parsedMin : String(ui.min).trim();
+        }
+        if (ui.max !== undefined) {
+            const parsedMax = Number(ui.max);
+            out.max = Number.isFinite(parsedMax) ? parsedMax : String(ui.max).trim();
+        }
         if (ui.minMessage !== undefined)
             out.minMessage = ui.minMessage;
         if (ui.maxMessage !== undefined)
@@ -2155,14 +2298,18 @@ class SchemaNormalizationKernel {
         return ['number', 'integer', 'int', 'float', 'double', 'decimal'].includes(token);
     }
     resolveNumericFormatToken(prop, ui, resolvedType) {
+        if (ui?.numberFormat?.percentage === true || ui?.['numberFormat.percentage'] === true) {
+            return 'percent';
+        }
+        const explicitUiFormat = this.resolveNonEmptyStringToken(ui?.numericFormat, ui?.numberFormat?.style, ui?.['numberFormat.style']);
+        if (explicitUiFormat) {
+            return explicitUiFormat;
+        }
         const typeToken = resolvedType ?? prop?.type;
         if (!this.isNumericSchemaType(typeToken)) {
             return undefined;
         }
-        if (ui?.numberFormat?.percentage === true || ui?.['numberFormat.percentage'] === true) {
-            return 'percent';
-        }
-        return this.resolveNonEmptyStringToken(ui?.numericFormat, ui?.format, ui?.numberFormat?.style, ui?.['numberFormat.style'], prop?.format);
+        return this.resolveNonEmptyStringToken(ui?.format, prop?.format);
     }
     /**
      * Converte o schema bruto do backend (OpenAPI + x-ui) em FieldDefinition[] tipado.
@@ -2530,10 +2677,22 @@ class SchemaNormalizationKernel {
                 field.numericStep = Number(ui.numericStep);
             }
             if (ui.numericMin !== undefined) {
-                field.numericMin = Number(ui.numericMin);
+                const parsedMin = Number(ui.numericMin);
+                if (Number.isFinite(parsedMin)) {
+                    field.numericMin = parsedMin;
+                }
+                else if (field.min === undefined && String(ui.numericMin).trim().length > 0) {
+                    field.min = String(ui.numericMin).trim();
+                }
             }
             if (ui.numericMax !== undefined) {
-                field.numericMax = Number(ui.numericMax);
+                const parsedMax = Number(ui.numericMax);
+                if (Number.isFinite(parsedMax)) {
+                    field.numericMax = parsedMax;
+                }
+                else if (field.max === undefined && String(ui.numericMax).trim().length > 0) {
+                    field.max = String(ui.numericMax).trim();
+                }
             }
             if (ui.numericMaxLength !== undefined) {
                 field.numericMaxLength = Number(ui.numericMaxLength);
@@ -2541,6 +2700,145 @@ class SchemaNormalizationKernel {
             if (ui.buttons !== undefined) {
                 field.buttons = this.parseButtons(ui.buttons);
             }
+            // -------------------------------------------------------------------
+            // Inline filter and specialized control metadata (x-ui)
+            // -------------------------------------------------------------------
+            const inlinePassThroughKeys = [
+                'prefixIcon',
+                'suffixIcon',
+                'prefixIconColor',
+                'suffixIconColor',
+                'chipLeadingIcon',
+                'chipTrailingIcon',
+                'chipLeadingIconColor',
+                'chipTrailingIconColor',
+                'clearIcon',
+                'clearIconColor',
+                'showQuickClear',
+                'clearable',
+                'inlineAutoSize',
+                'inlineAutoSizeMaxPx',
+                'inlineAutoSizeMaxVw',
+                'inlineOverlay',
+                'inlineChipDisplay',
+                'inlineChipSummaryTemplate',
+                'inlineChipUnitLabel',
+                'inlinePanelTitle',
+                'inlineQuickPresets',
+                'inlineQuickPresetsApplyMode',
+                'inlineTexts',
+                'shortcuts',
+                'showShortcuts',
+                'quickPresets',
+                'quickPresetsAuto',
+                'quickPresetsLabels',
+                'granularity',
+                'defaultGranularity',
+                'selectionGrid',
+                'showSlider',
+                'showInputs',
+                'minPeriod',
+                'maxPeriod',
+                'minYear',
+                'maxYear',
+                'minTime',
+                'maxTime',
+                'stepMinutes',
+                'startField',
+                'endField',
+                'startLabel',
+                'endLabel',
+                'startPlaceholder',
+                'endPlaceholder',
+                'inputMinLabel',
+                'inputMaxLabel',
+                'maxVisibleChips',
+                'maxVisibleBadges',
+                'showSelectAll',
+                'selectAllLabel',
+                'clearSelectionLabel',
+                'searchPlaceholder',
+                'noResultsText',
+                'allowSelectAll',
+                'governedPaletteRef',
+                'palette',
+                'paletteColors',
+                'paletteSettings',
+                'documentType',
+                'version',
+                'nodes',
+                'nodeIdField',
+                'parentIdField',
+                'childrenField',
+                'lazyLoad',
+                'marks',
+                'semanticBands',
+                'distribution',
+                'discrete',
+                'showTicks',
+                'trueLabel',
+                'falseLabel',
+                'currencyCode',
+                'locale',
+                'precision',
+                'rangeMode',
+                'maxRating',
+                'allowHalf',
+                'ratingIcon',
+                'ratingEmptyIcon',
+                'ratingHalfIcon',
+                'ratingTone',
+                'ratingToneColors',
+                'ratingLabels',
+                'distanceUnit',
+                'distanceBaseUnit',
+                'distanceUnits',
+                'distanceAllowUnitToggle',
+                'distanceUnitLabels',
+                'distanceDisplayDecimals',
+                'distanceDecimalsKm',
+                'distanceDecimalsMi',
+                'distancePresets',
+                'distanceSubtitle',
+                'distanceRadialRings',
+                'distanceAccentColor',
+                'distanceRingColor',
+                'distanceTrackColor',
+                'distanceGlowColor',
+                'distanceGradientLowColor',
+                'distanceGradientMidColor',
+                'distanceGradientHighColor',
+                'distanceRangeBandOpacity',
+                'pipelineOptions',
+                'pipelineColors',
+                'pipelineTexts',
+                'scoreBands',
+                'priorityBands',
+                'severityBands',
+                'scorePalette',
+                'scoreTexts',
+                'relativePeriodOptions',
+                'relativePeriodPresets',
+                'relativePeriodTexts',
+                'sentimentOptions',
+                'sentimentPalette',
+                'sentimentTexts',
+                'colorLabelOptions',
+                'colorLabelPalette',
+                'colorLabelTexts',
+                'timeOptions',
+                'inlineTimeQuickPresets',
+                'inlineVisualStyle',
+                'percentPresets',
+                'numberFormat',
+                'valueLabelFormat',
+                'scale',
+            ];
+            for (const key of inlinePassThroughKeys) {
+                if (ui[key] !== undefined && field[key] === undefined) {
+                    field[key] = ui[key];
+                }
+            }
             fields.push(field);
         }
         if (fields.length === 0 &&
@@ -2587,7 +2885,21 @@ class SchemaNormalizationKernel {
         }
         // Compatibilidade para schemas de range publicados como oneOf(array|object).
         const controlToken = String(ui?.controlType || '').trim().toLowerCase().replace(/[^a-z0-9]/g, '');
-        const isRangeControl = ['daterange', 'datetimerange', 'rangeslider', 'pricerange'].includes(controlToken);
+        const isRangeControl = [
+            'daterange',
+            'datetimerange',
+            'rangeslider',
+            'pricerange',
+            'inlinerange',
+            'inlinecurrencyrange',
+            'inlinedaterange',
+            'inlineperiodrange',
+            'inlineyearrange',
+            'inlinemonthrange',
+            'inlinetimerange',
+            'inlinedistanceradius',
+            'inlinescorepriority',
+        ].includes(controlToken);
         if (isRangeControl && nonNullTypes.includes('array')) {
             return 'array';
         }