@stigmer/react 3.9.0 → 3.11.0

package/src/__tests__/styles-host-isolation.layout.test.tsx

@@ -0,0 +1,204 @@
+// Real-browser reproduction of stigmer/stigmer#454: loading the shipped SDK
+// stylesheet must not change a HOST application's computed layout — outside
+// OR inside the `StigmerProvider` subtree.
+//
+// The pre-#454 stylesheet emitted bare Tailwind utilities (`.grid-cols-1`,
+// `.relative`) inside `@layer stgm`, which the SDK's own layer-order
+// declaration pins ABOVE the host's `utilities` layer. Any host element
+// pairing a base utility with a variant override of the same property lost
+// the variant the moment the stylesheet loaded — permanently, regardless of
+// load order. Observed in production: Stigmer Law's case-detail facts rail
+// (`grid-cols-1 @xl:grid-cols-[...]`) collapsed to one column at every width,
+// and its phone sheet lost `position: fixed` (`relative max-lg:fixed`).
+//
+// Since #454 every SDK utility carries the `stg:` prefix, so the shipped
+// stylesheet shares no class names with the host. This suite renders the
+// exact breakage shapes from the issue against the SHIPPED `dist/styles.css`
+// (built by `npm run build:libs`) plus a simulated host-Tailwind stylesheet,
+// and measures computed layout in a real Chromium — happy-dom cannot resolve
+// `@layer` or container queries.
+
+import "../../dist/styles.css";
+
+import { describe, it, expect, afterEach, beforeEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import type { Stigmer } from "@stigmer/sdk";
+import { StigmerProvider } from "../provider";
+
+/**
+ * What a host's own Tailwind v4 build emits for the issue's two breakage
+ * shapes: the standard layer-order declaration, base utilities and their
+ * variant overrides in `@layer utilities`. Kept byte-faithful to Tailwind's
+ * emission (same layer names, same rule shapes) so the cascade under test is
+ * the real embedding cascade.
+ */
+const HOST_TAILWIND_CSS = `
+  @layer theme, base, components, utilities;
+  @layer utilities {
+    .\\@container { container-type: inline-size; }
+    .grid { display: grid; }
+    .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+    .relative { position: relative; }
+    @container (width >= 36rem) {
+      .\\@xl\\:grid-cols-\\[600px_1fr\\] { grid-template-columns: 600px 1fr; }
+    }
+    @media (width < 64rem) {
+      .max-lg\\:fixed { position: fixed; }
+    }
+  }
+`;
+
+/**
+ * The PRE-#454 SDK emission shape: a bare shared-name utility inside
+ * `@layer stgm`, declared last. Injected only by the negative control to
+ * prove this suite measures the defect mechanism.
+ */
+const LEGACY_SDK_LEAK_CSS = `
+  @layer theme, base, components, utilities, stgm;
+  @layer stgm {
+    .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+    .relative { position: relative; }
+  }
+`;
+
+const injectedStyles: HTMLStyleElement[] = [];
+
+function injectStyle(css: string): void {
+  const el = document.createElement("style");
+  el.textContent = css;
+  document.head.appendChild(el);
+  injectedStyles.push(el);
+}
+
+beforeEach(() => injectStyle(HOST_TAILWIND_CSS));
+
+afterEach(() => {
+  cleanup();
+  for (const el of injectedStyles.splice(0)) el.remove();
+});
+
+/** See provider-container.layout.test.tsx — non-blocking, network-free. */
+function makeClient(): Stigmer {
+  return {
+    baseUrl: "https://example.test",
+    getAuthCredential: async () => null,
+    fetch: (async () => {
+      throw new Error("network disabled in test");
+    }) as unknown as typeof globalThis.fetch,
+  } as unknown as Stigmer;
+}
+
+/** The issue's facts-rail shape: base `grid-cols-1` + container-query variant. */
+// prefix-classnames-ignore: these classNames simulate HOST-authored markup —
+// they must stay unprefixed or this suite stops testing anything.
+function HostFactsRail({ testId }: { readonly testId: string }) {
+  return (
+    <div className="@container" style={{ width: 800 }}>
+      <div
+        data-testid={testId}
+        className="grid grid-cols-1 @xl:grid-cols-[600px_1fr]"
+      >
+        <div>main</div>
+        <div>rail</div>
+      </div>
+    </div>
+  );
+}
+
+/** The issue's phone-sheet shape: base `relative` + viewport variant. */
+// prefix-classnames-ignore: host-simulation markup — must stay unprefixed.
+function HostPhoneSheet({ testId }: { readonly testId: string }) {
+  // The browser harness viewport is narrower than `lg` (64rem), so the
+  // host's `max-lg:fixed` must be the winning declaration.
+  return <div data-testid={testId} className="relative max-lg:fixed" />;
+}
+
+function columnsOf(testId: string): string {
+  const el = document.querySelector(`[data-testid="${testId}"]`)!;
+  return getComputedStyle(el).gridTemplateColumns;
+}
+
+function positionOf(testId: string): string {
+  const el = document.querySelector(`[data-testid="${testId}"]`)!;
+  return getComputedStyle(el).position;
+}
+
+describe("host isolation of the shipped stylesheet (#454)", () => {
+  it("host container-query variant survives OUTSIDE the provider", () => {
+    render(<HostFactsRail testId="rail-outside" />);
+    expect(
+      columnsOf("rail-outside"),
+      "the host's @xl variant must win — pre-#454 the SDK's bare .grid-cols-1 in the higher stgm layer collapsed this to one column",
+    ).toMatch(/^600px/);
+  });
+
+  it("host container-query variant survives INSIDE the provider subtree", () => {
+    // The documented quickstart wraps the host's WHOLE app in StigmerProvider,
+    // so host DOM lives under `.stgm`. Selector-scoping could never protect
+    // this case — only name isolation (the prefix) can. This is the headline
+    // assertion of the fix.
+    render(
+      <StigmerProvider client={makeClient()}>
+        <HostFactsRail testId="rail-inside" />
+      </StigmerProvider>,
+    );
+    expect(columnsOf("rail-inside")).toMatch(/^600px/);
+  });
+
+  it("host `relative max-lg:fixed` keeps position:fixed, outside and inside", () => {
+    render(
+      <>
+        <HostPhoneSheet testId="sheet-outside" />
+        <StigmerProvider client={makeClient()}>
+          <HostPhoneSheet testId="sheet-inside" />
+        </StigmerProvider>
+      </>,
+    );
+    expect(positionOf("sheet-outside")).toBe("fixed");
+    expect(positionOf("sheet-inside")).toBe("fixed");
+  });
+
+  it("SDK prefixed utilities still style SDK-authored DOM", () => {
+    render(
+      <StigmerProvider client={makeClient()}>
+        <div data-testid="sdk-el" className="stg:flex stg:relative" />
+      </StigmerProvider>,
+    );
+    const el = document.querySelector('[data-testid="sdk-el"]')!;
+    expect(getComputedStyle(el).display).toBe("flex");
+    expect(getComputedStyle(el).position).toBe("relative");
+  });
+
+  it("xyflow styles apply only inside the .stgm scope", () => {
+    render(
+      <>
+        <div data-testid="xy-outside" className="react-flow" />
+        <StigmerProvider client={makeClient()}>
+          <div data-testid="xy-inside" className="react-flow" />
+        </StigmerProvider>
+      </>,
+    );
+    const readVar = (testId: string) =>
+      getComputedStyle(document.querySelector(`[data-testid="${testId}"]`)!)
+        .getPropertyValue("--xy-edge-stroke-default")
+        .trim();
+    // A host page using react-flow itself must keep its own styling — the
+    // SDK's copy is scoped under `:where(.stgm, .stgm *)` by the build.
+    expect(readVar("xy-outside")).toBe("");
+    expect(readVar("xy-inside")).not.toBe("");
+  });
+
+  it("negative control: the pre-#454 emission shape breaks the host (this suite detects the defect)", () => {
+    injectStyle(LEGACY_SDK_LEAK_CSS);
+    render(
+      <>
+        <HostFactsRail testId="rail-legacy" />
+        <HostPhoneSheet testId="sheet-legacy" />
+      </>,
+    );
+    // One column: the bare .grid-cols-1 in the higher layer beats the
+    // host's variant — the exact production breakage.
+    expect(columnsOf("rail-legacy")).not.toMatch(/^600px/);
+    expect(positionOf("sheet-legacy")).toBe("relative");
+  });
+});

package/src/access/ManageAccessButton.tsx

@@ -73,9 +73,9 @@ export function ManageAccessButton({
         type="button"
         onClick={() => setOpen(true)}
         className={cn(
-          "inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium",
-          "border border-border text-foreground hover:bg-accent-hover",
-          "focus:outline-none focus:ring-2 focus:ring-ring",
+          "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium",
+          "stg:border stg:border-border stg:text-foreground stg:hover:bg-accent-hover",
+          "stg:focus:outline-none stg:focus:ring-2 stg:focus:ring-ring",
           className,
         )}
       >

package/src/access/ManageAccessDialog.tsx

@@ -105,25 +105,25 @@ export function ManageAccessDialog({
       ref={dialogRef}
       onClose={handleClose}
       className={cn(
-        "fixed inset-0 m-auto w-full max-w-md rounded-xl border border-border bg-popover p-0 shadow-xl",
-        "backdrop:bg-black/50",
+        "stg:fixed stg:inset-0 stg:m-auto stg:w-full stg:max-w-md stg:rounded-xl stg:border stg:border-border stg:bg-popover stg:p-0 stg:shadow-xl",
+        "stg:backdrop:bg-black/50",
       )}
       aria-labelledby="manage-access-title"
     >
       {/* Body mounts only while open so the access-list fetch is lazy. */}
       {open && (
-        <div className="flex flex-col">
+        <div className="stg:flex stg:flex-col">
           {/* Header */}
-          <div className="flex items-start justify-between border-b border-border px-6 py-4">
-            <div className="min-w-0">
+          <div className="stg:flex stg:items-start stg:justify-between stg:border-b stg:border-border stg:px-6 stg:py-4">
+            <div className="stg:min-w-0">
               <h2
                 id="manage-access-title"
-                className="text-base font-semibold text-foreground"
+                className="stg:text-base stg:font-semibold stg:text-foreground"
               >
                 Manage access
               </h2>
               {resource.name && (
-                <p className="mt-0.5 truncate text-xs text-muted-foreground">
+                <p className="stg:mt-0.5 stg:truncate stg:text-xs stg:text-muted-foreground">
                   {resource.name}
                 </p>
               )}
@@ -133,9 +133,9 @@ export function ManageAccessDialog({
               onClick={handleClose}
               aria-label="Close"
               className={cn(
-                "rounded-md p-1 text-muted-foreground",
-                "hover:text-foreground hover:bg-accent-hover",
-                "focus:outline-none focus:ring-2 focus:ring-ring",
+                "stg:rounded-md stg:p-1 stg:text-muted-foreground",
+                "stg:hover:text-foreground stg:hover:bg-accent-hover",
+                "stg:focus:outline-none stg:focus:ring-2 stg:focus:ring-ring",
               )}
             >
               <CloseIcon />
@@ -143,7 +143,7 @@ export function ManageAccessDialog({
           </div>
 
           {/* Body */}
-          <div className="flex flex-col divide-y divide-border">
+          <div className="stg:flex stg:flex-col stg:divide-y stg:divide-border">
             {visibility && (
               <AccessSection
                 title="General access"
@@ -185,14 +185,14 @@ export function ManageAccessDialog({
           </div>
 
           {/* Footer */}
-          <div className="flex items-center justify-end border-t border-border px-6 py-3">
+          <div className="stg:flex stg:items-center stg:justify-end stg:border-t stg:border-border stg:px-6 stg:py-3">
             <button
               type="button"
               onClick={handleClose}
               className={cn(
-                "rounded-md px-3 py-1.5 text-sm font-medium",
-                "bg-primary text-primary-foreground hover:bg-primary-hover",
-                "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                "stg:rounded-md stg:px-3 stg:py-1.5 stg:text-sm stg:font-medium",
+                "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover",
+                "stg:focus:outline-none stg:focus:ring-2 stg:focus:ring-ring stg:focus:ring-offset-2",
               )}
             >
               Done
@@ -218,14 +218,14 @@ function AccessSection({
   readonly children: ReactNode;
 }) {
   return (
-    <section className="px-6 py-4">
-      <h3 className="text-xs font-medium text-muted-foreground">{title}</h3>
+    <section className="stg:px-6 stg:py-4">
+      <h3 className="stg:text-xs stg:font-medium stg:text-muted-foreground">{title}</h3>
       {description && (
-        <p className="mt-0.5 text-[0.65rem] text-muted-foreground">
+        <p className="stg:mt-0.5 stg:text-[0.65rem] stg:text-muted-foreground">
           {description}
         </p>
       )}
-      <div className="mt-2.5">{children}</div>
+      <div className="stg:mt-2.5">{children}</div>
     </section>
   );
 }

package/src/action-menu/ActionMenu.tsx

@@ -69,10 +69,10 @@ function Trigger({
   return (
     <MenuTrigger
       className={cn(
-        "inline-flex items-center justify-center rounded-md p-1",
-        "text-muted-foreground hover:text-foreground hover:bg-accent",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-        "data-popup-open:bg-accent data-popup-open:text-foreground",
+        "stg:inline-flex stg:items-center stg:justify-center stg:rounded-md stg:p-1",
+        "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent",
+        "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+        "stg:data-popup-open:bg-accent stg:data-popup-open:text-foreground",
         className,
       )}
       aria-label={ariaLabel}
@@ -84,7 +84,7 @@ function Trigger({
 
 function Content({ children, align = "end", className }: ActionMenuContentProps) {
   return (
-    <InternalMenuContent align={align} className={cn("min-w-44", className)}>
+    <InternalMenuContent align={align} className={cn("stg:min-w-44", className)}>
       {children}
     </InternalMenuContent>
   );
@@ -104,14 +104,14 @@ function Item({
       variant={variant}
       disabled={disabled}
       onClick={onSelect}
-      className={cn("justify-between", className)}
+      className={cn("stg:justify-between", className)}
     >
-      <span className="flex items-center gap-2">
+      <span className="stg:flex stg:items-center stg:gap-2">
         {icon}
         <span>{children}</span>
       </span>
       {shortcut && (
-        <kbd className="ml-auto text-[11px] tracking-widest text-muted-foreground-subtle">
+        <kbd className="stg:ml-auto stg:text-[11px] stg:tracking-widest stg:text-muted-foreground-subtle">
           {shortcut}
         </kbd>
       )}

package/src/activity/useRecentActivity.ts

@@ -53,10 +53,15 @@ const EPOCH = new Date(0);
  * recent sessions and workflow executions in a single call.
  *
  * The server handles:
- * - FGA authorization filtering (or org-scoped fast path)
+ * - Per-resource authorization filtering (hosted edition: FGA `can_view`
+ *   enumeration — every listed entry is openable by the caller; the org
+ *   only narrows the authorized set, never widens it)
  * - Cross-collection merge-sort by `statusAudit.updatedAt`
  * - Fallback to `specAudit.createdAt` for documents without status updates
  * - Pagination / trimming to the requested page size
+ *
+ * The OSS server does not implement this RPC yet (stigmer#461): against a
+ * pure OSS backend the fetch rejects and `error` is surfaced to the caller.
  */
 export function useRecentActivity(
   options?: UseRecentActivityOptions,