dsh-comfyui 0.3.0-beta.4 → 0.3.0-beta.5

package/README.en.md

@@ -22,7 +22,7 @@
 
 - `comfyui_run` — submit a ComfyUI API-format workflow, or pick a built-in template, and get the generated media back. Two modes: `sync` (wait and return media) and `async` (start a background job, collect with `job_output` — ideal for video).
 - `comfyui_object_info` — list the node definitions of your ComfyUI server so the agent can build valid workflows on the fly.
-- `comfyui_workflow` — list and run runnable workflows from the plugin library. `action: list` also reports graph workflows you saved on the ComfyUI server and whether each has been **extracted** into runnable workflows; unextracted graphs are flagged so the agent tells you to extract them in the panel first.
+- `comfyui_workflow` — list and run runnable workflows from the plugin library. `action: list` also reports your ComfyUI server address and local install dirs (the `env` field), plus graph workflows you saved on the ComfyUI server and whether each has been **extracted** into runnable workflows; unextracted graphs are flagged so the agent tells you to extract them in the panel first. `action: refresh` re-derives one workflow's parameter snapshot by id and saves it back (force-rescans the TTS voice library first, then updates option/number metadata from the current node definitions) — run it after the voice library or node definitions changed.
 
 ### UI panel
 
@@ -66,13 +66,13 @@ Results render as a media wall (images/videos with download links) right in the
 
 ### Settings page
 
-A ComfyUI section in the DH settings where you can edit the server URL (`baseUrl`), API-key env var (`apiKeyEnv`), media base URL (`mediaHost`), test the connection, and switch the plugin UI language (Chinese / English — stored in the browser, applies to the whole plugin UI), all without touching `cordis.yml`. The data directory and asset cap are configured in `cordis.yml` only and are not exposed in the settings page.
+A ComfyUI section in the DH settings where you can edit the server URL (`baseUrl`), API-key env var (`apiKeyEnv`), media base URL (`mediaHost`), the local ComfyUI install directories (`comfyuiDirs`, multiple allowed — mapped dirs / multiple installs; the agent uses them to locate your ComfyUI files and the TTS voice library without asking), test the connection, and switch the plugin UI language (Chinese / English — stored in the browser, applies to the whole plugin UI), all without touching `cordis.yml`. The data directory and asset cap are configured in `cordis.yml` only and are not exposed in the settings page.
 
 <p align="center"><img src="images/settings.png" width="70%" alt="ComfyUI settings page (with UI language switch)" title="ComfyUI settings page (with UI language switch)" /></p>
 
 ### Companion skill
 
-A runtime skill (`dsh-comfyui-workflows`) registered through `ctx.skills.register`: the agent learns the graph-vs-runnable model, canvas analysis rules (connected components, bypassed groups, dangling nodes), when to ask you about extract mode, and the extraction tech rules.
+A runtime skill (`dsh-comfyui-workflows`) registered through `ctx.skills.register`: the agent learns the graph-vs-runnable model, canvas analysis rules (connected components, bypassed groups, dangling nodes), when to ask you about extract mode, and the extraction tech rules. The skill also carries the **local environment** story (read `env.comfyuiDirs` from `comfyui_workflow list`) and the **TTS-Audio-Suite voice-library workflow** (one unified flow: refresh the snapshot first, then query — refresh via the `/api/tts-audio-suite/voice-library?refresh=1` endpoint plus `action: refresh` to re-derive and write the snapshot back; query prefers the HTTP endpoint, otherwise lists `{comfyuiDir}/models/voices` etc.; a new voice rejected at run time = stale snapshot), so the agent never has to dig through the plugin's source again.
 
 ### Graph workflows vs runnable workflows
 
@@ -98,6 +98,7 @@ Every runnable workflow carries an adjustable **parameter set** (`parameters`) s
 - **Boolean parameters use a checkbox**: pick `true` / `false` directly; at run time the `"true"` / `"false"` / `0` / `1` spellings are accepted too (defaults stored as strings by older versions are normalized instead of being silently dropped).
 - **Int vs. float number parameters**: the declared input type (`INT` / `FLOAT`) is read from the ComfyUI node definition, so FLOAT inputs like `cfg` or `denoise` accept decimals while INT inputs like `steps` or `seed` are rounded at run time; unknown types are treated as decimals. Each row shows `number/int` or `number/float`, with range and step in the tooltip.
 - **Agent-facing**: the parameter list is written into the workflow's input notes (`inputs` field) and shown by `comfyui_workflow` `action: list`; `action: run` accepts `parameters: {"prompt": "...", "seed": 42}` overrides — explicit values win over random/default, omitted parameters use their defaults.
+- **Parameter snapshot & refresh**: a parameter's options/number metadata (`options`, `numberKind`, …) is copied from the ComfyUI node definitions **at save time** and is never auto-updated afterwards (noticeable with growing lists like the voice library or uploaded files). Refresh it via `comfyui_workflow action: refresh { id }`, or — from other programs — the same-origin route `POST /comfyui/workflows/refresh-params` (body `{ "id": ... }`). Refreshing only touches derived fields; your hand-added advanced parameters and authored defaults are preserved. Until refreshed, `action: list` may be missing new voices and `action: run` will reject them.
 - **Load-area integration**: an unset image-type parameter is filled with the load-area's current source image, and unset `width`/`height` are auto-matched to that image's recorded pixel size. Explicit values always win, so the agent can still override both.
 
 ## Requirements
@@ -155,6 +156,8 @@ The plugin reads a `comfyui` section from `cordis.yml` (or the settings page):
     maxAssets: 200
     mediaHost: ''
     outputDir: ''
+    comfyuiDirs:
+      - 'D:\ComfyUI'
 ```
 
 | Key | Default | Description |
@@ -170,6 +173,7 @@ The plugin reads a `comfyui` section from `cordis.yml` (or the settings page):
 | `maxAssets` | `200` | Max entries kept in the asset index |
 | `mediaHost` | `''` (auto-detect) | External base URL for generated media (e.g. `http://192.168.1.5:3080`); empty auto-uses the origin the browser actually reaches this server with |
 | `outputDir` | `''` (inferred) | ComfyUI's output directory on this machine, used to locate files when deleting an asset; empty infers it from the paths ComfyUI reports, and deletion falls back to removing the index record when it cannot (e.g. a remote ComfyUI) |
+| `comfyuiDirs` | `[]` | Local ComfyUI install root(s) (multiple allowed: mapped dirs / multiple installs). The agent reads them via `env.comfyuiDirs` from `comfyui_workflow list` to locate models, custom nodes and the TTS-Audio-Suite voice library directly |
 
 ## Roadmap & design boundaries
 

package/README.md

@@ -22,7 +22,7 @@
 
 - `comfyui_run` —— 提交 ComfyUI API 格式的工作流，或选用内置模板，返回生成的媒体。两种模式：`sync`（等待并返回媒体）与 `async`（后台任务，用 `job_output` 收集结果——视频生成强烈建议）。
 - `comfyui_object_info` —— 列出你的 ComfyUI 服务器支持的节点定义，让 Agent 能当场构造合法的工作流。
-- `comfyui_workflow` —— 列出并运行插件库中的可运行工作流。`action: list` 还会报告你在 ComfyUI 端保存的图工作流以及每个是否已**提取**出可运行执行流；未提取的会明确标注，Agent 会先转告你在面板里点"提取"。
+- `comfyui_workflow` —— 列出并运行插件库中的可运行工作流。`action: list` 还会报告你的 ComfyUI 服务器地址与本机 ComfyUI 目录（`env` 字段），以及你在 ComfyUI 端保存的图工作流和每个是否已**提取**出可运行执行流；未提取的会明确标注，Agent 会先转告你在面板里点"提取"。`action: refresh` 按 id 重算某个工作流的参数快照并写回（先强制 TTS 音色库重扫，再按最新节点定义更新参数的选项/数值声明）——音色库或节点定义变更后跑它。
 
 ### UI 面板
 
@@ -66,13 +66,13 @@
 
 ### 设置页
 
-DH 设置里新增 "ComfyUI" 分区：改服务器地址（`baseUrl`）、API Key 环境变量名（`apiKeyEnv`）、媒体访问地址（`mediaHost`）、测试连接，并可切换插件界面语言（中文 / English——存于浏览器，作用于整个插件 UI），无需改动 `cordis.yml`。数据目录与资产上限只通过 `cordis.yml` 配置，不在设置页暴露。
+DH 设置里新增 "ComfyUI" 分区：改服务器地址（`baseUrl`）、API Key 环境变量名（`apiKeyEnv`）、媒体访问地址（`mediaHost`）、本机 ComfyUI 安装目录（`comfyuiDirs`，可多条——目录映射 / 多实例；Agent 据此直接定位你的 ComfyUI 文件与 TTS 音色库，无需再询问）、测试连接，并可切换插件界面语言（中文 / English——存于浏览器，作用于整个插件 UI），无需改动 `cordis.yml`。数据目录与资产上限只通过 `cordis.yml` 配置，不在设置页暴露。
 
 <p align="center"><img src="images/settings.png" width="70%" alt="ComfyUI 设置页（含界面语言切换）" title="ComfyUI 设置页（含界面语言切换）" /></p>
 
 ### 配套 skill
 
-通过 `ctx.skills.register` 注册的运行时 skill（`dsh-comfyui-workflows`）：让 Agent 掌握图工作流 vs 执行流的概念、画布分析规则（连通分量、绕过组、悬空节点）、何时该询问你提取方式，以及图→API 提取的技术规则。
+通过 `ctx.skills.register` 注册的运行时 skill（`dsh-comfyui-workflows`）：让 Agent 掌握图工作流 vs 执行流的概念、画布分析规则（连通分量、绕过组、悬空节点）、何时该询问你提取方式，以及图→API 提取的技术规则。skill 还附带了**本机环境**说明（从 `comfyui_workflow list` 的 `env` 读你的 ComfyUI 目录）与**TTS-Audio-Suite 音色库查询**（统一流程：先刷新快照再查询——刷新用 ComfyUI 的 `/api/tts-audio-suite/voice-library?refresh=1` + `action: refresh` 重算写回快照，查询优先走 HTTP 接口、其次直接列 `{comfyuiDir}/models/voices` 等目录；新音色运行被拒 = 快照过期），Agent 不必反复翻插件源码。
 
 ### 图工作流 vs 可运行工作流（提取执行流）
 
@@ -98,6 +98,7 @@ ComfyUI 分两层：
 - **布尔参数用勾选框编辑**：`true` / `false` 直接点选；运行时也接受 `"true"` / `"false"` / `0` / `1` 这些写法（旧版本存成字符串的默认值会自动归一，不再被静默忽略）。
 - **数字参数区分整数/小数**：从 ComfyUI 节点定义读取输入的声明类型（`INT` / `FLOAT`），`cfg`、`denoise` 这类 FLOAT 参数可直接填小数，`steps`、`seed` 这类 INT 参数在运行时四舍五入；类型未知时按小数处理。参数行会标出 `number/int`、`number/float`，鼠标悬停显示取值范围与步长。
 - **Agent 感知**：参数清单自动写入工作流的"参数说明"（`inputs` 字段），`comfyui_workflow` 工具的 `action: list` 会展示；`action: run` 接受 `parameters: {"prompt": "...", "seed": 42}` 覆盖——显式传值优先于随机/默认，未传参数用默认值。
+- **参数快照与刷新**：每个参数的选项/数值声明（`options`、`numberKind` 等）在**保存工作流那一刻**从 ComfyUI 节点定义拷贝，之后不会自动更新（音色库、上传文件这类会长大的列表尤其明显）。刷新手段：Agent 用 `comfyui_workflow action: refresh { id }`；其他程序可调同源路由 `POST /comfyui/workflows/refresh-params`（body `{ "id": ... }`）。刷新只更新派生字段，**不会**动你手动加的高级参数与默认值；不刷新时，`action: list` 的选项可能缺新音色、`action: run` 传新音色会被拒绝。
 - **加载区联动**：未显式指定的加载参数按加载位顺序自动填入（同类型匹配）；未传的 `width`/`height` 自动匹配源图记录的像素尺寸。显式传值始终优先，Agent 仍可覆盖两者，并能从 `action: list` 的 `loadArea` 字段看到用户加载了什么。
 
 ## 环境要求
@@ -155,6 +156,8 @@ Agent 会选用模板，或用 `comfyui_object_info` 探查你的服务器，或
     maxAssets: 200
     mediaHost: ''
     outputDir: ''
+    comfyuiDirs:
+      - 'D:\ComfyUI'
 ```
 
 | 键 | 默认值 | 说明 |
@@ -170,6 +173,7 @@ Agent 会选用模板，或用 `comfyui_object_info` 探查你的服务器，或
 | `maxAssets` | `200` | 资产索引最多保留的条数 |
 | `mediaHost` | `''`（自动检测） | 生成媒体的外网访问基址（如 `http://192.168.1.5:3080`）；留空自动使用浏览器实际访问本服务器的地址 |
 | `outputDir` | `''`（自动推断） | ComfyUI 在本机的输出目录，删除资产时用它定位文件；留空则从 ComfyUI 返回的文件路径自动推断，推断不出（如远程部署）时只删索引记录 |
+| `comfyuiDirs` | `[]` | 本机 ComfyUI 安装目录列表（可多条：目录映射 / 多实例）。Agent 通过 `comfyui_workflow list` 的 `env.comfyuiDirs` 读取，据此定位 models、自定义节点与 TTS-Audio-Suite 音色库等文件 |
 
 ## Roadmap 与设计边界
 

package/client/client.js

@@ -26,6 +26,11 @@ window.__ModuleLoader__.load({
 			configNotWritable: "设置服务不可用，请通过 cordis.yml 修改配置。",
 			mediaHost: "媒体访问地址",
 			mediaHostHint: "生成图片/媒体在聊天中使用的完整地址（如 http://192.168.1.5:3080）。留空时自动使用浏览器访问本服务器的地址；内网或反向代理下若图片不显示，请在此填写你访问本页面所用的地址。",
+			comfyuiDirs: "ComfyUI 目录",
+			comfyuiDirsHint: "本机 ComfyUI 安装目录，可添加多个（目录映射 / 多实例 / 便携版）。Agent 会据此直接定位你的 ComfyUI 文件（models、工作流、TTS-Audio-Suite 音色库等），无需再向你询问。",
+			comfyuiDirAdd: "＋ 添加目录",
+			comfyuiDirRemove: "移除该目录",
+			comfyuiDirPlaceholder: "如 D:\\ComfyUI",
 			language: "界面语言",
 			languageHint: "切换插件界面语言（中文 / English）。切换后页面会自动刷新。",
 			cardGenerating: "ComfyUI 生成中…",
@@ -202,6 +207,11 @@ window.__ModuleLoader__.load({
 			configNotWritable: "Settings service unavailable — edit cordis.yml instead.",
 			mediaHost: "Media base URL",
 			mediaHostHint: "Absolute base URL used for generated media in chat (e.g. http://192.168.1.5:3080). Leave empty to auto-detect the address your browser uses to reach this server; fill it in when images do not load over LAN or a reverse proxy.",
+			comfyuiDirs: "ComfyUI directories",
+			comfyuiDirsHint: "ComfyUI install root(s) on this machine; add multiple for mapped/multiple installs. The agent reads these to locate your ComfyUI files (models, workflows, the TTS-Audio-Suite voice library) directly instead of asking you.",
+			comfyuiDirAdd: "+ Add directory",
+			comfyuiDirRemove: "Remove this directory",
+			comfyuiDirPlaceholder: "e.g. D:\\ComfyUI",
 			language: "Language",
 			languageHint: "Switch the plugin UI language (中文 / English). The page reloads after switching.",
 			cardGenerating: "ComfyUI generating…",
@@ -694,6 +704,7 @@ window.__ModuleLoader__.load({
 			const [baseUrl, setBaseUrl] = (0, react.useState)("");
 			const [apiKeyEnv, setApiKeyEnv] = (0, react.useState)("");
 			const [mediaHost, setMediaHost] = (0, react.useState)("");
+			const [comfyuiDirs, setComfyuiDirs] = (0, react.useState)([]);
 			const [loadError, setLoadError] = (0, react.useState)(null);
 			const [saving, setSaving] = (0, react.useState)(false);
 			const [saveState, setSaveState] = (0, react.useState)("idle");
@@ -708,6 +719,7 @@ window.__ModuleLoader__.load({
 					setBaseUrl(view.baseUrl);
 					setApiKeyEnv(view.apiKeyEnv);
 					setMediaHost(view.mediaHost ?? "");
+					setComfyuiDirs(Array.isArray(view.comfyuiDirs) ? view.comfyuiDirs : []);
 				}).catch((error) => {
 					if (cancelled) return;
 					setLoadError(error instanceof Error ? error.message : String(error));
@@ -720,16 +732,19 @@ window.__ModuleLoader__.load({
 				setSaving(true);
 				setSaveState("idle");
 				try {
+					const dirs = comfyuiDirs.map((dir) => dir.trim()).filter((dir) => dir !== "");
 					const payload = await postJson("/comfyui/config", { patch: {
 						baseUrl,
 						apiKeyEnv,
-						mediaHost
+						mediaHost,
+						comfyuiDirs: dirs
 					} });
 					if (payload.config !== void 0) {
 						setConfig(payload.config);
 						setBaseUrl(payload.config.baseUrl);
 						setApiKeyEnv(payload.config.apiKeyEnv);
 						setMediaHost(payload.config.mediaHost ?? "");
+						setComfyuiDirs(payload.config.comfyuiDirs ?? []);
 					}
 					setSaveState("saved");
 				} catch (error) {
@@ -799,7 +814,43 @@ window.__ModuleLoader__.load({
 					setMediaHost(event.target.value);
 					setSaveState("idle");
 				}
-			}), (0, react.createElement)("div", { className: "dsc-hint" }, t("mediaHostHint"))), (0, react.createElement)("div", { className: "dsc-row" }, (0, react.createElement)("button", {
+			}), (0, react.createElement)("div", { className: "dsc-hint" }, t("mediaHostHint"))), (0, react.createElement)("div", { className: "dsc-field" }, (0, react.createElement)("label", null, t("comfyuiDirs")), comfyuiDirs.map((dir, index) => (0, react.createElement)("div", {
+				key: `dsc-dir-${index}`,
+				style: {
+					display: "flex",
+					gap: "8px",
+					marginBottom: "8px",
+					alignItems: "center"
+				}
+			}, (0, react.createElement)("input", {
+				className: "dsc-input",
+				value: dir,
+				placeholder: t("comfyuiDirPlaceholder"),
+				style: { flex: "1" },
+				onChange: (event) => {
+					const next = comfyuiDirs.slice();
+					next[index] = event.target.value;
+					setComfyuiDirs(next);
+					setSaveState("idle");
+				}
+			}), (0, react.createElement)("button", {
+				className: "dsc-btn",
+				title: t("comfyuiDirRemove"),
+				disabled: !config.writable,
+				onClick: () => {
+					const next = comfyuiDirs.slice();
+					next.splice(index, 1);
+					setComfyuiDirs(next);
+					setSaveState("idle");
+				}
+			}, "×"))), (0, react.createElement)("button", {
+				className: "dsc-btn",
+				disabled: !config.writable,
+				onClick: () => {
+					setComfyuiDirs([...comfyuiDirs, ""]);
+					setSaveState("idle");
+				}
+			}, t("comfyuiDirAdd")), (0, react.createElement)("div", { className: "dsc-hint" }, t("comfyuiDirsHint"))), (0, react.createElement)("div", { className: "dsc-row" }, (0, react.createElement)("button", {
 				className: "dsc-btn",
 				disabled: saving || !config.writable,
 				onClick: () => void save()
@@ -2804,7 +2855,123 @@ window.__ModuleLoader__.load({
 				controls: true,
 				preload: "metadata",
 				onClick: (event) => event.stopPropagation()
-			}) : (0, react.createElement)("img", {
+			}) : first.kind === "audio" ? (0, react.createElement)("div", { className: "dsc-asset-audio-icon" }, (0, react.createElement)("svg", {
+				className: "dsc-asset-audio-icon-wave",
+				"aria-hidden": "true"
+			}, (0, react.createElement)("defs", null, (0, react.createElement)("pattern", {
+				id: "dsc-wave-pattern",
+				width: 64,
+				height: 110,
+				patternUnits: "userSpaceOnUse"
+			}, (0, react.createElement)("g", { fill: "rgba(255,255,255,0.15)" }, (0, react.createElement)("rect", {
+				x: 0,
+				y: 50,
+				width: 2,
+				height: 10,
+				rx: 1
+			}), (0, react.createElement)("rect", {
+				x: 4,
+				y: 44,
+				width: 2,
+				height: 22,
+				rx: 1
+			}), (0, react.createElement)("rect", {
+				x: 8,
+				y: 48,
+				width: 2,
+				height: 14,
+				rx: 1
+			}), (0, react.createElement)("rect", {
+				x: 12,
+				y: 38,
+				width: 2,
+				height: 34,
+				rx: 1
+			}), (0, react.createElement)("rect", {
+				x: 16,
+				y: 46,
+				width: 2,
+				height: 18,
+				rx: 1
+			}), (0, react.createElement)("rect", {
+				x: 20,
+				y: 52,
+				width: 2,
+				height: 6,
+				rx: 1
+			}), (0, react.createElement)("rect", {
+				x: 24,
+				y: 40,
+				width: 2,
+				height: 30,
+				rx: 1
+			}), (0, react.createElement)("rect", {
+				x: 28,
+				y: 48,
+				width: 2,
+				height: 14,
+				rx: 1
+			}), (0, react.createElement)("rect", {
+				x: 32,
+				y: 42,
+				width: 2,
+				height: 26,
+				rx: 1
+			}), (0, react.createElement)("rect", {
+				x: 36,
+				y: 36,
+				width: 2,
+				height: 38,
+				rx: 1
+			}), (0, react.createElement)("rect", {
+				x: 40,
+				y: 47,
+				width: 2,
+				height: 16,
+				rx: 1
+			}), (0, react.createElement)("rect", {
+				x: 44,
+				y: 51,
+				width: 2,
+				height: 8,
+				rx: 1
+			}), (0, react.createElement)("rect", {
+				x: 48,
+				y: 40,
+				width: 2,
+				height: 30,
+				rx: 1
+			}), (0, react.createElement)("rect", {
+				x: 52,
+				y: 45,
+				width: 2,
+				height: 20,
+				rx: 1
+			}), (0, react.createElement)("rect", {
+				x: 56,
+				y: 38,
+				width: 2,
+				height: 34,
+				rx: 1
+			}), (0, react.createElement)("rect", {
+				x: 60,
+				y: 49,
+				width: 2,
+				height: 12,
+				rx: 1
+			})))), (0, react.createElement)("rect", {
+				width: "100%",
+				height: "100%",
+				fill: "url(#dsc-wave-pattern)"
+			})), (0, react.createElement)("svg", {
+				className: "dsc-asset-audio-icon-sym",
+				viewBox: "0 0 24 24",
+				"aria-hidden": "true",
+				dangerouslySetInnerHTML: { __html: "<path fill=\"currentColor\" d=\"M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z\"/>" }
+			}), (0, react.createElement)("span", {
+				className: "dsc-asset-audio-icon-name",
+				title: first.filename
+			}, first.filename)) : (0, react.createElement)("img", {
 				src: first.url,
 				alt: first.filename,
 				loading: "lazy",
@@ -3159,6 +3326,10 @@ select.dsc-input option { background: var(--dsw-alias-bg-layer-1); color: var(--
 .dsc-asset:hover .dsc-asset-trash, .dsc-asset-trash:focus-visible { opacity: 1; }
 .dsc-asset-trash:hover { background: var(--dsw-alias-state-error-primary); color: #fff; }
 .dsc-asset img, .dsc-asset video { width: 100%; height: 110px; object-fit: cover; display: block; background: #000; }
+.dsc-asset-audio-icon { position: relative; width: 100%; height: 110px; box-sizing: border-box; padding: 0 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: #26702b; overflow: hidden; }
+.dsc-asset-audio-icon-wave { position: absolute; inset: 0; width: 100%; height: 100%; }
+.dsc-asset-audio-icon-sym { position: relative; width: 42px; height: 42px; color: #fff; }
+.dsc-asset-audio-icon-name { position: relative; max-width: 100%; font-size: 11px; color: rgba(255, 255, 255, 0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .dsc-asset--empty {
   height: 110px; padding: 8px; box-sizing: border-box;
   display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;