@columenlabs/lumen-ui 0.1.23 → 0.1.25

package/NOTICE

@@ -8,5 +8,5 @@ chart's own logo, so per that library's NOTICE, an app that shows these charts
 should link to https://www.tradingview.com/ somewhere a user can find it (an
 About page or footer is enough).
 
-The components under packages/lumen/src/ui are based on shadcn/ui
+The components under packages/ui/src/ui are based on shadcn/ui
 (https://ui.shadcn.com), MIT License, Copyright (c) 2023 shadcn.

package/README.md

@@ -2,4 +2,4 @@
 
 Lumen's components: the app frame (`LumenShell`), pages and views (`LumenLayout`, `LumenView`, `LumenTable`, `LumenWidget`, `LumenCard`), charts (`LumenChart`), `LumenDrawer`, `LumenSelector`, the shadcn parts under `ui/*` and one `theme.css`. Its types are in `@columenlabs/lumen-ui-types`.
 
-See the [Lumen README](https://github.com/columenlabs/lumen-ui#readme) for install and use. MIT.
+See the [Lumen README](https://github.com/columenlabs/lumen#readme) for install and use. MIT.

package/dist/shell.d.ts

@@ -58,6 +58,8 @@ export interface LumenShellProps {
     /** Turns on What's new: the app's releases API (`GET ?limit=&before=` answering `{releases}`).
      *  The status bar shows the newest version, which opens each release's Key takeaways. */
     releases?: string;
+    /** What's new's app chips: each app's label by id, matched to a takeaway's `apps`. */
+    releaseApps?: Record<string, ReactNode>;
     /** The app's own Settings sections, listed after General and the product's. */
     settings?: SettingsSectionDef[];
     /** Sections every app of the product shows, listed after General under `sharedLabel`. */
@@ -89,7 +91,7 @@ export interface LumenShellProps {
     /** The routed page (usually `<Outlet />`). */
     children: ReactNode;
 }
-export declare function LumenShell({ app, appLabel, brand, nav, status, health, statusEnd, releases, settings, shared, sharedLabel, user, signOutUrl, profile, security, onRefresh, hideAmounts, onLogs, headerActions, panel, finder, wrap, children, }: LumenShellProps): import("react").JSX.Element;
+export declare function LumenShell({ app, appLabel, brand, nav, status, health, statusEnd, releases, releaseApps, settings, shared, sharedLabel, user, signOutUrl, profile, security, onRefresh, hideAmounts, onLogs, headerActions, panel, finder, wrap, children, }: LumenShellProps): import("react").JSX.Element;
 /** A status bar entry: an optional health dot, a label and a mono value. */
 export declare function StatusItem({ label, value, ok, className, }: {
     label: ReactNode;

package/dist/shell.js

@@ -88,7 +88,7 @@ const settingsFromUrl = (() => {
     window.history.replaceState(window.history.state, '', url);
     return at || 'profile';
 })();
-export function LumenShell({ app, appLabel, brand, nav, status, health, statusEnd, releases, settings, shared, sharedLabel, user = null, signOutUrl, profile, security, onRefresh, hideAmounts = false, onLogs, headerActions = null, panel, finder, wrap = (frame) => frame, children, }) {
+export function LumenShell({ app, appLabel, brand, nav, status, health, statusEnd, releases, releaseApps, settings, shared, sharedLabel, user = null, signOutUrl, profile, security, onRefresh, hideAmounts = false, onLogs, headerActions = null, panel, finder, wrap = (frame) => frame, children, }) {
     const [statusSlot, setStatusSlot] = useState(null);
     const [refreshing, setRefreshing] = useState(false);
     // Refresh reloads the layout too: once the data is fresh the page mounts
@@ -129,7 +129,7 @@ export function LumenShell({ app, appLabel, brand, nav, status, health, statusEn
             refreshing,
             hideAmounts,
             headerActions,
-        }, children: _jsx(SourceHealthProvider, { children: wrap(_jsx(TooltipProvider, { delayDuration: 200, children: _jsx(SidebarProvider, { defaultOpen: sidebarOpen(), children: _jsxs(LumenFinder, { app: app, settings: findSettings, openSettings: openSettings, config: finder, children: [_jsx(CloseDrawerOnNavigate, {}), _jsxs(Sidebar, { collapsible: "icon", children: [_jsx(SidebarHeader, { children: brand }), _jsx(SidebarContent, { children: nav }), _jsx(SidebarFooter, { children: _jsx(NavUser, { who: user, signOutUrl: signOutUrl, onSettings: () => openSettings(), onLogs: onLogs }) }), _jsx(SidebarRail, {})] }), _jsxs(SidebarInset, { className: "flex min-h-svh min-w-0 flex-col", children: [_jsx("div", { className: "flex min-w-0 flex-1 flex-col", children: children }, epoch), _jsxs("footer", { "data-slot": "shell-status", "aria-label": "Status", className: "sticky bottom-0 z-10 flex h-(--shell-status-height) shrink-0 items-center gap-4 overflow-x-auto overflow-y-hidden border-t bg-background px-(--shell-gutter) text-xs whitespace-nowrap text-muted-foreground", children: [status, _jsx("div", { ref: setStatusSlot, className: "flex shrink-0 items-center gap-4" }), _jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-1", children: [health, releases && _jsx(WhatsNew, { api: releases }), statusEnd, _jsx(StatusTimeZone, {})] })] })] }), panel, _jsx(LumenSettings, { open: settingsAt !== null, section: settingsAt ?? lastSection, onOpen: openSettings, onClose: () => setSettingsAt(null), appLabel: appLabel, profile: profile, security: security, sections: settings, shared: shared, sharedLabel: sharedLabel }), _jsx(Toaster, { position: "bottom-right" })] }) }) })) }) }));
+        }, children: _jsx(SourceHealthProvider, { children: wrap(_jsx(TooltipProvider, { delayDuration: 200, children: _jsx(SidebarProvider, { defaultOpen: sidebarOpen(), children: _jsxs(LumenFinder, { app: app, settings: findSettings, openSettings: openSettings, config: finder, children: [_jsx(CloseDrawerOnNavigate, {}), _jsxs(Sidebar, { collapsible: "icon", children: [_jsx(SidebarHeader, { children: brand }), _jsx(SidebarContent, { children: nav }), _jsx(SidebarFooter, { children: _jsx(NavUser, { who: user, signOutUrl: signOutUrl, onSettings: () => openSettings(), onLogs: onLogs }) }), _jsx(SidebarRail, {})] }), _jsxs(SidebarInset, { className: "flex min-h-svh min-w-0 flex-col", children: [_jsx("div", { className: "flex min-w-0 flex-1 flex-col", children: children }, epoch), _jsxs("footer", { "data-slot": "shell-status", "aria-label": "Status", className: "sticky bottom-0 z-10 flex h-(--shell-status-height) shrink-0 items-center gap-4 overflow-x-auto overflow-y-hidden border-t bg-background px-(--shell-gutter) text-xs whitespace-nowrap text-muted-foreground", children: [status, _jsx("div", { ref: setStatusSlot, className: "flex shrink-0 items-center gap-4" }), _jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-1", children: [health, releases && _jsx(WhatsNew, { api: releases, apps: releaseApps }), statusEnd, _jsx(StatusTimeZone, {})] })] })] }), panel, _jsx(LumenSettings, { open: settingsAt !== null, section: settingsAt ?? lastSection, onOpen: openSettings, onClose: () => setSettingsAt(null), appLabel: appLabel, profile: profile, security: security, sections: settings, shared: shared, sharedLabel: sharedLabel }), _jsx(Toaster, { position: "bottom-right" })] }) }) })) }) }));
 }
 /** A status bar entry: an optional health dot, a label and a mono value. */
 export function StatusItem({ label, value, ok, className, }) {

package/dist/whats-new.d.ts

@@ -1,3 +1,8 @@
-export declare function WhatsNew({ api }: {
+import { type ReactNode } from 'react';
+export declare function WhatsNew({ api, apps, everyone, }: {
     api: string;
+    /** Each app's chip label by id, in the order groups list them; left out: no app chips. */
+    apps?: Record<string, ReactNode>;
+    /** The chip of a takeaway about no one app. */
+    everyone?: string;
 }): import("react").JSX.Element | null;

package/dist/whats-new.js

@@ -3,7 +3,9 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // every app): the version in the status bar opens the release notes, newest
 // first, each release's Key takeaways only. An app turns it on with LumenShell's `releases`, its
 // releases API (`GET ?limit=&before=` answering `{releases}`), which leaves out what the person can't
-// open; a host that answers 404 (self-host an app) keeps the version hidden.
+// open; a host that answers 404 (self-host an app) keeps the version hidden. With `apps`, each
+// takeaway carries a chip of the app it is about (`apps` on the takeaway; none: everyone), and a
+// release where one app has `GROUP_AT` or more is split into one sub-section per app.
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { useState } from 'react';
 import Markdown from 'react-markdown';
@@ -22,6 +24,10 @@ const TYPES = {
 };
 const ORDER = Object.keys(TYPES);
 const PAGE = 20;
+/** A release is split by app once one app has this many takeaways in it. */
+const GROUP_AT = 3;
+/** The group of takeaways about no one app. */
+const EVERYONE = '';
 async function page(api, before) {
     const q = new URLSearchParams({ limit: String(PAGE) });
     if (before)
@@ -33,7 +39,7 @@ async function page(api, before) {
         throw new Error(`releases ${r.status}`);
     return (await r.json()).releases;
 }
-export function WhatsNew({ api }) {
+export function WhatsNew({ api, apps, everyone = 'Global', }) {
     const [open, setOpen] = useState(false);
     const { timeZone } = usePrefs();
     const q = useInfiniteQuery({
@@ -49,5 +55,34 @@ export function WhatsNew({ api }) {
     if (!latest)
         return null;
     const day = (at) => new Date(at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', timeZone });
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "sm", className: "num h-6 px-1.5 text-muted-foreground text-xs", onClick: () => setOpen(true), title: "What's new", children: latest.tag }), _jsx(LumenDrawer, { open: open, onClose: () => setOpen(false), title: "What's new", description: "Key takeaways of each release, newest first", footerStart: `${releases.length} releases`, footer: _jsxs(_Fragment, { children: [q.hasNextPage && (_jsx(Button, { variant: "outline", size: "sm", disabled: q.isFetchingNextPage, onClick: () => q.fetchNextPage(), children: "Show more" })), _jsx(Button, { size: "sm", onClick: () => setOpen(false), children: "Close" })] }), children: releases.map((r, i) => (_jsx(DrawerSection, { title: r.tag, hint: day(r.published_at), defaultOpen: i === 0, children: r.takeaways.length ? (_jsx("ul", { className: "list-disc space-y-1.5 py-1 pr-1 pl-5 text-sm leading-relaxed [&_strong]:font-semibold", children: r.takeaways.map((t) => (_jsxs("li", { children: [t.types.length > 0 && (_jsx("span", { className: "mr-1.5 inline-flex flex-wrap gap-1 align-middle", children: ORDER.filter((k) => t.types.includes(k)).map((k) => (_jsx(Badge, { variant: TYPES[k].variant, className: "px-1.5", children: TYPES[k].label }, k))) })), _jsx(Markdown, { allowedElements: ['strong', 'em', 'code'], unwrapDisallowed: true, children: t.text })] }, t.text))) })) : (_jsx("p", { className: "py-1 pl-1 text-muted-foreground text-sm", children: "Nothing new for you in this one." })) }, r.tag))) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "sm", className: "num h-6 px-1.5 text-muted-foreground text-xs", onClick: () => setOpen(true), title: "What's new", children: latest.tag }), _jsx(LumenDrawer, { open: open, onClose: () => setOpen(false), title: "What's new", description: "Key takeaways of each release, newest first", footerStart: `${releases.length} releases`, footer: _jsxs(_Fragment, { children: [q.hasNextPage && (_jsx(Button, { variant: "outline", size: "sm", disabled: q.isFetchingNextPage, onClick: () => q.fetchNextPage(), children: "Show more" })), _jsx(Button, { size: "sm", onClick: () => setOpen(false), children: "Close" })] }), children: releases.map((r, i) => (_jsx(DrawerSection, { title: r.tag, hint: day(r.published_at), defaultOpen: i === 0, children: r.takeaways.length ? (_jsx(Notes, { takeaways: r.takeaways, apps: apps, everyone: everyone })) : (_jsx("p", { className: "py-1 pl-1 text-muted-foreground text-sm", children: "Nothing new for you in this one." })) }, r.tag))) })] }));
+}
+/** One release's takeaways: a flat list, or one sub-section per app once one app has many. */
+function Notes({ takeaways, apps, everyone, }) {
+    const appOf = (t) => t.apps?.find((a) => apps?.[a] != null) ?? EVERYONE;
+    const groups = new Map();
+    for (const t of takeaways) {
+        const k = apps ? appOf(t) : EVERYONE;
+        groups.set(k, [...(groups.get(k) ?? []), t]);
+    }
+    const split = apps && groups.size > 1 && [...groups.values()].some((g) => g.length >= GROUP_AT);
+    if (!split)
+        return _jsx(List, { takeaways: takeaways, apps: apps, everyone: everyone });
+    const order = Object.keys(apps);
+    const rank = (k) => (k === EVERYONE ? order.length : order.indexOf(k));
+    const keys = [...groups.keys()].sort((a, b) => (groups.get(b)?.length ?? 0) - (groups.get(a)?.length ?? 0) || rank(a) - rank(b));
+    return (_jsx("div", { className: "space-y-2 py-1", children: keys.map((k) => (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-1.5 pl-1 text-muted-foreground text-xs", children: [_jsx(AppChip, { label: k ? apps[k] : everyone }), _jsx("span", { className: "num", children: groups.get(k)?.length })] }), _jsx(List, { takeaways: groups.get(k) ?? [], apps: apps, everyone: everyone, group: k })] }, k || 'everyone'))) }));
+}
+/** Takeaways as bullets: app chips (bar the group's own), then type chips, then the text. */
+function List({ takeaways, apps, everyone, group, }) {
+    return (_jsx("ul", { className: "list-disc space-y-1.5 py-1 pr-1 pl-5 text-sm leading-relaxed [&_strong]:font-semibold", children: takeaways.map((t) => {
+            const own = (t.apps ?? []).filter((a) => apps?.[a] != null);
+            const chips = apps
+                ? (own.length ? own : [EVERYONE]).filter((a) => group === undefined || a !== group)
+                : [];
+            return (_jsxs("li", { children: [(chips.length > 0 || t.types.length > 0) && (_jsxs("span", { className: "mr-1.5 inline-flex flex-wrap gap-1 align-middle", children: [chips.map((a) => (_jsx(AppChip, { label: a ? apps?.[a] : everyone }, a || 'everyone'))), ORDER.filter((k) => t.types.includes(k)).map((k) => (_jsx(Badge, { variant: TYPES[k].variant, className: "px-1.5", children: TYPES[k].label }, k)))] })), _jsx(Markdown, { allowedElements: ['strong', 'em', 'code'], unwrapDisallowed: true, children: t.text })] }, t.text));
+        }) }));
+}
+function AppChip({ label }) {
+    return (_jsx(Badge, { variant: "outline", className: "px-1.5 font-semibold", children: label }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.23",
+  "version": "0.1.25",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -25,13 +25,13 @@
   "sideEffects": [
     "**/*.css"
   ],
-  "homepage": "https://github.com/columenlabs/lumen-ui",
+  "homepage": "https://github.com/columenlabs/lumen",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/columenlabs/lumen-ui.git",
-    "directory": "packages/lumen"
+    "url": "git+https://github.com/columenlabs/lumen.git",
+    "directory": "packages/ui"
   },
-  "bugs": "https://github.com/columenlabs/lumen-ui/issues",
+  "bugs": "https://github.com/columenlabs/lumen/issues",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -41,7 +41,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.23",
+    "@columenlabs/lumen-ui-types": "0.1.25",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",