@factorialco/f0-react 1.388.1 → 1.388.3

package/dist/f0.d.ts

@@ -1518,6 +1518,7 @@ declare type CollectionProps<Record extends RecordType, Filters extends FiltersD
 
 declare type CollectionVisualizations<Record extends RecordType, Filters extends FiltersDefinition, Sortings extends SortingsDefinition, Summaries extends SummariesDefinition, ItemActions extends ItemActionsDefinition<Record>, NavigationFilters extends NavigationFiltersDefinition, Grouping extends GroupingDefinition<Record>> = {
     table: VisualizacionTypeDefinition<TableCollectionProps<Record, Filters, Sortings, Summaries, ItemActions, NavigationFilters, Grouping>, TableVisualizationSettings>;
+    editableTable: VisualizacionTypeDefinition<EditableTableCollectionProps<Record, Filters, Sortings, Summaries, ItemActions, NavigationFilters, Grouping>, EditableTableVisualizationSettings>;
     list: VisualizacionTypeDefinition<ListCollectionProps<Record, Filters, Sortings, Summaries, ItemActions, NavigationFilters, Grouping>>;
     card: VisualizacionTypeDefinition<CardCollectionProps<Record, Filters, Sortings, Summaries, ItemActions, NavigationFilters, Grouping>>;
     kanban: VisualizacionTypeDefinition<KanbanCollectionProps<Record, Filters, Sortings, Summaries, ItemActions, NavigationFilters, Grouping>>;
@@ -2362,6 +2363,7 @@ export declare const defaultTranslations: {
         };
         readonly visualizations: {
             readonly table: "Table view";
+            readonly editableTable: "Editable table view";
             readonly card: "Card view";
             readonly list: "List view";
             readonly kanban: "Kanban view";
@@ -2377,6 +2379,11 @@ export declare const defaultTranslations: {
                 readonly hideAllColumns: "Hide all";
             };
         };
+        readonly editableTable: {
+            readonly errors: {
+                readonly saveFailed: "Save failed";
+            };
+        };
         readonly itemsCount: "items";
         readonly emptyStates: {
             readonly noData: {
@@ -2809,6 +2816,50 @@ export declare type DropIntent = {
     type: "cancel";
 };
 
+/** The edit mode for a column cell in the editable table. Derived from value-display editors. */
+declare type EditableTableCellEditType = EditableValueDisplayType;
+
+declare type EditableTableCollectionProps<R extends RecordType, Filters extends FiltersDefinition, Sortings extends SortingsDefinition, Summaries extends SummariesDefinition, ItemActions extends ItemActionsDefinition<R>, NavigationFilters extends NavigationFiltersDefinition, Grouping extends GroupingDefinition<R>> = CollectionProps<R, Filters, Sortings, Summaries, ItemActions, NavigationFilters, Grouping, EditableTableVisualizationOptions<R, Filters, Sortings, Summaries>>;
+
+/**
+ * Column definition for Editable Table.
+ *
+ * When `editType` is set, the column's `id` is used as the record key to
+ * read the initial value from `item[id]` and to merge the updated value
+ * back into the item passed to `onCellChange`.
+ */
+declare type EditableTableColumnDefinition<R extends RecordType, Sortings extends SortingsDefinition, Summaries extends SummariesDefinition> = TableColumnDefinition<R, Sortings, Summaries> & {
+    /**
+     * Determines how the cell is rendered in edit mode.
+     * Receives the current item and returns the cell type (e.g. `"text"`) or
+     * `undefined` to render the cell read-only.
+     * The column `id` is used as the record key to read/write the value.
+     * When omitted, the cell is always rendered read-only.
+     */
+    editType?: (item: R) => EditableTableCellEditType | undefined;
+    /**
+     * Function that determines if the cell should be editable for a given item.
+     * The cell is only editable if both `editType` returns a value AND
+     * this function returns `true` for the given item.
+     * Return `true` for all items to make the column always editable.
+     */
+    editable: (item: R) => boolean;
+};
+
+declare type EditableTableVisualizationOptions<R extends RecordType, _Filters extends FiltersDefinition, Sortings extends SortingsDefinition, Summaries extends SummariesDefinition> = Omit<TableVisualizationOptions<R, _Filters, Sortings, Summaries>, "columns"> & {
+    columns: ReadonlyArray<EditableTableColumnDefinition<R, Sortings, Summaries>>;
+    /**
+     * Called when a cell value changes with the full updated row.
+     * Resolve with nothing for success, or `{ columnId: "message" }` to set errors.
+     * Rejection sets an error on the edited column.
+     */
+    onCellChange: (updatedItem: R) => Promise<void | Record<string, string>>;
+};
+
+declare type EditableTableVisualizationSettings = TableVisualizationSettings;
+
+declare type EditableValueDisplayType = keyof typeof valueDisplayEditors;
+
 export declare function Em({ children, ...props }: React.HTMLAttributes<HTMLSpanElement>): JSX_2.Element;
 
 export declare function EmojiImage({ emoji, size, alt }: EmojiImageProps): JSX_2.Element;
@@ -7463,6 +7514,10 @@ tag: TagVariant_2;
 export declare type TagAlertProps<Text extends string = string> = {
     text: Text extends "" ? never : Text;
     level: Level;
+    /**
+     * Info text to display an i icon and a tooltip next to the tag
+     */
+    info?: string;
 };
 
 export declare type TagBalanceProps = {
@@ -7515,6 +7570,10 @@ export declare const tagDotColors: ["viridian", "malibu", "yellow", "purple", "l
 
 export declare type TagDotProps = {
     text: string;
+    /**
+     * Info text to display an i icon and a tooltip next to the tag
+     */
+    info?: string;
 } & ({
     color: NewColor;
 } | {
@@ -7550,6 +7609,10 @@ export declare type TagRawProps = {
      * Additional accessible text to display in the tag
      */
     additionalAccessibleText?: string;
+    /**
+     * Info text to display an i icon and a tooltip next to the tag
+     */
+    info?: string;
 } & ({
     icon: IconType;
     onlyIcon: true;
@@ -8345,6 +8408,41 @@ export declare const useXRay: () => {
     disable: () => void;
 };
 
+/**
+ * Props contract that every editable value-display component must implement.
+ * The generic `V` allows type-specific editors (e.g. `string` for text, `Date` for date pickers).
+ */
+declare type ValueDisplayEditorProps<V = string> = {
+    label: string;
+    value: V;
+    align?: "left" | "right";
+    error?: string;
+    loading?: boolean;
+    onChange: (value: V) => void;
+};
+
+/**
+ * Registry that maps value-display types to their editable cell components.
+ * Not every type needs an editor — only types with editing support are registered here.
+ *
+ * To add a new editable type:
+ *  1. Add its value type to `ValueDisplayEditorValueMap` above
+ *  2. Create the editor component in `types/<type>/<type>-editor.tsx`
+ *  3. Export it from `types/<type>/index.tsx`
+ *  4. Register it here
+ */
+declare const valueDisplayEditors: {
+    [K in keyof ValueDisplayEditorValueMap]: ComponentType<ValueDisplayEditorProps<ValueDisplayEditorValueMap[K]>>;
+};
+
+/**
+ * Maps each editable value-display type to the value type its editor operates on.
+ * Extend this when adding a new editor (e.g. `date: Date`, `select: string`).
+ */
+declare type ValueDisplayEditorValueMap = {
+    text: string;
+};
+
 declare type ValueDisplayRendererContext_2 = {
     visualization: ValueDisplayVisualizationType;
     i18n: TranslationsType;
@@ -8545,9 +8643,8 @@ declare module "@tiptap/core" {
 
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
-        enhanceHighlight: {
-            setEnhanceHighlight: (from: number, to: number) => ReturnType;
-            clearEnhanceHighlight: () => ReturnType;
+        moodTracker: {
+            insertMoodTracker: (data: MoodTrackerData) => ReturnType;
         };
     }
 }
@@ -8555,8 +8652,9 @@ declare module "@tiptap/core" {
 
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
-        moodTracker: {
-            insertMoodTracker: (data: MoodTrackerData) => ReturnType;
+        enhanceHighlight: {
+            setEnhanceHighlight: (from: number, to: number) => ReturnType;
+            clearEnhanceHighlight: () => ReturnType;
         };
     }
 }

package/dist/f0.js

@@ -1,12 +1,12 @@
-import { ad as ye, ae as dt, a9 as le, aa as At, af as fo, ag as Ri, ah as Ai, ai as ls, aj as Ul, ak as ho, al as wt, u as Tt, am as Wr, an as Zl, ao as ql, ap as Kl, aq as Xl, ar as at, as as Yl, at as Jl, au as Nr, av as Yn, aw as Ql, ax as ec, ay as tc, az as cs, aA as rc, aB as nc, aC as mo, aD as ic, aE as po, aF as go, aG as Ln, aH as vo, aI as yo, aJ as ln, aK as bo, aL as sc, aM as oc, aN as ac, aO as lc, aP as cc, ab as qe, aQ as ds, aR as dc, aS as uc, aT as fc, aU as hc, aV as xo, aW as mc, aX as pc, aY as gc, aZ as wo, a_ as vc, a$ as ar, b0 as yc, b1 as bc, b2 as xc, b3 as wc, b4 as Ti, b5 as _c, b6 as _o, b7 as Cc, ac as Ec, b8 as Sc, b9 as kc, ba as Dc, bb as Nc, bc as Rc, bd as Ac, be as Tc, bf as Oc, bg as Co, bh as Mc, bi as Lc, bj as Fc, bk as Ic, bl as Pc, bm as zc, bn as Bc, bo as Vc, bp as Hc, bq as jc, br as $c, bs as Wc, I as Gc, bt as Uc, bu as Zc, bv as qc, bw as Kc } from "./F0AiChat-DqK8eXm5.js";
-import { A as Vv, bV as Hv, B as jv, C as $v, q as Wv, c8 as Gv, E as Uv, h as Zv, F as qv, a as Kv, D as Xv, i as Yv, b as Jv, bx as Qv, by as ey, bz as ty, bA as ry, bC as ny, bD as iy, bE as sy, bF as oy, bI as ay, j as ly, bJ as cy, bK as dy, bL as uy, c4 as fy, w as hy, x as my, y as py, bO as gy, bP as vy, bQ as yy, bR as by, bT as xy, bU as wy, z as _y, c as Cy, bW as Ey, r as Sy, s as ky, t as Dy, H as Ny, m as Ry, L as Ay, O as Ty, bN as Oy, v as My, P as Ly, S as Fy, T as Iy, n as Py, bS as zy, o as By, p as Vy, U as Hy, c5 as jy, bG as $y, bH as Wy, b$ as Gy, k as Uy, l as Zy, c2 as qy, b_ as Ky, c9 as Xy, bZ as Yy, bY as Jy, bB as Qy, d as eb, bX as tb, c0 as rb, e as nb, ca as ib, bM as sb, c1 as ob, g as ab, f as lb, c7 as cb, c3 as db, c6 as ub } from "./F0AiChat-DqK8eXm5.js";
+import { ad as ye, ae as dt, a9 as le, aa as At, af as fo, ag as Ri, ah as Ai, ai as ls, aj as Ul, ak as ho, al as wt, u as Tt, am as Wr, an as Zl, ao as ql, ap as Kl, aq as Xl, ar as at, as as Yl, at as Jl, au as Nr, av as Yn, aw as Ql, ax as ec, ay as tc, az as cs, aA as rc, aB as nc, aC as mo, aD as ic, aE as po, aF as go, aG as Ln, aH as vo, aI as yo, aJ as ln, aK as bo, aL as sc, aM as oc, aN as ac, aO as lc, aP as cc, ab as qe, aQ as ds, aR as dc, aS as uc, aT as fc, aU as hc, aV as xo, aW as mc, aX as pc, aY as gc, aZ as wo, a_ as vc, a$ as ar, b0 as yc, b1 as bc, b2 as xc, b3 as wc, b4 as Ti, b5 as _c, b6 as _o, b7 as Cc, ac as Ec, b8 as Sc, b9 as kc, ba as Dc, bb as Nc, bc as Rc, bd as Ac, be as Tc, bf as Oc, bg as Co, bh as Mc, bi as Lc, bj as Fc, bk as Ic, bl as Pc, bm as zc, bn as Bc, bo as Vc, bp as Hc, bq as jc, br as $c, bs as Wc, I as Gc, bt as Uc, bu as Zc, bv as qc, bw as Kc } from "./F0AiChat-BXyvQ3uC.js";
+import { A as Vv, bV as Hv, B as jv, C as $v, q as Wv, c8 as Gv, E as Uv, h as Zv, F as qv, a as Kv, D as Xv, i as Yv, b as Jv, bx as Qv, by as ey, bz as ty, bA as ry, bC as ny, bD as iy, bE as sy, bF as oy, bI as ay, j as ly, bJ as cy, bK as dy, bL as uy, c4 as fy, w as hy, x as my, y as py, bO as gy, bP as vy, bQ as yy, bR as by, bT as xy, bU as wy, z as _y, c as Cy, bW as Ey, r as Sy, s as ky, t as Dy, H as Ny, m as Ry, L as Ay, O as Ty, bN as Oy, v as My, P as Ly, S as Fy, T as Iy, n as Py, bS as zy, o as By, p as Vy, U as Hy, c5 as jy, bG as $y, bH as Wy, b$ as Gy, k as Uy, l as Zy, c2 as qy, b_ as Ky, c9 as Xy, bZ as Yy, bY as Jy, bB as Qy, d as eb, bX as tb, c0 as rb, e as nb, ca as ib, bM as sb, c1 as ob, g as ab, f as lb, c7 as cb, c3 as db, c6 as ub } from "./F0AiChat-BXyvQ3uC.js";
 import { jsx as f, jsxs as W, Fragment as Yt } from "react/jsx-runtime";
 import * as lt from "react";
 import q, { forwardRef as Ke, useRef as Y, useImperativeHandle as Xc, Children as cn, createContext as vt, useContext as ct, useState as re, useMemo as H, useEffect as ie, useCallback as K, useLayoutEffect as ui, createElement as Qr, isValidElement as Eo, Fragment as Yc, memo as Jc, useReducer as Qc, cloneElement as ed, PureComponent as td, useId as rd } from "react";
 import { createPortal as So, unstable_batchedUpdates as en, flushSync as nd } from "react-dom";
-import { L as ko, C as id, i as Do, S as us, a as sd, f as Jn, b as _r, c as od, A as ad, d as tn, e as No, E as ld, g as sn, h as cd, j as dd, k as ud, l as ir, m as Ro, u as fd, G as hd, n as md, o as fs, p as pd, q as Ao, r as gd, B as To, X as Oo, Y as fi, s as vd, t as Mo, v as yd, w as bd, x as xd, y as wd, z as _d, D as Cd, F as Ed, H as Sd, I as hs, J as kd, K as Dd, M as Nd, N as Rd, O as Ad, P as Td, Q as Od, R as Md, V as Ld, T as Fd, U as hi, W as Lo, Z as Id, _ as Pd, $ as zd, a0 as Bd, a1 as Fo, a2 as Oi, a3 as Io, a4 as Po, a5 as Vd, a6 as Hd, a7 as jd, a8 as $d } from "./DataCollectionStorageProvider-CKidJaxj.js";
-import { ae as hb, a9 as mb, ac as pb, ad as gb, aa as vb, ab as yb, af as bb, ag as xb, ah as wb, ai as _b } from "./DataCollectionStorageProvider-CKidJaxj.js";
-import { A as Eb, F as Sb, c as kb, b as Db, a as Nb, o as Rb, u as Ab } from "./F0HILActionConfirmation-Bh7NgkJw.js";
+import { L as ko, C as id, i as Do, S as us, a as sd, f as Jn, b as _r, c as od, A as ad, d as tn, e as No, E as ld, g as sn, h as cd, j as dd, k as ud, l as ir, m as Ro, u as fd, G as hd, n as md, o as fs, p as pd, q as Ao, r as gd, B as To, X as Oo, Y as fi, s as vd, t as Mo, v as yd, w as bd, x as xd, y as wd, z as _d, D as Cd, F as Ed, H as Sd, I as hs, J as kd, K as Dd, M as Nd, N as Rd, O as Ad, P as Td, Q as Od, R as Md, V as Ld, T as Fd, U as hi, W as Lo, Z as Id, _ as Pd, $ as zd, a0 as Bd, a1 as Fo, a2 as Oi, a3 as Io, a4 as Po, a5 as Vd, a6 as Hd, a7 as jd, a8 as $d } from "./DataCollectionStorageProvider-Dhth1f1i.js";
+import { ae as hb, a9 as mb, ac as pb, ad as gb, aa as vb, ab as yb, af as bb, ag as xb, ah as wb, ai as _b } from "./DataCollectionStorageProvider-Dhth1f1i.js";
+import { A as Eb, F as Sb, c as kb, b as Db, a as Nb, o as Rb, u as Ab } from "./F0HILActionConfirmation-BirXmMOJ.js";
 import { defaultTranslations as Ob } from "./i18n-provider-defaults.js";
 import './f0.css';const Wd = {
   xs: 1,
@@ -16536,7 +16536,7 @@ const bg = () => {
           goPrevious: g.goPrevious,
           steps: r,
           allowStepSkipping: h,
-          children: /* @__PURE__ */ W("div", { className: "flex min-h-[58vh] flex-1 flex-row", children: [
+          children: /* @__PURE__ */ W("div", { className: "flex h-[58vh] flex-1 flex-row", children: [
             /* @__PURE__ */ f("div", { className: "w-1/3 shrink-0 overflow-y-auto border-x-0 border-b-0 border-r border-t-0 border-dashed border-f1-border-secondary p-2", children: /* @__PURE__ */ f(vg, {}) }),
             /* @__PURE__ */ f("div", { className: "flex-1 overflow-y-auto px-8", children: e({
               currentStep: g.currentStep,
@@ -16739,7 +16739,7 @@ function _g({
         data: ee,
         fullData: { ...R.current }
       });
-      return Pe.current = $, $.success && we($.message), $;
+      return Pe.current = $, $.success && $.message && we($.message), $;
     },
     [_, we]
   ), me = K(() => {
@@ -16791,7 +16791,7 @@ function _g({
           w
         );
         return /* @__PURE__ */ W(Yt, { children: [
-          /* @__PURE__ */ f("div", { className: "flex flex-col gap-6", children: ee.map(($) => {
+          /* @__PURE__ */ f("div", { className: "flex flex-col gap-6 pb-5", children: ee.map(($) => {
             const De = y[$];
             if (!De) return null;
             const Te = g?.[$], He = R.current[$], Ne = A?.[$];

package/dist/i18n-provider-defaults.d.ts

@@ -229,6 +229,7 @@ export declare const defaultTranslations: {
         };
         readonly visualizations: {
             readonly table: "Table view";
+            readonly editableTable: "Editable table view";
             readonly card: "Card view";
             readonly list: "List view";
             readonly kanban: "Kanban view";
@@ -244,6 +245,11 @@ export declare const defaultTranslations: {
                 readonly hideAllColumns: "Hide all";
             };
         };
+        readonly editableTable: {
+            readonly errors: {
+                readonly saveFailed: "Save failed";
+            };
+        };
         readonly itemsCount: "items";
         readonly emptyStates: {
             readonly noData: {
@@ -646,9 +652,8 @@ declare module "@tiptap/core" {
 
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
-        enhanceHighlight: {
-            setEnhanceHighlight: (from: number, to: number) => ReturnType;
-            clearEnhanceHighlight: () => ReturnType;
+        moodTracker: {
+            insertMoodTracker: (data: MoodTrackerData) => ReturnType;
         };
     }
 }
@@ -656,8 +661,9 @@ declare module "@tiptap/core" {
 
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
-        moodTracker: {
-            insertMoodTracker: (data: MoodTrackerData) => ReturnType;
+        enhanceHighlight: {
+            setEnhanceHighlight: (from: number, to: number) => ReturnType;
+            clearEnhanceHighlight: () => ReturnType;
         };
     }
 }

package/dist/i18n-provider-defaults.js

@@ -229,6 +229,7 @@ const e = {
     },
     visualizations: {
       table: "Table view",
+      editableTable: "Editable table view",
       card: "Card view",
       list: "List view",
       kanban: "Kanban view",
@@ -244,6 +245,11 @@ const e = {
         hideAllColumns: "Hide all"
       }
     },
+    editableTable: {
+      errors: {
+        saveFailed: "Save failed"
+      }
+    },
     itemsCount: "items",
     emptyStates: {
       noData: {