@next-library/theme 1.0.11 → 1.0.13

package/dist/client.js

@@ -10,7 +10,7 @@ import Link3 from 'next/link';
 import Image from 'next/image';
 import { createPortal } from 'react-dom';
 import { useRouter } from 'next/navigation';
-import { Search, Loader2, ArrowUp, ArrowDown, CornerDownLeft, CheckIcon, CircleIcon, ChevronRightIcon, LanguagesIcon, XIcon, PanelLeftIcon, FolderOpenIcon, FolderClosedIcon, ChevronRight, ChevronDown, FileTextIcon, Menu, Star, GithubIcon, MoreHorizontal, Home, ExternalLinkIcon, CopyIcon, ChevronDownIcon, CookieIcon, ChevronUpIcon, FolderUp, ChevronLeft, Check, Copy } from 'lucide-react';
+import { Search, Loader2, ArrowUp, ArrowDown, CornerDownLeft, CheckIcon, CircleIcon, ChevronRightIcon, LanguagesIcon, XIcon, PanelLeftIcon, FolderOpenIcon, FolderClosedIcon, ChevronRight, ChevronDown, FileTextIcon, Menu, Star, GithubIcon, MoreHorizontal, Home, ExternalLinkIcon, CopyIcon, CookieIcon, ChevronDownIcon, ChevronUpIcon, FolderUp, ChevronLeft, Check, Copy } from 'lucide-react';
 import { useTheme } from 'next-themes';
 import { useLocale } from '@next-library/core/hooks';
 import { Slot } from '@radix-ui/react-slot';
@@ -4236,9 +4236,18 @@ function writeCachedCount(repo, count) {
   } catch {
   }
 }
+function hasEngaged() {
+  try {
+    return localStorage.getItem("nl-star-engaged") === "1";
+  } catch {
+    return false;
+  }
+}
 function GithubStar({ repoUrl }) {
   const repo = repoUrl ? parseGithubRepo(repoUrl) : null;
   const [count, setCount] = useState(null);
+  const [nudge, setNudge] = useState(false);
+  const [engaged, setEngaged] = useState(true);
   useEffect(() => {
     if (!repo) return;
     const cached = readCachedCount(repo);
@@ -4259,9 +4268,34 @@ function GithubStar({ repoUrl }) {
     });
     return () => controller.abort();
   }, [repo]);
+  useEffect(() => {
+    if (!repoUrl) return;
+    const already = hasEngaged();
+    setEngaged(already);
+    if (already) return;
+    const reduce = typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    let nudgedThisSession = false;
+    try {
+      nudgedThisSession = sessionStorage.getItem("nl-star-nudged") === "1";
+    } catch {
+    }
+    if (reduce || nudgedThisSession) return;
+    const start = setTimeout(() => {
+      setNudge(true);
+      try {
+        sessionStorage.setItem("nl-star-nudged", "1");
+      } catch {
+      }
+      const stop = setTimeout(() => setNudge(false), 2400);
+      cleanups.push(() => clearTimeout(stop));
+    }, 1800);
+    const cleanups = [() => clearTimeout(start)];
+    return () => cleanups.forEach((fn) => fn());
+  }, [repoUrl]);
   if (!repoUrl) {
     return null;
   }
+  const markTwinkle = !engaged;
   return /* @__PURE__ */ jsxs(
     "a",
     {
@@ -4270,9 +4304,26 @@ function GithubStar({ repoUrl }) {
       rel: "noopener noreferrer",
       "aria-label": "Star on GitHub",
       "data-testid": "github-star-link",
-      className: "ml-1 inline-flex h-8 items-center gap-1.5 rounded-md border px-2.5 text-[13px] font-medium text-foreground transition-colors hover:bg-accent",
+      onClick: () => {
+        try {
+          localStorage.setItem("nl-star-engaged", "1");
+        } catch {
+        }
+        setEngaged(true);
+        setNudge(false);
+      },
+      className: `nl-star-btn ml-1 inline-flex h-8 items-center gap-1.5 rounded-md border px-2.5 text-[13px] font-medium text-foreground transition-colors hover:bg-accent${nudge ? " nl-star-btn--nudge" : ""}`,
       children: [
-        /* @__PURE__ */ jsx(Star, { className: "size-3.5", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs("span", { className: "nl-star-ico relative inline-flex", children: [
+          /* @__PURE__ */ jsx(
+            Star,
+            {
+              className: `size-3.5 nl-star-mark${markTwinkle ? " nl-star-mark--twinkle" : ""}`,
+              "aria-hidden": "true"
+            }
+          ),
+          nudge && /* @__PURE__ */ jsx(Star, { className: "nl-star-fly size-3.5", "aria-hidden": "true" })
+        ] }),
         /* @__PURE__ */ jsx("span", { children: "Star" }),
         count !== null && /* @__PURE__ */ jsx(
           "span",
@@ -4990,56 +5041,47 @@ function CopyPageButton({
     const claudeUrl = `https://claude.ai/new?q=${encodedMessage}`;
     window.open(claudeUrl, "_blank", "noopener,noreferrer");
   }
-  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-      Button,
-      {
-        variant: "outline",
-        size: "sm",
-        className: cn(
-          "flex gap-2 text-sm font-medium items-center",
-          isCopied && "opacity-70",
-          className
+  const segment = "inline-flex h-8 items-center gap-1.5 whitespace-nowrap px-2.5 text-[13px] font-medium text-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-label": _askAboutThisPage,
+      className: cn(
+        // Segmented control: one border, dividers between the three actions.
+        "inline-flex items-stretch overflow-hidden rounded-md border bg-card shadow-xs divide-x divide-border",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: handleCopy,
+            title: copyPageDescription,
+            "aria-live": "polite",
+            className: cn(segment, isCopied && "text-muted-foreground"),
+            children: [
+              isCopied ? /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5", "aria-hidden": true }) : /* @__PURE__ */ jsx(CopyIcon, { className: "size-3.5", "aria-hidden": true }),
+              isCopied ? copied : copyPage
+            ]
+          }
         ),
-        children: [
-          /* @__PURE__ */ jsx(CopyIcon, { width: "16" }),
-          isCopied ? copied : copyPage,
-          /* @__PURE__ */ jsx(ChevronDownIcon, { width: "14", className: "opacity-50" })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "min-w-[200px]", children: [
-      /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: handleCopy, children: [
-        /* @__PURE__ */ jsx(CopyIcon, { width: "16", className: "mr-2" }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: copyPage }),
-          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: copyPageDescription })
-        ] })
-      ] }),
-      pageUrl && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: handleOpenInChatGPT, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(ChatGPTIcon, { className: "w-4 h-4 shrink-0" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: openInChatGPT }),
-              /* @__PURE__ */ jsx(ExternalLinkIcon, { width: "12", className: "text-muted-foreground shrink-0" })
-            ] }),
-            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: askQuestionsDescription })
-          ] })
-        ] }) }),
-        /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: handleOpenInClaude, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(ClaudeIcon, { className: "w-4 h-4 shrink-0" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: openInClaude }),
-              /* @__PURE__ */ jsx(ExternalLinkIcon, { width: "12", className: "text-muted-foreground shrink-0" })
-            ] }),
-            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: askQuestionsDescription })
+        pageUrl && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("button", { type: "button", onClick: handleOpenInChatGPT, title: askQuestionsDescription, className: segment, children: [
+            /* @__PURE__ */ jsx(ChatGPTIcon, { className: "size-3.5 shrink-0" }),
+            /* @__PURE__ */ jsx("span", { children: openInChatGPT }),
+            /* @__PURE__ */ jsx(ExternalLinkIcon, { className: "size-3 text-muted-foreground", "aria-hidden": true })
+          ] }),
+          /* @__PURE__ */ jsxs("button", { type: "button", onClick: handleOpenInClaude, title: askQuestionsDescription, className: segment, children: [
+            /* @__PURE__ */ jsx(ClaudeIcon, { className: "size-3.5 shrink-0" }),
+            /* @__PURE__ */ jsx("span", { children: openInClaude }),
+            /* @__PURE__ */ jsx(ExternalLinkIcon, { className: "size-3 text-muted-foreground", "aria-hidden": true })
           ] })
-        ] }) })
-      ] })
-    ] })
-  ] });
+        ] })
+      ]
+    }
+  );
 }
 function track(event, data) {
   if (typeof window !== "undefined") {