@dsh-plus/image-studio 0.1.35 → 0.1.36

package/lib/index.d.ts

@@ -306,8 +306,8 @@ declare class ImageStudioService extends Service {
 //#region src/credentials.d.ts
 /**
  * 凭据引用名派生与校验：提供商预设 id → IMAGE_STUDIO_PRESET_<ID>。
- * 规则对齐《插件存储规范》：大写下划线、全大写、前缀属主。
- * 纯函数，零依赖。
+ * 命名与归一走 `@dsh-plus/shared` 的公共助手，本模块只补预设 id 的形态校验。
+ * 纯函数，零依赖（浏览器半亦可安全 import）。
  * @module image-studio/credentials
  */
 /** 预设 id 是否合法（kebab-case，用于引用名派生）。 */

package/lib/index.js

@@ -1,6 +1,6 @@
 import { Service } from "@deepseek-ai/cordis";
 import { credentialRef } from "@deepseek-ai/dsh-credentials";
-import { atomicWriteFile, commitTmpFile, pluginDataPath, unwrapVolatile } from "@dsh-plus/shared";
+import { atomicWriteFile, commitTmpFile, credentialRefName, pluginCachePath, pluginDataPath, unwrapVolatile } from "@dsh-plus/shared";
 import { request } from "node:http";
 import { request as request$1 } from "node:https";
 import { HttpsProxyAgent } from "https-proxy-agent";
@@ -959,12 +959,14 @@ function registerImageStudioApi(ctx, service) {
 //#region src/credentials.ts
 /**
 * 凭据引用名派生与校验：提供商预设 id → IMAGE_STUDIO_PRESET_<ID>。
-* 规则对齐《插件存储规范》：大写下划线、全大写、前缀属主。
-* 纯函数，零依赖。
+* 命名与归一走 `@dsh-plus/shared` 的公共助手，本模块只补预设 id 的形态校验。
+* 纯函数，零依赖（浏览器半亦可安全 import）。
 * @module image-studio/credentials
 */
-/** 引用名前缀（属主段）。 */
-const REF_PREFIX = "IMAGE_STUDIO_PRESET_";
+/** 属主段（插件 id）。 */
+const REF_OWNER = "image-studio";
+/** 业务段前缀（与属主一起构成 IMAGE_STUDIO_PRESET_<ID>）。 */
+const REF_KIND = "preset";
 /** 预设 id 是否合法（kebab-case，用于引用名派生）。 */
 function isValidPresetId(id) {
 	return /^[a-z][a-z0-9-]*$/.test(id) && id.length <= 64;
@@ -972,7 +974,7 @@ function isValidPresetId(id) {
 /** 预设 id → 凭据引用名（kebab → SNAKE 大写）。 */
 function credentialRefNameOf(presetId) {
 	if (!isValidPresetId(presetId)) throw new Error(`非法提供商预设 id：${JSON.stringify(presetId)}`);
-	return `${REF_PREFIX}${presetId.replaceAll("-", "_").toUpperCase()}`;
+	return credentialRefName(REF_OWNER, REF_KIND, presetId);
 }
 //#endregion
 //#region src/images/id.ts
@@ -1243,9 +1245,12 @@ function defaultIdCounter() {
 * 落点 $DSH_HOME/dsh-plus/image-studio/uploads/{index.jsonl, blobs/}
 * @module image-studio/uploads/store
 */
-/** 存储层根路径（惰性解析：DSH_HOME 可能在模块加载后才被测试环境设置）。 */
+/**
+* 存储层根路径（惰性解析：DSH_HOME 可能在模块加载后才被测试环境设置）。
+* 上传是带 TTL 的暂存派生物（`uploadTtlHours` 回收），故落缓存目录。
+*/
 function uploadsRoot() {
-	return pluginDataPath("image-studio", "uploads");
+	return pluginCachePath("image-studio", "uploads");
 }
 function indexFile() {
 	return join(uploadsRoot(), "index.jsonl");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dsh-plus/image-studio",
-  "version": "0.1.35",
+  "version": "0.1.36",
   "description": "dsh-plus service+ui plugin: 图像工作室——OpenAI Images 协议文生图/图生图，全参数开关化，双预设体系，并发生图任务与可二次编辑画廊",
   "type": "module",
   "main": "lib/index.js",
@@ -20,7 +20,7 @@
   ],
   "dependencies": {
     "https-proxy-agent": "^9.1.0",
-    "@dsh-plus/shared": "0.1.43"
+    "@dsh-plus/shared": "0.1.44"
   },
   "peerDependencies": {
     "@deepseek-ai/cordis": "^4.0.5",

package/src/client/card.tsx

@@ -10,13 +10,16 @@
  */
 import {
   type CardAction,
-  CardChrome,
   CardLoading,
   type CardStatusState,
+  ConfigShell,
+  FieldGrid,
   IDLE_STATUS,
   type NamespaceSettingsApi,
+  NumberField,
   type PluginConfigViewProps,
   type Scope,
+  Section,
   TextField,
 } from '@dsh-plus/shared/client'
 import { type ReactElement, useEffect, useMemo, useState, useSyncExternalStore } from 'react'
@@ -91,29 +94,24 @@ function AdvancedFields(props: {
 }): ReactElement {
   const { t, draft, disabled, onPatch } = props
   return (
-    <>
-      <h4 className="imsc-groupTitle">{t('card.advanced')}</h4>
-      <div className="imsc-grid2">
-        <TextField
+    <Section prefix="imsc" title={t('card.advanced')} description={t('card.advancedHint')}>
+      <FieldGrid prefix="imsc" columns={2}>
+        <NumberField
           prefix="imsc"
           id="imsc-conc"
           label={t('card.maxConcurrent')}
-          numeric
           value={draft.maxConcurrent}
           disabled={disabled}
           onEdit={(v) => onPatch({ maxConcurrent: v })}
         />
-        <TextField
+        <NumberField
           prefix="imsc"
           id="imsc-timeout"
           label={t('card.requestTimeoutMs')}
-          numeric
           value={draft.requestTimeoutMs}
           disabled={disabled}
           onEdit={(v) => onPatch({ requestTimeoutMs: v })}
         />
-      </div>
-      <div className="imsc-grid2">
         <TextField
           prefix="imsc"
           id="imsc-proxy"
@@ -122,26 +120,24 @@ function AdvancedFields(props: {
           disabled={disabled}
           onEdit={(v) => onPatch({ proxy: v })}
         />
-        <TextField
+        <NumberField
           prefix="imsc"
           id="imsc-gmax"
           label={t('card.galleryMaxItems')}
-          numeric
           value={draft.galleryMaxItems}
           disabled={disabled}
           onEdit={(v) => onPatch({ galleryMaxItems: v })}
         />
-      </div>
-      <TextField
-        prefix="imsc"
-        id="imsc-upload-ttl"
-        label={t('card.uploadTtlHours')}
-        numeric
-        value={draft.uploadTtlHours}
-        disabled={disabled}
-        onEdit={(v) => onPatch({ uploadTtlHours: v })}
-      />
-    </>
+        <NumberField
+          prefix="imsc"
+          id="imsc-upload-ttl"
+          label={t('card.uploadTtlHours')}
+          value={draft.uploadTtlHours}
+          disabled={disabled}
+          onEdit={(v) => onPatch({ uploadTtlHours: v })}
+        />
+      </FieldGrid>
+    </Section>
   )
 }
 
@@ -226,7 +222,7 @@ export function StudioConfigCard(props: CardProps): ReactElement | string | null
   }
 
   return (
-    <CardChrome
+    <ConfigShell
       prefix="imsc"
       title={t('card.title')}
       description={t('card.description')}
@@ -259,6 +255,6 @@ export function StudioConfigCard(props: CardProps): ReactElement | string | null
       <PromptPresetSection {...sectionProps} />
       <ParamPresetSection {...sectionProps} />
       <AdvancedFields t={t} draft={draft} disabled={disabled} onPatch={patch} />
-    </CardChrome>
+    </ConfigShell>
   )
 }

package/src/client/i18n.ts

@@ -1,13 +1,17 @@
 /**
  * i18n 字典（zh 为键域事实源，en 全量对译）；NS 与 settings 命名空间分离，
  * 仅承载前端文案 key。面板 / 入口 / 配置卡片共用同一命名空间。
+ *
+ * 公共键（卡片套件的 save/unsaved/code* 等）来自 shared 的 common 字典并在此合并，
+ * 本文件只维护业务键。
  * @module image-studio/client/i18n
  */
+import { commonEn, commonZh, mergeDict } from '@dsh-plus/shared/client'
 
 /** locale 命名空间。 */
 export const NS = 'dsh-plus-image-studio'
 
-export const zh = {
+const ownZh = {
   // 入口与面板骨架
   'entry.label': '图像',
   'panel.title': '图像工作室',
@@ -98,9 +102,16 @@ export const zh = {
   'card.description': '文生图/图生图：提供商与 API Key、参数/提示词预设',
   'card.summary': '文生图/图生图：提供商与 API Key、参数/提示词预设。',
   'card.providers': '提供商预设',
+  'card.providersHint':
+    '按序尝试的提供商预设：条目内 API Key 走官方 credentials（引用名由预设 ID 派生），保存后不回显。',
   'card.prompts': '提示词预设',
+  'card.promptsHint': '提示词模板列表：生成/编辑面板按名称选用，{prompt} 等占位符由面板注入。',
   'card.params': '参数预设',
+  'card.paramsHint':
+    '参数预设列表：适用端点决定出现在「文生图」还是「图生图」，参数表为 JSON（如 {"size": {"enabled": true, "value": "1024x1024"}}）。',
   'card.advanced': '高级设置',
+  'card.advancedHint':
+    '并发、超时、代理与本地画廊保留策略；留空/0 表示沿用内置默认（并发 2、超时 60000ms、画廊 200 张、上传保留 168 小时）。',
   'card.add': '添加',
   'card.field.id': 'ID',
   'card.field.name': '名称',
@@ -134,12 +145,10 @@ export const zh = {
   'card.badgeOff': '未配置',
 }
 
-export type DictKey = keyof typeof zh
-
 /** 面板/卡片共用的翻译函数类型（slot 注入的 bind 结果按此消费）。 */
 export type Translate = (key: DictKey) => string
 
-export const en: Record<DictKey, string> = {
+const ownEn: Record<keyof typeof ownZh, string> = {
   'entry.label': 'Image',
   'panel.title': 'Image Studio',
   'tab.generation': 'Text to Image',
@@ -222,9 +231,17 @@ export const en: Record<DictKey, string> = {
   'card.description': 'Text/Image-to-image: providers & API keys, param/prompt presets',
   'card.summary': 'Text/Image-to-image: providers & API keys, param/prompt presets.',
   'card.providers': 'Provider presets',
+  'card.providersHint':
+    'Providers tried in order; each entry keeps its API key in official credentials (reference derived from the preset id) and never echoes it back.',
   'card.prompts': 'Prompt presets',
+  'card.promptsHint':
+    'Prompt templates; the generation/edit panels pick them by name and fill placeholders such as {prompt}.',
   'card.params': 'Parameter presets',
+  'card.paramsHint':
+    'Parameter presets; the endpoint decides whether it shows up in Text to Image or Image to Image, and the spec is JSON such as {"size": {"enabled": true, "value": "1024x1024"}}.',
   'card.advanced': 'Advanced',
+  'card.advancedHint':
+    'Concurrency, timeout, proxy and local gallery retention; empty/0 keeps the built-in defaults (concurrency 2, timeout 60000ms, gallery 200, uploads 168h).',
   'card.add': 'Add',
   'card.field.id': 'ID',
   'card.field.name': 'Name',
@@ -258,3 +275,9 @@ export const en: Record<DictKey, string> = {
   'card.badgeOn': '{n} providers',
   'card.badgeOff': 'Not configured',
 }
+
+/** 卡片公共文案 + 本插件文案（own 覆盖同键）：配置卡片经共享套件渲染，公共键只维护一份。 */
+export const zh = mergeDict(commonZh, ownZh)
+export const en: Record<keyof typeof zh, string> = mergeDict(commonEn, ownEn)
+
+export type DictKey = keyof typeof zh

package/src/client/preset-sections.tsx

@@ -1,9 +1,20 @@
 /**
  * 配置卡片的三组预设编辑区：提供商（含逐条 API Key 管理）、提示词、参数。
  * 从 card.tsx 拆出，避免单组件过长；草稿类型与纯转换在 ./draft.ts。
+ *
+ * 排版与控件一律走 @dsh-plus/shared/client 套件（Section / ListEditor / 字段控件），
+ * 与其它插件卡片保持一致：条目头提供折叠/上移/下移/删除，新增固定在列表底部。
  * @module image-studio/client/preset-sections
  */
-import { TextField } from '@dsh-plus/shared/client'
+import {
+  Button,
+  CodeField,
+  ListEditor,
+  type ListLabels,
+  Section,
+  SelectField,
+  TextField,
+} from '@dsh-plus/shared/client'
 import { type ReactElement, useEffect, useState } from 'react'
 
 import { isValidPresetId } from '../credentials.ts'
@@ -68,22 +79,18 @@ function CredentialRow(props: { t: Translate; presetId: string; disabled: boolea
           {t(configured ? 'card.credential.configured' : 'card.credential.unconfigured')}
         </span>
       ) : null}
-      <button
-        type="button"
-        className="imsc-btn imsc-btnGhost"
+      <Button
+        prefix="imsc"
+        label={t('card.credential.set')}
         disabled={disabled || busy || value === '' || !isValidPresetId(presetId)}
         onClick={() => act(() => setCredential(presetId, value))}
-      >
-        {t('card.credential.set')}
-      </button>
-      <button
-        type="button"
-        className="imsc-btn imsc-btnGhost"
+      />
+      <Button
+        prefix="imsc"
+        label={t('card.credential.unset')}
         disabled={disabled || busy || configured !== true || !isValidPresetId(presetId)}
         onClick={() => act(() => unsetCredential(presetId))}
-      >
-        {t('card.credential.unset')}
-      </button>
+      />
     </div>
   )
 }
@@ -100,26 +107,34 @@ export interface PresetSectionsProps {
   onPatchPrompt(index: number, patch: Partial<PromptDraft>): void
 }
 
+/** 列表编辑器文案（公共字典键，各插件一致）。 */
+function listLabels(t: Translate): ListLabels {
+  return {
+    add: t('listAdd'),
+    remove: t('listRemove'),
+    up: t('listMoveUp'),
+    down: t('listMoveDown'),
+    duplicate: t('listDuplicate'),
+    collapse: t('collapse'),
+    expand: t('expand'),
+    empty: t('listEmpty'),
+  }
+}
+
 export function ProviderPresetSection(props: PresetSectionsProps): ReactElement {
   const { t, draft, disabled, protocols, onPatch, onPatchProvider } = props
   return (
-    <>
-      <h4 className="imsc-groupTitle">{t('card.providers')}</h4>
-      {draft.providers.map((provider, index) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: 草稿行无稳定 id（id 字段本身可编辑），行序即身份
-        <div className="imsc-presetBox" key={`provider-${index}`}>
-          <div className="imsc-presetHead">
-            <span className="imsc-presetName">{provider.name || provider.id || '—'}</span>
-            <button
-              type="button"
-              className="imsc-btn imsc-btnGhost"
-              disabled={disabled}
-              onClick={() => onPatch({ providers: draft.providers.filter((_, i) => i !== index) })}
-            >
-              {t('common.delete')}
-            </button>
-          </div>
-          <div className="imsc-grid2">
+    <Section prefix="imsc" title={t('card.providers')} description={t('card.providersHint')}>
+      <ListEditor
+        prefix="imsc"
+        items={draft.providers}
+        labels={listLabels(t)}
+        disabled={disabled}
+        titleOf={(provider) => provider.name || provider.id || '—'}
+        create={() => emptyProviderDraft(protocols[0]?.id ?? 'openai-images')}
+        onChange={(providers) => onPatch({ providers })}
+        renderItem={(provider, index) => (
+          <>
             <TextField
               prefix="imsc"
               id={`imsc-pid-${index}`}
@@ -139,31 +154,19 @@ export function ProviderPresetSection(props: PresetSectionsProps): ReactElement
               disabled={disabled}
               onEdit={(v) => onPatchProvider(index, { name: v })}
             />
-          </div>
-          <div className="imsc-grid2">
-            <div className="imsc-field">
-              <div className="imsc-head">
-                <label className="imsc-label" htmlFor={`imsc-pproto-${index}`}>
-                  {t('card.field.protocol')}
-                </label>
-              </div>
-              <select
-                id={`imsc-pproto-${index}`}
-                className="imsc-select"
-                value={provider.protocol}
-                disabled={disabled}
-                onChange={(event) => onPatchProvider(index, { protocol: event.target.value })}
-              >
-                {(protocols.length > 0
-                  ? protocols
-                  : [{ id: provider.protocol, label: provider.protocol }]
-                ).map((protocol) => (
-                  <option key={protocol.id} value={protocol.id}>
-                    {protocol.label}
-                  </option>
-                ))}
-              </select>
-            </div>
+            <SelectField
+              prefix="imsc"
+              id={`imsc-pproto-${index}`}
+              label={t('card.field.protocol')}
+              value={provider.protocol}
+              options={
+                protocols.length > 0
+                  ? protocols.map((protocol) => ({ value: protocol.id, label: protocol.label }))
+                  : [{ value: provider.protocol, label: provider.protocol }]
+              }
+              disabled={disabled}
+              onEdit={(v) => onPatchProvider(index, { protocol: v })}
+            />
             <TextField
               prefix="imsc"
               id={`imsc-pmodel-${index}`}
@@ -172,150 +175,113 @@ export function ProviderPresetSection(props: PresetSectionsProps): ReactElement
               disabled={disabled}
               onEdit={(v) => onPatchProvider(index, { model: v })}
             />
-          </div>
-          <TextField
-            prefix="imsc"
-            id={`imsc-purl-${index}`}
-            label={t('card.field.baseUrl')}
-            value={provider.baseUrl}
-            disabled={disabled}
-            onEdit={(v) => onPatchProvider(index, { baseUrl: v })}
-          />
-          <div className="imsc-field">
-            <div className="imsc-head">
-              <label className="imsc-label" htmlFor={`imsc-pheaders-${index}`}>
-                {t('card.field.extraHeaders')}
-              </label>
-            </div>
-            <textarea
+            <TextField
+              prefix="imsc"
+              id={`imsc-purl-${index}`}
+              label={t('card.field.baseUrl')}
+              value={provider.baseUrl}
+              disabled={disabled}
+              onEdit={(v) => onPatchProvider(index, { baseUrl: v })}
+            />
+            <CodeField
+              prefix="imsc"
               id={`imsc-pheaders-${index}`}
-              className="imsc-textarea"
+              label={t('card.field.extraHeaders')}
               value={provider.extraHeadersText}
               disabled={disabled}
-              onChange={(event) => onPatchProvider(index, { extraHeadersText: event.target.value })}
+              onEdit={(v) => onPatchProvider(index, { extraHeadersText: v })}
             />
-          </div>
-          <CredentialRow t={t} presetId={provider.id} disabled={disabled} />
-        </div>
-      ))}
-      <button
-        type="button"
-        className="imsc-btn imsc-btnGhost"
-        disabled={disabled}
-        onClick={() =>
-          onPatch({
-            providers: [
-              ...draft.providers,
-              emptyProviderDraft(protocols[0]?.id ?? 'openai-images'),
-            ],
-          })
-        }
-      >
-        {t('card.add')} · {t('card.providers')}
-      </button>
-    </>
+            <CredentialRow t={t} presetId={provider.id} disabled={disabled} />
+          </>
+        )}
+      />
+    </Section>
   )
 }
 
 export function PromptPresetSection(props: PresetSectionsProps): ReactElement {
   const { t, draft, disabled, onPatch, onPatchPrompt } = props
   return (
-    <>
-      <h4 className="imsc-groupTitle">{t('card.prompts')}</h4>
-      {draft.prompts.map((prompt, index) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: 草稿行无稳定 id，行序即身份
-        <div className="imsc-presetBox" key={`prompt-${index}`}>
-          <div className="imsc-presetHead">
-            <input
-              className="imsc-input"
-              aria-label={t('card.field.name')}
+    <Section prefix="imsc" title={t('card.prompts')} description={t('card.promptsHint')}>
+      <ListEditor
+        prefix="imsc"
+        items={draft.prompts}
+        labels={listLabels(t)}
+        disabled={disabled}
+        titleOf={(prompt) => prompt.name || '—'}
+        create={() => emptyPromptDraft()}
+        onChange={(prompts) => onPatch({ prompts })}
+        renderItem={(prompt, index) => (
+          <>
+            <TextField
+              prefix="imsc"
+              id={`imsc-prname-${index}`}
+              label={t('card.field.name')}
               value={prompt.name}
               disabled={disabled}
-              onChange={(event) => onPatchPrompt(index, { name: event.target.value })}
+              onEdit={(v) => onPatchPrompt(index, { name: v })}
             />
-            <button
-              type="button"
-              className="imsc-btn imsc-btnGhost"
+            <CodeField
+              prefix="imsc"
+              id={`imsc-prtext-${index}`}
+              label={t('card.field.text')}
+              value={prompt.text}
               disabled={disabled}
-              onClick={() => onPatch({ prompts: draft.prompts.filter((_, i) => i !== index) })}
-            >
-              {t('common.delete')}
-            </button>
-          </div>
-          <textarea
-            className="imsc-textarea"
-            aria-label={t('card.field.text')}
-            value={prompt.text}
-            disabled={disabled}
-            onChange={(event) => onPatchPrompt(index, { text: event.target.value })}
-          />
-        </div>
-      ))}
-      <button
-        type="button"
-        className="imsc-btn imsc-btnGhost"
-        disabled={disabled}
-        onClick={() => onPatch({ prompts: [...draft.prompts, emptyPromptDraft()] })}
-      >
-        {t('card.add')} · {t('card.prompts')}
-      </button>
-    </>
+              onEdit={(v) => onPatchPrompt(index, { text: v })}
+            />
+          </>
+        )}
+      />
+    </Section>
   )
 }
 
 export function ParamPresetSection(props: PresetSectionsProps): ReactElement {
   const { t, draft, disabled, onPatch, onPatchParam } = props
+  const endpoints = [
+    { value: 'generation', label: t('tab.generation') },
+    { value: 'edit', label: t('tab.edit') },
+  ]
   return (
-    <>
-      <h4 className="imsc-groupTitle">{t('card.params')}</h4>
-      {draft.params.map((param, index) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: 草稿行无稳定 id，行序即身份
-        <div className="imsc-presetBox" key={`param-${index}`}>
-          <div className="imsc-presetHead">
-            <input
-              className="imsc-input"
-              aria-label={t('card.field.name')}
+    <Section prefix="imsc" title={t('card.params')} description={t('card.paramsHint')}>
+      <ListEditor
+        prefix="imsc"
+        items={draft.params}
+        labels={listLabels(t)}
+        disabled={disabled}
+        titleOf={(param) => param.name || '—'}
+        create={() => emptyParamDraft()}
+        onChange={(params) => onPatch({ params })}
+        renderItem={(param, index) => (
+          <>
+            <TextField
+              prefix="imsc"
+              id={`imsc-paname-${index}`}
+              label={t('card.field.name')}
               value={param.name}
               disabled={disabled}
-              onChange={(event) => onPatchParam(index, { name: event.target.value })}
+              onEdit={(v) => onPatchParam(index, { name: v })}
             />
-            <select
-              className="imsc-select"
-              aria-label={t('card.field.endpoint')}
+            <SelectField
+              prefix="imsc"
+              id={`imsc-paendpoint-${index}`}
+              label={t('card.field.endpoint')}
               value={param.endpoint}
+              options={endpoints}
               disabled={disabled}
-              onChange={(event) => onPatchParam(index, { endpoint: event.target.value })}
-            >
-              <option value="generation">{t('tab.generation')}</option>
-              <option value="edit">{t('tab.edit')}</option>
-            </select>
-            <button
-              type="button"
-              className="imsc-btn imsc-btnGhost"
+              onEdit={(v) => onPatchParam(index, { endpoint: v })}
+            />
+            <CodeField
+              prefix="imsc"
+              id={`imsc-paspecs-${index}`}
+              label={t('card.field.paramSpecs')}
+              value={param.specsText}
               disabled={disabled}
-              onClick={() => onPatch({ params: draft.params.filter((_, i) => i !== index) })}
-            >
-              {t('common.delete')}
-            </button>
-          </div>
-          <textarea
-            className="imsc-textarea"
-            aria-label={t('card.field.paramSpecs')}
-            placeholder='{ "size": { "enabled": true, "value": "1024x1024" } }'
-            value={param.specsText}
-            disabled={disabled}
-            onChange={(event) => onPatchParam(index, { specsText: event.target.value })}
-          />
-        </div>
-      ))}
-      <button
-        type="button"
-        className="imsc-btn imsc-btnGhost"
-        disabled={disabled}
-        onClick={() => onPatch({ params: [...draft.params, emptyParamDraft()] })}
-      >
-        {t('card.add')} · {t('card.params')}
-      </button>
-    </>
+              onEdit={(v) => onPatchParam(index, { specsText: v })}
+            />
+          </>
+        )}
+      />
+    </Section>
   )
 }