@columenlabs/lumen-ui 0.1.34 → 0.1.35

package/dist/formula-input.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { renameFormula } from '@columenlabs/lumen-ui-types/views';
+import { FORMULA_FUNCTIONS, renameFormula } from '@columenlabs/lumen-ui-types/views';
 // Formula box with autocomplete: a formula reads fields by name, where they
 // come from and their key (`symbol.price`, `frame.earnings_next_week.eps`, a formula's bare key),
 // but people know fields by their labels (Price). Typing a word opens a LumenSelectorList under
@@ -8,20 +8,29 @@ import { renameFormula } from '@columenlabs/lumen-ui-types/views';
 import { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { LumenSelectorList, fuzzyScore } from './lumen-selector.js';
 import { Textarea } from './ui/textarea.js';
-/** The roll-ups a formula can call, offered beside the fields. */
+/**
+ * The functions a formula can call, offered beside the fields: the two roll-ups, then the date,
+ * text and number functions, each with how to call it under its name.
+ */
 const FUNCTIONS = [
     {
         value: 'group_sum("")',
         label: 'group_sum',
-        detail: 'a field summed over its group',
-        group: 'Functions',
+        description: 'group_sum("field") · a field summed over its group',
+        group: 'Sums',
     },
     {
         value: 'total_sum("")',
         label: 'total_sum',
-        detail: 'a field summed over every row',
-        group: 'Functions',
+        description: 'total_sum("field") · a field summed over every row',
+        group: 'Sums',
     },
+    ...FORMULA_FUNCTIONS.map((f) => ({
+        value: `${f.name}()`,
+        label: f.name,
+        description: `${f.call} · ${f.detail}`,
+        group: `${f.group} functions`,
+    })),
 ];
 /** The name the caret is in (dots included), from its start to the caret. */
 function wordAt(text, caret) {
@@ -55,10 +64,11 @@ export function FormulaInput({ id, value, onChange, fields, invalid, placeholder
         if (caret === null)
             return;
         const end = wordEnd(value, caret);
-        const fn = o.value.endsWith('("")');
+        const back = o.value.endsWith('("")') ? 2 : o.value.endsWith('()') ? 1 : 0;
         const next = value.slice(0, start) + o.value + value.slice(end);
-        // A function's caret goes between its quotes, ready for the field it sums.
-        moveTo.current = start + (fn ? o.value.length - 2 : o.value.length);
+        // A function's caret goes inside it: between a sum's quotes, ready for the field it sums, or
+        // between the brackets, ready for its arguments.
+        moveTo.current = start + o.value.length - back;
         onChange(next);
     };
     const track = () => setCaret(box.current?.selectionStart ?? null);

package/dist/view-formulas.js

@@ -227,7 +227,7 @@ export function FormulaForm({ formula: f, issue, blank, fields, onChange, onRemo
         const to = guessField(name, fields);
         return to ? [{ name, to }] : [];
     });
-    return (_jsxs("div", { className: row ? 'col-span-full grid gap-3 border-t bg-muted/30 px-3 py-3 md:pl-10' : 'grid gap-3 p-4', children: [_jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [_jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: `${id}-label`, children: "Label" }), _jsx(Input, { id: `${id}-label`, value: f.label, onChange: (e) => onChange({ label: e.target.value }) })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: `${id}-key`, children: "Key" }), _jsx(Input, { id: `${id}-key`, className: "font-mono text-xs", value: f.key, onChange: (e) => onChange({ key: e.target.value }) })] })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: `${id}-expr`, children: "Expression" }), _jsx(FormulaInput, { id: `${id}-expr`, invalid: !!issue, fields: fields, placeholder: 'Type a field: market_value / group_sum("market_value") * 100', value: f.expr, onChange: setExpr }), issue ? (_jsxs("p", { role: "alert", className: "flex flex-wrap items-center gap-1.5 text-xs text-destructive", children: [_jsx(CircleAlertIcon, { className: "size-3.5" }), fixes.length
+    return (_jsxs("div", { className: row ? 'col-span-full grid gap-3 border-t bg-muted/30 px-3 py-3 md:pl-10' : 'grid gap-3 p-4', children: [_jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [_jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: `${id}-label`, children: "Label" }), _jsx(Input, { id: `${id}-label`, value: f.label, onChange: (e) => onChange({ label: e.target.value }) })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: `${id}-key`, children: "Key" }), _jsx(Input, { id: `${id}-key`, className: "font-mono text-xs", value: f.key, onChange: (e) => onChange({ key: e.target.value }) })] })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: `${id}-expr`, children: "Expression" }), _jsx(FormulaInput, { id: `${id}-expr`, invalid: !!issue, fields: fields, placeholder: 'Type a field or a function: year(date), round(value / group_sum("value") * 100, 1)', value: f.expr, onChange: setExpr }), issue ? (_jsxs("p", { role: "alert", className: "flex flex-wrap items-center gap-1.5 text-xs text-destructive", children: [_jsx(CircleAlertIcon, { className: "size-3.5" }), fixes.length
                                 ? fixes.map(({ name, to }) => (_jsxs("span", { className: "flex items-center gap-1.5", children: ["No field ", name, ". Did you mean ", _jsx("code", { className: "font-mono", children: to.value }), " (", to.label, ")?", _jsxs(Button, { variant: "outline", size: "xs", onClick: () => setExpr(swapWord(f.expr, name, to.value)), children: [_jsx(WandSparklesIcon, {}), "Fix"] })] }, name)))
                                 : issue] })) : blank ? (_jsxs("p", { className: "flex items-center gap-1.5 text-xs text-warning", children: [_jsx(CircleAlertIcon, { className: "size-3.5" }), "Reads fine, but ", blank] })) : (_jsxs("p", { className: "flex items-center gap-1.5 text-xs text-gain", children: [_jsx(CheckIcon, { className: "size-3.5" }), "Reads fine"] }))] }), _jsxs("div", { className: "flex flex-wrap items-end gap-3", children: [_jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { children: "Format" }), _jsx(LumenSelector, { label: "Format", size: "sm", className: "w-40", options: [
                                     ...formatOptions(),

package/package.json

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