@hypersocial/decks-cli 0.9.10 → 0.9.12

package/templates/layouts/cover-type.html

@@ -0,0 +1,31 @@
+<!--
+layout: cover-type
+summary: A type-only cover: the title, big, on the theme's own ground and texture, with the presenter large in the corner as the visual. No picture to fill.
+use: the first slide when there is no picture that shows the real subject yet, or the deck is about an idea more than a thing. Swap the ground (on-ink, on-accent, on-tint) and keep one signature texture (bg-corner or bg-mark) at most; the title stays clear of it. Nothing to fill: it passes check as scaffolded.
+slot: bottom-right
+presenter: stage
+nopresenter: The title widens into the corner the presenter held.
+cues: [wave] at the hello, [look: h1] when the narration says the title.
+script: Hi, [wave] this is __TITLE__. [look: h1] One idea, in a few minutes.
+-->
+<style>
+  .l-cover-type .content { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 30px; max-width: 980px; }
+  .l-cover-type .tt { font-size: calc(var(--t-display) * 1.12); line-height: .88; letter-spacing: -.05em; }
+  .l-cover-type .lead { max-width: 24em; }
+  @media (max-width: 650px) {
+    .l-cover-type .content { justify-content: flex-start; gap: 16px; padding-top: 24px; }
+    .l-cover-type .tt { font-size: calc(var(--t-display) * 1.08); }
+  }
+  /* No presenter (:root.hd-no-presenter: no face and no captions, deck_guide look): the corner is free. Phones keep this layout's rules. */
+  @media (min-width: 651px) {
+    :root.hd-no-presenter .l-cover-type .content { max-width: 1240px; }
+  }
+</style>
+<section class="slide on-ink l-cover-type bg-corner" id="__ID__" data-chapter="Hello" data-presenter-size="l" data-note="Title slide: no facts.">
+  <div class="content">
+    <div class="kicker">__SLUG__</div>
+    <h1 class="tt" data-title-mobile="__TITLE__">__TITLE__</h1>
+    <p class="lead">One sentence on what this deck is about.</p>
+  </div>
+  <div class="narration-slot"></div>
+</section>

package/templates/layouts/hero.html

@@ -1,29 +1,44 @@
 <!--
 layout: hero
-summary: The opening. One display-size line, a visual on the right, the presenter's hello.
-use: the first slide; a section opener. Its .art is a placeholder check fails on: put in a picture of the real subject (gen-image / generate_image) as <img class="art">, or delete the div and let the presenter be the visual.
+summary: The opening, as a split cover: the title on the slide's own ground on the left, the picture in a clean frame top-right, the presenter's hello. Text never sits on the picture.
+use: the first slide (the default cover); a section opener. Its .art is a placeholder check fails on: put in a picture of the real subject (gen-image / generate_image, landscape or near-square: the frame is about 7:6) as <img class="art">, or delete the div and the title takes the full frame with the presenter as the visual. Never lay the title over the picture or fade the picture behind it. Other covers: cover-band (the picture full bleed, the title on a solid panel), cover-poster (the picture on top, the title below) and cover-type (type only).
 slot: bottom-right
 presenter: stage
-nopresenter: With art (the placeholder div counts), unchanged: the art already fills the right. Delete the art and the line re-centres in the full frame.
+nopresenter: With art, the picture grows to the full height of its column. Delete the art and the line re-centres in the full frame.
 cues: [wave] at the hello, [look: h1] when the narration says the title.
 script: Hi, [wave] this is __TITLE__. [look: h1] One idea, in a few minutes.
 -->
 <style>
-  .l-hero { overflow: hidden; }
-  .l-hero .content { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 28px; max-width: 980px; position: relative; z-index: 1; }
+  /* The title and the picture are two columns: whatever the title's length, it never reaches the picture. */
+  .l-hero .content { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 28px; max-width: 980px; }
   .l-hero .tt { font-size: var(--t-display); line-height: .9; }
-  /* Swap the div for an <img class="art"> of your file (gen-image, wide), or delete it for no art. */
-  .l-hero .art { position: absolute; top: 0; right: 0; width: 820px; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(to right, transparent, #000 32%); mask-image: linear-gradient(to right, transparent, #000 32%); }
+  /* With art: the title on the left on the slide's ground; the picture framed top-right, the presenter's corner below it. */
+  .l-hero:has(> .art) { display: grid; grid-template-columns: minmax(0, 1fr) 560px; grid-template-rows: minmax(0, 1fr); column-gap: 72px; }
+  .l-hero:has(> .art) .content { grid-column: 1; grid-row: 1; max-width: none; }
+  .l-hero:has(> .art) .tt { font-size: min(var(--t-display), 112px); }
+  /* A brand logo (applyBrand puts it first in the slide) heads the title column; the picture spans both rows. */
+  .l-hero:has(> .art):has(> .brand-logo) { grid-template-rows: auto minmax(0, 1fr); }
+  .l-hero:has(> .art) > .brand-logo { grid-column: 1; grid-row: 1; }
+  .l-hero:has(> .art):has(> .brand-logo) .content { grid-row: 2; }
+  .l-hero:has(> .art):has(> .brand-logo) .art { grid-row: 1 / -1; }
+  /* Swap the div for an <img class="art"> of your file (gen-image, landscape or square), or delete it for no art. */
+  .l-hero .art { grid-column: 2; grid-row: 1; align-self: start; display: block; width: 100%; height: 480px; margin-top: 8px; border: 4px solid var(--ink); border-radius: 28px; object-fit: cover; box-shadow: 14px 14px 0 var(--ink); }
+  .on-ink.l-hero .art { border-color: var(--paper); box-shadow: 14px 14px 0 var(--accent); }
   /* Until then a labelled, hatched stand-in, so it reads as a slot to fill; check fails while it is here. */
-  .l-hero div.art { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 10%, transparent) 0 2px, transparent 2px 22px); }
-  .l-hero div.art::after { content: "Art goes here"; position: absolute; left: 64%; top: 40%; transform: translate(-50%, -50%); padding: 14px 26px; border: 3px dashed var(--ink); border-radius: 16px; background: var(--paper); color: var(--ink); font: 700 24px var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
+  .l-hero div.art { position: relative; background: var(--paper) repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 10%, transparent) 0 2px, transparent 2px 22px); }
+  .l-hero div.art::after { content: "Art goes here"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 14px 26px; border: 3px dashed var(--ink); border-radius: 16px; background: var(--paper); color: var(--ink); font: 700 24px var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
   @media (max-width: 650px) {
-    .l-hero .content { justify-content: flex-start; gap: 16px; padding-top: 200px; }
-    .l-hero .art { width: 100%; height: 230px; -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); mask-image: linear-gradient(to bottom, #000 60%, transparent); }
-    .l-hero div.art::after { left: 50%; top: 45%; padding: 8px 14px; border-width: 2px; font-size: 13px; }
+    /* Phones: the picture above, the title below it on the ground. */
+    .l-hero:has(> .art) { display: flex; }
+    .l-hero:has(> .art) .tt { font-size: var(--t-display); }
+    .l-hero .content { flex: none; justify-content: flex-start; gap: 16px; }
+    .l-hero .art { flex: none; height: 176px; margin-top: 0; border-width: 2px; border-radius: 16px; box-shadow: 6px 6px 0 var(--ink); }
+    .on-ink.l-hero .art { box-shadow: 6px 6px 0 var(--accent); }
+    .l-hero div.art::after { padding: 8px 14px; border-width: 2px; font-size: 13px; }
   }
   /* No presenter (:root.hd-no-presenter: no face and no captions, deck_guide look): the corner is free. Phones keep this layout's rules. */
   @media (min-width: 651px) {
+    :root.hd-no-presenter .l-hero:has(> .art) .art { align-self: stretch; height: auto; margin-top: 0; }
     :root.hd-no-presenter .l-hero:not(:has(> .art)) .content { align-self: center; align-items: center; text-align: center; max-width: 1200px; }
   }
 </style>

package/templates/layouts/split.html

@@ -9,13 +9,13 @@ cues: [look: #__ID__-frame] when the narration turns to the picture; [go: #__ID_
 script: Here it is, doing the job. [look: #__ID__-frame] It starts with [go: #__ID__-t1] the first thing. Then [go: #__ID__-t2] the second. And [go: #__ID__-t3] the third. [go: slot]
 -->
 <style>
-  .l-split { display: grid; grid-template-columns: 680px 1fr; column-gap: 64px; align-items: center; }
+  .l-split { display: grid; grid-template-columns: 680px minmax(0, 1fr); column-gap: 64px; align-items: center; }
   .l-split .text { align-self: start; display: flex; flex-direction: column; gap: 22px; padding-top: 24px; }
   .l-split .head { display: flex; align-items: center; gap: 22px; }
   .l-split .tt { font-size: var(--t-sub); line-height: 1.02; }
   .l-split .lead { font-size: var(--t-body); }
   .l-split .ticks { margin-top: 6px; }
-  .l-split .media { display: grid; place-items: center; height: 100%; }
+  .l-split .media { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; height: 100%; min-width: 0; }
   .l-split .frame.card { width: 300px; --tilt: 4deg; }
   .l-split .shot.wide { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; object-fit: cover; box-shadow: 14px 14px 0 var(--accent); }
   .on-accent.l-split .shot.wide { box-shadow: 14px 14px 0 var(--ink); }

package/templates/narrated-deck.html

@@ -7,7 +7,8 @@
 <!-- Loading state (keep verbatim; `hyperdecks check` requires it). Until the
      player marks body[data-hd-ready] the page shows only the slide card, at its
      final size, in the deck's --hd-ground (its first slide's colour) on the
-     page's brand colour, with a quiet loader in --hd-ground-ink; then the
+     page's brand colour, with the opening card over it (the title and the
+     presenter's still), or in a frame quiet dots in --hd-ground-ink; then the
      slides fade in. If the player never arrives, the slides show after 10 s
      rather than never. Put data-layout="overlay" on <html> for the overlay. -->
 <link rel="modulepreload" href="https://hyperdecks.ai/player/v1/player.js">
@@ -21,7 +22,7 @@
   /* The card as the player draws it (player.css, framed): 16:9, scaled to fit
      between the 64px masthead and the 56px dock, 24px in from the sides. */
   body::before { inset: 64px 24px 56px; margin: auto; width: min(100vw - 48px, (100dvh - 120px) * 16 / 9); height: min(100dvh - 120px, (100vw - 48px) * 9 / 16); border-radius: calc(min(100vw - 48px, (100dvh - 120px) * 16 / 9) * .01125); background: var(--hd-ground, #fff); box-shadow: 0 0 0 1px color-mix(in srgb, var(--hd-ground-ink, #0b0b0f) 16%, transparent); }
-  body::after { left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; color: var(--hd-ground-ink, #0b0b0f); background: currentColor; box-shadow: -24px 0 currentColor, 24px 0 currentColor; opacity: 0; animation: hd-dots .7s ease-in-out .6s infinite alternate; }
+  [data-hd-frame] body::after { left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; color: var(--hd-ground-ink, #0b0b0f); background: currentColor; box-shadow: -24px 0 currentColor, 24px 0 currentColor; opacity: 0; animation: hd-dots .7s ease-in-out .6s infinite alternate; }
   body[data-hd-ready]::before, body[data-hd-ready]::after { opacity: 0; animation: none; }
   /* The overlay (embedded, ?thumb, or data-layout="overlay"): the stage fills the window. */
   :is([data-hd-frame], [data-layout="overlay"]) body::before { inset: 0; width: min(100vw, 100dvh * 16 / 9); height: min(100dvh, 100vw * 9 / 16); border-radius: calc(min(100vw, 100dvh * 16 / 9) * .01125); box-shadow: none; }
@@ -41,7 +42,75 @@
   @keyframes hd-in { from { opacity: 0; } }
   @keyframes hd-dots { from { opacity: .15; } to { opacity: .6; } }
   @keyframes hd-fail-open { to { visibility: visible; overflow: auto; } }
+#hd-open{position:fixed;inset:0;z-index:2147483000;pointer-events:none;visibility:visible!important;animation:none!important;opacity:0;font-family:var(--hd-ui-font,"Space Grotesk",system-ui,sans-serif);color:#0b0b0f}
+#hd-open.is-shown{opacity:1;transition:opacity .2s ease-out}
+#hd-open.is-gone{opacity:0;transition:opacity .45s ease-out}
+#hd-open .hdo-slide{position:absolute;inset:64px 24px 56px;margin:auto;width:min(100vw - 48px,(100dvh - 120px)*16/9);height:min(100dvh - 120px,(100vw - 48px)*9/16);border-radius:calc(min(100vw - 48px,(100dvh - 120px)*16/9)*.01125);overflow:hidden;container-type:inline-size;background:var(--hd-ground,#fff)}
+#hd-open .hdo-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:blur(2.2cqi) saturate(1.15);transform:scale(1.12);animation:hdo-breathe 2.4s ease-in-out infinite}
+#hd-open .hdo-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);background-size:250% 100%;animation:hdo-shim 1.8s ease-in-out infinite;mix-blend-mode:soft-light}
+#hd-open.is-done .hdo-slide img{animation:hdo-deblur .5s cubic-bezier(.2,.8,.2,1) .5s forwards}
+#hd-open.is-done .hdo-slide::after{opacity:0;transition:opacity .3s}
+.hdo-card{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(86vw,420px);display:grid;justify-items:center;gap:.6em;padding:1.3em 1.5em 1.2em;border-radius:22px;background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:4px 4px 0 #0b0b0f;border:1.5px solid #0b0b0f;text-align:center;box-sizing:border-box}
+#hd-open.is-done .hdo-card{opacity:0;transform:scale(.96);transition:opacity .25s .5s,transform .25s .5s}
+.hdo-buddy{position:relative;width:92px;height:96px;margin-top:-62px;display:grid;justify-items:center}
+.hdo-hop{width:86px;height:80px;transform-origin:50% 100%;animation:hdo-hop 1.15s cubic-bezier(.3,0,.4,1) infinite}
+.hdo-look{width:100%;height:100%;animation:hdo-look 4.6s ease-in-out infinite}
+.hdo-buddy img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 3px 0 rgba(11,11,15,.18))}
+.hdo-shadow{position:absolute;bottom:4px;width:46px;height:8px;border-radius:50%;background:rgba(11,11,15,.22);animation:hdo-shadow 1.15s cubic-bezier(.3,0,.4,1) infinite}
+.hdo-think{position:absolute;right:-30px;top:-6px;display:flex;gap:3px;padding:5px 8px;border-radius:14px;background:#fff;border:1.5px solid #0b0b0f;box-shadow:2px 2px 0 #0b0b0f}
+.hdo-think::after{content:"";position:absolute;left:4px;bottom:-7px;width:7px;height:7px;border-radius:50%;background:#fff;border:1.5px solid #0b0b0f}
+.hdo-think i{width:5px;height:5px;border-radius:50%;background:#0b0b0f;animation:hdo-tdot 1s ease-in-out infinite}
+.hdo-think i:nth-child(2){animation-delay:.15s}.hdo-think i:nth-child(3){animation-delay:.3s}
+.hdo-spark{position:absolute;left:50%;top:40%;width:8px;height:8px;margin:-4px;opacity:0}
+.hdo-spark::before{content:"";position:absolute;inset:0;background:#0b0b0f;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
+#hd-open.is-done .hdo-hop{animation:hdo-yay .55s cubic-bezier(.2,1.4,.4,1) forwards}
+#hd-open.is-done :is(.hdo-look,.hdo-shadow){animation:none}
+#hd-open.is-done .hdo-think{opacity:0;transition:opacity .15s}
+#hd-open.is-done .hdo-spark{animation:hdo-spark .6s ease-out forwards}
+.hdo-title{font-weight:700;font-size:18px;line-height:1.2;text-wrap:balance;overflow-wrap:anywhere}
+.hdo-by{font:12.5px/1.3 var(--hd-ui-mono,"JetBrains Mono",ui-monospace,monospace);color:#3d3b35}
+.hdo-bar{width:100%;height:5px;border-radius:999px;background:rgba(11,11,15,.12);overflow:hidden}
+.hdo-bar i{display:block;height:100%;width:8%;background:#0b0b0f;border-radius:999px;transition:width .35s ease-out}
+.hdo-step{font:12px/1.3 var(--hd-ui-mono,"JetBrains Mono",ui-monospace,monospace);color:#55534b;min-height:1.3em}
+@keyframes hdo-breathe{50%{filter:blur(2.6cqi) saturate(1.25) brightness(1.05)}}
+@keyframes hdo-shim{0%{background-position:120% 0}100%{background-position:-120% 0}}
+@keyframes hdo-deblur{to{filter:blur(0);transform:none}}
+@keyframes hdo-hop{0%,100%{transform:translateY(0) scale(1.06,.92)}12%{transform:translateY(0) scale(.95,1.06)}45%{transform:translateY(-14px) scale(1,1)}70%{transform:translateY(0) scale(1.04,.95)}82%{transform:translateY(0) scale(1,1)}}
+@keyframes hdo-shadow{0%,100%{transform:scale(1.05);opacity:.9}45%{transform:scale(.62);opacity:.45}70%{transform:scale(1);opacity:.85}}
+@keyframes hdo-look{0%,18%{transform:rotate(0)}24%,38%{transform:rotate(-9deg) translateX(-2px)}44%,58%{transform:rotate(8deg) translateX(2px)}64%,100%{transform:rotate(0)}}
+@keyframes hdo-tdot{0%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
+@keyframes hdo-yay{0%{transform:translateY(0) scale(1.08,.9)}40%{transform:translateY(-26px) scale(.94,1.08) rotate(-6deg)}100%{transform:translateY(-6px) scale(1) rotate(0)}}
+@keyframes hdo-spark{0%{opacity:0;transform:translate(0,0) scale(.4)}30%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1.2) rotate(90deg)}}
+:is([data-hd-frame],[data-layout="overlay"]) #hd-open .hdo-slide{inset:0;width:min(100vw,100dvh*16/9);height:min(100dvh,100vw*9/16)}
+@media (max-width:650px){#hd-open .hdo-slide{inset:52px 8px calc(56px + env(safe-area-inset-bottom));width:auto;height:auto;border-radius:14px}.hdo-card{width:min(84vw,320px);padding:1em 1.1em .95em}.hdo-title{font-size:15.5px}.hdo-buddy{transform:scale(.85);margin-top:-58px}}
+@media (prefers-reduced-motion:reduce){#hd-open *,#hd-open *::before,#hd-open *::after{animation:none!important;transition:none!important}#hd-open .hdo-slide::after{display:none}#hd-open.is-done .hdo-card{opacity:1;transform:none}}
+@media print{#hd-open{display:none!important}}
 </style>
+<script data-hd-opening>(function(){var d=document;
+if(self!==top||/[?&](thumb|export)\b/.test(location.search))return;
+function go(){if(d.readyState==="loading")return;d.removeEventListener("readystatechange",go);
+var b=d.body,p=d.querySelector('script[src*="/player/v"][src*="/player.js"]');
+if(!b||!p||d.getElementById("hd-open")||b.hasAttribute("data-hd-ready")||d.documentElement.hasAttribute("data-hyperdecks-thumb"))return;
+var o=d.createElement("div"),img=p.getAttribute("data-presenter")!=="none"&&p.getAttribute("data-presenter-image");
+o.id="hd-open";o.setAttribute("aria-hidden","true");
+o.innerHTML='<div class="hdo-slide"></div><div class="hdo-card">'+(img?"<div class=\"hdo-buddy\"><div class=\"hdo-hop\"><div class=\"hdo-look\"><img src=\"\" alt=\"\"></div></div><div class=\"hdo-shadow\"></div><div class=\"hdo-think\"><i></i><i></i><i></i></div><span class=\"hdo-spark\" style=\"--x:-40px;--y:-30px\"></span><span class=\"hdo-spark\" style=\"--x:42px;--y:-34px\"></span><span class=\"hdo-spark\" style=\"--x:-30px;--y:10px\"></span><span class=\"hdo-spark\" style=\"--x:36px;--y:6px\"></span><span class=\"hdo-spark\" style=\"--x:0px;--y:-46px\"></span></div>":'')+'<div class="hdo-title"></div><div class="hdo-bar"><i></i></div><div class="hdo-step"></div></div>';
+if(img){var i=o.querySelector(".hdo-buddy img");i.addEventListener("error",function(){var y=o.querySelector(".hdo-buddy");if(y)y.remove()});i.src=img}
+o.querySelector(".hdo-title").textContent=(d.title||"").replace(/\s+/g," ").trim();
+b.insertBefore(o,b.firstChild);(function(o){var b=document.body,d=document.documentElement;if(!o||!b)return;
+if(self!==top||/[?&](thumb|export)\b/.test(location.search)||d.hasAttribute("data-hyperdecks-thumb")){o.remove();return}
+var S={"page":[10,"Opening the deck…"],"player":[38,"Loading the player…"],"presenter":[62,"Waking up {name}…"],"narration":[84,"Getting the narration…"]},bar=o.querySelector(".hdo-bar i"),step=o.querySelector(".hdo-step"),who=o.getAttribute("data-name")||"the presenter",at=0,shown=false,done=false,mo;
+var rm=window.matchMedia&&matchMedia("(prefers-reduced-motion: reduce)").matches;
+function boot(){var s=S[b.getAttribute("data-hd-boot")];if(!s||s[0]<=at)return;at=s[0];bar.style.width=s[0]+"%";step.textContent=s[1].split("{name}").join(who)}
+function finish(){if(done)return;done=true;if(mo)mo.disconnect();clearTimeout(t1);clearTimeout(t2);
+if(!shown){o.remove();return}bar.style.width="100%";step.textContent="Ready";
+o.classList.add("is-done");setTimeout(function(){o.classList.add("is-gone")},rm?0:500);setTimeout(function(){o.remove()},rm?500:1000)}
+function check(){if(b.hasAttribute("data-hd-ready"))finish();else boot()}
+var t1=setTimeout(function(){if(!done){shown=true;o.classList.add("is-shown")}},150);
+var t2=setTimeout(finish,10000);
+step.textContent=S.page[1];
+if(window.MutationObserver){mo=new MutationObserver(check);mo.observe(b,{attributes:true,attributeFilter:["data-hd-ready","data-hd-boot"]})}
+check()})(o)}
+d.addEventListener("readystatechange",go);go()})();</script>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Space+Mono:wght@400;700&display=swap">