@sybilion/uilib 1.2.26 → 1.3.0

package/src/components/widgets/DriverCard/driverPerformanceChartData.ts

@@ -0,0 +1,64 @@
+import type { DriverData } from '../DriverMap/driverMapGeography';
+
+export type DriverPerformanceChartPoint = {
+  date: Date;
+  value: number;
+};
+
+/** Last non-null points from `normalized_series`, or deterministic fallback sample. */
+export function generateDriverChartData(
+  driver: DriverData,
+  precision: number = 7,
+): DriverPerformanceChartPoint[] {
+  if (driver.normalized_series) {
+    const entries = Object.entries(driver.normalized_series);
+
+    const seriesData = entries
+      .filter(([, value]) => value !== null)
+      .map(([date, value]) => {
+        let parsedDate: Date;
+        try {
+          const dateStr = date.toString();
+
+          if (dateStr.includes('-')) {
+            parsedDate = new Date(`${dateStr}T00:00:00`);
+          } else {
+            parsedDate = new Date(dateStr);
+          }
+
+          if (Number.isNaN(parsedDate.getTime())) {
+            return null;
+          }
+        } catch {
+          return null;
+        }
+
+        const numericValue = parseFloat((value as number).toFixed(precision));
+
+        return {
+          date: parsedDate,
+          value: numericValue,
+        };
+      })
+      .filter((item): item is DriverPerformanceChartPoint => item !== null)
+      .sort((a, b) => a.date.getTime() - b.date.getTime())
+      .slice(-24);
+
+    if (seriesData.length > 0) {
+      return seriesData;
+    }
+  }
+
+  const data: DriverPerformanceChartPoint[] = [];
+  const baseValue = driver.importance / 100;
+
+  for (let i = 0; i < 12; i++) {
+    const randomVariation = (Math.random() - 0.5) * 0.2;
+    const value = Math.max(0, Math.min(1, baseValue + randomVariation));
+    data.push({
+      date: new Date(2023, i, 1),
+      value: parseFloat(value.toFixed(precision)),
+    });
+  }
+  return data;
+}

package/src/components/widgets/DriverCard/index.ts

@@ -0,0 +1 @@
+export { DriverCard, type DriverCardProps } from './DriverCard';

package/src/components/widgets/DriverMap/DriverIcon/DriverIcon.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import cn from 'classnames';
 
 import { Badge } from '#uilib/components/ui/Badge';

package/src/components/widgets/DriverMap/DriverMap.styl

@@ -1,5 +1,5 @@
 @import '../../../lib/theme.styl'
-@import './MapBackground/mapAspect.mixin.styl'
+@import '../../ui/WorldMap/mapAspect.mixin.styl'
 
 
 .root
@@ -22,6 +22,11 @@
   border-radius var(--p-4)
   overflow hidden
 
+.mapWorld
+  position absolute
+  inset 0
+  box-sizing border-box
+
 .shimmerOverlay
   z-index 20
 

package/src/components/widgets/DriverMap/DriverMap.styl.d.ts

@@ -3,6 +3,7 @@
 interface CssExports {
   'inTransition': string;
   'mapInner': string;
+  'mapWorld': string;
   'root': string;
   'shimmerOverlay': string;
   'worldDrivers': string;

package/src/components/widgets/DriverMap/DriverMap.tsx

@@ -1,8 +1,7 @@
-'use client';
-
 import cn from 'classnames';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
+import { WorldMap } from '#uilib/components/ui/WorldMap';
 import useEvent from '#uilib/hooks/useEvent';
 import { Shimmer } from '@homecode/ui';
 
@@ -15,7 +14,6 @@ import {
   hasValidCoords,
 } from './DriverMap.helpers';
 import S from './DriverMap.styl';
-import { MapBackground } from './MapBackground/MapBackground';
 import type { DriverData } from './driverMapGeography';
 import { getHighestImportanceDriver } from './driverMapSelection';
 
@@ -172,7 +170,7 @@ export function DriverMap({
   return (
     <div className={cn(S.root, isTransitioning && S.inTransition)}>
       <div className={S.mapInner}>
-        <MapBackground />
+        <WorldMap className={S.mapWorld} />
         {isLoading && <Shimmer className={S.shimmerOverlay} size="l" />}
         {otherDrivers.map(driver => (
           <DriverIcon

package/src/components/widgets/DriverMap/driverCategoryIcon.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import {
   ChartBarIcon,
   ChartLineIcon,

package/src/components/widgets/DriverMap/index.ts

@@ -13,6 +13,4 @@ export {
   getResponsiveCoordinates,
   svgToPercentage,
 } from './driverMapGeography';
-export { MapBackground } from './MapBackground/MapBackground';
-export { LoadingSpinner } from './LoadingSpinner/LoadingSpinner';
 export type { BadgeSize } from './DriverIcon/DriverIcon';

package/src/docs/config/webpack.config.js

@@ -104,7 +104,7 @@ export default (env, argv) => {
               type: 'asset/resource',
             },
             {
-              include: /DriverMap[/\\]MapBackground[/\\]map\.svg$/,
+              include: /components[/\\]ui[/\\]WorldMap[/\\]map\.svg$/,
               type: 'asset/resource',
             },
             {

package/src/docs/pages/ChartAreaInteractivePage.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useMemo, useState } from 'react';
 
 import { ChartAreaInteractive } from '#uilib/components/ui/ChartAreaInteractive';
-import type { TimeRange } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.helpers';
 import type {
   ChartDataPoint,
   OverlayMode,
@@ -91,7 +90,7 @@ type DemoMode = 'none' | OverlayMode;
 
 export default function ChartAreaInteractivePage() {
   const { isDarkMode } = useTheme();
-  const [timeRange, setTimeRange] = useState<TimeRange>('1y');
+  const [timeRange, setTimeRange] = useState<string>('1y');
   const [pinMonth, setPinMonth] = useState<string | undefined>(undefined);
   const [demoMode, setDemoMode] = useState<DemoMode>('none');
   const [chartData] = useState<ChartDataPoint[]>(INITIAL_CHART);
@@ -158,7 +157,7 @@ export default function ChartAreaInteractivePage() {
         </Tabs>
         <ChartAreaInteractive
           timeRange={timeRange}
-          onTimeRangeChange={v => setTimeRange(v as TimeRange)}
+          onTimeRangeChange={setTimeRange}
           pinMonth={pinMonth}
           onPinMonthChange={setPinMonth}
           mode={mode}

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/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

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

@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'demoFill': string;
+  'demoFrame': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/docs/pages/WorldMapPage.tsx

@@ -0,0 +1,26 @@
+import { PageContentSection } from '#uilib/components/ui/Page';
+import { WorldMap } from '#uilib/components/ui/WorldMap';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+import S from './WorldMapPage.styl';
+
+export default function WorldMapPage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'World map' }]}
+        title="WorldMap"
+        subheader="Bundled SVG world map for layouts such as DriverMap — optional className for positioning."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <div className={S.demoFrame}>
+          <div className={S.demoFill}>
+            <WorldMap />
+          </div>
+        </div>
+      </PageContentSection>
+    </>
+  );
+}