@expcat/tigercat-react 1.3.4 → 1.5.0

package/dist/{chunk-NVEIVIAW.mjs → chunk-LACDTZTE.mjs}

@@ -1,12 +1,12 @@
 import {
   Textarea
-} from "./chunk-7QZ4XT2P.mjs";
+} from "./chunk-D4X3NBAI.mjs";
 import {
   Button
 } from "./chunk-5TE7KLE5.mjs";
 import {
   Tag
-} from "./chunk-WMPCN7OF.mjs";
+} from "./chunk-MZCGQED3.mjs";
 import {
   Text
 } from "./chunk-HLS4CHWX.mjs";
@@ -99,13 +99,14 @@ var CommentThread = ({
   const ACTION_BTN = `${BTN_BASE} text-gray-500 dark:text-gray-400 font-medium flex items-center gap-1.5`;
   const PRIMARY_BTN = `${BTN_BASE} text-[var(--tiger-primary,#2563eb)] hover:text-[var(--tiger-primary-hover,#1d4ed8)] dark:text-blue-400 dark:hover:text-blue-300 font-semibold hover:bg-[var(--tiger-primary,#2563eb)]/10 dark:hover:bg-blue-400/10`;
   const renderNode = (node, depth, isLast) => {
-    const hasChildren = !!node.children && node.children.length > 0;
+    const children = node.children ?? [];
+    const hasChildren = children.length > 0;
     const isExpanded = expandedSet.has(node.id);
     const showReplies = hasChildren && isExpanded;
     const showAllReplies = expandedAllKeys.has(node.id);
     const repliesId = `tiger-comment-replies-${node.id}`;
-    const visibleChildren = showReplies ? maxReplies > 0 && !showAllReplies ? node.children.slice(0, maxReplies) : node.children : [];
-    const showLoadMoreBtn = showReplies && maxReplies > 0 && node.children.length > maxReplies && !showAllReplies;
+    const visibleChildren = showReplies ? maxReplies > 0 && !showAllReplies ? children.slice(0, maxReplies) : children : [];
+    const showLoadMoreBtn = showReplies && maxReplies > 0 && children.length > maxReplies && !showAllReplies;
     const actions = [];
     if (showLike) {
       const likeLabel = node.liked ? likedText : likeText;
@@ -123,7 +124,25 @@ var CommentThread = ({
             ),
             onClick: () => onLike?.(node, !node.liked),
             children: [
-              /* @__PURE__ */ jsx("svg", { className: classNames("w-3.5 h-3.5 transition-transform duration-200 active:scale-125", node.liked ? "fill-current" : "stroke-current fill-none"), viewBox: "0 0 24 24", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.421.068.848.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 010-7.764c.26-.85.1083-1.368 1.972-1.368h.908c.445 0 .72.498.523.898a8.963 8.963 0 00-.27.602" }) }),
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: classNames(
+                    "w-3.5 h-3.5 transition-transform duration-200 active:scale-125",
+                    node.liked ? "fill-current" : "stroke-current fill-none"
+                  ),
+                  viewBox: "0 0 24 24",
+                  strokeWidth: "2",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      d: "M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.421.068.848.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 010-7.764c.26-.85.1083-1.368 1.972-1.368h.908c.445 0 .72.498.523.898a8.963 8.963 0 00-.27.602"
+                    }
+                  )
+                }
+              ),
               /* @__PURE__ */ jsx("span", { children: `${likeLabel}${likeCount}` })
             ]
           },
@@ -147,7 +166,24 @@ var CommentThread = ({
               setReplyValue("");
             },
             children: [
-              /* @__PURE__ */ jsx("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" }) }),
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: "w-3.5 h-3.5",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      d: "M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+                    }
+                  )
+                }
+              ),
               /* @__PURE__ */ jsx("span", { children: replyText })
             ]
           },
@@ -168,7 +204,24 @@ var CommentThread = ({
             ),
             onClick: () => onMore?.(node),
             children: [
-              /* @__PURE__ */ jsx("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" }) }),
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: "w-3.5 h-3.5",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      d: "M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
+                    }
+                  )
+                }
+              ),
               /* @__PURE__ */ jsx("span", { children: moreText })
             ]
           },
@@ -185,10 +238,7 @@ var CommentThread = ({
             {
               size: "sm",
               variant: action.variant ?? "ghost",
-              className: classNames(
-                ACTION_BTN,
-                "hover:bg-gray-100 dark:hover:bg-gray-800"
-              ),
+              className: classNames(ACTION_BTN, "hover:bg-gray-100 dark:hover:bg-gray-800"),
               disabled: action.disabled,
               onClick: () => {
                 action.onClick?.(node, action);
@@ -221,11 +271,55 @@ var CommentThread = ({
           ) : null,
           /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
-              node.user?.name ? /* @__PURE__ */ jsx(Text, { tag: "span", size: "sm", weight: "bold", className: "text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400 transition-colors cursor-pointer", children: node.user.name }) : null,
-              node.user?.title ? /* @__PURE__ */ jsx(Text, { tag: "span", size: "xs", color: "muted", className: "bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded text-gray-500 dark:text-gray-400 font-medium", children: node.user.title }) : null,
-              node.tag ? /* @__PURE__ */ jsx(Tag, { size: "sm", variant: node.tag.variant ?? "default", className: "rounded-full px-2 py-0.5 text-[10px] font-semibold tracking-wide uppercase border border-current bg-opacity-10", children: node.tag.label }) : null,
-              node.tags?.map((tag, index) => /* @__PURE__ */ jsx(Tag, { size: "sm", variant: tag.variant ?? "default", className: "rounded-full px-2 py-0.5 text-[10px] font-semibold tracking-wide uppercase border border-current bg-opacity-10", children: tag.label }, `${node.id}-tag-${index}`)),
-              node.time ? /* @__PURE__ */ jsx(Text, { tag: "span", size: "xs", color: "muted", className: "ml-auto text-gray-400 dark:text-gray-500 font-normal", children: formatCommentTime(node.time) }) : null
+              node.user?.name ? /* @__PURE__ */ jsx(
+                Text,
+                {
+                  tag: "span",
+                  size: "sm",
+                  weight: "bold",
+                  className: "text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400 transition-colors cursor-pointer",
+                  children: node.user.name
+                }
+              ) : null,
+              node.user?.title ? /* @__PURE__ */ jsx(
+                Text,
+                {
+                  tag: "span",
+                  size: "xs",
+                  color: "muted",
+                  className: "bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded text-gray-500 dark:text-gray-400 font-medium",
+                  children: node.user.title
+                }
+              ) : null,
+              node.tag ? /* @__PURE__ */ jsx(
+                Tag,
+                {
+                  size: "sm",
+                  variant: node.tag.variant ?? "default",
+                  className: "rounded-full px-2 py-0.5 text-[10px] font-semibold tracking-wide uppercase border border-current bg-current/10",
+                  children: node.tag.label
+                }
+              ) : null,
+              node.tags?.map((tag, index) => /* @__PURE__ */ jsx(
+                Tag,
+                {
+                  size: "sm",
+                  variant: tag.variant ?? "default",
+                  className: "rounded-full px-2 py-0.5 text-[10px] font-semibold tracking-wide uppercase border border-current bg-current/10",
+                  children: tag.label
+                },
+                `${node.id}-tag-${index}`
+              )),
+              node.time ? /* @__PURE__ */ jsx(
+                Text,
+                {
+                  tag: "span",
+                  size: "xs",
+                  color: "muted",
+                  className: "ml-auto text-gray-400 dark:text-gray-500 font-normal",
+                  children: formatCommentTime(node.time)
+                }
+              ) : null
             ] }),
             /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-600 dark:text-gray-300 leading-relaxed break-words mt-2 mb-3 pr-2", children: node.content }),
             actions.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1.5", children: actions }) : null,
@@ -271,11 +365,14 @@ var CommentThread = ({
               {
                 size: "sm",
                 variant: "ghost",
-                className: classNames("mt-2 font-semibold hover:bg-[var(--tiger-primary,#2563eb)]/10 dark:hover:bg-blue-400/10 transition-colors", PRIMARY_BTN),
+                className: classNames(
+                  "mt-2 font-semibold hover:bg-[var(--tiger-primary,#2563eb)]/10 dark:hover:bg-blue-400/10 transition-colors",
+                  PRIMARY_BTN
+                ),
                 "aria-expanded": isExpanded,
                 "aria-controls": repliesId,
                 onClick: () => toggleExpanded(node.id),
-                children: isExpanded ? "\u25BE \u6536\u8D77\u56DE\u590D" : `\u25B8 \u5C55\u5F00 ${node.children.length} \u6761\u56DE\u590D`
+                children: isExpanded ? "\u25BE \u6536\u8D77\u56DE\u590D" : `\u25B8 \u5C55\u5F00 ${children.length} \u6761\u56DE\u590D`
               }
             ) : null,
             showReplies ? /* @__PURE__ */ jsxs(
@@ -315,7 +412,24 @@ var CommentThread = ({
       "aria-label": divProps["aria-label"] ?? (divProps["aria-labelledby"] ? void 0 : "\u8BC4\u8BBA\u7EBF\u7A0B"),
       ...divProps,
       children: resolvedNodes.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center border border-dashed border-gray-200 dark:border-gray-800/80 rounded-xl py-12 px-4 bg-gray-50/20 dark:bg-gray-900/5 transition-colors", children: [
-        /* @__PURE__ */ jsx("svg", { className: "w-10 h-10 text-gray-300 dark:text-gray-600 mb-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" }) }),
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "w-10 h-10 text-gray-300 dark:text-gray-600 mb-3",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+              }
+            )
+          }
+        ),
         /* @__PURE__ */ jsx(Text, { tag: "div", size: "sm", color: "muted", className: "font-medium", children: emptyText })
       ] }) : resolvedNodes.map((node, index) => renderNode(node, 1, index === resolvedNodes.length - 1))
     }

package/dist/{chunk-WI4N5DD3.mjs → chunk-LAKPYMBZ.mjs}

@@ -1,9 +1,15 @@
+import {
+  useTigerConfig
+} from "./chunk-QAIBQHIO.mjs";
+
 // src/components/InfiniteScroll.tsx
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import {
   classNames,
   shouldLoadMore,
   createInfiniteScrollObserver,
+  resolveLocaleText,
+  mergeTigerLocale,
   getInfiniteScrollContainerClasses,
   infiniteScrollLoaderClasses,
   infiniteScrollEndClasses,
@@ -14,18 +20,24 @@ var InfiniteScroll = ({
   hasMore = true,
   loading = false,
   threshold = 100,
-  loadingText = "Loading...",
-  endText = "No more data",
+  loadingText,
+  endText,
   direction = "vertical",
   inverse = false,
   disabled = false,
   className,
+  locale,
   children,
   loader,
   end,
   onLoadMore,
   ...rest
 }) => {
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
   const containerRef = useRef(null);
   const sentinelRef = useRef(null);
   const containerClasses = useMemo(
@@ -50,6 +62,7 @@ var InfiniteScroll = ({
       threshold,
       direction,
       root: containerRef.current,
+      inverse,
       onLoadMore: () => {
         if (!disabled && !loading && hasMore) {
           onLoadMoreRef.current?.();
@@ -74,8 +87,8 @@ var InfiniteScroll = ({
       style: { height: 0, overflow: "hidden" }
     }
   ) : null;
-  const loaderEl = loading ? /* @__PURE__ */ jsx("div", { className: infiniteScrollLoaderClasses, role: "status", "aria-live": "polite", children: loader ?? loadingText }) : null;
-  const endEl = !hasMore && !loading ? /* @__PURE__ */ jsx("div", { className: infiniteScrollEndClasses, children: end ?? endText }) : null;
+  const loaderEl = loading ? /* @__PURE__ */ jsx("div", { className: infiniteScrollLoaderClasses, role: "status", "aria-live": "polite", children: loader ?? resolveLocaleText("Loading...", loadingText, mergedLocale?.common?.loadingText) }) : null;
+  const endEl = !hasMore && !loading ? /* @__PURE__ */ jsx("div", { className: infiniteScrollEndClasses, children: end ?? resolveLocaleText("No more data", endText, mergedLocale?.common?.noMoreText) }) : null;
   return /* @__PURE__ */ jsx("div", { ref: containerRef, className: classNames(containerClasses), ...rest, children: inverse ? /* @__PURE__ */ jsxs(Fragment, { children: [
     sentinelEl,
     loaderEl,

package/dist/{chunk-6GU5NH5F.mjs → chunk-LBXNMCXN.mjs}

@@ -9,6 +9,8 @@ import {
   countLines,
   generateLineNumbers,
   handleTabKey,
+  getActiveLineIndex,
+  getCodeEditorActiveLineClasses,
   codeEditorTextareaClasses,
   codeEditorHighlightClasses
 } from "@expcat/tigercat-core";
@@ -25,6 +27,7 @@ var CodeEditor = ({
   wordWrap = false,
   minLines = 3,
   maxLines = 0,
+  highlightActiveLine = true,
   disabled = false,
   className,
   style,
@@ -32,6 +35,7 @@ var CodeEditor = ({
   highlighter
 }) => {
   const [internalValue, setInternalValue] = useState(defaultValue);
+  const [activeLine, setActiveLine] = useState(0);
   const textareaRef = useRef(null);
   const code = controlledValue !== void 0 ? controlledValue : internalValue;
   const lines = useMemo(() => code.split("\n"), [code]);
@@ -48,11 +52,17 @@ var CodeEditor = ({
     if (maxLines > 0) s.maxHeight = `${maxLines * lineHeight + 1.5}rem`;
     return s;
   }, [minLines, maxLines, style]);
+  const updateActiveLine = useCallback(() => {
+    const ta = textareaRef.current;
+    if (!ta) return;
+    setActiveLine(getActiveLineIndex(ta.value, ta.selectionStart));
+  }, []);
   const handleInput = useCallback(
     (e) => {
       const val = e.target.value;
       setInternalValue(val);
       onChange?.(val);
+      setActiveLine(getActiveLineIndex(val, e.target.selectionStart));
     },
     [onChange]
   );
@@ -74,27 +84,42 @@ var CodeEditor = ({
     [tabSize, onChange]
   );
   const wrapClass = wordWrap ? "whitespace-pre-wrap break-all" : "";
+  const showActiveLine = highlightActiveLine && !disabled;
+  const activeLineClass = getCodeEditorActiveLineClasses(theme);
   const renderToken = (token, idx) => {
     const cls = getTokenClasses(token.type, theme);
     return cls ? /* @__PURE__ */ jsx("span", { className: cls, children: token.value }, idx) : /* @__PURE__ */ jsx(React.Fragment, { children: token.value }, idx);
   };
   const renderLine = (line, lineIndex) => {
+    const lineClass = classNames(
+      "min-h-[1.625rem]",
+      showActiveLine && lineIndex === activeLine && activeLineClass
+    );
     if (highlighter?.highlightLine) {
       const html = highlighter.highlightLine(line, language, theme) || (line === "" ? "\n" : "");
       return /* @__PURE__ */ jsx(
         "div",
         {
-          className: "min-h-[1.625rem]",
+          className: lineClass,
+          "data-active-line": showActiveLine && lineIndex === activeLine ? "" : void 0,
           dangerouslySetInnerHTML: { __html: html }
         },
         lineIndex
       );
     }
     const tokens = tokenizeLine(line, language);
-    return /* @__PURE__ */ jsxs("div", { className: "min-h-[1.625rem]", children: [
-      tokens.map(renderToken),
-      line === "" ? "\n" : null
-    ] }, lineIndex);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: lineClass,
+        "data-active-line": showActiveLine && lineIndex === activeLine ? "" : void 0,
+        children: [
+          tokens.map(renderToken),
+          line === "" ? "\n" : null
+        ]
+      },
+      lineIndex
+    );
   };
   const blockHtml = highlighter && !highlighter.highlightLine && highlighter.highlightCode ? highlighter.highlightCode(code, language, theme) : null;
   return /* @__PURE__ */ jsx(
@@ -123,6 +148,9 @@ var CodeEditor = ({
               value: code,
               onChange: handleInput,
               onKeyDown: handleKeyDown,
+              onSelect: updateActiveLine,
+              onClick: updateActiveLine,
+              onKeyUp: updateActiveLine,
               readOnly: readOnly || disabled,
               disabled,
               placeholder,