@columenlabs/lumen-ui 0.2.1 → 0.3.0

package/dist/confirm.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 export interface LumenConfirmProps {
     /** The question, e.g. `Delete view Options?`. */
     title: ReactNode;
@@ -14,5 +14,7 @@ export interface LumenConfirmProps {
     onOpenChange?: (open: boolean) => void;
     /** False for a confirm that destroys nothing (a new version): its action is not red. */
     destructive?: boolean;
+    /** A word the person must type before the action unlocks, for a step that loses a lot (`DELETE`). */
+    typeToConfirm?: string;
 }
-export declare function LumenConfirm({ title, description, action, cancel, onConfirm, children, open, onOpenChange, destructive, }: LumenConfirmProps): import("react").JSX.Element;
+export declare function LumenConfirm({ title, description, action, cancel, onConfirm, children, open, onOpenChange, destructive, typeToConfirm, }: LumenConfirmProps): import("react").JSX.Element;

package/dist/confirm.js

@@ -1,5 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Every delete asks first: one shadcn AlertDialog every app uses for any
+// delete, remove, cancel or other step to confirm (LumenConfirm, : no raw
+// AlertDialog in an app). Wrap the trigger button, or control `open` when it starts from a menu item.
+import { useId, useState } from 'react';
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from './ui/alert-dialog.js';
-export function LumenConfirm({ title, description = 'This cannot be undone.', action = 'Delete', cancel = 'Cancel', onConfirm, children, open, onOpenChange, destructive = true, }) {
-    return (_jsxs(AlertDialog, { open: open, onOpenChange: onOpenChange, children: [children && _jsx(AlertDialogTrigger, { asChild: true, children: children }), _jsxs(AlertDialogContent, { size: "sm", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: title }), _jsx(AlertDialogDescription, { children: description })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: cancel }), _jsx(AlertDialogAction, { variant: destructive ? 'destructive-confirm' : 'default', onClick: onConfirm, children: action })] })] })] }));
+import { Field, FieldLabel } from './ui/field.js';
+import { Input } from './ui/input.js';
+export function LumenConfirm({ title, description = 'This cannot be undone.', action = 'Delete', cancel = 'Cancel', onConfirm, children, open, onOpenChange, destructive = true, typeToConfirm, }) {
+    const id = useId();
+    const [typed, setTyped] = useState('');
+    const locked = typeToConfirm !== undefined && typed !== typeToConfirm;
+    const change = (o) => {
+        if (!o)
+            setTyped('');
+        onOpenChange?.(o);
+    };
+    return (_jsxs(AlertDialog, { open: open, onOpenChange: change, children: [children && _jsx(AlertDialogTrigger, { asChild: true, children: children }), _jsxs(AlertDialogContent, { size: "sm", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: title }), _jsx(AlertDialogDescription, { children: description })] }), typeToConfirm !== undefined && (_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: id, children: _jsxs("span", { children: ["Type ", _jsx("code", { className: "rounded bg-muted px-1.5 font-code", children: typeToConfirm }), " to confirm"] }) }), _jsx(Input, { id: id, autoComplete: "off", className: "font-code", value: typed, onChange: (e) => setTyped(e.target.value) })] })), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: cancel }), _jsx(AlertDialogAction, { variant: destructive ? 'destructive-confirm' : 'default', disabled: locked, onClick: onConfirm, children: action })] })] })] }));
 }

package/dist/connections.js

@@ -143,7 +143,12 @@ export function connectionFields(domain, connections, read, taken) {
         // field on each side is picked; its group stays in the tree for that.
         if (!on) {
             sources.push({ id, name, state: 'off', detail: NOT_LINKED });
-            groups.push({ id, label: name, color: LINK_COLOR, note: NOT_LINKED });
+            groups.push({
+                id,
+                label: name,
+                color: LINK_COLOR,
+                note: 'Pick a field on each side to link it',
+            });
             continue;
         }
         const { index, ok } = indexOf(to, on);

package/dist/index.d.ts

@@ -15,6 +15,10 @@ export { LumenEChart, type EChartOption, type ChartTokens, axisStyle, baseOption
 export { LumenGeoMap } from './lumen-geo-map.js';
 export { LumenWidget, type CardControls, type CardLink, LumenSavedWidget } from './lumen-widget.js';
 export { LumenConfirm, type LumenConfirmProps } from './confirm.js';
+export { type LumenAuthPoint, LumenAuthHeading, LumenAuthNote, LumenAuthProblem, LumenAuthStage, type LumenAuthStageProps, LumenCodeField, LumenEmailField, LumenPasswordField, LumenStepBar, } from './lumen-auth.js';
+export { LumenChoice, type LumenChoiceOption } from './lumen-choice.js';
+export { LumenSecret } from './lumen-secret.js';
+export { RankedBars, StackedBars } from './lumen-widget-charts.js';
 export { COVERAGE_LEVELS, CoverageCell, type CoverageJobState, type CoverageLevel, CoverageLegend, coverageClass, coverageLabel, coverageLevel, } from './coverage-cells.js';
 export { type CoverageBlock, type CoverageData, type CoverageFact, type CoveragePick, type CoverageRow, type CoverageSummary, LumenCoverageMap, type LumenCoverageMapProps, blockName, blockOf, } from './coverage-map.js';
 export { type CalendarFact, LumenCoverageCalendarMap, type LumenCoverageCalendarMapProps, } from './coverage-calendar-map.js';

package/dist/index.js

@@ -22,6 +22,10 @@ export { LumenEChart, axisStyle, baseOption, useChartTokens, } from './lumen-ech
 export { LumenGeoMap } from './lumen-geo-map.js';
 export { LumenWidget, LumenSavedWidget } from './lumen-widget.js';
 export { LumenConfirm } from './confirm.js';
+export { LumenAuthHeading, LumenAuthNote, LumenAuthProblem, LumenAuthStage, LumenCodeField, LumenEmailField, LumenPasswordField, LumenStepBar, } from './lumen-auth.js';
+export { LumenChoice } from './lumen-choice.js';
+export { LumenSecret } from './lumen-secret.js';
+export { RankedBars, StackedBars } from './lumen-widget-charts.js';
 export { COVERAGE_LEVELS, CoverageCell, CoverageLegend, coverageClass, coverageLabel, coverageLevel, } from './coverage-cells.js';
 export { LumenCoverageMap, blockName, blockOf, } from './coverage-map.js';
 export { LumenCoverageCalendarMap, } from './coverage-calendar-map.js';

package/dist/lumen-auth.d.ts

@@ -0,0 +1,67 @@
+import { type ComponentType, type ReactNode } from 'react';
+export interface LumenAuthPoint {
+    icon: ComponentType<{
+        className?: string;
+    }>;
+    title: string;
+    body: string;
+}
+export interface LumenAuthStageProps {
+    /** The app's logo and name, shown over the story and, on a phone, over the form. */
+    brand: ReactNode;
+    /** The story's headline and the line under it. */
+    pitch: {
+        title: ReactNode;
+        body?: ReactNode;
+    };
+    points?: LumenAuthPoint[];
+    /** A picture under the points, such as a diagram of what the app does. */
+    illustration?: ReactNode;
+    /** Small links under the form (privacy, terms). */
+    footer?: ReactNode;
+    children: ReactNode;
+}
+/** The page a signed-out screen sits in. */
+export declare function LumenAuthStage({ brand, pitch, points, illustration, footer, children, }: LumenAuthStageProps): import("react").JSX.Element;
+/** A screen's title, and a line under it. */
+export declare function LumenAuthHeading({ title, sub }: {
+    title: ReactNode;
+    sub?: ReactNode;
+}): import("react").JSX.Element;
+/** A red line over the form; renders nothing when empty. */
+export declare function LumenAuthProblem({ children }: {
+    children?: ReactNode;
+}): import("react").JSX.Element | null;
+/** A plain note over the form, such as "New code sent"; renders nothing when empty. */
+export declare function LumenAuthNote({ children }: {
+    children?: ReactNode;
+}): import("react").JSX.Element | null;
+interface TextFieldProps {
+    id?: string;
+    value: string;
+    onChange: (v: string) => void;
+    /** The browser's autocomplete hint (`username`, `email`, `current-password`, `new-password`). */
+    autoComplete: string;
+    label?: string;
+}
+export declare function LumenEmailField({ id, value, onChange, autoComplete, label, }: TextFieldProps): import("react").JSX.Element;
+/** A password box with a Show switch beside it. */
+export declare function LumenPasswordField({ id, value, onChange, autoComplete, label, }: TextFieldProps): import("react").JSX.Element;
+/** A one-time code from an email or an authenticator app: digits only, big and spaced. */
+export declare function LumenCodeField({ id, value, onChange, length, error, hint, onResend, resendLabel, }: {
+    id?: string;
+    value: string;
+    onChange: (v: string) => void;
+    length?: number;
+    error?: ReactNode;
+    hint?: ReactNode;
+    /** Shows a link after the hint that asks for a fresh code. */
+    onResend?: () => void;
+    resendLabel?: string;
+}): import("react").JSX.Element;
+/** Progress through a short flow: one bar per step, filled up to `at`, and "Step 2 of 3". */
+export declare function LumenStepBar({ at, of }: {
+    at: number;
+    of: number;
+}): import("react").JSX.Element;
+export {};

package/dist/lumen-auth.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The signed-out screens every app shares: a split page (the app's story on the left, hidden on
+// a phone, the form on the right) and the fields its forms are built from. The app passes its
+// brand, pitch, points, illustration and footer links; the kit draws the layout.
+import { Lock, Mail } from 'lucide-react';
+import { useId, useState } from 'react';
+import { Alert, AlertDescription } from './ui/alert.js';
+import { Checkbox } from './ui/checkbox.js';
+import { Field, FieldDescription, FieldError, FieldLabel } from './ui/field.js';
+import { Input } from './ui/input.js';
+import { InputGroup, InputGroupAddon, InputGroupInput } from './ui/input-group.js';
+/** The page a signed-out screen sits in. */
+export function LumenAuthStage({ brand, pitch, points = [], illustration, footer, children, }) {
+    return (_jsxs("div", { className: "grid min-h-svh grid-cols-1 lg:grid-cols-[minmax(0,1.05fr)_minmax(0,1fr)]", children: [_jsxs("aside", { className: "hidden flex-col gap-10 border-r bg-sidebar px-10 py-8 text-sidebar-foreground lg:flex", children: [brand, _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("h2", { className: "text-balance font-semibold text-3xl leading-tight", children: pitch.title }), pitch.body && _jsx("p", { className: "max-w-md text-muted-foreground", children: pitch.body })] }), points.length > 0 && (_jsx("ul", { className: "flex flex-col gap-4", children: points.map(({ icon: Icon, title, body }) => (_jsxs("li", { className: "flex gap-3", children: [_jsx("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground", children: _jsx(Icon, { className: "size-4.5" }) }), _jsxs("span", { className: "flex flex-col", children: [_jsx("span", { className: "font-medium text-sm", children: title }), _jsx("span", { className: "text-muted-foreground text-sm", children: body })] })] }, title))) })), illustration] }), _jsxs("main", { className: "flex flex-col bg-background px-6 py-8 sm:px-12", children: [_jsx("div", { className: "lg:hidden", children: brand }), _jsx("div", { className: "mx-auto flex w-full max-w-sm flex-1 flex-col justify-center py-8", children: children }), footer && _jsx("div", { className: "text-center text-muted-foreground text-xs", children: footer })] })] }));
+}
+/** A screen's title, and a line under it. */
+export function LumenAuthHeading({ title, sub }) {
+    return (_jsxs("div", { className: "mb-6 flex flex-col gap-1.5", children: [_jsx("h1", { className: "font-semibold text-2xl", children: title }), sub && _jsx("p", { className: "text-muted-foreground text-sm", children: sub })] }));
+}
+/** A red line over the form; renders nothing when empty. */
+export function LumenAuthProblem({ children }) {
+    if (!children)
+        return null;
+    return (_jsx(Alert, { variant: "destructive", className: "mb-4", children: _jsx(AlertDescription, { children: children }) }));
+}
+/** A plain note over the form, such as "New code sent"; renders nothing when empty. */
+export function LumenAuthNote({ children }) {
+    if (!children)
+        return null;
+    return (_jsxs(Alert, { className: "mb-4", children: [_jsx(Mail, {}), _jsx(AlertDescription, { children: children })] }));
+}
+export function LumenEmailField({ id, value, onChange, autoComplete, label = 'Email', }) {
+    const own = useId();
+    const fieldId = id ?? own;
+    return (_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: fieldId, children: label }), _jsxs(InputGroup, { className: "h-10", children: [_jsx(InputGroupAddon, { children: _jsx(Mail, {}) }), _jsx(InputGroupInput, { id: fieldId, type: "email", required: true, autoComplete: autoComplete, placeholder: "you@example.com", value: value, onChange: (e) => onChange(e.target.value) })] })] }));
+}
+/** A password box with a Show switch beside it. */
+export function LumenPasswordField({ id, value, onChange, autoComplete, label = 'Password', }) {
+    const own = useId();
+    const fieldId = id ?? own;
+    const [show, setShow] = useState(false);
+    return (_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: fieldId, children: label }), _jsxs(InputGroup, { className: "h-10", children: [_jsx(InputGroupAddon, { children: _jsx(Lock, {}) }), _jsx(InputGroupInput, { id: fieldId, type: show ? 'text' : 'password', required: true, autoComplete: autoComplete, value: value, onChange: (e) => onChange(e.target.value) }), _jsx(InputGroupAddon, { align: "inline-end", className: "border-l bg-muted/50 px-3", children: _jsxs("label", { htmlFor: `${fieldId}-show`, className: "flex items-center gap-1.5 text-sm", children: [_jsx(Checkbox, { id: `${fieldId}-show`, checked: show, onCheckedChange: (v) => setShow(v === true) }), ' ', "Show"] }) })] })] }));
+}
+/** A one-time code from an email or an authenticator app: digits only, big and spaced. */
+export function LumenCodeField({ id, value, onChange, length = 6, error, hint, onResend, resendLabel = 'Send a new code', }) {
+    const own = useId();
+    return (_jsxs(Field, { "data-invalid": error ? true : undefined, children: [_jsx(Input, { id: id ?? own, inputMode: "numeric", autoComplete: "one-time-code", placeholder: '0'.repeat(length), maxLength: length, "aria-label": `${length}-digit code`, className: "h-14 text-center font-code text-2xl tracking-[0.6em]", value: value, onChange: (e) => onChange(e.target.value.replace(/\D/g, '').slice(0, length)), "aria-invalid": Boolean(error) }), error ? _jsx(FieldError, { children: error }) : null, (hint || onResend) && (_jsxs(FieldDescription, { className: "text-center", children: [hint, ' ', onResend && (_jsx("button", { type: "button", className: "text-primary underline-offset-4 hover:underline", onClick: onResend, children: resendLabel }))] }))] }));
+}
+/** Progress through a short flow: one bar per step, filled up to `at`, and "Step 2 of 3". */
+export function LumenStepBar({ at, of }) {
+    return (_jsxs("div", { className: "mb-5 flex flex-col gap-1.5", children: [_jsx("div", { className: "flex gap-1.5", children: Array.from({ length: of }, (_, i) => i + 1).map((n) => (_jsx("span", { className: `h-1 flex-1 rounded-full ${n <= at ? 'bg-primary' : 'bg-muted'}` }, n))) }), _jsxs("span", { className: "text-center text-muted-foreground text-xs", children: ["Step ", at, " of ", of] })] }));
+}

package/dist/lumen-choice.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentType, ReactNode } from 'react';
+export interface LumenChoiceOption<T extends string> {
+    value: T;
+    icon: ComponentType<{
+        className?: string;
+    }>;
+    title: ReactNode;
+    description?: ReactNode;
+    disabled?: boolean;
+}
+export declare function LumenChoice<T extends string>({ label, value, options, onValueChange, }: {
+    /** Names the group for screen readers. */
+    label: string;
+    /** The picked option, or null before the person picks. */
+    value: T | null;
+    options: LumenChoiceOption<T>[];
+    onValueChange: (v: T) => void;
+}): import("react").JSX.Element;

package/dist/lumen-choice.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A pick-one list of cards, each with an icon, a title and a line under it: the way an app asks
+// "how do you want to do this?" when each option needs a sentence. For a short one-of-a-few
+// choice without notes, use CardSegments.
+import { Check } from 'lucide-react';
+import { Item, ItemContent, ItemDescription, ItemMedia, ItemTitle } from './ui/item.js';
+export function LumenChoice({ label, value, options, onValueChange, }) {
+    return (_jsx("fieldset", { "aria-label": label, className: "m-0 flex min-w-0 flex-col gap-3 border-0 p-0", children: options.map(({ value: v, icon: Icon, title, description, disabled }) => {
+            const picked = v === value;
+            return (_jsx(Item, { asChild: true, variant: "outline", className: picked ? 'border-primary bg-primary/5' : 'disabled:opacity-50', children: _jsxs("button", { type: "button", "aria-pressed": picked, disabled: disabled, onClick: () => onValueChange(v), children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(Icon, { className: picked ? 'text-primary' : undefined }) }), _jsxs(ItemContent, { className: "text-left", children: [_jsx(ItemTitle, { children: title }), description && _jsx(ItemDescription, { children: description })] }), picked && _jsx(Check, { className: "size-5 shrink-0 text-primary" })] }) }, v));
+        }) }));
+}

package/dist/lumen-secret.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+export declare function LumenSecret({ value, label, warning, hidden, }: {
+    value: string;
+    label?: string;
+    warning?: ReactNode;
+    /** Start with the value masked. */
+    hidden?: boolean;
+}): import("react").JSX.Element;

package/dist/lumen-secret.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A secret the app shows only once (a new API key, a signing secret): a warning to copy it now,
+// the value in code type with a Show switch, and a Copy button that says when it worked.
+import { Check, Copy, Eye, EyeOff, TriangleAlert } from 'lucide-react';
+import { useState } from 'react';
+import { Alert, AlertDescription } from './ui/alert.js';
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from './ui/input-group.js';
+export function LumenSecret({ value, label = 'Secret', warning = 'Copy it now. It won’t be shown again.', hidden = false, }) {
+    const [show, setShow] = useState(!hidden);
+    const [copied, setCopied] = useState(false);
+    const copy = async () => {
+        try {
+            await navigator.clipboard.writeText(value);
+            setCopied(true);
+        }
+        catch {
+            setCopied(false);
+        }
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [warning && (_jsxs(Alert, { children: [_jsx(TriangleAlert, {}), _jsx(AlertDescription, { children: warning })] })), _jsxs(InputGroup, { className: "h-10", children: [_jsx(InputGroupInput, { readOnly: true, "aria-label": label, type: show ? 'text' : 'password', value: value, className: "font-code text-xs", onFocus: (e) => e.currentTarget.select() }), _jsxs(InputGroupAddon, { align: "inline-end", children: [_jsx(InputGroupButton, { size: "icon-xs", "aria-label": show ? `Hide ${label.toLowerCase()}` : `Show ${label.toLowerCase()}`, onClick: () => setShow((s) => !s), children: show ? _jsx(EyeOff, {}) : _jsx(Eye, {}) }), _jsxs(InputGroupButton, { size: "xs", onClick: copy, children: [copied ? _jsx(Check, {}) : _jsx(Copy, {}), copied ? 'Copied' : 'Copy'] })] })] })] }));
+}

package/dist/view-editor.js

@@ -10,7 +10,7 @@ import { CONNECTED_COUNT, VIEW_CARD_KIND_NAMES, WIDGET_STYLES, cardsOf, connecte
 import { DndContext, KeyboardSensor, PointerSensor, TouchSensor, closestCenter, useSensor, useSensors, } from '@dnd-kit/core';
 import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { ArrowDownIcon, ArrowLeftIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, Columns3Icon, CopyIcon, DatabaseIcon, EllipsisIcon, FilterIcon, GripVerticalIcon, LayoutDashboardIcon, Link2Icon, MoveHorizontalIcon, PencilIcon, PlusIcon, ReplaceIcon, RotateCcwIcon, SearchIcon, ShapesIcon, ShrinkIcon, SigmaIcon, SlidersHorizontalIcon, SmileIcon, SparklesIcon, StarIcon, TableIcon, ToggleRightIcon, Trash2Icon, Unlink2Icon, XIcon, } from 'lucide-react';
+import { ArrowDownIcon, ArrowLeftIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, Columns3Icon, CopyIcon, DatabaseIcon, EllipsisIcon, FilterIcon, GripVerticalIcon, LayoutDashboardIcon, Link2Icon, MoveHorizontalIcon, PencilIcon, PlusIcon, ReplaceIcon, RotateCcwIcon, SearchIcon, ShapesIcon, ShrinkIcon, SigmaIcon, SlidersHorizontalIcon, SmileIcon, SparklesIcon, StarIcon, TableIcon, ToggleRightIcon, Trash2Icon, Unlink2Icon, UnlinkIcon, XIcon, } from 'lucide-react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { AddFormulaDialog } from './add-column.js';
 import { useAssistant, useAssistantName } from './assistant-context.js';
@@ -808,7 +808,7 @@ function FieldTree({ domain, draft, picked, onPick, why, formulaProblems, onEdit
                         : isOpen(`g:${g.id}`, all) || (formulasGroup && !all.length);
                     const topics = [...new Set(fields.map((f) => f.topic ?? ''))];
                     return (_jsxs(Collapsible, { open: open, onOpenChange: () => flip(`g:${g.id}`, open), children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", className: "h-7 min-w-0 flex-1 justify-start gap-2 px-1.5 text-[0.8125rem] font-semibold", children: [_jsx(ChevronRightIcon, { className: cn('text-muted-foreground transition-transform', open && 'rotate-90') }), _jsx("span", { className: "size-2.5 shrink-0 rounded-[3px]", style: { background: color } }), formulasGroup && _jsx(SigmaIcon, { className: "text-muted-foreground" }), linkTo &&
-                                                    (unlinked ? (_jsx(Unlink2Icon, { className: "text-destructive" })) : (_jsx(Link2Icon, { className: "text-muted-foreground" }))), recipe && _jsx(SparklesIcon, { className: "text-muted-foreground" }), _jsx("span", { className: "truncate", children: rowsGroup && main ? main.label : g.label }), rowsGroup && (_jsx(Badge, { variant: "secondary", className: "h-4 px-1.5 text-[0.6875rem] font-normal", children: "Rows" })), unlinked && (_jsx(Badge, { variant: "destructive", className: "h-4 px-1.5 text-xs font-normal", children: "Not linked" })), _jsxs("span", { className: "num ml-auto text-xs font-normal text-muted-foreground", children: [all.filter((f) => picked(f.key)).length, "/", all.length] })] }) }), rowsGroup && main && (_jsxs(_Fragment, { children: [_jsx(LumenSelector, { trigger: "icon", icon: ReplaceIcon, label: "Change the main data", align: "end", search: true, value: null, options: main.options, empty: "No other data", onChange: main.onPick }), _jsx(IconButton, { icon: XIcon, size: "icon-xs", label: `Drop ${main.label}`, onClick: main.onDrop })] })), main && (linkTo || recipe) && (_jsx(IconButton, { icon: StarIcon, size: "icon-xs", label: `Make ${g.label} the main data`, onClick: () => main.onMakeMain(linkTo ?? `${FRAME_LINK}${recipe}`) })), main && linkTo && onUnlink && (_jsx(IconButton, { icon: XIcon, size: "icon-xs", label: `Drop ${g.label}`, onClick: () => onUnlink(linkTo) })), main && recipe && onRemoveRecipe && (_jsx(IconButton, { icon: XIcon, size: "icon-xs", label: `Drop ${g.label}`, onClick: () => onRemoveRecipe(recipe) })), !main && linkTo && onUnlink && (_jsx(LumenConfirm, { title: `Unlink ${g.label}?`, description: "Its columns leave this widget when you save.", action: "Unlink", onConfirm: () => onUnlink(linkTo), children: _jsx(IconButton, { icon: Unlink2Icon, size: "icon-xs", label: `Unlink ${g.label}` }) })), !main && recipe && onRemoveRecipe && (_jsx(LumenConfirm, { title: `Remove ${g.label}?`, description: `Its columns leave this widget when you save. The recipe stays in ${assistantName}.`, action: "Remove", onConfirm: () => onRemoveRecipe(recipe), children: _jsx(IconButton, { icon: XIcon, size: "icon-xs", label: `Remove ${g.label}` }) }))] }), _jsxs(CollapsibleContent, { className: "ml-[0.9rem] flex flex-col gap-px border-l-2 pl-2", style: { borderColor: guide(color) }, children: [g.note && !q && (_jsx("p", { className: cn('px-1 py-1 text-xs', unlinked ? 'text-destructive' : 'text-muted-foreground'), children: g.note })), linkTo && linkPairs && !q && (_jsx(LinkPairs, { label: g.label, on: linkPairs.onOf(linkTo), cardFields: linkPairs.cardFields, fields: linkPairs.fieldsOf(linkTo), onChange: (on) => linkPairs.set(linkTo, on) })), unlinked &&
+                                                    (unlinked ? (_jsx(UnlinkIcon, { className: "text-destructive" })) : (_jsx(Link2Icon, { className: "text-muted-foreground" }))), recipe && _jsx(SparklesIcon, { className: "text-muted-foreground" }), _jsx("span", { className: "truncate", children: rowsGroup && main ? main.label : g.label }), rowsGroup && (_jsx(Badge, { variant: "secondary", className: "h-4 px-1.5 text-[0.6875rem] font-normal", children: "Rows" })), _jsxs("span", { className: "num ml-auto text-xs font-normal text-muted-foreground", children: [all.filter((f) => picked(f.key)).length, "/", all.length] })] }) }), rowsGroup && main && (_jsxs(_Fragment, { children: [_jsx(LumenSelector, { trigger: "icon", icon: ReplaceIcon, label: "Change the main data", align: "end", search: true, value: null, options: main.options, empty: "No other data", onChange: main.onPick }), _jsx(IconButton, { icon: XIcon, size: "icon-xs", label: `Drop ${main.label}`, onClick: main.onDrop })] })), main && (linkTo || recipe) && (_jsx(IconButton, { icon: StarIcon, size: "icon-xs", label: `Make ${g.label} the main data`, onClick: () => main.onMakeMain(linkTo ?? `${FRAME_LINK}${recipe}`) })), main && linkTo && onUnlink && (_jsx(IconButton, { icon: XIcon, size: "icon-xs", label: `Drop ${g.label}`, onClick: () => onUnlink(linkTo) })), main && recipe && onRemoveRecipe && (_jsx(IconButton, { icon: XIcon, size: "icon-xs", label: `Drop ${g.label}`, onClick: () => onRemoveRecipe(recipe) })), !main && linkTo && onUnlink && (_jsx(LumenConfirm, { title: `Unlink ${g.label}?`, description: "Its columns leave this widget when you save.", action: "Unlink", onConfirm: () => onUnlink(linkTo), children: _jsx(IconButton, { icon: Unlink2Icon, size: "icon-xs", label: `Unlink ${g.label}` }) })), !main && recipe && onRemoveRecipe && (_jsx(LumenConfirm, { title: `Remove ${g.label}?`, description: `Its columns leave this widget when you save. The recipe stays in ${assistantName}.`, action: "Remove", onConfirm: () => onRemoveRecipe(recipe), children: _jsx(IconButton, { icon: XIcon, size: "icon-xs", label: `Remove ${g.label}` }) }))] }), _jsxs(CollapsibleContent, { className: "ml-[0.9rem] flex flex-col gap-px border-l-2 pl-2", style: { borderColor: guide(color) }, children: [g.note && !q && (_jsx("p", { className: "px-1 py-1 text-xs text-muted-foreground", children: g.note })), linkTo && linkPairs && !q && (_jsx(LinkPairs, { label: g.label, on: linkPairs.onOf(linkTo), cardFields: linkPairs.cardFields, fields: linkPairs.fieldsOf(linkTo), onChange: (on) => linkPairs.set(linkTo, on) })), unlinked &&
                                         linkPairs
                                             ?.fieldsOf(linkTo)
                                             .filter(match)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -41,7 +41,7 @@
     "@codemirror/lang-javascript": "6.2.5",
     "@codemirror/lang-json": "6.0.2",
     "@codemirror/lang-sql": "6.10.0",
-    "@columenlabs/lumen-ui-types": "0.2.1",
+    "@columenlabs/lumen-ui-types": "0.3.0",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",