feat(audience): add demo footer, event log polish, and alias validation

Final UX polish for the demo:

Footer and accessibility
- Footer renders the SDK version (read from SDK_VERSION exported
  from cdn.ts — adds the const + a cdn.test.ts for the guard)
- Event log marked with aria-live="polite" so screen readers
  announce new entries

Event log
- Copy button copies the full session's log to the clipboard
  (named just 'Copy' — clearer than a longer label)
- Auto-scroll to bottom on new entries, but only while the user
  is already at the bottom — if they scroll up to inspect older
  events, auto-scroll locks so the view doesn't jump away

Alias validation
- Real-time check on the Alias button: disabled while either
  ID is empty or (fromId, fromType) === (toId, toType). Mirrors
  core's isAliasValid() so the user gets immediate feedback
  instead of discovering the problem after clicking

Cleanup
- Remove dead #panel-slot selectors from demo.css and the empty
  <div id="panel-slot"> from index.html (never used)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: ImmutableJeffrey

packages/audience/sdk/demo/demo.css

@@ -340,13 +340,11 @@ button.active {
     background: var(--accent);
   }
 
-  .controls > .panel,
-  .controls > #panel-slot {
+  .controls > .panel {
     margin-bottom: 16px;
   }
 
-  .controls > .panel:last-child,
-  .controls > #panel-slot:last-child {
+  .controls > .panel:last-child {
     margin-bottom: 0;
   }
 
@@ -371,3 +369,28 @@ button.active {
     resize: vertical;
   }
 }
+
+footer {
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 12px;
+  padding: 24px 0 8px;
+  font-family: var(--mono);
+}
+
+footer a {
+  color: var(--text-muted);
+  text-decoration: none;
+  border-bottom: 1px dotted var(--text-muted);
+  transition: color 0.12s ease, border-color 0.12s ease;
+}
+
+footer a:hover {
+  color: var(--text);
+  border-bottom-color: var(--text);
+}
+
+footer .footer-sep {
+  margin: 0 8px;
+  color: var(--text-dim);
+}

packages/audience/sdk/demo/demo.js

@@ -16,6 +16,7 @@
 
   var Audience = window.ImmutableAudience.Audience;
   var IdentityType = window.ImmutableAudience.IdentityType;
+  var SDK_VERSION = (window.ImmutableAudience && window.ImmutableAudience.version) || 'unknown';
 
   // State
   var audience = null;
@@ -24,6 +25,12 @@
   var logEntries = [];
   var MAX_LOG_ENTRIES = 500;
 
+  // Track whether the user has scrolled up inside the event log. When true,
+  // renderLog stops auto-pinning to the bottom so new entries don't yank the
+  // user away from whatever they were reading.
+  var logAutoScroll = true;
+  var LOG_BOTTOM_THRESHOLD = 20; // px from bottom still counts as "at the bottom"
+
   // DOM helpers
   function $(id) { return document.getElementById(id); }
 
@@ -35,6 +42,12 @@
     return el;
   }
 
+  function isLogAtBottom() {
+    var el = $('log');
+    if (!el) return true;
+    return el.scrollHeight - el.scrollTop - el.clientHeight <= LOG_BOTTOM_THRESHOLD;
+  }
+
   function getRadio(name) {
     var radios = document.querySelectorAll('input[name="' + name + '"]');
     for (var i = 0; i < radios.length; i++) {
@@ -211,16 +224,53 @@
 
       container.appendChild(entry);
     }
-    container.scrollTop = container.scrollHeight;
+    if (logAutoScroll) {
+      container.scrollTop = container.scrollHeight;
+    }
     var countText = logEntries.length + ' entries';
     if (logEntries.length >= MAX_LOG_ENTRIES) {
       countText += ' (capped at ' + MAX_LOG_ENTRIES + ')';
     }
     text($('log-count'), countText);
   }
 
+  function onCopyLog() {
+    var btn = $('btn-copy-log');
+    if (!btn) return;
+    var originalText = btn.textContent;
+    function flashLabel(msg) {
+      btn.textContent = msg;
+      setTimeout(function () {
+        btn.textContent = originalText;
+      }, 1500);
+    }
+
+    var payload;
+    try {
+      payload = JSON.stringify(logEntries, null, 2);
+    } catch (err) {
+      log('WARN', 'Copy session failed: ' + String(err && err.message || err), 'warn');
+      flashLabel('Copy failed');
+      return;
+    }
+
+    if (!navigator.clipboard || !navigator.clipboard.writeText) {
+      log('WARN', 'Clipboard API unavailable in this browser', 'warn');
+      flashLabel('Not supported');
+      return;
+    }
+
+    navigator.clipboard.writeText(payload).then(function () {
+      flashLabel('Copied!');
+    }).catch(function (err) {
+      log('WARN', 'Copy session failed: ' + String(err && err.message || err), 'warn');
+      flashLabel('Copy failed');
+    });
+  }
+
   function clearLog() {
     logEntries = [];
+    logAutoScroll = true;
     renderLog();
   }
 
@@ -260,6 +310,21 @@
     initBtn.disabled = pkInput.value.trim().length === 0;
   }
 
+  // Sync the Alias button's enabled state based on from/to inputs.
+  // Mirrors core's isAliasValid: button is disabled if the SDK is not initialised,
+  // if either ID is empty, or if (fromId, fromType) === (toId, toType).
+  function syncAliasButton() {
+    var btn = $('btn-alias');
+    if (!audience) { btn.disabled = true; return; }
+    var fromId = $('alias-from-id').value.trim();
+    var toId = $('alias-to-id').value.trim();
+    var fromType = $('alias-from-type').value;
+    var toType = $('alias-to-type').value;
+    if (!fromId || !toId) { btn.disabled = true; return; }
+    if (fromId === toId && fromType === toType) { btn.disabled = true; return; }
+    btn.disabled = false;
+  }
+
   // Enable/disable controls based on init state
   function setInitState(on) {
     $('btn-init').disabled = on;
@@ -279,6 +344,10 @@
     var consentRadios = document.querySelectorAll('input[name="initial-consent"]');
     for (var j = 0; j < consentRadios.length; j++) consentRadios[j].disabled = on;
     if (!on) syncInitEnabled();
+    // Alias button needs the finer-grained check (inputs + equality). Called
+    // unconditionally because syncAliasButton handles both the enabled and
+    // disabled cases internally.
+    syncAliasButton();
   }
 
   // onError handler passed to Audience.init
@@ -518,7 +587,11 @@
     $('btn-shutdown').addEventListener('click', onShutdown);
     $('btn-reset').addEventListener('click', onReset);
     $('btn-flush').addEventListener('click', onFlush);
+    $('btn-copy-log').addEventListener('click', onCopyLog);
     $('btn-clear-log').addEventListener('click', clearLog);
+    $('log').addEventListener('scroll', function () {
+      logAutoScroll = isLogAtBottom();
+    });
 
     $('btn-consent-none').addEventListener('click', function () { onSetConsent('none'); });
     $('btn-consent-anon').addEventListener('click', function () { onSetConsent('anonymous'); });
@@ -527,12 +600,24 @@
     $('btn-page').addEventListener('click', onPage);
     $('btn-track').addEventListener('click', onTrack);
 
+    var versionEl = $('sdk-version');
+    if (versionEl) versionEl.textContent = SDK_VERSION;
+
     populateIdentityDropdowns();
     initDemoGutter();
     $('btn-identify').addEventListener('click', onIdentify);
     $('btn-identify-traits').addEventListener('click', onIdentifyTraits);
     $('btn-alias').addEventListener('click', onAlias);
 
+    // Real-time alias validity: disable the button when either ID is empty or
+    // when (fromId, fromType) === (toId, toType). Matches the design spec and
+    // mirrors the SDK's isAliasValid() — user gets immediate feedback instead
+    // of discovering the problem only after clicking.
+    $('alias-from-id').addEventListener('input', syncAliasButton);
+    $('alias-to-id').addEventListener('input', syncAliasButton);
+    $('alias-from-type').addEventListener('change', syncAliasButton);
+    $('alias-to-type').addEventListener('change', syncAliasButton);
+
     // Enable Init only when the publishable key input has non-whitespace content.
     $('pk').addEventListener('input', syncInitEnabled);
     syncInitEnabled();

packages/audience/sdk/demo/index.html

@@ -144,7 +144,6 @@ <h2 class="panel-title">Alias</h2>
     </div>
   </section>
 
-      <div id="panel-slot"></div>
     </div>
   <div class="demo-gutter" id="demo-gutter" role="separator" aria-orientation="vertical" aria-label="Resize columns" tabindex="0"></div>
     <div class="log-column">
@@ -154,12 +153,20 @@ <h2 class="panel-title">Event Log</h2>
       <span class="log-count" id="log-count">0 entries</span>
     </div>
     <div class="button-row compact">
+      <button class="secondary" id="btn-copy-log">Copy</button>
       <button class="secondary" id="btn-clear-log">Clear</button>
     </div>
-    <div class="log" id="log"></div>
+    <div class="log" id="log" role="log" aria-live="polite" aria-label="SDK event log"></div>
   </section>
     </div>
   </div>
+  <footer>
+    <span>@imtbl/audience <span id="sdk-version">0.0.0</span></span>
+    <span class="footer-sep">·</span>
+    <a href="./README.md">Demo README</a>
+    <span class="footer-sep">·</span>
+    <a href="../README.md">SDK README</a>
+  </footer>
 </main>
 
 <script src="../dist/cdn/imtbl-audience.global.js"></script>

packages/audience/sdk/src/cdn.test.ts

@@ -24,12 +24,15 @@ describe('cdn entry point', () => {
         Audience: { init: Function };
         AudienceError: typeof Error;
         IdentityType: Record<string, string>;
+        version: string;
       };
     }).ImmutableAudience;
 
     expect(g).toBeDefined();
     expect(typeof g!.Audience.init).toBe('function');
     expect(g!.IdentityType.Passport).toBe('passport');
+    expect(typeof g!.version).toBe('string');
+    expect(g!.version.length).toBeGreaterThan(0);
     expect(g!.IdentityType.Steam).toBe('steam');
     expect(g!.IdentityType.Custom).toBe('custom');
 

packages/audience/sdk/src/cdn.ts

@@ -13,12 +13,14 @@
 import { IdentityType } from '@imtbl/audience-core';
 
 import { Audience } from './sdk';
+import { LIBRARY_VERSION } from './config';
 import { AudienceError } from './types';
 
 type GlobalShape = {
   Audience: typeof Audience;
   AudienceError: typeof AudienceError;
   IdentityType: typeof IdentityType;
+  version: string;
 };
 
 // globalThis is ES2020; tsup targets es2018, so provide a runtime fallback
@@ -37,5 +39,6 @@ if (globalObj.ImmutableAudience) {
     Audience,
     AudienceError,
     IdentityType,
+    version: LIBRARY_VERSION,
   };
 }