@gui-chat-plugin/sequence 0.3.1 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 0.4.0
+
+- **HTML slides animate with MulmoCast's `data-animation` attributes**, not CSS: `animate`
+  (opacity, translate, scale, rotate, width, height), `counter` and `typewriter`, with `data-start`
+  and `data-end` in seconds. A movie made from the slides (MulmoChat's makeMovie: an `html_tailwind`
+  beat with `animation: true`) now moves as the View does; MulmoCast pauses CSS animations, so the
+  0.3 slides' `animate-fade-up` and the like didn't move there. The page plays them with its own
+  player, written for this package (MIT; MulmoCast is AGPL) and checked against MulmoCast's
+  renderer: 56 of 56 sampled values equal. CSS animations and transitions don't play; each is
+  shown at its end, so an element faded in with the model's own `@keyframes` is seen rather than
+  held transparent. `SLIDE_CSS_ANIMATIONS_FINISHED` is those rules, for a host to add to the HTML
+  it gives MulmoCast, which would hold such an element at its first frame.
+- Breaking: `SLIDE_ANIMATIONS` (the `animate-*` classes) is gone; `SLIDE_ANIMATION_KINDS`,
+  `SLIDE_AUTO_END_SECONDS` and `SLIDE_CSS_ANIMATIONS_FINISHED` are new.
+
 ## 0.3.1
 
 - **"HTML slides" go to presentSlide**: the prompt says that when the user asks for HTML slides,

package/README.md

@@ -65,13 +65,20 @@ it is drawn.
 A slide is a generated picture (`imagePrompt`) or HTML (`html`), the model's choice per slide: a
 picture for a scene or an object, HTML for words, numbers, lists, comparisons and diagrams, which
 picture models draw badly. The model writes the inside of `<body>` for a 1280x720 canvas, with
-Tailwind CSS v4 classes and these entrance animations: `animate-fade-in`, `animate-fade-up`,
-`animate-fade-down`, `animate-slide-in-left`, `animate-slide-in-right`, `animate-zoom-in`,
-`animate-pop` and `animate-draw` (an SVG path drawing itself), staggered with
-`[animation-delay:…]`. The slide's own scripts don't run: its animations are CSS.
+Tailwind CSS classes, and animates it with [MulmoCast](https://github.com/receptron/mulmocast-cli)'s
+declarative `data-animation` attributes: `animate` (`data-opacity`, `data-translate-x/y`,
+`data-scale`, `data-rotate`, `data-width`/`data-height`), `counter` and `typewriter`, each with
+`data-start` and `data-end` in seconds and an optional `data-easing`. A movie made from the slide
+(an `html_tailwind` beat with `animation: true`) moves the same way. The page plays them with its
+own player (MIT; MulmoCast is AGPL), measured against MulmoCast's: the same values at the same
+times. An animation without `data-end` runs to the end of the beat in a movie, and for
+`SLIDE_AUTO_END_SECONDS` (8) here. CSS animations and transitions don't play: each is shown at its
+end. MulmoCast would hold them at their first frame (an element faded in with `@keyframes` stays
+transparent), so a host making a movie adds `SLIDE_CSS_ANIMATIONS_FINISHED` (a `<style>`'s rules)
+to the HTML it passes on. The slide's own scripts don't run.
 
 `slideHtmlDocument(html)` (core entry) makes the page: Tailwind's browser build from jsDelivr (one
-version, checked by its hash), the animations, and a Content Security Policy that lets it send
+version, checked by its hash), the animation player, and a Content Security Policy that lets it send
 nothing out: `connect-src 'none'`; images, media and fonts only from `data:`/`blob:` URLs and
 Google Fonts; and no script but the page's own and Tailwind's, so nothing can navigate the frame to
 a URL carrying the page (a sandbox allows that, and CSP can't forbid it). The slide's `<meta>`,

package/dist/core/index.d.ts

@@ -4,6 +4,6 @@ export declare const presentSlidePluginCore: SequencePluginCore;
 export declare const defineStoryboardPluginCore: SequencePluginCore;
 export declare const presentPanelPluginCore: SequencePluginCore;
 export * from "./definitions";
-export { MAX_SLIDE_HTML, SLIDE_ANIMATIONS, SLIDE_HEIGHT, SLIDE_WIDTH, slideHtmlDocument, } from "./slideHtml";
+export { MAX_SLIDE_HTML, SLIDE_ANIMATION_KINDS, SLIDE_AUTO_END_SECONDS, SLIDE_CSS_ANIMATIONS_FINISHED, SLIDE_HEIGHT, SLIDE_WIDTH, slideHtmlDocument, } from "./slideHtml";
 export { SLIDESHOWS_DIR, STORYBOARDS_DIR, loadRecord } from "./records";
 export type { SequenceContext } from "./host";

package/dist/core/slideHtml.d.ts

@@ -2,12 +2,17 @@ export declare const SLIDE_WIDTH = 1280;
 export declare const SLIDE_HEIGHT = 720;
 /** The most HTML a slide may have, in characters. */
 export declare const MAX_SLIDE_HTML = 60000;
-/** The animations every slide has, as `animate-<name>` classes. They keep
- *  their first frame while delayed (fill mode both), so an element with a
- *  delay stays hidden until its turn. */
-export declare const SLIDE_ANIMATIONS: readonly ["fade-in", "fade-up", "fade-down", "slide-in-left", "slide-in-right", "zoom-in", "pop", "draw"];
+/** The data-animation kinds a slide can use: MulmoCast's (its html_tailwind
+ *  beats with `animation: true`), so a slide animates the same in a movie
+ *  made from it. MulmoCast also has stagger, codeReveal, blink, coverZoom and
+ *  coverPan; not these. */
+export declare const SLIDE_ANIMATION_KINDS: readonly ["animate", "counter", "typewriter"];
+/** How long an animation without data-end runs here, in seconds. In a movie
+ *  it runs to the end of its beat, which the narration decides and the View
+ *  doesn't know. */
+export declare const SLIDE_AUTO_END_SECONDS = 8;
 /** PAGE_SCRIPT's hash, which the policy allows (checked by a test). */
-export declare const PAGE_SCRIPT_HASH = "sha256-MZyL5rvWmIVxl3WUuDU5BqzPJGR2/fV/YPh01MNyUoM=";
+export declare const PAGE_SCRIPT_HASH = "sha256-0zsqCvkCfq5Z1iJCn46NiAtSAyIr/JDkyNs/Fae1J+Y=";
 /** The slide's HTML, made safe to show:
  *  - the tags that act on the page from outside the body are plain text:
  *    <meta> (a refresh navigates the frame, a policy of its own), <base> and
@@ -19,5 +24,12 @@ export declare const PAGE_SCRIPT_HASH = "sha256-MZyL5rvWmIVxl3WUuDU5BqzPJGR2/fV/
  *    "shadowroot" is renamed, which leaves no attribute that makes one.
  *    Everything stays in the light DOM, where the guard sees it. */
 export declare const neutralizeSlideHtml: (html: string) => string;
+/** CSS rules that stop a slide's CSS animations and transitions, which the
+ *  slide isn't to use (it animates with data-animation), showing each at its
+ *  end: an element the model faded in with its own @keyframes is seen, not
+ *  held at its first, transparent frame. MulmoCast pauses CSS animations at
+ *  that frame, so a host that makes a movie of the slide adds these to the
+ *  HTML it passes on (a zero-length animation is at its end even paused). */
+export declare const SLIDE_CSS_ANIMATIONS_FINISHED = "*, *::before, *::after { animation-play-state: paused !important; animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; animation-fill-mode: both !important; transition: none !important; }";
 /** The page an HTML slide is shown as. */
 export declare function slideHtmlDocument(html: string): string;