Update narration steps

Author: rossta

src/components/EnumerationDemo.tsx

@@ -108,14 +108,22 @@ const EnumerationDemo: React.FC<EnumerationDemoProps> = ({
 
   const steps: Record<EnumerationType, Step[]> = {
     eager: [
+      {
+        pos: 0,
+        from: 0,
+        to: 0,
+        progress: 0,
+        narrationTitle: 'Start',
+        narrationDescription: 'Press Play to begin',
+      },
       ...Array(7)
         .fill(null)
         .map((_, i) => ({
           pos: i,
           from: 0,
           to: 1,
           progress: i * 8 + 8,
-          narrationTitle: 'map(&:blue!)',
+          narrationTitle: 'map: change color',
           narrationDescription: `Item ${i}`,
         })),
       ...Array(7)
@@ -126,15 +134,15 @@ const EnumerationDemo: React.FC<EnumerationDemoProps> = ({
           to: 2,
           progress: 64 + i * 8,
           explode: !isEven(i),
-          narrationTitle: `select(&:even?)`,
+          narrationTitle: `select: even index?`,
           narrationDescription: `Item ${i}: ${isEven(i) ? 'yes' : 'no'}`,
         })),
       ...[0, 2, 4].map((i, idx) => ({
         pos: i,
         from: 2,
         to: 3,
         progress: 128 + idx * 8,
-        narrationTitle: `take(3)`,
+        narrationTitle: `take: 3`,
         narrationDescription: `Item ${i}`,
       })),
       {
@@ -143,41 +151,58 @@ const EnumerationDemo: React.FC<EnumerationDemoProps> = ({
         to: 2,
         progress: 144,
         skipRemaining: true,
-        narrationTitle: 'Done!',
-        narrationDescription: 'Remaining items not taken',
+        narrationTitle: 'take: 3, done!',
+        narrationDescription: '3 items taken',
+      },
+      {
+        pos: 6,
+        from: 2,
+        to: 2,
+        progress: 144,
+        skipRemaining: true,
+        narrationTitle: 'take: 3, done!',
+        narrationDescription: '3 items taken, remaining items not taken',
       },
     ],
     lazy: [
+      {
+        pos: 0,
+        from: 0,
+        to: 0,
+        progress: 0,
+        narrationTitle: 'Start',
+        narrationDescription: 'Press Play to begin',
+      },
       {
         pos: 0,
         from: 0,
         to: 1,
         progress: 8,
-        narrationTitle: 'Map to blue',
+        narrationTitle: 'map: change color',
         narrationDescription: 'Item 0',
       },
       {
         pos: 0,
         from: 1,
         to: 2,
         progress: 16,
-        narrationTitle: 'Select even?',
+        narrationTitle: 'select: even index?',
         narrationDescription: 'Item 0: yes',
       },
       {
         pos: 0,
         from: 2,
         to: 3,
         progress: 24,
-        narrationTitle: 'Take 1',
+        narrationTitle: 'take: 3',
         narrationDescription: 'Item 0',
       },
       {
         pos: 1,
         from: 0,
         to: 1,
         progress: 32,
-        narrationTitle: 'Map to blue',
+        narrationTitle: 'map: change color',
         narrationDescription: 'Item 1',
       },
       {
@@ -186,39 +211,39 @@ const EnumerationDemo: React.FC<EnumerationDemoProps> = ({
         to: 2,
         progress: 40,
         explode: true,
-        narrationTitle: 'Select even?',
+        narrationTitle: 'select: even index?',
         narrationDescription: 'Item 1: no',
       },
       {
         pos: 2,
         from: 0,
         to: 1,
         progress: 56,
-        narrationTitle: 'Map to blue',
+        narrationTitle: 'map: change color',
         narrationDescription: 'Item 2',
       },
       {
         pos: 2,
         from: 1,
         to: 2,
         progress: 64,
-        narrationTitle: 'Select even?',
+        narrationTitle: 'select: even index?',
         narrationDescription: 'Item 2: yes',
       },
       {
         pos: 2,
         from: 2,
         to: 3,
         progress: 72,
-        narrationTitle: 'Take 3',
+        narrationTitle: 'take: 3',
         narrationDescription: 'Item 2',
       },
       {
         pos: 3,
         from: 0,
         to: 1,
         progress: 84,
-        narrationTitle: 'Map to blue',
+        narrationTitle: 'map: change color',
         narrationDescription: 'Item 3',
       },
       {
@@ -227,39 +252,39 @@ const EnumerationDemo: React.FC<EnumerationDemoProps> = ({
         to: 2,
         progress: 92,
         explode: true,
-        narrationTitle: 'Select even?',
+        narrationTitle: 'select: even index?',
         narrationDescription: 'Item 3: no',
       },
       {
         pos: 4,
         from: 0,
         to: 1,
         progress: 108,
-        narrationTitle: 'Map to blue',
+        narrationTitle: 'map: change color',
         narrationDescription: 'Item 4',
       },
       {
         pos: 4,
         from: 1,
         to: 2,
         progress: 116,
-        narrationTitle: 'Select even?',
+        narrationTitle: 'select: even index?',
         narrationDescription: 'Item 4: yes',
       },
       {
         pos: 4,
         from: 2,
         to: 3,
         progress: 124,
-        narrationTitle: 'Take 3',
+        narrationTitle: 'take: 3',
         narrationDescription: 'Item 4',
       },
       {
         pos: 4,
         from: 3,
         to: 3,
         progress: 132,
-        narrationTitle: 'Done!',
+        narrationTitle: 'take 3, done!',
         narrationDescription: '3 items taken',
       },
       {
@@ -268,8 +293,8 @@ const EnumerationDemo: React.FC<EnumerationDemoProps> = ({
         to: 0,
         progress: 140,
         skipRemaining: true,
-        narrationTitle: 'Done!',
-        narrationDescription: 'Remaining items skipped',
+        narrationTitle: 'take: 3, done!',
+        narrationDescription: '3 items taken, remaining items skipped',
       },
     ],
   };