@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

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

@@ -78,11 +78,11 @@ export function ThreadCardShell({
         // 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.
-        "rounded-lg border border-border-prominent overflow-hidden",
-        accent === "warning" && "border-l-2 border-l-warning",
-        accent === "destructive" && "border-l-2 border-l-destructive",
+        "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",
       )
-    : "border-b border-border-muted last:border-b-0";
+    : "stg:border-b stg:border-border-muted stg:last:border-b-0";
 
   return (
     <div ref={ref} data-cursor-target={cursorTarget} className={cn(chrome, className)}>
@@ -118,13 +118,13 @@ export interface ThreadCardHeaderProps {
   readonly children: ReactNode;
 }
 
-const HEADER_LAYOUT = "flex w-full items-center gap-2 px-2.5 py-1.5 text-xs";
+const HEADER_LAYOUT = "stg:flex stg:w-full stg:items-center stg:gap-2 stg:px-2.5 stg:py-1.5 stg:text-xs";
 
 const HEADER_INTERACTIVE = cn(
-  "cursor-pointer text-left transition-colors",
-  "hover:bg-muted-subtle",
+  "stg:cursor-pointer stg:text-left stg:transition-colors",
+  "stg:hover:bg-muted-subtle",
   // ring-inset so the card's overflow-hidden does not clip the focus ring.
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+  "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring",
 );
 
 /** The thread card's one-line header. See the module doc for the contract. */
@@ -157,7 +157,7 @@ export function ThreadCardHeader({
       className={cn(
         HEADER_LAYOUT,
         HEADER_INTERACTIVE,
-        gesture.expanded && "bg-muted-faint",
+        gesture.expanded && "stg:bg-muted-faint",
       )}
     >
       {children}
@@ -182,7 +182,7 @@ export interface ThreadCardBodyProps {
 /** The thread card's body padding contract. */
 export function ThreadCardBody({ id, cursorTarget, children }: ThreadCardBodyProps) {
   return (
-    <div id={id} data-cursor-target={cursorTarget} className="px-2.5 pb-2.5 pt-1">
+    <div id={id} data-cursor-target={cursorTarget} className="stg:px-2.5 stg:pb-2.5 stg:pt-1">
       {children}
     </div>
   );

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

@@ -16,7 +16,7 @@ import { cn } from "@stigmer/theme";
 /** Quarter-arc spinner for an in-flight item. */
 export function SpinnerIcon() {
   return (
-    <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" className="animate-spin">
+    <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" className="stg:animate-spin">
       <path d="M6 1.5A4.5 4.5 0 1 1 1.5 6" strokeLinecap="round" />
     </svg>
   );
@@ -97,8 +97,8 @@ export function ChevronIcon({ expanded }: { readonly expanded: boolean }) {
       strokeLinecap="round"
       strokeLinejoin="round"
       className={cn(
-        "shrink-0 text-muted-foreground transition-transform duration-150",
-        expanded && "rotate-90",
+        "stg:shrink-0 stg:text-muted-foreground stg:transition-transform stg:duration-150",
+        expanded && "stg:rotate-90",
       )}
       aria-hidden="true"
     >

package/src/internal/tooltip.tsx

@@ -40,23 +40,21 @@ function TooltipContent({
   const portalContainer = useStigmerPortalContainer();
 
   return (
-    // `?? undefined`, never a raw null: Base UI treats an EXPLICIT null
-    // container as "wait for one" and renders the popup nowhere, while
-    // undefined falls back to document.body — the standalone behavior
-    // `useStigmerPortalContainer` documents. Without the coalesce, a
-    // tooltip outside a StigmerProvider opens invisibly.
-    <TooltipPrimitive.Portal container={portalContainer ?? undefined}>
+    // Raw pass-through, no coalescing: the hook's three-state return
+    // (undefined / null / element) maps exactly onto Base UI's
+    // `container` semantics — see `useStigmerPortalContainer`.
+    <TooltipPrimitive.Portal container={portalContainer}>
       <TooltipPrimitive.Positioner
-        className="isolate z-50 outline-none"
+        className="stg:isolate stg:z-50 stg:outline-none"
         side={side}
         sideOffset={sideOffset}
       >
         <TooltipPrimitive.Popup
           className={cn(
-            "bg-popover text-popover-foreground ring-foreground/10 z-50 max-w-64 rounded-lg px-2.5 py-1.5 text-sm shadow-md ring-1",
-            "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
-            "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-            "duration-100",
+            "stg:bg-popover stg:text-popover-foreground stg:ring-foreground/10 stg:z-50 stg:max-w-64 stg:rounded-lg stg:px-2.5 stg:py-1.5 stg:text-sm stg:shadow-md stg:ring-1",
+            "stg:data-open:animate-in stg:data-open:fade-in-0 stg:data-open:zoom-in-95",
+            "stg:data-closed:animate-out stg:data-closed:fade-out-0 stg:data-closed:zoom-out-95",
+            "stg:duration-100",
             className,
           )}
           {...props}

package/src/internal/truncated-text.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@stigmer/theme";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+
+// ---------------------------------------------------------------------------
+// SDK-internal truncated-text span with an overflow-gated house tooltip.
+//
+// Replaces the `title={fullValue}` idiom on truncated cells (paths, hashes,
+// model ids, …) after the native-title sweep (stigmer/stigmer-cloud#268).
+// Native titles were OS-delayed and fired whether or not the text was
+// actually clipped; this helper opens the house tooltip ONLY when the text
+// truly overflows its box, checked at open time — a non-truncated cell
+// stays tooltip-free.
+//
+// The trigger is a plain, non-focusable span (the StatusHint precedent in
+// ConversationTimelineView): CSS truncation is purely visual, so the full
+// text is already in the DOM for screen readers and selection — the tooltip
+// is a sighted-pointer convenience, and a tab stop per table cell would be
+// noise. Works with or without a `TooltipProvider` in scope (the provider
+// only adds delay grouping); like ./tooltip.tsx, NOT exported from
+// @stigmer/react.
+// ---------------------------------------------------------------------------
+
+interface TruncatedTextProps {
+  /** The full value: rendered inside the span and shown by the tooltip. */
+  readonly text: string;
+  /**
+   * Classes for the truncating span. `stg:truncate` is applied by default;
+   * pass a `stg:line-clamp-*` class instead for multi-line clamping (the
+   * overflow check covers both axes).
+   */
+  readonly className?: string;
+  /** Tooltip placement; truncated cells read best with the default "top". */
+  readonly side?: React.ComponentProps<typeof TooltipContent>["side"];
+}
+
+/** True when CSS actually clipped the element on either axis. */
+function isOverflowing(el: HTMLElement): boolean {
+  return el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight;
+}
+
+export function TruncatedText({ text, className, side = "top" }: TruncatedTextProps) {
+  const spanRef = React.useRef<HTMLSpanElement>(null);
+  const [open, setOpen] = React.useState(false);
+
+  const handleOpenChange = React.useCallback((nextOpen: boolean) => {
+    if (nextOpen && spanRef.current && !isOverflowing(spanRef.current)) {
+      return; // Nothing is clipped — the tooltip would only repeat the cell.
+    }
+    setOpen(nextOpen);
+  }, []);
+
+  return (
+    <Tooltip open={open} onOpenChange={handleOpenChange}>
+      <TooltipTrigger
+        render={
+          <span
+            ref={spanRef}
+            className={cn(
+              // A plain inline span can neither truncate (overflow does not
+              // apply to inline boxes) nor be measured (clientWidth is 0 by
+              // spec), so the span defaults to block; cn()'s conflict
+              // resolution lets callers override with their own display
+              // class (inline-block, flex-1 cells, …).
+              "stg:block",
+              className?.match(/(?:^|\s)stg:line-clamp-/) ? undefined : "stg:truncate",
+              className,
+            )}
+          />
+        }
+      >
+        {text}
+      </TooltipTrigger>
+      <TooltipContent side={side} className="stg:break-all">
+        {text}
+      </TooltipContent>
+    </Tooltip>
+  );
+}

package/src/invitation/InvitationCreatedAlert.tsx

@@ -70,16 +70,16 @@ export function InvitationCreatedAlert({
     <div
       role="alert"
       className={cn(
-        "rounded-lg border border-primary/30 bg-primary-subtle p-4",
+        "stg:rounded-lg stg:border stg:border-primary/30 stg:bg-primary-subtle stg:p-4",
         className,
       )}
     >
-      <div className="mb-2 flex items-start justify-between gap-3">
-        <div className="min-w-0">
-          <p className="text-sm font-medium text-foreground">
+      <div className="stg:mb-2 stg:flex stg:items-start stg:justify-between stg:gap-3">
+        <div className="stg:min-w-0">
+          <p className="stg:text-sm stg:font-medium stg:text-foreground">
             Invite link created: {label}
           </p>
-          <p className="mt-0.5 text-xs text-muted-foreground">
+          <p className="stg:mt-0.5 stg:text-xs stg:text-muted-foreground">
             Share this link to invite people to your organization.
           </p>
         </div>
@@ -88,22 +88,22 @@ export function InvitationCreatedAlert({
           onClick={onDismiss}
           aria-label="Dismiss"
           className={cn(
-            "shrink-0 rounded p-1",
-            "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-            "transition-colors",
+            "stg:shrink-0 stg:rounded stg:p-1",
+            "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+            "stg:transition-colors",
           )}
         >
           <CloseIcon />
         </button>
       </div>
 
-      <div className="flex items-center gap-2">
+      <div className="stg:flex stg:items-center stg:gap-2">
         <code
           id="stgm-invite-url-reveal"
           className={cn(
-            "min-w-0 flex-1 select-all truncate rounded-md",
-            "border border-input bg-background px-2.5 py-1.5",
-            "font-mono text-xs text-foreground",
+            "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",
+            "stg:font-mono stg:text-xs stg:text-foreground",
           )}
         >
           {inviteUrl}
@@ -113,9 +113,9 @@ export function InvitationCreatedAlert({
           type="button"
           onClick={handleCopy}
           className={cn(
-            "inline-flex shrink-0 items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
-            "bg-primary text-primary-foreground hover:bg-primary-hover",
-            "transition-colors",
+            "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",
+            "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover",
+            "stg:transition-colors",
           )}
         >
           {copied ? <CheckIcon /> : <CopyIcon />}