外掛殼層 .lct-shell
外掛面板的最外層容器，固定 420px 寬（可用 --lct-shell-width 調整），內部用 flex 直向排列：Header、可捲動的內容區、底部 Tab Bar。
<div class="lct-shell">
<header class="lct-header">…</header>
<div class="lct-shell__body">
<!-- 這裡可捲動 -->
</div>
<nav class="lct-tabbar">…</nav>
</div>
Header .lct-header
頁面頂部標題列，左標題、右動作。
<header class="lct-header">
<span class="lct-header__title">材質庫</span>
<div class="lct-header__actions">
<button class="lct-icon-btn" aria-label="側欄">
<svg class="lct-icon" viewBox="0 0 256 256"><!-- ... --></svg>
</button>
</div>
</header>
底部導覽 Tab Bar .lct-tabbar
外掛主要的分頁切換：材質庫 / 收藏夾 / 模型匯入 / 材質表。
<nav class="lct-tabbar">
<button class="lct-tab is-active" data-lct-toggle="tab" data-lct-group="nav"
data-lct-target="#view-lib" data-lct-panes=".view">材質庫</button>
<button class="lct-tab" data-lct-toggle="tab" data-lct-group="nav"
data-lct-target="#view-fav" data-lct-panes=".view">收藏夾</button>
<button class="lct-tab" data-lct-toggle="tab" data-lct-group="nav"
data-lct-target="#view-import" data-lct-panes=".view">模型匯入</button>
<button class="lct-tab" data-lct-toggle="tab" data-lct-group="nav"
data-lct-target="#view-table" data-lct-panes=".view">材質表</button>
</nav>
<div id="view-lib" class="view">材質庫內容</div>
<div id="view-fav" class="view lct-hidden">收藏夾內容</div>
<div id="view-import" class="view lct-hidden">模型匯入內容</div>
<div id="view-table" class="view lct-hidden">材質表內容</div>
data 屬性說明
| 屬性 | 作用 |
|---|---|
data-lct-toggle="tab" |
標記這是分頁按鈕 |
data-lct-group="nav" |
同一組互斥的分頁共用一個 group 名稱 |
data-lct-target="#id" |
點擊後要顯示的內容區 |
data-lct-panes=".view" |
切換時要先隱藏的所有內容區選擇器 |
目前作用中的分頁會加上 .is-active（文字變紅）。若只是視覺切換、內容由你自己的框架控制，可以省略 data-lct-target / data-lct-panes，只保留 toggle 與 group。
搜尋列 .lct-searchbar
輸入框 + 搜尋按鈕的組合。
<div class="lct-searchbar">
<div class="lct-search">
<svg class="lct-icon" viewBox="0 0 256 256"><!-- 放大鏡 --></svg>
<input type="text" placeholder="搜尋材質…">
</div>
<button class="lct-search-btn">搜尋</button>
</div>
.lct-search 是圓角輸入容器，.lct-search-btn 是紅色搜尋按鈕。放大鏡 icon 可省略。