@columenlabs/lumen-ui 0.1.128 → 0.1.130

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/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/people/lumen-people.js

@@ -168,7 +168,7 @@ function PeopleList({ frame, fields, onInvite, }) {
     const active = people.filter((p) => p.status === 'active').length;
     const disabled = people.filter((p) => p.status === 'disabled').length;
     const onlyMe = people.length <= 1;
-    return (_jsxs(_Fragment, { children: [_jsx(LumenLayout, { crumbs: frame.crumbs, actions: frame.invite, intro: _jsxs("div", { className: "flex flex-col gap-3", children: [frame.tabs, _jsxs(TileRow, { fill: true, "aria-label": "People at a glance", children: [_jsx(Tile, { label: "People", value: people.length, caption: `${active} active${disabled ? ` · ${disabled} disabled` : ''}` }), _jsx(Tile, { label: "Admins", value: admins.length, caption: "at least 1 always kept" }), _jsx(Tile, { label: "Invites pending", value: invited, caption: expired ? `${expired} expired` : 'none expired' }), view.sync ? (_jsx(Tile, { label: "Sign-in sync", value: view.sync.ok ? 'Synced' : 'Out of step', caption: view.sync.at ? when(view.sync.at) : view.sync.detail, valueClassName: view.sync.ok ? undefined : 'text-loss' })) : (_jsx(Tile, { label: "Email", value: view.mail.configured ? 'Working' : 'Not set up', caption: view.mail.from ?? 'links only' }))] }), frame.mailNote, picked.size > 0 && (_jsx(BulkBar, { frame: frame, ids: [...picked], onClear: () => setPicked(new Set()) }))] }), domain: domain, ...layout, rows: people, load: load, state: onlyMe ? _jsx(FirstRun, { mail: view.mail.configured, onInvite: onInvite }) : undefined, selection: { keys: picked, onChange: setPicked }, rowTitle: (p) => p.name || p.email, onOpen: (p) => setOpenId(p.id) }), _jsx(LumenBoundary, { where: "people-person", what: "panel", children: _jsx(PersonDrawer, { adapter: adapter, view: view, person: open, onClose: () => setOpenId(null) }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(LumenLayout, { crumbs: frame.crumbs, actions: frame.invite, intro: _jsxs("div", { className: "flex flex-col gap-3", children: [frame.tabs, _jsxs(TileRow, { fill: true, "aria-label": "People at a glance", children: [_jsx(Tile, { label: "People", value: people.length, caption: `${active} active${disabled ? ` · ${disabled} disabled` : ''}` }), _jsx(Tile, { label: "Admins", value: admins.length, caption: "Can\u2019t remove the last admin" }), _jsx(Tile, { label: "Invites pending", value: invited, caption: expired ? `${expired} expired` : 'none expired' }), view.sync ? (_jsx(Tile, { label: "Sign-in sync", value: view.sync.ok ? 'Synced' : 'Out of step', caption: view.sync.at ? when(view.sync.at) : view.sync.detail, valueClassName: view.sync.ok ? undefined : 'text-loss' })) : (_jsx(Tile, { label: "Email", value: view.mail.configured ? 'Working' : 'Not set up', caption: view.mail.from ?? 'links only' }))] }), frame.mailNote, picked.size > 0 && (_jsx(BulkBar, { frame: frame, ids: [...picked], onClear: () => setPicked(new Set()) }))] }), domain: domain, ...layout, rows: people, load: load, state: onlyMe ? _jsx(FirstRun, { mail: view.mail.configured, onInvite: onInvite }) : undefined, selection: { keys: picked, onChange: setPicked }, rowTitle: (p) => p.name || p.email, onOpen: (p) => setOpenId(p.id) }), _jsx(LumenBoundary, { where: "people-person", what: "panel", children: _jsx(PersonDrawer, { adapter: adapter, view: view, person: open, onClose: () => setOpenId(null) }) })] }));
 }
 /** One change over the ticked people. Apply clears the selection; Undo puts the change back. */
 function BulkBar({ frame, ids, onClear, }) {

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.128",
+  "version": "0.1.130",
   "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.128",
+    "@columenlabs/lumen-ui-types": "0.1.130",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",