@lumiastream/ui 0.8.2 → 0.8.3

package/dist/se-import.js

@@ -4839,7 +4839,7 @@ async function diagnoseSEAuth(jwt) {
 }
 
 // src/se-import/ui/SEImportWizard.tsx
-import { useCallback as useCallback4, useEffect as useEffect10, useMemo as useMemo8, useRef as useRef9, useState as useState13 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect10, useMemo as useMemo8, useRef as useRef9, useState as useState14 } from "react";
 
 // src/components/LSButton/LSButton.tsx
 import Button from "@mui/material/Button";
@@ -8088,6 +8088,7 @@ function EventListItem({
   avatar,
   fallbackAvatar,
   timestamp,
+  amountBadge,
   platformIcon,
   alertIcon,
   eventType,
@@ -8136,6 +8137,14 @@ function EventListItem({
             style: accentColor ? { color: accentColor } : void 0,
             children: resolvedAlertIcon
           }
+        ) : null,
+        amountBadge != null && amountBadge !== false ? /* @__PURE__ */ jsx24(
+          "span",
+          {
+            className: "ls-eventlist-item__amount-badge",
+            style: accentColor ? { color: accentColor, backgroundColor: `color-mix(in srgb, ${accentColor} 18%, transparent)`, borderColor: `color-mix(in srgb, ${accentColor} 45%, transparent)` } : void 0,
+            children: amountBadge
+          }
         ) : null
       ] }),
       /* @__PURE__ */ jsxs14("div", { className: "ls-eventlist-item__body", children: [
@@ -8154,7 +8163,7 @@ function EventListItem({
 EventListItem.displayName = "EventListItem";
 
 // src/components/EventList/EventList.tsx
-import { useEffect as useEffect7, useRef as useRef7 } from "react";
+import { useEffect as useEffect7, useRef as useRef7, useState as useState9 } from "react";
 import classNames14 from "classnames";
 import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
 var PIN_THRESHOLD = 24;
@@ -8176,10 +8185,15 @@ function EventList({
   newestAt = "top",
   onEndReached,
   endReachedThreshold = 24,
+  showNewItemsPill = false,
+  newItemsPillText,
   className
 }) {
   const listRef = useRef7(null);
   const pinnedRef = useRef7(true);
+  const prevNewestIdRef = useRef7(null);
+  const newItemsInitedRef = useRef7(false);
+  const [unreadCount, setUnreadCount] = useState9(0);
   useEffect7(() => {
     const el = listRef.current;
     if (!autoScroll || !el || !pinnedRef.current) {
@@ -8187,6 +8201,34 @@ function EventList({
     }
     el.scrollTop = newestAt === "top" ? 0 : el.scrollHeight;
   }, [items, autoScroll, newestAt]);
+  useEffect7(() => {
+    if (!showNewItemsPill) {
+      return;
+    }
+    const newestId = (newestAt === "top" ? items[0]?.id : items[items.length - 1]?.id) ?? null;
+    const prevNewestId = prevNewestIdRef.current;
+    let added = 0;
+    if (prevNewestId != null && newestId != null && newestId !== prevNewestId) {
+      const idx = newestAt === "top" ? items.findIndex((item) => item.id === prevNewestId) : items.length - 1 - [...items].reverse().findIndex((item) => item.id === prevNewestId);
+      added = newestAt === "top" ? idx > 0 ? idx : 0 : idx >= 0 && idx < items.length - 1 ? items.length - 1 - idx : 0;
+    }
+    prevNewestIdRef.current = newestId;
+    if (!newItemsInitedRef.current) {
+      newItemsInitedRef.current = true;
+      return;
+    }
+    if (added > 0 && !pinnedRef.current) {
+      setUnreadCount((count) => count + added);
+    }
+  }, [items, showNewItemsPill, newestAt]);
+  const scrollToNewest = () => {
+    const el = listRef.current;
+    if (el) {
+      el.scrollTo({ top: newestAt === "top" ? 0 : el.scrollHeight, behavior: "smooth" });
+    }
+    pinnedRef.current = true;
+    setUnreadCount(0);
+  };
   const handleScroll = () => {
     const el = listRef.current;
     if (!el) {
@@ -8196,43 +8238,50 @@ function EventList({
     const distanceFromNewest = newestAt === "top" ? el.scrollTop : distanceFromEnd;
     const distanceFromOldest = newestAt === "top" ? distanceFromEnd : el.scrollTop;
     pinnedRef.current = distanceFromNewest <= PIN_THRESHOLD;
+    if (pinnedRef.current && unreadCount > 0) {
+      setUnreadCount(0);
+    }
     if (onEndReached && distanceFromOldest <= endReachedThreshold) {
       onEndReached();
     }
   };
-  return /* @__PURE__ */ jsx25("div", { className: classNames14("ls-eventlist", className), id, children: items.length === 0 ? /* @__PURE__ */ jsxs15("div", { className: classNames14("ls-eventlist__empty", emptyClassName), children: [
-    emptyIcon ? /* @__PURE__ */ jsx25("span", { className: "ls-eventlist__empty-icon", children: emptyIcon }) : null,
-    /* @__PURE__ */ jsx25("span", { children: emptyText })
-  ] }) : /* @__PURE__ */ jsx25(
-    "div",
-    {
-      className: "ls-eventlist__list",
-      ref: listRef,
-      onScroll: handleScroll,
-      style: itemGap != null ? { gap: typeof itemGap === "number" ? `${itemGap}px` : itemGap } : void 0,
-      children: items.map((item) => /* @__PURE__ */ jsx25("div", { className: "ls-eventlist__row", children: /* @__PURE__ */ jsx25(
-        EventListItem,
-        {
-          username: item.username,
-          message: item.message,
-          userMessage: item.userMessage,
-          avatar: item.avatar,
-          fallbackAvatar: item.fallbackAvatar ?? fallbackAvatar,
-          timestamp: item.timestamp,
-          platformIcon: showPlatformIcons ? item.platformIcon ?? (item.platform ? /* @__PURE__ */ jsx25(PlatformIcon, { platform: item.platform }) : void 0) : void 0,
-          alertIcon: item.alertIcon,
-          eventType: item.eventType,
-          accentColor: item.accentColor,
-          colorFullBackground,
-          showAvatar: showAvatars,
-          showTimestamp: showTimestamps,
-          showMessage: showMessages,
-          actions: showActions ? item.actions : void 0,
-          onUsernameClick: item.onUsernameClick
-        }
-      ) }, item.id))
-    }
-  ) });
+  return /* @__PURE__ */ jsxs15("div", { className: classNames14("ls-eventlist", className), id, children: [
+    showNewItemsPill && unreadCount > 0 ? /* @__PURE__ */ jsx25("button", { type: "button", className: classNames14("ls-eventlist__new-pill", { "ls-eventlist__new-pill--bottom": newestAt === "bottom" }), onClick: scrollToNewest, children: newItemsPillText ? newItemsPillText(unreadCount) : `${unreadCount} new` }) : null,
+    items.length === 0 ? /* @__PURE__ */ jsxs15("div", { className: classNames14("ls-eventlist__empty", emptyClassName), children: [
+      emptyIcon ? /* @__PURE__ */ jsx25("span", { className: "ls-eventlist__empty-icon", children: emptyIcon }) : null,
+      /* @__PURE__ */ jsx25("span", { children: emptyText })
+    ] }) : /* @__PURE__ */ jsx25(
+      "div",
+      {
+        className: "ls-eventlist__list",
+        ref: listRef,
+        onScroll: handleScroll,
+        style: itemGap != null ? { gap: typeof itemGap === "number" ? `${itemGap}px` : itemGap } : void 0,
+        children: items.map((item) => /* @__PURE__ */ jsx25("div", { className: "ls-eventlist__row", children: /* @__PURE__ */ jsx25(
+          EventListItem,
+          {
+            username: item.username,
+            message: item.message,
+            userMessage: item.userMessage,
+            avatar: item.avatar,
+            fallbackAvatar: item.fallbackAvatar ?? fallbackAvatar,
+            timestamp: item.timestamp,
+            amountBadge: item.amountBadge,
+            platformIcon: showPlatformIcons ? item.platformIcon ?? (item.platform ? /* @__PURE__ */ jsx25(PlatformIcon, { platform: item.platform }) : void 0) : void 0,
+            alertIcon: item.alertIcon,
+            eventType: item.eventType,
+            accentColor: item.accentColor,
+            colorFullBackground,
+            showAvatar: showAvatars,
+            showTimestamp: showTimestamps,
+            showMessage: showMessages,
+            actions: showActions ? item.actions : void 0,
+            onUsernameClick: item.onUsernameClick
+          }
+        ) }, item.id))
+      }
+    )
+  ] });
 }
 EventList.displayName = "EventList";
 
@@ -8341,7 +8390,7 @@ StreamStatusPanel.displayName = "StreamStatusPanel";
 
 // src/components/ViewersList/ViewersList.tsx
 import * as React from "react";
-import { useMemo as useMemo5, useState as useState9 } from "react";
+import { useMemo as useMemo5, useState as useState10 } from "react";
 import classNames16 from "classnames";
 import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
 function ViewersList({
@@ -8360,7 +8409,7 @@ function ViewersList({
   id,
   className
 }) {
-  const [query, setQuery] = useState9("");
+  const [query, setQuery] = useState10("");
   const internalSearch = showSearch && !searchSlot;
   const filtered = useMemo5(
     () => internalSearch && query ? viewers.filter((viewer) => viewer.username.toLowerCase().includes(query.toLowerCase())) : viewers,
@@ -8646,7 +8695,7 @@ function ModQueueItem({
 ModQueueItem.displayName = "ModQueueItem";
 
 // src/components/ModQueueList/ModQueueList.tsx
-import { useMemo as useMemo6, useState as useState10 } from "react";
+import { useMemo as useMemo6, useState as useState11 } from "react";
 import ButtonBase from "@mui/material/ButtonBase";
 import classNames20 from "classnames";
 
@@ -8720,7 +8769,7 @@ function ModQueueList({
   onDeny,
   className
 }) {
-  const [internalQuery, setInternalQuery] = useState10("");
+  const [internalQuery, setInternalQuery] = useState11("");
   const query = searchValue !== void 0 ? searchValue : internalQuery;
   const handleSearchChange = (value) => {
     if (searchValue === void 0) {
@@ -8807,7 +8856,7 @@ function ModActivityLog({ logs, emptyText, onClear, clearLabel = "Clear logs", a
 ModActivityLog.displayName = "ModActivityLog";
 
 // src/components/SongRequestList/SongRequestList.tsx
-import { useState as useState11 } from "react";
+import { useState as useState12 } from "react";
 import classNames22 from "classnames";
 import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
 function SongRequestList({
@@ -8828,7 +8877,7 @@ function SongRequestList({
   emptyText,
   className
 }) {
-  const [addValue, setAddValue] = useState11("");
+  const [addValue, setAddValue] = useState12("");
   const submitAdd = () => {
     const query = addValue.trim();
     if (!query || addDisabled || !onAddSong) {
@@ -8906,13 +8955,13 @@ function SongRequestList({
 SongRequestList.displayName = "SongRequestList";
 
 // src/se-import/ui/MarketplacePicker.tsx
-import { useEffect as useEffect9, useMemo as useMemo7, useState as useState12 } from "react";
+import { useEffect as useEffect9, useMemo as useMemo7, useState as useState13 } from "react";
 import { jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
 function MarketplacePicker({ seWidgetType, fetchMarketplaceOverlay, CustomEmbed, onPick, onCancel }) {
   const candidateIds = useMemo7(() => getMarketplaceCandidates(seWidgetType), [seWidgetType]);
-  const [candidates, setCandidates] = useState12(() => candidateIds.map((id) => ({ id, loading: true })));
-  const [activeId, setActiveId] = useState12(candidateIds[0] ?? null);
-  const [activeLayerId, setActiveLayerId] = useState12(null);
+  const [candidates, setCandidates] = useState13(() => candidateIds.map((id) => ({ id, loading: true })));
+  const [activeId, setActiveId] = useState13(candidateIds[0] ?? null);
+  const [activeLayerId, setActiveLayerId] = useState13(null);
   useEffect9(() => {
     let cancelled = false;
     candidateIds.forEach(async (id) => {
@@ -11418,8 +11467,8 @@ var CUSTOM_WIDGET_TABS = [
 ];
 function CustomWidgetCard({ widget }) {
   const tabs = CUSTOM_WIDGET_TABS.filter(({ key }) => widget[key].trim().length > 0);
-  const [activeKey, setActiveKey] = useState13(tabs[0]?.key ?? "js");
-  const [copied, setCopied] = useState13(false);
+  const [activeKey, setActiveKey] = useState14(tabs[0]?.key ?? "js");
+  const [copied, setCopied] = useState14(false);
   const value = widget[activeKey] ?? "";
   useEffect10(() => setCopied(false), [activeKey]);
   const handleCopy = useCallback4(() => {
@@ -11544,47 +11593,47 @@ function SEImportWizard({
     CustomEmbed,
     isAdmin
   } = bindings;
-  const [step, setStep] = useState13(
+  const [step, setStep] = useState14(
     initialStep ?? (initialUrl ? "url" : initialJwt ? "connect" : "mode")
   );
-  const [entryMode, setEntryMode] = useState13(
+  const [entryMode, setEntryMode] = useState14(
     initialStep === "url" ? "url" : initialStep === "connect" ? "jwt" : initialUrl ? "url" : initialJwt ? "jwt" : null
   );
-  const [jwt, setJwt] = useState13(initialJwt);
-  const [seClient, setSeClient] = useState13(null);
-  const [channels, setChannels] = useState13(null);
-  const [selectedChannelId, setSelectedChannelId] = useState13(null);
-  const [connectError, setConnectError] = useState13(null);
-  const [connecting, setConnecting] = useState13(false);
-  const [overlayList, setOverlayList] = useState13(
+  const [jwt, setJwt] = useState14(initialJwt);
+  const [seClient, setSeClient] = useState14(null);
+  const [channels, setChannels] = useState14(null);
+  const [selectedChannelId, setSelectedChannelId] = useState14(null);
+  const [connectError, setConnectError] = useState14(null);
+  const [connecting, setConnecting] = useState14(false);
+  const [overlayList, setOverlayList] = useState14(
     initialOverlayList?.length ? initialOverlayList : null
   );
-  const [overlaysLoading, setOverlaysLoading] = useState13(false);
-  const [overlaysError, setOverlaysError] = useState13(null);
-  const [selectedOverlayIds, setSelectedOverlayIds] = useState13(/* @__PURE__ */ new Set());
-  const [activeOverlaySummaries, setActiveOverlaySummaries] = useState13([]);
-  const [activeOverlayPreview, setActiveOverlayPreview] = useState13();
-  const [url, setUrl] = useState13(initialUrl);
-  const [loadError, setLoadError] = useState13(null);
-  const [loading, setLoading] = useState13(false);
-  const [result, setResult] = useState13(null);
-  const [batchImports, setBatchImports] = useState13([]);
-  const [originalReviewItems, setOriginalReviewItems] = useState13([]);
-  const [options, setOptions] = useState13({
+  const [overlaysLoading, setOverlaysLoading] = useState14(false);
+  const [overlaysError, setOverlaysError] = useState14(null);
+  const [selectedOverlayIds, setSelectedOverlayIds] = useState14(/* @__PURE__ */ new Set());
+  const [activeOverlaySummaries, setActiveOverlaySummaries] = useState14([]);
+  const [activeOverlayPreview, setActiveOverlayPreview] = useState14();
+  const [url, setUrl] = useState14(initialUrl);
+  const [loadError, setLoadError] = useState14(null);
+  const [loading, setLoading] = useState14(false);
+  const [result, setResult] = useState14(null);
+  const [batchImports, setBatchImports] = useState14([]);
+  const [originalReviewItems, setOriginalReviewItems] = useState14([]);
+  const [options, setOptions] = useState14({
     mirrorAssets: true,
     name: ""
   });
-  const [mirrorRows, setMirrorRows] = useState13([]);
-  const [mirrorRunning, setMirrorRunning] = useState13(false);
-  const [rowStates, setRowStates] = useState13({});
-  const [reviewIndex, setReviewIndex] = useState13(0);
-  const [importing, setImporting] = useState13(false);
-  const [marketplacePickerOpen, setMarketplacePickerOpen] = useState13(false);
+  const [mirrorRows, setMirrorRows] = useState14([]);
+  const [mirrorRunning, setMirrorRunning] = useState14(false);
+  const [rowStates, setRowStates] = useState14({});
+  const [reviewIndex, setReviewIndex] = useState14(0);
+  const [importing, setImporting] = useState14(false);
+  const [marketplacePickerOpen, setMarketplacePickerOpen] = useState14(false);
   const mirrorStartedRef = useRef9(false);
   const mirrorAbortRef = useRef9(null);
   const initialOverlayImportStartedRef = useRef9(false);
   const filenameCacheRef = useRef9(/* @__PURE__ */ new Map());
-  const [assetUrls, setAssetUrls] = useState13([]);
+  const [assetUrls, setAssetUrls] = useState14([]);
   const currentItem = originalReviewItems[reviewIndex];
   const currentRow = currentItem ? rowStates[currentItem.moduleId] ?? { state: "pending" } : void 0;
   const handleConnect = useCallback4(async () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lumiastream/ui",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "author": "Lumia Stream",
   "license": "ISC",
   "description": "Lumia UI Kit",
@@ -153,6 +153,7 @@
     "watch": "tsup --watch",
     "test": "vitest run",
     "test:watch": "vitest",
+    "link-local": "npm run build && node ./scripts/link-local.mjs",
     "release": "changeset && changeset tag && npm run build && npm publish",
     "prepublishOnly": "npm run build",
     "postpublish": "npm cache clean --force && node ./scripts/postpublish-install.mjs",