@columenlabs/lumen-ui 0.1.129 → 0.1.131

package/dist/app-switcher.js

@@ -8,6 +8,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useQuery } from '@tanstack/react-query';
 import { ArrowUpRightIcon, ChevronsUpDownIcon } from 'lucide-react';
 import { Fragment, useState } from 'react';
+import { fetchWithin } from './fetch-within.js';
 import { cn } from './lib/utils.js';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from './ui/dropdown-menu.js';
 import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from './ui/sidebar.js';
@@ -80,7 +81,7 @@ export function LumenSuiteSwitcher({ source, current, product, menuLabel, }) {
         queryKey: ['lumen-suite', source],
         enabled: !!source,
         queryFn: async () => {
-            const res = await fetch(source, { credentials: 'include' });
+            const res = await fetchWithin(source, { credentials: 'include' });
             if (!res.ok)
                 throw new Error(`suite list ${res.status}`);
             return res.json();

package/dist/fetch-within.d.ts

@@ -0,0 +1,8 @@
+/** How long a call to the app's own server may take before it gives up (ms). */
+export declare const FETCH_MS = 15000;
+/**
+ * `fetch` that never waits forever: it gives up after `ms` with a `TimeoutError` (the caller's own
+ * `signal`, if any, still aborts it as before), so a hung connection becomes an error state or a
+ * fallback instead of a spinner that never ends.
+ */
+export declare function fetchWithin(url: string, init?: RequestInit, ms?: number): Promise<Response>;

package/dist/fetch-within.js

@@ -0,0 +1,14 @@
+/** How long a call to the app's own server may take before it gives up (ms). */
+export const FETCH_MS = 15_000;
+/**
+ * `fetch` that never waits forever: it gives up after `ms` with a `TimeoutError` (the caller's own
+ * `signal`, if any, still aborts it as before), so a hung connection becomes an error state or a
+ * fallback instead of a spinner that never ends.
+ */
+export function fetchWithin(url, init = {}, ms = FETCH_MS) {
+    const timeout = AbortSignal.timeout(ms);
+    const signal = init.signal && typeof AbortSignal.any === 'function'
+        ? AbortSignal.any([init.signal, timeout])
+        : (init.signal ?? timeout);
+    return fetch(url, { ...init, signal });
+}

package/dist/index.d.ts

@@ -76,6 +76,7 @@ export { type McpServer, McpSettings } from './mcp-settings.js';
 export { lumenToast } from './lumen-toast.js';
 export { LumenShell, type LumenShellProps, type ShellUser, StatusItem, firstName, initials, maskAmount, useAmountsHidden, useApp, useShell, } from './shell.js';
 export { API_TIMEOUT_MS, apiJson } from './api-fetch.js';
+export { FETCH_MS, fetchWithin } from './fetch-within.js';
 export { savedAnswers, type SavedAnswersOptions, type SavedAnswersPersister, } from './saved-answers.js';
 export { cn } from './lib/utils.js';
 export { type HealthProbe, StatusHealth } from './status-health.js';

package/dist/index.js

@@ -83,6 +83,7 @@ export { McpSettings } from './mcp-settings.js';
 export { lumenToast } from './lumen-toast.js';
 export { LumenShell, StatusItem, firstName, initials, maskAmount, useAmountsHidden, useApp, useShell, } from './shell.js';
 export { API_TIMEOUT_MS, apiJson } from './api-fetch.js';
+export { FETCH_MS, fetchWithin } from './fetch-within.js';
 export { savedAnswers, } from './saved-answers.js';
 export { cn } from './lib/utils.js';
 export { StatusHealth } from './status-health.js';

package/dist/lumen-widget-charts.js

@@ -42,7 +42,7 @@ export function StackedColumns({ rows, x, parts, label, height = 220, tick = Str
     const total = (r) => parts.reduce((n, p) => n + (Number(r[p.key]) || 0), 0);
     // The highest part with a value carries the column's rounded cap.
     const top = (r) => parts.findLast((p) => Number(r[p.key]) > 0)?.key;
-    const ticks = niceTicks(Math.max(0, ...rows.map(total)));
+    const ticks = niceTicks(Math.max(0, ...rows.map(total)), 4, rows.every((r) => Number.isInteger(total(r))));
     return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(ChartContainer, { config: config, role: "img", "aria-label": label, className: "aspect-auto w-full", style: { height }, children: _jsxs(BarChart, { data: rows, margin: { left: 0, right: 0, top: 8, bottom: 0 }, children: [_jsx(CartesianGrid, { vertical: false, strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: x, tickLine: false, axisLine: false, tickMargin: 8, minTickGap: 12, tickFormatter: (v) => tick(String(v)) }), _jsx(YAxis, { tickLine: false, axisLine: false, domain: [0, ticks.at(-1) ?? 'auto'], ticks: ticks, width: axisWidth(ticks.map(fmt)), tick: axisTick(fmt) }), _jsx(ChartTooltip, { cursor: { fill: 'var(--muted)', opacity: 0.5 }, content: _jsx(ChartTooltipContent, { labelFormatter: (_, payload) => {
                                     const r = payload?.[0]?.payload;
                                     return r ? (_jsxs("span", { className: "flex w-full gap-3", children: [_jsx("span", { children: tick(String(r[x])) }), _jsx("span", { className: "num ml-auto", children: fmt(total(r)) })] })) : null;
@@ -54,7 +54,8 @@ export function TimeLines({ rows, x, lines, label, height = 220, tick = String,
     const config = Object.fromEntries(lines.map((l) => [l.key, { label: l.name, color: l.fill }]));
     const axis = (right) => {
         const keys = lines.filter((l) => !!l.right === right).map((l) => l.key);
-        return niceTicks(Math.max(0, ...rows.flatMap((r) => keys.map((k) => Number(r[k]) || 0))));
+        const values = rows.flatMap((r) => keys.map((k) => Number(r[k]) || 0));
+        return niceTicks(Math.max(0, ...values), 4, values.every(Number.isInteger));
     };
     const left = axis(false);
     const hasRight = lines.some((l) => l.right);
@@ -113,14 +114,16 @@ export function AllocationBar({ items, total, config, tooltip, share, }) {
 }
 /**
  * Round axis steps (1, 2, 2.5 or 5 times a power of ten) from 0 to just above `max`, about four
- * of them, so a value axis reads 0, 100k, 200k, 300k rather than 95k, 190k, 285k.
+ * of them, so a value axis reads 0, 100k, 200k, 300k rather than 95k, 190k, 285k. When every value
+ * is a whole number (a count), so is every step: 0, 1, 2 rather than 0, 0.5, 1, 1.5.
  */
-function niceTicks(max, count = 4) {
+function niceTicks(max, count = 4, whole = false) {
     if (!(max > 0))
         return [0, 1];
     const raw = max / count;
     const pow = 10 ** Math.floor(Math.log10(raw));
-    const step = ([1, 2, 2.5, 5, 10].find((m) => m * pow >= raw) ?? 10) * pow;
+    const steps = whole ? [1, 2, 5, 10] : [1, 2, 2.5, 5, 10];
+    const step = Math.max(whole ? 1 : 0, (steps.find((m) => m * pow >= raw) ?? 10) * pow);
     const n = Math.ceil(max / step - 1e-9);
     return Array.from({ length: n + 1 }, (_, i) => Math.round(i * step * 1e6) / 1e6);
 }

package/dist/market/live.js

@@ -10,6 +10,7 @@
  */
 import { EXTENDED_LABEL, } from '@columenlabs/lumen-ui-types/market';
 import { createContext, createElement, useContext, useEffect, useMemo, useState, useSyncExternalStore, } from 'react';
+import { fetchWithin } from '../fetch-within.js';
 const HIDDEN_CLOSE_MS = 30_000;
 const CLOSED_CHECK_MS = 60_000;
 /** Folds changed bars into a series (same minute replaced, new ones appended in order). */
@@ -63,7 +64,7 @@ class MarketHub {
         const k = keys.join(',');
         let p = this.days.get(k);
         if (!p) {
-            p = fetch(`${this.api}/daily?symbols=${encodeURIComponent(k)}`, {
+            p = fetchWithin(`${this.api}/daily?symbols=${encodeURIComponent(k)}`, {
                 credentials: 'same-origin',
             }).then(async (r) => {
                 if (!r.ok)
@@ -77,7 +78,7 @@ class MarketHub {
     }
     /** Whether the app serves market data at all (a 404 means no feed here), read once. */
     available() {
-        this.probe ??= fetch(`${this.api}/session`, { credentials: 'same-origin' })
+        this.probe ??= fetchWithin(`${this.api}/session`, { credentials: 'same-origin' })
             .then((r) => r.status !== 404)
             .catch(() => true);
         return this.probe;

package/dist/notifications.js

@@ -7,6 +7,7 @@ import { useState } from 'react';
 // own paid ntfy.sh token) and webhooks, then which event goes to which target. The app passes its
 // API base (`/api/notifications`), its product's name and the address email comes from.
 import { LumenConfirm } from './confirm.js';
+import { fetchWithin } from './fetch-within.js';
 import { ErrorLine, IntegrationRow, KeyTestLine, TestBadge, } from './integrations.js';
 import { IconButton } from './page.js';
 import { Badge } from './ui/badge.js';
@@ -18,7 +19,7 @@ import { Label } from './ui/label.js';
 const NTFY_IOS = 'https://apps.apple.com/us/app/ntfy/id1625396347';
 const NTFY_ANDROID = 'https://play.google.com/store/apps/details?id=io.heckel.ntfy';
 async function call(url, method = 'GET', body) {
-    const res = await fetch(url, {
+    const res = await fetchWithin(url, {
         method,
         headers: body === undefined ? {} : { 'content-type': 'application/json' },
         body: body === undefined ? undefined : JSON.stringify(body),

package/dist/page.d.ts

@@ -21,7 +21,10 @@ export interface PageHeaderProps {
 }
 /** The fixed-height header; `Page` renders it, or a page with several states renders it itself. */
 export declare function PageHeader({ crumbs, actions, layout, meta, status }: PageHeaderProps): import("react").JSX.Element;
-/** The page body: the shell's gutter, section gap and max width. */
+/**
+ * The page body: the shell's gutter, section gap and max width. A plain block, since the shell's
+ * inset is the page's one `main` landmark.
+ */
 export declare function PageBody({ className, children }: {
     className?: string;
     children: ReactNode;

package/dist/page.js

@@ -36,9 +36,12 @@ export function PageHeader({ crumbs, actions, layout, meta, status }) {
                         isMobile &&
                             '[&_[data-slot=button]]:size-8 [&_[data-slot=button]]:gap-0 [&_[data-slot=button]]:px-0 [&_[data-slot=button]]:text-[0px]'), children: [actions && (_jsxs(_Fragment, { children: [_jsx("div", { "data-slot": "shell-page-actions", className: "flex items-center gap-0.5", children: actions }), _jsx(Separator, { orientation: "vertical", className: "mx-2 data-vertical:h-5 data-vertical:self-center" })] })), _jsxs("div", { "data-slot": "shell-actions", className: "flex items-center gap-0.5", children: [layout, _jsx(LumenFinderButton, {}), hideAmounts && (_jsx(IconButton, { icon: hidden ? EyeOffIcon : EyeIcon, label: hidden ? 'Show amounts' : 'Hide amounts', "aria-pressed": hidden, onClick: () => setPref('hideAmounts', !hidden) })), refresh && (_jsx(IconButton, { icon: RefreshCwIcon, busy: refreshing, label: "Refresh (skip cache)", disabled: refreshing, onClick: () => void refresh() })), headerActions] })] })] }), status && statusSlot && createPortal(status, statusSlot)] }));
 }
-/** The page body: the shell's gutter, section gap and max width. */
+/**
+ * The page body: the shell's gutter, section gap and max width. A plain block, since the shell's
+ * inset is the page's one `main` landmark.
+ */
 export function PageBody({ className, children }) {
-    return (_jsx("main", { className: cn('mx-auto flex w-full max-w-(--shell-max-width) min-w-0 flex-1 flex-col gap-(--shell-section-gap) p-(--shell-gutter)', className), children: children }));
+    return (_jsx("div", { className: cn('mx-auto flex w-full max-w-(--shell-max-width) min-w-0 flex-1 flex-col gap-(--shell-section-gap) p-(--shell-gutter)', className), children: children }));
 }
 export function Page({ className, children, ...header }) {
     return (_jsxs(_Fragment, { children: [_jsx(PageHeader, { ...header }), _jsx(PageBody, { className: className, children: children })] }));

package/dist/route-error.js

@@ -16,6 +16,7 @@ import { useRouter } from '@tanstack/react-router';
 import { ChevronRight, RefreshCw, RotateCcw, TriangleAlert } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { toast } from 'sonner';
+import { fetchWithin } from './fetch-within.js';
 import { reportClientError } from './telemetry.js';
 import { Button } from './ui/button.js';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible.js';
@@ -113,7 +114,7 @@ async function newBuildOut() {
     if (!mine)
         return false;
     try {
-        const res = await fetch(import.meta.env.BASE_URL ?? '/', { cache: 'no-store' });
+        const res = await fetchWithin(import.meta.env.BASE_URL ?? '/', { cache: 'no-store' }, 5000);
         if (!res.ok || !res.headers.get('content-type')?.includes('text/html'))
             return false;
         const live = entryOf(await res.text());

package/dist/tasks.js

@@ -15,6 +15,7 @@ import { toast } from 'sonner';
 // otherwise it reads again on focus. The product mounts `TasksProvider` and `TasksButton` in the
 // shell's slots; where the API answers 404 nothing shows.
 import { LumenConfirm } from './confirm.js';
+import { fetchWithin } from './fetch-within.js';
 import { useIsMobile } from './hooks/use-mobile.js';
 import { cn } from './lib/utils.js';
 import { IconButton } from './page.js';
@@ -80,7 +81,7 @@ function TasksLive({ api, apps, children, }) {
     // Reads already on the wire share one request.
     const inflight = useRef(null);
     const read = useCallback(async () => {
-        const res = await fetch(api, { headers: { accept: 'application/json' } }).catch(() => null);
+        const res = await fetchWithin(api, { headers: { accept: 'application/json' } }).catch(() => null);
         if (!res)
             return;
         if (res.status === 404) {
@@ -121,7 +122,7 @@ function TasksLive({ api, apps, children, }) {
         void refresh();
     }, [refresh]);
     const post = useCallback(async (path) => {
-        await fetch(`${api}${path}`, {
+        await fetchWithin(`${api}${path}`, {
             method: 'POST',
             headers: { 'content-type': 'application/json' },
             body: '{}',

package/dist/whats-new.js

@@ -12,6 +12,7 @@ import { SparklesIcon } from 'lucide-react';
 import { useState } from 'react';
 import Markdown from 'react-markdown';
 import { DrawerSection } from './drawer-section.js';
+import { fetchWithin } from './fetch-within.js';
 import { LumenDrawer } from './lumen-drawer.js';
 import { usePrefs } from './prefs.js';
 import { Badge } from './ui/badge.js';
@@ -34,7 +35,7 @@ async function page(api, before) {
     const q = new URLSearchParams({ limit: String(PAGE) });
     if (before)
         q.set('before', before);
-    const r = await fetch(`${api}?${q}`, { credentials: 'include' });
+    const r = await fetchWithin(`${api}?${q}`, { credentials: 'include' });
     if (r.status === 404)
         return null;
     if (!r.ok)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.129",
+  "version": "0.1.131",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -49,7 +49,7 @@
     "@codemirror/lang-javascript": "6.2.5",
     "@codemirror/lang-json": "6.0.2",
     "@codemirror/lang-sql": "6.10.0",
-    "@columenlabs/lumen-ui-types": "0.1.129",
+    "@columenlabs/lumen-ui-types": "0.1.131",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",