@stigmer/react 3.10.0 → 3.11.0

package/src/__tests__/styles-border-layer-invariant.test.ts

@@ -1,35 +1,23 @@
 import { describe, it, expect } from "vitest";
-import { dirname, resolve } from "node:path";
-import { fileURLToPath } from "node:url";
-import postcss, {
-  type AtRule,
-  type Rule,
-  type Container,
-  type Document as PostcssDocument,
-} from "postcss";
-import tailwindcss from "@tailwindcss/postcss";
-
-// The directory of `styles.css` — `@source` globs and relative `@import`s inside
-// it resolve from here, exactly as they do when a host app compiles it.
-const srcDir = resolve(dirname(fileURLToPath(import.meta.url)), "..");
+import { type AtRule, type Rule, type Container, type Document as PostcssDocument } from "postcss";
+import { compileSdkStylesheet } from "./helpers/compile-sdk-styles";
 
 /**
- * Compile the SDK stylesheet the way the client apps actually do: the host's
- * Tailwind first (`@import "tailwindcss"`, which puts preflight in `base` and
- * utilities in `utilities`), then the SDK's `styles.css` layered on top. This is
- * the pipeline that broke every prior border fix — the standalone
- * `tailwindcss -i styles.css` build (which the apps never consume) hid the bug
- * because it lacks the competing host `utilities` layer.
+ * The border-layer invariant: the `.stgm` preflight-style reset (which zeroes
+ * `border-width` on every descendant) must never outrank the `border-*`
+ * utilities, or every border inside `.stgm` silently disappears — the defect
+ * that shipped twice before this test existed.
+ *
+ * Since #454 the SDK stylesheet is a self-contained compiled artifact (client
+ * apps and hosts consume `dist/styles.css`; nobody recompiles the source), so
+ * the cascade under test is the standalone build's own layer order: the reset
+ * lives in `base`, the `stg:`-prefixed utilities live in `stgm`, and the
+ * `@layer theme, base, components, utilities, stgm` declaration pins
+ * `base` below `stgm`. (Pre-#454 this test compiled a simulated host context,
+ * because hosts inlined the SDK source into their own Tailwind build and the
+ * utilities landed in the HOST's `utilities` layer — that pipeline no longer
+ * exists.)
  */
-async function compileHostContext(): Promise<string> {
-  const input = `@import "tailwindcss";\n@import "./styles.css";`;
-  const result = await postcss([tailwindcss({ base: srcDir })]).process(input, {
-    // A virtual entry inside src/ so `@import "./styles.css"` resolves to the
-    // real SDK stylesheet under test.
-    from: resolve(srcDir, "__border-layer-probe__.css"),
-  });
-  return result.css;
-}
 
 /** The nearest enclosing `@layer <name>` of a node, or null if unlayered. */
 function enclosingLayer(node: Rule | AtRule): string | null {
@@ -44,30 +32,31 @@ function enclosingLayer(node: Rule | AtRule): string | null {
   return null;
 }
 
-describe("styles.css border-layer invariant (host-compiled)", () => {
-  // The class-name assertions in ToolCallItem/ApprovalCard tests prove the
-  // markup *requests* a border; they run in happy-dom, which cannot resolve
-  // `@layer` and so cannot prove the border actually *renders*. This compiles
-  // the real host-context cascade and asserts the architecture that makes it
-  // render: the scoped preflight reset must never outrank the border utilities.
-  it("emits the .stgm border reset in `base`, below the `utilities` layer", async () => {
-    const css = await compileHostContext();
-    const root = postcss.parse(css);
+describe("styles.css border-layer invariant", () => {
+  it("emits the .stgm border reset in `base`, below the utilities in `stgm`", async () => {
+    const root = await compileSdkStylesheet();
 
-    // 1) Scanning/generation works: the prominent border-color utility exists.
-    //    (If this regresses, the border would silently fall back to the faint
-    //    --stgm-border default — the dark-mode half of the original defect.)
+    // 1) Scanning/generation works: the prominent border-color utility exists,
+    //    under the #454 prefix. (If this regresses, the border would silently
+    //    fall back to the faint --stgm-border default — the dark-mode half of
+    //    the original defect.)
     let prominentRule: Rule | null = null;
     root.walkRules((rule) => {
-      if (rule.selector.includes(".border-border-prominent")) prominentRule = rule;
+      if (rule.selector.includes(".stg\\:border-border-prominent")) {
+        prominentRule = rule;
+      }
     });
     expect(
       prominentRule,
-      "`.border-border-prominent` was not generated — host did not scan the SDK source",
+      "`.stg\\:border-border-prominent` was not generated — @source scanning or the stg: prefix broke",
     ).not.toBeNull();
+    expect(
+      enclosingLayer(prominentRule!),
+      "border utilities must live in @layer stgm (the standalone build's utility layer)",
+    ).toBe("stgm");
 
-    // 2) The reset (the rule that zeroes border-width on every .stgm descendant)
-    //    must live in `base`, not in a layer declared after `utilities`.
+    // 2) The reset (the rule that zeroes border-width on every .stgm
+    //    descendant) must live in `base`, declared before `stgm`.
     let resetRule: Rule | null = null;
     root.walkRules((rule) => {
       if (!rule.selector.includes(".stgm")) return;
@@ -82,24 +71,63 @@ describe("styles.css border-layer invariant (host-compiled)", () => {
     expect(resetRule, "the .stgm border-width:0 reset was not found").not.toBeNull();
     expect(
       enclosingLayer(resetRule!),
-      "the .stgm border reset must live in @layer base (it was placed in a layer above `utilities`, which silently zeroes every border inside .stgm)",
+      "the .stgm border reset must live in @layer base (a reset in a layer above the utilities silently zeroes every border inside .stgm)",
     ).toBe("base");
 
-    // 3) Belt and suspenders: `base` is declared before `utilities`, so a later
-    //    `border`/`border-*` utility wins the cascade.
-    const layerOrder: string[] = [];
+    // 3) The normative layer order comes from the bare `@layer a, b, c;`
+    //    declaration at the top of the stylesheet: `base` must precede `stgm`.
+    let order: string[] | null = null;
     root.walkAtRules("layer", (at) => {
-      if (!at.nodes) return; // skip the bare `@layer a, b, c;` ordering statement
-      const name = at.params.trim();
-      if (name && !layerOrder.includes(name)) layerOrder.push(name);
+      if (at.nodes) return; // only the bare ordering statement
+      const names = at.params.split(",").map((s) => s.trim());
+      if (!order && names.includes("base") && names.includes("stgm")) {
+        order = names;
+      }
+    });
+    expect(order, "the @layer ordering declaration is missing").not.toBeNull();
+    expect(
+      order!.indexOf("base"),
+      `expected base before stgm in [${order!.join(", ")}]`,
+    ).toBeLessThan(order!.indexOf("stgm"));
+  });
+
+  // The form-control preflight (#374) has the same one dangerous failure mode
+  // as the border reset: land it in any layer above the SDK's utilities and
+  // it silently overrides every `stg:bg-*`/`stg:p-*` utility on every button
+  // in the SDK. Same harness, same invariant — pinned separately because the
+  // rule is found by a different fingerprint (background-color on
+  // `.stgm button`).
+  it("emits the .stgm form-control preflight in `base`, below the utilities in `stgm`", async () => {
+    const root = await compileSdkStylesheet();
+
+    let controlRule: Rule | null = null;
+    root.walkRules((rule) => {
+      if (!rule.selector.includes(".stgm button")) return;
+      const clearsBackground = rule.some(
+        (decl) =>
+          decl.type === "decl" &&
+          decl.prop === "background-color" &&
+          decl.value.trim() === "transparent",
+      );
+      if (clearsBackground) controlRule = rule;
     });
-    const baseIdx = layerOrder.indexOf("base");
-    const utilitiesIdx = layerOrder.indexOf("utilities");
-    expect(baseIdx).toBeGreaterThanOrEqual(0);
-    expect(utilitiesIdx).toBeGreaterThanOrEqual(0);
     expect(
-      baseIdx,
-      `expected @layer base (#${baseIdx}) to precede @layer utilities (#${utilitiesIdx}); order was [${layerOrder.join(", ")}]`,
-    ).toBeLessThan(utilitiesIdx);
+      controlRule,
+      "the .stgm form-control preflight (background-color: transparent on .stgm button) was not found",
+    ).not.toBeNull();
+    expect(
+      enclosingLayer(controlRule!),
+      "the .stgm form-control preflight must live in @layer base (a layer above the utilities silently overrides every stg:bg-*/stg:p-* utility on every button in the SDK)",
+    ).toBe("base");
+
+    // The block must cover all five control elements, not just button —
+    // an accidental selector trim would silently re-expose the UA defaults
+    // on inputs/textareas in preflight-less hosts.
+    for (const control of ["input", "select", "optgroup", "textarea"]) {
+      expect(
+        controlRule!.selector,
+        `the form-control preflight selector must include .stgm ${control}`,
+      ).toContain(`.stgm ${control}`);
+    }
   });
 });

package/src/__tests__/styles-dist-isolation.test.ts

@@ -0,0 +1,195 @@
+import { describe, expect, it } from "vitest";
+import postcss, { type AtRule, type Container, type Rule, type Root } from "postcss";
+import selectorParser from "postcss-selector-parser";
+import { compileSdkStylesheet } from "./helpers/compile-sdk-styles";
+
+/**
+ * The #454 isolation invariant: NOTHING in the shipped SDK stylesheet may
+ * match a host application's DOM outside the `.stgm` scope containers.
+ *
+ * Before this invariant, the stylesheet emitted bare Tailwind utilities
+ * (`.relative`, `.grid-cols-1`, `.container`) inside `@layer stgm` — which
+ * the SDK's own layer-order declaration pins ABOVE a host's `utilities`
+ * layer. Loading the stylesheet silently broke any host element pairing a
+ * base utility with a variant override of the same property
+ * (`grid-cols-1 @xl:grid-cols-[...]`, `relative max-lg:fixed`) — permanently,
+ * regardless of load order. Observed in production (Stigmer Law).
+ *
+ * Every rule must therefore fall in exactly one of these categories:
+ *
+ *  1. `stg:`-prefixed — Tailwind utilities under the #454 prefix
+ *     (`.stg\:flex`). Collision-free by NAME: a host's Tailwind never emits
+ *     these class names.
+ *  2. `.stgm`-anchored — the scope container itself, hand-written
+ *     `.stgm .hljs-*` rules, and everything carrying the
+ *     `:where(.stgm, .stgm *)` guard added by the build's scoping pass
+ *     (xyflow, the `@layer properties` block).
+ *  3. `stgm-`-prefixed classes — hand-written component classes
+ *     (`.stgm-thread-item-enter`) and theme presets (`.stgm-theme-*`).
+ *  4. `:root`/`:host` rules whose declarations are ALL namespaced custom
+ *     properties: `--stgm-*` (the public token contract — deliberately on
+ *     `:root`, because custom properties resolve by inheritance PROXIMITY:
+ *     moving the defaults onto `.stgm` would shadow the documented
+ *     `:root { --stgm-primary: ... }` host override channel) or `--stg-*`
+ *     (Tailwind theme variables under the prefix).
+ *
+ * Allowed globals, by name rather than selector:
+ *  - `@property --tw-*` / `--stg-*` registrations (inherently global;
+ *    duplicate identical registrations are a no-op).
+ *  - `@keyframes` (cannot be selector-scoped; Tailwind names like `spin`
+ *    collide only with identical definitions from the same Tailwind version,
+ *    and our own animations use `stgm-*` names).
+ *
+ * This makes the entire leak CLASS a test failure — not just the two
+ * symptoms the issue reported.
+ */
+
+/** The names of all at-rules enclosing a node, outermost first. */
+function enclosingAtRuleNames(node: Rule | AtRule): string[] {
+  const names: string[] = [];
+  let parent: Container | undefined = node.parent as Container | undefined;
+  while (parent) {
+    if (parent.type === "atrule") names.unshift((parent as AtRule).name);
+    parent = parent.parent as Container | undefined;
+  }
+  return names;
+}
+
+/**
+ * Category check for a single selector (one comma-separated alternative).
+ * Implemented independently of the build's scoping pass on purpose: the test
+ * must not share the code it verifies.
+ */
+function selectorIsIsolated(selector: string): boolean {
+  let isolated = false;
+  try {
+    selectorParser((sel) => {
+      sel.walkClasses((cls) => {
+        if (
+          cls.value.startsWith("stg:") ||
+          cls.value === "stgm" ||
+          cls.value.startsWith("stgm-")
+        ) {
+          isolated = true;
+        }
+      });
+      // `data-stgm-*` attributes are the SDK's public selector namespace
+      // (data-stgm-root, data-stgm-portal, data-stgm-color-mode) — a host
+      // element matches only by explicitly opting into it.
+      sel.walkAttributes((attr) => {
+        if (attr.attribute.startsWith("data-stgm-")) isolated = true;
+      });
+    }).processSync(selector);
+  } catch {
+    return false;
+  }
+  return isolated;
+}
+
+/**
+ * A rule is isolated when its own selectors are, OR when it is nested inside
+ * an isolated rule (`&`-relative selectors cannot match anything the parent
+ * does not already scope — e.g. the unminified compile keeps
+ * `.stg\:[&>button:hover]:...` utilities as nested `&>button:hover` rules;
+ * the shipped minifier flattens these).
+ */
+function ruleIsIsolated(rule: Rule): boolean {
+  if (rule.selectors.every(selectorIsIsolated)) return true;
+  let parent: Container | undefined = rule.parent as Container | undefined;
+  while (parent) {
+    if (parent.type === "rule" && (parent as Rule).selectors.every(selectorIsIsolated)) {
+      return true;
+    }
+    parent = parent.parent as Container | undefined;
+  }
+  return false;
+}
+
+/** `:root` / `:host`-only selector? (Tolerates `:where()`-wrapped forms.) */
+function isRootSelector(selector: string): boolean {
+  return selector
+    .split(",")
+    .every((part) => /^\s*:(root|host|where\(\s*:(root|host)\s*\))\s*$/.test(part.trim()));
+}
+
+function ruleViolations(root: Root): string[] {
+  const violations: string[] = [];
+  root.walkRules((rule) => {
+    const atRules = enclosingAtRuleNames(rule);
+    if (atRules.some((n) => n === "keyframes" || n.endsWith("keyframes"))) {
+      return; // allowed global (see header)
+    }
+    if (isRootSelector(rule.selector)) {
+      // Category 4: every declaration must be a namespaced custom property.
+      rule.walkDecls((decl) => {
+        if (!/^--stgm?-/.test(decl.prop)) {
+          violations.push(
+            `:root rule declares non-namespaced property \`${decl.prop}\` — ` +
+              `it would apply to the host's document root`,
+          );
+        }
+      });
+      return;
+    }
+    if (!ruleIsIsolated(rule)) {
+      violations.push(
+        `unisolated selector \`${rule.selector}\`` +
+          (atRules.length > 0 ? ` (inside @${atRules.join(" @")})` : ""),
+      );
+    }
+  });
+  return violations;
+}
+
+describe("styles.css dist isolation invariant (#454)", () => {
+  it("emits no selector that can match host DOM outside the .stgm scope", async () => {
+    const root = await compileSdkStylesheet();
+
+    // Sanity: this is a real build, not an empty compile.
+    let ruleCount = 0;
+    root.walkRules(() => {
+      ruleCount++;
+    });
+    expect(ruleCount).toBeGreaterThan(500);
+
+    const violations = ruleViolations(root);
+    expect(
+      violations,
+      `the shipped stylesheet leaks into host pages:\n  ${violations.slice(0, 20).join("\n  ")}` +
+        (violations.length > 20 ? `\n  ... and ${violations.length - 20} more` : ""),
+    ).toEqual([]);
+  });
+
+  it("@property registrations stay in the internal variable namespaces", async () => {
+    const root = await compileSdkStylesheet();
+    const offenders: string[] = [];
+    let count = 0;
+    root.walkAtRules("property", (at) => {
+      count++;
+      if (!/^--(tw|stg)-/.test(at.params.trim())) offenders.push(at.params.trim());
+    });
+    expect(count).toBeGreaterThan(0);
+    expect(
+      offenders,
+      "a global @property registration outside --tw-*/--stg-* could clobber a host-registered property",
+    ).toEqual([]);
+  });
+
+  it("negative control: a bare utility selector is detected as a leak", async () => {
+    // Prove the walker actually catches the defect class this test exists
+    // for: inject the exact shape the pre-#454 stylesheet shipped.
+    const root = postcss.parse(
+      "@layer stgm{.relative{position:relative}.stg\\:flex{display:flex}}",
+    );
+    const violations = ruleViolations(root);
+    expect(violations).toHaveLength(1);
+    expect(violations[0]).toContain(".relative");
+  });
+
+  it("negative control: non-custom-property declarations on :root are detected", async () => {
+    const root = postcss.parse(":root{--stgm-x:1;color:red}");
+    const violations = ruleViolations(root);
+    expect(violations).toHaveLength(1);
+    expect(violations[0]).toContain("color");
+  });
+});

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,
         )}
       >