blixify-ui-web-mcp 0.1.56 → 0.1.58

package/lib/components/data/dataTemplate/README.md

@@ -729,6 +729,28 @@ Use `organise.additionalQuery` to add filter controls above the list. Each entry
 
 ---
 
+### Formula column
+
+A `type: "formula"` column is a monday.com-style formula. It is worked out from the row whenever the row is shown — table, kanban, grid and read view — and never stored on the record. It is a column type of its own: `math` columns and their `mathExpression` are untouched by it.
+
+```tsx
+{
+  id: "spendStatus",
+  name: "Spend Status",
+  type: "formula",
+  formulaExpression: 'IF({spent} > {budget}, "Over budget", "Under budget")',
+}
+```
+
+- **Syntax** follows [monday's formula column](https://support.monday.com/hc/en-us/articles/360001235445-The-Formula-Column): `{Column}` references a column (the builder shows names, the schema stores ids, so renaming a column never breaks a formula), text in quotes, `=` / `<>` compare, `&` joins text (below `+`/`-`, above comparisons, as in monday), `+ - * / ^ %` and `( )`.
+- **Functions** — monday's library, in `src/components/data/formula/functions.ts`: text (`CONCATENATE`, `LEFT`, `LEN`, `REPLACE`, `SEARCH`, `SUBSTITUTE`, `TEXT`, `TRIM` …), logical (`IF`, `SWITCH`, `AND`, `OR`, `XOR`, `NOT`, `EXACT`), numeric (`SUM`, `AVERAGE`, `ROUND`, `ROUNDUP`, `ROUNDDOWN`, `MOD`, `POWER` …), date (`TODAY`, `NOW`, `DAYS`, `WORKDAYS`, `ADD_DAYS`, `FORMAT_DATE`, `WEEKNUM` …) and `PI` / `TRUE` / `FALSE`. Text results are capped at 10,000 characters.
+- **Values:** an empty cell is blank text, 0 in arithmetic and equal to 0 in a comparison with a number. Reference and role columns read their label; a math column reads the number it shows. A formula can read another formula; a circular reference shows `Error`. Files, images, addresses, objects, passwords, signatures, canvas and gantt columns cannot be used.
+- **Adding:** with `bareAddColumns`, pick **Formula** as the type in the header + panel. The builder lists columns and functions with an example of each, validates as you type and previews the first row.
+- **Sort and filter** use the computed value, as monday does: header / view settings sort, and the flex filters. Either makes the list read the matching rows — at most `FORMULA_VIEW_MAX_ROWS` (5,000), in a fixed order, with a notice when there are more — and filter, order and page them locally. The cap also applies to the calendar, map, timeline and legacy grouped views, which otherwise read every row. On Firebase and union lists formula columns are not offered for sorting or filtering. CSV export sends the rows a formula filter kept, by id; "Select all pages" is off in a formula view, and the selection callbacks' query does not carry formula conditions.
+- **Earlier library versions** have no case for `formula`, so they show its cell blank. Apps that build schemas with `parseSpaceToDataStructure` need this version to receive `formulaExpression`; a consumer with its own `DataType` list (blixify-space-next `models/Data.ts`) adds `"formula"` to it.
+
+---
+
 ### With activity log (comments + audit trail)
 
 Enable `edit.activityLog` to open the activity panel from list and read views. It uses the new feeds and pagination UI, an inline comment composer, editable comments, confirmed deletion, and before/after audit values. It follows `organise.darkMode`, including when opened from a legacy table.
@@ -1084,7 +1106,7 @@ Which field types can be edited from the list table, and how. Types not listed u
 
 | Edited **in the cell**                                                                                                                                                                                                   | Edited **in a modal** (cell click opens it)                                                                                 | Read-only in list             | Never rendered as a list column |
 | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | ------------------------------- |
-| `string`, `contact`, `email`, `textArea`, `number`, `boolean` (checkbox and radio commit on select), `date`, `list`, `multipleList`, `person`, `listPerson`, `roles`, `reference`, `listReference`, `referenceSelection` | `image`, `multipleImage`, `address`, `object`, `listObject`, `markdown`, `signature`, `file`, `multipleFile`, `listAddress` | `math` (computed), `password` | `canvas`, `ganttchart`          |
+| `string`, `contact`, `email`, `textArea`, `number`, `boolean` (checkbox and radio commit on select), `date`, `list`, `multipleList`, `person`, `listPerson`, `roles`, `reference`, `listReference`, `referenceSelection` | `image`, `multipleImage`, `address`, `object`, `listObject`, `markdown`, `signature`, `file`, `multipleFile`, `listAddress` | `math` (computed), `formula` (computed), `password` | `canvas`, `ganttchart`          |
 
 - **Why some types edit in a modal:** their editor is bigger than one line. An
   `address` is a Places autocomplete plus a map with a draggable pin plus

package/lib/components/data/dataWrapper/dataWrapper.edit.stories.tsx

@@ -538,6 +538,97 @@ export const DTWInlineEditMatrix = () => {
   );
 };
 
+// INFO: a formula column the monday.com way — added from the header +, written
+// with {Column} references, sorted and filtered on its computed value. Formula
+// rows are read in full (stopLimit) so a sort orders every row, not one page.
+export const DTWFormulaColumn = () => {
+  // 1. State
+  const [mount, setMount] = useState<boolean>(false);
+  const [schema, setSchema] = useState<any[]>(() => [
+    ...InlineEditMatrixSchema.filter((each) =>
+      ["name", "qty", "status", "due", "owner", "site"].includes(each.id),
+    ),
+    {
+      id: "spend",
+      name: "Spend Status",
+      type: "formula" as const,
+      formulaExpression: 'IF({qty} > 20, "Over budget", "Under budget")',
+      optional: true,
+    },
+  ]);
+  const [, setTick] = useState<number>(0);
+
+  // 2. Refs
+  const storeRef = useRef<any[]>(handleBuildMatrixRecords());
+  const ownersRef = useRef<any[]>(handleBuildMatrixOwners());
+  const countersRef = useRef({ list: 0, update: 0, ownerList: 0 });
+  const mockRef = useRef<any>(null);
+
+  // 4. Effects
+  useEffect(() => {
+    mockRef.current = handleInstallMatrixMock(
+      storeRef.current,
+      ownersRef.current,
+      countersRef.current,
+      () => setTick((previous) => previous + 1),
+    );
+    setMount(true);
+    return () => {
+      mockRef.current?.restore();
+      mockRef.current = null;
+    };
+  }, []);
+
+  // 7. Return
+  if (!mount) return <Loading />;
+
+  return (
+    <div className="w-full">
+      <div className="font-semibold mb-1 text-gray-900">DTW Formula Column</div>
+      <div className="text-sm font-light mb-4 text-gray-500">
+        Spend Status is IF({"{Qty}"} &gt; 20, &quot;Over budget&quot;,
+        &quot;Under budget&quot;). Add another formula from the header +, pick
+        Formula as the type and reference columns in braces. Sort a formula from
+        its header or filter it from the flex filters — both run on the computed
+        value.
+      </div>
+      <div className="mb-3 text-xs text-gray-600 font-mono">
+        list calls:{" "}
+        <span data-testid="formula-list-count">{countersRef.current.list}</span>
+      </div>
+      <DataTemplateWrapper
+        title="Budget"
+        type="list"
+        collectionId={MATRIX_COLLECTION}
+        schema={schema}
+        workspace={{
+          apiEndpointType: "mongoDB",
+          apiEndpoint: MATRIX_ENDPOINT,
+          apiEndpointToken: "",
+          apiUserToken: "",
+          assetEndpoint: "",
+          assetUploadEndpoint: "",
+        }}
+        edit={{ allEditable: true, listEditable: true, deleteBtn: false }}
+        bareSettings={{
+          bareNewDTW: true,
+          bareCompactMode: true,
+          bareAddColumns: true,
+          bareFlexFilters: true,
+        }}
+        organise={{
+          // INFO: holds the sort the header sets, as an app's saved view would
+          persistViewState: "session",
+          breadcrumbType: "button",
+          onAddColumns: (model) => setSchema(model),
+        }}
+        handleNavigate={() => {}}
+        limit={5}
+      />
+    </div>
+  );
+};
+
 /**
  * INFO: the shape blixify-space-next actually runs — a live database embedded in
  * a document, with columns addable from the table and rows addable inline.

package/lib/components/input/markdown/README.md

@@ -118,10 +118,20 @@ On error the editor draws a red outline (`border border-red-500 rounded`) — th
 
 > **`heightClassName` in borderless mode must be a `min-h-*` class**, not a fixed `h-*`. Borderless has no inner `overflow-y-auto`, so a fixed height clips content instead of scrolling it. Leave it unset unless you need a taller empty state.
 
-Selecting text in borderless mode shows a floating toolbar above the selection — Bold, Italic, Underline, Strikethrough, Inline code, Link and Clear formatting. It works inside table cells, and does not show in read-only mode, in a code block, or when an image or embed is selected. The boxed editor keeps its static toolbar instead.
+Selecting text in borderless mode shows a floating toolbar above the selection — Bold, Italic, Underline, Strikethrough, Inline code, Colour, Link and Clear formatting. It works inside table cells, and does not show in read-only mode, in a code block, or when an image or embed is selected. The boxed editor keeps its static toolbar instead.
 
 > **Note:** hiding the toolbar also hides its media-upload button. In borderless mode insert images and videos by **dragging or pasting** into the editor, or supply your own control via `customElement`.
 
+##### Text colour and highlight
+
+The **A** button — in the boxed editor's toolbar and in the selection toolbar — opens a palette of nine text colours and nine highlights (gray, brown, orange, yellow, green, blue, purple, pink, red), each with a Default that takes it off. Markdown has no colour, so coloured text is stored as a small inline tag, the way underline is stored as `<u>`:
+
+```markdown
+<span data-text-color="red" style="color: #dc2626">late</span> and <mark data-highlight="yellow" style="background-color: rgba(250, 204, 21, 0.4); color: inherit">due</mark>
+```
+
+The editor reads back only the palette's names and always rewrites the style from the palette, so a note saved through the editor carries no other style through these tags, and an unknown colour name is saved as plain text. `MarkdownStatic` renders stored HTML as it is, so a note written by another route (an API, an import) is not cleaned by this. Colour pasted from Notion or Google Docs is not kept — only colour copied from another of these editors, which carries the palette names. Highlights are see-through, so they read on light and dark pages; text colours are picked for a white page, and blue, purple and brown are faint on the dark editor. Anything reading a note as plain markdown (an AI, a search snippet) sees the tags.
+
 ##### Read-Only Mode (Preview)
 
 ```tsx
@@ -350,6 +360,29 @@ moving away closes it, but opening is gated on the document actually changing
 otherwise clicking anywhere after a slash already sitting in the prose would pop
 the menu open unasked.
 
+##### Tables
+
+How a table is stored depends on what is in it (`tableMarkdown.ts`):
+
+- **Simple**: a header row of `th`, one line of inline text per cell, and no
+  merged cells. These stay a GFM pipe table. Inline marks are kept and `|` is
+  escaped.
+- **Rich**: lists, several paragraphs, line breaks, merged cells, or no header
+  row. These are stored as one line of `<table>` html. markdown-it runs with
+  `html: true`, so it reads back exactly as written. Tables pasted from Notion
+  usually land here.
+
+In borderless mode, `TableControls` (`tableControls.tsx`) adds controls to the
+hovered table, or to the table holding the caret on touch and keyboard:
+
+- a `+` bar on the right edge adds a column
+- a `+` bar on the bottom edge adds a row
+- a row grip and a column grip each open a menu (insert, duplicate, clear,
+  delete, header row)
+
+Embedded databases are left alone. While the caret is in a table, the slash menu
+also lists add and delete commands for rows and columns.
+
 ##### Spacing
 
 Tailwind Typography is tuned for articles, which leaves 20px between paragraphs

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blixify-ui-web-mcp",
-  "version": "0.1.56",
+  "version": "0.1.58",
   "license": "MIT",
   "main": "lib/mcp/server.js",
   "bin": {