### Initialize Runtime and Load Remote with Timeout

Source: https://www.npmjs.com/package/mf-shield/v/0.1.0

Use `createFederationRuntime` to initialize the runtime and get a loader. Wrap promises with `withTimeout` to reject with `FederationTimeoutError` if an SLA is missed.

```typescript
import * as React from "react";
import * as ReactDOM from "react-dom";
import { createSharedSingleton, withTimeout, FederationTimeoutError } from "mf-shield";
import { createFederationRuntime } from "mf-shield/federation";

const loadRemote = createFederationRuntime({
  name: "pokedex_host",
  remoteEntries: {
    stable: { name: "stable", entry: "http://127.0.0.1:4174/mf-manifest.json" }
  },
  shared: {
    react: createSharedSingleton("19.2.5", () => React),
    "react-dom": createSharedSingleton("19.2.5", () => ReactDOM)
  }
});

async function loadWidgetWithSla() {
  try {
    const mod = await withTimeout(loadRemote("stable/Widget"), 800, "stable widget");
    return mod;
  } catch (error) {
    if (error instanceof FederationTimeoutError) {
      // Degrade to a local fallback: the remote missed the SLA.
      return null;
    }
    throw error;
  }
}
```

--------------------------------

### Install mf-shield

Source: https://www.npmjs.com/package/mf-shield/v/0.1.0?activeTab=versions

Install the mf-shield package using pnpm. This command adds the library to your project's dependencies.

```bash
pnpm add mf-shield
```

--------------------------------

### RemoteSlot with Fallback and Retry

Source: https://www.npmjs.com/package/mf-shield?activeTab=dependencies

Demonstrates how to use RemoteSlot to load a remote component, with a fallback UI and a retry mechanism triggered by state changes.

```jsx
import { useState } from "react";
import { RemoteSlot, type RemoteComponent, type RemoteSlotConfig } from "mf-shield/react";

const widgetSlot: RemoteSlotConfig = {
  label: "stable widget",
  timeoutMs: 800, // optional: cuts off slow remotes
  load: async () => (await loadRemote<{ RemoteWidget: RemoteComponent }>("stable/Widget")).RemoteWidget
};

export function WidgetPanel() {
  const [attempt, setAttempt] = useState(0);

  return (
    <section>
      <button type="button" onClick={() => setAttempt(value => value + 1)}>
        Retry
      </button>
      <RemoteSlot config={widgetSlot} retryKey={attempt} />
    </section>
  );
}
```

--------------------------------

### Generate SRI Hash

Source: https://www.npmjs.com/package/mf-shield/v/0.1.0

Use the `openssl` command-line tool to generate the SHA384 hash for a given file, which can then be used with the `createSriPlugin`.

```bash
openssl dgst -sha384 -binary remoteEntry.js | openssl base64 -A
# => paste as "sha384-<output>"
```

--------------------------------

### RemoteSlot with Fallback and Retry

Source: https://www.npmjs.com/package/mf-shield/v/0.1.0?activeTab=versions

Demonstrates how to use RemoteSlot to load a remote component, with a fallback UI and a retry mechanism triggered by state changes.

```jsx
import { useState } from "react";
import { RemoteSlot, type RemoteComponent, type RemoteSlotConfig } from "mf-shield/react";

const widgetSlot: RemoteSlotConfig = {
  label: "stable widget",
  timeoutMs: 800, // optional: cuts off slow remotes
  load: async () => (await loadRemote<{ RemoteWidget: RemoteComponent }>(
```

```jsx
stable/Widget")).RemoteWidget
};

export function WidgetPanel() {
  const [attempt, setAttempt] = useState(0);

  return (
    <section>
      <button type="button" onClick={() => setAttempt(value => value + 1)}>
        Retry
      </button>
      <RemoteSlot config={widgetSlot} retryKey={attempt} />
    </section>
  );
}
```

--------------------------------

### RemoteSlot with Fallback and Retry

Source: https://www.npmjs.com/package/mf-shield/v/0.1.0

Demonstrates how to use RemoteSlot to mount a remote component, provide a fallback UI, and enable retries by changing a key. The load function asynchronously loads the remote component.

```jsx
import { useState } from "react";
import { RemoteSlot, type RemoteComponent, type RemoteSlotConfig } from "mf-shield/react";

const widgetSlot: RemoteSlotConfig = {
  label: "stable widget",
  timeoutMs: 800, // optional: cuts off slow remotes
  load: async () => (await loadRemote<{ RemoteWidget: RemoteComponent }>(
```

```jsx
"stable/Widget"))).RemoteWidget
};

export function WidgetPanel() {
  const [attempt, setAttempt] = useState(0);

  return (
    <section>
      <button type="button" onClick={() => setAttempt(value => value + 1)}>
        Retry
      </button>
      <RemoteSlot config={widgetSlot} retryKey={attempt} />
    </section>
  );
}
```

--------------------------------

### Create Isolated Federation Runtime

Source: https://www.npmjs.com/package/mf-shield/v/0.1.0

Use `createInstanceFederationRuntime` to create an independent Module Federation runtime instance, useful for applying different plugin sets without interfering with existing runtimes.

```javascript
import { createInstanceFederationRuntime } from "mf-shield/federation";

const loadIsolated = createInstanceFederationRuntime({ name: "widgets_host", remoteEntries, plugins: [accessPlugin, fallbackPlugin] });
```

--------------------------------

### Custom Fallback UI for RemoteSlot

Source: https://www.npmjs.com/package/mf-shield?activeTab=dependencies

Illustrates how to provide a custom fallback UI component to RemoteSlot when a remote component fails to load or render.

```jsx
import { RemoteSlot, type RemoteComponent, type RemoteFallbackRenderer, type RemoteSlotConfig } from "mf-shield/react";

const pokedexFallback: RemoteFallbackRenderer = ({ label, error }) => (
  <section className="pokedex-card pokedex-card--fainted">
    <strong>This Pokémon fainted</strong>
    <p>{label} could not be summoned.</p>
    <code>{error instanceof Error ? error.message : String(error)}</code>
  </section>
);

const cardsSlot: RemoteSlotConfig = {
  label: "pokemon cards",
  timeoutMs: 800,
  fallback: pokedexFallback,
  load: async () => (await loadRemote<{ RemoteCards: RemoteComponent }>("stable/Cards")).RemoteCards
};
```

--------------------------------

### RemoteSlot with Fallback and Retry

Source: https://www.npmjs.com/package/mf-shield/v/0.1.0?activeTab=dependents

Demonstrates mounting a remote component with a fallback mechanism. Changing the retryKey remounts the slot to attempt a retry. The timeoutMs option can be used to cut off slow remotes.

```typescript
import { useState } from "react";
import { RemoteSlot, type RemoteComponent, type RemoteSlotConfig } from "mf-shield/react";

const widgetSlot: RemoteSlotConfig = {
  label: "stable widget",
  timeoutMs: 800, // optional: cuts off slow remotes
  load: async () => (await loadRemote<{ RemoteWidget: RemoteComponent }>(
```

```typescript
stable/Widget")).RemoteWidget
};

export function WidgetPanel() {
  const [attempt, setAttempt] = useState(0);

  return (
    <section>
      <button type="button" onClick={() => setAttempt(value => value + 1)}>
        Retry
      </button>
      <RemoteSlot config={widgetSlot} retryKey={attempt} />
    </section>
  );
}

```

--------------------------------

### Validate shared singletons

Source: https://www.npmjs.com/package/mf-shield/v/0.1.0?activeTab=code

Detects `shared` config footguns without throwing. Returns readable warnings (`[]` when clean). `createFederationRuntime` runs it automatically and emits `console.warn("[mf-shield] …")` once per runtime creation; you can also run it standalone.

```APIDOC
## Validate shared singletons (`validateSharedSingletons`)

### Description
Detects `shared` config footguns without throwing. Returns readable warnings (`[]` when clean).

### Usage
```javascript
import { validateSharedSingletons } from "mf-shield";

const warnings = validateSharedSingletons({
  shared: { react: { version: "19.2.5", shareConfig: { singleton: true } } },
  shareStrategy: "version-first"
});
// warnings: missing strictVersion, missing requiredVersion, and 'version-first' + singleton (MF #3209)
```

### Rules
- `singleton: true` without `strictVersion`
- `singleton: true` without `requiredVersion`
- `shareStrategy: 'version-first'` combined with any singleton (it can load multiple instances of the singleton and eager-loads all remote entries at init).
```

--------------------------------

### Create Remote Access Plugin

Source: https://www.npmjs.com/package/mf-shield/v/0.1.0

Use `createRemoteAccessPlugin` to define a policy for accessing remote modules before they are resolved. It can deny access by throwing `RemoteAccessDeniedError` or allow access.

```javascript
import { denyRemoteAccess, allowRemoteAccess } from "mf-shield";
import { createFederationRuntime, createRemoteAccessPlugin } from "mf-shield/federation";

const accessPlugin = createRemoteAccessPlugin({
  policy: remoteName => (remoteName === "legacy" ? denyRemoteAccess("legacy remote disabled") : allowRemoteAccess()),
  onDenied: info => console.warn(`[app] blocked ${info.remote}: ${info.reason}`)
});

const loadRemote = createFederationRuntime({ name: "pokedex_host", remoteEntries, plugins: [accessPlugin] });
```

--------------------------------

### Create Remote Fallback Plugin

Source: https://www.npmjs.com/package/mf-shield/v/0.1.0

Implement `createRemoteFallbackPlugin` to intercept load failures. It allows returning a module object to replace the failed module or `undefined` to propagate the error.

```javascript
import { RemoteAccessDeniedError } from "mf-shield";
import { createFederationRuntime, createRemoteFallbackPlugin } from "mf-shield/federation";
import type { RemoteComponent } from "mf-shield/react";

const LocalFallback: RemoteComponent = () => <section>Local fallback content</section>;

const fallbackPlugin = createRemoteFallbackPlugin({
  fallback: info => {
    // Defer to an access denial: let the guard win.
    if (info.error instanceof RemoteAccessDeniedError) return undefined;
    // Replace a real load failure (lifecycle "onLoad") with a local module.
    return { RemoteWidget: LocalFallback };
  }
});

const loadRemote = createFederationRuntime({ name: "pokedex_host", remoteEntries, plugins: [fallbackPlugin] });
```

--------------------------------

### RemoteSlot with Fallback and Retry

Source: https://www.npmjs.com/package/mf-shield/v/0.1.0?activeTab=code

Demonstrates using RemoteSlot to load a remote component with a configurable timeout and a retry mechanism. The slot will display a fallback UI if loading fails.

```jsx
import { useState } from "react";
import { RemoteSlot, type RemoteComponent, type RemoteSlotConfig } from "mf-shield/react";

const widgetSlot: RemoteSlotConfig = {
  label: "stable widget",
  timeoutMs: 800, // optional: cuts off slow remotes
  load: async () => (await loadRemote<{ RemoteWidget: RemoteComponent }>(
```

```jsx
import { RemoteSlot, type RemoteComponent, type RemoteFallbackRenderer, type RemoteSlotConfig } from "mf-shield/react";

const pokedexFallback: RemoteFallbackRenderer = ({ label, error }) => (
  <section className="pokedex-card pokedex-card--fainted">
    <strong>This Pokémon fainted</strong>
    <p>{label} could not be summoned.</p>
    <code>{error instanceof Error ? error.message : String(error)}</code>
  </section>
);

const cardsSlot: RemoteSlotConfig = {
  label: "pokemon cards",
  timeoutMs: 800,
  fallback: pokedexFallback,
  load: async () => (await loadRemote<{ RemoteCards: RemoteComponent }>(
```

--------------------------------

### Typed Remote Props and Failure Observability

Source: https://www.npmjs.com/package/mf-shield?activeTab=dependencies

Shows how to use RemoteSlotConfig with generic types for remote component props and how to observe status changes and errors.

```javascript
const typedSlot: RemoteSlotConfig<{ userId: string }> = {
  label: "user card",
  props: { userId: "42" }, // flows into the remote
  onStatusChange: status => track("slot", status), // "loading" → "ready" | "failed"
  onError: ({ label, error }) => report(label, error), // deny, reject, timeout, render crash
  load: async () => (await loadRemote<{ UserCard: RemoteComponent<{ userId: string }> }>("stable/UserCard")).UserCard
};
```

--------------------------------

### createSriPlugin

Source: https://www.npmjs.com/package/mf-shield/v/0.1.0?activeTab=readme

Applies Subresource Integrity (SRI) to federated assets, including remoteEntry, chunks, and optionally CSS/preload. It enhances security by ensuring the browser rejects scripts if their bytes do not match the registered hash.

```APIDOC
## createSriPlugin

### Description
Applies Subresource Integrity to federated assets (remoteEntry, chunks, and optionally CSS/preload) via MF's official `createScript` / `createLink` hooks.

### Usage
```javascript
import { createFederationRuntime, createSriPlugin } from "mf-shield/federation";

const loadRemote = createFederationRuntime({
  name: "pokedex_host",
  remoteEntries: { app: { name: "app", entry: "https://cdn.pokedex.example/app/v1.2.3/mf-manifest.json" } },
  plugins: [
    createSriPlugin({
      // exact asset url -> hash "sha384-..."
      integrity: {
        "https://cdn.pokedex.example/app/v1.2.3/remoteEntry.js": "sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8w"
      },
      strict: true,        // default: url with no registered hash -> FederationIntegrityError
      crossOrigin: "anonymous", // default; required for cross-origin SRI
      onViolation: info => console.warn(`[app] no SRI hash for ${info.url}`)
    })
  ]
});
```

### Parameters
- `integrity` (object | function): A map of `url -> hash` or a function `(url) => hash | undefined` for flexible logic.
- `strict` (boolean): If `true` (default), blocks assets without a registered hash with `FederationIntegrityError`. If `false`, allows them through without `integrity`.
- `crossOrigin` (string): Specifies the `crossorigin` attribute for script/link elements. Defaults to `anonymous`.
- `onViolation` (function): Callback function invoked with information about integrity violations.

### Notes
- SRI pins the exact bytes; every remote deploy that changes the bundle must republish the hashes.
- It fits versioned/pinned remotes, not mutable `latest` URLs.
- If a `<script>` with a matching `src` already exists, MF reuses it, and the `createScript` hook is skipped, so pre-existing tags do not get `integrity` applied.

### Generating Hashes
```bash
openssl dgst -sha384 -binary remoteEntry.js | openssl base64 -A
# => paste as "sha384-<output>"
```
```

--------------------------------

### createSriPlugin

Source: https://www.npmjs.com/package/mf-shield

A Module Federation plugin that applies Subresource Integrity (SRI) to federated assets, ensuring the integrity of loaded scripts and other assets. It adds `integrity` and `crossorigin` attributes to script and link elements.

```APIDOC
## createSriPlugin

### Description
Applies Subresource Integrity (SRI) to federated assets (remoteEntry, chunks, and optionally CSS/preload) via MF's official `createScript` / `createLink` hooks. It sets `integrity` + `crossorigin` on the element from a hash you register. If the bytes don't match, the browser rejects the script and the remote never runs.

### Usage
```javascript
import { createFederationRuntime, createSriPlugin } from "mf-shield/federation";

const loadRemote = createFederationRuntime({
  name: "pokedex_host",
  remoteEntries: { app: { name: "app", entry: "https://cdn.pokedex.example/app/v1.2.3/mf-manifest.json" } },
  plugins: [
    createSriPlugin({
      // exact asset url -> hash "sha384-..."
      integrity: {
        "https://cdn.pokedex.example/app/v1.2.3/remoteEntry.js": "sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8w"
      },
      strict: true,        // default: url with no registered hash -> FederationIntegrityError
      crossOrigin: "anonymous", // default; required for cross-origin SRI
      onViolation: info => console.warn(`[app] no SRI hash for ${info.url}`)
    })
  ]
});
```

### Parameters
- `integrity` (object | function): A map of `url -> hash` or a function `(url) => hash | undefined` for flexible hash registration.
- `strict` (boolean): If `true` (default), blocks assets without a registered hash with `FederationIntegrityError`. If `false`, allows assets through without `integrity`.
- `crossOrigin` (string): Specifies the `crossorigin` attribute for script and link elements. Defaults to `"anonymous"`.
- `onViolation` (function): Callback function invoked with information about integrity violations.

### Notes
- SRI pins the exact bytes; every remote deploy that changes the bundle must republish the hashes.
- It fits versioned/pinned remotes, not mutable `latest` URLs.
- If a script tag with a matching `src` already exists, MF reuses it, and the `createScript` hook is skipped, meaning `integrity` won't be applied to pre-existing tags.

### Generating Hashes
```bash
openssl dgst -sha384 -binary remoteEntry.js | openssl base64 -A
# => paste as "sha384-<output>"
```
```

--------------------------------

### Compose with RetryPlugin

Source: https://www.npmjs.com/package/mf-shield/v/0.1.0

Combine MF Shield plugins with official Module Federation plugins like `@module-federation/retry-plugin` for enhanced loading strategies, such as automatic retries on fetch failures.

```bash
pnpm add @module-federation/retry-plugin
```

```javascript
import { RetryPlugin } from "@module-federation/retry-plugin";
import { createFederationRuntime, createRemoteFallbackPlugin } from "mf-shield/federation";

const loadRemote = createFederationRuntime({
  name: "pokedex_host",
  remoteEntries,
  plugins: [
    RetryPlugin({ fetch: { retryTimes: 3 } }),
    createRemoteFallbackPlugin({ fallback: () => ({ RemoteWidget: LocalFallback }) })
  ]
});
```

--------------------------------

### Validate shared singletons

Source: https://www.npmjs.com/package/mf-shield?activeTab=dependencies

Detects potential issues with shared singleton configurations in your federated modules without throwing errors. It returns readable warnings, which are empty if the configuration is clean. This function is automatically run by `createFederationRuntime` but can also be invoked manually for debugging.

```APIDOC
## Validate shared singletons (`validateSharedSingletons`)

### Description
Detects `shared` config footguns without throwing. Returns readable warnings (`[]` when clean). `createFederationRuntime` runs it automatically and emits `console.warn("[mf-shield] …")` once per runtime creation; you can also run it standalone.

### Usage
```javascript
import { validateSharedSingletons } from "mf-shield";

const warnings = validateSharedSingletons({
  shared: { react: { version: "19.2.5", shareConfig: { singleton: true } } },
  shareStrategy: "version-first"
});
// warnings: missing strictVersion, missing requiredVersion, and 'version-first' + singleton (MF #3209)
```

### Rules
- `singleton: true` without `strictVersion`
- `singleton: true` without `requiredVersion`
- `shareStrategy: 'version-first'` combined with any singleton (can lead to multiple instances and eager loading of remote entries).
```

--------------------------------

### Custom Fallback UI for RemoteSlot

Source: https://www.npmjs.com/package/mf-shield/v/0.1.0

Illustrates how to provide a custom fallback UI component to RemoteSlot using the 'fallback' option in the configuration. This custom UI is rendered when the remote component fails to load or render.

```jsx
import { RemoteSlot, type RemoteComponent, type RemoteFallbackRenderer, type RemoteSlotConfig } from "mf-shield/react";

const pokedexFallback: RemoteFallbackRenderer = ({ label, error }) => (
  <section className="pokedex-card pokedex-card--fainted">
    <strong>This Pokémon fainted</strong>
    <p>{label} could not be summoned.</p>
    <code>{error instanceof Error ? error.message : String(error)}</code>
  </section>
);

const cardsSlot: RemoteSlotConfig = {
  label: "pokemon cards",
  timeoutMs: 800,
  fallback: pokedexFallback,
  load: async () => (await loadRemote<{ RemoteCards: RemoteComponent }>(
```

```jsx
"stable/Cards"))).RemoteCards
};
```

--------------------------------

### Typed Remote Props and Failure Observability

Source: https://www.npmjs.com/package/mf-shield/v/0.1.0

Shows how to use RemoteSlotConfig with generic props for type safety and how to observe status changes and errors using onError and onStatusChange callbacks. The props are forwarded to the remote component.

```jsx
const typedSlot: RemoteSlotConfig<{ userId: string }> = {
  label: "user card",
  props: { userId: "42" }, // flows into the remote
  onStatusChange: status => track("slot", status), // "loading" → "ready" | "failed"
  onError: ({ label, error }) => report(label, error), // deny, reject, timeout, render crash
  load: async () => (await loadRemote<{ UserCard: RemoteComponent<{ userId: string }> }>(
```

```jsx
"stable/UserCard"))).UserCard
};
```

--------------------------------

### Create Subresource Integrity Plugin

Source: https://www.npmjs.com/package/mf-shield/v/0.1.0

Integrate `createSriPlugin` to apply Subresource Integrity to federated assets, ensuring the exact bytes of scripts and links are verified. This plugin enhances security by rejecting assets with mismatched hashes. It is designed for versioned or pinned remotes with immutable URLs.

```javascript
import { createFederationRuntime, createSriPlugin } from "mf-shield/federation";

const loadRemote = createFederationRuntime({
  name: "pokedex_host",
  remoteEntries: { app: { name: "app", entry: "https://cdn.pokedex.example/app/v1.2.3/mf-manifest.json" } },
  plugins: [
    createSriPlugin({
      // exact asset url -> hash "sha384-..."
      integrity: {
        "https://cdn.pokedex.example/app/v1.2.3/remoteEntry.js": "sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8w"
      },
      strict: true,        // default: url with no registered hash -> FederationIntegrityError
      crossOrigin: "anonymous", // default; required for cross-origin SRI
      onViolation: info => console.warn(`[app] no SRI hash for ${info.url}`)
    })
  ]
});
```

--------------------------------

### Create Subresource Integrity Plugin

Source: https://www.npmjs.com/package/mf-shield/v/0.1.0?activeTab=code

Applies Subresource Integrity to federated assets by setting the 'integrity' and 'crossorigin' attributes. Ensures the exact bytes of remote assets match the registered hash.

```javascript
import { createFederationRuntime, createSriPlugin } from "mf-shield/federation";

const loadRemote = createFederationRuntime({
  name: "pokedex_host",
  remoteEntries: { app: { name: "app", entry: "https://cdn.pokedex.example/app/v1.2.3/mf-manifest.json" } },
  plugins: [
    createSriPlugin({
      // exact asset url -> hash "sha384-..."
      integrity: {
        "https://cdn.pokedex.example/app/v1.2.3/remoteEntry.js": "sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8w"
      },
      strict: true,        // default: url with no registered hash -> FederationIntegrityError
      crossOrigin: "anonymous", // default; required for cross-origin SRI
      onViolation: info => console.warn(`[app] no SRI hash for ${info.url}`)
    })
  ]
});

```

--------------------------------

### RemoteSlot with Fallback and Retry

Source: https://www.npmjs.com/package/mf-shield?activeTab=dependents

Use RemoteSlot to mount a remote component, providing a fallback UI and a retry mechanism. The retryKey prop remounts the slot to attempt loading again.

```jsx
import { useState } from "react";
import { RemoteSlot, type RemoteComponent, type RemoteSlotConfig } from "mf-shield/react";

const widgetSlot: RemoteSlotConfig = {
  label: "stable widget",
  timeoutMs: 800, // optional: cuts off slow remotes
  load: async () => (await loadRemote<{ RemoteWidget: RemoteComponent }>( "stable/Widget" )).RemoteWidget
};

export function WidgetPanel() {
  const [attempt, setAttempt] = useState(0);

  return (
    <section>
      <button type="button" onClick={() => setAttempt(value => value + 1)}>
        Retry
      </button>
      <RemoteSlot config={widgetSlot} retryKey={attempt} />
    </section>
  );
}
```

--------------------------------

### validateSharedSingletons

Source: https://www.npmjs.com/package/mf-shield/v/0.1.0?activeTab=readme

Detects potential issues in the 'shared' configuration without throwing errors. It returns an array of readable warnings, which is empty if the configuration is clean. This function is automatically invoked by `createFederationRuntime` and can also be called directly for standalone validation.

```APIDOC
## validateSharedSingletons

### Description
Detects `shared` config footguns without throwing. Returns readable warnings (`[]` when clean).

### Usage
```javascript
import { validateSharedSingletons } from "mf-shield";

const warnings = validateSharedSingletons({
  shared: { react: { version: "19.2.5", shareConfig: { singleton: true } } },
  shareStrategy: "version-first"
});
// warnings: missing strictVersion, missing requiredVersion, and 'version-first' + singleton (MF #3209)
```

### Rules
- `singleton: true` without `strictVersion`
- `singleton: true` without `requiredVersion`
- `shareStrategy: 'version-first'` combined with any singleton
```

--------------------------------

### Validate Shared Singletons

Source: https://www.npmjs.com/package/mf-shield/v/0.1.0

Use `validateSharedSingletons` to detect potential issues with shared singleton configurations without throwing errors. It returns an array of warnings, which is empty if the configuration is clean. This function can be run standalone or is automatically invoked by `createFederationRuntime`.

```javascript
import { validateSharedSingletons } from "mf-shield";

const warnings = validateSharedSingletons({
  shared: { react: { version: "19.2.5", shareConfig: { singleton: true } } },
  shareStrategy: "version-first"
});
// warnings: missing strictVersion, missing requiredVersion, and 'version-first' + singleton (MF #3209)
```

--------------------------------

### useCssPoisonGuard

Source: https://www.npmjs.com/package/mf-shield/v/0.1.0?activeTab=readme

A hook that observes the document's head (or a specified root element) to remove global CSS injected by remotes. It supports debouncing style removals for remotes that inject styles in bursts, batching them into a single trailing pass.

```APIDOC
## useCssPoisonGuard

### Description
Observes `document.head` (or a custom `root`) and removes global CSS injected by remotes. Supports debouncing style removals.

### Usage
```javascript
useCssPoisonGuard({ debounceMs: 50, onPoisonRemoved: count => console.warn(`[app] removed ${count} styles`) });
```

### Parameters
- `debounceMs` (number): Optional. Batches removals into a single trailing pass. Defaults to `0` for immediate behavior.
- `onPoisonRemoved` (function): Callback function taken by reference. Called when styles are removed.
```

--------------------------------

### Subresource Integrity

Source: https://www.npmjs.com/package/mf-shield/v/0.1.0?activeTab=code

`createSriPlugin` applies Subresource Integrity to federated assets (remoteEntry, chunks, and optionally CSS/preload) via MF's official `createScript` / `createLink` hooks. It sets `integrity` + `crossorigin` on the element from a hash you register. If the bytes don't match, the browser rejects the script and the remote never runs.

```APIDOC
## Subresource Integrity (`createSriPlugin`)

### Description
Applies Subresource Integrity (SRI) to federated assets to ensure the exact bytes of scripts and links are loaded. The browser rejects assets with mismatched hashes, preventing untrusted code execution.

### Usage
```javascript
import { createFederationRuntime, createSriPlugin } from "mf-shield/federation";

const loadRemote = createFederationRuntime({
  name: "pokedex_host",
  remoteEntries: { app: { name: "app", entry: "https://cdn.pokedex.example/app/v1.2.3/mf-manifest.json" } },
  plugins: [
    createSriPlugin({
      // exact asset url -> hash "sha384-..."
      integrity: {
        "https://cdn.pokedex.example/app/v1.2.3/remoteEntry.js": "sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8w"
      },
      strict: true,        // default: url with no registered hash -> FederationIntegrityError
      crossOrigin: "anonymous", // default; required for cross-origin SRI
      onViolation: info => console.warn(`[app] no SRI hash for ${info.url}`)
    })
  ]
});
```

### Parameters
- `integrity` (object | function): A map of exact asset URLs to their SHA384 hashes, or a function that returns a hash for a given URL.
- `strict` (boolean): If `true` (default), blocks assets without a registered hash. If `false`, allows them through without `integrity`.
- `crossOrigin` (string): Specifies the `crossorigin` attribute for script/link elements. Defaults to `"anonymous"`.
- `onViolation` (function): A callback function executed when an SRI hash mismatch occurs.

### Notes
- SRI pins the exact bytes; every remote deploy that changes the bundle must republish the hashes.
- It fits versioned/pinned remotes, not mutable `latest` URLs.
- If a script tag with a matching `src` already exists, MF reuses it, and the `createScript` hook is skipped, meaning `integrity` will not be applied to pre-existing tags.

### Generating Hashes
```bash
openssl dgst -sha384 -binary remoteEntry.js | openssl base64 -A
# => paste as "sha384-<output>"
```
```

--------------------------------

### Evaluate Remote Access Policy

Source: https://www.npmjs.com/package/mf-shield/v/0.1.0

Use `evaluateRemoteAccess` with a callback that returns `denyRemoteAccess` to define access policies. This decision is made before any remote module is loaded.

```typescript
import { denyRemoteAccess, evaluateRemoteAccess } from "mf-shield";

function canSeeAdminWidget(user: { role: string }) {
  return user.role === "admin";
}

const decision = evaluateRemoteAccess(() =>
  canSeeAdminWidget(currentUser) ? true : denyRemoteAccess("admins only")
);

if (!decision.allowed) {
  console.warn(`blocked: ${decision.reason}`); // "blocked: admins only"
}
```

--------------------------------

### CSS poison with debounce

Source: https://www.npmjs.com/package/mf-shield/v/0.1.0?activeTab=code

`useCssPoisonGuard` observes `document.head` (or a custom `root`) and removes global CSS injected by remotes. On remotes that inject styles in bursts, pass `debounceMs` to batch the removals into a single trailing pass (default `0` = immediate behavior). The `onPoisonRemoved` callback is taken by ref, so changing it does not re-subscribe the observer.

```APIDOC
## CSS poison with debounce (`useCssPoisonGuard`)

### Description
Observes `document.head` (or a custom `root`) and removes global CSS injected by remotes. Batches removals for remotes injecting styles in bursts.

### Usage
```javascript
useCssPoisonGuard({ debounceMs: 50, onPoisonRemoved: count => console.warn(`[app] removed ${count} styles`) });
```

### Parameters
- `debounceMs` (number): Milliseconds to debounce CSS removal. Defaults to `0` for immediate behavior.
- `onPoisonRemoved` (function): Callback function executed when CSS is removed. Receives the count of removed styles.
```

--------------------------------

### Custom Fallback UI for RemoteSlot

Source: https://www.npmjs.com/package/mf-shield

Implements a custom fallback UI for RemoteSlot by providing a `fallback` renderer function in the configuration. This custom UI is displayed when the remote component fails to load or render.

```jsx
import { RemoteSlot, type RemoteComponent, type RemoteFallbackRenderer, type RemoteSlotConfig } from "mf-shield/react";

const pokedexFallback: RemoteFallbackRenderer = ({ label, error }) => (
  <section className="pokedex-card pokedex-card--fainted">
    <strong>This Pokémon fainted</strong>
    <p>{label} could not be summoned.</p>
    <code>{error instanceof Error ? error.message : String(error)}</code>
  </section>
);

const cardsSlot: RemoteSlotConfig = {
  label: "pokemon cards",
  timeoutMs: 800,
  fallback: pokedexFallback,
  load: async () => (await loadRemote<{ RemoteCards: RemoteComponent }>(
```

--------------------------------

### Custom Fallback UI for RemoteSlot

Source: https://www.npmjs.com/package/mf-shield/v/0.1.0?activeTab=versions

Provides a custom fallback UI component for RemoteSlot to render when a remote component fails to load or render. This custom UI replaces the default fallback.

```jsx
import { RemoteSlot, type RemoteComponent, type RemoteFallbackRenderer, type RemoteSlotConfig } from "mf-shield/react";

const pokedexFallback: RemoteFallbackRenderer = ({ label, error }) => (
  <section className="pokedex-card pokedex-card--fainted">
    <strong>This Pokémon fainted</strong>
    <p>{label} could not be summoned.</p>
    <code>{error instanceof Error ? error.message : String(error)}</code>
  </section>
);

const cardsSlot: RemoteSlotConfig = {
  label: "pokemon cards",
  timeoutMs: 800,
  fallback: pokedexFallback,
  load: async () => (await loadRemote<{ RemoteCards: RemoteComponent }>(
```

```jsx
stable/Cards")).RemoteCards
};
```

--------------------------------

### Apply Access Policy to Remote Slot

Source: https://www.npmjs.com/package/mf-shield/v/0.1.0

Configure a `RemoteSlotConfig` with a `canLoad` function that uses `denyRemoteAccess` to enforce policies before the remote module is requested.

```typescript
import type { RemoteSlotConfig } from "mf-shield/react";

const adminSlot: RemoteSlotConfig = {
  label: "admin widget",
  canLoad: () => canSeeAdminWidget(currentUser) ? true : denyRemoteAccess("admins only"),
  load: async () => (await loadRemote<{ AdminWidget: RemoteComponent }>("stable/AdminWidget")).AdminWidget
};
```

--------------------------------

### Subresource Integrity Plugin

Source: https://www.npmjs.com/package/mf-shield/v/0.1.0?activeTab=dependencies

Applies Subresource Integrity (SRI) to federated assets, ensuring the integrity of loaded scripts and other assets by verifying their byte content against provided hashes. This plugin enhances security by preventing the execution of tampered assets.

```APIDOC
## createSriPlugin

### Description
Applies Subresource Integrity to federated assets (remoteEntry, chunks, and optionally CSS/preload) via MF's official `createScript` / `createLink` hooks: it sets `integrity` + `crossorigin` on the element from a hash you register. If the bytes don't match, the browser rejects the script and the remote never runs.

### Usage
```javascript
import { createFederationRuntime, createSriPlugin } from "mf-shield/federation";

const loadRemote = createFederationRuntime({
  name: "pokedex_host",
  remoteEntries: { app: { name: "app", entry: "https://cdn.pokedex.example/app/v1.2.3/mf-manifest.json" } },
  plugins: [
    createSriPlugin({
      // exact asset url -> hash "sha384-..."
      integrity: {
        "https://cdn.pokedex.example/app/v1.2.3/remoteEntry.js": "sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8w"
      },
      strict: true,        // default: url with no registered hash -> FederationIntegrityError
      crossOrigin: "anonymous", // default; required for cross-origin SRI
      onViolation: info => console.warn(`[app] no SRI hash for ${info.url}`)
    })
  ]
});
```

### Parameters
- `integrity` (object | function): A map of `url -> hash` or a function `(url) => hash | undefined` for flexible hash registration.
- `strict` (boolean): If `true` (default), blocks assets without a registered hash with `FederationIntegrityError`. If `false`, allows assets through without `integrity`.
- `crossOrigin` (string): Specifies the `crossorigin` attribute for script/link elements. Defaults to `"anonymous"`.
- `onViolation` (function): A callback function invoked when an SRI hash mismatch occurs. Receives an `info` object containing the `url` of the violated asset.

### Notes
- SRI pins the exact bytes; every remote deploy that changes the bundle must republish the hashes.
- It is best suited for versioned/pinned remotes with immutable URLs per version, not mutable `latest` URLs.
- If a `<script>` with a matching `src` already exists in the DOM, MF reuses it and skips the `createScript` hook, meaning a pre-existing tag for the same URL will not have `integrity` applied.

### Generating Hashes
```bash
openssl dgst -sha384 -binary remoteEntry.js | openssl base64 -A
# => paste as "sha384-<output>"
```
```

--------------------------------

### CSS Poison Guard with Debounce

Source: https://www.npmjs.com/package/mf-shield/v/0.1.0

Employ `useCssPoisonGuard` to monitor `document.head` and remove global CSS injected by remotes. Configure `debounceMs` to batch removals for remotes that inject styles in bursts, with a default of 0 for immediate behavior. The `onPoisonRemoved` callback is stable by reference.

```javascript
useCssPoisonGuard({ debounceMs: 50, onPoisonRemoved: count => console.warn(`[app] removed ${count} styles`) });
```

--------------------------------

### Custom Fallback UI for RemoteSlot

Source: https://www.npmjs.com/package/mf-shield/v/0.1.0?activeTab=dependents

Replaces the default RemoteFallback UI with a custom component using the fallback option in RemoteSlotConfig. This custom UI receives label and error information and handles both load failures and render crashes.

```typescript
import { RemoteSlot, type RemoteComponent, type RemoteFallbackRenderer, type RemoteSlotConfig } from "mf-shield/react";

const pokedexFallback: RemoteFallbackRenderer = ({ label, error }) => (
  <section className="pokedex-card pokedex-card--fainted">
    <strong>This Pokémon fainted</strong>
    <p>{label} could not be summoned.</p>
    <code>{error instanceof Error ? error.message : String(error)}</code>
  </section>
);

const cardsSlot: RemoteSlotConfig = {
  label: "pokemon cards",
  timeoutMs: 800,
  fallback: pokedexFallback,
  load: async () => (await loadRemote<{ RemoteCards: RemoteComponent }>(
```

```typescript
stable/Cards")).RemoteCards
};

```

--------------------------------

### Typed Remote Props and Error Observability

Source: https://www.npmjs.com/package/mf-shield?activeTab=dependents

Configure RemoteSlot with generic props for the remote component and use onError and onStatusChange callbacks to observe loading states and report errors.

```jsx
const typedSlot: RemoteSlotConfig<{ userId: string }> = {
  label: "user card",
  props: { userId: "42" }, // flows into the remote
  onStatusChange: status => track("slot", status), // "loading" → "ready" | "failed"
  onError: ({ label, error }) => report(label, error), // deny, reject, timeout, render crash
  load: async () => (await loadRemote<{ UserCard: RemoteComponent<{ userId: string }> }>( "stable/UserCard" )).UserCard
};
```

--------------------------------

### CSS poison with debounce

Source: https://www.npmjs.com/package/mf-shield/v/0.1.0?activeTab=dependencies

Observes the document's head (or a specified root element) to remove global CSS injected by remotes. It supports debouncing to batch removals for remotes that inject styles in bursts.

```APIDOC
## useCssPoisonGuard

### Description
Observes `document.head` (or a custom `root`) and removes global CSS injected by remotes. On remotes that inject styles in bursts, pass `debounceMs` to batch the removals into a single trailing pass (default `0` = immediate behavior).

### Usage
```javascript
useCssPoisonGuard({ debounceMs: 50, onPoisonRemoved: count => console.warn(`[app] removed ${count} styles`) });
```

### Parameters
- `debounceMs` (number): Optional. The delay in milliseconds to debounce CSS removals. Defaults to 0 for immediate removal.
- `onPoisonRemoved` (function): Optional. A callback function that is invoked when CSS is removed. It receives the count of removed styles.
```

--------------------------------

### Typed Remote Props and Error Handling

Source: https://www.npmjs.com/package/mf-shield/v/0.1.0?activeTab=code

Configures RemoteSlot with generic props for the remote component and provides callbacks for status changes and error reporting. This allows for type-safe prop forwarding and programmatic observation of remote component lifecycle events.

```jsx
const typedSlot: RemoteSlotConfig<{ userId: string }> = {
  label: "user card",
  props: { userId: "42" }, // flows into the remote
  onStatusChange: status => track("slot", status), // "loading" → "ready" | "failed"
  onError: ({ label, error }) => report(label, error), // deny, reject, timeout, render crash
  load: async () => (await loadRemote<{ UserCard: RemoteComponent<{ userId: string }> }>(
```

--------------------------------

### Typed Remote Props and Failure Observability

Source: https://www.npmjs.com/package/mf-shield/v/0.1.0?activeTab=dependents

Configures RemoteSlot with generic typed props for the remote component and provides callbacks for observing status changes and errors. The onError callback reports any failure, while onStatusChange tracks loading transitions.

```typescript
const typedSlot: RemoteSlotConfig<{ userId: string }> = {
  label: "user card",
  props: { userId: "42" }, // flows into the remote
  onStatusChange: status => track("slot", status), // "loading" → "ready" | "failed"
  onError: ({ label, error }) => report(label, error), // deny, reject, timeout, render crash
  load: async () => (await loadRemote<{ UserCard: RemoteComponent<{ userId: string }> }>(
```

```typescript
stable/UserCard")).UserCard
};

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.