@factorialco/f0-react 4.35.3 → 4.36.0

package/dist/experimental.d.ts

@@ -5305,8 +5305,28 @@ export declare type F0FileItemSize = (typeof f0FileItemSizes)[number];
 
 export declare const f0FileItemSizes: readonly ["md", "lg"];
 
-/** Tag types that can be rendered in a node's metadata row. */
-declare type F0GraphNodeTagType = TagVariant["type"];
+/**
+ * A tag rendered in a node's metadata row. Its visual is driven by the
+ * `TagVariant` `type`; its column identity — which toggle/label/default-
+ * visibility bucket it falls into — is `column ?? type`.
+ */
+declare type F0GraphNodeTag = TagVariant & {
+    /**
+     * Optional column identity, decoupling this tag's show/hide toggle, hover-
+     * card label and default visibility from its visual `type`. Defaults to
+     * `type` when omitted. Use it to give two tags of the same `type` (e.g. a
+     * second `raw` pill) their own independent column.
+     */
+    column?: F0GraphNodeTagColumn;
+};
+
+/**
+ * Identifies the show/hide column a tag belongs to. A column defaults to the
+ * tag's visual `type` (`"raw"`, `"status"`, …) but can be any custom string, so
+ * two tags sharing a `type` — e.g. two `raw` pills — can occupy independent
+ * columns with their own toggle, label and default visibility.
+ */
+declare type F0GraphNodeTagColumn = string;
 
 declare interface F0IconProps extends SVGProps<SVGSVGElement>, VariantProps<typeof iconVariants> {
     icon: IconType;
@@ -6196,19 +6216,24 @@ declare type GraphVisualizationOptions<R extends RecordType, Filters extends Fil
     subtitle?: (record: R) => string;
     /** Avatar shown on the leading side of the node pill. */
     avatar?: (record: R) => AvatarVariant;
-    /** Tags rendered in the node metadata row. */
-    tags?: (record: R) => TagVariant[];
-    /**
-     * Tag types present on the nodes. When provided, the controls bar gains a
-     * toggle to show/hide each metadata type (like configuring table columns).
-     */
-    nodeTagTypes?: ReadonlyArray<F0GraphNodeTagType>;
-    /** Friendly labels per tag type, shown in the metadata visibility toggle. */
-    nodeTagTypeLabels?: Partial<Record<F0GraphNodeTagType, string>>;
-    /** Tag types visible by default. Defaults to all of `nodeTagTypes`. */
-    defaultVisibleTagTypes?: ReadonlyArray<F0GraphNodeTagType>;
-    /** Tag types that are always visible and cannot be hidden in the settings. */
-    pinnedTagTypes?: ReadonlyArray<F0GraphNodeTagType>;
+    /**
+     * Tags rendered in the node metadata row. A tag may set `column` to place it
+     * in its own show/hide column independent of its visual `type` (e.g. a second
+     * `raw` pill that must not merge into the first `raw` column).
+     */
+    tags?: (record: R) => F0GraphNodeTag[];
+    /**
+     * Tag columns present on the nodes. When provided, the controls bar gains a
+     * toggle to show/hide each metadata column (like configuring table columns).
+     * Values are tag `column` keys (or `type` when a tag has no `column`).
+     */
+    nodeTagTypes?: ReadonlyArray<F0GraphNodeTagColumn>;
+    /** Friendly labels per tag column, shown in the metadata visibility toggle. */
+    nodeTagTypeLabels?: Partial<Record<F0GraphNodeTagColumn, string>>;
+    /** Tag columns visible by default. Defaults to all of `nodeTagTypes`. */
+    defaultVisibleTagTypes?: ReadonlyArray<F0GraphNodeTagColumn>;
+    /** Tag columns that are always visible and cannot be hidden in the settings. */
+    pinnedTagTypes?: ReadonlyArray<F0GraphNodeTagColumn>;
     /**
      * Floating toolbar shown above a node while it is selected. Provide the
      * action buttons (e.g. `<F0Button size="sm" … />`) for the given record.

package/dist/experimental.js

@@ -2,8 +2,8 @@ import { h as Va, B as Ga, i as Ka, j as qa, k as wn, l as lt, m as tt, n as Ya,
 import { cD as vm, cC as ym, cP as wm, cz as Nm, cA as Cm, cs as km, ct as Im, ct as Sm, cu as Fm, cS as Tm, cB as Am, cL as Em, cM as Rm, cQ as Dm, cv as Pm, cF as Lm, cE as Om, cw as _m, cx as zm, cN as $m, cT as Bm, cO as Mm, cR as jm, cK as Wm, cH as Hm, cJ as Um, cG as Vm, cy as Gm, cI as Km } from "./F0CanvasPanel-CURWZ54N.js";
 import { jsx as t, jsxs as d, Fragment as fe } from "react/jsx-runtime";
 import Te, { forwardRef as de, useRef as z, useTransition as Qi, useState as R, useLayoutEffect as Je, useId as Qt, useContext as Le, createContext as Ie, useEffect as K, useCallback as U, useMemo as J, Fragment as qe, isValidElement as Ji, cloneElement as jr, memo as Wr, Children as Hr } from "react";
-import { C as Xi, P as Zi, a as it, M as eo, p as to, b as no, R as Fn, c as Ur, u as ro, d as ao, e as so, f as io, g as oo, O as Vr, h as Gr, S as lo, A as co, B as uo, L as fo, i as mo, V as ho, j as po, k as go, l as bo } from "./useDataCollectionSource-4Q-2NK9k.js";
-import { r as Ym, s as Qm, o as Jm, H as Xm, t as Zm, z as eh, a8 as th, G as nh, q as rh, aa as ah, a9 as sh, Q as ih, ad as oh, F as lh, Y as ch, U as dh, J as uh, af as fh, K as mh, Z as hh, _ as ph, v as gh, ab as bh, ac as xh, N as vh, $ as yh, a5 as wh, a7 as Nh, w as Ch, y as kh, D as Ih, W as Sh, ae as Fh, X as Th, T as Ah, ag as Eh, x as Rh, E as Dh, m as Ph, n as Lh, a1 as Oh, a2 as _h, a6 as zh, I as $h, a3 as Bh, a0 as Mh, a4 as jh } from "./useDataCollectionSource-4Q-2NK9k.js";
+import { C as Xi, P as Zi, a as it, M as eo, p as to, b as no, R as Fn, c as Ur, u as ro, d as ao, e as so, f as io, g as oo, O as Vr, h as Gr, S as lo, A as co, B as uo, L as fo, i as mo, V as ho, j as po, k as go, l as bo } from "./useDataCollectionSource-D2ekGQSI.js";
+import { r as Ym, s as Qm, o as Jm, H as Xm, t as Zm, z as eh, a8 as th, G as nh, q as rh, aa as ah, a9 as sh, Q as ih, ad as oh, F as lh, Y as ch, U as dh, J as uh, af as fh, K as mh, Z as hh, _ as ph, v as gh, ab as bh, ac as xh, N as vh, $ as yh, a5 as wh, a7 as Nh, w as Ch, y as kh, D as Ih, W as Sh, ae as Fh, X as Th, T as Ah, ag as Eh, x as Rh, E as Dh, m as Ph, n as Lh, a1 as Oh, a2 as _h, a6 as zh, I as $h, a3 as Bh, a0 as Mh, a4 as jh } from "./useDataCollectionSource-D2ekGQSI.js";
 const xo = Va("Search", [
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }],
   ["path", { d: "m21 21-4.3-4.3", key: "1qie3q" }]

package/dist/f0.d.ts

@@ -9831,8 +9831,28 @@ export declare interface F0FormValidationResult {
     rootError?: string;
 }
 
-/** Tag types that can be rendered in a node's metadata row. */
-declare type F0GraphNodeTagType = TagVariant["type"];
+/**
+ * A tag rendered in a node's metadata row. Its visual is driven by the
+ * `TagVariant` `type`; its column identity — which toggle/label/default-
+ * visibility bucket it falls into — is `column ?? type`.
+ */
+declare type F0GraphNodeTag = TagVariant & {
+    /**
+     * Optional column identity, decoupling this tag's show/hide toggle, hover-
+     * card label and default visibility from its visual `type`. Defaults to
+     * `type` when omitted. Use it to give two tags of the same `type` (e.g. a
+     * second `raw` pill) their own independent column.
+     */
+    column?: F0GraphNodeTagColumn;
+};
+
+/**
+ * Identifies the show/hide column a tag belongs to. A column defaults to the
+ * tag's visual `type` (`"raw"`, `"status"`, …) but can be any custom string, so
+ * two tags sharing a `type` — e.g. two `raw` pills — can occupy independent
+ * columns with their own toggle, label and default visibility.
+ */
+declare type F0GraphNodeTagColumn = string;
 
 export declare const F0GridStack: WithDataTestIdReturnType_7<    {
 ({ options, widgets, onChange, className, static: isStatic, forcePositionSync, }: F0GridStackProps_2): JSX_2.Element;
@@ -12052,19 +12072,24 @@ declare type GraphVisualizationOptions<R extends RecordType, Filters extends Fil
     subtitle?: (record: R) => string;
     /** Avatar shown on the leading side of the node pill. */
     avatar?: (record: R) => AvatarVariant;
-    /** Tags rendered in the node metadata row. */
-    tags?: (record: R) => TagVariant[];
-    /**
-     * Tag types present on the nodes. When provided, the controls bar gains a
-     * toggle to show/hide each metadata type (like configuring table columns).
-     */
-    nodeTagTypes?: ReadonlyArray<F0GraphNodeTagType>;
-    /** Friendly labels per tag type, shown in the metadata visibility toggle. */
-    nodeTagTypeLabels?: Partial<Record<F0GraphNodeTagType, string>>;
-    /** Tag types visible by default. Defaults to all of `nodeTagTypes`. */
-    defaultVisibleTagTypes?: ReadonlyArray<F0GraphNodeTagType>;
-    /** Tag types that are always visible and cannot be hidden in the settings. */
-    pinnedTagTypes?: ReadonlyArray<F0GraphNodeTagType>;
+    /**
+     * Tags rendered in the node metadata row. A tag may set `column` to place it
+     * in its own show/hide column independent of its visual `type` (e.g. a second
+     * `raw` pill that must not merge into the first `raw` column).
+     */
+    tags?: (record: R) => F0GraphNodeTag[];
+    /**
+     * Tag columns present on the nodes. When provided, the controls bar gains a
+     * toggle to show/hide each metadata column (like configuring table columns).
+     * Values are tag `column` keys (or `type` when a tag has no `column`).
+     */
+    nodeTagTypes?: ReadonlyArray<F0GraphNodeTagColumn>;
+    /** Friendly labels per tag column, shown in the metadata visibility toggle. */
+    nodeTagTypeLabels?: Partial<Record<F0GraphNodeTagColumn, string>>;
+    /** Tag columns visible by default. Defaults to all of `nodeTagTypes`. */
+    defaultVisibleTagTypes?: ReadonlyArray<F0GraphNodeTagColumn>;
+    /** Tag columns that are always visible and cannot be hidden in the settings. */
+    pinnedTagTypes?: ReadonlyArray<F0GraphNodeTagColumn>;
     /**
      * Floating toolbar shown above a node while it is selected. Provide the
      * action buttons (e.g. `<F0Button size="sm" … />`) for the given record.

package/dist/f0.js

@@ -6,8 +6,8 @@ import React__default, { forwardRef, useRef, useImperativeHandle, Children, crea
 import { D as AIButton, E as ForwardRef$1, G as animate, H as ForwardRef$f, I as ForwardRef$j, J as ForwardRef$k, K as ForwardRef$o, L as ForwardRef$t, M as ForwardRef$x, N as ForwardRef$z, O as F0Box, P as ForwardRef$J, Q as ForwardRef$K, R as ForwardRef$L, S as ForwardRef$M, U as ForwardRef$N, F as FormCardValueFormatterProvider } from "./F0AiProcessingOverlay-Dzcglwjs.js";
 import { A as ta, C as ea, t as ia, s as aa, v as na, y as la, l as ra, i as sa, q as oa, z as ca, B as da, p as ua, r as ha, j as ma, e as pa, g as ba, k as Za, T as ya, w as Ma, h as Na, a as ga, n as Wa, m as Ta, o as Ga, b as fa, f as va, x as La, c as Ya, d as Xa, u as Sa } from "./F0AiProcessingOverlay-Dzcglwjs.js";
 import { createPortal, unstable_batchedUpdates } from "react-dom";
-import { C as Carousel, F as F0SegmentedControl, ah as isFieldRequired, ai as evaluateRenderIf, aj as buildDynamicSchema, ak as renderFieldInput, al as useF0Form, am as F0Form, G as F0ActionBar, an as F0FormSection, ao as nanoid, ap as dequal, Y as F0TableOfContent, a8 as Dialog$1, aq as FormMessage, Q as F0NumberInput, ar as EmojiPicker, as as data, c as ReorderItem, R as ReorderGroup, u as useDragControls, W as ResourceHeader, O as OneEmptyState, at as UpsellRequestResponseDialog, au as Label$1, av as UpsellingButton, o as BaseBanner, d as useDataCollectionSource, $ as OneDataCollection, aw as extractDisplayValue, ax as navigationFilterTypes, ay as NavigationFilters, az as DialogDescription, aA as PrivacyModeProvider, M as MotionConfig } from "./useDataCollectionSource-4Q-2NK9k.js";
-import { r as Va, s as Ia, H as Ra, t as wa, z as za, aR as Da, aQ as Ca, aM as ka, aC as Oa, aB as Fa, aD as ja, aE as Ea, aa as Ua, a9 as Ja, ad as Pa, U as Ka, J as Ha, af as Aa, K as Qa, v as Ba, aS as $a, ab as qa, ac as tn, N as en, w as an, P as nn, y as ln, D as rn, ae as sn, T as on, ag as dn, x as un, E as hn, aU as mn, m as pn, n as bn, aL as Zn, aH as yn, aG as Mn, aT as Nn, a6 as gn, aJ as Wn, aK as Tn, I as Gn, aV as fn, aW as vn, e as Ln, aN as Yn, aO as Xn, aP as Sn, aI as xn, f as Vn, h as In, aF as Rn, aX as wn } from "./useDataCollectionSource-4Q-2NK9k.js";
+import { C as Carousel, F as F0SegmentedControl, ah as isFieldRequired, ai as evaluateRenderIf, aj as buildDynamicSchema, ak as renderFieldInput, al as useF0Form, am as F0Form, G as F0ActionBar, an as F0FormSection, ao as nanoid, ap as dequal, Y as F0TableOfContent, a8 as Dialog$1, aq as FormMessage, Q as F0NumberInput, ar as EmojiPicker, as as data, c as ReorderItem, R as ReorderGroup, u as useDragControls, W as ResourceHeader, O as OneEmptyState, at as UpsellRequestResponseDialog, au as Label$1, av as UpsellingButton, o as BaseBanner, d as useDataCollectionSource, $ as OneDataCollection, aw as extractDisplayValue, ax as navigationFilterTypes, ay as NavigationFilters, az as DialogDescription, aA as PrivacyModeProvider, M as MotionConfig } from "./useDataCollectionSource-D2ekGQSI.js";
+import { r as Va, s as Ia, H as Ra, t as wa, z as za, aR as Da, aQ as Ca, aM as ka, aC as Oa, aB as Fa, aD as ja, aE as Ea, aa as Ua, a9 as Ja, ad as Pa, U as Ka, J as Ha, af as Aa, K as Qa, v as Ba, aS as $a, ab as qa, ac as tn, N as en, w as an, P as nn, y as ln, D as rn, ae as sn, T as on, ag as dn, x as un, E as hn, aU as mn, m as pn, n as bn, aL as Zn, aH as yn, aG as Mn, aT as Nn, a6 as gn, aJ as Wn, aK as Tn, I as Gn, aV as fn, aW as vn, e as Ln, aN as Yn, aO as Xn, aP as Sn, aI as xn, f as Vn, h as In, aF as Rn, aX as wn } from "./useDataCollectionSource-D2ekGQSI.js";
 import { utils, write as writeSync } from "./xlsx-Bedf3nwD.js";
 import { defaultTranslations as Dn } from "./i18n-provider-defaults.js";
 import './f0.css';const CAROUSEL_COLUMNS = {