安裝與引入

方式 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（推薦給一般網頁）

CI 會把版本化的 CSS/JS 發佈到本文件站的 /lib/ 路徑，多個專案共用同一份：

<!-- 正式專案：鎖定版本（immutable 快取一年，網址永久有效）-->
<link rel="stylesheet" href="https://lucent.largehomeai.com/lib/v1.1.0/lucent-ui.css">
<script src="https://lucent.largehomeai.com/lib/v1.1.0/lucent-ui.js"></script>

<!-- 原型 / 開發：永遠最新版（5 分鐘快取）-->
<link rel="stylesheet" href="https://lucent.largehomeai.com/lib/latest/lucent-ui.css">

正式專案請鎖定 /lib/vX.Y.Z/ 版本網址，不要用 /lib/latest/。latest 會隨每次 push 更新，可能被破壞性變更影響。

發佈新版本的流程（維護者）：

# 1. 複製當前檔案為新版本快照
mkdir dist/v1.1.1
cp lucent-ui.css lucent-ui.js dist/v1.1.1/
# 2. commit 並 push main，CI 會自動部署 /lib/v1.1.1/
git add dist && git commit -m "release v1.1.1" && git push

方式 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、CSS Grid、aspect-ratio、media query（響應式 utility）等特性，支援所有現代瀏覽器與 SketchUp 內嵌的 Chromium。不支援 IE11。