@mangomagic/cli 0.1.16 → 0.1.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mangomagic/cli",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "description": "MangoMagic CLI — sign in, manage episodes, and expose MangoMagic to MCP clients (Claude Desktop, Cursor).",
   "type": "module",
   "bin": {

package/src/export/cards.mjs

@@ -49,6 +49,16 @@ function slideLines(slide) {
   return Array.isArray(slide?.lines) ? slide.lines.map(lineText).filter(Boolean) : [];
 }
 
+function lineClasses(line, idx) {
+  const rawSize = typeof line === "object" && line ? line.size : "";
+  const size = ["hook", "punch", "body", "small"].includes(rawSize) ? rawSize : "";
+  return [
+    idx === 0 ? "primary" : "",
+    size ? `size-${size}` : "",
+    line?.gold ? "gold" : "",
+  ].filter(Boolean).join(" ");
+}
+
 function cardUrl(card) {
   return card?.id ? `https://mangomagic.live/carousels/${card.id}` : "";
 }
@@ -180,12 +190,12 @@ function slideHtml(card, slide, idx, total) {
   const bg = card?.spec?.bg || "#111111";
   const ink = card?.spec?.ink || "#f8f4ec";
   const accent = card?.spec?.accent || "#f1ab1c";
-  const lines = slideLines(slide);
+  const lines = Array.isArray(slide?.lines) ? slide.lines : [];
   return `
     <section class="slide" style="--bg:${escapeHtml(bg)};--ink:${escapeHtml(ink)};--accent:${escapeHtml(accent)}">
       <div class="slide-kicker">${idx + 1}/${total}${slide.type ? ` · ${escapeHtml(slide.type)}` : ""}</div>
       <div class="slide-lines">
-        ${lines.map((line, lineIdx) => `<p class="${lineIdx === 0 ? "primary" : ""}">${escapeHtml(line)}</p>`).join("")}
+        ${lines.map((line, lineIdx) => `<p class="${lineClasses(line, lineIdx)}">${escapeHtml(lineText(line))}</p>`).join("")}
       </div>
       ${slide.swipe_label ? `<div class="swipe">${escapeHtml(slide.swipe_label)}</div>` : ""}
       ${card?.spec?.footer ? `<div class="footer">${escapeHtml(card.spec.footer)}</div>` : ""}
@@ -233,8 +243,12 @@ function htmlFor(cards) {
     .slides { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
     .slide { aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: center; padding: 24px; position: relative; background: var(--bg); color: var(--ink); border-radius: 10px; overflow: hidden; box-shadow: 0 16px 36px rgba(20, 16, 8, .16); }
     .slide-kicker { position: absolute; top: 14px; left: 16px; color: var(--accent); font-size: 12px; font-weight: 800; text-transform: uppercase; }
-    .slide-lines p { margin: 10px 0; font-size: 24px; line-height: 1.02; font-weight: 800; }
-    .slide-lines .primary { color: var(--accent); font-size: 30px; }
+    .slide-lines p { margin: 10px 0; font-size: 20px; line-height: 1.08; font-weight: 800; overflow-wrap: anywhere; }
+    .slide-lines .gold, .slide-lines .primary { color: var(--accent); }
+    .slide-lines .size-hook { font-size: 30px; line-height: 1; }
+    .slide-lines .size-punch { font-size: 26px; line-height: 1.02; }
+    .slide-lines .size-body { font-size: 18px; line-height: 1.12; }
+    .slide-lines .size-small { font-size: 13px; line-height: 1.25; font-weight: 700; }
     .swipe { position: absolute; right: 16px; bottom: 40px; color: var(--accent); font-weight: 800; }
     .footer { position: absolute; left: 16px; right: 16px; bottom: 14px; font-size: 11px; color: color-mix(in srgb, var(--ink), transparent 36%); }
     .caption { margin-top: 20px; max-width: 760px; background: #fff; border: 1px solid #e3dccf; border-radius: 10px; padding: 18px; }