{/* This file is NOT rendered directly. Sections are imported by framework pages. */}

<section id="intro">
  `DevTools` is a floating panel that shows the internal state of the consent manager. Use it during development to inspect consent values, geolocation results, loaded scripts, and debug consent flows. Also exported as `C15TDevTools` if you need to avoid naming conflicts with other devtools.

  > ℹ️ **Info:**
  > DevTools should only be included in development builds. The component renders nothing to the React tree - it injects directly into document.body.

  ## Installation

  DevTools lives in a separate package to keep it out of production bundles:

  ```bash
  bun add -D @c15t/dev-tools
  ```
</section>

<section id="customization">
  ## Configuration

  ```tsx
  <DevTools
    position="bottom-right"  // 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
    defaultOpen={false}       // Start with panel open
    namespace="c15tStore"     // Store namespace to connect to
    disabled={false}          // Disable without removing from tree
  />
  ```

  ## Panels

  | Panel        | What it shows                                                       |
  | ------------ | ------------------------------------------------------------------- |
  | **Consents** | Current consent state for all categories                            |
  | **Location** | Detected jurisdiction, country, region, and consent model           |
  | **Scripts**  | Configured scripts and their load status                            |
  | **IAB**      | IAB TCF state (when enabled) - TC string, vendor consents, purposes |
  | **Events**   | Timeline of consent events and state changes                        |
  | **Actions**  | Buttons to trigger consent actions (accept all, reject all, reset)  |
</section>

<section id="props">
  ## Props

  | Property | Type                 | Description                                                              | Default | Required |
  | :------- | :------------------- | :----------------------------------------------------------------------- | :------ | :------: |
  | disabled | boolean \| undefined | Whether the DevTools should be disabled&#xA;Useful for production builds | false   | Optional |
</section>