安裝與引入

方式 A — 本地檔案（推薦給 SketchUp 外掛）

把 lucent-ui.css 與 lucent-ui.js 複製進外掛的資源資料夾，直接引用即可。這是 SketchUp HtmlDialog（內嵌 CEF/Chromium）最單純、最穩定的做法，因為它常是離線環境。

<!doctype html>
<html lang="zh-Hant">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="lucent-ui.css">
</head>
<body class="lct-root">
  <button class="lct-btn lct-btn--primary">套用材質</button>

  <script src="lucent-ui.js"></script>
</body>
</html>

務必在 <body>（或最外層容器）加上 lct-root，才能套用預設字型與文字顏色。

方式 B — CDN（推薦給一般網頁）

把整個 lucent-ui 資料夾推上 GitHub，jsDelivr 就會自動提供 CDN，讓多個專案共用同一份：

<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/<你的帳號>/<repo>@v1.0.0/lucent-ui.css">
<script src="https://cdn.jsdelivr.net/gh/<你的帳號>/<repo>@v1.0.0/lucent-ui.js"></script>

請用 @v1.0.0 這類版本 tag，不要用 @main。用 @main 會吃到 CDN 的長效快取，更新後不易生效，且可能被破壞性變更影響。

發佈新版本的流程：

git tag v1.0.1
git push origin v1.0.1
# 之後把引用網址改成 @v1.0.1 即可

方式 C — npm（若你有前端打包流程）

若專案使用 Vite / Webpack 等打包工具，可把它做成 npm 套件後這樣引入：

import 'lucent-ui/lucent-ui.css';
import 'lucent-ui/lucent-ui.js';

中文字型與離線使用

lucent-ui.css 預設用 @import 從 Google Fonts 載入 Noto Sans TC：

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap');

若你的外掛需要完全離線，請：

下載 Noto Sans TC 字型檔放進專案；
刪掉 CSS 最上方那行 @import；
自行用 @font-face 掛載，或直接依賴系統字型（--lct-font-family 已含 PingFang TC、Microsoft JhengHei 等後備字型）。

驗證是否引入成功

貼上這段，若按鈕呈現紅底白字、圓角，代表成功：

<div class="lct-root">
  <button class="lct-btn lct-btn--primary">如果我是紅色，代表 Lucent 已生效</button>
</div>

瀏覽器支援

使用到 CSS 變數、Flexbox、aspect-ratio、:is() 等特性，支援所有現代瀏覽器與 SketchUp 內嵌的 Chromium。不支援 IE11。