@stigmer/react 3.10.0 → 3.11.0

package/src/session/__tests__/NewSessionViewer.test.tsx

@@ -133,8 +133,8 @@ describe("NewSessionViewer — composer stays centered", () => {
 
   it("centers the composer with zero attached context", () => {
     render(<NewSessionViewer org="acme" onSessionCreated={vi.fn()} />);
-    expect(composerWrapper()?.className).toContain("my-auto");
-    expect(composerWrapper()?.className).not.toContain("my-6");
+    expect(composerWrapper()?.className).toContain("stg:my-auto");
+    expect(composerWrapper()?.className).not.toContain("stg:my-6");
   });
 
   it("keeps the composer centered when context is attached (no position flip)", () => {
@@ -142,7 +142,7 @@ describe("NewSessionViewer — composer stays centered", () => {
     render(<NewSessionViewer org="acme" onSessionCreated={vi.fn()} />);
     // Regression guard: attaching a workspace previously top-anchored the
     // composer. Centering must now hold irrespective of attached context.
-    expect(composerWrapper()?.className).toContain("my-auto");
-    expect(composerWrapper()?.className).not.toContain("my-6");
+    expect(composerWrapper()?.className).toContain("stg:my-auto");
+    expect(composerWrapper()?.className).not.toContain("stg:my-6");
   });
 });

package/src/session/__tests__/PlanEditor.test.tsx

@@ -103,8 +103,8 @@ describe("PlanEditor", () => {
     expect(buildLabel.className).toContain("truncate");
     const toolbar = screen.getByRole("tablist", { name: "Plan view" })
       .parentElement!;
-    expect(toolbar.className).toContain("flex-wrap");
-    expect(toolbar.className).toContain("min-w-0");
+    expect(toolbar.className).toContain("stg:flex-wrap");
+    expect(toolbar.className).toContain("stg:min-w-0");
   });
 
   it("shows a pending label and disables the primary while the build starts", async () => {

package/src/session/__tests__/SessionViewerLayout.test.tsx

@@ -8,8 +8,8 @@ import { SessionViewerLayout } from "../SessionViewerLayout";
 // The contract under test:
 //   - `panel` is the single source of truth for collapsed state
 //   - the conversation never remounts across an open/close toggle
-//   - `responsive={false}` disables the below-`lg` conversation collapse
-//     (fixed-canvas hosts: docs embeds, video export)
+//   - `responsive={false}` disables the narrow-container conversation
+//     collapse (hosts that must never trade the conversation for the panel)
 //   - no `splitStorageKey` means no localStorage read (deterministic hosts)
 // ---------------------------------------------------------------------------
 
@@ -75,17 +75,24 @@ describe("SessionViewerLayout", () => {
     expect(pane.style.width).toBe("420px");
   });
 
-  it("responsive (default): the open-panel conversation pane collapses below lg", () => {
+  // The collapse classes are container-query variants keyed on the split's
+  // own box, never the viewport (stigmer/stigmer#301). These are class-name
+  // pins only — the real layout behavior (a narrow dock inside a wide window
+  // collapsing) is proven in Chromium by ResizableSplit.layout.test.tsx.
+  it("responsive (default): the open-panel conversation pane collapses in a narrow container", () => {
     const { container } = render(
       <SessionViewerLayout conversation={conversation()} panel={panel()} />,
     );
     const pane = screen.getByTestId("conversation").parentElement!;
-    expect(pane.className).toContain("max-lg:hidden");
-    // The separator hides with it, so the panel is the full row below lg.
-    expect(container.querySelectorAll('[class*="max-lg:hidden"]').length).toBe(2);
+    expect(pane.className).toContain("stg:@max-3xl/resizable-split:hidden");
+    // The separator hides with it, so the panel is the full narrow row.
+    expect(
+      container.querySelectorAll('[class*="stg:@max-3xl/resizable-split:hidden"]')
+        .length,
+    ).toBe(2);
   });
 
-  it("responsive={false}: no below-lg collapse anywhere (fixed-canvas hosts)", () => {
+  it("responsive={false}: no narrow-container collapse anywhere (opt-out hosts)", () => {
     const { container } = render(
       <SessionViewerLayout
         conversation={conversation()}
@@ -93,7 +100,12 @@ describe("SessionViewerLayout", () => {
         responsive={false}
       />,
     );
-    expect(container.querySelector('[class*="max-lg:hidden"]')).toBeNull();
+    expect(
+      container.querySelector('[class*="stg:@max-3xl/resizable-split:hidden"]'),
+    ).toBeNull();
+    // No collapse to decide means no CSS container either (the containment
+    // invariant documented in ResizableSplit).
+    expect(container.querySelector('[class*="stg:@container"]')).toBeNull();
   });
 
   it("reads no localStorage without a splitStorageKey (deterministic hosts)", () => {

package/src/session/facets/ArtifactsTab.tsx

@@ -113,8 +113,8 @@ export function ArtifactsTab({
 
   if (!hasArtifacts) {
     return (
-      <div className="flex flex-col items-center justify-center px-4 py-8 text-center">
-        <p className="text-xs text-muted-foreground">
+      <div className="stg:flex stg:flex-col stg:items-center stg:justify-center stg:px-4 stg:py-8 stg:text-center">
+        <p className="stg:text-xs stg:text-muted-foreground">
           No artifacts yet. Files generated by the agent will appear here.
         </p>
       </div>
@@ -123,7 +123,7 @@ export function ArtifactsTab({
 
   return (
     <>
-      <ul role="list" className="flex flex-col">
+      <ul role="list" className="stg:flex stg:flex-col">
         {artifacts.map((entry) => (
           <ArtifactRow
             key={artifactKey(entry.artifact)}

package/src/session/facets/ChangesTab.tsx

@@ -48,7 +48,7 @@ export function ChangesTab({
     // Dense row groups matching the Artifacts facet's list — gap separates
     // entries only in multi-repo sessions (single-entry lists stay seamless).
     return (
-      <ul role="list" className="flex flex-col gap-3">
+      <ul role="list" className="stg:flex stg:flex-col stg:gap-3">
         {writeBacks.map((entry) => (
           <li key={entry.writeBack.workspaceEntryName}>
             <WriteBackCard writeBack={entry.writeBack} />
@@ -60,8 +60,8 @@ export function ChangesTab({
 
   if (expectsWriteBack) {
     return (
-      <div className="flex flex-col items-center justify-center px-4 py-8 text-center">
-        <p className="text-xs text-muted-foreground">
+      <div className="stg:flex stg:flex-col stg:items-center stg:justify-center stg:px-4 stg:py-8 stg:text-center">
+        <p className="stg:text-xs stg:text-muted-foreground">
           {isSettled
             ? "No changes have been pushed yet. When the agent changes files " +
               "and you approve them, they are pushed to a branch and pull " +
@@ -74,8 +74,8 @@ export function ChangesTab({
   }
 
   return (
-    <div className="flex flex-col items-center justify-center px-4 py-8 text-center">
-      <p className="text-xs text-muted-foreground">
+    <div className="stg:flex stg:flex-col stg:items-center stg:justify-center stg:px-4 stg:py-8 stg:text-center">
+      <p className="stg:text-xs stg:text-muted-foreground">
         No changes yet. Pull requests will appear here once the agent pushes
         its work back to your repository.
       </p>

package/src/session/facets/SetupTab.tsx

@@ -70,7 +70,7 @@ export function SetupTab({
   const hasSessionVars = sessionVariables != null && !sessionVariables.isEmpty;
 
   return (
-    <div className="flex flex-col gap-5">
+    <div className="stg:flex stg:flex-col stg:gap-5">
       <RunConfigSection
         harness={harness}
         executionTarget={executionTarget}
@@ -108,7 +108,7 @@ export function SetupTab({
 
 function SectionHeading({ children }: { children: React.ReactNode }) {
   return (
-    <h3 className="text-[0.65rem] font-semibold uppercase tracking-wider text-muted-foreground">
+    <h3 className="stg:text-[0.65rem] stg:font-semibold stg:uppercase stg:tracking-wider stg:text-muted-foreground">
       {children}
     </h3>
   );
@@ -116,14 +116,14 @@ function SectionHeading({ children }: { children: React.ReactNode }) {
 
 function EmptyHint({ children }: { children: React.ReactNode }) {
   return (
-    <p className="text-xs text-muted-foreground/70">{children}</p>
+    <p className="stg:text-xs stg:text-muted-foreground/70">{children}</p>
   );
 }
 
 function ItemPill({ children, className: cls }: { children: React.ReactNode; className?: string }) {
   return (
     <span className={cn(
-      "inline-flex items-center gap-1.5 rounded-md bg-muted-subtle px-2 py-1 text-xs text-foreground",
+      "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:bg-muted-subtle stg:px-2 stg:py-1 stg:text-xs stg:text-foreground",
       cls,
     )}>
       {children}
@@ -136,7 +136,7 @@ function RemoveButton({ onClick, label }: { onClick: () => void; label: string }
     <button
       type="button"
       onClick={onClick}
-      className="shrink-0 text-muted-foreground hover:text-destructive transition-colors"
+      className="stg:shrink-0 stg:text-muted-foreground stg:hover:text-destructive stg:transition-colors"
       aria-label={label}
     >
       <XIcon />
@@ -158,22 +158,22 @@ function RunConfigSection({
   modelId: string | undefined;
 }) {
   return (
-    <section className="flex flex-col gap-1.5">
+    <section className="stg:flex stg:flex-col stg:gap-1.5">
       <SectionHeading>Run Config</SectionHeading>
-      <div className="flex flex-wrap gap-1.5">
+      <div className="stg:flex stg:flex-wrap stg:gap-1.5">
         <ItemPill>
-          <span className="text-muted-foreground">Harness</span>
+          <span className="stg:text-muted-foreground">Harness</span>
           {HARNESS_META[harness]?.label ?? harness}
         </ItemPill>
         {modelId && (
           <ItemPill>
-            <span className="text-muted-foreground">Model</span>
+            <span className="stg:text-muted-foreground">Model</span>
             {modelId}
           </ItemPill>
         )}
         {executionTarget && (
           <ItemPill>
-            <span className="text-muted-foreground">Target</span>
+            <span className="stg:text-muted-foreground">Target</span>
             {executionTarget === "local" ? "Local" : "Cloud"}
           </ItemPill>
         )}
@@ -196,10 +196,10 @@ function AgentSection({
   onRemove?: () => void;
 }) {
   return (
-    <section className="flex flex-col gap-1.5">
+    <section className="stg:flex stg:flex-col stg:gap-1.5">
       <SectionHeading>Agent</SectionHeading>
       {agentRef ? (
-        <div className="flex items-center gap-1.5">
+        <div className="stg:flex stg:items-center stg:gap-1.5">
           <ItemPill>
             {agentRef.slug}
             {onRemove && !isDefaultAgent && (
@@ -207,7 +207,7 @@ function AgentSection({
             )}
           </ItemPill>
           {isDefaultAgent && (
-            <span className="rounded bg-primary/10 px-1.5 py-0.5 text-[0.6rem] font-medium text-primary">
+            <span className="stg:rounded stg:bg-primary/10 stg:px-1.5 stg:py-0.5 stg:text-[0.6rem] stg:font-medium stg:text-primary">
               default
             </span>
           )}
@@ -231,15 +231,15 @@ function McpSection({
   onRemove?: (ref: ResourceRef) => void;
 }) {
   return (
-    <section className="flex flex-col gap-1.5">
+    <section className="stg:flex stg:flex-col stg:gap-1.5">
       <SectionHeading>
         MCP Servers
         {mcpServerUsages.length > 0 && (
-          <span className="ml-1 text-muted-foreground/60">({mcpServerUsages.length})</span>
+          <span className="stg:ml-1 stg:text-muted-foreground/60">({mcpServerUsages.length})</span>
         )}
       </SectionHeading>
       {mcpServerUsages.length > 0 ? (
-        <div className="flex flex-col gap-1">
+        <div className="stg:flex stg:flex-col stg:gap-1">
           {mcpServerUsages.map((usage) => {
             const slug = usage.mcpServerRef.slug;
             const enabledCount = usage.enabledTools?.length;
@@ -247,7 +247,7 @@ function McpSection({
               <ItemPill key={`${usage.mcpServerRef.org}/${slug}`}>
                 <span>{slug}</span>
                 {enabledCount != null && enabledCount > 0 && (
-                  <span className="text-muted-foreground">
+                  <span className="stg:text-muted-foreground">
                     {enabledCount} tool{enabledCount !== 1 ? "s" : ""}
                   </span>
                 )}
@@ -280,15 +280,15 @@ function SkillsSection({
   onRemove?: (ref: ResourceRef) => void;
 }) {
   return (
-    <section className="flex flex-col gap-1.5">
+    <section className="stg:flex stg:flex-col stg:gap-1.5">
       <SectionHeading>
         Skills
         {skillRefs.length > 0 && (
-          <span className="ml-1 text-muted-foreground/60">({skillRefs.length})</span>
+          <span className="stg:ml-1 stg:text-muted-foreground/60">({skillRefs.length})</span>
         )}
       </SectionHeading>
       {skillRefs.length > 0 ? (
-        <div className="flex flex-wrap gap-1.5">
+        <div className="stg:flex stg:flex-wrap stg:gap-1.5">
           {skillRefs.map((ref) => (
             <ItemPill key={`${ref.org}/${ref.slug}`}>
               {ref.slug}
@@ -318,21 +318,21 @@ function SessionVarsSection({
   entries: UseSessionVariablesReturn["entries"];
 }) {
   return (
-    <section className="flex flex-col gap-1.5">
+    <section className="stg:flex stg:flex-col stg:gap-1.5">
       <SectionHeading>
         Session Variables
-        <span className="ml-1 font-normal normal-case tracking-normal text-muted-foreground/60">
+        <span className="stg:ml-1 stg:font-normal stg:normal-case stg:tracking-normal stg:text-muted-foreground/60">
           (next message only)
         </span>
       </SectionHeading>
-      <div className="flex flex-col gap-1">
+      <div className="stg:flex stg:flex-col stg:gap-1">
         {entries.map((entry) => (
           <ItemPill key={entry.id}>
-            <span className="font-medium">{entry.key || "(unnamed)"}</span>
+            <span className="stg:font-medium">{entry.key || "(unnamed)"}</span>
             {entry.isSecret ? (
-              <span className="text-muted-foreground">********</span>
+              <span className="stg:text-muted-foreground">********</span>
             ) : (
-              <span className="max-w-[140px] truncate text-muted-foreground">{entry.value}</span>
+              <span className="stg:max-w-[140px] stg:truncate stg:text-muted-foreground">{entry.value}</span>
             )}
           </ItemPill>
         ))}

package/src/session/facets/UsageTab.tsx

@@ -20,8 +20,8 @@ export function UsageTab({ executions }: UsageTabProps) {
 
   if (!usage.hasUsage) {
     return (
-      <div className="flex flex-col items-center justify-center px-4 py-8 text-center">
-        <p className="text-xs text-muted-foreground">
+      <div className="stg:flex stg:flex-col stg:items-center stg:justify-center stg:px-4 stg:py-8 stg:text-center">
+        <p className="stg:text-xs stg:text-muted-foreground">
           No usage data yet. Cost and token stats will appear here.
         </p>
       </div>

package/src/settings/ApiKeysSection.tsx

@@ -38,10 +38,10 @@ export function ApiKeysSection() {
 
   return (
     <section aria-labelledby="api-keys-heading">
-      <div className="mb-3 flex items-center justify-between">
+      <div className="stg:mb-3 stg:flex stg:items-center stg:justify-between">
         <h2
           id="api-keys-heading"
-          className="text-foreground text-sm font-semibold"
+          className="stg:text-foreground stg:text-sm stg:font-semibold"
         >
           API Keys
         </h2>
@@ -50,13 +50,13 @@ export function ApiKeysSection() {
           <button
             type="button"
             onClick={() => setFlow({ phase: "creating" })}
-            className="text-primary hover:text-foreground text-xs font-medium transition-colors"
+            className="stg:text-primary stg:hover:text-foreground stg:text-xs stg:font-medium stg:transition-colors"
           >
             + New API key
           </button>
         )}
       </div>
-      <p className="text-muted-foreground mb-4 text-xs">
+      <p className="stg:text-muted-foreground stg:mb-4 stg:text-xs">
         API keys authenticate CLI sessions and programmatic access to the
         Stigmer API. Keys are scoped to your identity and work across all
         your organizations.
@@ -74,12 +74,12 @@ export function ApiKeysSection() {
               rawKey={flow.rawKey}
               keyName={flow.keyName}
               onDismiss={handleDismissReveal}
-              className="mb-4"
+              className="stg:mb-4"
             />
           )}
 
           {flow.phase === "creating" && (
-            <div className="border-border bg-card mb-4 rounded-lg border p-4">
+            <div className="stg:border-border stg:bg-card stg:mb-4 stg:rounded-lg stg:border stg:p-4">
               <CreateApiKeyForm
                 org={org}
                 onCreated={handleCreated}

package/src/settings/ChannelAppsSection.tsx

@@ -73,10 +73,10 @@ export function ChannelAppsSection() {
 
   return (
     <section aria-labelledby="channel-apps-heading">
-      <div className="mb-3 flex items-center justify-between">
+      <div className="stg:mb-3 stg:flex stg:items-center stg:justify-between">
         <h2
           id="channel-apps-heading"
-          className="text-foreground text-sm font-semibold"
+          className="stg:text-foreground stg:text-sm stg:font-semibold"
         >
           Channel Apps
         </h2>
@@ -85,13 +85,13 @@ export function ChannelAppsSection() {
           <button
             type="button"
             onClick={() => setFlow({ phase: "creating" })}
-            className="text-primary hover:text-foreground text-xs font-medium transition-colors"
+            className="stg:text-primary stg:hover:text-foreground stg:text-xs stg:font-medium stg:transition-colors"
           >
             + New channel app
           </button>
         )}
       </div>
-      <p className="text-muted-foreground mb-4 text-xs">
+      <p className="stg:text-muted-foreground stg:mb-4 stg:text-xs">
         Your own provider apps for serving agent channels. A Slack app
         gives the bot your name and icon, and lets multiple agents serve
         the same workspace — one per app. A Meta app is how WhatsApp
@@ -104,7 +104,7 @@ export function ChannelAppsSection() {
           require Stigmer Cloud.
         </CloudFeatureNotice>
       ) : flow.phase === "creating" ? (
-        <div className="border-border bg-card rounded-lg border p-4">
+        <div className="stg:border-border stg:bg-card stg:rounded-lg stg:border stg:p-4">
           <CreateChannelAppForm
             org={org}
             onCreated={handleCreated}
@@ -112,7 +112,7 @@ export function ChannelAppsSection() {
           />
         </div>
       ) : flow.phase === "editing" ? (
-        <div className="border-border bg-card rounded-lg border p-4">
+        <div className="stg:border-border stg:bg-card stg:rounded-lg stg:border stg:p-4">
           <ChannelAppDetailPanel
             channelApp={flow.channelApp}
             createHandoff={flow.createHandoff}

package/src/settings/EnvironmentsSection.tsx

@@ -18,7 +18,7 @@ export function EnvironmentsSection() {
   const org = useActiveOrgSlug();
 
   return (
-    <div className="space-y-10">
+    <div className="stg:space-y-10">
       <PersonalEnvironmentCard org={org} />
       <EnvironmentsCard org={org} />
     </div>
@@ -50,18 +50,18 @@ function PersonalEnvironmentCard({ org }: { org: string }) {
 
   return (
     <section aria-labelledby="personal-env-heading">
-      <div className="mb-3 flex items-baseline gap-2">
+      <div className="stg:mb-3 stg:flex stg:items-baseline stg:gap-2">
         <h2
           id="personal-env-heading"
-          className="text-foreground text-sm font-semibold"
+          className="stg:text-foreground stg:text-sm stg:font-semibold"
         >
           Personal Environment
         </h2>
-        <span className="bg-primary-subtle text-primary rounded-full px-2 py-0.5 text-[0.6rem] font-medium uppercase tracking-wider">
+        <span className="stg:bg-primary-subtle stg:text-primary stg:rounded-full stg:px-2 stg:py-0.5 stg:text-[0.6rem] stg:font-medium stg:uppercase stg:tracking-wider">
           You
         </span>
       </div>
-      <p className="text-muted-foreground mb-4 text-xs">
+      <p className="stg:text-muted-foreground stg:mb-4 stg:text-xs">
         Your private secrets and configuration, automatically managed for you.
         Only visible to you — used when running agents that require your
         personal credentials.
@@ -70,13 +70,13 @@ function PersonalEnvironmentCard({ org }: { org: string }) {
       {isLoading || isMutating ? (
         <SkeletonRows count={3} />
       ) : error ? (
-        <p className="text-destructive text-xs" role="alert">
+        <p className="stg:text-destructive stg:text-xs" role="alert">
           {getUserMessage(error)}
         </p>
       ) : environmentId ? (
         <EnvironmentVariableEditor environmentId={environmentId} />
       ) : (
-        <p className="text-muted-foreground text-xs">
+        <p className="stg:text-muted-foreground stg:text-xs">
           Your personal environment will be created automatically when needed.
         </p>
       )}
@@ -99,10 +99,10 @@ function EnvironmentsCard({ org }: { org: string }) {
 
   return (
     <section aria-labelledby="org-env-heading">
-      <div className="mb-3 flex items-center justify-between">
+      <div className="stg:mb-3 stg:flex stg:items-center stg:justify-between">
         <h2
           id="org-env-heading"
-          className="text-foreground text-sm font-semibold"
+          className="stg:text-foreground stg:text-sm stg:font-semibold"
         >
           Environments
         </h2>
@@ -111,19 +111,19 @@ function EnvironmentsCard({ org }: { org: string }) {
           <button
             type="button"
             onClick={() => setShowCreate(true)}
-            className="text-primary hover:text-foreground text-xs font-medium transition-colors"
+            className="stg:text-primary stg:hover:text-foreground stg:text-xs stg:font-medium stg:transition-colors"
           >
             + New environment
           </button>
         )}
       </div>
-      <p className="text-muted-foreground mb-4 text-xs">
+      <p className="stg:text-muted-foreground stg:mb-4 stg:text-xs">
         Named environments for your organization. Store credentials, API tokens,
         and configuration that agents need at runtime.
       </p>
 
       {showCreate && (
-        <div className="border-border bg-card mb-4 rounded-lg border p-4">
+        <div className="stg:border-border stg:bg-card stg:mb-4 stg:rounded-lg stg:border stg:p-4">
           <CreateEnvironmentForm
             org={org}
             onCreated={handleCreated}
@@ -139,7 +139,7 @@ function EnvironmentsCard({ org }: { org: string }) {
           onRefetchRef={handleRefetchRef}
         />
       ) : (
-        <p className="text-muted-foreground py-4 text-center text-xs">
+        <p className="stg:text-muted-foreground stg:py-4 stg:text-center stg:text-xs">
           Select an organization to view environments.
         </p>
       )}
@@ -149,11 +149,11 @@ function EnvironmentsCard({ org }: { org: string }) {
 
 function SkeletonRows({ count }: { count: number }) {
   return (
-    <div className="space-y-2" aria-busy="true" aria-label="Loading">
+    <div className="stg:space-y-2" aria-busy="true" aria-label="Loading">
       {Array.from({ length: count }, (_, i) => (
         <div
           key={i}
-          className="bg-muted-subtle h-8 animate-pulse rounded"
+          className="stg:bg-muted-subtle stg:h-8 stg:animate-pulse stg:rounded"
           style={{ width: `${85 - i * 10}%` }}
         />
       ))}

package/src/settings/IdentityProvidersSection.tsx

@@ -55,10 +55,10 @@ export function IdentityProvidersSection({
 
   return (
     <section aria-labelledby="identity-providers-heading">
-      <div className="mb-3 flex items-center justify-between">
+      <div className="stg:mb-3 stg:flex stg:items-center stg:justify-between">
         <h2
           id="identity-providers-heading"
-          className="text-foreground text-sm font-semibold"
+          className="stg:text-foreground stg:text-sm stg:font-semibold"
         >
           Identity Providers
         </h2>
@@ -67,13 +67,13 @@ export function IdentityProvidersSection({
           <button
             type="button"
             onClick={() => setFlow({ phase: "creating" })}
-            className="text-primary hover:text-foreground text-xs font-medium transition-colors"
+            className="stg:text-primary stg:hover:text-foreground stg:text-xs stg:font-medium stg:transition-colors"
           >
             + New identity provider
           </button>
         )}
       </div>
-      <p className="text-muted-foreground mb-4 text-xs">
+      <p className="stg:text-muted-foreground stg:mb-4 stg:text-xs">
         Identity providers define external OIDC trust relationships for
         federated authentication. Configure providers for platform-managed
         organizations or self-managed SSO.
@@ -85,11 +85,11 @@ export function IdentityProvidersSection({
           authentication requires Stigmer Cloud.
         </CloudFeatureNotice>
       ) : !orgSlug ? (
-        <p className="text-muted-foreground py-4 text-center text-xs">
+        <p className="stg:text-muted-foreground stg:py-4 stg:text-center stg:text-xs">
           Select an organization to manage identity providers.
         </p>
       ) : flow.phase === "creating" ? (
-        <div className="border-border bg-card rounded-lg border p-4">
+        <div className="stg:border-border stg:bg-card stg:rounded-lg stg:border stg:p-4">
           <IdentityProviderWizard
             org={orgSlug}
             onCreated={handleCreated}
@@ -97,7 +97,7 @@ export function IdentityProvidersSection({
           />
         </div>
       ) : flow.phase === "editing" ? (
-        <div className="border-border bg-card rounded-lg border p-4">
+        <div className="stg:border-border stg:bg-card stg:rounded-lg stg:border stg:p-4">
           <IdentityProviderDetailPanel
             identityProvider={flow.identityProvider}
             ssoLoginUrl={

package/src/settings/InvitationsSection.tsx

@@ -12,15 +12,15 @@ export function InvitationsSection() {
 
   return (
     <section aria-labelledby="invitations-heading">
-      <div className="mb-3">
+      <div className="stg:mb-3">
         <h2
           id="invitations-heading"
-          className="text-foreground text-sm font-semibold"
+          className="stg:text-foreground stg:text-sm stg:font-semibold"
         >
           Invitations
         </h2>
       </div>
-      <p className="text-muted-foreground mb-4 text-xs">
+      <p className="stg:text-muted-foreground stg:mb-4 stg:text-xs">
         Shareable invite links that grant organization membership with a
         configurable role. Create single-use links for specific people or
         multi-use links for public sharing.
@@ -31,7 +31,7 @@ export function InvitationsSection() {
           Invitations are not available in local mode.
         </CloudFeatureNotice>
       ) : !org ? (
-        <p className="text-muted-foreground py-4 text-center text-xs">
+        <p className="stg:text-muted-foreground stg:py-4 stg:text-center stg:text-xs">
           Select an organization to manage invitations.
         </p>
       ) : (

package/src/settings/MembersSection.tsx

@@ -26,11 +26,11 @@ export function MembersSection() {
     <section aria-labelledby="members-heading">
       <h2
         id="members-heading"
-        className="text-foreground mb-1 text-sm font-semibold"
+        className="stg:text-foreground stg:mb-1 stg:text-sm stg:font-semibold"
       >
         Members
       </h2>
-      <p className="text-muted-foreground mb-4 text-xs">
+      <p className="stg:text-muted-foreground stg:mb-4 stg:text-xs">
         Manage who has access to this organization and what they can do.
         Members can be granted owner, admin, member, or viewer roles.
       </p>
@@ -41,14 +41,14 @@ export function MembersSection() {
           require Stigmer Cloud.
         </CloudFeatureNotice>
       ) : !orgId ? (
-        <p className="text-muted-foreground py-4 text-center text-xs">
+        <p className="stg:text-muted-foreground stg:py-4 stg:text-center stg:text-xs">
           Select an organization to manage members.
         </p>
       ) : (
         <>
           {hasJitProviders && (
-            <div className="mb-3 rounded-md border border-border-muted bg-muted-faint px-3 py-2">
-              <p className="text-[0.65rem] text-muted-foreground">
+            <div className="stg:mb-3 stg:rounded-md stg:border stg:border-border-muted stg:bg-muted-faint stg:px-3 stg:py-2">
+              <p className="stg:text-[0.65rem] stg:text-muted-foreground">
                 This organization has identity providers with auto-provisioning
                 enabled. Members may appear here automatically when users
                 authenticate via federated identity.