hs-uix 2.1.1 → 2.2.0

package/dist/feed.mjs

@@ -545,7 +545,7 @@ var GENERATED_ICONS = {
   "ZoomOut": { "viewBox": "0 0 32 32", "paths": ["M14.42 26.75c2.85 0 5.47-.97 7.56-2.6l-.03.02 5.28 5.34a1.619 1.619 0 0 0 2.76-1.15c0-.45-.18-.85-.47-1.14l-5.33-5.33c1.59-2.06 2.55-4.68 2.55-7.52C26.74 7.54 21.2 2 14.37 2S2 7.55 2 14.38s5.54 12.37 12.37 12.37h.05m0-21.55c5.06 0 9.16 4.1 9.16 9.16s-4.1 9.16-9.16 9.16-9.16-4.1-9.16-9.16c.01-5.05 4.11-9.14 9.16-9.15Zm-4.31 10.78h8.62c.89 0 1.62-.72 1.62-1.62s-.72-1.62-1.62-1.62h-8.62c-.89 0-1.62.72-1.62 1.62s.72 1.62 1.62 1.62"] }
 };
 
-// src/common-components/Icon.js
+// src/common-components/nativeIconNames.js
 var NATIVE_ICON_NAMES = /* @__PURE__ */ new Set([
   "add",
   "appointment",
@@ -557,12 +557,12 @@ var NATIVE_ICON_NAMES = /* @__PURE__ */ new Set([
   "block",
   "book",
   "bulb",
+  "callTranscript",
   "calling",
   "callingHangup",
   "callingMade",
   "callingMissed",
   "callingVoicemail",
-  "callTranscript",
   "campaigns",
   "cap",
   "checkCircle",
@@ -591,13 +591,13 @@ var NATIVE_ICON_NAMES = /* @__PURE__ */ new Set([
   "enroll",
   "exclamation",
   "exclamationCircle",
-  "facebook",
   "faceHappy",
   "faceHappyFilled",
   "faceNeutral",
   "faceNeutralFilled",
   "faceSad",
   "faceSadFilled",
+  "facebook",
   "favoriteHollow",
   "file",
   "filledXCircleIcon",
@@ -738,6 +738,8 @@ var NATIVE_ICON_NAMES = /* @__PURE__ */ new Set([
   "zoomIn",
   "zoomOut"
 ]);
+
+// src/common-components/Icon.js
 var NATIVE_COLORS = /* @__PURE__ */ new Set(["inherit", "alert", "warning", "success"]);
 var NATIVE_SIZE_TOKENS = {
   sm: "sm",
@@ -950,6 +952,7 @@ var CollectionFilterControl = ({
       { key: name, direction: "row", align: "center", gap: "xs" },
       h4(DateInput, {
         name: `${controlName}-from`,
+        label: filter.fromLabel ?? labels.dateFrom,
         placeholder: filter.fromLabel ?? labels.dateFrom,
         format: "medium",
         value: rangeValue.from ?? null,
@@ -958,6 +961,7 @@ var CollectionFilterControl = ({
       h4(Icon, { name: "right", size: "sm" }),
       h4(DateInput, {
         name: `${controlName}-to`,
+        label: filter.toLabel ?? labels.dateTo,
         placeholder: filter.toLabel ?? labels.dateTo,
         format: "medium",
         value: rangeValue.to ?? null,
@@ -1158,6 +1162,110 @@ var buildActiveFilterChips = (filters, values = {}, options = {}) => {
   return chips;
 };
 
+// src/feed/feedLiveBuffer.js
+var isDateValueObject = (v) => v != null && typeof v === "object" && typeof v.year === "number" && typeof v.month === "number" && typeof v.date === "number";
+var toTimestampMs = (value) => {
+  if (value == null || value === "") return null;
+  if (value instanceof Date) {
+    const time2 = value.getTime();
+    return Number.isNaN(time2) ? null : time2;
+  }
+  if (typeof value === "number") return Number.isFinite(value) ? value : null;
+  if (isDateValueObject(value)) {
+    return new Date(value.year, value.month, value.date, value.hour || 0, value.minute || 0).getTime();
+  }
+  const parsed = new Date(value);
+  const time = parsed.getTime();
+  return Number.isNaN(time) ? null : time;
+};
+var defaultGetId = (item, index) => (item == null ? void 0 : item.id) ?? (item == null ? void 0 : item.key) ?? index;
+var partitionNewItems = (prevNewestTs, items, getTs, options = {}) => {
+  const { knownIds = null, getId = defaultGetId } = options;
+  const safeItems = Array.isArray(items) ? items : [];
+  const firstLoad = prevNewestTs == null;
+  const visible = [];
+  const visibleIds = [];
+  const buffered = [];
+  const bufferedIds = [];
+  let newestTs = typeof prevNewestTs === "number" ? prevNewestTs : null;
+  safeItems.forEach((item, index) => {
+    const id = getId(item, index);
+    const ts = toTimestampMs(typeof getTs === "function" ? getTs(item) : void 0);
+    const isKnown = knownIds != null && id !== void 0 && knownIds.has(id);
+    const isNewArrival = !firstLoad && !isKnown && ts != null && ts > prevNewestTs;
+    if (isNewArrival) {
+      buffered.push(item);
+      bufferedIds.push(id);
+      return;
+    }
+    visible.push(item);
+    visibleIds.push(id);
+    if (ts != null && (newestTs == null || ts > newestTs)) newestTs = ts;
+  });
+  return { visible, buffered, visibleIds, bufferedIds, newestTs };
+};
+var flushBuffer = (visible, buffered, getTs) => {
+  const safeVisible = Array.isArray(visible) ? visible : [];
+  const safeBuffered = Array.isArray(buffered) ? buffered : [];
+  const items = [...safeBuffered, ...safeVisible];
+  let newestTs = null;
+  items.forEach((item) => {
+    const ts = toTimestampMs(typeof getTs === "function" ? getTs(item) : void 0);
+    if (ts != null && (newestTs == null || ts > newestTs)) newestTs = ts;
+  });
+  return { items, flushed: safeBuffered, newestTs };
+};
+
+// src/feed/feedTypePresets.js
+var hasValue = (value) => value != null && value !== false && value !== "";
+var DEFAULT_FEED_TYPE_PRESETS = {
+  call: { icon: "calling", label: "Call" },
+  email: { icon: "email", label: "Email" },
+  incoming_email: { icon: "inbox", label: "Incoming email" },
+  forwarded_email: { icon: "forward", label: "Forwarded email" },
+  meeting: { icon: "appointment", label: "Meeting" },
+  note: { icon: "comment", label: "Note" },
+  task: { icon: "tasks", label: "Task" },
+  sms: { icon: "messages", label: "SMS" },
+  whatsapp: { icon: "messages", label: "WhatsApp" },
+  linkedin_message: { icon: "linkedin", label: "LinkedIn message" },
+  postal_mail: { icon: "send", label: "Postal mail" },
+  conversation: { icon: "questionAnswer", label: "Conversation" }
+};
+var lookupTypePreset = (type, presets) => {
+  if (!presets || typeof presets !== "object") return null;
+  if (type == null || type === "") return null;
+  if (Object.prototype.hasOwnProperty.call(presets, type)) return presets[type];
+  const lower = String(type).toLowerCase();
+  if (Object.prototype.hasOwnProperty.call(presets, lower)) return presets[lower];
+  const snake = lower.replace(/[\s-]+/g, "_");
+  if (Object.prototype.hasOwnProperty.call(presets, snake)) return presets[snake];
+  return null;
+};
+var applyTypePreset = (item, typePresets) => {
+  if (item == null || typeof item !== "object") return item;
+  const preset = lookupTypePreset(item.type, typePresets);
+  if (!preset || typeof preset !== "object") return item;
+  let next = null;
+  const fill = (key, value) => {
+    if (next === null) next = { ...item };
+    next[key] = value;
+  };
+  if (!hasValue(item.icon) && !hasValue(item.iconName) && hasValue(preset.icon)) {
+    fill("iconName", preset.icon);
+  }
+  if (!hasValue(item.iconColor) && hasValue(preset.color)) {
+    fill("iconColor", preset.color);
+  }
+  if (!hasValue(item.typeLabel) && hasValue(preset.label)) {
+    fill("typeLabel", preset.label);
+  }
+  if (item.statusVariant == null && item.outcomeVariant == null && item.severityVariant == null && hasValue(preset.statusVariant)) {
+    fill("statusVariant", preset.statusVariant);
+  }
+  return next ?? item;
+};
+
 // src/feed/Feed.jsx
 var DEFAULT_LABELS3 = {
   search: "Search activity...",
@@ -1171,6 +1279,8 @@ var DEFAULT_LABELS3 = {
   loadingMessage: "This should only take a moment.",
   loadingMore: "Loading...",
   loadMore: "View more",
+  newItems: (count) => count === 1 ? "Show 1 new item" : `Show ${count} new items`,
+  newItemTag: "New",
   collapseAll: "Collapse all",
   expandAll: "Expand all",
   emptyTitle: "No activity yet",
@@ -1183,7 +1293,15 @@ var DEFAULT_LABELS3 = {
 var DEFAULT_RECORD_LABEL = { singular: "item", plural: "items" };
 var DEFAULT_SEARCH_FIELDS = ["title", "subject", "body", "description", "content", "preview", "type", "typeLabel", "actorName", "author"];
 var DEFAULT_PAGE_SIZE = 5;
-var hasValue = (value) => value != null && value !== false && value !== "";
+var EMPTY_ITEMS = [];
+var INITIAL_LIVE_STATE = {
+  source: null,
+  watermark: null,
+  bufferedKeys: EMPTY_ITEMS,
+  knownKeys: EMPTY_ITEMS,
+  newKeys: EMPTY_ITEMS
+};
+var hasValue2 = (value) => value != null && value !== false && value !== "";
 var keepWordsTogether = (value) => typeof value === "string" ? value.replace(/\s+/g, "\xA0") : value;
 var getItemKey = (item, index, getKey) => {
   if (typeof getKey === "function") return getKey(item, index);
@@ -1210,11 +1328,11 @@ var pickHeaderActions = (item) => item == null ? void 0 : item.headerActions;
 var itemHasExpandableContent = (item, fields) => {
   if ((item == null ? void 0 : item.collapsible) === false) return false;
   if ((item == null ? void 0 : item.collapsible) === true) return true;
-  if (hasValue(pickBody(item))) return true;
-  if (hasValue(pickActor(item))) return true;
-  if (hasValue(item == null ? void 0 : item.actions)) return true;
-  if (hasValue(item == null ? void 0 : item.footer)) return true;
-  if (hasValue(item == null ? void 0 : item.meta) || hasValue(item == null ? void 0 : item.metadata)) return true;
+  if (hasValue2(pickBody(item))) return true;
+  if (hasValue2(pickActor(item))) return true;
+  if (hasValue2(item == null ? void 0 : item.actions)) return true;
+  if (hasValue2(item == null ? void 0 : item.footer)) return true;
+  if (hasValue2(item == null ? void 0 : item.meta) || hasValue2(item == null ? void 0 : item.metadata)) return true;
   if (Array.isArray(fields)) {
     if (fields.some((f) => ["body", "footer"].includes(f.placement ?? "body"))) return true;
   }
@@ -1296,7 +1414,7 @@ var getRecordLabel = (recordLabel, count) => {
 var FeedActorAvatar = ({ item, avatarSize }) => {
   const actor = pickActor(item);
   const avatar = (item == null ? void 0 : item.avatar) ?? pickActorAvatar(actor);
-  if (!hasValue(avatar)) return null;
+  if (!hasValue2(avatar)) return null;
   return /* @__PURE__ */ React8.createElement(
     AvatarStack,
     {
@@ -1308,10 +1426,10 @@ var FeedActorAvatar = ({ item, avatarSize }) => {
   );
 };
 var FeedTypeIcon = ({ item, iconSize }) => {
-  if (hasValue(item == null ? void 0 : item.icon) && typeof item.icon !== "string") return item.icon;
+  if (hasValue2(item == null ? void 0 : item.icon) && typeof item.icon !== "string") return item.icon;
   const iconName = typeof (item == null ? void 0 : item.icon) === "string" ? item.icon : item == null ? void 0 : item.iconName;
-  if (!hasValue(iconName)) return null;
-  return /* @__PURE__ */ React8.createElement(Icon, { name: iconName, size: iconSize, purpose: "decorative" });
+  if (!hasValue2(iconName)) return null;
+  return /* @__PURE__ */ React8.createElement(Icon, { name: iconName, size: iconSize, color: item == null ? void 0 : item.iconColor, purpose: "decorative" });
 };
 var FeedActions = ({ actions }) => {
   if (!Array.isArray(actions) || actions.length === 0) return actions || null;
@@ -1334,7 +1452,7 @@ var FeedField = ({ field, item, index }) => {
   if (field.visible && !field.visible(item)) return null;
   const value = getValue(item, field.field);
   const rendered = field.render ? field.render(value, item, index) : value;
-  if (!hasValue(rendered)) return null;
+  if (!hasValue2(rendered)) return null;
   if (field.href) {
     const href = typeof field.href === "function" ? field.href(item) : field.href;
     return /* @__PURE__ */ React8.createElement(Link2, { href }, rendered);
@@ -1371,7 +1489,7 @@ var renderPlacedFields = ({ fields, placement, item, index, inline = false }) =>
   return /* @__PURE__ */ React8.createElement(Flex4, { direction: "column", gap: "xs" }, nodes);
 };
 var renderHeaderActions = (headerActions) => {
-  if (!hasValue(headerActions)) return null;
+  if (!hasValue2(headerActions)) return null;
   if (!Array.isArray(headerActions)) return headerActions;
   return /* @__PURE__ */ React8.createElement(Inline, { gap: "sm", align: "center" }, headerActions.filter(Boolean).map((action, index) => /* @__PURE__ */ React8.createElement(
     Link2,
@@ -1393,6 +1511,8 @@ var DefaultFeedItem = ({
   collapsible,
   expanded,
   onToggleExpanded,
+  isNew,
+  newItemTagLabel,
   renderActor,
   renderTimestamp,
   renderMeta,
@@ -1412,7 +1532,7 @@ var DefaultFeedItem = ({
   const body = pickBody(item);
   const avatar = /* @__PURE__ */ React8.createElement(FeedActorAvatar, { item, avatarSize });
   const typeIcon = /* @__PURE__ */ React8.createElement(FeedTypeIcon, { item, iconSize });
-  const hasAvatarNode = hasValue(item == null ? void 0 : item.avatar) || hasValue(pickActorAvatar(rawActor));
+  const hasAvatarNode = hasValue2(item == null ? void 0 : item.avatar) || hasValue2(pickActorAvatar(rawActor));
   const titleFields = fieldsForPlacement(fields, "title");
   const titleField = titleFields.length > 0 ? /* @__PURE__ */ React8.createElement(FeedField, { field: titleFields[0], item, index }) : null;
   const subtitleFields = renderPlacedFields({ fields, placement: "subtitle", item, index, inline: true });
@@ -1420,8 +1540,8 @@ var DefaultFeedItem = ({
   const bodyFields = renderPlacedFields({ fields, placement: "body", item, index });
   const footerFields = renderPlacedFields({ fields, placement: "footer", item, index, inline: true });
   const titleContent = titleField ?? (item == null ? void 0 : item.title) ?? (item == null ? void 0 : item.subject);
-  const title = hasValue(item == null ? void 0 : item.href) ? /* @__PURE__ */ React8.createElement(Link2, { href: item.href }, titleContent) : titleContent;
-  const titleText = hasValue(title) ? /* @__PURE__ */ React8.createElement(Text2, { format: { fontWeight: "demibold" }, truncate: true }, title) : null;
+  const title = hasValue2(item == null ? void 0 : item.href) ? /* @__PURE__ */ React8.createElement(Link2, { href: item.href }, titleContent) : titleContent;
+  const titleText = hasValue2(title) ? /* @__PURE__ */ React8.createElement(Text2, { format: { fontWeight: "demibold" }, truncate: true }, title) : null;
   const headerLeft = /* @__PURE__ */ React8.createElement(Flex4, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, collapsible ? /* @__PURE__ */ React8.createElement(Box2, { flex: "none", alignSelf: "center" }, /* @__PURE__ */ React8.createElement(Link2, { variant: "dark", onClick: onToggleExpanded }, /* @__PURE__ */ React8.createElement(
     Icon,
     {
@@ -1429,10 +1549,10 @@ var DefaultFeedItem = ({
       size: "md",
       screenReaderText: expanded ? "Collapse" : "Expand"
     }
-  ))) : null, typeIcon, titleText);
-  const headerRight = hasValue(headerActions) || hasValue(timestamp) || hasValue(type) ? /* @__PURE__ */ React8.createElement(Inline, { gap: "sm", align: "center" }, renderHeaderActions(headerActions), hasValue(type) && /* @__PURE__ */ React8.createElement(Text2, { variant: "microcopy" }, type), hasValue(timestamp) && /* @__PURE__ */ React8.createElement(Text2, { variant: "microcopy" }, formatTimestamp(timestamp))) : null;
+  ))) : null, typeIcon, titleText, isNew ? /* @__PURE__ */ React8.createElement(Box2, { flex: "none" }, /* @__PURE__ */ React8.createElement(Tag2, { variant: "info" }, newItemTagLabel ?? "New")) : null);
+  const headerRight = hasValue2(headerActions) || hasValue2(timestamp) || hasValue2(type) ? /* @__PURE__ */ React8.createElement(Inline, { gap: "sm", align: "center" }, renderHeaderActions(headerActions), hasValue2(type) && /* @__PURE__ */ React8.createElement(Text2, { variant: "microcopy" }, type), hasValue2(timestamp) && /* @__PURE__ */ React8.createElement(Text2, { variant: "microcopy" }, formatTimestamp(timestamp))) : null;
   const showBody = !collapsible || expanded;
-  return /* @__PURE__ */ React8.createElement(Flex4, { direction: "column", gap: compact ? "xs" : "sm" }, /* @__PURE__ */ React8.createElement(Flex4, { direction: "row", justify: "between", align: "center", gap: "sm", wrap: "nowrap" }, /* @__PURE__ */ React8.createElement(Box2, { flex: 1 }, headerLeft), headerRight), showBody ? /* @__PURE__ */ React8.createElement(Flex4, { direction: "column", gap: compact ? "xs" : "sm" }, (hasAvatarNode || hasValue(actor) || hasValue(subtitleFields) || hasValue(status)) && /* @__PURE__ */ React8.createElement(Flex4, { direction: "row", align: "center", gap: "xs", wrap: "wrap" }, hasAvatarNode ? avatar : null, hasValue(actor) && /* @__PURE__ */ React8.createElement(Text2, { variant: "microcopy" }, actor), subtitleFields, hasValue(status) && /* @__PURE__ */ React8.createElement(StatusTag, { variant: statusVariant, hollow: true }, status)), hasValue(body) && /* @__PURE__ */ React8.createElement(Text2, null, body), bodyFields, Array.isArray(meta) ? meta.length > 0 ? /* @__PURE__ */ React8.createElement(List, { variant: "inline-divided" }, meta) : metaFields : hasValue(meta) ? /* @__PURE__ */ React8.createElement(Inline, { gap: "xs" }, meta) : metaFields ? metaFields : null, hasValue(actions) && /* @__PURE__ */ React8.createElement(FeedActions, { actions }), (hasValue(footer) || hasValue(footerFields)) && /* @__PURE__ */ React8.createElement(Inline, { gap: "xs", align: "center" }, footerFields, footer)) : null);
+  return /* @__PURE__ */ React8.createElement(Flex4, { direction: "column", gap: compact ? "xs" : "sm" }, /* @__PURE__ */ React8.createElement(Flex4, { direction: "row", justify: "between", align: "center", gap: "sm", wrap: "nowrap" }, /* @__PURE__ */ React8.createElement(Box2, { flex: 1 }, headerLeft), headerRight), showBody ? /* @__PURE__ */ React8.createElement(Flex4, { direction: "column", gap: compact ? "xs" : "sm" }, (hasAvatarNode || hasValue2(actor) || hasValue2(subtitleFields) || hasValue2(status)) && /* @__PURE__ */ React8.createElement(Flex4, { direction: "row", align: "center", gap: "xs", wrap: "wrap" }, hasAvatarNode ? avatar : null, hasValue2(actor) && /* @__PURE__ */ React8.createElement(Text2, { variant: "microcopy" }, actor), subtitleFields, hasValue2(status) && /* @__PURE__ */ React8.createElement(StatusTag, { variant: statusVariant, hollow: true }, status)), hasValue2(body) && /* @__PURE__ */ React8.createElement(Text2, null, body), bodyFields, Array.isArray(meta) ? meta.length > 0 ? /* @__PURE__ */ React8.createElement(List, { variant: "inline-divided" }, meta) : metaFields : hasValue2(meta) ? /* @__PURE__ */ React8.createElement(Inline, { gap: "xs" }, meta) : metaFields ? metaFields : null, hasValue2(actions) && /* @__PURE__ */ React8.createElement(FeedActions, { actions }), (hasValue2(footer) || hasValue2(footerFields)) && /* @__PURE__ */ React8.createElement(Inline, { gap: "xs", align: "center" }, footerFields, footer)) : null);
 };
 var applyTab = (items, activeTab, tabField) => {
   if (!activeTab || activeTab === "all") return items;
@@ -1656,10 +1776,19 @@ var Feed = ({
   collapsedIds,
   onCollapsedIdsChange,
   showCollapseToggle = true,
-  alignToolbarWithGroups = "auto"
+  alignToolbarWithGroups = "auto",
+  newItemsBehavior = "immediate",
+  onNewItemsFlush,
+  highlightNew = false,
+  typePresets
 }) => {
-  const labels = { ...DEFAULT_LABELS3, ...labelOverrides || {} };
-  const safeItems = Array.isArray(items) ? items : [];
+  const labels = useMemo(() => ({ ...DEFAULT_LABELS3, ...labelOverrides || {} }), [labelOverrides]);
+  const safeItems = Array.isArray(items) ? items : EMPTY_ITEMS;
+  const resolvedTypePresets = typePresets === true ? DEFAULT_FEED_TYPE_PRESETS : typePresets;
+  const presetItems = useMemo(
+    () => resolvedTypePresets ? safeItems.map((item) => applyTypePreset(item, resolvedTypePresets)) : safeItems,
+    [safeItems, resolvedTypePresets]
+  );
   const [internalTab, setInternalTab] = useState2(tabValue ?? defaultTab ?? "all");
   const [internalSearch, setInternalSearch] = useState2(searchValue ?? "");
   const [internalFilters, setInternalFilters] = useState2(filterValues ?? defaultFilterValues);
@@ -1672,6 +1801,47 @@ var Feed = ({
     return [];
   };
   const [internalCollapsedIds, setInternalCollapsedIds] = useState2(computeInitialCollapsed);
+  const bufferNewItems = newItemsBehavior === "pill";
+  const highlightMs = typeof highlightNew === "number" && highlightNew > 0 ? highlightNew : 0;
+  const trackNewItems = bufferNewItems || highlightMs > 0;
+  const [liveState, setLiveState] = useState2(INITIAL_LIVE_STATE);
+  const liveKeyOf = (item, index) => getItemKey(item, index, getKey);
+  if (trackNewItems && liveState.source !== presetItems) {
+    const firstLoad = liveState.source === null;
+    const partition = partitionNewItems(liveState.watermark, presetItems, pickTimestamp, {
+      knownIds: new Set(liveState.knownKeys),
+      getId: liveKeyOf
+    });
+    const now = Date.now();
+    const keptNewKeys = highlightMs > 0 ? liveState.newKeys.filter((entry) => now - entry.at < highlightMs) : EMPTY_ITEMS;
+    if (bufferNewItems) {
+      setLiveState({
+        source: presetItems,
+        watermark: partition.newestTs,
+        bufferedKeys: partition.bufferedIds,
+        knownKeys: partition.visibleIds,
+        newKeys: keptNewKeys
+      });
+    } else {
+      const { newestTs } = flushBuffer(partition.visible, partition.buffered, pickTimestamp);
+      setLiveState({
+        source: presetItems,
+        watermark: newestTs ?? partition.newestTs,
+        bufferedKeys: EMPTY_ITEMS,
+        knownKeys: [...partition.visibleIds, ...partition.bufferedIds],
+        newKeys: highlightMs > 0 && !firstLoad ? [...keptNewKeys, ...partition.bufferedIds.map((key) => ({ key, at: now }))] : keptNewKeys
+      });
+    }
+  }
+  const bufferedKeySet = useMemo(() => new Set(liveState.bufferedKeys), [liveState.bufferedKeys]);
+  const newKeySet = useMemo(
+    () => new Set(liveState.newKeys.map((entry) => entry.key)),
+    [liveState.newKeys]
+  );
+  const sourceItems = useMemo(() => {
+    if (!bufferNewItems || bufferedKeySet.size === 0) return presetItems;
+    return presetItems.filter((item, index) => !bufferedKeySet.has(getItemKey(item, index, getKey)));
+  }, [presetItems, bufferNewItems, bufferedKeySet, getKey]);
   const activeTab = tabValue !== void 0 ? tabValue : internalTab;
   const activeSearch = searchValue !== void 0 ? searchValue : internalSearch;
   const activeFilters = filterValues !== void 0 ? filterValues : internalFilters;
@@ -1694,6 +1864,17 @@ var Feed = ({
   useEffect(() => {
     if (Array.isArray(collapsedIds)) setInternalCollapsedIds(collapsedIds);
   }, [collapsedIds]);
+  useEffect(() => {
+    if (!highlightMs || liveState.newKeys.length === 0) return void 0;
+    const earliestAt = Math.min(...liveState.newKeys.map((entry) => entry.at));
+    const timer = setTimeout(() => {
+      setLiveState((prev) => ({
+        ...prev,
+        newKeys: prev.newKeys.filter((entry) => Date.now() - entry.at < highlightMs)
+      }));
+    }, Math.max(16, earliestAt + highlightMs - Date.now()));
+    return () => clearTimeout(timer);
+  }, [highlightMs, liveState.newKeys]);
   const emitParamsChange = (next) => {
     if (typeof onParamsChange === "function") {
       onParamsChange({ tab: activeTab, search: activeSearch, filters: activeFilters, sort: activeSort, ...next });
@@ -1747,13 +1928,40 @@ var Feed = ({
     setCollapsedIds(collapsibleKeys);
   };
   const handleExpandAll = () => setCollapsedIds([]);
+  const handleFlushNewItems = () => {
+    const flushedItems = [];
+    const flushedKeys = [];
+    const keptItems = [];
+    presetItems.forEach((item, index) => {
+      const key = getItemKey(item, index, getKey);
+      if (bufferedKeySet.has(key)) {
+        flushedItems.push(item);
+        flushedKeys.push(key);
+      } else {
+        keptItems.push(item);
+      }
+    });
+    const { newestTs } = flushBuffer(keptItems, flushedItems, pickTimestamp);
+    const now = Date.now();
+    setLiveState((prev) => ({
+      source: presetItems,
+      watermark: newestTs ?? prev.watermark,
+      bufferedKeys: EMPTY_ITEMS,
+      knownKeys: presetItems.map((item, index) => getItemKey(item, index, getKey)),
+      newKeys: highlightMs > 0 ? [
+        ...prev.newKeys.filter((entry) => now - entry.at < highlightMs),
+        ...flushedKeys.map((key) => ({ key, at: now }))
+      ] : prev.newKeys
+    }));
+    onNewItemsFlush == null ? void 0 : onNewItemsFlush(flushedItems);
+  };
   const processedItems = useMemo(() => {
-    if (serverSide) return safeItems;
-    const tabbed = applyTab(safeItems, activeTab, tabField);
+    if (serverSide) return sourceItems;
+    const tabbed = applyTab(sourceItems, activeTab, tabField);
     const searched = applySearch(tabbed, activeSearch, searchFields);
     const filtered = applyFilters(searched, filters, activeFilters);
     return applySort(filtered, activeSort, sortOptions);
-  }, [safeItems, activeTab, tabField, activeSearch, searchFields, filters, activeFilters, activeSort, sortOptions, serverSide]);
+  }, [sourceItems, activeTab, tabField, activeSearch, searchFields, filters, activeFilters, activeSort, sortOptions, serverSide]);
   const visibleItems = useMemo(
     () => processedItems.slice(0, Math.max(0, resolvedMaxItems)),
     [processedItems, resolvedMaxItems]
@@ -1780,8 +1988,8 @@ var Feed = ({
   const canViewMore = visibleItems.length < processedItems.length;
   const shouldShowExternalLoadMore = hasMore && onLoadMore;
   const normalizedTabs = useMemo(
-    () => normalizeTabs(tabs, safeItems, tabField, labels),
-    [tabs, safeItems, tabField, labels]
+    () => normalizeTabs(tabs, presetItems, tabField, labels),
+    [tabs, presetItems, tabField, labels]
   );
   const resolvedShowTabs = showTabs ?? normalizedTabs.length > 1;
   const sortControl = Array.isArray(sortOptions) && sortOptions.length > 0 ? /* @__PURE__ */ React8.createElement(
@@ -1796,7 +2004,7 @@ var Feed = ({
   ) : null;
   const countControl = showItemCount ? /* @__PURE__ */ React8.createElement(CollectionCount, { text: itemCountLabel }) : null;
   const toolbarRight = sortControl || countControl ? /* @__PURE__ */ React8.createElement(Inline, { gap: "sm", align: "center" }, sortControl, countControl) : null;
-  const firstGroupHasLabel = groups.length > 0 && hasValue(groups[0].label);
+  const firstGroupHasLabel = groups.length > 0 && hasValue2(groups[0].label);
   const hasLeftToolbarControls = resolvedShowSearch || Array.isArray(filters) && filters.length > 0 || activeChips.length > 0;
   const alignControlsWithFirstGroup = !renderToolbar && showToolbar && !loading && !error && processedItems.length > 0 && !hasLeftToolbarControls && !!toolbarRight && firstGroupHasLabel && (alignToolbarWithGroups === true || alignToolbarWithGroups === "auto" && (groupByDate || !!groupBy));
   const toolbarNode = renderToolbar ? renderToolbar({
@@ -1846,15 +2054,21 @@ var Feed = ({
     return activeCollapsedIds.includes(getItemKey(item, i >= 0 ? i : idx, getKey));
   });
   const collapseToggle = showCollapseToggle && collapsibleVisibleItems.length > 1 && !loading && !error ? /* @__PURE__ */ React8.createElement(Link2, { onClick: allCollapsed ? handleExpandAll : handleCollapseAll }, keepWordsTogether(allCollapsed ? labels.expandAll : labels.collapseAll)) : null;
-  if (hasValue(title) || hasValue(description) || hasValue(actions) || hasValue(children) || collapseToggle) {
-    const headerBody = /* @__PURE__ */ React8.createElement(Flex4, { direction: "column", gap: "xs" }, hasValue(title) && /* @__PURE__ */ React8.createElement(Text2, { format: { fontWeight: "demibold" } }, title), hasValue(description) && /* @__PURE__ */ React8.createElement(Text2, null, description), children);
-    const headerRight = hasValue(actions) || collapseToggle ? /* @__PURE__ */ React8.createElement(Inline, { gap: "sm", align: "center" }, actions, collapseToggle) : null;
+  if (hasValue2(title) || hasValue2(description) || hasValue2(actions) || hasValue2(children) || collapseToggle) {
+    const headerBody = /* @__PURE__ */ React8.createElement(Flex4, { direction: "column", gap: "xs" }, hasValue2(title) && /* @__PURE__ */ React8.createElement(Text2, { format: { fontWeight: "demibold" } }, title), hasValue2(description) && /* @__PURE__ */ React8.createElement(Text2, null, description), children);
+    const headerRight = hasValue2(actions) || collapseToggle ? /* @__PURE__ */ React8.createElement(Inline, { gap: "sm", align: "center" }, actions, collapseToggle) : null;
     content.push(
       /* @__PURE__ */ React8.createElement(Flex4, { key: "header", direction: "row", justify: "between", align: "start", gap: "sm" }, headerBody, headerRight)
     );
   }
   const bodyContent = [];
   if (toolbarNode) bodyContent.push(/* @__PURE__ */ React8.createElement(React8.Fragment, { key: "toolbar" }, toolbarNode));
+  const pendingNewCount = bufferNewItems ? liveState.bufferedKeys.length : 0;
+  if (pendingNewCount > 0 && !loading && !error) {
+    bodyContent.push(
+      /* @__PURE__ */ React8.createElement(Flex4, { key: "new-items-pill", direction: "row", justify: "center" }, /* @__PURE__ */ React8.createElement(Button3, { variant: "secondary", size: "small", onClick: handleFlushNewItems }, typeof labels.newItems === "function" ? labels.newItems(pendingNewCount) : labels.newItems))
+    );
+  }
   if (loading) {
     bodyContent.push(
       renderLoadingState ? renderLoadingState({ label: labels.loading }) : (
@@ -1871,14 +2085,14 @@ var Feed = ({
         message: labels.errorMessage
       }) : /* @__PURE__ */ React8.createElement(Alert, { key: "error", variant: "danger", title: typeof error === "string" ? error : labels.errorTitle }, /* @__PURE__ */ React8.createElement(Text2, null, labels.errorMessage))
     );
-  } else if (processedItems.length === 0) {
+  } else if (processedItems.length === 0 && pendingNewCount === 0) {
     bodyContent.push(
       renderEmptyState ? renderEmptyState({ title: labels.emptyTitle, message: labels.emptyMessage }) : /* @__PURE__ */ React8.createElement(Tile, { key: "empty" }, /* @__PURE__ */ React8.createElement(Flex4, { direction: "column", align: "center", justify: "center" }, /* @__PURE__ */ React8.createElement(EmptyState, { title: labels.emptyTitle, layout: "vertical" }, /* @__PURE__ */ React8.createElement(Text2, null, labels.emptyMessage))))
     );
   } else {
     bodyContent.push(
-      /* @__PURE__ */ React8.createElement(Flex4, { key: "items", direction: "column", gap: compact ? "xs" : gap }, groups.map((group, groupIndex) => /* @__PURE__ */ React8.createElement(Flex4, { key: group.key, direction: "column", gap: compact ? "xs" : gap }, hasValue(group.label) && (alignControlsWithFirstGroup && groupIndex === 0 ? /* @__PURE__ */ React8.createElement(Flex4, { direction: "row", justify: "between", align: "center", gap: "sm" }, /* @__PURE__ */ React8.createElement(Text2, { format: { fontWeight: "demibold" } }, group.label), toolbarRight) : /* @__PURE__ */ React8.createElement(Text2, { format: { fontWeight: "demibold" } }, group.label)), group.items.map((item, index) => {
-        const globalIndex = safeItems.indexOf(item);
+      /* @__PURE__ */ React8.createElement(Flex4, { key: "items", direction: "column", gap: compact ? "xs" : gap }, groups.map((group, groupIndex) => /* @__PURE__ */ React8.createElement(Flex4, { key: group.key, direction: "column", gap: compact ? "xs" : gap }, hasValue2(group.label) && (alignControlsWithFirstGroup && groupIndex === 0 ? /* @__PURE__ */ React8.createElement(Flex4, { direction: "row", justify: "between", align: "center", gap: "sm" }, /* @__PURE__ */ React8.createElement(Text2, { format: { fontWeight: "demibold" } }, group.label), toolbarRight) : /* @__PURE__ */ React8.createElement(Text2, { format: { fontWeight: "demibold" } }, group.label)), group.items.map((item, index) => {
+        const globalIndex = presetItems.indexOf(item);
         const itemIndex = globalIndex >= 0 ? globalIndex : index;
         const key = getItemKey(item, itemIndex, getKey);
         const node = renderItem ? renderItem(item, itemIndex) : /* @__PURE__ */ React8.createElement(
@@ -1893,6 +2107,8 @@ var Feed = ({
             collapsible: collapsible !== false && itemHasExpandableContent(item, fields),
             expanded: !activeCollapsedIds.includes(key),
             onToggleExpanded: () => toggleItemExpanded(key),
+            isNew: highlightMs > 0 && newKeySet.has(key),
+            newItemTagLabel: labels.newItemTag,
             renderActor,
             renderTimestamp,
             renderMeta,
@@ -1939,6 +2155,13 @@ var Feed = ({
   if (container === "card" || container === "tile") return /* @__PURE__ */ React8.createElement(Tile, { compact: true }, feed);
   return feed;
 };
+Feed.displayName = "Feed";
 export {
-  Feed
+  DEFAULT_FEED_TYPE_PRESETS,
+  Feed,
+  applyTypePreset,
+  flushBuffer,
+  lookupTypePreset,
+  partitionNewItems,
+  toTimestampMs
 };