@columenlabs/lumen-ui 0.1.131 → 0.1.132

package/dist/status-messages.d.ts

@@ -9,17 +9,17 @@ export interface StatusMessage {
 interface Group extends Required<StatusMessage> {
     count: number;
 }
-/** One entry per distinct message (same tone, same words), counted, most severe first. */
+/** One entry per distinct message (same tone, same words), counted, in the order given. */
 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.
+ * The app's messages in the status bar, newest first. Only the latest shows, on one line that ends
+ * in an ellipsis past `--status-message-max`, with its full text on hover or tap; a new message
+ * takes its place rather than adding a second line. A repeat shows once with `×N`, and the earlier
+ * messages sit behind a `+N` chip that lists them.
  */
-export declare function StatusMessages({ messages, max, className, }: {
+export declare function StatusMessages({ messages, className, }: {
+    /** Newest first. */
     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

@@ -1,10 +1,7 @@
 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',
@@ -17,7 +14,7 @@ const DOT = {
     success: 'bg-gain',
     info: undefined,
 };
-/** One entry per distinct message (same tone, same words), counted, most severe first. */
+/** One entry per distinct message (same tone, same words), counted, in the order given. */
 export function groupStatusMessages(messages) {
     const groups = new Map();
     for (const m of messages) {
@@ -33,8 +30,8 @@ export function groupStatusMessages(messages) {
         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]);
+    // Map keeps first-seen order, so the latest message stays first.
+    return [...groups.values()];
 }
 const label = (g) => (g.count > 1 ? `${g.text} (×${g.count})` : g.text);
 function Dot({ tone }) {
@@ -57,16 +54,14 @@ 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.
+ * The app's messages in the status bar, newest first. Only the latest shows, on one line that ends
+ * in an ellipsis past `--status-message-max`, with its full text on hover or tap; a new message
+ * takes its place rather than adding a second line. A repeat shows once with `×N`, and the earlier
+ * messages sit behind a `+N` chip that lists them.
  */
-export function StatusMessages({ messages, max = 2, className, }) {
-    const phone = useIsMobile();
-    const groups = groupStatusMessages(messages);
-    if (!groups.length)
+export function StatusMessages({ messages, className, }) {
+    const [latest, ...earlier] = groupStatusMessages(messages);
+    if (!latest)
         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] }))] }));
+    return (_jsxs("span", { "aria-live": "polite", className: cn('flex min-w-0 items-center gap-2', className), children: [_jsx(Line, { group: latest }), earlier.length > 0 && (_jsxs(Pop, { label: `${earlier.length} earlier messages`, className: cn(TRIGGER, 'num shrink-0 text-foreground/80'), content: _jsx("ul", { className: "flex flex-col gap-1", children: earlier.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: ["+", earlier.length] }))] }));
 }

package/dist/theme.css

@@ -89,8 +89,8 @@
   --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;
+     other items; the full text opens on hover or tap. */
+  --status-message-max: 55vw;
   --tile-width: 8.5rem;
   --shell-gutter: 12px;
   --shell-section-gap: 12px;
@@ -215,7 +215,7 @@
 @media (min-width: 768px) {
   :root {
     --shell-gutter: 16px;
-    --status-message-max: min(28rem, 30vw);
+    --status-message-max: min(40rem, 45vw);
   }
 }
 

package/package.json

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