@arshdelight/practi 0.11.0 → 0.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arshdelight/practi",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "description": "Local registry CLI for POP (Protocol of Practice): manage a personal, content-addressed collection of practice documents on top of @arshdelight/pop-sdk. Syncs to PractiHub.",
   "type": "module",
   "bin": {

package/web-default/detail.js

@@ -83,8 +83,9 @@ function render() {
   var node = walk(path);
   // 三视图：向导正文 / StandardView JSON / document JSON——侧栏大纲始终是导航脊柱，
   // 底部 Prev/Next 也常驻（在 JSON 视图里换节点=高亮跟着走）
-  app.innerHTML = topbarHtml() + (view === 'wizard' ? nodeHtml(node) : jsonSectionHtml()) + navHtml();
+  app.innerHTML = topbarHtml(node) + (view === 'wizard' ? nodeHtml(node) : jsonSectionHtml()) + navHtml();
   enhanceCodeBlocks(app);
+  enhanceMedia(app);
   updateTabs();
   markSide();
   renderNoteSide(); // 右栏跟人走：每次导航换节点都重渲染（草稿保真在 renderNoteSide 内部处理）
@@ -297,7 +298,7 @@ function nodeHtml(node) {
 
   if (node.type === 'action') html += inputsHtml(node);
   html += proseHtml(node);
-  if (node.type === 'action') html += outputsHtml(node) + attHtml(node);
+  if (node.type === 'action') html += outputsHtml(node);
   html += childrenHtml(node) + choiceHtml(node) + setHtml(node);
   // 笔记只住右侧栏（不进内容区）：revisions 已挪到左侧大纲底部（全文档汇总）；refines 同处
   return html;
@@ -533,6 +534,132 @@ function enhanceCodeBlocks(root) {
   }
 }
 
+// ── 内联媒体增强 + 灯箱：marked 输出的独占 <p><img></p> 与 proseLite 的 figure
+// 统一成 figure.media，限高不撑爆内容列；图注（alt）走 data-tip 悬停气泡，
+// 不再常驻图片下方。点击开灯箱看原图，滚轮在图片列表内循环切换。向导视图
+// 一次只渲染一个节点，列表收集自当前内容区——天然只含本节点的图，滚不出其它节点 ──
+function enhanceMedia(root) {
+  var figs = [];
+  var imgs = root.querySelectorAll('.prose img');
+  for (var i = 0; i < imgs.length; i++) {
+    var img = imgs[i];
+    var fig = img.closest('figure');
+    if (!fig) {
+      // marked 路径：img 独占一个 <p> 才升格 figure（行内混排的小图不动）
+      var p = img.parentElement;
+      if (!p || p.tagName !== 'P' || p.childNodes.length !== 1) continue;
+      fig = document.createElement('figure');
+      p.replaceWith(fig);
+      fig.appendChild(img);
+    } else {
+      // proseLite 路径自带 figcaption：文字转进 data-tip，元素撤下
+      var capEl = fig.querySelector('figcaption');
+      if (capEl) capEl.remove();
+    }
+    fig.classList.add('media');
+    var alt = img.getAttribute('alt') || '';
+    if (alt) fig.setAttribute('data-cap', alt); // 图注走跟随光标的浮层气泡（#media-tip）
+    figs.push(fig);
+  }
+  for (var j = 0; j < figs.length; j++) {
+    (function (fig, idx) {
+      var im = fig.querySelector('img');
+      // 悬停判定只挂 img：figure 占满整列，挂 figure 会让空白处也出气泡
+      im.addEventListener('mouseenter', function (e) { showMediaTip(fig.getAttribute('data-cap'), e); });
+      im.addEventListener('mousemove', function (e) { moveMediaTip(e); });
+      im.addEventListener('mouseleave', hideMediaTip);
+      im.addEventListener('click', function () {
+        openLightbox(figs.map(function (f) { return f.querySelector('img'); }), idx);
+      });
+    })(figs[j], j);
+  }
+}
+
+// 跟随光标的图注气泡：单例浮层 #media-tip，进出图片显示/隐藏、move 跟手
+// （[data-tip]::after 是静态定位，跟不了光标；皮肤同款白底深蓝字）
+function showMediaTip(text, e) {
+  if (!text) return;
+  var tip = ensureMediaTip();
+  tip.textContent = text;
+  tip.classList.add('show');
+  moveMediaTip(e);
+}
+function moveMediaTip(e) {
+  var tip = document.getElementById('media-tip');
+  if (!tip || !tip.classList.contains('show')) return;
+  // 避让光标：偏移 16/32，且靠近视口边时翻到另一侧（上→下、右→左），
+  // 光标怎么移都不会压进气泡（气泡本身 pointer-events:none，只是视觉避让）
+  var w = tip.offsetWidth, h = tip.offsetHeight;
+  var x = e.clientX + 16;
+  var y = e.clientY - h - 16;
+  if (x + w > window.innerWidth - 8) x = e.clientX - w - 16;
+  if (y < 8) y = e.clientY + 20;
+  tip.style.left = x + 'px';
+  tip.style.top = y + 'px';
+}
+function hideMediaTip() {
+  var tip = document.getElementById('media-tip');
+  if (tip) tip.classList.remove('show');
+}
+function ensureMediaTip() {
+  var tip = document.getElementById('media-tip');
+  if (!tip) {
+    tip = document.createElement('div');
+    tip.id = 'media-tip';
+    document.body.appendChild(tip);
+  }
+  return tip;
+}
+
+var lbKeydown = null;
+
+function openLightbox(list, idx) {
+  closeLightbox();
+  var cur = idx;
+  var overlay = document.createElement('div');
+  overlay.id = 'lightbox';
+  var stage = document.createElement('img');
+  var cap = document.createElement('div');
+  cap.className = 'lb-cap';
+  var count = document.createElement('div');
+  count.className = 'lb-count';
+  var close = document.createElement('button');
+  close.type = 'button';
+  close.className = 'lb-close';
+  close.setAttribute('aria-label', 'close');
+  close.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>';
+  function draw() {
+    var img = list[cur];
+    stage.src = img.getAttribute('src');
+    stage.alt = img.getAttribute('alt') || '';
+    cap.textContent = img.getAttribute('alt') || '';
+    count.textContent = (cur + 1) + ' / ' + list.length;
+  }
+  overlay.appendChild(close);
+  overlay.appendChild(stage);
+  overlay.appendChild(cap);
+  overlay.appendChild(count);
+  // 滚轮循环切换（down=下一张、up=上一张，头尾环绕）
+  overlay.addEventListener('wheel', function (e) {
+    e.preventDefault();
+    cur = (cur + (e.deltaY > 0 ? 1 : list.length - 1)) % list.length;
+    draw();
+  }, { passive: false });
+  overlay.addEventListener('click', function (e) {
+    if (e.target === overlay || e.target === close) closeLightbox();
+  });
+  lbKeydown = function (e) { if (e.key === 'Escape') closeLightbox(); };
+  document.addEventListener('keydown', lbKeydown);
+  document.body.appendChild(overlay);
+  draw();
+}
+
+function closeLightbox() {
+  var el = document.getElementById('lightbox');
+  if (el) el.remove();
+  if (lbKeydown) { document.removeEventListener('keydown', lbKeydown); lbKeydown = null; }
+}
+
 function flashCopied(btn) {
   if (btn.getAttribute('data-flashing') || btn.textContent.trim() !== '') return;
   btn.setAttribute('data-flashing', '1');
@@ -571,15 +698,70 @@ function showToast(text) {
 // 本地文档没有状态/上传者/认领/浏览这些 hub 数据，弹窗只列节点数与根哈希 ──
 var FP_SVG = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"/><path d="M14 13.12c0 2.38 0 6.38-1 8.88"/><path d="M17.29 21.02c.12-.6.43-2.3.5-3.02"/><path d="M2 12a10 10 0 0 1 18-6"/><path d="M2 16h.01"/><path d="M21.8 16c.2-2 .131-5.354 0-6"/><path d="M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2"/><path d="M8.65 22c.21-.66.45-1.32.57-2"/><path d="M9 6.8a6 6 0 0 1 9 5.2v2"/></svg>';
 var INFO_SVG = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>';
+var CLIP_SVG = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>';
 var BACK_SVG = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>';
 
-function topbarHtml() {
+/** 节点附件平铺（附件跟随节点：practice 无附件表，action 列自己的） */
+function sizeLabel(bytes) {
+  if (bytes === undefined || bytes === null) return '';
+  if (bytes < 1024) return bytes + ' B';
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+  return (bytes / 1024 / 1024).toFixed(1) + ' MB';
+}
+
+function collectAttachments(node) {
+  var out = [];
+  var atts = node && node.type === 'action' && node.attachments ? node.attachments : [];
+  for (var i = 0; i < atts.length; i++) {
+    var a = atts[i];
+    out.push({
+      name: a.name,
+      href: a.url || ('/blobs/' + a.hash),
+      meta: [a.mime, sizeLabel(a.size), a.hash ? shortHash(a.hash) : ''].filter(Boolean).join(' · ')
+    });
+  }
+  return out;
+}
+
+function topbarHtml(node) {
+  var atts = collectAttachments(node);
+  var attachBtn = atts.length
+    ? '<button type="button" class="topbar-btn" data-top="attach" aria-label="' + POP_I18N.t('docAttach') + '" data-tip="' + escapeHtml(POP_I18N.t('docAttach')) + '">' + CLIP_SVG + '<span>(' + atts.length + ')</span></button>'
+    : '';
   return '<div class="detail-topbar">' +
     '<button type="button" class="topbar-btn" data-top="back">' + BACK_SVG + '<span>' + POP_I18N.t('back') + '</span></button>' +
-    '<button type="button" class="topbar-btn topbar-icon" data-top="info" aria-label="' + POP_I18N.t('metaInfo') + '" title="' + POP_I18N.t('metaInfo') + '">' + INFO_SVG + '</button>' +
+    '<div class="topbar-right">' + attachBtn +
+    '<button type="button" class="topbar-btn topbar-icon" data-top="info" aria-label="' + POP_I18N.t('metaInfo') + '" data-tip="' + escapeHtml(POP_I18N.t('metaInfo')) + '">' + INFO_SVG + '</button></div>' +
     '</div>';
 }
 
+/** 附件弹窗：固定尺寸，列表超出内滚（多附件不撑屏） */
+function openAttDialog(node) {
+  closeAttDialog();
+  var atts = collectAttachments(node);
+  var rows = atts.map(function (a) {
+    return '<div class="att-row"><a href="' + escapeHtml(a.href) + '" target="_blank" rel="noopener">' + escapeHtml(a.name) + '</a>' +
+      '<span class="att-meta">' + escapeHtml(a.meta) + '</span></div>';
+  }).join('');
+  var overlay = document.createElement('div');
+  overlay.id = 'att-overlay';
+  overlay.innerHTML =
+    '<div class="info-card att-card" role="dialog" aria-label="' + POP_I18N.t('docAttach') + '">' +
+    '<div class="info-head"><div class="info-title">' + POP_I18N.t('docAttach') + '</div>' +
+    '<button type="button" class="info-close" aria-label="close">' + INFO_SVG + '</button></div>' +
+    '<div class="att-scroll">' + rows + '</div>' +
+    '</div>';
+  overlay.addEventListener('click', function (e) {
+    if (e.target === overlay) closeAttDialog();
+  });
+  document.body.appendChild(overlay);
+}
+
+function closeAttDialog() {
+  var el = document.getElementById('att-overlay');
+  if (el) el.remove();
+}
+
 function openInfoDialog() {
   closeInfoDialog();
   var overlay = document.createElement('div');
@@ -705,16 +887,7 @@ function outputsHtml(node) {
   return '<div class="section-sm"><div class="label">' + POP_I18N.t('secOutputs') + '</div><ol class="io-list">' + outs.map(ioItem).join('') + '</ol></div>';
 }
 
-function attHtml(node) {
-  var atts = node.attachments || [];
-  if (!atts.length) return '';
-  return '<div class="section-sm"><div class="label">' + POP_I18N.t('secAttachments') + '</div><ul class="att-list">' + atts.map(function (a) {
-    var href = a.url || ('/blobs/' + a.hash);
-    var meta = [a.mime, a.hash ? shortHash(a.hash) : ''].filter(Boolean).join(' · ');
-    return '<li><a href="' + escapeHtml(href) + '">' + escapeHtml(a.name) + '</a>' +
-      (meta ? ' <span class="att-meta">' + escapeHtml(meta) + '</span>' : '') + '</li>';
-  }).join('') + '</ul></div>';
-}
+// 正文的附件小节已撤（信息进顶栏附件按钮弹窗，附件跟随节点）
 
 // ── practice 的孩子呈现（按 op 分形态） ──
 
@@ -786,6 +959,8 @@ document.addEventListener('click', function (e) {
       else location.href = '/';
     } else if (top.getAttribute('data-top') === 'info') {
       openInfoDialog();
+    } else if (top.getAttribute('data-top') === 'attach') {
+      openAttDialog(walk(path));
     }
     return;
   }
@@ -793,6 +968,10 @@ document.addEventListener('click', function (e) {
     closeInfoDialog();
     return;
   }
+  if (e.target.closest('#att-overlay .info-close')) {
+    closeAttDialog();
+    return;
+  }
   var copyBtn = e.target.closest('[data-code-copy]');
   if (copyBtn) {
     var text = decodeURIComponent(copyBtn.getAttribute('data-code-copy'));

package/web-default/lang.js

@@ -10,7 +10,7 @@ var POP_I18N = (function () {
   // 字典值：字符串，或函数（复数/拼接类文案按参数生成）
   var M = {
     zh: {
-      settings: '设置', language: '语言', done: '完成', copied: '已复制', back: '返回', metaInfo: '文档信息',
+      settings: '设置', language: '语言', done: '完成', copied: '已复制', back: '返回', metaInfo: '文档信息', docAttach: '附件',
       tabWizard: '步骤', tabSv: '标准视图', tabDoc: '文档树',
       labelDocJson: '文档 JSON', labelSvJson: '标准视图 JSON',
       // 目录页
@@ -51,7 +51,7 @@ var POP_I18N = (function () {
       backMine: '← 我的实践'
     },
     en: {
-      settings: 'Settings', language: 'Language', done: 'Done', copied: 'Copied', back: 'Back', metaInfo: 'Document info',
+      settings: 'Settings', language: 'Language', done: 'Done', copied: 'Copied', back: 'Back', metaInfo: 'Document info', docAttach: 'Attachments',
       tabWizard: 'Todo', tabSv: 'StandardView', tabDoc: 'Document',
       labelDocJson: 'Document JSON', labelSvJson: 'StandardView JSON',
       pageTitle: 'My practices',

package/web-default/style.css

@@ -106,6 +106,20 @@ a:hover { text-decoration: underline; }
 .codeblock .hljs-deletion { color: #ffdcd7; background-color: #67060c; }
 .prose figure { margin: 14px 0; }
 .prose img { max-width: 100%; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
+/* 图文流内联媒体限高（大图不撑爆内容列），点开灯箱看原图；灯箱只含当前节点；
+   禁选——点击图片不落文本光标（图片两侧的 I-beam 根因） */
+.prose figure.media { text-align: left; user-select: none; }
+.prose figure.media img { max-height: 180px; width: auto; object-fit: contain; cursor: pointer; }
+.prose figure.media figcaption { text-align: left; }
+/* 图注气泡跟随光标（JS 单例浮层）：皮肤同 [data-tip] */
+#media-tip { position: fixed; background: #fff; color: var(--brand); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 12px; line-height: 1.4; padding: 2px 8px; border: 1px solid rgba(226, 232, 240, .9); border-radius: 6px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s ease; z-index: 70; }
+#media-tip.show { opacity: 1; }
+#lightbox { position: fixed; inset: 0; background: rgba(13, 17, 23, .92); z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; user-select: none; cursor: default; }
+#lightbox img { max-width: 92vw; max-height: 84vh; border-radius: 8px; }
+#lightbox .lb-cap { color: #e6edf3; font-size: 14px; margin-top: 12px; text-align: center; max-width: 80vw; }
+#lightbox .lb-count { color: rgba(230, 237, 243, .55); font-size: 12px; margin-top: 4px; font-variant-numeric: tabular-nums; }
+#lightbox .lb-close { position: absolute; top: 16px; right: 16px; border: none; background: none; color: rgba(230, 237, 243, .75); cursor: pointer; padding: 4px; display: flex; }
+#lightbox .lb-close:hover { color: #fff; }
 .prose figcaption { font-size: 12px; color: var(--brand-40); text-align: center; margin-top: 4px; }
 /* markdown 全语法排版（对齐 hub MarkdownView 的 prose 观感）：标题品牌色、链接 primary
    无下划线 hover 下划线、行内 code 浅底胶囊、块内 code 交还 pre 默认、blockquote 弱化竖线、
@@ -153,7 +167,6 @@ ol.io-list li { padding: 2px 0; }
 .label-row .label { margin-bottom: 0; }
 .label-row .json-copy { color: var(--brand-40); }
 .label-row .json-copy:hover { color: var(--brand); background: rgba(0, 51, 102, .06); }
-.att-list li { padding: 4px 0; }
 .child-card { display: block; border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; font-size: 14px; color: var(--brand-60); background: #fff; }
 button.child-card { width: 100%; text-align: left; cursor: pointer; font: inherit; }
 button.child-card:hover { border-color: var(--brand); color: var(--brand); }
@@ -284,6 +297,16 @@ a.side-note:hover { color: var(--brand); text-decoration: none; background: rgba
 .info-title { font-size: 17px; font-weight: 700; color: var(--brand); }
 .info-close { border: none; background: none; color: var(--brand-40); cursor: pointer; padding: 2px; display: flex; }
 .info-close:hover { color: var(--brand); }
+/* 附件弹窗：与 Info 弹窗同皮肤，固定尺寸（内容少不缩水）、列表内滚 */
+#att-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 50; display: flex; align-items: center; justify-content: center; }
+.att-card { width: 380px; height: 400px; display: flex; flex-direction: column; }
+.att-scroll { flex: 1; min-height: 0; overflow-y: auto; }
+.att-row { padding: 8px 0; border-bottom: 1px solid rgba(226, 232, 240, .7); font-size: 13px; }
+.att-row:last-child { border-bottom: none; }
+.att-row a { color: var(--primary); text-decoration: none; font-weight: 500; }
+.att-row a:hover { text-decoration: underline; }
+.att-row .att-meta { display: block; font-size: 11px; color: var(--brand-40); margin-top: 2px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
+.topbar-right { display: flex; align-items: center; gap: 8px; }
 .info-row { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 13px; color: var(--brand); }
 .info-row .info-key { color: var(--brand-60); }
 /* 哈希整行按钮（hub InfoDialog 同款）：指纹图标+等宽哈希+复制图标，hover 沉到全色 */