@momentco-ai/moment-sdk 0.2.2-dev.17 → 0.3.0-dev.18

package/dist/moment-sdk.mjs

@@ -124,10 +124,11 @@ class E {
    * Programmatically open the sync modal.
    */
   open(e) {
+    const t = this.scopeOpenPayload(e);
     this.emitAnalytics("embed.open", {
-      teamSlug: e.teamSlug,
-      triggerType: e.triggerType
-    }), this.createModal(e);
+      teamSlug: t.teamSlug,
+      triggerType: t.triggerType
+    }), this.createModal(t);
   }
   /**
    * Close the modal and clean up all resources.
@@ -164,34 +165,42 @@ class E {
   handleTriggerClick(e) {
     const t = e.getAttribute("data-moment-team-slug") ?? "", i = e.getAttribute("data-moment-slug") ?? void 0, o = e.getAttribute("data-moment-list-slug") ?? void 0, n = e.getAttribute("data-moment-trigger-type");
     let r = "moment";
-    n != null && n !== "" && (n === "moment" || n === "list" || n === "team" ? r = n : console.warn(
+    n != null && n !== "" && (n === "moment" || n === "list" || n === "team" || n === "brand-playlist" ? r = n : console.warn(
       "[MomentSdk] Invalid data-moment-trigger-type, falling back to 'moment':",
       n
     ));
-    const d = e.getAttribute("data-moment-ids") ?? e.getAttribute("data-moment-game-id") ?? "", u = d ? d.split(",").filter(Boolean) : [], a = e.getAttribute("data-moment-calendar");
+    const d = e.getAttribute("data-moment-ids") ?? e.getAttribute("data-moment-game-id") ?? "", c = d ? d.split(",").filter(Boolean) : [], a = e.getAttribute("data-moment-calendar");
     let m;
     a != null && a !== "" && (a === "google" || a === "outlook" ? m = a : console.warn("[MomentSdk] Invalid data-moment-calendar, ignoring value:", a));
-    const l = e.getAttribute("data-api-source-id") ?? void 0, c = e.getAttribute("data-external-event-id") ?? void 0;
+    const l = e.getAttribute("data-api-source-id") ?? void 0, u = e.getAttribute("data-external-event-id") ?? void 0;
     if (!t) {
       console.warn("[MomentSdk] Missing data-moment-team-slug on trigger element");
       return;
     }
-    const h = r === "team" ? void 0 : i, g = r === "team" ? void 0 : o, p = r === "team" ? [] : u;
+    const p = r === "team" || r === "brand-playlist";
     this.emitAnalytics("embed.trigger.click", {
       teamSlug: t,
       triggerType: r,
-      momentIds: p
+      momentIds: p ? [] : c
     }), this.open({
       teamSlug: t,
-      momentSlug: h,
-      listSlug: g,
+      momentSlug: i,
+      listSlug: o,
       triggerType: r,
-      ids: p,
+      ids: c,
       calendar: m ?? void 0,
       apiSourceId: l,
-      externalEventId: c
+      externalEventId: u
     });
   }
+  /** Drop moment/list/source scoping for brand-level subscription triggers. */
+  scopeOpenPayload(e) {
+    return e.triggerType === "team" || e.triggerType === "brand-playlist" ? {
+      teamSlug: e.teamSlug,
+      triggerType: e.triggerType,
+      calendar: e.calendar
+    } : e;
+  }
   // ── Private: modal creation ───────────────────────────────────────
   createModal(e) {
     this.cleanup(), this.previousFocusedElement = document.activeElement || null, this.activePayload = e;
@@ -270,8 +279,8 @@ class E {
       gap: "6px",
       padding: "12px 0"
     });
-    const u = document.createElement("span");
-    u.textContent = "Powered by", Object.assign(u.style, {
+    const c = document.createElement("span");
+    c.textContent = "Powered by", Object.assign(c.style, {
       fontFamily: "Inter, system-ui, -apple-system, sans-serif",
       fontSize: "12px",
       lineHeight: "16px",
@@ -281,18 +290,18 @@ class E {
     a.alt = "Moment", a.src = `${this.liveBaseUrl}/brand/moment-text-white.png`, Object.assign(a.style, {
       height: "auto",
       width: "67px"
-    }), d.appendChild(u), d.appendChild(a), o.appendChild(n), o.appendChild(d), this.overlay.appendChild(o), document.body.appendChild(this.overlay);
+    }), d.appendChild(c), d.appendChild(a), o.appendChild(n), o.appendChild(d), this.overlay.appendChild(o), document.body.appendChild(this.overlay);
     const m = (l) => {
       if (l.key !== "Tab") return;
-      const c = n.querySelectorAll(
+      const u = n.querySelectorAll(
         'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
       );
-      if (c.length === 0) {
+      if (u.length === 0) {
         l.preventDefault(), n.focus();
         return;
       }
-      const h = c[0], g = c[c.length - 1], p = document.activeElement;
-      l.shiftKey && p === h ? (l.preventDefault(), g.focus()) : !l.shiftKey && p === g && (l.preventDefault(), h.focus());
+      const p = u[0], h = u[u.length - 1], g = document.activeElement;
+      l.shiftKey && g === p ? (l.preventDefault(), h.focus()) : !l.shiftKey && g === h && (l.preventDefault(), p.focus());
     };
     n.addEventListener("keydown", m), r.focus(), this.previousBodyOverflow = document.body.style.overflow, document.body.style.overflow = "hidden", this.didManageBodyOverflow = !0, this.setupMessageListener(), this.overlay._escHandler = i, this.overlay._focusTrapHandler = m;
   }

package/dist/types/sdk/moment-sdk.d.ts

@@ -39,6 +39,8 @@ export declare class MomentSdk {
     private bindTriggers;
     private unbindTriggers;
     private handleTriggerClick;
+    /** Drop moment/list/source scoping for brand-level subscription triggers. */
+    private scopeOpenPayload;
     private createModal;
     private buildIframeUrl;
     private setupMessageListener;

package/dist/types/sdk/types.d.ts

@@ -5,8 +5,9 @@
  * - `moment` → subscribe to one or more specific moments
  * - `list` → subscribe to a curated list of moments
  * - `team` → subscribe to a team / brand schedule (all published moments)
+ * - `brand-playlist` → subscribe to the brand's default playlist
  */
-export type MomentTriggerType = 'moment' | 'list' | 'team';
+export type MomentTriggerType = 'moment' | 'list' | 'team' | 'brand-playlist';
 export type CalendarProvider = 'google' | 'outlook';
 export interface MomentSdkInitOptions {
     /** CSS selector for trigger elements. Default: ".moment-sync-trigger" */
@@ -30,7 +31,10 @@ export interface MomentSdkInitOptions {
  * - `list`   → `teamSlug` plus `listSlug` (`ids` not required — list resolves
  *   to a single list-level subscription)
  * - `team`   → `teamSlug` only (resolves to the brand's team-level
- *   subscription; `listSlug`, `momentSlug`, and `ids` are ignored)
+ *   subscription). Omit `listSlug`, `momentSlug`, `ids`, `apiSourceId`, and
+ *   `externalEventId` for this trigger type.
+ * - `brand-playlist` → `teamSlug` only (Live resolves the brand's
+ *   `defaultPlaylistId`). Omit the same fields as `team`.
  */
 export interface MomentSdkOpenPayload {
     teamSlug: string;
@@ -55,7 +59,7 @@ export interface MomentSdkOpenPayload {
     externalEventId?: string;
 }
 /** Backend subscription resource type that the embed will create */
-export type MomentSubscriptionType = 'moment' | 'list' | 'team';
+export type MomentSubscriptionType = 'moment' | 'list' | 'team' | 'playlist';
 /** Iframe → Parent: request to start OAuth via popup */
 export interface MomentOAuthStartPayload {
     source: 'moment-live-embed';

package/examples/README.md

@@ -0,0 +1,36 @@
+# Moment SDK examples
+
+Interactive demos shipped inside `@momentco-ai/moment-sdk`. They use the **sdk-demo** fixture brand and the SDK build from the same package you installed.
+
+## Run from npm
+
+```bash
+npx moment-sdk-examples
+```
+
+Or after installing the package:
+
+```bash
+npm install @momentco-ai/moment-sdk
+npx moment-sdk-examples
+```
+
+Opens **http://localhost:5051** with:
+
+| Page               | Trigger type     |
+| ------------------ | ---------------- |
+| `/`                | Hub              |
+| `/moment/`         | `moment`         |
+| `/collection/`     | `list`           |
+| `/brand-schedule/` | `brand-playlist` |
+
+Demo slugs are in `shared/fixtures.js`. Edit that file if your account uses different values.
+
+## Maintainer workflow (repo clone)
+
+```bash
+pnpm build
+pnpm examples
+```
+
+`pnpm examples` builds the SDK, then runs the same server npm users get.

package/examples/brand-schedule/index.html

@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Moment SDK — Brand schedule trigger</title>
+    <link rel="stylesheet" href="/shared/demo.css" />
+  </head>
+  <body>
+    <main class="demo-shell">
+      <div id="demo-nav" class="demo-top"></div>
+
+      <h1>Brand schedule trigger</h1>
+      <p class="lead">
+        Follow the brand's default schedule. Only <code>data-moment-team-slug</code> and
+        <code>data-moment-trigger-type="brand-playlist"</code> are required.
+      </p>
+
+      <article class="hero-card">
+        <div class="card-info">
+          <div class="card-title">Follow all sdk-demo events</div>
+          <div class="card-meta">Team slug <code id="team-slug-label"></code></div>
+        </div>
+        <button type="button" id="schedule-trigger" class="moment-sync-trigger demo-btn">
+          Follow All Schedule
+        </button>
+      </article>
+
+      <section class="section">
+        <h2>Embed snippet</h2>
+        <div class="snippet">
+          <button class="copy-btn" type="button" data-copy-target="snippet-code">Copy</button>
+          <pre id="snippet-code">Loading snippet…</pre>
+        </div>
+      </section>
+
+      <div id="demo-log-host"></div>
+    </main>
+    <script type="module" src="/brand-schedule/main.js"></script>
+  </body>
+</html>

package/examples/brand-schedule/main.js

@@ -0,0 +1,18 @@
+import { DEMO_FIXTURES } from '../shared/fixtures.js';
+import { embedSnippetHtml, initDemoSdk, mountLogPanel, mountNav } from '../shared/boot.js';
+
+mountNav({ title: 'Brand schedule' });
+mountLogPanel();
+
+document.getElementById('team-slug-label').textContent = DEMO_FIXTURES.teamSlug;
+
+const trigger = document.getElementById('schedule-trigger');
+trigger.setAttribute('data-moment-team-slug', DEMO_FIXTURES.teamSlug);
+trigger.setAttribute('data-moment-trigger-type', 'brand-playlist');
+
+document.getElementById('snippet-code').textContent = await embedSnippetHtml({
+  triggerType: 'brand-playlist',
+  label: 'Follow All Schedule',
+});
+
+await initDemoSdk();

package/examples/collection/index.html

@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Moment SDK — Collection trigger</title>
+    <link rel="stylesheet" href="/shared/demo.css" />
+  </head>
+  <body>
+    <main class="demo-shell">
+      <div id="demo-nav" class="demo-top"></div>
+
+      <h1>Collection trigger</h1>
+      <p class="lead">
+        Sync a curated list of moments. Requires <code>data-moment-list-slug</code> with
+        <code>triggerType: list</code>.
+      </p>
+
+      <article class="hero-card">
+        <div class="card-info">
+          <div class="card-title" id="collection-title"></div>
+          <div class="card-meta" id="collection-meta"></div>
+        </div>
+        <button type="button" id="collection-trigger" class="moment-sync-trigger demo-btn">
+          Sync Collection
+        </button>
+      </article>
+
+      <section class="section">
+        <h2>Embed snippet</h2>
+        <div class="snippet">
+          <button class="copy-btn" type="button" data-copy-target="snippet-code">Copy</button>
+          <pre id="snippet-code">Loading snippet…</pre>
+        </div>
+      </section>
+
+      <div id="demo-log-host"></div>
+    </main>
+    <script type="module" src="/collection/main.js"></script>
+  </body>
+</html>

package/examples/collection/main.js

@@ -0,0 +1,24 @@
+import { DEMO_FIXTURES } from '../shared/fixtures.js';
+import { embedSnippetHtml, initDemoSdk, mountLogPanel, mountNav } from '../shared/boot.js';
+
+const { collection, teamSlug } = DEMO_FIXTURES;
+
+mountNav({ title: 'Collection' });
+mountLogPanel();
+
+document.getElementById('collection-title').textContent = collection.title;
+document.getElementById('collection-meta').innerHTML =
+  `${collection.description} · <code>${collection.slug}</code>`;
+
+const trigger = document.getElementById('collection-trigger');
+trigger.setAttribute('data-moment-team-slug', teamSlug);
+trigger.setAttribute('data-moment-list-slug', collection.slug);
+trigger.setAttribute('data-moment-trigger-type', 'list');
+
+document.getElementById('snippet-code').textContent = await embedSnippetHtml({
+  triggerType: 'list',
+  listSlug: collection.slug,
+  label: 'Sync Collection',
+});
+
+await initDemoSdk();

package/examples/index.html

@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Moment SDK — Examples</title>
+    <link rel="stylesheet" href="/shared/demo.css" />
+  </head>
+  <body>
+    <main class="demo-shell">
+      <div id="demo-nav" class="demo-top"></div>
+
+      <h1>Moment SDK examples</h1>
+      <p class="lead">
+        Interactive demos using the <strong>sdk-demo</strong> fixture brand. Each page loads the SDK
+        from this package and opens the same calendar sync flow your site will use.
+      </p>
+
+      <div class="hub-grid">
+        <a class="hub-card" href="/moment/">
+          <h2>Moment</h2>
+          <p>Single-event sync with <code>triggerType: moment</code>.</p>
+        </a>
+        <a class="hub-card" href="/collection/">
+          <h2>Collection</h2>
+          <p>List sync with <code>triggerType: list</code>.</p>
+        </a>
+        <a class="hub-card" href="/brand-schedule/">
+          <h2>Brand schedule</h2>
+          <p>Follow the full schedule with <code>triggerType: brand-playlist</code>.</p>
+        </a>
+      </div>
+
+      <div id="demo-log-host"></div>
+    </main>
+    <script type="module" src="/index.js"></script>
+  </body>
+</html>

package/examples/index.js

@@ -0,0 +1,11 @@
+import { appendLog, initDemoSdk, mountLogPanel, mountNav } from './shared/boot.js';
+
+mountNav();
+mountLogPanel('SDK callbacks');
+
+try {
+  await initDemoSdk();
+} catch (error) {
+  console.error(error);
+  appendLog?.(String(error), 'error');
+}

package/examples/moment/index.html

@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Moment SDK — Moment trigger</title>
+    <link rel="stylesheet" href="/shared/demo.css" />
+  </head>
+  <body>
+    <main class="demo-shell">
+      <div id="demo-nav" class="demo-top"></div>
+
+      <h1>Moment trigger</h1>
+      <p class="lead">
+        Sync one published event. Requires <code>data-moment-team-slug</code> and
+        <code>data-moment-slug</code>.
+      </p>
+
+      <div id="events" class="card-grid"></div>
+
+      <section class="section">
+        <h2>Embed snippet</h2>
+        <div class="snippet">
+          <button class="copy-btn" type="button" data-copy-target="snippet-code">Copy</button>
+          <pre id="snippet-code">Loading snippet…</pre>
+        </div>
+      </section>
+
+      <div id="demo-log-host"></div>
+    </main>
+    <script type="module" src="/moment/main.js"></script>
+  </body>
+</html>

package/examples/moment/main.js

@@ -0,0 +1,20 @@
+import { DEMO_FIXTURES } from '../shared/fixtures.js';
+import {
+  embedSnippetHtml,
+  initDemoSdk,
+  mountLogPanel,
+  mountNav,
+  renderMomentCards,
+} from '../shared/boot.js';
+
+mountNav({ title: 'Moment' });
+mountLogPanel();
+renderMomentCards('#events', DEMO_FIXTURES.moments, DEMO_FIXTURES.teamSlug);
+
+document.getElementById('snippet-code').textContent = await embedSnippetHtml({
+  triggerType: 'moment',
+  momentSlug: DEMO_FIXTURES.moments[0].slug,
+  label: 'Add to Calendar',
+});
+
+await initDemoSdk();

package/examples/serve.mjs

@@ -0,0 +1,104 @@
+#!/usr/bin/env node
+import { createReadStream, existsSync, readFileSync, statSync } from 'node:fs';
+import { createServer } from 'node:http';
+import { dirname, extname, join, normalize, sep } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const examplesRoot = __dirname;
+const packageRoot = join(__dirname, '..');
+const sdkPath = join(packageRoot, 'dist', 'moment-sdk.js');
+const packageJson = JSON.parse(readFileSync(join(packageRoot, 'package.json'), 'utf8'));
+
+const PORT = Number(process.env.PORT || 5051);
+const MIME = {
+  '.css': 'text/css; charset=utf-8',
+  '.html': 'text/html; charset=utf-8',
+  '.js': 'application/javascript; charset=utf-8',
+  '.json': 'application/json; charset=utf-8',
+};
+
+const ROUTES = {
+  '/': 'index.html',
+  '/moment': 'moment/index.html',
+  '/moment/': 'moment/index.html',
+  '/collection': 'collection/index.html',
+  '/collection/': 'collection/index.html',
+  '/brand-schedule': 'brand-schedule/index.html',
+  '/brand-schedule/': 'brand-schedule/index.html',
+};
+
+function send(res, status, body, type = 'text/plain; charset=utf-8') {
+  res.writeHead(status, { 'Content-Type': type });
+  res.end(body);
+}
+
+function safePath(relativePath) {
+  const resolved = normalize(join(examplesRoot, relativePath));
+  const rootPrefix = examplesRoot.endsWith(sep) ? examplesRoot : `${examplesRoot}${sep}`;
+  if (resolved !== examplesRoot && !resolved.startsWith(rootPrefix)) {
+    return null;
+  }
+  return resolved;
+}
+
+function serveFile(res, relativePath) {
+  const filePath = safePath(relativePath);
+  if (!filePath || !existsSync(filePath) || statSync(filePath).isDirectory()) {
+    return false;
+  }
+
+  const type = MIME[extname(filePath)] ?? 'application/octet-stream';
+  res.writeHead(200, { 'Content-Type': type });
+  createReadStream(filePath).pipe(res);
+  return true;
+}
+
+const server = createServer((req, res) => {
+  const pathname = req.url?.split('?')[0] ?? '/';
+
+  if (pathname === '/moment-sdk.js') {
+    if (!existsSync(sdkPath)) {
+      send(
+        res,
+        503,
+        'Moment SDK build not found in this package. Reinstall @momentco-ai/moment-sdk.',
+      );
+      return;
+    }
+    res.writeHead(200, { 'Content-Type': 'application/javascript; charset=utf-8' });
+    createReadStream(sdkPath).pipe(res);
+    return;
+  }
+
+  if (pathname === '/package-meta.json') {
+    send(
+      res,
+      200,
+      JSON.stringify({
+        name: packageJson.name,
+        version: packageJson.version,
+        cdnUrl: `https://cdn.jsdelivr.net/npm/${packageJson.name}@${packageJson.version}`,
+      }),
+      'application/json; charset=utf-8',
+    );
+    return;
+  }
+
+  if (ROUTES[pathname]) {
+    if (serveFile(res, ROUTES[pathname])) return;
+  }
+
+  const relative = pathname.replace(/^\//, '');
+  if (relative && serveFile(res, relative)) return;
+
+  send(res, 404, 'Not found');
+});
+
+server.listen(PORT, () => {
+  console.log(`Moment SDK examples → http://localhost:${PORT}`);
+  console.log(`Package ${packageJson.name}@${packageJson.version}`);
+  if (!existsSync(sdkPath)) {
+    console.warn('Warning: dist/moment-sdk.js missing — triggers will not load the SDK.');
+  }
+});