import{x as o}from"./iframe-CMPv_g6-.js";import"./preload-helper-PPVm8Dsz.js";const r={title:"Utilities/RTC",tags:["autodocs"],parameters:{docs:{subtitle:"The `rtc` module provides real-time communication between browser tabs and the Brightspot CMS server. Uses BroadcastChannel for cross-tab coordination with leader election, and Server-Sent Events for server communication."},controls:{expanded:!0}}},e={render:()=>o`
    <div class="space-y-6 text-sm">
      <div>
        <h3 class="mb-2 font-bold">Overview</h3>
        <p class="mb-4 text-gray-700">
          The RTC module manages real-time updates between the CMS server and multiple browser tabs. It uses a
          leader-election pattern so only one tab maintains a server connection, then broadcasts messages to other tabs
          via BroadcastChannel.
        </p>
      </div>

      <div class="rounded border border-gray-200 bg-gray-50 p-4">
        <h4 class="mb-2 font-bold">Architecture Diagram</h4>
        <pre class="leading-relaxed text-xs text-gray-700">
┌─────────────────────────────────────────────────┐
│                  CMS Server                     │
│              (Server-Sent Events)               │
└────────────────────┬────────────────────────────┘
                     │
              ┌──────┴──────┐
              │ Leader Tab  │  ← Socket connection
              │  (Tab 1)    │
              └──────┬──────┘
                     │  BroadcastChannel
          ┌──────────┼──────────┐
          │          │          │
     ┌────┴───┐ ┌───┴────┐ ┌──┴─────┐
     │ Tab 2  │ │ Tab 3  │ │ Tab 4  │
     └────────┘ └────────┘ └────────┘</pre
        >
      </div>

      <div>
        <h3 class="mb-2 font-bold">Key Concepts</h3>
        <ul class="list-inside list-disc space-y-1 text-gray-700">
          <li><strong>Leader election</strong>: One tab owns the server connection; others communicate through it</li>
          <li>
            <strong>State restore</strong>: When connecting, each tab restores its subscribed states from the server
          </li>
          <li><strong>Broadcasts</strong>: Server pushes events (publish, assignment, conversation) to all tabs</li>
          <li>
            <strong>Graceful degradation</strong>: When RTC is disabled or no user session exists, all methods become
            no-ops
          </li>
        </ul>
      </div>
    </div>
  `,parameters:{docs:{description:{story:"High-level architecture of the RTC (Real-Time Communication) system."}}}},t={render:()=>o`
    <div class="space-y-4 text-sm">
      <div>
        <h3 class="mb-2 font-bold">Receiving Broadcasts</h3>
        <pre
          class="overflow-x-auto rounded bg-gray-900 p-4 text-gray-100"
        ><code>import rtc from '@brightspot/ui/util/rtc.js'

// Listen for content publish events
rtc.receive('com.psddev.cms.tool.page.content.PublishBroadcast', (data) => {
  console.log('Content published:', data)
  refreshContent()
})

// Listen once (single-fire)
rtc.receiveOnce('com.psddev.cms.conversation.PostBroadcast', () => {
  showNotification('New conversation post')
})</code></pre>
      </div>

      <div>
        <h3 class="mb-2 font-bold">State Management</h3>
        <pre
          class="overflow-x-auto rounded bg-gray-900 p-4 text-gray-100"
        ><code>// Initialize a stateful connection (auto-disconnects on page unload)
rtc.initialize('com.example.MyState', { id: '123' }, () => {
  console.log('State restored from server')
})

// Restore state without unload handling
rtc.restore('com.example.MyState', { id: '123' }, () => {
  console.log('State restored')
})</code></pre>
      </div>

      <div>
        <h3 class="mb-2 font-bold">Executing Actions</h3>
        <pre class="overflow-x-auto rounded bg-gray-900 p-4 text-gray-100"><code>// Send an action to the server
rtc.execute('com.example.MyAction', { id: '123', value: 'updated' })</code></pre>
      </div>

      <div>
        <h3 class="mb-2 font-bold">API Reference</h3>
        <ul class="space-y-2">
          <li>
            <code class="rounded bg-gray-200 px-1">rtc.initialize(state, data, callback)</code> — Connect to server
            state with automatic unload cleanup
          </li>
          <li>
            <code class="rounded bg-gray-200 px-1">rtc.restore(state, data, callback)</code> — Restore state from server
            without unload handling
          </li>
          <li>
            <code class="rounded bg-gray-200 px-1">rtc.receive(broadcast, callback)</code> — Subscribe to broadcast
            events (fires on every occurrence)
          </li>
          <li>
            <code class="rounded bg-gray-200 px-1">rtc.receiveOnce(broadcast, callback)</code> — Subscribe to a
            broadcast event (fires once)
          </li>
          <li>
            <code class="rounded bg-gray-200 px-1">rtc.execute(action, data)</code> — Send an action to the server
          </li>
        </ul>
      </div>

      <div>
        <h3 class="mb-2 font-bold">Configuration</h3>
        <ul class="list-inside list-disc space-y-1 text-gray-700">
          <li>
            <code class="rounded bg-gray-200 px-1">window.DISABLE_RTC</code> — Set to
            <code class="rounded bg-gray-200 px-1">true</code> to disable all RTC functionality
          </li>
          <li>
            <code class="rounded bg-gray-200 px-1">window.ROOT_PATH</code> — Server root path for the
            <code class="rounded bg-gray-200 px-1">/_rtc</code> endpoint
          </li>
          <li>
            <code class="rounded bg-gray-200 px-1">data-user-id</code> on
            <code class="rounded bg-gray-200 px-1">&lt;html&gt;</code> — Required for RTC to activate
          </li>
        </ul>
      </div>
    </div>
  `,parameters:{docs:{description:{story:"Code examples and API documentation for the RTC module."}}}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div class="space-y-6 text-sm">
      <div>
        <h3 class="mb-2 font-bold">Overview</h3>
        <p class="mb-4 text-gray-700">
          The RTC module manages real-time updates between the CMS server and multiple browser tabs. It uses a
          leader-election pattern so only one tab maintains a server connection, then broadcasts messages to other tabs
          via BroadcastChannel.
        </p>
      </div>

      <div class="rounded border border-gray-200 bg-gray-50 p-4">
        <h4 class="mb-2 font-bold">Architecture Diagram</h4>
        <pre class="leading-relaxed text-xs text-gray-700">
┌─────────────────────────────────────────────────┐
│                  CMS Server                     │
│              (Server-Sent Events)               │
└────────────────────┬────────────────────────────┘
                     │
              ┌──────┴──────┐
              │ Leader Tab  │  ← Socket connection
              │  (Tab 1)    │
              └──────┬──────┘
                     │  BroadcastChannel
          ┌──────────┼──────────┐
          │          │          │
     ┌────┴───┐ ┌───┴────┐ ┌──┴─────┐
     │ Tab 2  │ │ Tab 3  │ │ Tab 4  │
     └────────┘ └────────┘ └────────┘</pre
        >
      </div>

      <div>
        <h3 class="mb-2 font-bold">Key Concepts</h3>
        <ul class="list-inside list-disc space-y-1 text-gray-700">
          <li><strong>Leader election</strong>: One tab owns the server connection; others communicate through it</li>
          <li>
            <strong>State restore</strong>: When connecting, each tab restores its subscribed states from the server
          </li>
          <li><strong>Broadcasts</strong>: Server pushes events (publish, assignment, conversation) to all tabs</li>
          <li>
            <strong>Graceful degradation</strong>: When RTC is disabled or no user session exists, all methods become
            no-ops
          </li>
        </ul>
      </div>
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: \`High-level architecture of the RTC (Real-Time Communication) system.\`
      }
    }
  }
}`,...e.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div class="space-y-4 text-sm">
      <div>
        <h3 class="mb-2 font-bold">Receiving Broadcasts</h3>
        <pre
          class="overflow-x-auto rounded bg-gray-900 p-4 text-gray-100"
        ><code>import rtc from '@brightspot/ui/util/rtc.js'

// Listen for content publish events
rtc.receive('com.psddev.cms.tool.page.content.PublishBroadcast', (data) => {
  console.log('Content published:', data)
  refreshContent()
})

// Listen once (single-fire)
rtc.receiveOnce('com.psddev.cms.conversation.PostBroadcast', () => {
  showNotification('New conversation post')
})</code></pre>
      </div>

      <div>
        <h3 class="mb-2 font-bold">State Management</h3>
        <pre
          class="overflow-x-auto rounded bg-gray-900 p-4 text-gray-100"
        ><code>// Initialize a stateful connection (auto-disconnects on page unload)
rtc.initialize('com.example.MyState', { id: '123' }, () => {
  console.log('State restored from server')
})

// Restore state without unload handling
rtc.restore('com.example.MyState', { id: '123' }, () => {
  console.log('State restored')
})</code></pre>
      </div>

      <div>
        <h3 class="mb-2 font-bold">Executing Actions</h3>
        <pre class="overflow-x-auto rounded bg-gray-900 p-4 text-gray-100"><code>// Send an action to the server
rtc.execute('com.example.MyAction', { id: '123', value: 'updated' })</code></pre>
      </div>

      <div>
        <h3 class="mb-2 font-bold">API Reference</h3>
        <ul class="space-y-2">
          <li>
            <code class="rounded bg-gray-200 px-1">rtc.initialize(state, data, callback)</code> — Connect to server
            state with automatic unload cleanup
          </li>
          <li>
            <code class="rounded bg-gray-200 px-1">rtc.restore(state, data, callback)</code> — Restore state from server
            without unload handling
          </li>
          <li>
            <code class="rounded bg-gray-200 px-1">rtc.receive(broadcast, callback)</code> — Subscribe to broadcast
            events (fires on every occurrence)
          </li>
          <li>
            <code class="rounded bg-gray-200 px-1">rtc.receiveOnce(broadcast, callback)</code> — Subscribe to a
            broadcast event (fires once)
          </li>
          <li>
            <code class="rounded bg-gray-200 px-1">rtc.execute(action, data)</code> — Send an action to the server
          </li>
        </ul>
      </div>

      <div>
        <h3 class="mb-2 font-bold">Configuration</h3>
        <ul class="list-inside list-disc space-y-1 text-gray-700">
          <li>
            <code class="rounded bg-gray-200 px-1">window.DISABLE_RTC</code> — Set to
            <code class="rounded bg-gray-200 px-1">true</code> to disable all RTC functionality
          </li>
          <li>
            <code class="rounded bg-gray-200 px-1">window.ROOT_PATH</code> — Server root path for the
            <code class="rounded bg-gray-200 px-1">/_rtc</code> endpoint
          </li>
          <li>
            <code class="rounded bg-gray-200 px-1">data-user-id</code> on
            <code class="rounded bg-gray-200 px-1">&lt;html&gt;</code> — Required for RTC to activate
          </li>
        </ul>
      </div>
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: \`Code examples and API documentation for the RTC module.\`
      }
    }
  }
}`,...t.parameters?.docs?.source}}};const n=["Architecture","UsageExample"];export{e as Architecture,t as UsageExample,n as __namedExportsOrder,r as default};
