覆蓋層 Modal / Dialog / Toast

面板式彈窗（例如「加入收藏夾」）。結構是：.lct-scrim（半透明遮罩）包住 .lct-modal（面板）。v1.1 圓角改為 4px（--lct-radius-panel，v1.0 為 12px）。

<!-- 觸發按鈕 -->
<button class="lct-btn lct-btn--primary"
        data-lct-toggle="modal" data-lct-target="#favModal">加入收藏夾</button>

<!-- 彈窗本體 -->
<div id="favModal" class="lct-scrim" aria-hidden="true">
  <div class="lct-modal" role="dialog" aria-modal="true">
    <div class="lct-modal__header">
      <h3 class="lct-modal__title">加入收藏夾</h3>
      <button class="lct-modal__close" data-lct-dismiss aria-label="關閉">
        <svg class="lct-icon" viewBox="0 0 256 256"><!-- ✕ --></svg>
      </button>
    </div>

    <p class="lct-modal__subtitle">胡桃木 木紋（深色）</p>

    <div class="lct-modal__body">
      <div class="lct-option-row">
        <span class="lct-option-row__name">常用木皮</span>
        <span class="lct-option-row__count">12 項</span>
        <button class="lct-btn lct-btn--primary lct-btn--sm">加入</button>
      </div>
      <div class="lct-option-row">
        <span class="lct-option-row__name">客廳提案</span>
        <span class="lct-option-row__count">5 項</span>
        <button class="lct-btn lct-btn--primary lct-btn--sm is-disabled" disabled>加入</button>
      </div>
    </div>

    <div class="lct-modal__footer">
      <input class="lct-input" type="text" placeholder="新建收藏夾名稱">
      <button class="lct-btn lct-btn--primary">建立並加入</button>
    </div>
  </div>
</div>

開關規則（由 lucent-ui.js 自動處理）：

點 data-lct-toggle="modal" → 開啟 data-lct-target 指定的彈窗
點 data-lct-dismiss（關閉鈕 / 取消鈕）、點遮罩空白處、或按 ESC → 關閉
也可用程式：Lucent.openModal('#favModal') / Lucent.closeModal('#favModal')

.lct-option-row 是 Modal 內的可選列（如收藏夾清單），有 __name 與 __count 兩個子元素。Modal 寬度可用 --lct-modal-w（預設 360px）覆寫。

確認對話框 .lct-dialog

置中的小型確認框（例如「移除收藏」「刪除收藏夾」）。v1.1 依 Figma 216:1115 校準：圓角 4px、陰影 0 10px 30px rgba(0,0,0,.25)、內距 20 / 20 / 16、標題 16 Bold、內文 13px 灰字、行高 1.55；.lct-dialog__btns 內的按鈕自動變成等寬、圓角 8、上下內距 9px、字級 14px。

除了手寫 HTML，更推薦用 JS 一行叫出。

用 JS（推薦）

Lucent.confirm({
  title: '移除收藏',
  text: '確定要將此材質從收藏夾移除嗎？',
  confirmText: '確認移除',
  cancelText: '取消',
  danger: true            // 確認鈕用紅色 danger 樣式
}).then(function (ok) {
  if (ok) {
    // 使用者按了「確認移除」
  }
});

Lucent.confirm() 回傳一個 Promise<boolean>，按確認為 true、取消或關閉為 false。

手寫 HTML

<div class="lct-scrim is-open">
  <div class="lct-dialog" role="dialog" aria-modal="true">
    <h3 class="lct-dialog__title">刪除收藏夾</h3>
    <p class="lct-dialog__text">確定要將此收藏夾刪除嗎？此動作無法復原。</p>
    <div class="lct-dialog__btns">
      <button class="lct-btn lct-btn--secondary" data-lct-dismiss>取消</button>
      <button class="lct-btn lct-btn--danger">確認刪除</button>
    </div>
  </div>
</div>

對話框寬度可用 --lct-dialog-w（預設 300px）覆寫。

通知列 .lct-bar（含使用者常用的 error-bar）

行內通知條，四種語意色。v1.1 依 Figma 校準：彩色底 + 1px 彩色邊框（v1.0 無邊框）、圓角 4、文字 14px Medium、icon 24px。適合放在頁面頂部或內容區內。

<div class="lct-bar lct-bar--success">已加入收藏夾</div>
<div class="lct-bar lct-bar--error">匯出失敗，請重試</div>
<div class="lct-bar lct-bar--warning">請先選取至少一個面體再套用材質</div>
<div class="lct-bar lct-bar--info">已成功清除材料</div>

各語意的校準色值（底 / 邊框 / 文字）：

變體	底色	邊框 / 圖示	文字
`--success`	`#e9f4ea`	`#1e8e3e`	`#137333`
`--error`	`#fcebea`	`#d93025`	`#c5221f`
`--warning`	`#fff4e5`	`#ed6c02`	`#9a4a00`
`--info`	`#e5f4fd`	`#0288d1`	`#01579b`

Toast 浮出提示

用 JS 叫出、會自動消失的浮動提示。依 Figma Toast Overlay 校準：貼齊面板頂部（上方 18px、左右各 16px 近全寬，大螢幕上限 480px 置中）。預設 3 秒自動消失，滑鼠移入會暫停倒數、移出後重新計時。

v1.1.1 修正：修復退場動畫優先權問題導致 toast 不會自動消失的 bug。

// 便利捷徑（建議用法）：success / error / warning / info
Lucent.success('已加入收藏夾');
Lucent.error('匯出失敗，請重試');
Lucent.warning('請先選取至少一個面體再套用材質');
Lucent.info('已成功清除材料', { duration: 5000 });

// 完整參數版；也可直接傳字串 Lucent.toast('訊息')
Lucent.toast({ type: 'error', message: '匯出失敗', duration: 0 });   // 0 = 常駐
Lucent.toast({ type: 'warning', message: '尚未選取材質', solid: true, closable: false });

不寫 JS 也可以——在任何按鈕加 data-lct-toast 即宣告式觸發：

<button data-lct-toast="success" data-lct-message="已加入收藏夾">加入</button>
<!-- 可加 data-lct-duration="5000"（毫秒）、data-lct-solid（實心樣式）-->

參數	型別	說明
`type`	`success` `error` `warning` `info`	語意色，預設 `info`
`message`	string	內容文字（以純文字插入，不解析 HTML）
`duration`	number	毫秒，`0` = 不自動消失，預設 `3000`；滑鼠移入暫停
`solid`	boolean	`true` 用實心 `.lct-toast`，`false`（預設）用 `.lct-bar`
`closable`	boolean	`false` 不顯示關閉鈕，預設 `true`

Lucent.toast() 與四個捷徑都回傳 { dismiss, el }，可用 dismiss() 手動關閉。

點擊觸發的選單（例如「匯出」）。用 .lct-dropdown 當容器。v1.1 依 Figma 校準：項目內距 8px 12px、圓角 4、字級 13px、hover 底 rgba(91,91,91,.05)；選單容器淺框 #ececef、最小寬 130px（--lct-menu-min-w 可覆寫）。

<div class="lct-dropdown">
  <button class="lct-btn lct-btn--secondary" data-lct-toggle="dropdown">檔案 ▾</button>
  <div class="lct-dropdown__menu">
    <div class="lct-menu">
      <button class="lct-menu-item">編輯檔案</button>
      <button class="lct-menu-item">重新命名</button>
      <div class="lct-menu__divider"></div>
      <button class="lct-menu-item lct-menu-item--danger">刪除檔案</button>
    </div>
  </div>
</div>

匯出選單樣式 –bold（v1.1 新增）

Figma 的匯出選單（XLSX / CSV）項目為粗體、置中，用 --bold 修飾子：

<div class="lct-dropdown">
  <button class="lct-btn lct-btn--secondary" data-lct-toggle="dropdown">匯出 ▾</button>
  <div class="lct-dropdown__menu">
    <div class="lct-menu">
      <button class="lct-menu-item lct-menu-item--bold">XLSX</button>
      <button class="lct-menu-item lct-menu-item--bold">CSV</button>
    </div>
  </div>
</div>

點按鈕開合、點選單外自動關閉（由 lucent-ui.js 處理）。--danger 是紅色的危險項目。