// ✓ 正確：輪詢等待
(function wait() {
  if (typeof BPTools === 'undefined') { setTimeout(wait, 50); return; }
  BPTools.on('my:event', () => { /* 你的邏輯 */ });
})();

// ✗ 錯誤：DOMContentLoaded 不保證 BPTools 已就緒
document.addEventListener('DOMContentLoaded', () => {
  BPTools.on('my:event', ...); // 可能噴 BPTools is not defined
});

BPTools.on('lesson:done', () => badge.style.display = 'block');
BPTools.on('lesson:done', () => fetch('/api/progress', { method: 'POST' }));
BPTools.on('lesson:done', () => localStorage.setItem('done', '1'));

BrandColors.applyTheme('light');        // 切換主題，全頁自動更新
BrandColors.get('sky');               // '#04b5a3'
BrandColors.get('sky', 'light');      // '#027a6c'（淺色主題值）
BrandColors.resolve('sky');           // 同 get，找不到時原值回傳

<info-region-group global-progress progress-color="sky" show-percent
  start-label="▶ 開始" start-color="sky">

  <info-region id="s1" color="sky" next="s2" countdown="2000">
    第一步，2 秒後自動前進。
  </info-region>

  <info-region id="s2" color="lavender"
    manual manual-label="下一步 →" link="lesson:done">
    第二步，手動確認，完成時發出 lesson:done 事件。
  </info-region>

</info-region-group>

<info-region id="q1" color="lavender" choice-align="left">
  <p>問題文字</p>
  <ir-choice target="ans-ok"  color="safe"    icon="check-circle">正確選項</ir-choice>
  <ir-choice target="ans-no"  color="warning" icon="x-circle">錯誤選項</ir-choice>
</info-region>

<!-- 答錯：next 指回題目，自動重置 -->
<info-region id="ans-no" color="warning" next="q1">
  ✗ 不對，再試一次。
</info-region>

<div id="t1" data-dual-cell data-cols="2" data-theme="sky"
     data-show-menu-button="false">

  <div data-col>問題</div>

  <!-- on-link：監聽事件，事件發生後移除遮罩 -->
  <div data-col
       data-on-link="quiz:pass"
       data-overlay-1-text="答對後解鎖">
    答案內容
  </div>

</div>

<!-- link：翻開時發出事件 -->
<word-flip data-color="sky" link="term:opened"
           data-content="說明文字">詞彙</word-flip>

<!-- unlock-on：預設鎖定，事件發生後才可點擊 -->
<word-flip data-color="safe" unlock-on="quiz:pass"
           data-content="解鎖後的說明">鎖定中</word-flip>

<!-- answer-src：從外部元素讀取 HTML 內容 -->
<div id="my-detail" style="display:none"><strong>完整 HTML 說明</strong></div>
<word-flip data-color="lavender" answer-src="my-detail">詞彙</word-flip>

<!-- group：同組互斥，同時只展開一個 -->
<word-flip data-color="sky"     group="terms" data-content="A 的說明">詞 A</word-flip>
<word-flip data-color="lavender" group="terms" data-content="B 的說明">詞 B</word-flip>

<ir-challenge
  answer="Cookie|cookie|COOKIE"  <!-- | 分隔多個答案 -->
  link="q:correct"             <!-- 答對後發出的事件 -->
  color="sky"
  placeholder="輸入答案…"
  hint="提示文字"
  btn-label="確認"
  font-size="1rem"           <!-- 同時設定輸入框與按鈕 -->
  btn-font-size="0.9rem"    <!-- 單獨設定按鈕 -->
  input-font-size="1rem"   <!-- 單獨設定輸入框 -->
  btn-padding="8px 24px"
  case-sensitive>           <!-- 加上此屬性則區分大小寫 -->
</ir-challenge>

<bp-slide
  theme="orange"
  height="240px"
  link="slider:done"          <!-- 按完成按鈕時發事件 -->
  unlock-on="quiz:pass"     <!-- 等事件才解鎖整個導航 -->
  auto-show-part-buttons="true"
  finish-btn-text="完成課程 →">

  <div slide part="1">第一頁</div>

  <!-- 切換到此頁時發出事件 -->
  <div slide part="1" link="slide:p2">第二頁</div>

  <!-- 停在此頁時鎖住下一頁，等 quiz:pass 才放行 -->
  <div slide part="1" unlock-on="quiz:pass">第三頁</div>

</bp-slide>

<!-- 燃燒引線 + 可關閉 -->
<bp-notice
  color="sky"
  icon="info-circle-fill"    <!-- Bootstrap Icon 類名 -->
  font-size="1rem"
  icon-size="1.4rem"
  padding="16px 20px"
  dismissible                <!-- 顯示關閉按鈕 -->
  auto-hide="5000"           <!-- 5 秒後燃盡消失 -->
  sticky                     <!-- 置頂固定 -->
  unlock-on="lesson:done"  <!-- 等事件才顯示，顯示後才倒數 -->
  link="notice:closed"      <!-- 關閉時發出事件 -->>
  <!-- 完整 HTML + Bootstrap Icons -->
  <strong>公告標題</strong>
  <ul>
    <li><i class="bi bi-check2"></i> 項目一</li>
  </ul>
</bp-notice>

<script>
  window.StickyNotesConfig = {
    defaultColor : 'lavender',  // 品牌色名稱或 hex
    defaultWidth : 280,
    position     : 'fixed',      // 'fixed' | 'absolute'
    storageKey   : 'my_notes',  // localStorage 鍵名
    excludeClass : 'no-sticky', // 掛此 class 的元素不觸發
    fontSize     : '1rem',       // 便利貼字體大小
    lineHeight   : '1.8',        // 便利貼行高
    link         : 'note:saved', // 操作時向匯流排發出的事件
  };
</script>

// 存入資料庫
const data = BpNote.export();
fetch('/api/save-notes', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(data),
});

// 從資料庫還原
fetch('/api/load-notes')
  .then(r => r.json())
  .then(arr => BpNote.import(arr));

<!-- 投影片：答題通過才進第三頁，完成發事件 -->
<bp-slide theme="orange" link="slider:done" auto-show-part-buttons="true">
  <div slide part="1" link="slide:intro">第一頁</div>
  <div slide part="1" unlock-on="quiz:pass">第二頁（鎖住）</div>
</bp-slide>

<!-- 答題：答對後解鎖所有訂閱 quiz:pass 的元件 -->
<ir-challenge answer="Cookie" link="quiz:pass" color="lavender"></ir-challenge>

<!-- 答案表格：答對解鎖 -->
<div data-dual-cell data-cols="2" data-theme="lavender">
  <div data-col>問題</div>
  <div data-col data-on-link="quiz:pass" data-overlay-1-text="答對後解鎖">答案</div>
</div>

<!-- 完課公告：完成投影片才顯示，5 秒引線 -->
<bp-notice color="special" icon="stars"
  unlock-on="slider:done" auto-hide="5000" dismissible>
  🎓 課程完成！
</bp-notice>

/* BPTools 匯流排 */
BPTools.on(ev, fn)        // 訂閱
BPTools.emit(ev, data)   // 發布
BPTools.off(ev, fn)       // 取消訂閱
BPTools._fired             // Set，已發過的事件歷史

/* BrandColors */
BrandColors.applyTheme('dark' | 'light')
BrandColors.get(colorName)
BrandColors.resolve(val)
BrandColors.toCSSVars(themeName)

/* InfoRegion */
InfoRegion.activate(id)
InfoRegion.resetAll()

/* BpNote（便利貼）*/
BpNote.save()
BpNote.clearAll()
BpNote.export()          // → JSON 陣列
BpNote.import(arr)
BpNote.enable() / disable()
StickyWall                 // BpNote 的別名（向後相容）