mdboard 2.1.0 → 2.1.2

package/index.html

@@ -202,12 +202,16 @@ th.sorted .sort-arrow{opacity:1;color:var(--accent)}
 /* ── Detail Panel — Notion-style ─────────────────────────── */
 .panel-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99;opacity:0;pointer-events:none;transition:opacity .2s}
 .panel-overlay.open{opacity:1;pointer-events:auto}
-.detail-panel{top: 1rem;right: 1rem;height: calc(100vh - 2rem);border-radius: var(--radius);position:fixed;width:600px;max-width:92vw;background:var(--bg);border-left:1px solid var(--border);z-index:100;transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column;overflow:hidden}
+.detail-panel{top: 1rem;right: 1rem;height: calc(100vh - 2rem);border-radius: var(--radius);position:fixed;width:600px;max-width:92vw;background:var(--bg);border-left:1px solid var(--border);z-index:100;transform:translateX(100%);transition:transform .25s ease,top .25s ease,left .25s ease,right .25s ease,width .25s ease,height .25s ease;display:flex;flex-direction:column;overflow:hidden}
 .detail-panel.open{transform:translateX(0)}
+.detail-panel.expanded{top:1rem;left:50%;right:auto;width:1060px;height:calc(100vh - 2rem);border:1px solid var(--border);box-shadow:0 16px 48px rgba(0,0,0,.4)}
+.detail-panel.expanded.open{transform:translateX(-50%)}
 .panel-header{padding:12px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-shrink:0;background:var(--surface)}
 .panel-type{font-size:10px;padding:3px 8px;border-radius:var(--radius-sm);background:var(--accent-dim);color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
 .panel-item-id{font-family:var(--mono);font-size:13px;color:var(--text2)}
-.panel-close{margin-left:auto;background:none;border:none;color:var(--text2);cursor:pointer;font-size:18px;padding:4px 8px;border-radius:var(--radius-sm);line-height:1}
+.panel-expand{margin-left:auto;background:none;border:none;color:var(--text2);cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);line-height:1;display:flex;align-items:center}
+.panel-expand:hover{background:var(--surface2);color:var(--text)}
+.panel-close{background:none;border:none;color:var(--text2);cursor:pointer;font-size:18px;padding:4px 8px;border-radius:var(--radius-sm);line-height:1}
 .panel-close:hover{background:var(--surface2);color:var(--text)}
 .panel-title-wrap{padding:20px 24px 8px;flex-shrink:0}
 .panel-title-input{width:100%;font-size:28px;font-weight:700;background:transparent;border:none;color:var(--text);font-family:var(--font);outline:none;padding:0;line-height:1.3}
@@ -475,6 +479,7 @@ h4.ce-header{font-size:15px;line-height:1.4}
   .header{padding:12px 16px}
   .content{padding:16px}
   .detail-panel{width:100%;max-width:100%}
+  .detail-panel.expanded{width:96vw;height:90vh}
   .notes-sidebar{width:200px}
   .notes-header-bar{padding:24px 24px 0}
   .notes-editorjs-wrap{padding:12px 16px 24px}
@@ -2610,10 +2615,10 @@ async function deleteCurrentNote(id) {
 /* ══════════════════════════════════════════════════════════════
    PANEL — Dynamic detail panel from config
    ══════════════════════════════════════════════════════════════ */
-var panelState = { open: false, entityType: null, item: null, isCreate: false, editor: null };
+var panelState = { open: false, entityType: null, item: null, isCreate: false, editor: null, expanded: false };
 
 async function openPanel(entityType, item) {
-  panelState = { open: true, entityType: entityType, item: JSON.parse(JSON.stringify(item)), isCreate: false, editor: null };
+  panelState = { open: true, entityType: entityType, item: JSON.parse(JSON.stringify(item)), isCreate: false, editor: null, expanded: false };
   document.getElementById('detail-panel').classList.add('open');
   document.getElementById('panel-overlay').classList.add('open');
 
@@ -2630,11 +2635,23 @@ async function openPanel(entityType, item) {
 
 function closePanel() {
   if (panelState.editor) { destroyEditor(panelState.editor); panelState.editor = null; }
-  panelState = { open: false, entityType: null, item: null, isCreate: false, editor: null };
-  document.getElementById('detail-panel').classList.remove('open');
+  panelState = { open: false, entityType: null, item: null, isCreate: false, editor: null, expanded: false };
+  document.getElementById('detail-panel').classList.remove('open', 'expanded');
   document.getElementById('panel-overlay').classList.remove('open');
 }
 
+function togglePanelExpand() {
+  panelState.expanded = !panelState.expanded;
+  document.getElementById('detail-panel').classList.toggle('expanded', panelState.expanded);
+  var btn = document.getElementById('panel-expand-btn');
+  if (btn) {
+    btn.innerHTML = panelState.expanded
+      ? '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M14 6h-4V2M2 10h4v4M10 6l4.5-4.5M6 10L1.5 14.5"/></svg>'
+      : '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M10 2h4v4M6 14H2v-4M14 2L9.5 6.5M2 14l4.5-4.5"/></svg>';
+    btn.title = panelState.expanded ? 'Collapse' : 'Expand';
+  }
+}
+
 function openCreateDialog(entityType) {
   var fields = getEntityFields(entityType);
   var item = { _isNew: true, title: '' };
@@ -2659,7 +2676,7 @@ function openCreateDialog(entityType) {
     }
   }
 
-  panelState = { open: true, entityType: entityType, item: item, isCreate: true, editor: null };
+  panelState = { open: true, entityType: entityType, item: item, isCreate: true, editor: null, expanded: false };
   renderPanel();
   document.getElementById('detail-panel').classList.add('open');
   document.getElementById('panel-overlay').classList.add('open');
@@ -2686,6 +2703,10 @@ function renderPanel() {
     html += '<span class="pill" style="background:' + item._sourceColor + '20;color:' + item._sourceColor + ';font-size:10px">' + escHtml(item._sourceLabel || item._source) + '</span>';
   }
 
+  var expandIcon = panelState.expanded
+    ? '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M14 6h-4V2M2 10h4v4M10 6l4.5-4.5M6 10L1.5 14.5"/></svg>'
+    : '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M10 2h4v4M6 14H2v-4M14 2L9.5 6.5M2 14l4.5-4.5"/></svg>';
+  html += '<button class="panel-expand" id="panel-expand-btn" title="' + (panelState.expanded ? 'Collapse' : 'Expand') + '">' + expandIcon + '</button>';
   html += '<button class="panel-close" id="panel-close-btn">&times;</button></div>';
 
   // ── Title ──
@@ -2772,6 +2793,7 @@ function renderPanel() {
 
   // Event listeners
   document.getElementById('panel-close-btn').addEventListener('click', closePanel);
+  document.getElementById('panel-expand-btn').addEventListener('click', togglePanelExpand);
   document.getElementById('panel-cancel-btn').addEventListener('click', closePanel);
   var saveBtn = document.getElementById('panel-save-btn');
   if (saveBtn) saveBtn.addEventListener('click', isCreate ? saveCreatePanel : savePanel);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdboard",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "description": "Git-based project management dashboard. Reads markdown files with YAML frontmatter and serves a visual kanban board, table, milestones, and metrics views.",
   "main": "./src/server/server.js",
   "bin": {

package/src/core/yaml.js

@@ -58,8 +58,21 @@ function parseYaml(text) {
       continue;
     }
 
-    obj[key] = parseValue(rawValue);
-    i++;
+    // Check for continuation lines (multiline plain scalar)
+    let fullValue = rawValue;
+    let j = i + 1;
+    while (j < lines.length) {
+      const nextLine = lines[j];
+      if (nextLine.match(/^\s/) && nextLine.trim() !== '' &&
+          !nextLine.match(/^\s+-\s/) && !nextLine.match(/^\s+\w[\w.-]*\s*:/)) {
+        fullValue += ' ' + nextLine.trim();
+        j++;
+      } else {
+        break;
+      }
+    }
+    obj[key] = parseValue(fullValue);
+    i = j;
   }
 
   return obj;
@@ -99,6 +112,29 @@ function serializeValue(v) {
   return String(v);
 }
 
+function wrapPlainScalar(text) {
+  // Normalize newlines to spaces
+  const normalized = text.replace(/\n/g, ' ').replace(/\s+/g, ' ').trim();
+  const words = normalized.split(' ');
+  const lines = [];
+  let currentLine = '';
+
+  for (const word of words) {
+    if (currentLine === '') {
+      currentLine = word;
+    } else if (currentLine.length + 1 + word.length > 78) {
+      lines.push(currentLine);
+      currentLine = word;
+    } else {
+      currentLine += ' ' + word;
+    }
+  }
+  if (currentLine) lines.push(currentLine);
+
+  // First line is bare, continuation lines indented with 2 spaces
+  return lines.map((l, i) => (i === 0 ? l : '  ' + l)).join('\n');
+}
+
 function serializeYaml(obj) {
   const lines = [];
   for (const [key, value] of Object.entries(obj)) {
@@ -124,7 +160,11 @@ function serializeYaml(obj) {
         }
       }
     } else {
-      lines.push(key + ': ' + serializeValue(value));
+      if (typeof value === 'string' && (value.length > 80 || value.indexOf('\n') !== -1)) {
+        lines.push(key + ': ' + wrapPlainScalar(value));
+      } else {
+        lines.push(key + ': ' + serializeValue(value));
+      }
     }
   }
   return lines.join('\n');