@columenlabs/lumen-ui 0.1.113 → 0.1.115

package/README.md

@@ -78,7 +78,7 @@ Every export, its props and an example are on the [docs](https://lumen.columenla
 - Numbers use tabular figures and a true minus `−`; a gain or loss always shows a sign or arrow.
 - A page's header numbers are metric cards: `TileRow` of `Tile` (or `TileToggleGroup` when they pick what the page shows), with `fill` so they share the row, each with `spark` set to its daily history where it has one. Don't build a card of your own for this.
 - Column widths: the first column (a row's name) grows only to `--lead-col-max` (18rem, theme.css); past it the cell truncates on one line and a plain text value shows in full on hover (a rendered cell brings its own hover card). Cap any other column with the field's `maxWidth` (`'12rem'`), or lift the cap with `maxWidth: false`. In a rendered name cell, put the name in a `truncate` span so the ellipsis lands on it, not on a chip after it.
-- Group, sub-group and Total rows read on one line at every width, a phone's cards included: the group's name shortens in an ellipsis (full name on hover) and its roll-up figure stays on the right. The view marks them `data-rollup` and theme.css keeps them to one line, so a `mark`, `rollRender` or `groupActions` an app passes never wraps them.
+- Rows never wrap. Every row (data, group, sub-group, Total) reads on one line at every width. On a phone each row is a one-line card: its name (ellipsis, full name on hover) and one value on the right, the sorted column, else the first number or date. The other values are in the row's drawer or panel. Pick which value a phone shows by sorting (Sort by) or by marking the others `hideOnPhone`.
 - Column alignment is the table's, not the cell's. Text left, numbers right, and a number column has one right edge for its header, values, dashes and Total. `UnitValue` puts the unit in a fixed slot after the number (`--unit-slot`, 2rem) and its status dot just left of the number. In a LumenView table the first `UnitValue` drawn in a column marks it (`data-units` on every cell of that column, through the `UnitColumns` context and the cell's `data-col`); theme.css then widens that column's right gutter by the slot and hangs each unit in it. So a plain `—`, `Free` or `$0.21` an app draws in the same column sits on the digits' edge, and the header sits over the digits. Don't hand-place units, dots or padding to line a column up; if a column is off, draw its numbers through `UnitValue`. Outside a LumenView table (a hover card, a tile) `UnitValue` keeps its slot inline.
 - A metered column (use against an allowance) shows one number per cell with `UnitValue` (right-aligned number, fixed muted unit slot, status dot), never `value [pct]`. Offer both readings through the field's `showAs` (Amount / % of allowance, picked per column in Edit view, saved as `shows`); default amounts for sizes (storage) and shares for capped counts. Put the other reading, the allowance and the cost formula in a hover card. Totals use `rollRender`: sum amounts with their unit; a share is the rows' total over their allowance, never a sum of percents.
 - A floating bulk-action bar over a table's selection: Apply clears the selection and the bar goes away; the toast's Undo restores the change, not the selection. Cancel keeps the selection.

package/dist/hooks/use-hover-open.d.ts

@@ -0,0 +1,23 @@
+/** Focus stays on the trigger: moving it into the pop-up, or back on close, would dismiss a
+ *  neighbour's pop-up the mouse just opened (Radix closes a pop-up on focus outside). */
+declare const keepFocus: (e: Event) => void;
+/**
+ * Open state for a status bar pop-up that opens on hover with a mouse and on tap with a finger or
+ * keyboard (a `Popover`'s own trigger). Spread `hover` on the trigger and `content` on the
+ * `PopoverContent`.
+ */
+export declare function useHoverOpen(): {
+    open: boolean;
+    setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    hover: {
+        onPointerEnter: (e: React.PointerEvent) => void;
+        onPointerLeave: (e: React.PointerEvent) => void;
+    };
+    content: {
+        onPointerEnter: (e: React.PointerEvent) => void;
+        onPointerLeave: (e: React.PointerEvent) => void;
+        onOpenAutoFocus: typeof keepFocus;
+        onCloseAutoFocus: typeof keepFocus;
+    };
+};
+export {};

package/dist/hooks/use-hover-open.js

@@ -0,0 +1,32 @@
+import { useEffect, useRef, useState } from 'react';
+/** How long a pop-up stays after the mouse leaves, so it can travel from trigger to pop-up. */
+const HOVER_CLOSE_MS = 150;
+/** Focus stays on the trigger: moving it into the pop-up, or back on close, would dismiss a
+ *  neighbour's pop-up the mouse just opened (Radix closes a pop-up on focus outside). */
+const keepFocus = (e) => e.preventDefault();
+/**
+ * Open state for a status bar pop-up that opens on hover with a mouse and on tap with a finger or
+ * keyboard (a `Popover`'s own trigger). Spread `hover` on the trigger and `content` on the
+ * `PopoverContent`.
+ */
+export function useHoverOpen() {
+    const [open, setOpen] = useState(false);
+    const timer = useRef(undefined);
+    useEffect(() => () => clearTimeout(timer.current), []);
+    const hover = (on) => (e) => {
+        if (e.pointerType !== 'mouse')
+            return;
+        clearTimeout(timer.current);
+        if (on)
+            setOpen(true);
+        else
+            timer.current = setTimeout(() => setOpen(false), HOVER_CLOSE_MS);
+    };
+    const handlers = { onPointerEnter: hover(true), onPointerLeave: hover(false) };
+    return {
+        open,
+        setOpen,
+        hover: handlers,
+        content: { ...handlers, onOpenAutoFocus: keepFocus, onCloseAutoFocus: keepFocus },
+    };
+}

package/dist/index.d.ts

@@ -78,6 +78,7 @@ export { LumenShell, type LumenShellProps, type ShellUser, StatusItem, firstName
 export { apiJson } from './api-fetch.js';
 export { cn } from './lib/utils.js';
 export { type HealthProbe, StatusHealth } from './status-health.js';
+export { type StatusMessage, type StatusMessageTone, StatusMessages, groupStatusMessages, } from './status-messages.js';
 export { TimeZoneSelect } from './status.js';
 export { type AccountFacts, type JoinReaders, JoinsProvider, SourceStatusItems, YOURS_COLOR, editedCells, editedKey, frameColor, useFrameEdits, useJoins, usedJoinKeys, } from './joins.js';
 export { OriginLegend, originsOf } from './origin-legend.js';

package/dist/index.js

@@ -85,6 +85,7 @@ export { LumenShell, StatusItem, firstName, initials, maskAmount, useAmountsHidd
 export { apiJson } from './api-fetch.js';
 export { cn } from './lib/utils.js';
 export { StatusHealth } from './status-health.js';
+export { StatusMessages, groupStatusMessages, } from './status-messages.js';
 export { TimeZoneSelect } from './status.js';
 export { JoinsProvider, SourceStatusItems, YOURS_COLOR, editedCells, editedKey, frameColor, useFrameEdits, useJoins, usedJoinKeys, } from './joins.js';
 export { OriginLegend, originsOf } from './origin-legend.js';

package/dist/lumen-view.js

@@ -440,12 +440,13 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
     // Inline chips sit on the first column, next to the row's name, not in their own.
     const inline = visible.filter((f, i) => i > 0 && chips.some((c) => c.key === f.key && c.placement === 'inline'));
     const shown = visible.filter((f) => !inline.includes(f));
-    // On a narrow phone each row reads as a card (theme.css, `data-card`): its name and one figure
-    // (the sorted one, else the first number or date) on the first line, the rest on the second.
-    // Numbers and dates keep their width there; only text shortens.
+    // On a narrow phone each row reads as a card on ONE line (theme.css, `data-card`): its name and
+    // one value (the sorted one, else the first number or date, else the next column). The rest
+    // waits in the row's detail, never on a second line.
     const short = (f) => f.format !== 'text' || (rows[0] !== undefined && isDateText(f.value(rows[0])));
-    const meta = (shown.find((f, i) => i > 0 && f.key === sorting[0]?.id && short(f)) ??
-        shown.find((f, i) => i > 0 && short(f)))?.key;
+    const onCard = shown.filter((f, i) => i > 0 && !f.hideOnPhone);
+    const meta = (onCard.find((f) => f.key === sorting[0]?.id) ?? onCard.find(short) ?? onCard[0])
+        ?.key;
     const cardOf = (f) => f === shown[0] ? 'lead' : f.key === meta ? 'meta' : short(f) ? 'num' : 'text';
     const col = (f, ...more) => ({
         ...colProps(f, ...more),

package/dist/status-health.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import type { ReactNode } from 'react';
 export interface HealthProbe {
     name: string;
     /** Up when true, down when false, not checked yet when null. */

package/dist/status-health.js

@@ -1,12 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Service health in the status bar ("consolidate into a clickable or hoverable
-// pop-up"): one chip with the worst state of every service the app checks, opening a list of each
-// service and its latency, on hover with a mouse and on tap with a finger or keyboard.
-import { useEffect, useRef, useState } from 'react';
+import { useHoverOpen } from './hooks/use-hover-open.js';
 import { cn } from './lib/utils.js';
 import { Popover, PopoverContent, PopoverTrigger } from './ui/popover.js';
-/** How long the list stays after the mouse leaves, so it can travel from chip to list. */
-const HOVER_CLOSE_MS = 150;
 /** Keeps the list off the window's edge on a narrow screen. */
 const COLLISION_PAD = 8;
 const dot = (ok) => cn('size-2 shrink-0 rounded-full', ok === null ? 'bg-muted-foreground/40' : ok ? 'bg-gain' : 'bg-destructive');
@@ -22,20 +17,9 @@ function summary(probes) {
     return { ok: true, text: 'All up' };
 }
 export function StatusHealth({ probes, checked, error, }) {
-    const [open, setOpen] = useState(false);
-    const timer = useRef(undefined);
-    useEffect(() => () => clearTimeout(timer.current), []);
-    const hover = (on) => (e) => {
-        if (e.pointerType !== 'mouse')
-            return;
-        clearTimeout(timer.current);
-        if (on)
-            setOpen(true);
-        else
-            timer.current = setTimeout(() => setOpen(false), HOVER_CLOSE_MS);
-    };
+    const { open, setOpen, hover, content: pop } = useHoverOpen();
     if (!probes.length && !error)
         return null;
     const s = error ? { ok: false, text: 'Check failed' } : summary(probes);
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsxs(PopoverTrigger, { "aria-label": `Services: ${s.text}`, className: "flex h-6 shrink-0 items-center gap-1.5 rounded-md px-1.5 hover:bg-muted hover:text-foreground", onPointerEnter: hover(true), onPointerLeave: hover(false), children: [_jsx("span", { "aria-hidden": true, className: dot(s.ok) }), "Services", _jsx("span", { className: cn('num', s.ok === false ? 'text-destructive' : 'text-foreground/80'), children: s.text })] }), _jsxs(PopoverContent, { side: "top", align: "end", collisionPadding: COLLISION_PAD, className: "w-auto min-w-56 gap-1.5 text-xs", onPointerEnter: hover(true), onPointerLeave: hover(false), onOpenAutoFocus: (e) => e.preventDefault(), children: [_jsx("ul", { "aria-label": "Services", className: "flex flex-col gap-1", children: probes.map((p) => (_jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { "aria-hidden": true, className: dot(p.ok) }), _jsxs("span", { className: "flex-1", children: [p.name, p.note && _jsx("span", { className: "ml-1.5 text-muted-foreground", children: p.note })] }), _jsx("span", { className: cn('num', p.ok === false ? 'text-destructive' : 'text-foreground/80'), children: p.ok === false ? 'down' : p.ms != null ? `${p.ms} ms` : '—' })] }, p.name))) }), error && _jsx("p", { className: "text-destructive", children: error }), checked && (_jsxs("p", { className: "border-t pt-1.5 text-muted-foreground", children: ["Checked ", _jsx("span", { className: "num", children: checked })] }))] })] }));
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsxs(PopoverTrigger, { "aria-label": `Services: ${s.text}`, className: "flex h-6 shrink-0 items-center gap-1.5 rounded-md px-1.5 hover:bg-muted hover:text-foreground", ...hover, children: [_jsx("span", { "aria-hidden": true, className: dot(s.ok) }), "Services", _jsx("span", { className: cn('num', s.ok === false ? 'text-destructive' : 'text-foreground/80'), children: s.text })] }), _jsxs(PopoverContent, { side: "top", align: "end", collisionPadding: COLLISION_PAD, className: "w-auto min-w-56 gap-1.5 text-xs", ...pop, children: [_jsx("ul", { "aria-label": "Services", className: "flex flex-col gap-1", children: probes.map((p) => (_jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { "aria-hidden": true, className: dot(p.ok) }), _jsxs("span", { className: "flex-1", children: [p.name, p.note && _jsx("span", { className: "ml-1.5 text-muted-foreground", children: p.note })] }), _jsx("span", { className: cn('num', p.ok === false ? 'text-destructive' : 'text-foreground/80'), children: p.ok === false ? 'down' : p.ms != null ? `${p.ms} ms` : '—' })] }, p.name))) }), error && _jsx("p", { className: "text-destructive", children: error }), checked && (_jsxs("p", { className: "border-t pt-1.5 text-muted-foreground", children: ["Checked ", _jsx("span", { className: "num", children: checked })] }))] })] }));
 }

package/dist/status-messages.d.ts

@@ -0,0 +1,25 @@
+export type StatusMessageTone = 'info' | 'success' | 'warning' | 'error';
+export interface StatusMessage {
+    text: string;
+    /** Colours the text and its dot: error red, warning amber, success green; info has no dot. */
+    tone?: StatusMessageTone;
+    /** How many times it was posted, for an app that counts repeats itself; repeats in the list add up too. */
+    count?: number;
+}
+interface Group extends Required<StatusMessage> {
+    count: number;
+}
+/** One entry per distinct message (same tone, same words), counted, most severe first. */
+export declare function groupStatusMessages(messages: readonly StatusMessage[]): Group[];
+/**
+ * The app's messages in the status bar. Each message is one line that ends in an ellipsis past
+ * `--status-message-max`, with its full text on hover or tap; a repeated message shows once with
+ * `×N`; past `max` messages (one on a phone), a `+N` chip lists the rest.
+ */
+export declare function StatusMessages({ messages, max, className, }: {
+    messages: readonly StatusMessage[];
+    /** How many messages show at once on a wider screen; the rest go behind the `+N` chip. */
+    max?: number;
+    className?: string;
+}): import("react").JSX.Element | null;
+export {};

package/dist/status-messages.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useHoverOpen } from './hooks/use-hover-open.js';
+import { useIsMobile } from './hooks/use-mobile.js';
+import { cn } from './lib/utils.js';
+import { Popover, PopoverContent, PopoverTrigger } from './ui/popover.js';
+/** Errors first, then warnings, so the message that matters most is the one in view. */
+const RANK = { error: 0, warning: 1, success: 2, info: 3 };
+const TEXT = {
+    error: 'text-destructive',
+    warning: 'text-warning',
+    success: undefined,
+    info: undefined,
+};
+const DOT = {
+    error: 'bg-destructive',
+    warning: 'bg-warning',
+    success: 'bg-gain',
+    info: undefined,
+};
+/** One entry per distinct message (same tone, same words), counted, most severe first. */
+export function groupStatusMessages(messages) {
+    const groups = new Map();
+    for (const m of messages) {
+        const text = m.text.replace(/\s+/g, ' ').trim();
+        if (!text)
+            continue;
+        const tone = m.tone ?? 'info';
+        const key = `${tone}\u0000${text}`;
+        const count = Math.max(1, m.count ?? 1);
+        const g = groups.get(key);
+        if (g)
+            g.count += count;
+        else
+            groups.set(key, { text, tone, count });
+    }
+    // Map keeps first-seen order; the sort is stable, so equal tones keep it.
+    return [...groups.values()].sort((a, b) => RANK[a.tone] - RANK[b.tone]);
+}
+const label = (g) => (g.count > 1 ? `${g.text} (×${g.count})` : g.text);
+function Dot({ tone }) {
+    const color = DOT[tone];
+    return color ? _jsx("span", { "aria-hidden": true, className: cn('size-2 shrink-0 rounded-full', color) }) : null;
+}
+/** Keeps the pop-up off the window's edge on a narrow screen. */
+const COLLISION_PAD = 8;
+/**
+ * A status bar trigger whose pop-up opens on hover with a mouse and on tap with a finger or
+ * keyboard, like the services chip, so a phone can read the full text too (a tooltip never opens
+ * on touch). Styled on its own classes only: a trigger owns `data-state`.
+ */
+function Pop({ label: name, className, children, content, }) {
+    const { open, setOpen, hover, content: pop } = useHoverOpen();
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { "aria-label": name, className: className, ...hover, children: children }), _jsx(PopoverContent, { side: "top", align: "start", collisionPadding: COLLISION_PAD, className: "w-auto max-w-sm gap-1.5 text-xs break-words", ...pop, children: content })] }));
+}
+const TRIGGER = 'flex h-6 items-center gap-1.5 rounded-md px-1.5 hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none';
+function Line({ group }) {
+    return (_jsxs(Pop, { className: cn(TRIGGER, 'min-w-0 max-w-(--status-message-max)'), content: _jsx("p", { className: TEXT[group.tone], children: label(group) }), children: [_jsx(Dot, { tone: group.tone }), _jsx("span", { className: cn('min-w-0 truncate', TEXT[group.tone]), children: group.text }), group.count > 1 && (_jsxs("span", { className: "num shrink-0 text-foreground/80", "aria-label": `${group.count} times`, children: ["\u00D7", group.count] }))] }));
+}
+/**
+ * The app's messages in the status bar. Each message is one line that ends in an ellipsis past
+ * `--status-message-max`, with its full text on hover or tap; a repeated message shows once with
+ * `×N`; past `max` messages (one on a phone), a `+N` chip lists the rest.
+ */
+export function StatusMessages({ messages, max = 2, className, }) {
+    const phone = useIsMobile();
+    const groups = groupStatusMessages(messages);
+    if (!groups.length)
+        return null;
+    const shown = groups.slice(0, phone ? 1 : Math.max(1, max));
+    const rest = groups.slice(shown.length);
+    return (_jsxs("span", { "aria-live": "polite", className: cn('flex min-w-0 items-center gap-2', className), children: [shown.map((g) => (_jsx(Line, { group: g }, `${g.tone}:${g.text}`))), rest.length > 0 && (_jsxs(Pop, { label: `${rest.length} more messages`, className: cn(TRIGGER, 'num shrink-0 text-foreground/80'), content: _jsx("ul", { className: "flex flex-col gap-1", children: rest.map((g) => (_jsxs("li", { className: "flex items-start gap-1.5", children: [_jsx("span", { className: "flex h-4 items-center", children: _jsx(Dot, { tone: g.tone }) }), _jsx("span", { className: TEXT[g.tone], children: label(g) })] }, `${g.tone}:${g.text}`))) }), children: ["+", rest.length] }))] }));
+}

package/dist/theme.css

@@ -88,6 +88,9 @@
   --shell-assistant-width: 26rem;
   --shell-header-height: 48px;
   --shell-status-height: 32px;
+  /* 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. A phone shows one message, a wider screen two. */
+  --status-message-max: 45vw;
   --tile-width: 8.5rem;
   --shell-gutter: 12px;
   --shell-section-gap: 12px;
@@ -209,6 +212,7 @@
 @media (min-width: 768px) {
   :root {
     --shell-gutter: 16px;
+    --status-message-max: min(28rem, 30vw);
   }
 }
 
@@ -439,9 +443,11 @@
 }
 
 /* A LumenView table on a narrow phone (`data-cards`): each row is a card, so nothing runs off
-   the right edge. Line 1: the row's name (shortens) and one figure (`data-card="meta"`); line 2:
-   the other values, small and muted. Numbers, dates and their units keep their width; only text
-   shortens, in an ellipsis. Group, Total and More rows span the card's width. */
+   the right edge, and every row is ONE line, whatever an app draws in it: the row's name (shortens
+   in an ellipsis), then one figure (`data-card="meta"`, the sorted one, else the first number or
+   date) on the right. The other values wait in the row's detail (its drawer or panel), never on a
+   second line. Group, fold and Total rows (`data-rollup`) read the same way. More and empty rows
+   are one cell across the card. */
 @media (max-width: 639px) {
   table[data-cards],
   table[data-cards] > tbody,
@@ -458,55 +464,46 @@
   }
   table[data-cards] tr {
     display: flex;
-    flex-wrap: wrap;
-    align-items: baseline;
+    flex-wrap: nowrap;
+    align-items: center;
     column-gap: 0.75rem;
-    row-gap: 0.125rem;
     padding: 0.5rem var(--cell-x);
+    white-space: nowrap;
   }
   table[data-cards] td {
     padding: 0 !important;
     width: auto !important;
     min-width: 0;
+    white-space: nowrap;
   }
   table[data-cards] td[colspan] {
     flex: 1 1 100%;
   }
-  table[data-cards] td:not([data-card]):not([colspan]) {
+  /* A row's panel (`row-panel`) is a box of its own under the row, not a row: it keeps its lines. */
+  table[data-cards] tr[data-slot="row-panel"],
+  table[data-cards] tr[data-slot="row-panel"] > td {
+    white-space: normal;
+  }
+  table[data-cards] td:not([data-card]):not([colspan]),
+  table[data-cards] td:is([data-card="num"], [data-card="text"]) {
     display: none;
   }
   table[data-cards] td[data-card="select"] {
     order: 0;
     flex: none;
-    align-self: center;
   }
   table[data-cards] td[data-card="lead"] {
     order: 1;
     flex: 1 1 0;
     overflow: hidden;
+    text-overflow: ellipsis;
     font-weight: 500;
   }
   table[data-cards] td[data-card="meta"] {
     order: 2;
     flex: none;
-  }
-  table[data-cards] tr:has(> td[data-card="lead"])::after {
-    content: "";
-    order: 3;
-    flex-basis: 100%;
-  }
-  table[data-cards] td:is([data-card="num"], [data-card="text"]) {
-    order: 4;
-    font-size: 0.8125rem;
-    color: var(--muted-foreground);
-  }
-  table[data-cards] td[data-card="num"] {
-    flex: none;
-  }
-  table[data-cards] td[data-card="text"] {
-    flex: 0 1 auto;
+    max-width: 50%;
     overflow: hidden;
-    text-overflow: ellipsis;
   }
   table[data-cards] [data-slot="unit-value-unit"] {
     position: static;
@@ -515,31 +512,7 @@
     margin-left: 0.25em;
     font-size: inherit;
   }
-  /* Group, fold and Total rows (`data-rollup`) are one line at every width: the name shortens
-     in an ellipsis, the row's one figure keeps its width on the right, and the rest waits in the
-     open rows. Whatever an app draws in them (a mark, a roll-up, group actions) never wraps.
-     The group band pins as a whole row here: a cell can't pin inside a one-line flex row. */
-  table[data-cards] tr[data-rollup] {
-    flex-wrap: nowrap;
-    align-items: center;
-    white-space: nowrap;
-  }
-  table[data-cards] tr[data-rollup]::after {
-    display: none;
-  }
-  table[data-cards] tr[data-rollup] > td {
-    white-space: nowrap;
-  }
-  table[data-cards] tr[data-rollup] > td[data-card="lead"] {
-    flex: 1 1 0;
-    min-width: 0;
-    overflow: hidden;
-  }
-  table[data-cards]
-    tr[data-rollup]
-    > td:is([data-card="num"], [data-card="text"], :not([data-card])) {
-    display: none;
-  }
+  /* The group band pins as a whole row here: a cell can't pin inside a one-line flex row. */
   table[data-cards] tr[data-group] {
     position: sticky;
     top: var(--pin-top, 0px);

package/package.json

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