@brightspot/ui 1.3.0 → 1.4.0

package/dist/storybook/assets/Debounce.stories-BXx3CKvQ.js

@@ -0,0 +1,199 @@
+import{x as c}from"./iframe-lTczLWsL.js";import"./preload-helper-PPVm8Dsz.js";function p(n,e){if(n<=0)return e;let t;return function(){clearTimeout(t),t=setTimeout(()=>{t=void 0,e.apply(this,[...arguments])},n)}}const g={title:"Utilities/Debounce",tags:["autodocs"],parameters:{docs:{subtitle:"The `debounce` utility delays function execution until a specified wait period has elapsed since the last invocation. Useful for search inputs, form validation, and window resize handlers."},controls:{expanded:!0}},argTypes:{wait:{control:{type:"number",min:0,max:2e3,step:50},description:"Debounce wait time in milliseconds"}},args:{wait:300}},o={render:n=>{const e=`debounce-${Math.random().toString(36).substring(2,9)}`;let t=0,i=0;const d=()=>{const a=document.getElementById(`${e}-normal-count`),r=document.getElementById(`${e}-debounced-count`);a&&(a.textContent=String(t)),r&&(r.textContent=String(i))},l=p(n.wait,()=>{i++,d()}),u=()=>{t++,d(),l()};return c`
+      <div class="space-y-4">
+        <div class="text-base">
+          <p class="mb-2">
+            Type in the input below. The normal counter increments on every keystroke, while the debounced counter only
+            fires after ${n.wait}ms of inactivity.
+          </p>
+        </div>
+
+        <input
+          @input=${u}
+          type="text"
+          placeholder="Start typing..."
+          class="w-full rounded border-2 border-gray-300 px-4 py-2 focus:border-blue-500 focus:outline-none"
+        />
+
+        <div class="flex justify-around">
+          <div>
+            <div class="text-xs text-gray-500">Keystrokes</div>
+            <div id="${e}-normal-count" class="text-2xl font-bold text-gray-900">0</div>
+          </div>
+          <div>
+            <div class="text-xs text-gray-500">Debounced calls (${n.wait}ms)</div>
+            <div id="${e}-debounced-count" class="text-primary-600 text-2xl font-bold">0</div>
+          </div>
+        </div>
+
+        <button
+          @click=${()=>{t=0,i=0,d()}}
+          class="rounded bg-gray-200 px-4 py-2 hover:bg-gray-300"
+        >
+          Reset Counters
+        </button>
+      </div>
+    `},parameters:{docs:{description:{story:"Interactive example showing debounce in action. Type rapidly in the input to see how the debounced handler waits for a pause before executing."}}}},s={render:()=>c`
+    <div class="space-y-4 text-sm">
+      <div>
+        <h3 class="mb-2 font-bold">Basic Usage</h3>
+        <pre
+          class="overflow-x-auto rounded bg-gray-900 p-4 text-gray-100"
+        ><code>import { debounce } from '@brightspot/ui/dist/util/debounce.js'
+
+const handleSearch = debounce(300, () => {
+  console.log('Search triggered after 300ms of inactivity')
+})
+
+input.addEventListener('input', handleSearch)</code></pre>
+      </div>
+
+      <div>
+        <h3 class="mb-2 font-bold">Debounce vs Throttle</h3>
+        <ul class="list-inside list-disc space-y-1 text-gray-700">
+          <li><strong>Debounce</strong>: Waits until activity stops, then fires once</li>
+          <li><strong>Throttle</strong>: Fires at regular intervals during activity</li>
+          <li>Use debounce for search inputs, form validation, window resize end</li>
+          <li>Use throttle for scroll handlers, mouse tracking, progress updates</li>
+        </ul>
+      </div>
+
+      <div>
+        <h3 class="mb-2 font-bold">Parameters</h3>
+        <ul class="space-y-2">
+          <li>
+            <code class="rounded bg-gray-200 px-1">wait</code> (number): Delay in milliseconds. If 0, the function
+            passes through unchanged.
+          </li>
+          <li><code class="rounded bg-gray-200 px-1">fn</code> (function): The function to debounce</li>
+        </ul>
+      </div>
+
+      <div>
+        <h3 class="mb-2 font-bold">Returns</h3>
+        <p class="text-gray-700">
+          A debounced version of the input function that delays execution until
+          <code class="rounded bg-gray-200 px-1">wait</code> milliseconds have elapsed since the last call.
+        </p>
+      </div>
+    </div>
+  `,parameters:{docs:{description:{story:"Code examples and documentation for using the debounce utility."}}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const instanceId = \`debounce-\${Math.random().toString(36).substring(2, 9)}\`;
+    let normalCount = 0;
+    let debouncedCount = 0;
+    const updateCounts = () => {
+      const normalEl = document.getElementById(\`\${instanceId}-normal-count\`);
+      const debouncedEl = document.getElementById(\`\${instanceId}-debounced-count\`);
+      if (normalEl) normalEl.textContent = String(normalCount);
+      if (debouncedEl) debouncedEl.textContent = String(debouncedCount);
+    };
+    const handleDebounced = debounce(args.wait, () => {
+      debouncedCount++;
+      updateCounts();
+    });
+    const handleInput = () => {
+      normalCount++;
+      updateCounts();
+      handleDebounced();
+    };
+    return html\`
+      <div class="space-y-4">
+        <div class="text-base">
+          <p class="mb-2">
+            Type in the input below. The normal counter increments on every keystroke, while the debounced counter only
+            fires after \${args.wait}ms of inactivity.
+          </p>
+        </div>
+
+        <input
+          @input=\${handleInput}
+          type="text"
+          placeholder="Start typing..."
+          class="w-full rounded border-2 border-gray-300 px-4 py-2 focus:border-blue-500 focus:outline-none"
+        />
+
+        <div class="flex justify-around">
+          <div>
+            <div class="text-xs text-gray-500">Keystrokes</div>
+            <div id="\${instanceId}-normal-count" class="text-2xl font-bold text-gray-900">0</div>
+          </div>
+          <div>
+            <div class="text-xs text-gray-500">Debounced calls (\${args.wait}ms)</div>
+            <div id="\${instanceId}-debounced-count" class="text-primary-600 text-2xl font-bold">0</div>
+          </div>
+        </div>
+
+        <button
+          @click=\${() => {
+      normalCount = 0;
+      debouncedCount = 0;
+      updateCounts();
+    }}
+          class="rounded bg-gray-200 px-4 py-2 hover:bg-gray-300"
+        >
+          Reset Counters
+        </button>
+      </div>
+    \`;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: \`Interactive example showing debounce in action. Type rapidly in the input to see how the debounced handler waits for a pause before executing.\`
+      }
+    }
+  }
+}`,...o.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <div class="space-y-4 text-sm">
+      <div>
+        <h3 class="mb-2 font-bold">Basic Usage</h3>
+        <pre
+          class="overflow-x-auto rounded bg-gray-900 p-4 text-gray-100"
+        ><code>import { debounce } from '@brightspot/ui/dist/util/debounce.js'
+
+const handleSearch = debounce(300, () => {
+  console.log('Search triggered after 300ms of inactivity')
+})
+
+input.addEventListener('input', handleSearch)</code></pre>
+      </div>
+
+      <div>
+        <h3 class="mb-2 font-bold">Debounce vs Throttle</h3>
+        <ul class="list-inside list-disc space-y-1 text-gray-700">
+          <li><strong>Debounce</strong>: Waits until activity stops, then fires once</li>
+          <li><strong>Throttle</strong>: Fires at regular intervals during activity</li>
+          <li>Use debounce for search inputs, form validation, window resize end</li>
+          <li>Use throttle for scroll handlers, mouse tracking, progress updates</li>
+        </ul>
+      </div>
+
+      <div>
+        <h3 class="mb-2 font-bold">Parameters</h3>
+        <ul class="space-y-2">
+          <li>
+            <code class="rounded bg-gray-200 px-1">wait</code> (number): Delay in milliseconds. If 0, the function
+            passes through unchanged.
+          </li>
+          <li><code class="rounded bg-gray-200 px-1">fn</code> (function): The function to debounce</li>
+        </ul>
+      </div>
+
+      <div>
+        <h3 class="mb-2 font-bold">Returns</h3>
+        <p class="text-gray-700">
+          A debounced version of the input function that delays execution until
+          <code class="rounded bg-gray-200 px-1">wait</code> milliseconds have elapsed since the last call.
+        </p>
+      </div>
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: \`Code examples and documentation for using the debounce utility.\`
+      }
+    }
+  }
+}`,...s.parameters?.docs?.source}}};const h=["Interactive","UsageExample"];export{o as Interactive,s as UsageExample,h as __namedExportsOrder,g as default};

package/dist/storybook/assets/{Events.stories-DD9wfoHi.js → Events.stories-PBeiuWQn.js}

@@ -1,4 +1,4 @@
-import{x as d}from"./iframe-D-tG1MVV.js";import"./preload-helper-PPVm8Dsz.js";var n=Object.freeze,r=Object.defineProperty,s=(t,i)=>n(r(t,"raw",{value:n(t.slice())})),o;const l={title:"Mixins/Events",tags:["autodocs"],parameters:{docs:{subtitle:"Events inherited from EventEmitterMixin",description:{component:`
+import{x as d}from"./iframe-lTczLWsL.js";import"./preload-helper-PPVm8Dsz.js";var n=Object.freeze,r=Object.defineProperty,s=(t,i)=>n(r(t,"raw",{value:n(t.slice())})),o;const l={title:"Mixins/Events",tags:["autodocs"],parameters:{docs:{subtitle:"Events inherited from EventEmitterMixin",description:{component:`
 <h3>EventEmitterMixin Events</h3>
 
 <p>All Brightspot UI components that extend EventEmitterMixin emit the following lifecycle events in addition to those inherited from LitElement. These events use CustomEvent and bubble through the DOM with <code>composed: true</code>, meaning they cross shadow DOM boundaries.</p>

package/dist/storybook/assets/{Heading.stories-D-Pvm7NG.js → Heading.stories-Djkl0MoC.js}

@@ -1,3 +1,3 @@
-import{x as s}from"./iframe-D-tG1MVV.js";import"./preload-helper-PPVm8Dsz.js";const r=({size:t})=>s` <div class=${[`btu-heading-${t}`].join(" ")}>Heading</div> `,o={title:"CSS Plugins/Heading",component:"btu-heading",tags:["autodocs"],parameters:{docs:{subtitle:"This Tailwind CSS plugin provides the `.btu-heading` utility class for styling headings. It supports five different sizes, from 1 (largest) to 5 (smallest). Apply the class to `<h1>` through `<h5>` elements to style them accordingly."},controls:{expanded:!0}},render:t=>r(t),argTypes:{size:{control:{type:"range",min:1,max:5,step:1},description:"Heading size from 1 to 5, where 1 is the largest and 5 is the smallest."}},args:{size:1}},e={args:{}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
+import{x as s}from"./iframe-lTczLWsL.js";import"./preload-helper-PPVm8Dsz.js";const r=({size:t})=>s` <div class=${[`btu-heading-${t}`].join(" ")}>Heading</div> `,o={title:"CSS Plugins/Heading",component:"btu-heading",tags:["autodocs"],parameters:{docs:{subtitle:"This Tailwind CSS plugin provides the `.btu-heading` utility class for styling headings. It supports five different sizes, from 1 (largest) to 5 (smallest). Apply the class to `<h1>` through `<h5>` elements to style them accordingly."},controls:{expanded:!0}},render:t=>r(t),argTypes:{size:{control:{type:"range",min:1,max:5,step:1},description:"Heading size from 1 to 5, where 1 is the largest and 5 is the smallest."}},args:{size:1}},e={args:{}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
   args: {}
 }`,...e.parameters?.docs?.source}}};const n=["Default"];export{e as Default,n as __namedExportsOrder,o as default};

package/dist/storybook/assets/{Icon.stories-BbR3S56H.js → Icon.stories-Cam1fyud.js}

@@ -1,4 +1,4 @@
-import{g as d,x as r}from"./iframe-D-tG1MVV.js";import"./preload-helper-PPVm8Dsz.js";const p="0.508.0",b={version:p},l=b.version,{events:u,args:m,argTypes:t}=d("btu-icon"),g=["xs","sm","md","lg","xl"],x=["ai","error","gray","primary","purple","rose","success","teal","warning"],v={title:"Components/Icon",component:"btu-icon",tags:["autodocs"],parameters:{docs:{subtitle:"An icon component using Lucide icons with built-in support for custom colors and sizes.",description:{component:`
+import{g as d,x as r}from"./iframe-lTczLWsL.js";import"./preload-helper-PPVm8Dsz.js";const p="0.508.0",b={version:p},l=b.version,{events:u,args:m,argTypes:t}=d("btu-icon"),g=["xs","sm","md","lg","xl"],x=["ai","error","gray","primary","purple","rose","success","teal","warning"],v={title:"Components/Icon",component:"btu-icon",tags:["autodocs"],parameters:{docs:{subtitle:"An icon component using Lucide icons with built-in support for custom colors and sizes.",description:{component:`
 <strong>When to use:</strong>
 <ul>
   <li>To visually reinforce actions, states, or categories</li>

package/dist/storybook/assets/{LinearProgress.stories-B9XHLvVn.js → LinearProgress.stories-BDNoYIJu.js}

@@ -1,4 +1,4 @@
-import{g as I,E as h,x as T}from"./iframe-D-tG1MVV.js";import"./preload-helper-PPVm8Dsz.js";const{events:D,args:V,argTypes:g}=I("btu-linear-progress"),k={title:"Components/Linear Progress",component:"btu-linear-progress",tags:["autodocs"],parameters:{docs:{subtitle:"A horizontal progress bar for showing task completion",description:{component:`
+import{g as I,E as h,x as T}from"./iframe-lTczLWsL.js";import"./preload-helper-PPVm8Dsz.js";const{events:D,args:V,argTypes:g}=I("btu-linear-progress"),k={title:"Components/Linear Progress",component:"btu-linear-progress",tags:["autodocs"],parameters:{docs:{subtitle:"A horizontal progress bar for showing task completion",description:{component:`
 <h3>When to use:</h3>
 <ul>
   <li>To show progress of a specific task with known completion percentage</li>

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-CHFpB4Zf.js → ScrollShadow.stories-DHcKhkag.js}

@@ -1,4 +1,4 @@
-import{x as a}from"./iframe-D-tG1MVV.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-BGNJSyDp.js → Throttle.stories-cSYT_BXu.js}

@@ -1,4 +1,4 @@
-import{x as u}from"./iframe-D-tG1MVV.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">