multi-ccp 0.1.3 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +44 -17
- package/README.zh-CN.md +44 -17
- package/dist/cli/program.js +213 -19
- package/dist/cli/program.js.map +1 -1
- package/dist/core/ccr.js +19 -1
- package/dist/core/ccr.js.map +1 -1
- package/dist/core/presets.d.ts +47 -0
- package/dist/core/presets.js +142 -0
- package/dist/core/presets.js.map +1 -0
- package/dist/core/profiles.d.ts +2 -1
- package/dist/core/profiles.js +19 -3
- package/dist/core/profiles.js.map +1 -1
- package/dist/core/types.d.ts +8 -0
- package/dist/web/assets/app.js +71 -0
- package/dist/web/assets/index.html +111 -0
- package/dist/web/assets/styles.css +1 -0
- package/dist/web/server.d.ts +6 -0
- package/dist/web/server.js +531 -0
- package/dist/web/server.js.map +1 -0
- package/package.json +2 -2
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="zh-CN">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
|
+
<meta name="ccp-ui-token" content="__CCP_UI_TOKEN__" />
|
|
7
|
+
<title>multi-ccp</title>
|
|
8
|
+
<link rel="stylesheet" href="/styles.css" />
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<div class="grain" aria-hidden="true"></div>
|
|
12
|
+
<main class="shell">
|
|
13
|
+
<header class="topbar">
|
|
14
|
+
<section class="brand-block">
|
|
15
|
+
<div class="brand-mark">ccp</div>
|
|
16
|
+
<div>
|
|
17
|
+
<h1>multi-ccp</h1>
|
|
18
|
+
</div>
|
|
19
|
+
</section>
|
|
20
|
+
<section class="top-actions">
|
|
21
|
+
<button class="ghost icon-action icon-only" id="themeToggle" type="button" aria-label="切换深色" title="切换深色"><span class="ui-icon" data-icon="moon"></span></button>
|
|
22
|
+
<button class="ghost icon-action icon-only" id="refreshBtn" type="button" aria-label="刷新" title="刷新"><span class="ui-icon" data-icon="refresh"></span></button>
|
|
23
|
+
<button class="primary icon-action" id="newProfileBtn" type="button"><span class="ui-icon" data-icon="plus"></span><span>New</span></button>
|
|
24
|
+
</section>
|
|
25
|
+
</header>
|
|
26
|
+
|
|
27
|
+
<section class="summary-grid" id="summaryGrid" aria-live="polite"></section>
|
|
28
|
+
|
|
29
|
+
<section class="workspace" id="workspace">
|
|
30
|
+
<div class="board" id="profileBoard"></div>
|
|
31
|
+
<aside class="drawer" id="drawer" aria-live="polite" aria-hidden="true">
|
|
32
|
+
<div class="drawer-rail">
|
|
33
|
+
<button class="icon-btn" id="drawerClose" type="button" title="关闭">×</button>
|
|
34
|
+
</div>
|
|
35
|
+
<div class="empty-drawer">
|
|
36
|
+
<p class="eyebrow">profile details</p>
|
|
37
|
+
<h2>选择一个 Profile</h2>
|
|
38
|
+
<p>点击左侧卡片后，详情和编辑面板会从右侧展开。</p>
|
|
39
|
+
</div>
|
|
40
|
+
</aside>
|
|
41
|
+
</section>
|
|
42
|
+
</main>
|
|
43
|
+
|
|
44
|
+
<dialog id="newProfileDialog" class="modal">
|
|
45
|
+
<form method="dialog" class="modal-card" id="newProfileForm">
|
|
46
|
+
<div class="modal-head">
|
|
47
|
+
<div>
|
|
48
|
+
<p class="eyebrow">create profile</p>
|
|
49
|
+
<h2>New Profile</h2>
|
|
50
|
+
</div>
|
|
51
|
+
<button class="icon-btn" value="cancel" formnovalidate type="button" data-dialog-close="newProfileDialog">×</button>
|
|
52
|
+
</div>
|
|
53
|
+
<div class="preset-layout">
|
|
54
|
+
<aside class="preset-picker">
|
|
55
|
+
<div class="preset-search">
|
|
56
|
+
<span class="ui-icon" data-icon="search"></span>
|
|
57
|
+
<input id="presetSearch" type="search" placeholder="搜索预设..." autocomplete="off" />
|
|
58
|
+
</div>
|
|
59
|
+
<div class="preset-filters" id="presetFilters">
|
|
60
|
+
<button class="chip active" type="button" data-preset-filter="all">All</button>
|
|
61
|
+
<button class="chip" type="button" data-preset-filter="api">API</button>
|
|
62
|
+
<button class="chip" type="button" data-preset-filter="ccr">CCR</button>
|
|
63
|
+
<button class="chip" type="button" data-preset-filter="custom">Custom</button>
|
|
64
|
+
<button class="chip" type="button" data-preset-filter="login">Login</button>
|
|
65
|
+
</div>
|
|
66
|
+
<div class="preset-list" id="presetList"></div>
|
|
67
|
+
</aside>
|
|
68
|
+
<section class="preset-detail">
|
|
69
|
+
<input type="hidden" name="kind" id="newKind" value="api" />
|
|
70
|
+
<input type="hidden" name="presetId" id="presetId" value="custom-api" />
|
|
71
|
+
<div id="presetSummary" class="preset-summary"></div>
|
|
72
|
+
<label>Profile 名称 <input name="name" id="newProfileName" required autocomplete="off" /></label>
|
|
73
|
+
<div data-kind-fields="api">
|
|
74
|
+
<label>API Key <input name="token" id="newToken" type="password" placeholder="输入 key；留空则写入占位符" /></label>
|
|
75
|
+
</div>
|
|
76
|
+
<div data-kind-fields="custom-api" hidden>
|
|
77
|
+
<label>Base URL <input name="baseUrl" required placeholder="https://api.example.com/anthropic" /></label>
|
|
78
|
+
<label>Auth Token <input name="customToken" type="password" placeholder="留空则写入占位符" /></label>
|
|
79
|
+
<label>Model <input name="model" placeholder="留空使用 Claude Code 默认模型" /></label>
|
|
80
|
+
</div>
|
|
81
|
+
<div data-kind-fields="ccr" hidden>
|
|
82
|
+
<label>CCR Token <input name="ccrToken" type="password" placeholder="留空使用预设默认值" /></label>
|
|
83
|
+
<p class="hint">该模板会按预设模型路由生成 CCR preset。CCR provider/model 请在 CCR UI 中管理。</p>
|
|
84
|
+
</div>
|
|
85
|
+
<div data-kind-fields="manual-ccr" hidden>
|
|
86
|
+
<label>模型路由 <select name="route" id="manualCcrRoute" required><option value="">加载 CCR 路由中...</option></select></label>
|
|
87
|
+
<label>CCR Preset 名称 <input name="manualCcrPreset" placeholder="默认使用 Profile 名称" autocomplete="off" /></label>
|
|
88
|
+
<label>CCR Token <input name="manualCcrToken" type="password" placeholder="留空使用 ccr-local-secret" /></label>
|
|
89
|
+
<p class="hint">模型路由来自 Claude Code Router 的 provider/model 配置；如果没有想要的模型，请先打开 CCR UI 添加。</p>
|
|
90
|
+
</div>
|
|
91
|
+
<div data-kind-fields="login" hidden>
|
|
92
|
+
<p class="hint">Login Profile 不保存 Claude 账号密码，只隔离 Claude Code 的登录状态。</p>
|
|
93
|
+
</div>
|
|
94
|
+
</section>
|
|
95
|
+
</div>
|
|
96
|
+
<menu class="modal-actions">
|
|
97
|
+
<button class="ghost" value="cancel" formnovalidate type="button" data-dialog-close="newProfileDialog">取消</button>
|
|
98
|
+
<button class="primary" id="createProfileSubmit" value="default" type="button">创建</button>
|
|
99
|
+
</menu>
|
|
100
|
+
<div class="dialog-toast-region"></div>
|
|
101
|
+
</form>
|
|
102
|
+
</dialog>
|
|
103
|
+
|
|
104
|
+
<dialog id="ccrDialog" class="modal">
|
|
105
|
+
<div class="modal-card ccr-card" id="ccrPanel"></div>
|
|
106
|
+
</dialog>
|
|
107
|
+
|
|
108
|
+
<div class="toast-region" id="toastRegion"></div>
|
|
109
|
+
<script src="/app.js" type="module"></script>
|
|
110
|
+
</body>
|
|
111
|
+
</html>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{color-scheme:light;--bg:#f5f3ee;--panel:#fffdf8;--panel-2:#ffffff;--ink:#191815;--muted:#726d64;--faint:#a29a90;--line:#ded8cf;--accent:#9b5a36;--blue:#405f9f;--green:#2f7358;--orange:#a86722;--red:#ad4747;--chip:#efe8dd;--shadow:0 10px 30px rgba(40,34,26,.08);--radius:16px;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--sans:"Aptos","Segoe UI Variable","Segoe UI",system-ui,-apple-system,sans-serif}html[data-theme=dark]{color-scheme:dark;--bg:#141412;--panel:#1d1c19;--panel-2:#24231f;--ink:#eee8de;--muted:#aaa196;--faint:#7e766d;--line:#39352e;--accent:#d98b5d;--blue:#91aef0;--green:#73c49f;--orange:#dfb168;--red:#e07b77;--chip:#2c2822;--shadow:0 12px 34px rgba(0,0,0,.32)}*{box-sizing:border-box}html,body{height:100%}body{margin:0;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 8% -8%,rgba(155,90,54,.12),transparent 34%),radial-gradient(circle at 100% 0,rgba(64,95,159,.1),transparent 28%)}.grain{display:none}button,input,select{font:inherit}button{border:0;cursor:pointer}.shell{position:relative;width:min(1500px,100% - 24px);height:100vh;margin:0 auto;padding:12px 0;display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:8px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--panel) 94%,transparent);box-shadow:var(--shadow)}.brand-block{display:flex;align-items:center;gap:10px}.brand-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:var(--ink);color:var(--bg);font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:-.04em}.eyebrow{margin:0 0 2px;color:var(--accent);text-transform:uppercase;letter-spacing:.16em;font-family:var(--mono);font-size:9.5px;font-weight:800}.topbar h1{margin:0;font-size:18px;line-height:1;letter-spacing:-.035em}.top-actions,.filters,.view-switch,.modal-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.ui-icon,.icon-action>svg,.icon-action .ui-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.icon-action{white-space:nowrap}.icon-only{width:36px;min-width:36px;height:36px;padding:0}.icon-only svg{display:block;margin:auto}.primary,.ghost,.chip,.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:31px;border-radius:999px;padding:7px 11px;color:var(--ink);background:var(--panel);border:1px solid var(--line);transition:background .16s,border-color .16s,transform .16s}.primary{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:760}.ghost:hover,.chip:hover,.icon-btn:hover{background:var(--chip);border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}.chip{min-height:27px;padding:5px 9px;font-size:11.5px;color:var(--muted)}.chip.active{background:var(--ink);border-color:var(--ink);color:var(--bg)}.summary-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}.metric{height:48px;padding:8px 11px;border:1px solid var(--line);background:var(--panel);border-radius:14px;box-shadow:0 5px 14px rgba(40,34,26,.035);display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;position:relative;overflow:hidden}.metric:before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:999px;background:var(--faint);opacity:.55}.metric.api:before{background:var(--blue)}.metric.login:before{background:var(--green)}.metric.ccr:before,.metric.ccr-status:before{background:var(--orange)}.metric.attention:before{background:var(--red)}.metric b{font-size:17px;line-height:1;letter-spacing:-.045em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.metric span{color:var(--muted);font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.08em}#ccrMetric{cursor:pointer}#ccrMetric b{display:inline-block;border-bottom:1px solid var(--accent);padding-bottom:2px;line-height:1.05}.workspace{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 0;gap:0;transition:grid-template-columns .28s cubic-bezier(.2,.8,.2,1),gap .28s cubic-bezier(.2,.8,.2,1)}.workspace.drawer-open{grid-template-columns:minmax(0,1fr) 390px;gap:10px}.board,.drawer{min-height:0;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.board{overflow:auto;padding:2px 2px 18px}.board-toolbar{position:sticky;top:0;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px;padding:7px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--panel) 96%,transparent);box-shadow:0 6px 18px rgba(40,34,26,.045)}.board-tools-left,.board-tools-right{display:flex;align-items:center;gap:7px;min-width:0}.board-tools-right{flex:0 0 auto}.search-wrap{width:min(340px,34vw);height:30px;display:flex;align-items:center;gap:7px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:var(--panel-2)}.search-wrap span{color:var(--accent);font-family:var(--mono);font-size:13px}.search-wrap input{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:12.5px}.board-head{display:flex;align-items:center;justify-content:space-between;margin:2px 0 8px;padding:0 2px}.board-head h2{margin:0;font-size:15px;letter-spacing:-.03em}.board-head p{margin:0;color:var(--muted);font-size:11.5px;font-family:var(--mono)}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(218px,1fr));gap:8px;contain:layout}.workspace.drawer-open .cards{grid-template-columns:repeat(auto-fill,minmax(212px,1fr))}.profile-card{cursor:pointer;position:relative;min-height:132px;padding:12px;border:1px solid var(--line);background:var(--panel);border-radius:16px;box-shadow:0 7px 18px rgba(40,34,26,.045);transition:transform .16s,border-color .16s,background .16s,box-shadow .16s}.profile-card:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 7%,transparent),transparent 42%);opacity:0;transition:opacity .16s;pointer-events:none}.profile-card:hover,.profile-card.selected{transform:translateY(-2px);border-color:var(--accent);background:var(--panel-2);box-shadow:0 12px 26px rgba(40,34,26,.08)}.profile-card:hover:before,.profile-card.selected:before{opacity:1}.profile-card.selected:after{content:"";position:absolute;inset:auto 10px 0;height:2px;border-radius:999px;background:var(--accent)}.card-top{display:flex;align-items:center;gap:9px;min-width:0}.profile-icon{width:32px;height:32px;flex:0 0 auto;display:grid;place-items:center;border-radius:11px;background:var(--chip);color:var(--accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 18%,transparent)}.profile-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.profile-icon.api{color:var(--blue)}.profile-icon.login{color:var(--green)}.profile-icon.ccr{color:var(--orange)}.profile-icon.main{color:var(--ink)}.card-title{min-width:0}.profile-card h3{margin:0;font-size:16px;line-height:1.1;letter-spacing:-.035em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-title p{margin:3px 0 0;color:var(--muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tag-row{display:flex;gap:4px;flex-wrap:wrap;margin:8px 0}.tag{display:inline-flex;align-items:center;border-radius:999px;padding:2px 6px;font-size:10px;font-weight:760;background:var(--chip);color:var(--muted);border:1px solid var(--line);white-space:nowrap}.tag.ready{color:var(--green)}.tag.warn{color:var(--orange)}.tag.bad{color:var(--red)}.profile-meta{display:grid;gap:2px;margin:0 0 29px;color:var(--muted);font-size:11.2px;line-height:1.24}.profile-meta div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-meta strong{color:var(--ink);font-weight:760;margin-right:5px}.card-actions{position:absolute;left:11px;right:11px;bottom:10px;display:flex;gap:5px}.tiny{min-height:25px;padding:4px 8px;font-size:11px}.list-table{width:100%;border-collapse:separate;border-spacing:0 5px;font-size:12px}.list-table td,.list-table th{text-align:left;padding:9px 10px;background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .16s,border-color .16s,transform .16s}.list-table th{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.12em;font-family:var(--mono);background:transparent;border-color:transparent}.list-table td:first-child{border-left:1px solid var(--line);border-radius:12px 0 0 12px}.list-table td:last-child{border-right:1px solid var(--line);border-radius:0 12px 12px 0}.list-table tbody tr{cursor:pointer}.list-table tbody tr:hover td,.list-table tbody tr.selected td{background:var(--panel-2);border-color:color-mix(in srgb,var(--accent) 42%,var(--line))}.list-table tbody tr.selected td:first-child{box-shadow:inset 3px 0 0 var(--accent)}.drawer{position:relative;min-height:0;overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--line);background:var(--panel);border-radius:18px;box-shadow:var(--shadow);padding:14px;transform:translateX(16px);opacity:0;pointer-events:none;transition:transform .24s ease,opacity .18s ease}.workspace.drawer-open .drawer{transform:translateX(0);opacity:1;pointer-events:auto}.drawer-rail{display:flex;justify-content:flex-end;margin-bottom:4px}.empty-drawer{display:grid;place-content:center;min-height:70%;padding:22px;text-align:center;color:var(--muted)}.empty-state{min-height:280px;display:grid;place-content:center;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:18px;background:var(--panel)}.drawer h2,.empty-state h2{margin:0 0 8px;font-size:24px;line-height:1.1;letter-spacing:-.045em;color:var(--ink);overflow-wrap:anywhere}.drawer-fixed{flex:0 0 auto}.launch-section{border-top:0;padding-top:0}.drawer-scroll{min-height:0;overflow:auto;flex:1 1 auto;padding-right:4px;border-top:1px solid var(--line);scrollbar-width:thin;scrollbar-color:var(--line) transparent}.drawer-scroll::-webkit-scrollbar{width:8px}.drawer-scroll::-webkit-scrollbar-track{background:transparent}.drawer-scroll::-webkit-scrollbar-thumb{background:var(--line);border:2px solid transparent;border-radius:999px;background-clip:padding-box}.drawer-scroll::-webkit-scrollbar-thumb:hover{background:var(--muted);background-clip:padding-box}.drawer-section{padding:12px 0;border-top:1px solid var(--line)}.drawer-scroll>.profile-summary>.drawer-section:first-child{border-top:0}.kv{display:grid;grid-template-columns:78px minmax(0,1fr);gap:6px;font-size:11.5px;line-height:1.35}.kv span{color:var(--muted)}.kv strong{overflow-wrap:anywhere}.path-link{background:none;border:0;padding:0;margin:0;color:var(--accent);text-decoration:underline;cursor:pointer;font:inherit;line-height:inherit;word-break:break-all;text-align:left;display:block}.path-link:hover{color:var(--ink)}.command{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:8px 9px;background:var(--chip);border-radius:11px;font-family:var(--mono);font-size:11px;overflow:hidden}.command code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.command-actions{display:flex;gap:5px;flex:0 0 auto}label{display:grid;gap:4px;margin:8px 0;color:var(--muted);font-size:11.5px}input,select{width:100%;border:1px solid var(--line);border-radius:11px;padding:8px 34px 8px 9px;background:var(--panel-2);color:var(--ink);outline:0;font-size:12.5px}select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}input:focus,select:focus{border-color:var(--accent)}.danger-actions{display:grid;gap:9px;margin-top:10px}.danger-actions .ghost{justify-self:start}.modal{border:0;background:transparent;opacity:0;transform:translateY(10px) scale(.985);transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.2,1),overlay .22s allow-discrete,display .22s allow-discrete}.modal[open]{opacity:1;transform:translateY(0) scale(1)}@starting-style{.modal[open]{opacity:0;transform:translateY(10px) scale(.985)}}.modal::backdrop{background:rgba(28,24,20,.38);backdrop-filter:blur(8px);opacity:0;transition:opacity .22s ease,overlay .22s allow-discrete,display .22s allow-discrete}.modal[open]::backdrop{opacity:1}@starting-style{.modal[open]::backdrop{opacity:0}}.modal-card{width:min(820px,calc(100vw - 28px));max-height:min(76vh,720px);overflow:hidden;display:flex;flex-direction:column;padding:16px;border:1px solid var(--line);border-radius:22px;background:var(--panel-2);color:var(--ink);box-shadow:var(--shadow);scrollbar-width:thin;scrollbar-color:var(--line) transparent}.modal-card::-webkit-scrollbar{width:8px;height:8px}.modal-card::-webkit-scrollbar-track{background:transparent}.modal-card::-webkit-scrollbar-thumb{background:var(--line);border:2px solid transparent;border-radius:999px;background-clip:padding-box}.modal-card::-webkit-scrollbar-thumb:hover{background:var(--muted);background-clip:padding-box}.ccr-card{width:min(520px,calc(100vw - 28px));max-height:min(70vh,560px)}.modal-head{display:flex;justify-content:space-between;gap:16px;align-items:start}.modal-head h2{margin:0;font-size:18px;letter-spacing:-.035em}.icon-btn{width:30px;height:30px;padding:0}.hint{color:var(--muted);line-height:1.5;font-size:12px}.hint a{display:inline-flex;align-items:center;padding:1px 6px;border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent);text-decoration:none;font-weight:650;line-height:1.35}.hint a:hover{background:var(--chip);border-color:var(--accent)}.preset-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:14px;margin-top:12px;min-height:0;flex:1 1 auto;overflow:hidden}.preset-picker{min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:8px;padding:8px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}.preset-search{height:30px;display:flex;align-items:center;gap:7px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:var(--panel-2)}.preset-search svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;color:var(--accent)}.preset-search input{border:0;background:transparent;padding:0;width:100%;font-size:12px}.preset-filters{display:flex;gap:5px;overflow:auto;padding-bottom:2px}.preset-filters .chip{white-space:nowrap}.preset-list{min-height:0;overflow:auto;display:grid;gap:7px;align-content:start;padding-right:2px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.preset-list::-webkit-scrollbar{width:8px}.preset-list::-webkit-scrollbar-track{background:transparent}.preset-list::-webkit-scrollbar-thumb{background:var(--line);border:2px solid transparent;border-radius:999px;background-clip:padding-box}.preset-option{width:100%;display:grid;grid-template-columns:32px minmax(0,1fr);gap:9px;align-items:center;text-align:left;padding:9px;border:1px solid transparent;border-radius:13px;background:transparent;color:var(--ink);transition:background .16s ease,border-color .16s ease,box-shadow .16s ease}.preset-option:hover{background:var(--chip);border-color:var(--line)}.preset-option.active{background:var(--panel-2);border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}.preset-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:var(--chip);color:var(--accent)}.preset-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.preset-option strong{display:block;font-size:13px;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.preset-option small,.preset-option em{display:block;margin-top:3px;color:var(--muted);font-size:10.5px;font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.preset-option em{color:var(--faint)}.preset-empty{padding:18px 10px;text-align:center;color:var(--muted);font-size:12px;border:1px dashed var(--line);border-radius:12px}.preset-detail{min-width:0;overflow:auto;padding:8px 2px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.preset-detail::-webkit-scrollbar{width:8px;height:8px}.preset-detail::-webkit-scrollbar-track{background:transparent}.preset-detail::-webkit-scrollbar-thumb{background:var(--line);border:2px solid transparent;border-radius:999px;background-clip:padding-box}.preset-detail::-webkit-scrollbar-thumb:hover{background:var(--muted);background-clip:padding-box}.preset-summary{position:relative;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--panel);margin-bottom:12px}.preset-summary h3{margin:0 0 5px;font-size:18px;letter-spacing:-.035em}.preset-summary p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.45}.preset-summary dl{display:grid;grid-template-columns:92px minmax(0,1fr);gap:6px;margin:12px 0 0;font-size:11.5px}.preset-summary dt{color:var(--muted)}.preset-summary dd{margin:0;overflow-wrap:anywhere}.preset-adjust{position:absolute;right:10px;top:10px;display:inline-flex;padding:4px 8px;border:1px solid var(--line);border-radius:999px;color:var(--accent);text-decoration:none;font-size:11px;font-weight:500;background:var(--panel-2)}.preset-adjust:hover{border-color:var(--accent);background:var(--chip)}.preset-config{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}.preset-config summary{cursor:pointer;color:var(--accent);font-size:12px;font-weight:500}.preset-config pre{max-height:190px;overflow:auto;margin:9px 0 0;padding:10px;border-radius:12px;background:var(--chip);font-family:var(--mono);font-size:11px;line-height:1.45;white-space:pre-wrap;scrollbar-width:thin;scrollbar-color:var(--line-strong,var(--line)) transparent}.preset-config pre::-webkit-scrollbar{width:8px;height:8px}.preset-config pre::-webkit-scrollbar-track{background:transparent}.preset-config pre::-webkit-scrollbar-thumb{background:var(--line);border:2px solid transparent;border-radius:999px;background-clip:padding-box}.preset-config pre::-webkit-scrollbar-thumb:hover{background:var(--muted);background-clip:padding-box}.modal-actions{justify-content:flex-end;margin:14px 0 0;padding:0}.toast-region{position:fixed;right:18px;bottom:18px;display:grid;gap:8px;z-index:30}.dialog-toast-region{position:absolute;left:50%;top:14px;transform:translateX(-50%);width:min(420px,calc(100% - 32px));display:grid;justify-items:center;gap:8px;z-index:10000;pointer-events:none}.toast{padding:9px 12px;border:1px solid var(--line);border-radius:13px;background:var(--panel-2);box-shadow:var(--shadow);font-size:12.5px;animation:toast-in .22s ease both,toast-out .28s ease 3.25s forwards}.dialog-toast-region .toast{pointer-events:auto;animation:dialog-toast-in .22s ease both,dialog-toast-out .28s ease 3.25s forwards}@keyframes toast-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dialog-toast-in{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toast-out{to{opacity:0;transform:translateY(6px) scale(.98)}}@keyframes dialog-toast-out{to{opacity:0;transform:translateY(6px) scale(.98)}}@media(max-width:1080px){body{overflow:auto}.shell{height:auto;min-height:100vh}.workspace,.workspace.drawer-open{grid-template-columns:1fr}.drawer{display:none}.workspace.drawer-open .drawer{display:flex;position:fixed;inset:10px;z-index:20;overflow:hidden}.board-toolbar{position:static;align-items:stretch;flex-direction:column}.board-tools-left,.board-tools-right{width:100%;overflow:auto}.search-wrap{width:100%}.summary-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){.preset-layout{grid-template-columns:1fr}.preset-picker{max-height:330px}.preset-list{max-height:210px;overflow:auto}}@media(max-width:720px){.shell{width:calc(100% - 16px);padding:8px 0}.topbar{align-items:flex-start}.summary-grid{grid-template-columns:repeat(2,1fr)}.cards{grid-template-columns:1fr}.filters,.view-switch{overflow:auto;flex-wrap:nowrap}.chip{white-space:nowrap}.top-actions{justify-content:flex-end}.brand-mark{display:none}}
|