@fasl-work/caos-app-shell 0.19.0 → 0.19.2

package/dist/chart.js

@@ -1,5 +1,5 @@
-import { pick, placeXLabel, placeYLabel, useShellLang, useThemeStore, useStageSize, defaultChartName, axisTitleFits, resolveToken, DRAG_THRESHOLD, sameData, NBSP, formatNumber, thinRows, chartSummary, referenceLineName, ZOOM_HINT, CHART_ROLE, ChartSummary, ChartDataTable, ResetZoomButton, formatTicks, countOverlaps, isZoomed, formatTime, keyAction, KEY_PAN, KEY_ZOOM, firstVisible, stepIndex, wheelFactor, pinchState, repeatedLabels, panRange, zoomRange, revealValue, brushRange, leastLabelSpan, MIN_SPAN_SHARE } from './chunk-3LONJM5B.js';
-export { referenceLineName, repeatedLabels } from './chunk-3LONJM5B.js';
+import { pick, placeXLabel, placeYLabel, useShellLang, useThemeStore, useStageSize, defaultChartName, axisTitleFits, resolveToken, dateNames, DRAG_THRESHOLD, sameData, NBSP, formatNumber, thinRows, chartSummary, referenceLineName, ZOOM_HINT, CHART_ROLE, ChartSummary, ChartDataTable, ResetZoomButton, formatTicks, countOverlaps, isZoomed, formatTime, keyAction, KEY_PAN, KEY_ZOOM, firstVisible, stepIndex, wheelFactor, pinchState, repeatedLabels, panRange, zoomRange, revealValue, brushRange, leastLabelSpan, MIN_SPAN_SHARE } from './chunk-FXPSZD6X.js';
+export { referenceLineName, repeatedLabels } from './chunk-FXPSZD6X.js';
 import './chunk-33WTUQ7Q.js';
 import { useRef, useCallback, useState, useId, useEffect, useMemo } from 'react';
 import uPlot from 'uplot';
@@ -672,6 +672,8 @@ function UPlotChart({ x, y, series, marks, yMarks, onYMarkChange, height = 280,
     const opts = {
       width,
       height: h,
+      // the month and weekday names of a time axis in the page language: uPlot's own are English (0.19.1, SHC-099)
+      ...x.time ? { fmtDate: /* @__PURE__ */ ((names) => (tpl) => uPlot.fmtDate(tpl, names))(dateNames(lang)) } : {},
       legend: { show: false },
       cursor: {
         ...scatter ? { dataIdx: (u2, sIdx, closest) => sIdx === 0 ? closest : nearest(u2) ?? closest } : {},

package/dist/{chunk-3LONJM5B.js → chunk-FXPSZD6X.js}

@@ -536,6 +536,12 @@ function leastLabelSpan(fmt, full, plotPx, spacePx) {
   return res * (Math.ceil(Math.max(0, plotPx) / Math.max(1, spacePx)) + 1) / scale;
 }
 var SCIENTIFIC_FLOOR = 1e-4;
+function dateNames(lang) {
+  const locale = lang === "es" ? "es-CL" : "en-US";
+  const month = (style) => Array.from({ length: 12 }, (_, m) => new Intl.DateTimeFormat(locale, { month: style, timeZone: "UTC" }).format(new Date(Date.UTC(2024, m, 15))));
+  const weekday = (style) => Array.from({ length: 7 }, (_, d) => new Intl.DateTimeFormat(locale, { weekday: style, timeZone: "UTC" }).format(new Date(Date.UTC(2024, 8, 1 + d))));
+  return { MMMM: month("long"), MMM: month("short"), WWWW: weekday("long"), WWW: weekday("short") };
+}
 function formatTime(seconds, lang, spanSeconds) {
   const short = spanSeconds < 3 * 86400;
   const opts = short ? { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" } : { year: "numeric", month: "short", day: "numeric" };
@@ -677,4 +683,4 @@ function placeYLabel(text, s) {
   return null;
 }
 
-export { CHART_ROLE, ChartDataTable, ChartSummary, DRAG_THRESHOLD, GROUP_MARGIN, KEY_PAN, KEY_ZOOM, MIN_SPAN_SHARE, NBSP, NOT_AVAILABLE, ResetZoomButton, SCIENTIFIC_BELOW, SHELL_TOKENS, Stage, ZOOM_HINT, allIntegers, applyTheme, axisTitleFits, bandsOf, barExtent, brushRange, brushWindow, categoryAt, chartSummary, clipExtent, countOverlaps, defaultChartName, firstVisible, fitLabel, fontFamily, formatNumber, formatTicks, formatTime, isZoomed, keyAction, leastLabelSpan, memberAt, memberSlots, niceStep, niceTicks, panRange, pick, pinchState, placeXLabel, placeYLabel, readTheme, referenceLineName, repeatedLabels, resolveToken, revealValue, roundWindow, sameData, stepIndex, stepWindow, textWidth, thinRows, unusedLegendTones, useFormat, useLangStore, useShellLang, useStageSize, useThemeStore, useThemeTokens, wheelFactor, widestLabel, windowRange, windowZoomed, wrapLines, zoomRange };
+export { CHART_ROLE, ChartDataTable, ChartSummary, DRAG_THRESHOLD, GROUP_MARGIN, KEY_PAN, KEY_ZOOM, MIN_SPAN_SHARE, NBSP, NOT_AVAILABLE, ResetZoomButton, SCIENTIFIC_BELOW, SHELL_TOKENS, Stage, ZOOM_HINT, allIntegers, applyTheme, axisTitleFits, bandsOf, barExtent, brushRange, brushWindow, categoryAt, chartSummary, clipExtent, countOverlaps, dateNames, defaultChartName, firstVisible, fitLabel, fontFamily, formatNumber, formatTicks, formatTime, isZoomed, keyAction, leastLabelSpan, memberAt, memberSlots, niceStep, niceTicks, panRange, pick, pinchState, placeXLabel, placeYLabel, readTheme, referenceLineName, repeatedLabels, resolveToken, revealValue, roundWindow, sameData, stepIndex, stepWindow, textWidth, thinRows, unusedLegendTones, useFormat, useLangStore, useShellLang, useStageSize, useThemeStore, useThemeTokens, wheelFactor, widestLabel, windowRange, windowZoomed, wrapLines, zoomRange };

package/dist/index.js

@@ -1,5 +1,5 @@
-import { useThemeStore, useShellLang, useLangStore, SHELL_TOKENS, pick, useStageSize, barExtent, clipExtent, allIntegers, bandsOf, windowRange, windowZoomed, unusedLegendTones, NOT_AVAILABLE, formatNumber, widestLabel, fitLabel, GROUP_MARGIN, axisTitleFits, wrapLines, formatTicks, niceTicks, textWidth, repeatedLabels, chartSummary, NBSP, CHART_ROLE, ChartSummary, ChartDataTable, ResetZoomButton, memberSlots, wheelFactor, pinchState, DRAG_THRESHOLD, panRange, brushWindow, keyAction, KEY_ZOOM, stepIndex, KEY_PAN, stepWindow, roundWindow, zoomRange, categoryAt, memberAt } from './chunk-3LONJM5B.js';
-export { NBSP, NOT_AVAILABLE, SCIENTIFIC_BELOW, SHELL_TOKENS, Stage, applyTheme, fitLabel, fontFamily, formatNumber, formatTicks, niceStep, niceTicks, pick, readTheme, resolveToken, textWidth, useFormat, useLangStore, useShellLang, useStageSize, useThemeStore, useThemeTokens, widestLabel } from './chunk-3LONJM5B.js';
+import { useThemeStore, useShellLang, useLangStore, SHELL_TOKENS, pick, useStageSize, barExtent, clipExtent, allIntegers, bandsOf, windowRange, windowZoomed, unusedLegendTones, NOT_AVAILABLE, formatNumber, widestLabel, fitLabel, GROUP_MARGIN, axisTitleFits, wrapLines, formatTicks, niceTicks, textWidth, repeatedLabels, chartSummary, NBSP, CHART_ROLE, ChartSummary, ChartDataTable, ResetZoomButton, memberSlots, wheelFactor, pinchState, DRAG_THRESHOLD, panRange, brushWindow, keyAction, KEY_ZOOM, stepIndex, KEY_PAN, stepWindow, roundWindow, zoomRange, categoryAt, memberAt } from './chunk-FXPSZD6X.js';
+export { NBSP, NOT_AVAILABLE, SCIENTIFIC_BELOW, SHELL_TOKENS, Stage, applyTheme, fitLabel, fontFamily, formatNumber, formatTicks, niceStep, niceTicks, pick, readTheme, resolveToken, textWidth, useFormat, useLangStore, useShellLang, useStageSize, useThemeStore, useThemeTokens, widestLabel } from './chunk-FXPSZD6X.js';
 import { APP_ROUTE, LANDING_ROUTE } from './chunk-33WTUQ7Q.js';
 export { APP_ROUTE, LANDING_ROUTE, LANG_STORAGE_KEY, STANDARD_ROUTES, THEME_BOOT_SCRIPT, THEME_STORAGE_KEY } from './chunk-33WTUQ7Q.js';
 import { createContext, Component, useState, useRef, useId, useEffect, useLayoutEffect, useCallback, useContext, useMemo, Children, isValidElement } from 'react';

package/gate/inpage.mjs

@@ -890,7 +890,7 @@ export function installLib() {
     }
     // the document is scrolled so the element shows below a header stuck at the top of the viewport (0.8.0: the
     // sticky header sticks in a scrolling document since known shell defect 26 was fixed)
-    const cover = el.closest('header, [role="banner"]') ? 0 : stuckTop();
+    const cover = coverFor(el);
     const r = el.getBoundingClientRect();
     if (r.top < cover || r.bottom > window.innerHeight) winScroll(window.scrollX, window.scrollY + r.top + r.height / 2 - (cover + (window.innerHeight - cover) / 2));
     const r2 = el.getBoundingClientRect();
@@ -918,8 +918,19 @@ export function installLib() {
     return bottom;
   }
 
+  /** A link inside a static section <header> is still covered by the sticky site header above it. */
+  function coverFor(el) {
+    const header = el.closest('header, [role="banner"]');
+    if (header) {
+      const style = getComputedStyle(header);
+      const rect = header.getBoundingClientRect();
+      if ((style.position === 'sticky' || style.position === 'fixed') && rect.top <= 1 && rect.bottom > 0) return 0;
+    }
+    return stuckTop();
+  }
+
   const visibleArea = (el) => {
-    const area = { left: 0, top: el.closest('header, [role="banner"]') ? 0 : stuckTop(), right: window.innerWidth, bottom: window.innerHeight };
+    const area = { left: 0, top: coverFor(el), right: window.innerWidth, bottom: window.innerHeight };
     for (let a = el.parentElement; a && a !== document.body && a !== document.documentElement; a = a.parentElement) {
       const s = getComputedStyle(a);
       if (s.overflowX === 'visible' && s.overflowY === 'visible') continue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fasl-work/caos-app-shell",
-  "version": "0.19.0",
+  "version": "0.19.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

@@ -705,6 +705,15 @@ svg.lucide { flex: none; }
   .caos-views-row > *, .caos-views-row > .caos-plot.fill { flex: none; }
   .caos-plot.fill > .caos-plot-body { flex: none; height: clamp(260px, 48vh, 440px); }
   .caos-plot.fill > .caos-plot-note { max-height: none; overflow-y: visible; }
+  /* A filling card whose body holds flowing content takes the height of that content instead of the clamp, and what is wider
+     than the card scrolls sideways inside the body, never cut at its edge (0.19.1, SHC-100). Flowing content is a table that
+     is the body's own child, or any element the product marks `data-caos-flow` (a stack of a drawing and its tables, a long
+     table in a scroll box, panels of small multiples): content that sets its own heights, which the clamp and its hidden
+     overflow cut (CAOS_Contraste U16-R2b: whole tables and their right columns lost at 390 px). A drawing alone keeps the clamp. */
+  .caos-plot.fill > .caos-plot-body:has(> .caos-table, [data-caos-flow]) { height: auto; overflow-x: auto; overflow-y: visible; }
+  /* An equation wider than the phone scrolls in its box (above); its right edge fades and the box keeps a gap after the last
+     symbol, so the cut reads as more to scroll to and, scrolled to the end, the last symbol is whole (0.19.1, SHC-100). */
+  .equation { padding-right: 1.5rem; mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent); }
 }
 @media (max-width: 760px) {
   /* A phone wraps the cells instead of pushing the table past the page (found by the gate on the template). */