@stigmer/react 3.12.1 → 3.12.2

package/src/organization/CreateOrganizationForm.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useRef, useState, type FormEvent } from "react";
+import { type FormEvent, useCallback, useId, useRef, useState } from "react";
 import { create as createMessage } from "@bufbuild/protobuf";
 import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
@@ -9,6 +9,7 @@ import { ApiResourceMetadataSchema } from "@stigmer/protos/ai/stigmer/commons/ap
 import { useCreateOrganization } from "./useCreateOrganization.js";
 import { generateSlug } from "../internal/slug.js";
 import { validateMessage, getFieldError } from "../internal/validate.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 // ---------------------------------------------------------------------------
 // Public API
@@ -47,6 +48,7 @@ export function CreateOrganizationForm({
   onCancel,
   className,
 }: CreateOrganizationFormProps) {
+  const baseId = useId();
   const { create, isCreating, error, clearError } = useCreateOrganization();
 
   const [name, setName] = useState("");
@@ -120,13 +122,13 @@ export function CreateOrganizationForm({
         {/* ---- Name ---- */}
         <div className="stg:space-y-1">
           <label
-            htmlFor="stgm-new-org-name"
+            htmlFor={`${baseId}-name`}
             className="stg:text-xs stg:font-medium stg:text-foreground"
           >
             Name
           </label>
           <input
-            id="stgm-new-org-name"
+            id={`${baseId}-name`}
             type="text"
             value={name}
             onChange={(e) => handleNameChange(e.target.value)}
@@ -157,13 +159,13 @@ export function CreateOrganizationForm({
         {/* ---- Slug ---- */}
         <div className="stg:space-y-1">
           <label
-            htmlFor="stgm-new-org-slug"
+            htmlFor={`${baseId}-slug`}
             className="stg:text-xs stg:font-medium stg:text-foreground"
           >
             Slug
           </label>
           <input
-            id="stgm-new-org-slug"
+            id={`${baseId}-slug`}
             type="text"
             value={slug}
             onChange={(e) => handleSlugChange(e.target.value)}
@@ -195,14 +197,14 @@ export function CreateOrganizationForm({
         {/* ---- Description ---- */}
         <div className="stg:space-y-1">
           <label
-            htmlFor="stgm-new-org-desc"
+            htmlFor={`${baseId}-desc`}
             className="stg:text-xs stg:font-medium stg:text-muted-foreground"
           >
             Description{" "}
             <span className="stg:text-muted-foreground-subtle">(optional)</span>
           </label>
           <input
-            id="stgm-new-org-desc"
+            id={`${baseId}-desc`}
             type="text"
             value={description}
             onChange={(e) => setDescription(e.target.value)}
@@ -234,7 +236,7 @@ export function CreateOrganizationForm({
             "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
-          {isCreating && <SpinnerIcon />}
+          {isCreating && <SpinnerIcon size={12} />}
           Create organization
         </button>
 
@@ -257,24 +259,3 @@ export function CreateOrganizationForm({
   );
 }
 
-// ---------------------------------------------------------------------------
-// Icons
-// ---------------------------------------------------------------------------
-
-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>
-  );
-}

package/src/organization/OrgProfilePanel.tsx

@@ -1,12 +1,6 @@
 "use client";
 
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-  type FormEvent,
-} from "react";
+import { type FormEvent, useCallback, useEffect, useId, useMemo, useState } from "react";
 import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import type { Organization } from "@stigmer/protos/ai/stigmer/tenancy/organization/v1/api_pb";
@@ -14,6 +8,8 @@ import { useOrganization } from "./useOrganization.js";
 import { useUpdateOrganization } from "./useUpdateOrganization.js";
 import { useIdentityProviderList } from "../identity-provider/useIdentityProviderList.js";
 import { useResourceAvailable, ApiResourceKind } from "../deployment-mode.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
+import { useCopyFeedback } from "../internal/useCopyFeedback.js";
 
 // ---------------------------------------------------------------------------
 // Constants
@@ -60,6 +56,7 @@ export function OrgProfilePanel({
   onUpdated,
   className,
 }: OrgProfilePanelProps) {
+  const baseId = useId();
   const {
     organization,
     isLoading: isFetching,
@@ -223,13 +220,13 @@ export function OrgProfilePanel({
         {/* Name */}
         <div className="stg:space-y-1">
           <label
-            htmlFor="stgm-org-profile-name"
+            htmlFor={`${baseId}-name`}
             className="stg:text-xs stg:font-medium stg:text-foreground"
           >
             Name
           </label>
           <input
-            id="stgm-org-profile-name"
+            id={`${baseId}-name`}
             type="text"
             value={name}
             onChange={(e) => setName(e.target.value)}
@@ -250,13 +247,13 @@ export function OrgProfilePanel({
         {/* Description */}
         <div className="stg:space-y-1">
           <label
-            htmlFor="stgm-org-profile-desc"
+            htmlFor={`${baseId}-desc`}
             className="stg:text-xs stg:font-medium stg:text-foreground"
           >
             Description
           </label>
           <textarea
-            id="stgm-org-profile-desc"
+            id={`${baseId}-desc`}
             value={description}
             onChange={(e) => setDescription(e.target.value)}
             maxLength={DESCRIPTION_MAX_LEN}
@@ -278,13 +275,13 @@ export function OrgProfilePanel({
         {/* Logo URL */}
         <div className="stg:space-y-1">
           <label
-            htmlFor="stgm-org-profile-logo"
+            htmlFor={`${baseId}-logo`}
             className="stg:text-xs stg:font-medium stg:text-foreground"
           >
             Logo URL
           </label>
           <input
-            id="stgm-org-profile-logo"
+            id={`${baseId}-logo`}
             type="url"
             value={logoUrl}
             onChange={(e) => setLogoUrl(e.target.value)}
@@ -323,7 +320,7 @@ export function OrgProfilePanel({
             "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
-          {isUpdating && <SpinnerIcon />}
+          {isUpdating && <SpinnerIcon size={12} />}
           Save changes
         </button>
 
@@ -453,14 +450,7 @@ function ReadOnlyField({
   value: string;
   mono?: boolean;
 }) {
-  const [copied, setCopied] = useState(false);
-
-  const handleCopy = useCallback(() => {
-    navigator.clipboard.writeText(value).then(() => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1500);
-    });
-  }, [value]);
+  const { copy, copied } = useCopyFeedback();
 
   if (!value) return null;
 
@@ -480,7 +470,7 @@ function ReadOnlyField({
         </span>
         <button
           type="button"
-          onClick={handleCopy}
+          onClick={() => void copy(value)}
           className={cn(
             "stg:rounded stg:px-1.5 stg:py-0.5 stg:text-[0.6rem]",
             "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
@@ -525,24 +515,3 @@ function LogoPreview({ url }: { url: string }) {
   );
 }
 
-// ---------------------------------------------------------------------------
-// SpinnerIcon
-// ---------------------------------------------------------------------------
-
-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>
-  );
-}

package/src/platform-client/CreatePlatformClientForm.tsx

@@ -1,16 +1,12 @@
 "use client";
 
-import {
-  useCallback,
-  useState,
-  type FormEvent,
-  type KeyboardEvent,
-} from "react";
+import { type FormEvent, type KeyboardEvent, useCallback, useId, useState } from "react";
 import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import { IamRole } from "@stigmer/protos/ai/stigmer/iam/v1/enum_pb";
 import type { PlatformClientCreateResponse } from "@stigmer/protos/ai/stigmer/iam/platformclient/v1/io_pb";
 import { useCreatePlatformClient } from "./useCreatePlatformClient.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 /** Props for {@link CreatePlatformClientForm}. */
 export interface CreatePlatformClientFormProps {
@@ -58,6 +54,7 @@ export function CreatePlatformClientForm({
   onCancel,
   className,
 }: CreatePlatformClientFormProps) {
+  const baseId = useId();
   const { create, isCreating, error, clearError } =
     useCreatePlatformClient();
 
@@ -160,7 +157,7 @@ export function CreatePlatformClientForm({
   return (
     <form onSubmit={handleSubmit} className={cn("stg:space-y-3", className)}>
       <FormField
-        id="stgm-pc-name"
+        id={`${baseId}-name`}
         label="Name"
         value={name}
         onChange={setName}
@@ -183,13 +180,13 @@ export function CreatePlatformClientForm({
         {!neverExpires && (
           <div className="stg:space-y-1">
             <label
-              htmlFor="stgm-pc-expires-at"
+              htmlFor={`${baseId}-expires-at`}
               className="stg:text-xs stg:font-medium stg:text-foreground"
             >
               Expires at
             </label>
             <input
-              id="stgm-pc-expires-at"
+              id={`${baseId}-expires-at`}
               type="datetime-local"
               value={expiresAt}
               onChange={(e) => setExpiresAt(e.target.value)}
@@ -234,13 +231,13 @@ export function CreatePlatformClientForm({
         {autoGrant && (
           <div className="stg:space-y-1">
             <label
-              htmlFor="stgm-pc-grant-role"
+              htmlFor={`${baseId}-grant-role`}
               className="stg:text-xs stg:font-medium stg:text-foreground"
             >
               Auto-grant role
             </label>
             <select
-              id="stgm-pc-grant-role"
+              id={`${baseId}-grant-role`}
               value={String(autoGrantRole)}
               onChange={(e) =>
                 setAutoGrantRole(Number(e.target.value) as IamRole)
@@ -348,7 +345,7 @@ export function CreatePlatformClientForm({
             "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
-          {isCreating && <SpinnerIcon />}
+          {isCreating && <SpinnerIcon size={12} />}
           Create platform client
         </button>
 
@@ -500,20 +497,3 @@ function XIcon() {
   );
 }
 
-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>
-  );
-}

package/src/platform-client/PlatformClientDetailPanel.tsx

@@ -1,11 +1,6 @@
 "use client";
 
-import {
-  useCallback,
-  useState,
-  type FormEvent,
-  type KeyboardEvent,
-} from "react";
+import { type FormEvent, type KeyboardEvent, useCallback, useId, useState } from "react";
 import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import { IamRole } from "@stigmer/protos/ai/stigmer/iam/v1/enum_pb";
@@ -15,6 +10,7 @@ import type { PlatformClientCreateResponse } from "@stigmer/protos/ai/stigmer/ia
 import { useUpdatePlatformClient } from "./useUpdatePlatformClient.js";
 import { useRotatePlatformClientSecret } from "./useRotatePlatformClientSecret.js";
 import { useDeletePlatformClient } from "./useDeletePlatformClient.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 /** Props for {@link PlatformClientDetailPanel}. */
 export interface PlatformClientDetailPanelProps {
@@ -74,6 +70,7 @@ export function PlatformClientDetailPanel({
   onBack,
   className,
 }: PlatformClientDetailPanelProps) {
+  const baseId = useId();
   const spec = platformClient.spec;
   const meta = platformClient.metadata;
 
@@ -318,13 +315,13 @@ export function PlatformClientDetailPanel({
             {!neverExpires && (
               <div className="stg:space-y-1">
                 <label
-                  htmlFor="stgm-pc-edit-expires-at"
+                  htmlFor={`${baseId}-expires-at`}
                   className="stg:text-xs stg:font-medium stg:text-foreground"
                 >
                   Expires at
                 </label>
                 <input
-                  id="stgm-pc-edit-expires-at"
+                  id={`${baseId}-expires-at`}
                   type="datetime-local"
                   value={expiresAt}
                   onChange={(e) => setExpiresAt(e.target.value)}
@@ -365,13 +362,13 @@ export function PlatformClientDetailPanel({
             {autoGrant && (
               <div className="stg:space-y-1">
                 <label
-                  htmlFor="stgm-pc-edit-grant-role"
+                  htmlFor={`${baseId}-grant-role`}
                   className="stg:text-xs stg:font-medium stg:text-foreground"
                 >
                   Auto-grant role
                 </label>
                 <select
-                  id="stgm-pc-edit-grant-role"
+                  id={`${baseId}-grant-role`}
                   value={String(autoGrantRole)}
                   onChange={(e) =>
                     setAutoGrantRole(
@@ -478,7 +475,7 @@ export function PlatformClientDetailPanel({
                 "stg:disabled:pointer-events-none stg:disabled:opacity-40",
               )}
             >
-              {isUpdating && <SpinnerIcon />}
+              {isUpdating && <SpinnerIcon size={12} />}
               Save changes
             </button>
             <button
@@ -520,7 +517,7 @@ export function PlatformClientDetailPanel({
                     "stg:disabled:pointer-events-none stg:disabled:opacity-50",
                   )}
                 >
-                  {isRotating && <SpinnerIcon />}
+                  {isRotating && <SpinnerIcon size={12} />}
                   Rotate
                 </button>
                 <button
@@ -587,7 +584,7 @@ export function PlatformClientDetailPanel({
                     "stg:disabled:pointer-events-none stg:disabled:opacity-50",
                   )}
                 >
-                  {isDeleting && <SpinnerIcon />}
+                  {isDeleting && <SpinnerIcon size={12} />}
                   Delete
                 </button>
                 <button
@@ -879,20 +876,3 @@ function ArrowLeftIcon() {
   );
 }
 
-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>
-  );
-}

package/src/platform-client/PlatformClientListPanel.tsx

@@ -8,6 +8,7 @@ import type { PlatformClient } from "@stigmer/protos/ai/stigmer/iam/platformclie
 import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { usePlatformClientList } from "./usePlatformClientList.js";
 import { useDeletePlatformClient } from "./useDeletePlatformClient.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
 /** Props for {@link PlatformClientListPanel}. */
 export interface PlatformClientListPanelProps {
@@ -200,7 +201,7 @@ function PlatformClientRow({
               "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           >
-            {isDeleting && <SpinnerIcon />}
+            {isDeleting && <SpinnerIcon size={12} />}
             Delete
           </button>
           <button
@@ -411,20 +412,3 @@ function TrashIcon() {
   );
 }
 
-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>
-  );
-}

package/src/platform-client/PlatformClientSecretAlert.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";
 
 /** Props for {@link PlatformClientSecretAlert}. */
 export interface PlatformClientSecretAlertProps {
@@ -17,8 +19,6 @@ export interface PlatformClientSecretAlertProps {
   readonly className?: string;
 }
 
-const COPIED_FEEDBACK_MS = 2000;
-
 /**
  * One-time reveal component displayed after a platform client is
  * created or its secret is rotated.
@@ -50,34 +50,6 @@ export function PlatformClientSecretAlert({
   onDismiss,
   className,
 }: PlatformClientSecretAlertProps) {
-  const [copiedField, setCopiedField] = useState<
-    "id" | "secret" | null
-  >(null);
-
-  const handleCopy = useCallback(
-    async (value: string, field: "id" | "secret") => {
-      try {
-        await navigator.clipboard.writeText(value);
-        setCopiedField(field);
-        setTimeout(() => setCopiedField(null), COPIED_FEEDBACK_MS);
-      } catch {
-        const el = document.getElementById(
-          field === "secret"
-            ? "stgm-pc-secret-reveal"
-            : "stgm-pc-client-id-reveal",
-        );
-        if (el) {
-          const selection = window.getSelection();
-          const range = document.createRange();
-          range.selectNodeContents(el);
-          selection?.removeAllRanges();
-          selection?.addRange(range);
-        }
-      }
-    },
-    [],
-  );
-
   const title =
     context === "created"
       ? "Platform client created"
@@ -114,30 +86,14 @@ export function PlatformClientSecretAlert({
 
       <div className="stg:space-y-2">
         <CopyableField
-          id="stgm-pc-client-id-reveal"
           label="Client ID"
           value={clientId}
-          copied={copiedField === "id"}
-          onCopy={() => handleCopy(clientId, "id")}
         />
         <CopyableField
-          id="stgm-pc-secret-reveal"
           label="Client secret"
           value={clientSecret}
-          copied={copiedField === "secret"}
-          onCopy={() => handleCopy(clientSecret, "secret")}
         />
       </div>
-
-      <div
-        role="status"
-        aria-live="polite"
-        aria-atomic="true"
-        className="stg:sr-only"
-      >
-        {copiedField === "id" && "Client ID copied to clipboard"}
-        {copiedField === "secret" && "Client secret copied to clipboard"}
-      </div>
     </div>
   );
 }
@@ -147,18 +103,24 @@ export function PlatformClientSecretAlert({
 // ---------------------------------------------------------------------------
 
 function CopyableField({
-  id,
   label,
   value,
-  copied,
-  onCopy,
 }: {
-  id: string;
   label: string;
   value: string;
-  copied: boolean;
-  onCopy: () => void;
 }) {
+  // Each field owns its feedback: the copied flag and the select-text
+  // fallback belong to the markup they describe, so two fields never
+  // share (and race on) one parent-level "which field copied" state.
+  const { copy, copied } = useCopyFeedback();
+  const revealRef = useRef<HTMLElement>(null);
+
+  const handleCopy = useCallback(async () => {
+    if (await copy(value)) return;
+    // Rejected write: select the revealed value so the user can copy manually.
+    if (revealRef.current) selectElementText(revealRef.current);
+  }, [copy, value]);
+
   return (
     <div>
       <span className="stg:text-[0.65rem] stg:font-medium stg:text-muted-foreground">
@@ -166,7 +128,7 @@ function CopyableField({
       </span>
       <div className="stg:mt-0.5 stg:flex stg:items-center stg:gap-2">
         <code
-          id={id}
+          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",
@@ -177,7 +139,7 @@ function CopyableField({
         </code>
         <button
           type="button"
-          onClick={onCopy}
+          onClick={() => void handleCopy()}
           aria-label={`Copy ${label}`}
           className={cn(
             "stg:inline-flex stg:shrink-0 stg:items-center stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium",
@@ -189,6 +151,15 @@ function CopyableField({
           {copied ? "Copied" : "Copy"}
         </button>
       </div>
+
+      <div
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+        className="stg:sr-only"
+      >
+        {copied && `${label} copied to clipboard`}
+      </div>
     </div>
   );
 }