@columenlabs/lumen-ui 0.1.89 → 0.1.91

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export { type CardOnScreen, cardsOnScreen, kindName, onScreen, pointAt, pointAtC
 export { LinkDot, LinkPicker, type LinkColor, linkVar } from './lumen-links.js';
 export { CardSegments, CardSwitch } from './card-switch.js';
 export { PageInput, PageInputs } from './page-inputs.js';
+export { LumenBulkBar } from './lumen-bulk-bar.js';
 export { type LumenTab, LumenTabs } from './lumen-tabs.js';
 export { LumenTabDrawer, TAB_NAME_MAX } from './lumen-tab-drawer.js';
 export { IconPicker } from './icon-picker.js';

package/dist/index.js

@@ -15,6 +15,7 @@ export { cardsOnScreen, kindName, onScreen, pointAt, pointAtCard, sectionsOnScre
 export { LinkDot, LinkPicker, linkVar } from './lumen-links.js';
 export { CardSegments, CardSwitch } from './card-switch.js';
 export { PageInput, PageInputs } from './page-inputs.js';
+export { LumenBulkBar } from './lumen-bulk-bar.js';
 export { LumenTabs } from './lumen-tabs.js';
 export { LumenTabDrawer, TAB_NAME_MAX } from './lumen-tab-drawer.js';
 export { IconPicker } from './icon-picker.js';

package/dist/lumen-bulk-bar.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+/**
+ * The bar over a table while rows are ticked: how many, the actions that apply to them, and a ✕
+ * that clears the ticks. Each action clears the selection when it applies and offers Undo in a
+ * toast (the change comes back, not the ticks). Pair it with LumenLayout's `selection`.
+ */
+export declare function LumenBulkBar({ count, label, onClear, children, }: {
+    count: number;
+    /** The toolbar's name for screen readers ("Change the ticked people"). */
+    label?: string;
+    onClear: () => void;
+    /** The actions, small outline buttons or a chip picker. */
+    children: ReactNode;
+}): import("react").JSX.Element | null;

package/dist/lumen-bulk-bar.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XIcon } from 'lucide-react';
+import { Button } from './ui/button.js';
+/**
+ * The bar over a table while rows are ticked: how many, the actions that apply to them, and a ✕
+ * that clears the ticks. Each action clears the selection when it applies and offers Undo in a
+ * toast (the change comes back, not the ticks). Pair it with LumenLayout's `selection`.
+ */
+export function LumenBulkBar({ count, label = 'Change the ticked rows', onClear, children, }) {
+    if (count < 1)
+        return null;
+    return (_jsxs("div", { role: "toolbar", "aria-label": label, className: "flex flex-wrap items-center gap-2 rounded-lg border bg-muted px-3 py-2 text-sm", children: [_jsxs("span", { className: "num font-medium", children: [count, " selected"] }), children, _jsx(Button, { size: "icon-sm", variant: "ghost", "aria-label": "Clear the selection", className: "ml-auto", onClick: onClear, children: _jsx(XIcon, {}) })] }));
+}

package/dist/people/lumen-people.js

@@ -2,10 +2,11 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // LumenPeople: who may sign in, what each person may open, invites and the audit log, as one block
 // an app drops in with an adapter (`peopleClient(url)` over `@columenlabs/lumen-people`'s routes).
 import { levelLabel, levelOf, levelsOf, } from '@columenlabs/lumen-ui-types/people';
-import { AppWindowIcon, BanIcon, CircleDotIcon, ClockIcon, HistoryIcon, KeyRoundIcon, MailIcon, ShieldCheckIcon, Trash2Icon, TriangleAlertIcon, UserPlusIcon, UserRoundIcon, UsersIcon, XIcon, } from 'lucide-react';
+import { AppWindowIcon, BanIcon, CircleDotIcon, ClockIcon, HistoryIcon, KeyRoundIcon, MailIcon, ShieldCheckIcon, Trash2Icon, TriangleAlertIcon, UserPlusIcon, UserRoundIcon, UsersIcon, } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import { LumenConfirm } from '../confirm.js';
 import { LumenBoundary } from '../lumen-boundary.js';
+import { LumenBulkBar } from '../lumen-bulk-bar.js';
 import { LumenLayout } from '../lumen-layout.js';
 import { LumenPageState } from '../lumen-page-state.js';
 import { LumenSelector } from '../lumen-selector.js';
@@ -231,10 +232,10 @@ function BulkBar({ frame, ids, onClear, }) {
         onClear();
         void act(() => each({ op: 'status', status: 'disabled' }, list), `${many(list.length)} disabled`, () => each({ op: 'status', status: 'active' }, list));
     };
-    return (_jsxs("div", { role: "toolbar", "aria-label": "Change the ticked people", className: "flex flex-wrap items-center gap-2 rounded-lg border bg-muted px-3 py-2 text-sm", children: [_jsxs("span", { className: "num font-medium", children: [n, " selected"] }), _jsx(LumenSelector, { trigger: "chip", size: "sm", label: "Set level on\u2026", placeholder: "Set level on\u2026", value: null, options: levelOptions, onChange: setLevel }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => setRole('admin'), children: [_jsx(ShieldCheckIcon, {}), " Make admin"] }), invites.length > 0 && (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
+    return (_jsxs(LumenBulkBar, { count: n, label: "Change the ticked people", onClear: onClear, children: [_jsx(LumenSelector, { trigger: "chip", size: "sm", label: "Set level on\u2026", placeholder: "Set level on\u2026", value: null, options: levelOptions, onChange: setLevel }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => setRole('admin'), children: [_jsx(ShieldCheckIcon, {}), " Make admin"] }), invites.length > 0 && (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
                     onClear();
                     void act(() => each({ op: 'resend' }, invites), `New invites sent to ${many(invites.length)}`);
-                }, children: [_jsx(MailIcon, {}), " Resend invites"] })), _jsxs(Button, { size: "sm", variant: "outline", onClick: disable, children: [_jsx(BanIcon, {}), " Disable"] }), _jsxs(Button, { size: "sm", variant: "outline", className: "text-destructive", onClick: () => setRemoving(true), children: [_jsx(Trash2Icon, {}), " Remove"] }), _jsx(Button, { size: "icon-sm", variant: "ghost", "aria-label": "Clear the selection", className: "ml-auto", onClick: onClear, children: _jsx(XIcon, {}) }), _jsx(LumenConfirm, { open: removing, onOpenChange: setRemoving, title: `Remove ${many(n)}?`, description: "Each part of the app deletes their data first, then they leave People. This cannot be undone.", typeToConfirm: "REMOVE", action: "Remove for good", busyAction: "Removing\u2026", onConfirm: async () => {
+                }, children: [_jsx(MailIcon, {}), " Resend invites"] })), _jsxs(Button, { size: "sm", variant: "outline", onClick: disable, children: [_jsx(BanIcon, {}), " Disable"] }), _jsxs(Button, { size: "sm", variant: "outline", className: "text-destructive", onClick: () => setRemoving(true), children: [_jsx(Trash2Icon, {}), " Remove"] }), _jsx(LumenConfirm, { open: removing, onOpenChange: setRemoving, title: `Remove ${many(n)}?`, description: "Each part of the app deletes their data first, then they leave People. This cannot be undone.", typeToConfirm: "REMOVE", action: "Remove for good", busyAction: "Removing\u2026", onConfirm: async () => {
                     const r = await act(() => each({ op: 'remove' }, chosen), `Removed ${many(n)}`);
                     if (!r)
                         throw new Error('Some people were not removed.');

package/dist/theme.css

@@ -104,8 +104,9 @@
   --cell-y: 4px;
   /* A UnitValue's unit slot (`GB`, `%`, `/day`), hung in the gutter of a units column. */
   --unit-slot: 2rem;
-  /* A table's first (name) column stops growing here; longer names end in an ellipsis. */
-  --lead-col-max: 18rem;
+  /* A table's first (name) column stops growing here; longer names end in an ellipsis. On a phone
+     it leaves room for the next column (55% of the screen), so a long name never hides the rest. */
+  --lead-col-max: min(18rem, 55vw);
 
   --background: #f4f6fa;
   --foreground: #121826;

package/package.json

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