@columenlabs/lumen-ui 0.1.171 → 0.1.173

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export { LumenLayout, type LumenLayoutCard, type LumenLayoutProps, type LumenLay
 export { LumenViewCard, type LumenViewCardProps } from './lumen-view-card.js';
 export { LumenSelector, LumenSelectorList, type LumenSelectorListHandle, type LumenSelectorProps, type LumenOption, type LumenOptionGroup, SelectorRowContent, } from './lumen-selector.js';
 export { ColorChip, ColorDot, colorIcon } from './color-dot.js';
+export { TagChips, tagColor, tagIcon } from './tag-chips.js';
 export { EditCell, EditInputCell } from './view-edit-cell.js';
 export { type CardOnScreen, cardsOnScreen, kindName, onScreen, pointAt, pointAtCard, type PointedAt, type SectionOnScreen, sectionsOnScreen, spotlight, targetEl, textOf, } from './spotlight.js';
 export { LinkDot, LinkPicker, type LinkColor, linkVar } from './lumen-links.js';
@@ -45,7 +46,7 @@ export { RenameField, type RenameFieldProps } from './rename-field.js';
 export { LumenStackedList, type LumenStackedListProps, LumenStackedRow, type LumenStackedRowProps, type StackedColumn, } from './lumen-stacked-list.js';
 export { ResetButton, type ResetButtonProps } from './reset-button.js';
 export { type ChartBand, type ChartMarker, GrowthChart, KEY_DATE_KINDS, KeyDateChips, type KeyDateKind, type KeyDateMarker, PALETTE, type Scale, type Series, benchColour, keyDateMarkers, paletteAt, } from './growth-chart.js';
-export { FoldGroup, NavGroup, type NavItem, type SectionItem, type SectionSubItem, SidebarSection, } from './nav.js';
+export { FoldGroup, LumenTabBar, NavGroup, type NavItem, type SectionItem, type SectionSubItem, SidebarSection, } from './nav.js';
 export { type OverviewPageProps, type OverviewStage, type OverviewTone, type OverviewWidget, OverviewList, OverviewPage, ToneDot, } from './overview.js';
 export { type Crumb, IconButton, type IconButtonProps, Page, PageBody, PageHeader, type PageHeaderProps, } from './page.js';
 export { DEFAULT_PREFS, deviceTimeZone, type Prefs, TIME_ZONES, type Theme, type TimeZoneId, getPrefs, resolvedTheme, setPref, timeZoneLabel, usePrefs, zoneAbbr, ASSISTANT_WIDTH, } from './prefs.js';

package/dist/index.js

@@ -10,6 +10,7 @@ export { LumenLayout, domainKeys, followRows, } from './lumen-layout.js';
 export { LumenViewCard } from './lumen-view-card.js';
 export { LumenSelector, LumenSelectorList, SelectorRowContent, } from './lumen-selector.js';
 export { ColorChip, ColorDot, colorIcon } from './color-dot.js';
+export { TagChips, tagColor, tagIcon } from './tag-chips.js';
 export { EditCell, EditInputCell } from './view-edit-cell.js';
 export { cardsOnScreen, kindName, onScreen, pointAt, pointAtCard, sectionsOnScreen, spotlight, targetEl, textOf, } from './spotlight.js';
 export { LinkDot, LinkPicker, linkVar } from './lumen-links.js';
@@ -52,7 +53,7 @@ export { RenameField } from './rename-field.js';
 export { LumenStackedList, LumenStackedRow, } from './lumen-stacked-list.js';
 export { ResetButton } from './reset-button.js';
 export { GrowthChart, KEY_DATE_KINDS, KeyDateChips, PALETTE, benchColour, keyDateMarkers, paletteAt, } from './growth-chart.js';
-export { FoldGroup, NavGroup, SidebarSection, } from './nav.js';
+export { FoldGroup, LumenTabBar, NavGroup, SidebarSection, } from './nav.js';
 export { OverviewList, OverviewPage, ToneDot, } from './overview.js';
 export { IconButton, Page, PageBody, PageHeader, } from './page.js';
 export { DEFAULT_PREFS, deviceTimeZone, TIME_ZONES, getPrefs, resolvedTheme, setPref, timeZoneLabel, usePrefs, zoneAbbr, ASSISTANT_WIDTH, } from './prefs.js';

package/dist/lumen-view.js

@@ -29,6 +29,7 @@ import { MAX_COMPARE, useSymbolChart } from './market/lumen-chart.js';
 import { LumenPageFooter, LumenPager } from './pager.js';
 import { maskAmount, useAmountsHidden } from './shell.js';
 import { useSymbolSheet } from './symbol-sheet-context.js';
+import { TagChips, tagColor, tagIcon } from './tag-chips.js';
 import { Badge } from './ui/badge.js';
 import { Button } from './ui/button.js';
 import { Checkbox } from './ui/checkbox.js';
@@ -66,6 +67,17 @@ export function mergeRows(domain, rows, groupBy) {
 const MINUS = '−';
 /** Text cells longer than this many characters are cut to one line with a tooltip. */
 const LONG_TEXT = 48;
+/** A tags field's tags for a row: its `values`, else its text split on commas. */
+function tagsOf(f, row, v) {
+    if (f.values)
+        return f.values(row);
+    return typeof v === 'string'
+        ? v
+            .split(',')
+            .map((t) => t.trim())
+            .filter(Boolean)
+        : [];
+}
 /** Rows of a view the assistant sees with each message. */
 const ASSISTANT_ROWS = 10;
 const formatter = (digits) => new Intl.NumberFormat('en-US', { minimumFractionDigits: digits, maximumFractionDigits: digits });
@@ -555,12 +567,16 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
     const valueCellOf = (f, row, chip, v) => {
         if (f.render)
             return f.render(row);
+        if (f.tags && !f.edit?.many)
+            return (_jsx(TagChips, { tags: tagsOf(f, row, v), colorOf: f.color, iconOf: f.iconOf, empty: f.empty }));
         if (!f.edit)
             return (_jsx(ViewValueCell, { value: v, format: f.format, chip: chip, tone: chip ? f.tone?.(row) : undefined, color: typeof v === 'string' ? f.color?.(v) : undefined, amount: f.amount, compact: f.compact, empty: f.empty }));
         const edit = f.edit;
         const many = edit.many;
         if (many)
-            return (_jsx(EditManyCell, { label: f.label, values: f.values?.(row) ?? (typeof v === 'string' && v !== '' ? [v] : []), options: options.get(f.key)?.inUse ?? [], unused: options.get(f.key)?.unused, note: edit.note?.(row), colorOf: f.color, iconOf: f.iconOf, onSave: (values) => many(row, values) }));
+            return (_jsx(EditManyCell, { label: f.label, values: f.tags
+                    ? tagsOf(f, row, v)
+                    : (f.values?.(row) ?? (typeof v === 'string' && v !== '' ? [v] : [])), options: options.get(f.key)?.inUse ?? [], unused: options.get(f.key)?.unused, note: edit.note?.(row), colorOf: f.tags ? (t) => f.color?.(t) ?? tagColor(t) : f.color, iconOf: f.tags ? (t) => f.iconOf?.(t) ?? tagIcon(t) : f.iconOf, onSave: (values) => many(row, values) }));
         const save = edit.save;
         if (!save)
             return _jsx(ViewValueCell, { value: v, format: f.format, chip: chip });
@@ -895,8 +911,10 @@ function PivotTable({ domain, rows, pivot, }) {
 /** A group heading's mark: its value's icon in its colour, else its colour's dot, else the
  *  field's icon. */
 function GroupMark({ field, value }) {
-    const color = field.color?.(value);
-    const Icon = field.iconOf?.(value);
+    // A tags field's one tag takes its own colour and icon, as its chips do.
+    const tag = field.tags && !value.includes(',');
+    const color = field.color?.(value) ?? (tag ? tagColor(value) : undefined);
+    const Icon = field.iconOf?.(value) ?? (tag ? tagIcon(value) : undefined);
     if (Icon)
         return (_jsx("span", { className: "inline-flex", style: color ? { color } : undefined, children: _jsx(Icon, { className: "size-3.5" }) }));
     if (color)

package/dist/nav.d.ts

@@ -79,3 +79,10 @@ export declare function SidebarSection({ label, items, onAdd, addLabel, onRemove
     /** What its nested items stand for; plain pages by default. */
     assistantSubType?: AssistantPageType;
 }): import("react").JSX.Element;
+/**
+ * The phone's bottom tab bar (`LumenShell tabs`): up to four of the app's pages, then More, which
+ * opens the sidebar with every page. Phone only; the desktop keeps the sidebar.
+ */
+export declare function LumenTabBar({ items }: {
+    items: NavItem[];
+}): import("react").JSX.Element | null;

package/dist/nav.js

@@ -5,7 +5,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // A section header folds its items: it lights up on hover with a chevron after
 // the name, a click folds it, the fold is remembered in the browser, and `+` never folds.
 import { Link, useRouterState } from '@tanstack/react-router';
-import { ChevronRightIcon, PlusIcon, Trash2Icon } from 'lucide-react';
+import { ChevronRightIcon, MenuIcon, PlusIcon, Trash2Icon } from 'lucide-react';
 import { useAssistantPages } from './assistant-screen.js';
 import { LumenConfirm } from './confirm.js';
 import { useFolded } from './fold.js';
@@ -112,3 +112,20 @@ export function SidebarSection({ label, items, onAdd, addLabel = `Add to ${label
                             ? [0, 1].map((i) => (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuSkeleton, { showIcon: true }) }, i)))
                             : items.map((item) => (_jsx(SectionRow, { item: item, activeId: activeId, onRemove: onRemove, removeLabel: removeLabel }, item.id))), !loading && !items.length && empty && (_jsx("li", { className: "px-2 py-1 text-xs text-muted-foreground group-data-[collapsible=icon]:hidden", children: empty }))] }), children && _jsx("div", { className: "group-data-[collapsible=icon]:hidden", children: children })] }) }));
 }
+/**
+ * The phone's bottom tab bar (`LumenShell tabs`): up to four of the app's pages, then More, which
+ * opens the sidebar with every page. Phone only; the desktop keeps the sidebar.
+ */
+export function LumenTabBar({ items }) {
+    const { isMobile, openMobile, setOpenMobile } = useSidebar();
+    const match = useMatch();
+    if (!isMobile || !items.length)
+        return null;
+    const tabs = items.slice(0, 4);
+    const scores = tabs.map((t) => match(t));
+    const best = Math.max(...scores);
+    return (_jsxs("nav", { "data-slot": "shell-tabbar", "aria-label": "Main", className: "sticky bottom-0 z-20 grid h-[calc(var(--shell-tabbar-height)+env(safe-area-inset-bottom))] shrink-0 grid-cols-5 border-t bg-background pb-[env(safe-area-inset-bottom)]", children: [tabs.map((t, i) => {
+                const on = best >= 0 && scores[i] === best;
+                return (_jsxs(Link, { to: t.to, "aria-current": on ? 'page' : undefined, className: cn('flex min-w-0 flex-col items-center justify-center gap-0.5 text-xs text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none', on && 'font-semibold text-primary'), children: [_jsx(t.icon, { className: "size-5" }), _jsx("span", { className: "max-w-full truncate px-1", children: t.title })] }, t.to));
+            }), _jsxs("button", { type: "button", "aria-expanded": openMobile, onClick: () => setOpenMobile(true), className: cn('flex min-w-0 flex-col items-center justify-center gap-0.5 text-xs text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none', best < 0 && 'font-semibold text-primary'), children: [_jsx(MenuIcon, { className: "size-5" }), _jsx("span", { children: "More" })] })] }));
+}

package/dist/shell.d.ts

@@ -1,5 +1,6 @@
 import { type ReactNode } from 'react';
 import { type LumenFinderConfig } from './lumen-finder.js';
+import { type NavItem } from './nav.js';
 import { type SettingsGroupDef, type SettingsSectionDef } from './settings.js';
 import { type StatusBarModel } from './status-bar.js';
 interface ShellContext {
@@ -54,6 +55,8 @@ export interface LumenShellProps {
     brand: ReactNode;
     /** The app's sidebar content: `NavGroup`s and `SidebarSection`s. */
     nav: ReactNode;
+    /** The phone's bottom tab bar: up to four main pages, then More (the sidebar). None by default. */
+    tabs?: NavItem[];
     /** The app's status bar (DESIGN.md, Status bar): its sync and messages as data; pages add theirs
      *  with `useStatus`. Running Tasks of this app show by themselves. */
     bar?: StatusBarModel;
@@ -101,7 +104,7 @@ export interface LumenShellProps {
     /** The routed page (usually `<Outlet />`). */
     children: ReactNode;
 }
-export declare function LumenShell({ app, appLabel, brand, nav, bar, status, health, statusEnd, releases, releaseApps, settings, shared, sharedLabel, settingsGroups, 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, tabs, bar, status, health, statusEnd, releases, releaseApps, settings, shared, sharedLabel, settingsGroups, 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 its value ("Mail · Up to date"). */
 export declare function StatusItem({ label, value, ok, className, }: {
     label: ReactNode;

package/dist/shell.js

@@ -10,6 +10,7 @@ import { createContext, useCallback, useContext, useEffect, useMemo, useState, }
 import { lazyPart } from './lazy-part.js';
 import { cn } from './lib/utils.js';
 import { LumenFinder } from './lumen-finder.js';
+import { LumenTabBar } from './nav.js';
 import { usePrefs } from './prefs.js';
 import { withRefreshToken } from './refresh.js';
 import { LumenSettings, ThemeToggle, allSettings, } from './settings.js';
@@ -96,7 +97,7 @@ const settingsFromUrl = (() => {
     window.history.replaceState(window.history.state, '', url);
     return at || 'profile';
 })();
-export function LumenShell({ app, appLabel, brand, nav, bar, status, health, statusEnd, releases, releaseApps, settings, shared, sharedLabel, settingsGroups, user = null, signOutUrl, profile, security, onRefresh, hideAmounts = false, onLogs, headerActions = null, panel, finder, wrap = (frame) => frame, children, }) {
+export function LumenShell({ app, appLabel, brand, nav, tabs, bar, status, health, statusEnd, releases, releaseApps, settings, shared, sharedLabel, settingsGroups, user = null, signOutUrl, profile, security, onRefresh, hideAmounts = false, onLogs, headerActions = null, panel, finder, wrap = (frame) => frame, children, }) {
     const [statusSlot, setStatusSlot] = useState(null);
     const [dockSlot, setDockSlot] = useState(null);
     const [refreshing, setRefreshing] = useState(false);
@@ -142,7 +143,7 @@ export function LumenShell({ app, appLabel, brand, nav, bar, status, health, sta
             refreshing,
             hideAmounts,
             headerActions,
-        }, children: _jsx(StatusBarProvider, { children: _jsx(DockSlot.Provider, { value: dockSlot, 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), _jsx(LumenStatusBar, { app: app, model: bar, legacy: status, slot: setStatusSlot, end: _jsxs(_Fragment, { children: [health, releases && _jsx(WhatsNew, { api: releases, apps: releaseApps }), statusEnd, _jsx(StatusTimeZone, {})] }) })] }), _jsx("div", { ref: setDockSlot, "data-slot": "shell-dock", className: "contents" }), 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, groups: settingsGroups }), _jsx(Toaster, { position: "bottom-right" })] }) }) })) }) }) }) }));
+        }, children: _jsx(StatusBarProvider, { children: _jsx(DockSlot.Provider, { value: dockSlot, 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), _jsx(LumenStatusBar, { app: app, model: bar, legacy: status, slot: setStatusSlot, end: _jsxs(_Fragment, { children: [health, releases && _jsx(WhatsNew, { api: releases, apps: releaseApps }), statusEnd, _jsx(StatusTimeZone, {})] }) }), tabs && _jsx(LumenTabBar, { items: tabs })] }), _jsx("div", { ref: setDockSlot, "data-slot": "shell-dock", className: "contents" }), 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, groups: settingsGroups }), _jsx(Toaster, { position: "bottom-right" })] }) }) })) }) }) }) }));
 }
 /** A status bar entry: an optional health dot, a label and its value ("Mail · Up to date"). */
 export function StatusItem({ label, value, ok, className, }) {

package/dist/status-bar.js

@@ -218,7 +218,7 @@ export function LumenStatusBar({ app, model, legacy, slot, end, }) {
     const entries = useEntries(model, app);
     const [open, setOpen] = useState(false);
     const urgent = [...entries].sort((a, b) => a.rank - b.rank)[0];
-    return (_jsx("footer", { "data-slot": "shell-status", "aria-label": "Status", className: "sticky bottom-0 z-10 flex h-(--shell-status-height) shrink-0 items-center gap-3 overflow-hidden border-t bg-background px-(--shell-gutter) text-xs whitespace-nowrap text-muted-foreground", children: mobile ? (_jsxs(_Fragment, { children: [urgent && (_jsx("span", { "aria-live": "polite", className: "flex min-w-0 items-center", children: _jsx(EntryLine, { e: { ...urgent, bar: undefined, detail: undefined } }) })), _jsx("div", { ref: slot, hidden: true }), entries.length > 0 ? (_jsxs(Sheet, { open: open, onOpenChange: setOpen, children: [_jsxs(SheetTrigger, { className: cn(STATUS_TRIGGER, 'num ml-auto shrink-0 border text-foreground/80'), "aria-label": `Status, ${entries.length} items`, children: [_jsx(InfoIcon, { className: "size-3.5" }), entries.length] }), _jsxs(SheetContent, { side: "bottom", className: "max-h-[75svh] gap-0 rounded-t-2xl p-0 text-sm", onOpenAutoFocus: (e) => e.preventDefault(), children: [_jsxs(SheetHeader, { className: "border-b px-4 py-3", children: [_jsx(SheetTitle, { children: "Status" }), _jsx(SheetDescription, { className: "sr-only", children: "What is true right now" })] }), _jsx("ul", { className: "overflow-y-auto px-4", children: [...entries]
+    return (_jsx("footer", { "data-slot": "shell-status", "aria-label": "Status", className: "sticky bottom-(--shell-tabbar-offset) z-10 flex h-(--shell-status-height) shrink-0 items-center gap-3 overflow-hidden border-t bg-background px-(--shell-gutter) text-xs whitespace-nowrap text-muted-foreground", children: mobile ? (_jsxs(_Fragment, { children: [urgent && (_jsx("span", { "aria-live": "polite", className: "flex min-w-0 items-center", children: _jsx(EntryLine, { e: { ...urgent, bar: undefined, detail: undefined } }) })), _jsx("div", { ref: slot, hidden: true }), entries.length > 0 ? (_jsxs(Sheet, { open: open, onOpenChange: setOpen, children: [_jsxs(SheetTrigger, { className: cn(STATUS_TRIGGER, 'num ml-auto shrink-0 border text-foreground/80'), "aria-label": `Status, ${entries.length} items`, children: [_jsx(InfoIcon, { className: "size-3.5" }), entries.length] }), _jsxs(SheetContent, { side: "bottom", className: "max-h-[75svh] gap-0 rounded-t-2xl p-0 text-sm", onOpenAutoFocus: (e) => e.preventDefault(), children: [_jsxs(SheetHeader, { className: "border-b px-4 py-3", children: [_jsx(SheetTitle, { children: "Status" }), _jsx(SheetDescription, { className: "sr-only", children: "What is true right now" })] }), _jsx("ul", { className: "overflow-y-auto px-4", children: [...entries]
                                         .sort((a, b) => a.rank - b.rank)
                                         .map((e) => (_jsx(SheetRow, { e: e }, e.id))) }), _jsx("div", { className: "flex items-center justify-end gap-1 border-t px-4 py-2 text-xs text-muted-foreground", children: end })] })] })) : (_jsx("span", { className: "ml-auto flex shrink-0 items-center gap-1", children: end }))] })) : (_jsxs(_Fragment, { children: [_jsx("span", { "aria-live": "polite", className: "flex min-w-0 items-center gap-3", children: entries.map((e) => (_jsx(EntryLine, { e: e }, e.id))) }), legacy, _jsx("div", { ref: slot, className: "flex shrink-0 items-center gap-4" }), _jsx("span", { className: "ml-auto flex shrink-0 items-center gap-1", children: end })] })) }));
 }

package/dist/tag-chips.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentType } from 'react';
+type Icon = ComponentType<{
+    className?: string;
+}>;
+/** A tag's colour, picked from its name: the same tag is the same colour everywhere. */
+export declare function tagColor(tag: string): string;
+/** A tag's icon from its words (`cybersecurity` a shield, `ai` sparkles), or none when no word fits. */
+export declare function tagIcon(tag: string): Icon | undefined;
+/**
+ * A row's tags as chips on one line: each in its colour with its icon. Past `max` the rest fold
+ * into a `+N` chip whose hover names them all, so a table row never wraps. `colorOf` and `iconOf`
+ * override the name-picked colour and icon (an app's own label colours).
+ */
+export declare function TagChips({ tags, max, colorOf, iconOf, empty, }: {
+    tags: readonly string[];
+    max?: number;
+    colorOf?: (tag: string) => string | undefined;
+    iconOf?: (tag: string) => Icon | undefined;
+    /** What no tags says; left out: a dash. */
+    empty?: string;
+}): import("react").JSX.Element;
+export {};

package/dist/tag-chips.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Tags (a row's several free-form labels: `ai`, `cybersecurity`, `favorite`) as coloured chips,
+// each with an icon where its words suggest one. The colour comes from the tag's name, so one tag
+// reads the same colour on every row, page and app with nothing stored.
+import { Baby, BookOpen, Bot, Briefcase, Bug, Building2, Car, Check, Clock, Cloud, Code, Cpu, Database, DollarSign, Dumbbell, Factory, Film, Flag, Flame, Gamepad2, Globe, GraduationCap, Heart, HeartPulse, Hourglass, House, Landmark, Leaf, Lock, MapPin, Megaphone, Music, Network, Palette, Plane, Rocket, Server, Shield, ShoppingCart, Smartphone, Sparkles, Star, TriangleAlert, Truck, Users, Utensils, Wrench, Zap, } from 'lucide-react';
+import { ColorChip } from './color-dot.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip.js';
+// Chart colours that read as a hue in light and dark (not the grey `--chart-8`).
+const TAG_COLORS = [1, 2, 3, 4, 5, 6, 7, 9, 10].map((n) => `var(--chart-${n})`);
+/** A tag's colour, picked from its name: the same tag is the same colour everywhere. */
+export function tagColor(tag) {
+    const key = tag.trim().toLowerCase();
+    let h = 2166136261;
+    for (let i = 0; i < key.length; i++)
+        h = Math.imul(h ^ key.charCodeAt(i), 16777619);
+    return TAG_COLORS[(h >>> 0) % TAG_COLORS.length];
+}
+// Words to icons, most specific first: a tag takes the icon of the first entry any of its words
+// matches (`data-security` is a shield, `ai-buildout` a server).
+const TAG_ICONS = [
+    [/^(fav|favou?rites?|starred|top|pick)$/, Star],
+    [/^(cyber|cybersecurity|security|secure|infosec|appsec|privacy)$/, Shield],
+    [/^(auth|identity|iam|zero|zerotrust|crypto|encryption)$/, Lock],
+    [/^(buildout|datacenters?|dc|infra|infrastructure|servers?|hosting|compute)$/, Server],
+    [/^(chips?|semis?|semiconductors?|hardware|gpus?|silicon)$/, Cpu],
+    [/^(ai|ml|llm|genai|agents?|agentic)$/, Sparkles],
+    [/^(bots?|robots?|robotics|automation)$/, Bot],
+    [/^(data|database|db|analytics|warehouse|sql|etl)$/, Database],
+    [/^(cloud|saas|serverless)$/, Cloud],
+    [/^(network|networking|edge|cdn)$/, Network],
+    [/^(bigtech|faang|enterprise|corp|corporate|company)$/, Building2],
+    [/^(dev|devtools|developer|developers|code|coding|engineering|software|platform)$/, Code],
+    [/^(startup|startups|growth|launch)$/, Rocket],
+    [/^(fintech|finance|financial|bank|banking|money|pay|payments|budget)$/, DollarSign],
+    [/^(gov|government|public|federal|civic)$/, Landmark],
+    [/^(health|healthcare|medical|bio|biotech|pharma)$/, HeartPulse],
+    [/^(fitness|gym|workout|sports?)$/, Dumbbell],
+    [/^(energy|power|electric|ev|battery|utilities)$/, Zap],
+    [/^(climate|green|sustainability|eco|garden|plants?)$/, Leaf],
+    [/^(manufacturing|industrial|factory)$/, Factory],
+    [/^(mobile|phone|ios|android|apps?)$/, Smartphone],
+    [/^(remote|global|international|web|online)$/, Globe],
+    [/^(local|onsite|hybrid|office|nearby)$/, MapPin],
+    [/^(home|house|family)$/, House],
+    [/^(kids?|baby|children)$/, Baby],
+    [/^(team|people|social|community|hr)$/, Users],
+    [/^(jobs?|work|career|hiring)$/, Briefcase],
+    [/^(edu|education|learning|school|course|courses|training)$/, GraduationCap],
+    [/^(books?|reading|docs|research)$/, BookOpen],
+    [/^(games?|gaming)$/, Gamepad2],
+    [/^(music|audio)$/, Music],
+    [/^(film|video|movies?|media|streaming)$/, Film],
+    [/^(design|art|creative)$/, Palette],
+    [/^(marketing|ads|sales|pr)$/, Megaphone],
+    [/^(shop|shopping|retail|ecommerce|commerce)$/, ShoppingCart],
+    [/^(food|recipes?|dinner|lunch|breakfast|dessert|cooking)$/, Utensils],
+    [/^(travel|trip|flights?)$/, Plane],
+    [/^(cars?|auto|automotive)$/, Car],
+    [/^(logistics|shipping|delivery|supply)$/, Truck],
+    [/^(tools?|repair|maintenance|fix)$/, Wrench],
+    [/^(bugs?|issues?)$/, Bug],
+    [/^(urgent|hot|asap)$/, Flame],
+    [/^(risk|warning|alert|blocked)$/, TriangleAlert],
+    [/^(done|ok|approved|verified)$/, Check],
+    [/^(waiting|pending|later|someday)$/, Hourglass],
+    [/^(daily|weekly|monthly|recurring|time)$/, Clock],
+    [/^(goal|goals|milestone|priority)$/, Flag],
+    [/^(love|loved|liked)$/, Heart],
+];
+const iconCache = new Map();
+/** A tag's icon from its words (`cybersecurity` a shield, `ai` sparkles), or none when no word fits. */
+export function tagIcon(tag) {
+    const key = tag.trim().toLowerCase();
+    let icon = iconCache.get(key);
+    if (icon === undefined) {
+        const words = key.split(/[^a-z0-9]+/).filter(Boolean);
+        icon = TAG_ICONS.find(([re]) => words.some((w) => re.test(w)))?.[1] ?? null;
+        iconCache.set(key, icon);
+    }
+    return icon ?? undefined;
+}
+/**
+ * A row's tags as chips on one line: each in its colour with its icon. Past `max` the rest fold
+ * into a `+N` chip whose hover names them all, so a table row never wraps. `colorOf` and `iconOf`
+ * override the name-picked colour and icon (an app's own label colours).
+ */
+export function TagChips({ tags, max = 3, colorOf, iconOf, empty, }) {
+    if (!tags.length)
+        return _jsx("span", { className: "text-muted-foreground", children: empty ?? '—' });
+    const shown = tags.slice(0, max);
+    const rest = tags.length - shown.length;
+    const chips = (_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1 overflow-hidden", children: [shown.map((t) => (_jsx(ColorChip, { color: colorOf?.(t) ?? tagColor(t), icon: iconOf?.(t) ?? tagIcon(t), children: t }, t))), rest > 0 && _jsxs(ColorChip, { children: ["+", rest] })] }));
+    if (!rest)
+        return chips;
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: chips }), _jsx(TooltipContent, { className: "max-w-md whitespace-normal", children: tags.join(', ') })] }));
+}

package/dist/theme.css

@@ -89,6 +89,9 @@
   --shell-assistant-width: 26rem;
   --shell-header-height: 48px;
   --shell-status-height: 32px;
+  /* The phone tab bar (LumenShell tabs); 0 until one shows, so the status bar sits above it. */
+  --shell-tabbar-height: 56px;
+  --shell-tabbar-offset: 0px;
   /* A status bar message ends in an ellipsis here (StatusMessages), so it fits beside the bar's
      other items; the full text opens on hover or tap. */
   --status-message-max: 55vw;
@@ -851,3 +854,8 @@ body[data-spotlight="nav"] [data-spotlit] {
   filter: none;
   opacity: 1;
 }
+
+/* With a phone tab bar under it, the status bar rides above the bar instead of the screen's edge. */
+[data-slot="sidebar-inset"]:has(> [data-slot="shell-tabbar"]) {
+  --shell-tabbar-offset: calc(var(--shell-tabbar-height) + env(safe-area-inset-bottom));
+}

package/dist/view-model.d.ts

@@ -25,6 +25,13 @@ export interface ViewField<T> {
     topic?: string;
     /** Every value a row has for filtering, when it has several (a symbol in Holdings and Watchlist). */
     values?: (row: T) => string[];
+    /**
+     * The values are tags (a row's several free-form labels): the cell draws each of `values` as a
+     * chip in its colour with its icon (`TagChips`), never a comma list. The colour and icon come
+     * from the tag's name unless `color` or `iconOf` gives them. Without `values` the text value is
+     * split on commas.
+     */
+    tags?: boolean;
     format: ViewFormat;
     /** How the value is made, shown under the field in the Edit dialog. */
     formula?: string;

package/package.json

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