@a3s-lab/office 0.33.0 → 0.34.0

package/dist/internal/features/work/work-presentation-animation.d.ts

@@ -0,0 +1,20 @@
+import type { WorkSlide, WorkSlideAnimation, WorkSlideAnimationEffect } from './work-types';
+export { WORK_SLIDE_ANIMATION_LIMIT, WORK_SLIDE_ANIMATION_MAX_DELAY_MS, WORK_SLIDE_ANIMATION_MAX_DURATION_MS, WORK_SLIDE_ANIMATION_MIN_DURATION_MS, } from './work-presentation-animation-constraints';
+export interface WorkSlideAnimationCueItem {
+    animation: WorkSlideAnimation;
+    endOffsetMs: number;
+    startOffsetMs: number;
+}
+export interface WorkSlideAnimationCue {
+    automatic: boolean;
+    items: WorkSlideAnimationCueItem[];
+    totalDurationMs: number;
+}
+export declare function createWorkSlideAnimation(elementId: string, effect: WorkSlideAnimationEffect, previous?: WorkSlideAnimation): WorkSlideAnimation;
+export declare function normalizeWorkSlideAnimation(animation: WorkSlideAnimation): WorkSlideAnimation;
+export declare function workSlideAnimationForElement(slide: WorkSlide, elementId: string | undefined): WorkSlideAnimation | undefined;
+export declare function workSlideAnimationIndex(slide: WorkSlide, animationId: string | undefined): number;
+export declare function workSlideAnimationCues(animations: readonly WorkSlideAnimation[] | undefined): WorkSlideAnimationCue[];
+export declare function initialWorkSlideAnimationCueIndex(cues: readonly WorkSlideAnimationCue[]): number;
+export declare function removeWorkSlideAnimationsForElements(slide: WorkSlide, elementIds: ReadonlySet<string>): WorkSlide;
+export declare function remapWorkSlideAnimations(animations: readonly WorkSlideAnimation[] | undefined, elementIds: ReadonlyMap<string, string>): WorkSlideAnimation[] | undefined;

package/dist/internal/features/work/work-presentation-clipboard.d.ts

@@ -1,11 +1,13 @@
-import type { WorkSlide, WorkSlideElement } from './work-types';
+import type { WorkSlide, WorkSlideAnimation, WorkSlideElement } from './work-types';
 export declare const PRESENTATION_OBJECT_OFFSET_STEP = 5;
 export type WorkPresentationClipboardPayload = {
     kind: 'element';
     element: WorkSlideElement;
+    animation?: WorkSlideAnimation;
 } | {
     kind: 'elements';
     elements: WorkSlideElement[];
+    animations?: WorkSlideAnimation[];
 } | {
     kind: 'slide';
     slide: WorkSlide;
@@ -14,13 +16,18 @@ export interface WorkPresentationClipboardRead {
     payload: WorkPresentationClipboardPayload;
     offset: number;
 }
-export declare function copyPresentationElement(element: WorkSlideElement): void;
-export declare function copyPresentationElements(elements: readonly WorkSlideElement[]): void;
+export interface WorkPresentationElementPaste {
+    animations?: WorkSlideAnimation[];
+    elements: WorkSlideElement[];
+}
+export declare function copyPresentationElement(element: WorkSlideElement, animation?: WorkSlideAnimation): void;
+export declare function copyPresentationElements(elements: readonly WorkSlideElement[], animations?: readonly WorkSlideAnimation[]): void;
 export declare function copyPresentationSlide(slide: WorkSlide): void;
 export declare function takePresentationClipboard(): WorkPresentationClipboardRead | null;
 export declare function hasPresentationClipboard(): boolean;
 export declare function clearPresentationClipboard(): void;
 export declare function clonePresentationElementForPaste(element: WorkSlideElement, offset: number): WorkSlideElement;
 export declare function clonePresentationElementsForPaste(elements: readonly WorkSlideElement[], offset: number): WorkSlideElement[];
+export declare function clonePresentationElementsAndAnimationsForPaste(elements: readonly WorkSlideElement[], animations: readonly WorkSlideAnimation[], offset: number): WorkPresentationElementPaste;
 export declare function clonePresentationSlideForPaste(slide: WorkSlide, existingSlideNames?: readonly string[]): WorkSlide;
 export declare function nextPresentationSlideCopyName(sourceName: string, existingSlideNames: readonly string[]): string;

package/dist/internal/features/work/work-types.d.ts

@@ -543,6 +543,22 @@ export interface WorkSlideTransition {
     advanceOnClick: boolean;
     advanceAfterMs?: number;
 }
+export type WorkSlideAnimationEffect = 'appear' | 'fade' | 'fly-in' | 'zoom';
+export type WorkSlideAnimationTrigger = 'on-click' | 'with-previous' | 'after-previous';
+export type WorkSlideAnimationDirection = 'left' | 'right' | 'up' | 'down';
+/**
+ * One bounded entrance animation applied to one slide-owned element.
+ * Array order on `WorkSlide.animations` is the canonical playback order.
+ */
+export interface WorkSlideAnimation {
+    id: string;
+    elementId: string;
+    effect: WorkSlideAnimationEffect;
+    trigger: WorkSlideAnimationTrigger;
+    durationMs: number;
+    delayMs: number;
+    direction?: WorkSlideAnimationDirection;
+}
 export interface WorkSlideElement {
     id: string;
     type: WorkSlideElementType;
@@ -587,6 +603,7 @@ export interface WorkSlide {
     notes?: string;
     comments?: WorkSlideComment[];
     transition?: WorkSlideTransition;
+    animations?: WorkSlideAnimation[];
 }
 export interface WorkSlideComment {
     id: string;

package/dist/styles.css

@@ -20175,6 +20175,129 @@ sub [data-office-character-position-half-points], sup [data-office-character-pos
   }
 }
 
+.work-presentation-animation-options, .work-presentation-animation-timing {
+  border: 0;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+
+.work-presentation-animation-options .work-office-field, .work-presentation-animation-timing .work-office-field {
+  flex: none;
+}
+
+.work-presentation-animation-options .work-office-field.effect {
+  width: 88px;
+}
+
+.work-presentation-animation-options .work-office-field.trigger {
+  width: 120px;
+}
+
+.work-presentation-animation-options .work-office-field.direction {
+  width: 82px;
+}
+
+.work-presentation-animation-timing .work-office-field.seconds {
+  width: 64px;
+}
+
+.work-presentation-player .work-slide-element[data-slide-animation-state="pending"] {
+  visibility: hidden;
+  opacity: 0;
+}
+
+.work-presentation-player .work-slide-element[data-slide-animation-state="playing"] {
+  animation-delay: var(--work-slide-animation-delay, 0s);
+  animation-duration: var(--work-slide-animation-duration, .5s);
+  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
+  animation-fill-mode: both;
+}
+
+.work-presentation-player .work-slide-element[data-slide-animation-state="finished"] {
+  visibility: visible;
+  opacity: var(--work-slide-element-opacity, 1);
+  translate: 0;
+  scale: 1;
+}
+
+.work-presentation-player .work-slide-element[data-slide-animation-effect="appear"][data-slide-animation-state="playing"] {
+  animation-name: work-slide-animation-appear;
+  animation-timing-function: step-start;
+}
+
+.work-presentation-player .work-slide-element[data-slide-animation-effect="fade"][data-slide-animation-state="playing"] {
+  animation-name: work-slide-animation-fade;
+}
+
+.work-presentation-player .work-slide-element[data-slide-animation-effect="fly-in"][data-slide-animation-state="playing"] {
+  animation-name: work-slide-animation-fly-in;
+}
+
+.work-presentation-player .work-slide-element[data-slide-animation-effect="zoom"][data-slide-animation-state="playing"] {
+  animation-name: work-slide-animation-zoom;
+}
+
+@keyframes work-slide-animation-appear {
+  from {
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  to {
+    visibility: visible;
+    opacity: var(--work-slide-element-opacity, 1);
+  }
+}
+
+@keyframes work-slide-animation-fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: var(--work-slide-element-opacity, 1);
+  }
+}
+
+@keyframes work-slide-animation-fly-in {
+  from {
+    opacity: 0;
+    translate: var(--work-slide-animation-translate-x, -18%)
+      var(--work-slide-animation-translate-y, 0);
+  }
+
+  to {
+    opacity: var(--work-slide-element-opacity, 1);
+    translate: 0;
+  }
+}
+
+@keyframes work-slide-animation-zoom {
+  from {
+    opacity: 0;
+    scale: .72;
+  }
+
+  to {
+    opacity: var(--work-slide-element-opacity, 1);
+    scale: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .work-presentation-player .work-slide-element[data-slide-animation-state="playing"] {
+    visibility: visible;
+    opacity: var(--work-slide-element-opacity, 1);
+    animation: none;
+    translate: 0;
+    scale: 1;
+  }
+}
+
 .work-presentation-comments-panel {
   border-bottom: 1px solid var(--a3s-line);
   background: var(--a3s-panel);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a3s-lab/office",
-  "version": "0.33.0",
+  "version": "0.34.0",
   "description": "Open-source collaborative browser editors for documents, Markdown, spreadsheets, presentations, and PDFs.",
   "keywords": [
     "office",
@@ -114,6 +114,7 @@
     "playground:visual:spreadsheet-rich-text": "playwright test visual-tests/spreadsheet-rich-text.functional.spec.ts --config playwright.config.ts",
     "playground:visual:spreadsheet-underline": "playwright test visual-tests/spreadsheet-underline.functional.spec.ts --config playwright.config.ts",
     "playground:visual:spreadsheet-table": "playwright test visual-tests/spreadsheet-table.functional.spec.ts --config playwright.config.ts",
+    "playground:visual:presentation-animation": "playwright test visual-tests/presentation-animation.functional.spec.ts --config playwright.config.ts",
     "playground:visual:pdf-page-organization": "playwright test visual-tests/pdf-page-organization.functional.spec.ts --config playwright.config.ts",
     "playground:visual:update": "playwright test --config playwright.config.ts --update-snapshots",
     "performance:fixtures": "bun .a3s-test/performance/generate-fixtures.ts",
@@ -133,6 +134,8 @@
     "test:e2e:large-pdf:check": "a3s-test check tests/e2e/pdf-large-windowing.acl --json",
     "test:e2e:pdf-page-organization": "bun run test:e2e:fixtures && A3S_TEST_SUITE=tests/e2e/pdf-page-organization.acl bash scripts/run-a3s-test-web-gate.sh",
     "test:e2e:pdf-page-organization:check": "a3s-test check tests/e2e/pdf-page-organization.acl --json",
+    "test:e2e:presentation-animation": "A3S_TEST_SUITE=tests/e2e/presentation-animation.acl bash scripts/run-a3s-test-web-gate.sh",
+    "test:e2e:presentation-animation:check": "a3s-test check tests/e2e/presentation-animation.acl --json",
     "test:e2e:large-presentation": "bun .a3s-test/performance/generate-fixtures.ts --presentations-only && a3s-test run tests/e2e/presentation-large-windowing.acl --json",
     "test:e2e:large-presentation:check": "a3s-test check tests/e2e/presentation-large-windowing.acl --json",
     "test:e2e:initial-focus": "a3s-test run tests/e2e/office-editor-initial-focus.acl --json",

package/dist/0~work-presentation-transition.js

@@ -1,38 +0,0 @@
-const CARDINAL_DIRECTIONS = new Set([
-    'left',
-    'right',
-    'up',
-    'down'
-]);
-const SPLIT_DIRECTIONS = new Set([
-    'in',
-    'out'
-]);
-function createWorkSlideTransition(type, previous) {
-    const common = {
-        type,
-        speed: previous?.speed ?? 'medium',
-        advanceOnClick: previous?.advanceOnClick ?? true,
-        advanceAfterMs: previous?.advanceAfterMs
-    };
-    if ('push' === type || 'wipe' === type) return {
-        ...common,
-        direction: previous?.direction && CARDINAL_DIRECTIONS.has(previous.direction) ? previous.direction : 'left'
-    };
-    if ('split' === type) return {
-        ...common,
-        direction: previous?.direction && SPLIT_DIRECTIONS.has(previous.direction) ? previous.direction : 'out',
-        orientation: previous?.orientation ?? 'horizontal'
-    };
-    return common;
-}
-function slideTransitionDurationMilliseconds(transition) {
-    if (transition?.speed === 'fast') return 500;
-    if (transition?.speed === 'slow') return 2000;
-    return 1000;
-}
-function workSlideTransitionsEqual(left, right) {
-    if (!left || !right) return left === right;
-    return left.type === right.type && left.speed === right.speed && left.direction === right.direction && left.orientation === right.orientation && left.advanceOnClick === right.advanceOnClick && left.advanceAfterMs === right.advanceAfterMs;
-}
-export { createWorkSlideTransition, slideTransitionDurationMilliseconds, workSlideTransitionsEqual };