@brightspot/ui 1.2.0 → 1.4.0

package/dist/storybook/assets/Rtc.stories-BrTAIAi1.js

@@ -0,0 +1,281 @@
+import{x as o}from"./iframe-lTczLWsL.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="text-xs leading-relaxed 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/dist/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="text-xs leading-relaxed 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/dist/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};

package/dist/storybook/assets/{ScrollShadow.stories-BmwSRNje.js → ScrollShadow.stories-DHcKhkag.js}

@@ -1,4 +1,4 @@
-import{x as a}from"./iframe-Z4F0Cgki.js";import"./preload-helper-PPVm8Dsz.js";const l=({theme:e="btu-scrollshadow-25"})=>{const r=new Array(100).fill(0).map((s,t)=>`Item ${t+1}`);return a`
+import{x as a}from"./iframe-lTczLWsL.js";import"./preload-helper-PPVm8Dsz.js";const l=({theme:e="btu-scrollshadow-25"})=>{const r=new Array(100).fill(0).map((s,t)=>`Item ${t+1}`);return a`
     <style>
       :root {
         --can-scroll:   ;

package/dist/storybook/assets/{Throttle.stories-DBj-9rhV.js → Throttle.stories-cSYT_BXu.js}

@@ -1,4 +1,4 @@
-import{x as u}from"./iframe-Z4F0Cgki.js";import"./preload-helper-PPVm8Dsz.js";function v(e,t){if(e<=0)return t;let n,o=0;return function(){if(n)return;const r=Date.now(),s=e-r+o;s<=0?(o=r,t.apply(this,[...arguments])):n=setTimeout(()=>{o=r,n=void 0,t.apply(this,[...arguments])},s)}}const x={title:"Utilities/Throttle",tags:["autodocs"],parameters:{docs:{subtitle:"The `throttle` utility function limits how often a function can execute, ensuring it runs at most once per specified interval. Useful for high-frequency events like scroll, resize, or mousemove."},controls:{expanded:!0}},argTypes:{interval:{control:{type:"number",min:0,max:2e3,step:50},description:"Throttle interval in milliseconds"}},args:{interval:200}},a={render:e=>{const t=`throttle-${Math.random().toString(36).substring(2,9)}`;let n=0,o=0;const r=()=>{const h=document.getElementById(`${t}-normal-count`),m=document.getElementById(`${t}-throttled-count`);h&&(h.textContent=String(n)),m&&(m.textContent=String(o))},s=v(e.interval,()=>{o++,r()}),d=()=>{n++,r()},l=()=>{d(),s()};return u`
+import{x as u}from"./iframe-lTczLWsL.js";import"./preload-helper-PPVm8Dsz.js";function v(e,t){if(e<=0)return t;let n,o=0;return function(){if(n)return;const r=Date.now(),s=e-r+o;s<=0?(o=r,t.apply(this,[...arguments])):n=setTimeout(()=>{o=r,n=void 0,t.apply(this,[...arguments])},s)}}const x={title:"Utilities/Throttle",tags:["autodocs"],parameters:{docs:{subtitle:"The `throttle` utility function limits how often a function can execute, ensuring it runs at most once per specified interval. Useful for high-frequency events like scroll, resize, or mousemove."},controls:{expanded:!0}},argTypes:{interval:{control:{type:"number",min:0,max:2e3,step:50},description:"Throttle interval in milliseconds"}},args:{interval:200}},a={render:e=>{const t=`throttle-${Math.random().toString(36).substring(2,9)}`;let n=0,o=0;const r=()=>{const h=document.getElementById(`${t}-normal-count`),m=document.getElementById(`${t}-throttled-count`);h&&(h.textContent=String(n)),m&&(m.textContent=String(o))},s=v(e.interval,()=>{o++,r()}),d=()=>{n++,r()},l=()=>{d(),s()};return u`
       <div class="space-y-4">
         <div class="text-base">
           <p class="mb-2">