@sybilion/uilib 1.2.26 → 1.3.1

package/src/docs/pages/DriverMapPage.tsx

@@ -1,59 +1,187 @@
 import { useState } from 'react';
 
-import { PageContentSection } from '#uilib/components/ui/Page';
+import { PageColumns, PageContentSection } from '#uilib/components/ui/Page';
 import { Switch } from '#uilib/components/ui/Switch';
+import { DriverCard } from '#uilib/components/widgets/DriverCard';
 import {
   type DriverData,
   DriverMap,
+  getPreciseCoordinates,
 } from '#uilib/components/widgets/DriverMap';
+import { CaretLeft, CaretRight } from '@phosphor-icons/react';
 
 import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
 import { DocsHeaderActions } from '../docsHeaderActions';
 
+/** ISO `YYYY-MM` keys, sorted ascending → series for DriverPerformanceChart. */
+function buildMonthlySeries(
+  seed: number,
+  months: number,
+  drift = 0.15,
+): NonNullable<DriverData['normalized_series']> {
+  const out: NonNullable<DriverData['normalized_series']> = {};
+  const start = new Date('2019-01-01');
+  for (let i = 0; i < months; i++) {
+    const d = new Date(start);
+    d.setMonth(d.getMonth() + i);
+    const key = d.toISOString().slice(0, 7);
+    out[key] =
+      seed + Math.sin(i * 0.35) * 14 + Math.cos(i * 0.11) * 7 + i * drift;
+  }
+  return out;
+}
+
+function DriverPager({
+  drivers,
+  selectedDriver,
+  onSelect,
+}: {
+  drivers: DriverData[];
+  selectedDriver: DriverData | null;
+  onSelect: (d: DriverData | null) => void;
+}) {
+  const index = selectedDriver
+    ? drivers.findIndex(d => d.id === selectedDriver.id)
+    : -1;
+  const total = drivers.length;
+  const safeIndex = index >= 0 ? index : 0;
+  const displayIndex = index >= 0 ? index + 1 : 0;
+
+  const go = (nextIdx: number) => {
+    if (total === 0) {
+      onSelect(null);
+      return;
+    }
+    const wrapped = ((nextIdx % total) + total) % total;
+    onSelect(drivers[wrapped] ?? null);
+  };
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 6,
+        fontSize: 12,
+        color: 'var(--muted-foreground)',
+      }}
+    >
+      <button
+        type="button"
+        aria-label="Previous driver"
+        disabled={total === 0 || !selectedDriver}
+        onClick={() => go(safeIndex - 1)}
+        style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: 4,
+          borderRadius: 6,
+          border: '1px solid var(--border)',
+          background: 'var(--background)',
+          cursor: total && selectedDriver ? 'pointer' : 'default',
+          opacity: total && selectedDriver ? 1 : 0.45,
+        }}
+      >
+        <CaretLeft size={14} />
+      </button>
+      <span
+        aria-live="polite"
+        style={{ minWidth: '2.5rem', textAlign: 'center' }}
+      >
+        {displayIndex}/{total}
+      </span>
+      <button
+        type="button"
+        aria-label="Next driver"
+        disabled={total === 0 || !selectedDriver}
+        onClick={() => go(safeIndex + 1)}
+        style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: 4,
+          borderRadius: 6,
+          border: '1px solid var(--border)',
+          background: 'var(--background)',
+          cursor: total && selectedDriver ? 'pointer' : 'default',
+          opacity: total && selectedDriver ? 1 : 0.45,
+        }}
+      >
+        <CaretRight size={14} />
+      </button>
+    </div>
+  );
+}
+
+// Drivers ordered for pager: long title + USA→World, EU negative + decimal %, Asia positive + large %, global negative.
 const MOCK_DRIVERS: DriverData[] = [
   {
-    id: 'd1',
-    name: 'EU industrial production',
-    region: ['Europe', 'Germany'],
+    id: 'mock-us-world-long-title',
+    name: 'North American manufacturing PMI composite — orders, production, employment, supplier deliveries (SA, quarterly)',
+    region: ['North America', 'United States of America'],
     category: 'Manufacturing',
     isPublic: true,
-    importance: 88,
-    direction: 0.4,
-    lag: '2 month(s)',
-    coordinates: { x: 48, y: 34, continent: 'Europe' },
+    importance: 84.2,
+    direction: 0.55,
+    lag: '1 quarter(s)',
+    coordinates: getPreciseCoordinates('United States of America'),
+    src_region: {
+      name: 'United States of America',
+      coordinates: { x: 0, y: 0 },
+    },
+    tgt_region: {
+      name: 'World',
+      coordinates: { x: 0, y: 0 },
+    },
+    rawImportance: { overall: { mean: 96 } },
+    summary:
+      'U.S. factory activity leads global manufacturing cycles by roughly one quarter: strength here typically coincides with wider world demand, with inventory and orders transmitting across trade links.',
+    normalized_series: buildMonthlySeries(48, 42, 0.22),
   },
   {
-    id: 'd2',
-    name: 'US housing starts',
-    region: ['North America', 'United States of America'],
-    category: 'Housing',
+    id: 'mock-europe-germany-negative',
+    name: 'German industrial orders (domestic + foreign)',
+    region: ['Europe', 'Germany'],
+    category: 'Industrial',
     isPublic: true,
-    importance: 72,
-    direction: -0.2,
-    lag: '1 month(s)',
-    coordinates: { x: 22, y: 36, continent: 'North America' },
+    importance: 81.6,
+    direction: -0.42,
+    lag: '2 month(s)',
+    coordinates: getPreciseCoordinates('Germany'),
+    summary:
+      'New orders in Germany are a timely read on euro-area capex and export pipelines; pullbacks often precede broader EU production softness before PMI surveys fully reflect the turn.',
+    normalized_series: buildMonthlySeries(62, 42, -0.12),
   },
   {
-    id: 'd3',
-    name: 'Japan export volumes',
+    id: 'mock-asia-japan-positive',
+    name: 'Japan machinery orders (core private-sector ex. ships)',
     region: ['Asia', 'Japan'],
-    category: 'Trade',
+    category: 'market',
     isPublic: true,
-    importance: 65,
-    direction: 0.1,
-    lag: '3 month(s)',
-    coordinates: { x: 78, y: 38, continent: 'Asia' },
+    importance: 77,
+    direction: 0.28,
+    lag: '~1 month(s)',
+    coordinates: getPreciseCoordinates('Japan'),
+    rawImportance: { overall: { mean: 99 } },
+    summary:
+      'Core machinery orders capture forward-looking domestic investment and Asia supply-chain capex; spikes cluster around fiscal years and robotics/automation cycles.',
+    normalized_series: buildMonthlySeries(55, 42, 0.18),
   },
   {
-    id: 'd4',
-    name: 'Global risk appetite',
+    id: 'mock-global-risk-negative',
+    name: 'Global equity risk appetite (cross-asset composite)',
     region: ['World'],
-    category: 'market',
+    category: 'Trade',
     isPublic: true,
-    importance: 55,
-    direction: 0,
+    importance: 66.5,
+    direction: -0.05,
     lag: 'Unknown',
-    coordinates: { x: 50, y: 50, continent: 'Global' },
+    coordinates: getPreciseCoordinates('World'),
+    rawImportance: { overall: { mean: 91 } },
+    summary:
+      'Combines credit spreads, vol surfaces, and cyclical equity factor tilt into a single read on whether markets are paying for growth or for safety; sharp deterioration often coincides with funding stress.',
+    normalized_series: buildMonthlySeries(40, 42, 0.08),
   },
 ];
 
@@ -62,52 +190,78 @@ export default function DriverMapPage() {
     MOCK_DRIVERS[0],
   );
   const [isLoading, setIsLoading] = useState(false);
+  // DriverCard checks `inQueue` before `isLoading` — toggles queue empty state independent of mocks.
+  const [inQueue, setInQueue] = useState(false);
 
   return (
     <>
       <AppPageHeader
-        breadcrumbs={[{ label: 'DriverMap' }]}
-        title="DriverMap"
-        subheader="World map with driver badges, transitions, and keyboard navigation (arrow keys)."
+        breadcrumbs={[{ label: 'Driver map' }]}
+        title="DriverMap & DriverCard"
+        subheader="World map with driver badges and the driver detail card — map clicks and the selector sync selection; arrow keys navigate the map."
         actions={<DocsHeaderActions />}
       />
       <PageContentSection>
         <div
           style={{
             display: 'flex',
+            flexWrap: 'wrap',
             alignItems: 'center',
-            gap: 12,
+            gap: 16,
             marginBottom: 16,
           }}
         >
-          <Switch
-            id="loading-overlay"
-            checked={isLoading}
-            onCheckedChange={setIsLoading}
-          />
-          <label htmlFor="loading-overlay">Loading overlay</label>
-        </div>
-        <div
-          style={{
-            width: 720,
-            maxWidth: '100%',
-            // @ts-ignore
-            '--shimmer-color': 'var(--page-color)',
-          }}
-        >
-          <DriverMap
-            drivers={MOCK_DRIVERS}
-            isLoading={isLoading}
-            selectedDriver={selectedDriver}
-            setSelectedDriver={setSelectedDriver}
-          />
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+            <Switch
+              id="loading-overlay"
+              checked={isLoading}
+              onCheckedChange={setIsLoading}
+            />
+            <label htmlFor="loading-overlay">Loading state</label>
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+            <Switch
+              id="in-queue"
+              checked={inQueue}
+              onCheckedChange={setInQueue}
+            />
+            <label htmlFor="in-queue">In queue (empty state)</label>
+          </div>
         </div>
-        {selectedDriver ? (
-          <p style={{ marginTop: 16, fontSize: 14 }}>
-            Selected: <strong>{selectedDriver.name}</strong> (
-            {selectedDriver.id})
-          </p>
-        ) : null}
+        <PageColumns
+          fill="left"
+          columns={[
+            <div
+              key="map"
+              style={{
+                width: '100%',
+                maxWidth: '100%',
+                // @ts-expect-error CSS custom property on div
+                '--shimmer-color': 'var(--page-color)',
+              }}
+            >
+              <DriverMap
+                drivers={MOCK_DRIVERS}
+                isLoading={isLoading}
+                selectedDriver={selectedDriver}
+                setSelectedDriver={setSelectedDriver}
+              />
+            </div>,
+            <DriverCard
+              key="card"
+              selectedDriver={selectedDriver}
+              isLoading={isLoading}
+              inQueue={inQueue}
+              driverSelector={
+                <DriverPager
+                  drivers={MOCK_DRIVERS}
+                  selectedDriver={selectedDriver}
+                  onSelect={setSelectedDriver}
+                />
+              }
+            />,
+          ]}
+        />
       </PageContentSection>
     </>
   );

package/src/docs/pages/LightweightChartPage.styl

@@ -0,0 +1,18 @@
+.sectionTitle
+  font-size var(--font-size-heading-5, 14px)
+  font-weight 600
+  margin 0 0 8px
+
+.caption
+  margin 0 0 10px
+  color var(--muted-foreground, #71717a)
+  font-size var(--font-size-body-5, 12px)
+
+.demo
+  width 100%
+  max-width 56rem
+
+.stack
+  display flex
+  flex-direction column
+  gap 28px

package/src/docs/pages/LightweightChartPage.styl.d.ts

@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'caption': string;
+  'demo': string;
+  'sectionTitle': string;
+  'stack': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/docs/pages/LightweightChartPage.tsx

@@ -0,0 +1,195 @@
+import { useMemo } from 'react';
+
+import { LightweightForecastChart } from '#uilib/components/ui/Chart';
+import type { QuantileBandConfig } from '#uilib/components/ui/Chart/chartForecastVisualization.types';
+import type { ChartDataPoint } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.types';
+import type { ForecastItemData } from '#uilib/components/ui/ChartAreaInteractive/ChartLines';
+import { PageContentSection } from '#uilib/components/ui/Page';
+import { useTheme } from '#uilib/contexts/theme-context';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+import S from './LightweightChartPage.styl';
+
+const DEMO_FORECAST_ID = 1;
+
+const DEMO_FORECAST_DATES = ['2023-06-01', '2023-07-01', '2023-08-01'] as const;
+
+const DEMO_OVERLAY_QUANTILES = {
+  '0.1': [12.5, 13.2, 14],
+  '0.25': [13, 13.6, 14.5],
+  '0.5': [13.5, 14, 15],
+  '0.75': [14, 14.5, 15.5],
+  '0.9': [14.5, 15, 16.2],
+} as const;
+
+const DEMO_BASE: ChartDataPoint[] = [
+  { date: '2021-01-01', historical: 6 },
+  { date: '2021-02-01', historical: 8 },
+  { date: '2021-03-01', historical: 7 },
+  { date: '2021-04-01', historical: 10 },
+  { date: '2021-05-01', historical: 9 },
+  { date: '2021-06-01', historical: 10 },
+  { date: '2021-07-01', historical: 11 },
+  { date: '2021-08-01', historical: 10 },
+  { date: '2021-09-01', historical: 12 },
+  { date: '2021-10-01', historical: 11 },
+  { date: '2021-11-01', historical: 13 },
+  { date: '2021-12-01', historical: 12 },
+  { date: '2022-01-01', historical: 8 },
+  { date: '2022-02-01', historical: 10 },
+  { date: '2022-03-01', historical: 9 },
+  { date: '2022-04-01', historical: 12 },
+  { date: '2022-05-01', historical: 11 },
+  { date: '2022-06-01', historical: 12 },
+  { date: '2022-07-01', historical: 13 },
+  { date: '2022-08-01', historical: 12 },
+  { date: '2022-09-01', historical: 14 },
+  { date: '2022-10-01', historical: 13 },
+  { date: '2022-11-01', historical: 15 },
+  { date: '2022-12-01', historical: 14 },
+  { date: '2023-01-01', historical: 10 },
+  { date: '2023-02-01', historical: 12 },
+  { date: '2023-03-01', historical: 11 },
+  { date: '2023-04-01', historical: 14 },
+  { date: '2023-05-01', historical: 13 },
+  { date: '2023-06-01', [`forecast_${DEMO_FORECAST_ID}`]: 13.5 },
+  { date: '2023-07-01', [`forecast_${DEMO_FORECAST_ID}`]: 14 },
+  { date: '2023-08-01', [`forecast_${DEMO_FORECAST_ID}`]: 15 },
+];
+
+const DEMO_FORECAST_ITEMS: ForecastItemData[] = [
+  { id: DEMO_FORECAST_ID, name: 'My custom forecast' },
+];
+
+function withDemoBands(data: ChartDataPoint[]): ChartDataPoint[] {
+  return data.map(row => {
+    const idx = (DEMO_FORECAST_DATES as readonly string[]).indexOf(row.date);
+    if (idx === -1) return row;
+    const lowerWide = DEMO_OVERLAY_QUANTILES['0.1'][idx];
+    const upperWide = DEMO_OVERLAY_QUANTILES['0.9'][idx];
+    const lowerMid = DEMO_OVERLAY_QUANTILES['0.25'][idx];
+    const upperMid = DEMO_OVERLAY_QUANTILES['0.75'][idx];
+    return {
+      ...row,
+      demo_band_wide: [lowerWide, upperWide],
+      demo_band_mid: [lowerMid, upperMid],
+    };
+  });
+}
+
+const DEMO_QUANTILE_BANDS: QuantileBandConfig[] = [
+  {
+    key: 'demo_band_wide',
+    quantiles: ['0.1', '0.9'],
+    opacity: 0.35,
+    name: 'P10–P90',
+    type: 'monotone',
+    color: 'rgba(100,190,220,0.35)',
+    strokeWidth: 0,
+  },
+  {
+    key: 'demo_band_mid',
+    quantiles: ['0.25', '0.75'],
+    opacity: 0.45,
+    name: 'P25–P75',
+    type: 'monotone',
+    color: 'rgba(65,165,238,0.45)',
+    strokeWidth: 0,
+  },
+];
+
+export default function LightweightChartPage() {
+  const { isDarkMode } = useTheme();
+  const historicalOnlyData = useMemo(
+    () => DEMO_BASE.filter(r => r.date <= '2023-05-01'),
+    [],
+  );
+  const bandsData = useMemo(() => withDemoBands(DEMO_BASE), []);
+
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'LightweightForecastChart' }]}
+        title="LightweightForecastChart"
+        subheader={
+          <>
+            TradingView{' '}
+            <a href="https://www.tradingview.com/lightweight-charts/">
+              Lightweight Charts
+            </a>{' '}
+            with historical + forecast lines, quantile fills, tooltip, legend,
+            and shared <code>ensureChartForecastBridge</code> preprocessing.
+          </>
+        }
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <div className={S.stack}>
+          <div>
+            <h3 className={S.sectionTitle}>Historical line</h3>
+            <p className={S.caption}>Subset of demo months through May 2023.</p>
+            <div className={S.demo}>
+              <LightweightForecastChart
+                chartData={historicalOnlyData}
+                forecastData={[]}
+                isDarkTheme={isDarkMode}
+                height={320}
+                showLegend={false}
+                formatNumber={v =>
+                  Number.isFinite(v) ? v.toFixed(2) : String(v)
+                }
+              />
+            </div>
+          </div>
+
+          <div>
+            <h3 className={S.sectionTitle}>
+              Historical + dashed forecast + bridge helper
+            </h3>
+            <p className={S.caption}>
+              Rows use raw forecast anchors; the chart applies{' '}
+              <code>ensureChartForecastBridge</code> internally (same defaults
+              as <code>ChartAreaInteractive</code>).
+            </p>
+            <div className={S.demo}>
+              <LightweightForecastChart
+                chartData={DEMO_BASE}
+                forecastData={DEMO_FORECAST_ITEMS}
+                isDarkTheme={isDarkMode}
+                height={320}
+                forecastLineStyle="dashed"
+                formatNumber={v =>
+                  Number.isFinite(v) ? v.toFixed(2) : String(v)
+                }
+              />
+            </div>
+          </div>
+
+          <div>
+            <h3 className={S.sectionTitle}>
+              Forecast lines + stacked quantile bands
+            </h3>
+            <p className={S.caption}>
+              Each band key maps to tuples on forecast months; overlays from{' '}
+              <code>ChartAreaInteractive</code> are intentionally omitted here.
+            </p>
+            <div className={S.demo}>
+              <LightweightForecastChart
+                chartData={bandsData}
+                forecastData={DEMO_FORECAST_ITEMS}
+                quantileBands={DEMO_QUANTILE_BANDS}
+                isDarkTheme={isDarkMode}
+                height={360}
+                forecastLineStyle="dashed"
+                formatNumber={v =>
+                  Number.isFinite(v) ? v.toFixed(2) : String(v)
+                }
+              />
+            </div>
+          </div>
+        </div>
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/PageColumnsPage.tsx

@@ -0,0 +1,92 @@
+import type { CSSProperties } from 'react';
+
+import { PageColumns, PageContentSection } from '#uilib/components/ui/Page';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+const demoBlockStyle: CSSProperties = {
+  margin: 0,
+  padding: 'var(--p-4)',
+  borderRadius: 'var(--p-3)',
+  border: '1px solid var(--border)',
+  backgroundColor: 'var(--muted)',
+};
+
+function ColumnDemo({ label }: { label: string }) {
+  return <p style={demoBlockStyle}>{label}</p>;
+}
+
+export default function PageColumnsPage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'PageColumns' }]}
+        title="PageColumns"
+        subheader="Responsive row of columns; fill prop controls which column(s) grow past the default width cap on wide viewports."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection
+        style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}
+      >
+        <section>
+          <h3 style={{ marginBottom: '0.75rem' }}>
+            fill=&quot;all&quot; (default)
+          </h3>
+          <p
+            style={{
+              marginBottom: '1rem',
+              color: 'var(--muted-foreground)',
+            }}
+          >
+            Both columns grow; max-width cap is removed on stretched columns.
+          </p>
+          <PageColumns
+            columns={[
+              <ColumnDemo key="a" label="Column A" />,
+              <ColumnDemo key="b" label="Column B" />,
+            ]}
+          />
+        </section>
+        <section>
+          <h3 style={{ marginBottom: '0.75rem' }}>fill=&quot;left&quot;</h3>
+          <p
+            style={{
+              marginBottom: '1rem',
+              color: 'var(--muted-foreground)',
+            }}
+          >
+            First column grows; second stays at the default fixed width on wide
+            screens.
+          </p>
+          <PageColumns
+            fill="left"
+            columns={[
+              <ColumnDemo key="a" label="Growing left column" />,
+              <ColumnDemo key="b" label="Fixed sidebar" />,
+            ]}
+          />
+        </section>
+        <section>
+          <h3 style={{ marginBottom: '0.75rem' }}>fill=&quot;right&quot;</h3>
+          <p
+            style={{
+              marginBottom: '1rem',
+              color: 'var(--muted-foreground)',
+            }}
+          >
+            Last column grows; first stays at the default fixed width on wide
+            screens.
+          </p>
+          <PageColumns
+            fill="right"
+            columns={[
+              <ColumnDemo key="a" label="Fixed sidebar" />,
+              <ColumnDemo key="b" label="Growing right column" />,
+            ]}
+          />
+        </section>
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/TimeRangeControlsPage.tsx

@@ -2,13 +2,12 @@ import { useState } from 'react';
 
 import { PageContentSection } from '#uilib/components/ui/Page';
 import { TimeRangeControls } from '#uilib/components/ui/TimeRangeControls';
-import type { TimeRange } from '#uilib/components/ui/TimeRangeControls/TimeRangeControls.types';
 
 import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
 import { DocsHeaderActions } from '../docsHeaderActions';
 
 export default function TimeRangeControlsPage() {
-  const [range, setRange] = useState<TimeRange>('1y');
+  const [range, setRange] = useState<string>('1y');
 
   return (
     <>
@@ -21,7 +20,7 @@ export default function TimeRangeControlsPage() {
       <PageContentSection>
         <TimeRangeControls
           timeRange={range}
-          onTimeRangeChange={v => setRange(v as TimeRange)}
+          onTimeRangeChange={setRange}
           loading={false}
         />
       </PageContentSection>

package/src/docs/pages/WorldMapPage.styl

@@ -0,0 +1,14 @@
+@import '../../components/ui/WorldMap/mapAspect.mixin.styl'
+
+.demoFrame
+  position relative
+  width 100%
+  max-width 42rem
+  mapAspect()
+  border-radius var(--p-4)
+  overflow hidden
+
+.demoFill
+  position absolute
+  inset 0
+  box-sizing border-box