skill-forge-hub 1.3.3 → 1.3.5

package/CHANGELOG.en.md

@@ -4,6 +4,15 @@
 
 Version history of the SkillForge npm package `skill-forge-hub` (command name `skill-forge`).
 
+## 1.3.5 (2026-11-13)
+
+**prompt-pouch fullscreen modals + taller fill-panel previews (@13)**
+
+- All three modals (detail / variable fill / add-edit) gain a ⛶ fullscreen button at the far right of the header: one click expands to 96vw × 96vh, click again (⤡) or close the modal to restore; detail content, fill-panel top preview and bottom live result split the remaining height via flex — both areas grow when there are few variables, shrink automatically with scrolling fallback when there are many
+- Fill panel regular-size previews taller: top preview cap 110px → 220px, bottom live result textarea 96px → 150px
+- Add-edit modal in fullscreen: content textarea flexibly fills the remaining space (min 40vh floor, still manually resizable)
+- Template stamp prompt-pouch@12 → @13 (page interaction & layout change); SKILL.md / usage-guide.md synced (also fixed the stale "detail modal capped at 52vh" note to 56vh)
+
 ## 1.3.3 (2026-11-13)
 
 **prompt-pouch "retrieval" task type + tuning/feedback loop (@12)**

package/CHANGELOG.md

@@ -4,6 +4,15 @@
 
 SkillForge（技能锻造坊）npm 包 `skill-forge-hub`（命令名 `skill-forge`）版本变更记录。
 
+## 1.3.5（2026-11-13）
+
+**prompt-pouch 弹窗全屏 + 填充面板预览区加高（@13）**
+
+- 三个弹窗（详情 / 变量填充 / 新增编辑）头部新增 ⛶ 全屏按钮（置于头部最右）：一键铺满 96vw × 96vh，再点 ⤡ 或关闭弹窗自动还原；详情内容区、填充面板顶部预览与底部实时结果按 flex 弹性分配剩余高度，变量少时两区都放大、变量多时自动收缩且滚动兜底
+- 填充面板常规态预览区加高：顶部预览 110px → 220px 上限，底部实时结果 textarea 96px → 150px
+- 编辑弹窗全屏态内容输入框弹性吃满剩余空间（min 40vh 保底，仍可手动拉伸）
+- 版本戳 prompt-pouch@12 → @13（页面交互与布局变化）；SKILL.md / usage-guide.md 同步（顺手修正 usage-guide「详情弹窗限高 52vh」历史笔误为 56vh）
+
 ## 1.3.3（2026-11-13）
 
 **prompt-pouch「取用」任务类型 + 调优/效果反馈闭环（@12）**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "skill-forge-hub",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "description": "SkillForge (技能锻造坊) — a curated collection of AI craft skills. Install once, then pick skills interactively: daily/weekly/monthly/quarterly/annual reports, meeting minutes, article-to-HTML, magic-deck slides, deck-stage PPTX, prompt-pouch manager, Pandoc doc converters, meta-forge.",
   "bin": {
     "skill-forge": "cli.js"

package/prompt-pouch/SKILL.md

@@ -78,7 +78,7 @@ disable-model-invocation: false
 
 ## 产物升级（回炉）
 
-生成/初始化页面时头部写版本戳 `<meta name="sf-template" content="prompt-pouch@12">`（模板升级时递增 @N 并同步 reference.html 与本文档）。用户说「升级旧锦囊/回炉旧页面/旧锦囊换新样式」时：扫 `<DIR>` 下 `prompt-pouch.html` 读版本戳筛出旧版（无版本戳或缺少 `<meta name="pouch-id">` 稳定 ID 的产物视为 v0 最旧版，一并进清单）→ 列清单（文件/旧版本/有无用户数据）→ AskUserQuestion 选全部或部分 → 逐份升级：浅升级（仅 CSS/JS 变化）对旧页替换 `<style>` 块与交互脚本；深升级（DOM 结构变化）从 reference.html 重建，**必须沿用原页 pouch-id meta 值**（IndexedDB 用户数据按 pouch-id 命名空间存取，换 ID = 数据失联，重建后原收藏/分组照旧读回），`<DIR>/<DATA_DIR>/prompts.json` 数据文件一概不动，先备份旧页 `.bak-时间戳` → 报告三段式：✅ 已升级清单 / ⚠️ 手改保留说明 / 🟡 失败项原因。模板改动分级：业务改动（板块/段落/标题体系）、数据格式改动（字段/存储结构）、页面改动（样式/布局/交互）任一发生即模板升级，版本戳 +1 并同步 reference.html 与本文档；纯措辞润色不 bump。每次生成/初始化新锦囊时顺扫 `<DIR>` 读版本戳：发现旧版产物主动告知「技能模板已升级至 vN，检测到 X 份旧版锦囊，说『把我旧锦囊都升级成新样式』即可一键升级」，不让用户背触发语。
+生成/初始化页面时头部写版本戳 `<meta name="sf-template" content="prompt-pouch@13">`（模板升级时递增 @N 并同步 reference.html 与本文档）。用户说「升级旧锦囊/回炉旧页面/旧锦囊换新样式」时：扫 `<DIR>` 下 `prompt-pouch.html` 读版本戳筛出旧版（无版本戳或缺少 `<meta name="pouch-id">` 稳定 ID 的产物视为 v0 最旧版，一并进清单）→ 列清单（文件/旧版本/有无用户数据）→ AskUserQuestion 选全部或部分 → 逐份升级：浅升级（仅 CSS/JS 变化）对旧页替换 `<style>` 块与交互脚本；深升级（DOM 结构变化）从 reference.html 重建，**必须沿用原页 pouch-id meta 值**（IndexedDB 用户数据按 pouch-id 命名空间存取，换 ID = 数据失联，重建后原收藏/分组照旧读回），`<DIR>/<DATA_DIR>/prompts.json` 数据文件一概不动，先备份旧页 `.bak-时间戳` → 报告三段式：✅ 已升级清单 / ⚠️ 手改保留说明 / 🟡 失败项原因。模板改动分级：业务改动（板块/段落/标题体系）、数据格式改动（字段/存储结构）、页面改动（样式/布局/交互）任一发生即模板升级，版本戳 +1 并同步 reference.html 与本文档；纯措辞润色不 bump。每次生成/初始化新锦囊时顺扫 `<DIR>` 读版本戳：发现旧版产物主动告知「技能模板已升级至 vN，检测到 X 份旧版锦囊，说『把我旧锦囊都升级成新样式』即可一键升级」，不让用户背触发语。
 
 ## ⚙️ 配置与自定义主题
 

package/prompt-pouch/resources/reference.html

@@ -3,7 +3,7 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<meta name="sf-template" content="prompt-pouch@12">
+<meta name="sf-template" content="prompt-pouch@13">
 <meta name="pouch-id" content="REF-POUCH-0000">
 <title>锦囊 Prompt Pouch — 提示词管理台</title>
 <style>
@@ -435,6 +435,7 @@ mark.hl{ background:var(--gold-dim); color:var(--gold); border-radius:3px; paddi
   background:linear-gradient(180deg, var(--panel) 0%, var(--panel2) 100%);
   border:1px solid var(--border); border-radius:16px; padding:22px 24px;
   box-shadow:0 20px 60px rgba(0,0,0,.5);
+  transition:width .25s ease, max-width .25s ease, height .25s ease, max-height .25s ease;
 }
 .fp-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
 .fp-title{
@@ -445,7 +446,7 @@ mark.hl{ background:var(--gold-dim); color:var(--gold); border-radius:3px; paddi
 .fp-count{ font-size:12px; color:var(--muted); }
 .fp-count b{ color:var(--gold); }
 .fp-preview{
-  max-height:110px; overflow-y:auto; padding:10px 12px; margin-bottom:12px;
+  max-height:220px; overflow-y:auto; padding:10px 12px; margin-bottom:12px;
   background:rgba(0,0,0,.22); border:1px solid var(--border); border-radius:10px;
   font-size:12px; line-height:1.8; color:var(--muted); white-space:pre-wrap; word-break:break-word;
 }
@@ -470,11 +471,32 @@ mark.hl{ background:var(--gold-dim); color:var(--gold); border-radius:3px; paddi
   font-size:11px; color:var(--muted); margin-bottom:5px; letter-spacing:.5px;
 }
 .fp-live textarea{
-  width:100%; height:96px; resize:none; padding:9px 12px; border-radius:9px;
+  width:100%; height:150px; resize:none; padding:9px 12px; border-radius:9px;
   background:rgba(0,0,0,.25); border:1px solid var(--border); outline:none;
   color:var(--muted); font-family:inherit; font-size:12px; line-height:1.7;
 }
 .fp-ops{ display:flex; justify-content:flex-end; gap:10px; }
+.fp-right{ display:flex; align-items:center; gap:10px; }
+.fp-full{
+  background:transparent; border:1px solid var(--border); border-radius:8px;
+  color:var(--muted); cursor:pointer; font-size:13px; line-height:1; padding:5px 8px;
+  transition:color .18s ease, border-color .18s ease, background .18s ease;
+}
+.fp-full:hover{ color:var(--gold); border-color:var(--gold); background:var(--gold-dim); }
+/* 弹窗全屏态：占满 96% 视口，内容区按 flex 分食剩余空间（滚动兜底保留） */
+.fill-panel.full, #itemMask .fill-panel.full, #fillMask .fill-panel.full{
+  width:96vw; max-width:96vw; height:96vh; max-height:96vh;
+}
+.fill-panel.full .fp-head, .fill-panel.full .fp-ops{ flex:none; }
+.fill-panel.full .detail-content{ flex:1; max-height:none; }
+.fill-panel.full .detail-times, .fill-panel.full .detail-notes, .fill-panel.full .detail-vars{ flex:none; }
+.fill-panel.full .fp-preview{ flex:1; max-height:none; min-height:120px; }
+.fill-panel.full .fp-fields{ flex:1; overflow-y:auto; min-height:0; }
+.fill-panel.full .fp-live{ flex:1; display:flex; flex-direction:column; min-height:120px; }
+.fill-panel.full .fp-live textarea{ flex:1; height:auto; min-height:96px; }
+#itemMask .fill-panel.full .fp-fields{ display:flex; flex-direction:column; gap:10px; min-height:0; }
+#itemMask .fill-panel.full .fp-field:last-child{ flex:1; display:flex; flex-direction:column; min-height:0; }
+#itemMask .fill-panel.full #itemContent{ flex:1; min-height:40vh; resize:vertical; }
 /* ============ 统一确认弹框（替代浏览器原生弹框） ============ */
 .cf-panel{
   width:460px; max-width:92vw; max-height:82vh; display:flex; flex-direction:column;
@@ -740,7 +762,7 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
   <div class="fill-panel">
     <div class="fp-head">
       <div class="fp-title">填写模板变量</div>
-      <span class="fp-count">含 <b id="fpVarCount"></b> 个变量</span>
+      <div class="fp-right"><span class="fp-count">含 <b id="fpVarCount"></b> 个变量</span><button class="fp-full" title="全屏查看">⛶</button></div>
     </div>
     <div class="fp-preview" id="fpPreview"></div>
     <div class="fp-fields" id="fpFields"></div>
@@ -774,7 +796,7 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
   <div class="fill-panel">
     <div class="fp-head">
       <div class="fp-title" id="itemTitle">新增提示词</div>
-      <span class="fp-count">落盘 data/prompts.json · 刷新即见</span>
+      <div class="fp-right"><span class="fp-count">落盘 data/prompts.json · 刷新即见</span><button class="fp-full" title="全屏查看">⛶</button></div>
     </div>
     <div class="fp-fields">
       <div class="fp-field"><label for="itemName">标题</label><input id="itemName" placeholder="如：日报速写" /></div>
@@ -813,7 +835,7 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
   <div class="fill-panel detail-panel">
     <div class="fp-head">
       <div class="fp-title" id="detailTitle">详情</div>
-      <span class="fp-count" id="detailMeta"></span>
+      <div class="fp-right"><span class="fp-count" id="detailMeta"></span><button class="fp-full" title="全屏查看">⛶</button></div>
     </div>
     <div class="detail-times" id="detailTimes" style="display:none"></div>
     <div class="detail-content" id="detailContent"></div>
@@ -1473,7 +1495,7 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
     });
     document.getElementById('fpLive').value = result;
   }
-  function closeFillPanel(){ document.getElementById('fillMask').classList.remove('open'); }
+  function closeFillPanel(){ resetFull(document.getElementById('fillMask').querySelector('.fill-panel')); document.getElementById('fillMask').classList.remove('open'); }
   function handleFillCopy(){
     var result = fillTemplateText;
     document.querySelectorAll('#fpFields input').forEach(function(inp){
@@ -1681,6 +1703,21 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
       }).catch(function(){});
   }
 
+  /* ---------- 弹窗全屏 ---------- */
+  function resetFull(panel){
+    panel.classList.remove('full');
+    var b = panel.querySelector('.fp-full');
+    if (b){ b.textContent = '⛶'; b.title = '全屏查看'; }
+  }
+  function toggleFull(btn){
+    var panel = btn.closest('.fill-panel');
+    var on = panel.classList.toggle('full');
+    btn.textContent = on ? '⤡' : '⛶';
+    btn.title = on ? '退出全屏' : '全屏查看';
+  }
+  document.querySelectorAll('.fp-full').forEach(function(b){
+    b.addEventListener('click', function(e){ e.stopPropagation(); toggleFull(b); });
+  });
   /* ---------- 提示词详情弹窗 ---------- */
   var detailTarget = null;
   var detailMask = document.getElementById('detailMask');
@@ -1721,7 +1758,7 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
     } else { vEl.style.display = 'none'; }
     detailMask.classList.add('open');
   }
-  function closeDetail(){ detailMask.classList.remove('open'); detailTarget = null; }
+  function closeDetail(){ resetFull(detailMask.querySelector('.fill-panel')); detailMask.classList.remove('open'); detailTarget = null; }
   document.getElementById('detailClose').addEventListener('click', closeDetail);
   document.getElementById('detailEdit').addEventListener('click', function(){
     var p = detailTarget;
@@ -1769,7 +1806,7 @@ footer.open .ht-arrow{ transform:rotate(180deg); }
     itemMask.classList.add('open');
     setTimeout(function(){ itemName.focus(); }, 60);
   }
-  function closeItemForm(){ itemMask.classList.remove('open'); }
+  function closeItemForm(){ resetFull(itemMask.querySelector('.fill-panel')); itemMask.classList.remove('open'); }
   function saveItem(){
     var name = itemName.value.trim();
     if (!name){ toast('标题不能为空', true); return; }

package/prompt-pouch/resources/usage-guide.md

@@ -6,7 +6,7 @@
 
 1. **打开页面**：对 AI 说「打开锦囊」即可（自动起服务并打开浏览器）；手动方式：`cd <目录> && python3 -m http.server 8933`（Windows 用 `py -m http.server`），浏览器访问 `http://localhost:8933/prompt-pouch.html`（HTTP 方式自动读 data/prompts.json；file:// 直开时浏览器会拦截文件读取——已授权目录则刷新自动直读 data/prompts.json，权限需重新确认时点徽标「🔓 恢复数据」一键续权（免重新选目录），读不到则回退本地快照/镜像、再回退内置示例，点页面「💾 授权目录」即可载入你的数据，但仍推荐 HTTP 打开）
 2. **添加提示词**：页面点「＋ 新增提示词」填表保存（已授权目录即写即存）；或对 AI 说「把 XX 加到锦囊的写作输出分组」（不说分组也行，AI 会列出现有分组让你选；分组不存在时会问你是否新建）
-3. **查看与修改**：卡片正文超长只显示前三行，点「👁 详情」弹窗看全文（超长限高滚动），弹窗内可直接「⧉ 复制」或「✎ 修改」，并附时间线——创建时间、上次修改时间（修改过才显示）、最近使用时间（用过才显示）；卡片上也能直接点「✎」改完保存；或对 AI 说「修改锦囊里『日报速写』的内容」，改后刷新
+3. **查看与修改**：卡片正文超长只显示前三行，点「👁 详情」弹窗看全文（超长限高滚动，弹窗右上角 ⛶ 可全屏），弹窗内可直接「⧉ 复制」或「✎ 修改」，并附时间线——创建时间、上次修改时间（修改过才显示）、最近使用时间（用过才显示）；卡片上也能直接点「✎」改完保存；或对 AI 说「修改锦囊里『日报速写』的内容」，改后刷新
 4. **删除**：页面点卡片「🗑」；或对 AI 说「删掉锦囊里『XX』这条」
 5. **排序与移组**：顶栏「排序」切换四种方式——最新添加（默认）/ 最近使用 / 使用频率 / 手动顺序；想手动排时拖动卡片或点 ▲▼（自动切回手动），点卡片 ⇄ 可把提示词移到其它分组；已授权目录时排序/移组 2 秒内自动保存，未授权时点「📋 复制变更指令」把指令发给 AI 落盘；复制过提示词后卡片右上角会显示「⧉ N 次 · 最近时间」（最近使用/使用频率排序即按复制统计）；AI 落盘后回页面点「✓ 已落盘」清除未保存标记
 6. **收藏**：卡片右上角星标，收藏/取消收藏指令由 AI 同步到数据文件
@@ -28,10 +28,11 @@
 ## 特色功能
 
 - **搜索高亮**：搜索框输入关键词，命中卡片的标题/正文/标签中匹配词以主题色徽标高亮（五主题自适应）；命中落在正文三行折叠区之外时，卡片顶部提示「正文命中，详见详情」，点开详情弹窗全文同样高亮
-- **{变量} 插值**：内容含花括号占位（如「{功能名}」）的提示词，点复制会自动弹出填充面板，填入变量后实时预览再复制
+- **{变量} 插值**：内容含花括号占位（如「{功能名}」）的提示词，点复制会自动弹出填充面板，填入变量后实时预览再复制（预览区加高展示，面板右上角 ⛶ 可全屏）
 - **自动备份（默认开启）**：数据一有变更 2 秒内自动备份——首次变更会请求授权写入 prompt-pouch.html 所在目录（弹窗选同目录即可，选一次后浏览器记住），写 backup/pouch-backup.json 并滚动保留上一版 .prev.json；未授权或浏览器不支持时自动降级为本地快照（浏览器内保留最近 5 份），页内「↩ 恢复」均可一键回滚；顶栏「📂 换目录」可随时重新配置备份目录；AI 代笔修改（对话中说增删改）落盘前也会在 data/ 目录留 `prompts.json.bak-时间戳`，说「回退/恢复锦囊数据」即可选档回滚
 - **统一确认弹框**：删除提示词/分组、覆盖导入、恢复备份、授权与换备份目录等需要确认的操作，都用页内统一样式的确认弹框（不再弹浏览器原生对话框）；删除/覆盖/恢复等危险操作为红调按钮，Esc 或点遮罩均可取消
-- **详情弹窗**：点卡片「👁 详情」弹出全文查看（超长内容限高 52vh 内滚动），带复制与修改入口，附时间线（创建 / 上次修改 / 最近使用）；含 {变量} 的模板会在弹窗里标出变量清单，复制时自动进入填充面板
+- **详情弹窗**：点卡片「👁 详情」弹出全文查看（超长内容限高 56vh 内滚动），带复制与修改入口，右上角 ⛶ 可全屏，附时间线（创建 / 上次修改 / 最近使用）；含 {变量} 的模板会在弹窗里标出变量清单，复制时自动进入填充面板
+- **⛶ 弹窗全屏**：详情 / 变量填充 / 新增编辑三个弹窗右上角都有 ⛶ 按钮，一键切换全屏（96vw × 96vh）——长内容一览无余，再点 ⤡ 或关闭弹窗自动还原；填充面板全屏时顶部预览与底部实时结果按弹性分配剩余高度，变量少时两区都放大、变量多时自动收缩且滚动兜底
 - **📝 使用心得**：AI 代笔维护的可选 notes 字段——用完说「这条好用」即可记录一行心得，详情弹窗「📝 使用心得」区只读展示（无心得不显示）；页面表单不编辑此字段，由对话维护，旧数据无此字段完全兼容
 - **页面直写（双笔）**：页面增删改直接写入 data/prompts.json（与自动备份共用同一目录授权）；未授权时自动降级——生成操作指令复制到剪贴板，粘贴给 AI 落盘
 - **侧栏局部滚动**：分组较多时，左侧「收藏 + 分组列表」区域独立滚动（窄滚动条，滚动区最大高度 = 屏幕高度减去顶栏、「全部」行与底部说明卡），「＋ 新建分组」在「全部」行右侧不随滚动、「全部」固定不滚；底部「锦囊用法」说明卡完整展示不裁剪，侧栏随页面整体滚动即可读完；窄屏下自动恢复平铺排列