@columenlabs/lumen-ui 0.1.88 → 0.1.89

package/dist/assistant/lumen-assistant.js

@@ -2,10 +2,10 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { ArrowUpIcon, CheckIcon, ChevronRightIcon, CircleAlertIcon, CopyIcon, CornerDownRightIcon, CrosshairIcon, FileTextIcon, LightbulbIcon, PencilIcon, PlusIcon, SparklesIcon, SquareIcon, Undo2Icon, WrenchIcon, XIcon, } from 'lucide-react';
 import { createContext, useContext, useEffect, useRef, useState } from 'react';
-import Markdown from 'react-markdown';
 import { LumenAssistantButton, LumenAssistantChats, LumenAssistantPanel, assistantOpen, useAssistantHotkey, } from '../assistant-panel.js';
 import { IconButton } from '../icon-button.js';
 import { errorText } from '../integrations.js';
+import { lazyPart } from '../lazy-part.js';
 import { cn } from '../lib/utils.js';
 import { LumenSelector, LumenSelectorList, } from '../lumen-selector.js';
 import { lumenToast } from '../lumen-toast.js';
@@ -20,6 +20,8 @@ import { Textarea } from '../ui/textarea.js';
 import { chatMarkdown, chatTurns, copyMarkdown, turnMarkdown } from './copy.js';
 import { composeAssistant, selectionRef, useComposeRequest, usePageSelection, useShownAssistantSources, } from './sources.js';
 import { useAssistantChat } from './use-assistant-chat.js';
+// The Markdown renderer loads with the first answer (lazy-part.tsx).
+const Markdown = lazyPart(() => import('react-markdown').then((m) => m.default));
 /** The main model's context drawn full (tokens); the mark sits where the assistant compacts. */
 const CONTEXT_MAX = 200_000;
 const COMPACT_AT = 150_000;

package/dist/lazy-part.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A part of the kit loaded only when it first shows (a chart, Edit widget, What's new), so an app's
+ * first page never downloads what it doesn't draw. The import must be a dynamic `import()` with the
+ * part's module, and every other import of that module elsewhere in the kit's static graph must be
+ * type-only, or the bundler keeps it in the first file.
+ */
+import { type ComponentType, type ReactNode } from 'react';
+export declare function lazyPart<P extends object>(load: () => Promise<ComponentType<P>>, fallback?: ReactNode): ComponentType<P>;

package/dist/lazy-part.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A part of the kit loaded only when it first shows (a chart, Edit widget, What's new), so an app's
+ * first page never downloads what it doesn't draw. The import must be a dynamic `import()` with the
+ * part's module, and every other import of that module elsewhere in the kit's static graph must be
+ * type-only, or the bundler keeps it in the first file.
+ */
+import { Suspense, lazy } from 'react';
+export function lazyPart(load, fallback = null) {
+    const Part = lazy(() => load().then((c) => ({ default: c })));
+    function LazyPart(props) {
+        return (_jsx(Suspense, { fallback: fallback, children: _jsx(Part, { ...props }) }));
+    }
+    return LazyPart;
+}

package/dist/lumen-layout.d.ts

@@ -8,7 +8,7 @@ import { type LumenLoad } from './lumen-source.js';
 import { type LumenViewProps, type ServerPaging } from './lumen-view.js';
 import { type CardControls, type CardLink } from './lumen-widget.js';
 import { type Crumb } from './page.js';
-import { type ViewEditorSection } from './view-editor.js';
+import type { ViewEditorSection } from './view-editor.js';
 import { type ViewDomain } from './view-model.js';
 /** A card a page builds in code, after the saved view's cards: a view of other data, a list. */
 export interface LumenLayoutCard {

package/dist/lumen-layout.js

@@ -21,6 +21,7 @@ import { useGroup } from './group-button.js';
 import { useIsMobile } from './hooks/use-mobile.js';
 import { SourceStatusItems, useJoins } from './joins.js';
 import { useYourData } from './joins.js';
+import { lazyPart } from './lazy-part.js';
 import { cn } from './lib/utils.js';
 import { LumenDrawer } from './lumen-drawer.js';
 import { LumenTokenizedFilter, filterByTokens, useLumenFilter, } from './lumen-filter.js';
@@ -35,8 +36,9 @@ import { IconButton, Page } from './page.js';
 import { SourcedCard } from './sourced-card.js';
 import { LumenCard, SummaryTiles } from './summary-cards.js';
 import { Button } from './ui/button.js';
-import { ViewEditDialog } from './view-editor.js';
 import { computedOf, filterFieldsOf, formulaBlanks, pick, subgroupOf, summaryCash, takesFormulas, withSavedFilters, withViewFields, } from './view-model.js';
+// Loaded when it first shows (lazy-part.tsx).
+const ViewEditDialog = lazyPart(() => import('./view-editor.js').then((m) => m.ViewEditDialog), null);
 /** Rows of a view the assistant sees with each message. */
 const ASSISTANT_ROWS = 10;
 export function LumenLayout(props) {

package/dist/lumen-view.js

@@ -20,6 +20,7 @@ import { useFloatingHead } from './floating-head.js';
 import { FreshnessMark, freshnessLine, freshnessOf } from './freshness.js';
 import { useIsMobile } from './hooks/use-mobile.js';
 import { IconButton } from './icon-button.js';
+import { lazyPart } from './lazy-part.js';
 import { cn } from './lib/utils.js';
 import { LumenTokenizedFilter, useLumenFilter, } from './lumen-filter.js';
 import { useGridCell } from './lumen-grid.js';
@@ -44,9 +45,10 @@ import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group.js';
 import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip.js';
 import { UnitColumns } from './unit-value.js';
 import { EditCell, EditInputCell, EditManyCell } from './view-edit-cell.js';
-import { ViewEditDialog } from './view-editor.js';
 import { fieldOptions } from './view-formulas.js';
 import { CHIP_TONE, FORMULAS_GROUP, chipsOf, computedOf, filterFieldsOf, groupOf, label, pick, rollUp, rollsUp, subgroupOf, withSavedFilters, withViewFields, } from './view-model.js';
+// Loaded when it first shows (lazy-part.tsx).
+const ViewEditDialog = lazyPart(() => import('./view-editor.js').then((m) => m.ViewEditDialog), null);
 export { CHIP_TONE, FORMULAS_GROUP, RUN_STATE_TONE } from './view-model.js';
 export { rollUp } from './view-model.js';
 /** Rows a table draws per group, or per unpaged table, before "Show more". */

package/dist/lumen-widget.js

@@ -12,10 +12,10 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { useAssistant, useAssistantName } from './assistant-context.js';
 import { LumenConfirm } from './confirm.js';
 import { FoldChevron, useFolded, usePageKey } from './fold.js';
-import { GrowthChart } from './growth-chart.js';
 import { useIsMobile } from './hooks/use-mobile.js';
 import { IconButton } from './icon-button.js';
 import { useDomainReads } from './joins.js';
+import { lazyPart } from './lazy-part.js';
 import { cn } from './lib/utils.js';
 import { LumenBoundary } from './lumen-boundary.js';
 import { LumenTokenizedFilter, filterByTokens, useLumenFilter, } from './lumen-filter.js';
@@ -23,11 +23,9 @@ import { useGridCell } from './lumen-grid.js';
 import { CardIdProvider, LinkDot, LinkPicker, linkVar, useLinks, } from './lumen-links.js';
 import { LumenSelector } from './lumen-selector.js';
 import { LumenFreshness, LumenLazy, LumenLoadFooter, LumenRefresh, LumenStates, } from './lumen-source.js';
-import { TrendBody } from './lumen-trend.js';
 import { AllocationBar, Donut, Headline, RankedBars, STACK_MAX, StackedBars, } from './lumen-widget-charts.js';
 import { useHasMarket } from './market/live.js';
 import { useBarsUrl, useLumenChart } from './market/lumen-chart.js';
-import { MarketWidget } from './market/market-widget.js';
 import { maskAmount, useAmountsHidden } from './shell.js';
 import { SummaryCardsEditor, summaryCardIssues } from './summary-cards.js';
 import { Badge } from './ui/badge.js';
@@ -51,6 +49,12 @@ import { computedOf, label, summaryCash, } from './view-model.js';
 import { WidgetControlsEditor } from './widget-controls.js';
 import { PAGE_SOURCE, useWidgetDataOptions } from './widget-data.js';
 import { dateFields } from './widget-settings.js';
+// Loaded when it first shows (lazy-part.tsx).
+const MarketWidget = lazyPart(() => import('./market/market-widget.js').then((m) => m.MarketWidget), _jsx(Skeleton, { className: "h-full min-h-40 w-full" }));
+// Loaded when it first shows (lazy-part.tsx).
+const TrendBody = lazyPart(() => import('./lumen-trend.js').then((m) => m.TrendBody), _jsx(Skeleton, { className: "h-full min-h-40 w-full" }));
+// Loaded when it first shows (lazy-part.tsx).
+const GrowthChart = lazyPart(() => import('./growth-chart.js').then((m) => m.GrowthChart), _jsx(Skeleton, { className: "h-full min-h-40 w-full" }));
 /** Each style's icon, by its id in `WIDGET_STYLES`; a style left out takes its kind's. */
 const STYLE_ICONS = {
     'table:table': TableIcon,

package/dist/market/chart-span.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Time spans on a chart's bars, apart from the chart itself so a page can work them out without
+ * loading the chart (lightweight-charts) before it shows.
+ */
+import type { Time } from 'lightweight-charts';
+/** A bar's time as Unix seconds (days read as UTC midnight). */
+export declare const secOf: (t: string | number | Time) => number;
+/** A span of time in Unix seconds; either end may be infinite (from the first bar, to the last). */
+export interface TimeSpan {
+    from: number;
+    to: number;
+}
+/** First index whose time is at or after `t` (`secs` ascending); `secs.length` when none is. */
+export declare function lowerBound(secs: number[], t: number): number;
+/** The bars of `secs` inside `span`, as an index range (at least one bar). */
+export declare function indexSpan(secs: number[], span: TimeSpan): [number, number];

package/dist/market/chart-span.js

@@ -0,0 +1,26 @@
+/** A bar's time as Unix seconds (days read as UTC midnight). */
+export const secOf = (t) => typeof t === 'number'
+    ? t
+    : typeof t === 'string'
+        ? Date.parse(`${t}T00:00:00Z`) / 1000
+        : Date.UTC(t.year, t.month - 1, t.day) / 1000;
+/** First index whose time is at or after `t` (`secs` ascending); `secs.length` when none is. */
+export function lowerBound(secs, t) {
+    let lo = 0;
+    let hi = secs.length;
+    while (lo < hi) {
+        const mid = (lo + hi) >> 1;
+        if (secs[mid] < t)
+            lo = mid + 1;
+        else
+            hi = mid;
+    }
+    return lo;
+}
+/** The bars of `secs` inside `span`, as an index range (at least one bar). */
+export function indexSpan(secs, span) {
+    const last = secs.length - 1;
+    const a = Math.min(last, lowerBound(secs, span.from));
+    const b = Math.max(a, Math.min(last, lowerBound(secs, span.to + 1) - 1));
+    return [a, b];
+}

package/dist/market/lumen-chart.d.ts

@@ -18,7 +18,7 @@ import { type MarketBar, type MarketWindow } from '@columenlabs/lumen-ui-types/m
 import { type ReactNode } from 'react';
 import { type LumenLoad } from '../lumen-source.js';
 import { type ChartIndicator } from './indicators.js';
-import { type ChartBar } from './price-chart.js';
+import type { ChartBar } from './price-chart.js';
 /** Opens the chart dialog: one symbol, or up to 8 to compare, with its indicators if given. */
 export type OpenChart = (symbols: string | string[], indicators?: IndicatorSpec[]) => void;
 /**

package/dist/market/lumen-chart.js

@@ -6,6 +6,7 @@ import { createContext, useCallback, useContext, useEffect, useMemo, useRef, use
 import { useInView } from 'react-intersection-observer';
 import { useAssistantMoves } from '../assistant-screen.js';
 import { IconButton } from '../icon-button.js';
+import { lazyPart } from '../lazy-part.js';
 import { cn } from '../lib/utils.js';
 import { useLumenLoad } from '../lumen-source.js';
 import { usePrefs } from '../prefs.js';
@@ -15,11 +16,13 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } f
 import { Input } from '../ui/input.js';
 import { Skeleton } from '../ui/skeleton.js';
 import { ToggleGroup, ToggleGroupItem } from '../ui/toggle-group.js';
-import { CompareChart } from './compare-chart.js';
+import { indexSpan, secOf } from './chart-span.js';
 import { ALL_SHOWN, IndicatorPicker } from './indicator-picker.js';
 import { CHART_INDICATORS, computeIndicators, formulaIndicator, lineColor, resolveIndicator, } from './indicators.js';
 import { extendedOf, todayOf, useMarket } from './live.js';
-import { PriceChart, indexSpan, secOf } from './price-chart.js';
+// The charts load when the dialog first draws one (lazy-part.tsx).
+const PriceChart = lazyPart(() => import('./price-chart.js').then((m) => m.PriceChart), _jsx(Skeleton, { className: "h-96 w-full" }));
+const CompareChart = lazyPart(() => import('./compare-chart.js').then((m) => m.CompareChart), _jsx(Skeleton, { className: "h-96 w-full" }));
 const ChartContext = createContext(null);
 const BarsContext = createContext(null);
 const IndicatorsContext = createContext(null);

package/dist/market/price-chart.d.ts

@@ -6,6 +6,7 @@
  * financial time axis and panning (approved in the market-live design).
  */
 import { type IChartApi, type Time } from 'lightweight-charts';
+import { type TimeSpan } from './chart-span.js';
 import { type ChartIndicator, type IndicatorValues } from './indicators.js';
 /** One bar: `time` is a `YYYY-MM-DD` day or Unix seconds. */
 export interface ChartBar {
@@ -67,15 +68,7 @@ export declare function useTheme(): {
 export declare const alpha: (c: string, a: number) => string;
 /** Time labels in the person's zone (the axis would otherwise read UTC). */
 export declare function timeText(t: Time, zone: string, withDay: boolean): string;
-/** A bar's time as Unix seconds (days read as UTC midnight). */
-export declare const secOf: (t: string | number | Time) => number;
-/** A span of time in Unix seconds; either end may be infinite (from the first bar, to the last). */
-export interface TimeSpan {
-    from: number;
-    to: number;
-}
-/** The bars of `secs` inside `span`, as an index range (at least one bar). */
-export declare function indexSpan(secs: number[], span: TimeSpan): [number, number];
+export { indexSpan, secOf, type TimeSpan } from './chart-span.js';
 export interface PriceChartProps {
     bars: ChartBar[];
     /** Bars shown at first, counted from the latest; left out: all of them. */
@@ -125,4 +118,3 @@ export declare function Navigator({ chart, bars, secs, timeline, theme, timeZone
     multiDay: boolean;
     goTo: (span: TimeSpan) => void;
 }): import("react").JSX.Element;
-export {};

package/dist/market/price-chart.js

@@ -9,6 +9,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AreaSeries, BarSeries, CandlestickSeries, ColorType, CrosshairMode, HistogramSeries, LineSeries, createChart, } from 'lightweight-charts';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { cn } from '../lib/utils.js';
+import { indexSpan, lowerBound, secOf } from './chart-span.js';
 import { lineColor } from './indicators.js';
 /** How the price is drawn: the basics every charting tool offers. */
 export const CHART_TYPES = [
@@ -99,32 +100,7 @@ export function timeText(t, zone, withDay) {
         ...(withDay ? { month: 'short', day: 'numeric' } : {}),
     });
 }
-/** A bar's time as Unix seconds (days read as UTC midnight). */
-export const secOf = (t) => typeof t === 'number'
-    ? t
-    : typeof t === 'string'
-        ? Date.parse(`${t}T00:00:00Z`) / 1000
-        : Date.UTC(t.year, t.month - 1, t.day) / 1000;
-/** First index whose time is at or after `t` (`secs` ascending); `secs.length` when none is. */
-function lowerBound(secs, t) {
-    let lo = 0;
-    let hi = secs.length;
-    while (lo < hi) {
-        const mid = (lo + hi) >> 1;
-        if (secs[mid] < t)
-            lo = mid + 1;
-        else
-            hi = mid;
-    }
-    return lo;
-}
-/** The bars of `secs` inside `span`, as an index range (at least one bar). */
-export function indexSpan(secs, span) {
-    const last = secs.length - 1;
-    const a = Math.min(last, lowerBound(secs, span.from));
-    const b = Math.max(a, Math.min(last, lowerBound(secs, span.to + 1) - 1));
-    return [a, b];
-}
+export { indexSpan, secOf } from './chart-span.js';
 /** One chart: price in the chosen type, volume, then a pane per oscillator, all sharing the time axis. */
 export function PriceChart({ bars, visible, type, chosen, values, timeZone = 'America/Los_Angeles', zoom = false, navigator = false, baseline = null, timeline, range, onRange, onOutside, className, }) {
     const host = useRef(null);

package/dist/shell.js

@@ -7,6 +7,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useRouterState } from '@tanstack/react-router';
 import { ChevronsUpDownIcon, LogOutIcon, ScrollTextIcon, SettingsIcon, SunMoonIcon, } from 'lucide-react';
 import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
+import { lazyPart } from './lazy-part.js';
 import { cn } from './lib/utils.js';
 import { LumenFinder } from './lumen-finder.js';
 import { usePrefs } from './prefs.js';
@@ -19,7 +20,8 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem,
 import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarRail, useSidebar, } from './ui/sidebar.js';
 import { Toaster } from './ui/sonner.js';
 import { TooltipProvider } from './ui/tooltip.js';
-import { WhatsNew } from './whats-new.js';
+// Loaded when it first shows (lazy-part.tsx).
+const WhatsNew = lazyPart(() => import('./whats-new.js').then((m) => m.WhatsNew), null);
 const Ctx = createContext(null);
 export function useShell() {
     const c = useContext(Ctx);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.88",
+  "version": "0.1.89",
   "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.88",
+    "@columenlabs/lumen-ui-types": "0.1.89",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",