@columenlabs/lumen-ui 0.1.172 → 0.1.174

package/dist/color-dot.d.ts

@@ -14,10 +14,13 @@ export declare function tintedIcon(icon: ComponentType<{
     className?: string;
 }>;
 /** A value as a chip in its colour (a label): a tint behind, the colour as text, its icon first. */
-export declare function ColorChip({ color, icon: Icon, children, }: {
+export declare function ColorChip({ color, icon: Icon, children, className, title, }: {
     color?: string;
     icon?: ComponentType<{
         className?: string;
     }>;
     children: ReactNode;
+    className?: string;
+    /** The full text on hover, for a chip that may end in an ellipsis. */
+    title?: string;
 }): import("react").JSX.Element;

package/dist/color-dot.js

@@ -32,12 +32,12 @@ export function tintedIcon(icon, color) {
     return out;
 }
 /** A value as a chip in its colour (a label): a tint behind, the colour as text, its icon first. */
-export function ColorChip({ color, icon: Icon, children, }) {
-    return (_jsxs("span", { className: "inline-flex h-5 shrink-0 items-center gap-1 rounded-sm bg-secondary px-1.5 text-xs font-medium whitespace-nowrap text-secondary-foreground", style: color
+export function ColorChip({ color, icon: Icon, children, className, title, }) {
+    return (_jsxs("span", { title: title, className: cn('inline-flex h-5 shrink-0 items-center gap-1 rounded-sm bg-secondary px-1.5 text-xs font-medium whitespace-nowrap text-secondary-foreground', className), style: color
             ? {
                 background: `color-mix(in oklab, ${color} 18%, transparent)`,
                 // The colour pulled toward the text colour, so a light hue (yellow, sky) still reads.
                 color: `color-mix(in oklab, ${color} 55%, var(--foreground))`,
             }
-            : undefined, children: [Icon && _jsx(Icon, { className: "size-3 shrink-0" }), children] }));
+            : undefined, children: [Icon && _jsx(Icon, { className: "size-3 shrink-0" }), _jsx("span", { className: "min-w-0 truncate", children: children })] }));
 }

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';

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';

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/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,101 @@
+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, FileText, Film, Flag, Flame, Gamepad2, Globe, GraduationCap, Handshake, Heart, HeartPulse, Hourglass, House, Landmark, LayoutTemplate, Leaf, Lightbulb, Link, 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],
+    [/^(docs?|documents?|guides?|pdf|files?)$/, FileText],
+    [/^(templates?|layouts?)$/, LayoutTemplate],
+    [/^(how|howto|tips?|ideas?)$/, Lightbulb],
+    [/^(partners?|partnership|vendors?)$/, Handshake],
+    [/^(links?|urls?|bookmarks?)$/, Link],
+    [/^(books?|reading|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), title: t, className: "max-w-full min-w-9 shrink", 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/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.172",
+  "version": "0.1.174",
   "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.172",
+    "@columenlabs/lumen-ui-types": "0.1.174",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",