ViewShield integration files (idenforcer.com/viewshield/includes/)
================================================================

These files match the official live demo styling and engine settings.

CONTENTS
--------
viewshield-protected.css   Standard styling for [data-protected] fields (light + dark)
viewshield-defaults.js     Shared presets: ViewShieldPresets.resolve("light"|"dark")
viewshield-init.sample.js  Copy, set licenseKey + THEME, load after engine scripts

LIGHT & DARK MODE
-----------------
ViewShield supports two display presets with the same compact overlay (tight text band,
tile-area static, tuned capture resistance):

  Light mode — dark text on white/light panels
  Dark mode  — white text on dark panels (IDEnforcer Cloud default)

PEEK TO READ (included in presets)
----------------------------------
  peekOnHover: true       — hover to show clear text (desktop)
  peekOnClickMs: 2000    — tap to show clear text for 2 seconds (mobile)

1. Set the HTML theme attribute (for CSS field color):

   <html data-viewshield-theme="light">   <!-- or "dark" -->

2. Load defaults and pick a preset at init:

   <script src="/viewshield/includes/viewshield-defaults.js"></script>
   <script>
     ViewShield.init(Object.assign({}, ViewShieldPresets.resolve("dark"), {
       licenseKey: "VS-XXXX-XXXX-XXXX"
     }));
   </script>

3. Match panel background (dark mode only, optional):

   If your dark panel is not #1e2432, override paletteOverride.paper in init:

   paletteOverride: { paper: { r: 15, g: 23, b: 42, a: 1 }, ink: { r: 255, g: 255, b: 255, a: 1 } }

IDEnforcer Cloud System: toggle Light/Dark in Settings → ViewShield (no code changes).

SELF-HOSTED SETUP
-----------------
1. Download: https://idenforcer.com/viewshield/download.php

2. Upload the viewshield/ folder to your website.

3. In <head>:
   <link rel="stylesheet" href="/viewshield/includes/viewshield-protected.css">
   <script>document.documentElement.setAttribute("data-viewshield-theme","dark");</script>

4. Before </body>:
   <script src="/viewshield/TemporalTileEngine.js"></script>
   <script src="/viewshield/ViewShieldV5.js"></script>
   <script src="/viewshield/includes/viewshield-defaults.js"></script>
   <script src="/viewshield/includes/viewshield-init.js"></script>

CDN (no download)
-----------------
<link rel="stylesheet" href="https://idenforcer.com/viewshield/includes/viewshield-protected.css">
<script src="https://idenforcer.com/viewshield/TemporalTileEngine.js"></script>
<script src="https://idenforcer.com/viewshield/ViewShieldV5.js"></script>
<script src="https://idenforcer.com/viewshield/includes/viewshield-defaults.js"></script>
<script>
  document.documentElement.setAttribute("data-viewshield-theme", "dark");
  ViewShield.init(Object.assign({}, ViewShieldPresets.resolve("dark"), {
    licenseKey: "YOUR-KEY"
  }));
</script>

Documentation: https://idenforcer.com/viewshield/
Live demo:       https://idenforcer.com/viewshield/example/
