@stigmer/react 3.12.1 → 3.12.2

package/src/internal/__tests__/ThreadCardShell.test.tsx

@@ -1,9 +1,9 @@
 // Contract tests for the shared thread-card shell (T05/T06): the chrome
-// axes (bordered vs divider row, gate accent), the header gestures
-// (`expand` / `none` — `select` died with the Inspect drill-down, T06)
-// with their ARIA semantics, and the nested-button keydown guard. The two
-// consuming threads pin their own compositions; this file pins what they
-// share.
+// tiers (card / nested divider row / quiet unboxed line, gate accent), the
+// header gestures (`expand` / `none` — `select` died with the Inspect
+// drill-down, T06) with their ARIA semantics, and the nested-button keydown
+// guard. The two consuming threads pin their own compositions; this file
+// pins what they share.
 
 import { describe, it, expect, vi, afterEach } from "vitest";
 import { render, screen, fireEvent, cleanup } from "@testing-library/react";
@@ -16,7 +16,7 @@ import {
 afterEach(cleanup);
 
 describe("ThreadCardShell chrome", () => {
-  it("renders a bordered card by default and a divider row when nested", () => {
+  it("renders a bordered card by default, a divider row when nested, and no chrome when quiet", () => {
     const { rerender, container } = render(
       <ThreadCardShell cursorTarget="row">
         <ThreadCardHeader>content</ThreadCardHeader>
@@ -27,12 +27,22 @@ describe("ThreadCardShell chrome", () => {
     expect(root().className).toContain("stg:border-border-prominent");
 
     rerender(
-      <ThreadCardShell cursorTarget="row" bordered={false}>
+      <ThreadCardShell cursorTarget="row" variant="row">
         <ThreadCardHeader>content</ThreadCardHeader>
       </ThreadCardShell>,
     );
     expect(root().className).toContain("stg:border-b");
     expect(root().className).not.toContain("stg:border-border-prominent");
+
+    rerender(
+      <ThreadCardShell cursorTarget="row" variant="quiet">
+        <ThreadCardHeader>content</ThreadCardHeader>
+      </ThreadCardShell>,
+    );
+    // The quiet tier is an unboxed line: no card border, no divider.
+    expect(root().className).not.toContain("stg:border-border-prominent");
+    expect(root().className).not.toContain("stg:border-b");
+    expect(root().className).not.toContain("stg:rounded-lg");
   });
 
   it("carries the gate accent", () => {
@@ -44,6 +54,19 @@ describe("ThreadCardShell chrome", () => {
     const root = container.querySelector('[data-cursor-target="row"]') as HTMLElement;
     expect(root.className).toContain("stg:border-l-warning");
   });
+
+  it("never draws the gate accent on a quiet shell — escalation is the caller's job", () => {
+    // The quiet tier deliberately ignores `accent`: a gated row must be
+    // escalated to variant="card" by its component, never rendered as an
+    // accented bare line (see ThreadCardVariant).
+    const { container } = render(
+      <ThreadCardShell cursorTarget="row" variant="quiet" accent="warning">
+        <ThreadCardHeader>content</ThreadCardHeader>
+      </ThreadCardShell>,
+    );
+    const root = container.querySelector('[data-cursor-target="row"]') as HTMLElement;
+    expect(root.className).not.toContain("stg:border-l-warning");
+  });
 });
 
 describe("ThreadCardHeader gestures", () => {
@@ -102,4 +125,17 @@ describe("ThreadCardBody", () => {
     render(<ThreadCardBody id="detail-1">body</ThreadCardBody>);
     expect(document.getElementById("detail-1")?.textContent).toBe("body");
   });
+
+  it("swaps the card padding for a left rail when the body is quiet-contained", () => {
+    const { rerender } = render(<ThreadCardBody id="detail-1">body</ThreadCardBody>);
+    const el = () => document.getElementById("detail-1")!;
+    expect(el().className).not.toContain("stg:border-l-2");
+
+    rerender(
+      <ThreadCardBody id="detail-1" rail>
+        body
+      </ThreadCardBody>,
+    );
+    expect(el().className).toContain("stg:border-l-2");
+  });
 });

package/src/internal/__tests__/useCopyFeedback.test.ts

@@ -0,0 +1,92 @@
+import { describe, expect, it, vi, beforeEach, afterEach } from "vitest";
+import { act, renderHook } from "@testing-library/react";
+import { useCopyFeedback } from "../useCopyFeedback";
+
+describe("useCopyFeedback", () => {
+  let writeText: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    writeText = vi.fn().mockResolvedValue(undefined);
+    vi.stubGlobal("navigator", { clipboard: { writeText } });
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    vi.useRealTimers();
+  });
+
+  it("resolves true and flashes `copied` for a successful write", async () => {
+    const { result } = renderHook(() => useCopyFeedback());
+
+    let outcome: boolean | undefined;
+    await act(async () => {
+      outcome = await result.current.copy("hello");
+    });
+
+    expect(outcome).toBe(true);
+    expect(writeText).toHaveBeenCalledWith("hello");
+    expect(result.current.copied).toBe(true);
+
+    act(() => {
+      vi.advanceTimersByTime(2000);
+    });
+    expect(result.current.copied).toBe(false);
+  });
+
+  it("resolves false and never claims `copied` for a rejected write", async () => {
+    writeText.mockRejectedValue(new Error("denied"));
+    const { result } = renderHook(() => useCopyFeedback());
+
+    let outcome: boolean | undefined;
+    await act(async () => {
+      outcome = await result.current.copy("secret");
+    });
+
+    expect(outcome).toBe(false);
+    expect(result.current.copied).toBe(false);
+  });
+
+  it("restarts the feedback window on a rapid second copy", async () => {
+    const { result } = renderHook(() => useCopyFeedback());
+
+    await act(async () => {
+      await result.current.copy("one");
+    });
+    act(() => {
+      vi.advanceTimersByTime(1500);
+    });
+    await act(async () => {
+      await result.current.copy("two");
+    });
+
+    // 1.5s into the second window: still showing feedback.
+    act(() => {
+      vi.advanceTimersByTime(1500);
+    });
+    expect(result.current.copied).toBe(true);
+
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+    expect(result.current.copied).toBe(false);
+  });
+
+  it("does not set state after unmount when the timer would fire", async () => {
+    const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    const { result, unmount } = renderHook(() => useCopyFeedback());
+
+    await act(async () => {
+      await result.current.copy("bye");
+    });
+    unmount();
+    act(() => {
+      vi.advanceTimersByTime(2000);
+    });
+
+    // React warns on setState-after-unmount via console.error; silence means
+    // the unmount cleanup cleared the pending timer.
+    expect(errorSpy).not.toHaveBeenCalled();
+    errorSpy.mockRestore();
+  });
+});

package/src/internal/select-element-text.ts

@@ -0,0 +1,17 @@
+/**
+ * Select an element's text content, replacing any existing selection.
+ *
+ * The honest fallback for one-time secret reveals (API keys, invite URLs,
+ * client secrets) when the clipboard write is rejected (insecure context,
+ * denied permission): instead of claiming "Copied" for a copy that didn't
+ * happen, the revealed value is selected so the user can copy it manually.
+ * Pair with `useCopyFeedback` — branch on its `copy()` result.
+ */
+export function selectElementText(el: HTMLElement): void {
+  const selection = window.getSelection();
+  if (!selection) return;
+  const range = document.createRange();
+  range.selectNodeContents(el);
+  selection.removeAllRanges();
+  selection.addRange(range);
+}

package/src/internal/thread-card/ThreadCardShell.tsx

@@ -14,7 +14,8 @@ import { ChevronIcon } from "./glyphs.js";
  * Three pieces, composed via children (slots-as-children, never a
  * mega-prop card — each thread's composition stays explicit):
  *
- * - {@link ThreadCardShell} — the chrome: bordered card vs divider row,
+ * - {@link ThreadCardShell} — the chrome tier: bordered card, nested divider
+ *   row, or quiet unboxed line ({@link ThreadCardVariant}), plus the
  *   pending-gate accent.
  * - {@link ThreadCardHeader} — the one-line header region with a
  *   primary gesture: `expand` (summary rows, `aria-expanded`, appends
@@ -41,15 +42,25 @@ import { ChevronIcon } from "./glyphs.js";
 // Shell — the card chrome
 // ---------------------------------------------------------------------------
 
+/**
+ * The chrome tier of a thread row (the density axis at the shell level):
+ *
+ * - `"card"` — a self-contained bordered card (the default).
+ * - `"row"` — a divider-separated row for rows nested inside a container
+ *   that already provides the frame (e.g. an expanded `ToolRunGroup` fold),
+ *   avoiding a card-in-a-card.
+ * - `"quiet"` — no chrome at all: an unboxed line for metadata-only rows
+ *   whose header IS the complete information (reads, listings, thoughts).
+ *   The gate accent is deliberately not drawn in this tier — a row carrying
+ *   an accent must be escalated to `"card"` by the caller, never rendered
+ *   as an accented bare line.
+ */
+export type ThreadCardVariant = "card" | "row" | "quiet";
+
 /** Props for {@link ThreadCardShell}. */
 export interface ThreadCardShellProps {
-  /**
-   * Whether the row renders as its own self-contained card (a thin rounded
-   * border). Set to `false` when nested inside a container that already
-   * provides the border — e.g. the folded `ToolRunGroup` chip — where the
-   * row degrades to a divider-separated row to avoid a card-in-a-card.
-   */
-  readonly bordered?: boolean;
+  /** The chrome tier — see {@link ThreadCardVariant}. Defaults to `"card"`. */
+  readonly variant?: ThreadCardVariant;
   /**
    * A restrained left accent for a row awaiting a human decision —
    * `"warning"` for ordinary gates, `"destructive"` for delete gates.
@@ -64,25 +75,31 @@ export interface ThreadCardShellProps {
   readonly children: ReactNode;
 }
 
+const VARIANT_CHROME: Record<Exclude<ThreadCardVariant, "card">, string> = {
+  row: "stg:border-b stg:border-border-muted stg:last:border-b-0",
+  quiet: "",
+};
+
 /** The thread card's outer chrome. See the module doc for the full contract. */
 export function ThreadCardShell({
-  bordered = true,
+  variant = "card",
   accent = null,
   cursorTarget,
   className,
   ref,
   children,
 }: ThreadCardShellProps) {
-  const chrome = bordered
-    ? cn(
-        // border-prominent (not border): a transparent card needs a line the
-        // eye actually catches — the default border token is white at 14%
-        // opacity, which vanishes on the dark thread surface.
-        "stg:rounded-lg stg:border stg:border-border-prominent stg:overflow-hidden",
-        accent === "warning" && "stg:border-l-2 stg:border-l-warning",
-        accent === "destructive" && "stg:border-l-2 stg:border-l-destructive",
-      )
-    : "stg:border-b stg:border-border-muted stg:last:border-b-0";
+  const chrome =
+    variant === "card"
+      ? cn(
+          // border-prominent (not border): a transparent card needs a line the
+          // eye actually catches — the default border token is white at 14%
+          // opacity, which vanishes on the dark thread surface.
+          "stg:rounded-lg stg:border stg:border-border-prominent stg:overflow-hidden",
+          accent === "warning" && "stg:border-l-2 stg:border-l-warning",
+          accent === "destructive" && "stg:border-l-2 stg:border-l-destructive",
+        )
+      : VARIANT_CHROME[variant];
 
   return (
     <div ref={ref} data-cursor-target={cursorTarget} className={cn(chrome, className)}>
@@ -176,13 +193,28 @@ export interface ThreadCardBodyProps {
   readonly id?: string;
   /** Rendered as `data-cursor-target` for e2e targeting. */
   readonly cursorTarget?: string;
+  /**
+   * Body containment for a `"quiet"` shell: with no card border around it, a
+   * disclosed body needs its own boundary — a light left rail (the
+   * `ThinkingMessage` expanded-state precedent) instead of the card's padding
+   * box. Ignored for card/row shells, whose frame already bounds the body.
+   */
+  readonly rail?: boolean;
   readonly children: ReactNode;
 }
 
 /** The thread card's body padding contract. */
-export function ThreadCardBody({ id, cursorTarget, children }: ThreadCardBodyProps) {
+export function ThreadCardBody({ id, cursorTarget, rail = false, children }: ThreadCardBodyProps) {
   return (
-    <div id={id} data-cursor-target={cursorTarget} className="stg:px-2.5 stg:pb-2.5 stg:pt-1">
+    <div
+      id={id}
+      data-cursor-target={cursorTarget}
+      className={
+        rail
+          ? "stg:ml-1.5 stg:border-l-2 stg:border-border-muted stg:py-1 stg:pl-3 stg:pr-2.5"
+          : "stg:px-2.5 stg:pb-2.5 stg:pt-1"
+      }
+    >
       {children}
     </div>
   );

package/src/internal/thread-card/glyphs.tsx

@@ -13,10 +13,31 @@ import { cn } from "@stigmer/theme";
  * @internal Not part of the public API.
  */
 
-/** Quarter-arc spinner for an in-flight item. */
-export function SpinnerIcon() {
+/**
+ * Quarter-arc spinner for an in-flight item. Deliberately finer than the
+ * SDK-wide `internal/SpinnerIcon` (1.5 stroke on a 12 grid vs 2 on 16) —
+ * the micro-row weight this vocabulary is built around. Card-adjacent
+ * surfaces that used to carry their own copies (tool-run groups, file
+ * review, decision buttons) size it up via `size` instead.
+ */
+export function SpinnerIcon({
+  size = 10,
+  className,
+}: {
+  readonly size?: number;
+  readonly className?: string;
+} = {}) {
   return (
-    <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" className="stg:animate-spin">
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      className={cn("stg:animate-spin", className)}
+      aria-hidden="true"
+    >
       <path d="M6 1.5A4.5 4.5 0 1 1 1.5 6" strokeLinecap="round" />
     </svg>
   );

package/src/internal/thread-card/index.ts

@@ -2,6 +2,7 @@ export {
   ThreadCardShell,
   ThreadCardHeader,
   ThreadCardBody,
+  type ThreadCardVariant,
   type ThreadCardShellProps,
   type ThreadCardHeaderProps,
   type ThreadCardHeaderGesture,

package/src/internal/useCopyFeedback.ts

@@ -0,0 +1,61 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+/** How long the transient `copied` flag stays true after a successful copy. */
+const COPIED_FEEDBACK_MS = 2000;
+
+/** Return value of {@link useCopyFeedback}. */
+export interface UseCopyFeedbackReturn {
+  /**
+   * Write `text` to the clipboard. Resolves `true` when the write landed and
+   * `false` when it was rejected (insecure context, denied permission); a
+   * rejected write leaves `copied` false so the affordance never claims a
+   * copy that didn't happen. Callers with a manual fallback (e.g. selecting
+   * the on-screen text for a hand copy) branch on the result; plain
+   * affordances can ignore it.
+   */
+  readonly copy: (text: string) => Promise<boolean>;
+
+  /**
+   * `true` for a brief window after a successful copy (drives "Copied"
+   * affordance feedback), then resets automatically.
+   */
+  readonly copied: boolean;
+}
+
+/**
+ * Behavior hook for the copy-with-feedback shape: write locally-held text to
+ * the clipboard and flash a transient `copied` flag for the affordance swap.
+ *
+ * This is the fetch-free sibling of `useArtifactCopy` (which resolves remote
+ * artifact bytes at click time); use it wherever the text to copy is already
+ * in hand — message content, identifiers, code blocks. One implementation
+ * keeps the feedback window and the unmount-safety identical across surfaces.
+ */
+export function useCopyFeedback(): UseCopyFeedbackReturn {
+  const [copied, setCopied] = useState(false);
+
+  // Clear the pending "copied" timer on unmount so a resolved copy never sets
+  // state on an unmounted component.
+  const copiedTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => {
+    return () => {
+      if (copiedTimer.current !== null) clearTimeout(copiedTimer.current);
+    };
+  }, []);
+
+  const copy = useCallback(async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+      return false;
+    }
+    setCopied(true);
+    if (copiedTimer.current !== null) clearTimeout(copiedTimer.current);
+    copiedTimer.current = setTimeout(() => setCopied(false), COPIED_FEEDBACK_MS);
+    return true;
+  }, []);
+
+  return useMemo(() => ({ copy, copied }), [copy, copied]);
+}

package/src/invitation/InvitationCreatedAlert.tsx

@@ -1,7 +1,9 @@
 "use client";
 
-import { useCallback, useState } from "react";
+import { useCallback, useRef } from "react";
 import { cn } from "@stigmer/theme";
+import { selectElementText } from "../internal/select-element-text.js";
+import { useCopyFeedback } from "../internal/useCopyFeedback.js";
 
 // ---------------------------------------------------------------------------
 // Public API
@@ -47,24 +49,14 @@ export function InvitationCreatedAlert({
   onDismiss,
   className,
 }: InvitationCreatedAlertProps) {
-  const [copied, setCopied] = useState(false);
+  const { copy, copied } = useCopyFeedback();
+  const revealRef = useRef<HTMLElement>(null);
 
   const handleCopy = useCallback(async () => {
-    try {
-      await navigator.clipboard.writeText(inviteUrl);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch {
-      const el = document.getElementById("stgm-invite-url-reveal");
-      if (el) {
-        const selection = window.getSelection();
-        const range = document.createRange();
-        range.selectNodeContents(el);
-        selection?.removeAllRanges();
-        selection?.addRange(range);
-      }
-    }
-  }, [inviteUrl]);
+    if (await copy(inviteUrl)) return;
+    // Rejected write: select the revealed URL so the user can copy manually.
+    if (revealRef.current) selectElementText(revealRef.current);
+  }, [copy, inviteUrl]);
 
   return (
     <div
@@ -99,7 +91,7 @@ export function InvitationCreatedAlert({
 
       <div className="stg:flex stg:items-center stg:gap-2">
         <code
-          id="stgm-invite-url-reveal"
+          ref={revealRef}
           className={cn(
             "stg:min-w-0 stg:flex-1 stg:select-all stg:truncate stg:rounded-md",
             "stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5",

package/src/invitation/InvitationManager.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useState, type FormEvent } from "react";
+import { useCallback, useId, useState, type FormEvent } from "react";
 import { cn } from "@stigmer/theme";
 import {
   getUserMessage,
@@ -17,6 +17,8 @@ import { useRevokeInvitation } from "./useRevokeInvitation.js";
 import { InvitationCreatedAlert } from "./InvitationCreatedAlert.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { RoleSelector } from "../iam-policy/RoleSelector.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
+import { useCopyFeedback } from "../internal/useCopyFeedback.js";
 
 // ---------------------------------------------------------------------------
 // Public API
@@ -230,6 +232,7 @@ function CreateInvitationForm({
   onCancel: () => void;
 }) {
   const { create, isCreating, error, clearError } = useCreateInvitation();
+  const baseId = useId();
 
   const [label, setLabel] = useState("");
   const [role, setRole] = useState<IamRole>(IamRole.viewer);
@@ -266,14 +269,14 @@ function CreateInvitationForm({
       {/* Label */}
       <div className="stg:space-y-1">
         <label
-          htmlFor="stgm-new-invite-label"
+          htmlFor={`${baseId}-label`}
           className="stg:text-xs stg:font-medium stg:text-foreground"
         >
           Label{" "}
           <span className="stg:font-normal stg:text-muted-foreground">(optional)</span>
         </label>
         <input
-          id="stgm-new-invite-label"
+          id={`${baseId}-label`}
           type="text"
           value={label}
           onChange={(e) => setLabel(e.target.value)}
@@ -304,9 +307,12 @@ function CreateInvitationForm({
           Expires in
         </legend>
         <div className="stg:flex stg:flex-wrap stg:gap-2">
+          {/* Radio-group names are minted per mount: a hardcoded name would
+              merge two mounted forms into one keyboard group. */}
           {EXPIRY_OPTIONS.map(({ value, label: optLabel }) => (
             <ExpiryRadio
               key={value}
+              name={`${baseId}-expiry`}
               value={value}
               label={optLabel}
               checked={expiry === value}
@@ -324,6 +330,7 @@ function CreateInvitationForm({
         </legend>
         <div className="stg:flex stg:flex-wrap stg:gap-2">
           <RedemptionRadio
+            name={`${baseId}-redemption`}
             value="unlimited"
             label="Unlimited"
             description="Anyone with the link can join"
@@ -332,6 +339,7 @@ function CreateInvitationForm({
             onChange={setRedemptionMode}
           />
           <RedemptionRadio
+            name={`${baseId}-redemption`}
             value="single"
             label="Single use"
             description="One person only"
@@ -358,7 +366,7 @@ function CreateInvitationForm({
             "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
-          {isCreating && <SpinnerIcon />}
+          {isCreating && <SpinnerIcon size={12} />}
           Create invite link
         </button>
 
@@ -398,7 +406,7 @@ function InvitationRow({
   onCancelRevoke: () => void;
   onRevoked: () => void;
 }) {
-  const [copied, setCopied] = useState(false);
+  const { copy, copied } = useCopyFeedback();
 
   const id = invitation.metadata?.id ?? "";
   const label = invitation.spec?.label || invitation.metadata?.name || "Unnamed invite";
@@ -410,15 +418,9 @@ function InvitationRow({
   const expiresAt = invitation.spec?.expiresAt;
   const isActive = state === InvitationState.active;
 
-  const handleCopy = useCallback(async () => {
-    try {
-      await navigator.clipboard.writeText(buildInviteUrl(token));
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch {
-      // silently fail — copy is a convenience, not critical
-    }
-  }, [token, buildInviteUrl]);
+  const handleCopy = useCallback(() => {
+    void copy(buildInviteUrl(token));
+  }, [copy, token, buildInviteUrl]);
 
   if (isRevoking) {
     return (
@@ -572,7 +574,7 @@ function RevokeConfirmation({
             "stg:disabled:pointer-events-none stg:disabled:opacity-50",
           )}
         >
-          {isRevoking && <SpinnerIcon />}
+          {isRevoking && <SpinnerIcon size={12} />}
           Revoke
         </button>
         <button
@@ -638,12 +640,14 @@ const STATE_BADGE_CONFIG: Record<InvitationState, { label: string; className: st
 // ---------------------------------------------------------------------------
 
 function ExpiryRadio({
+  name,
   value,
   label,
   checked,
   disabled,
   onChange,
 }: {
+  name: string;
   value: ExpiryOption;
   label: string;
   checked: boolean;
@@ -662,7 +666,7 @@ function ExpiryRadio({
     >
       <input
         type="radio"
-        name="stgm-invite-expiry"
+        name={name}
         value={value}
         checked={checked}
         disabled={disabled}
@@ -675,6 +679,7 @@ function ExpiryRadio({
 }
 
 function RedemptionRadio({
+  name,
   value,
   label,
   description,
@@ -682,6 +687,7 @@ function RedemptionRadio({
   disabled,
   onChange,
 }: {
+  name: string;
   value: RedemptionMode;
   label: string;
   description: string;
@@ -701,7 +707,7 @@ function RedemptionRadio({
     >
       <input
         type="radio"
-        name="stgm-invite-redemption"
+        name={name}
         value={value}
         checked={checked}
         disabled={disabled}
@@ -836,20 +842,3 @@ function RevokeIcon() {
   );
 }
 
-function SpinnerIcon() {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      className="stg:animate-spin"
-      aria-hidden="true"
-    >
-      <path d="M8 2a6 6 0 1 0 6 6" />
-    </svg>
-  );
-}