@fasl-work/caos-app-shell 0.9.0 → 0.9.2

package/dist/chart.d.ts

@@ -68,6 +68,17 @@ declare function parityRange(...arrays: readonly (readonly (number | null)[])[])
  * by significant digits has no fixed resolution, and `data-ticks-repeat` reports what it does.
  */
 declare function tickSteps(fmt: FormatOptions | undefined): number[] | undefined;
+/**
+ * uPlot ticks a log axis at 1 to 9 times every power of ten, from a precision table that ends near 1e-22: a log axis
+ * that reaches below it throws "Invalid array length" after stalling the page, and the chart is never drawn (known
+ * shell defect 31, p-values of 1e-124 in CAOS_Contraste, 2026-10-07). Below this floor the axis ticks at powers of ten
+ * only (`logDecades`), each one labelled.
+ */
+declare const LOG_TABLE_FLOOR = 1e-22;
+/** The powers of ten within [min, max], thinned to at most `most` (every k-th decade, the top one kept). */
+declare function logDecades(min: number, max: number, most?: number): number[];
+/** The smallest positive value among columns of values and the lower end of a fixed range; Infinity if none. */
+declare function smallestPositive(columns: readonly (readonly (number | null)[])[], range?: readonly [number, number] | null): number;
 /** How many tick labels repeat the label before them (empty labels apart); the gate fails a chart with any (G6). */
 declare function repeatedLabels(labels: readonly (string | null | undefined)[]): number;
 /**
@@ -98,4 +109,4 @@ declare function drawMarks(u: uPlot, marks: {
  */
 declare function UPlotChart({ x, y, series, marks, height, onCursor, onPick, parity }: UPlotChartProps): react.JSX.Element;
 
-export { type ChartAxis, type ChartSeries, UPlotChart, type UPlotChartProps, drawMarks, parityRange, repeatedLabels, seriesStyle, sortOrder, tickSteps };
+export { type ChartAxis, type ChartSeries, LOG_TABLE_FLOOR, UPlotChart, type UPlotChartProps, drawMarks, logDecades, parityRange, repeatedLabels, seriesStyle, smallestPositive, sortOrder, tickSteps };

package/dist/chart.js

@@ -37,6 +37,26 @@ function tickSteps(fmt) {
   const res = 10 ** -fmt.decimals / (fmt.percent ? 100 : 1);
   return STEPS.filter((s) => s >= res * (1 - 1e-9) && Math.abs(s / res - Math.round(s / res)) < 1e-6);
 }
+var LOG_TABLE_FLOOR = 1e-22;
+function logDecades(min, max, most = 8) {
+  if (!(min > 0) || !(max > 0) || !Number.isFinite(min) || !Number.isFinite(max) || max < min) return [];
+  const a = Math.ceil(Math.log10(min) - 1e-9);
+  const b = Math.floor(Math.log10(max) + 1e-9);
+  if (b < a) return [];
+  const step = Math.max(1, Math.ceil((b - a + 1) / most));
+  const out = [];
+  for (let k = b; k >= a; k -= step) out.unshift(Number(`1e${k}`));
+  return out;
+}
+function smallestPositive(columns, range) {
+  let lo = range && range[0] > 0 ? range[0] : Infinity;
+  for (const c of columns) for (const v of c) if (v !== null && Number.isFinite(v) && v > 0 && v < lo) lo = v;
+  return lo;
+}
+var DECADE_AXIS = {
+  splits: (_u, _i, min, max) => logDecades(min, max),
+  filter: (_u, splits) => splits
+};
 function repeatedLabels(labels) {
   let n = 0;
   for (let i = 1; i < labels.length; i++) if (labels[i] && labels[i] === labels[i - 1]) n++;
@@ -110,16 +130,23 @@ function UPlotChart({ x, y, series, marks, height = 280, onCursor, onPick, parit
   const xs = useMemo(() => order ? order.map((i) => x.values[i]) : x.values, [order, x.values]);
   const ys = useMemo(() => series.map((s) => order ? order.map((i) => s.values[i] ?? null) : s.values), [order, series]);
   const range = useMemo(() => parity ? parityRange(xs, ...ys) : null, [parity, xs, ys]);
+  const tiny = useMemo(
+    () => ({
+      x: Boolean(x.log) && smallestPositive([xs], range) < LOG_TABLE_FLOOR,
+      y: Boolean(y.log) && smallestPositive(ys, range ?? y.range) < LOG_TABLE_FLOOR
+    }),
+    [x.log, y.log, xs, ys, range, y.range]
+  );
   const xLabel = pick(x.label, lang);
   const yLabel = pick(y.label, lang);
   const xUnit = x.unit ? pick(x.unit, lang) : "";
   const yUnit = y.unit ? pick(y.unit, lang) : "";
   const structure = JSON.stringify({
     s: series.map((s, i) => [pick(s.label, lang), seriesStyle(s, i), s.width ?? 2, s.mode ?? "line"]),
-    x: [xLabel, xUnit, Boolean(x.time), Boolean(x.log), x.format ?? null],
+    x: [xLabel, xUnit, Boolean(x.time), Boolean(x.log), x.format ?? null, tiny.x],
     p: range,
     pick: Boolean(onPick),
-    y: [yLabel, yUnit, Boolean(y.log), y.range ?? null, y.format ?? null],
+    y: [yLabel, yUnit, Boolean(y.log), y.range ?? null, y.format ?? null, tiny.y],
     m: (marks ?? []).map((m) => [m.x, pick(m.label, lang)]),
     theme,
     lang,
@@ -168,7 +195,8 @@ function UPlotChart({ x, y, series, marks, height = 280, onCursor, onPick, parit
           label: xUnit ? `${xLabel} (${xUnit})` : xLabel,
           labelFont: font,
           values: x.time ? void 0 : tick(x.format, "x"),
-          ...xSteps ? { incrs: xSteps } : {}
+          ...xSteps ? { incrs: xSteps } : {},
+          ...tiny.x ? DECADE_AXIS : {}
         },
         {
           stroke: fg,
@@ -179,6 +207,7 @@ function UPlotChart({ x, y, series, marks, height = 280, onCursor, onPick, parit
           labelFont: font,
           values: tick(y.format, "y"),
           ...ySteps ? { incrs: ySteps } : {},
+          ...tiny.y ? DECADE_AXIS : {},
           // Sized to the longest tick label. uPlot draws in device pixels with a font scaled by its pixel ratio, so the
           // label is measured in that font and divided back (measuring the unscaled font and dividing by the ratio
           // made the axis too narrow on every high-density screen; the gate runs at ratio 1 and never saw it).
@@ -282,4 +311,4 @@ function UPlotChart({ x, y, series, marks, height = 280, onCursor, onPick, parit
   );
 }
 
-export { UPlotChart, drawMarks, parityRange, repeatedLabels, seriesStyle, sortOrder, tickSteps };
+export { LOG_TABLE_FLOOR, UPlotChart, drawMarks, logDecades, parityRange, repeatedLabels, seriesStyle, smallestPositive, sortOrder, tickSteps };

package/gate/inpage.mjs

@@ -531,20 +531,27 @@ export function installLib() {
   // ---- 0.8.0 measures ----------------------------------------------------------------------------------------
 
   /** The part of the page the ancestors of an element let it show when they CUT their content (overflow hidden or
-   * clip). A scroll container does not cut (a reader scrolls it), and neither does the viewport. */
+   * clip). A scroll container does not cut (a reader scrolls it), and neither does the viewport; and what lies beyond
+   * the first scroll container on an axis is a matter of scroll position, so the walk stops there on that axis (0.9.1:
+   * the contained `.app-shell`, viewport-high with its overflow hidden, read every documentation figure below the fold
+   * as "outside the drawing"). */
   const cutArea = (el) => {
     const area = { left: -Infinity, top: -Infinity, right: Infinity, bottom: Infinity };
-    for (let a = el.parentElement; a && a !== document.body && a !== document.documentElement; a = a.parentElement) {
+    let x = true;
+    let y = true;
+    for (let a = el.parentElement; a && a !== document.body && a !== document.documentElement && (x || y); a = a.parentElement) {
       const s = getComputedStyle(a);
       const ar = a.getBoundingClientRect();
-      if (s.overflowX === 'hidden' || s.overflowX === 'clip') {
+      if (x && (s.overflowX === 'hidden' || s.overflowX === 'clip')) {
         area.left = Math.max(area.left, ar.left);
         area.right = Math.min(area.right, ar.right);
       }
-      if (s.overflowY === 'hidden' || s.overflowY === 'clip') {
+      if (y && (s.overflowY === 'hidden' || s.overflowY === 'clip')) {
         area.top = Math.max(area.top, ar.top);
         area.bottom = Math.min(area.bottom, ar.bottom);
       }
+      if (s.overflowX === 'auto' || s.overflowX === 'scroll') x = false;
+      if (s.overflowY === 'auto' || s.overflowY === 'scroll') y = false;
     }
     return area;
   };
@@ -719,6 +726,29 @@ export function installLib() {
     for (let i = layers.length - 1; i >= 0; i -= 1) base = over(layers[i], base);
     return base;
   };
+  /** The colour an SVG text element is painted on: the last filled shape painted before it whose box holds its centre. */
+  const svgBackdrop = (text, page) => {
+    const svg = text.closest('svg');
+    if (!svg) return page;
+    const r = text.getBoundingClientRect();
+    const cx = r.left + r.width / 2;
+    const cy = r.top + r.height / 2;
+    let found = null;
+    for (const shape of svg.querySelectorAll('rect, circle, ellipse, polygon, path')) {
+      if (!(shape.compareDocumentPosition(text) & Node.DOCUMENT_POSITION_FOLLOWING)) continue;
+      const ss = getComputedStyle(shape);
+      if (ss.display === 'none' || ss.visibility === 'hidden') continue;
+      const fill = parseColor(ss.fill);
+      if (!fill || fill.a === 0) continue;
+      const b = shape.getBoundingClientRect();
+      if (cx < b.left || cx > b.right || cy < b.top || cy > b.bottom) continue;
+      const a = fill.a * Number(ss.fillOpacity || 1) * opacityOf(shape);
+      if (a <= 0.05) continue;
+      found = { ...fill, a };
+    }
+    return found ? over(found, page) : page;
+  };
+
   const opacityOf = (el) => {
     let o = 1;
     for (let a = el; a; a = a.parentElement) o *= Number(getComputedStyle(a).opacity || 1);
@@ -753,8 +783,12 @@ export function installLib() {
       const fg = parseColor(isSvg ? s.fill : s.color);
       if (!fg) continue;
       const host = isSvg ? el.closest('svg')?.parentElement ?? el : el;
-      const bg = backdrop(host);
-      if (!bg) continue;
+      const page = backdrop(host);
+      if (!page) continue;
+      // SVG text sits on what the drawing painted under it (a label on a bar): the last filled shape before it whose
+      // box holds the text's centre, composited over the page (0.9.1: a marker in the page colour on a red bar read
+      // 1.06:1 against the page)
+      const bg = isSvg ? svgBackdrop(el, page) : page;
       const alpha = fg.a * opacityOf(el);
       const shownColor = over({ ...fg, a: alpha }, bg);
       const l1 = lum(shownColor);
@@ -763,7 +797,7 @@ export function installLib() {
       const px = parseFloat(s.fontSize) || 16;
       const bold = Number(s.fontWeight) >= 700;
       const need = px >= 24 || (bold && px >= 18.66) ? 3 : 4.5;
-      if (ratio + 1e-6 < need) out.push(`${describe(el)}: contrast ${ratio.toFixed(2)}:1, below ${need}:1 (${s.color || s.fill} on rgb(${Math.round(bg.r)}, ${Math.round(bg.g)}, ${Math.round(bg.b)}))`);
+      if (ratio + 1e-6 < need) out.push(`${describe(el)}: contrast ${ratio.toFixed(2)}:1, below ${need}:1 (${isSvg ? s.fill : s.color} on rgb(${Math.round(bg.r)}, ${Math.round(bg.g)}, ${Math.round(bg.b)}))`);
     }
     return out.slice(0, 10);
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fasl-work/caos-app-shell",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "description": "Shared web-app shell, workbench primitives, content primitives, design system and measured gate for the CAOS / Faena public apps (ADR-0016, ADR-0017, ADR-0071).",
   "license": "MIT",
   "author": "Felipe Santibáñez-Leal",

package/styles.css

@@ -56,8 +56,8 @@
   --color-accent-fg: #ffffff;
   --color-accent-soft: #ddf4ff;
   --color-accent-2: #0a7886;
-  --color-magenta: #bf3989;
-  --color-good: #1a7f37;
+  --color-magenta: #b93785;
+  --color-good: #197c36;
   --color-warn: #946300;
   --color-bad: #cf222e;
   --color-shadow: 0 1px 2px rgba(31, 35, 40, 0.06), 0 4px 10px rgba(31, 35, 40, 0.04);